fis-修改点击选中交互

app/src/components/Header.vue → app/src/components/Headers.vue

@@ -2,14 +2,22 @@
     <div>
 <div class="header">
  <div class="title-card">  
-    <ul  v-for="(item,index) in titleList" :key="index">  
-        <li class="bg-img">{{ item.name }}</li> 
+    <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
+        <img src="../assets/Vector.png" alt="">
+        总览
+    </li> 
+    <ul   v-for="(item,index) in titleList" :key="index">   
+        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">{{ item.name }}</li> 
  </ul>
  </div>
  <div class="title-card"> 
-     <ul v-for="(item,index) in titleList1" :key="index">  
-        <li class="bg-img">{{ item.name }}</li> 
- </ul></div>
+     <ul v-for="(item,index) in titleList1" :key="index" >  
+        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">{{ item.name }}</li> 
+ </ul>
+ <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
+        <img src="../assets/out.png" alt="">   
+    </li> 
+</div>
 </div>
     </div>
 </template>
@@ -29,10 +37,6 @@ export default{
             {load:Image4}
             ],
             titleList:[
-                {
-                    name:'总览',
-                    id:1
-                },
                 {
                     name:'基础信息',
                     id:2
@@ -61,12 +65,21 @@ export default{
                 },
             
             ],
-            test:1
+            test:1,
+            flag:1
         }
     },
     mounted(){
         console.log(this.test);
     },
+    methods:{
+        ConfirmBtn(num){
+        this.flag=num
+        },
+        getClass(v){
+          return this.flag==v?'bg-img active':'bg-img'
+        }
+    },
     created() {
         console.log(this)
     }
@@ -77,35 +90,48 @@ export default{
 .header{
   width: 100%;
   height: 120px;
+  /* background: url('../assets/top.png') center no-repeat; */
   background: url('../assets/top.png') center no-repeat;
+
   display: flex;
   justify-content: space-between;
-
 }
 .title-card{
-    width: 400px;
-z-index: 1000;
-color: aliceblue;
+ /* width: 400px; */
 display: flex;
-padding: 20px 20px;
-
+padding: 40px 20px ;
+font-size: 18px;
 }
 img{
- width: 120px;
- height: 40px;   
+  width: 16px;
+  height: 15px;
 }
 .tab-list{
-  
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
 .bg-img{
-    width: 120px;
-    height: 40px;
-    background: url('../assets/btn.png') no-repeat;
-    background-size: 120% 100%;
+    width: 138px;
+    height: 48px;
+    font-size: 18px;
+    background: url('../assets/btn.png')  no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 49px;
+}
+.bg-img:hover{
+    cursor: pointer;
+}
+/* 选中效果 */
+.active{
+    width: 150px;
+    height: 48px;
+    font-size: 18px;
+    background: url('../assets/active-btn.png')  no-repeat !important;
+    background-size: 100% 100%;
     text-align: center;
-    line-height: 40px;
+    line-height: 49px;
 }
+
 </style>

app/src/views/HomeView.vue

@@ -4,7 +4,7 @@
   </main> -->
   <div class="home">
     <div >
-      <Header />
+      <Headers />
       <div>
             <border-panel title="基础信息">
           1111
@@ -23,9 +23,9 @@
   </div>
 </template>
 <script >
-import Header from "@/components/Header.vue";
+import Headers from "@/components/Headers.vue";
 export default{
-components:{Header}
+components:{Headers}
 }
 </script>
 <style scoped>
@@ -35,6 +35,6 @@ components:{Header}
   background-size: 100% 100%;
   width: 100%;
   overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-y: scroll;
 }
 </style>