background color about vue component

component/About.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <h4 style="color:orange;">about vue component!!!</h4>
+  <h4>about vue component!!!</h4>
 <!--  <h4>{{number}}</h4>-->
 <!--
   <p>Louis_Wiki ---- we are a team to provide the service to gift customization</p>
@@ -23,7 +23,11 @@ export default {
   }
 }
 </script>
-
+<style scoped>
+div h4{
+  color:orange;
+}
+</style>
 
 
 

index.html

@@ -10,12 +10,13 @@
     <!-- <h3>this is node -> Vue test</h3> -->
     <div id='app'  style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
     <template id="my-app">
-		<header>default header component</header>
-		<!--<div v-html='info'></div> 
+		<Header>default header component</Header>
+		<!-- <div v-html='info'></div>  -->
 		<Home @op="add">home vue</Home>
 		<h5 style="color:oranged">{{number}}</h5>
 		<About>this is About</About>
-		<test></test>-->
+		<test></test>
+
 		<h3>{{$t('messages.app')}}</h3>
 		<h3>{{$t('messages.philosophy')}}</h3>
 		<div>

style/index.css

@@ -55,12 +55,12 @@ dialog::backdrop{
     display: inline-block;
     margin-left: 10px;
     padding: 2px;
-    /* border-radius: 5px; */
+    border-radius: 5px;
     /* border: 1px solid #862930; */
     text-decoration: none;
 }
-.approve router-link span a:hover+.approve{
+.approve router-link span a:hover{
     color:#121929;
-    background-color:#862930 ;
+    /* background-color:#862930 ; */
     /* border: 1px solid #121929; */
 }