修改mouseleave事件逻辑

src/views/Home.vue

@@ -6,40 +6,50 @@
         <h4>每个项目，我们从认知做原型开始</h4>
         <h5>深入了解行业背景，深度沟通用户需求，规划处最合适的产品</h5>
         <div class="picture">
-          <div class="first" v-if="activeFlag" @mouseover="mouseOver">
+          <div class="first"  @mouseover="mouseOver" @mouseleave="mouseLeave">
             <div class="bg">
               <p class="line"></p>
               <h6>面对老板和客户</h6>
-            </div>
-          </div>
-          <div class="first1" v-else  @mouseleave="mouseLeave">
-            <div class="bg1">
-              <p class="line1"></p>
-              <h6>面对老板和客户</h6>
-              <ul>
+              <ul v-show="activeFlag">
                 <li v-for="(box11Arr,index) in box11Arrs" :key="index">
                   <p><span>· </span>{{box11Arr}}</p>
                 </li>
               </ul>
             </div>
           </div>
-          <div class="second" v-if="activeFlag" @mouseover="mouseOver">
+          <!--<div class="first1" v-else  @mouseleave="mouseLeave">-->
+            <!--<div class="bg1">-->
+              <!--<p class="line1"></p>-->
+              <!--<h6>面对老板和客户</h6>-->
+              <!--<ul>-->
+                <!--<li v-for="(box11Arr,index) in box11Arrs" :key="index">-->
+                  <!--<p><span>· </span>{{box11Arr}}</p>-->
+                <!--</li>-->
+              <!--</ul>-->
+            <!--</div>-->
+          <!--</div>-->
+          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam" >
             <div class="bg">
               <p class="line"></p>
               <h6>面对团队内部</h6>
-            </div>
-          </div>
-          <div class="second1" v-else @mouseLeave = 'mouseLeave'>
-            <div class="bg1">
-              <p class="line1"></p>
-              <h6>面对团队内部</h6>
-              <ul>
+              <ul v-show="activeTeamFlag">
                 <li v-for="(box12Arr,index) in box12Arrs" :key="index">
                   <p><span>· </span>{{box12Arr}}</p>
                 </li>
               </ul>
             </div>
           </div>
+          <!--<div class="second1" v-else @mouseLeave = 'mouseLeave'>-->
+            <!--<div class="bg1">-->
+              <!--<p class="line1"></p>-->
+              <!--<h6>面对团队内部</h6>-->
+              <!--<ul>-->
+                <!--<li v-for="(box12Arr,index) in box12Arrs" :key="index">-->
+                  <!--<p><span>· </span>{{box12Arr}}</p>-->
+                <!--</li>-->
+              <!--</ul>-->
+            <!--</div>-->
+          <!--</div>-->
         </div>
       </div>
       <div class="box">
@@ -99,7 +109,7 @@
         </div>
       </div>
     </div>
-    <img src="./images/4-BG@2x.png" alt="加载失败" class="background"> 
+    <img src="./images/4-BG@2x.png" alt="加载失败" class="background">
     <home-footer></home-footer>
   </div>
 </template>
@@ -427,7 +437,8 @@ export default {
           content:['股票自动交易系统','汽车行业互联网监控系统']
         }
       ],
-      activeFlag:true,
+      activeFlag:false,
+      activeTeamFlag:false,
       // saleArray: [],
       // saleArray2: [],
       // trainPicArry: [],
@@ -480,10 +491,17 @@ export default {
         .catch(error => {});
     },
     mouseOver(){
-      this.activeFlag = false
+      this.activeFlag = true
     },
     mouseLeave(){
-      this.activeFlag = true
+      this.activeFlag = false
+    },
+    mouseOverTeam(){
+      this.activeTeamFlag = true
+    },
+    mouseLeaveTeam(){
+      console.log(111)
+      this.activeTeamFlag = false
     }
   },
   mounted() {