new first page1

src/views/Home.vue

@@ -8,8 +8,8 @@
         <div class="picture">
           <div class="first"  @mouseover="mouseOver" @mouseleave="mouseLeave">
             <div class="bg">
-              <p class="line"></p>
-              <h6>面对老板和客户</h6>
+              <p class="line" :class="{lineMargin:activeFlag}"></p>
+              <h6 v-bind:class="{titleMargin:activeFlag}">面对老板和客户</h6>
               <ul v-show="activeFlag">
                 <li v-for="(box11Arr,index) in box11Arrs" :key="index">
                   <p><span>· </span>{{box11Arr}}</p>
@@ -17,21 +17,10 @@
               </ul>
             </div>
           </div>
-          <!--<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>
+              <p class="line" :class="{lineMargin:activeTeamFlag}"></p>
+              <h6 :class="{titleMargin:activeTeamFlag}">面对团队内部</h6>
               <ul v-show="activeTeamFlag">
                 <li v-for="(box12Arr,index) in box12Arrs" :key="index">
                   <p><span>· </span>{{box12Arr}}</p>
@@ -39,17 +28,6 @@
               </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">
@@ -169,14 +147,7 @@ h5{
   background: url('./images/1@2x.png') no-repeat;
   background-size: 550px 230px;
 }
-#content .box1 .picture .first1{
-  width: 550px;
-  height: 230px;
-  border-radius: 20px;
-  background: url('./images/1@2x.png') no-repeat;
-  background-size: 550px 230px;
-}
-.bg,.bg1{
+.bg{
   height: 220px;
 }
 #content .box1 .picture .second{
@@ -186,67 +157,42 @@ h5{
   background: url("./images/2@2x.png") no-repeat;
   background-size: 550px 230px;
 }
-#content .box1 .picture .second1{
-  width: 550px;
-  height: 230px;
-  border-radius: 20px;
-  background: url("./images/2@2x.png") no-repeat;
-  background-size: 550px 230px;
-}
 .box1 .first .line{
   margin-top: 70px;
   margin-left: 40px;
   width: 30px;
   border-top: 2px solid #677897;
 }
-.box1 .first1 .line1{
-  margin-top: 50px;
-  margin-left: 40px;
-  width: 30px;
-  border-top: 2px solid #677897;
-}
 .box1 .second .line{
   margin-top: 70px;
   margin-left: 40px;
   width: 30px;
   border: 1px solid #FF8464;
 }
-.box1 .second1 .line1{
-  margin-top: 50px;
-  margin-left: 40px;
-  width: 30px;
-  border: 1px solid #FF8464;
-}
-.box1 .first h6,.box1 .first1 h6{
+.box1 h6{
   margin-top: 30px;
   margin-left: 40px;
-  color: #566784;
   font-size: 20px;
-  line-height: 28px;
+  color: #566784;
   letter-spacing: 0.22px;
 }
-.box1 .second h6,.box1 .second1 h6{
-  margin-top: 30px;
-  margin-left: 40px;
-  color: #FF8464;
-  font-size: 20px;
-  line-height: 28px;
-  letter-spacing: 0.22px;
+.second h6{
+  color: #FF8464
 }
-.box1 .bg1 ul{
+.bg ul{
   margin-top: 10px;
   margin-left: 40px;
 }
-.box1 .bg1 ul li{
+.bg ul li{
   font-size: 16px;
-  line-height: 22px;
   letter-spacing: 0.18px;
-  color: #556874;
+  line-height: 22px;
+  color: #566784
 }
-.box1 .bg1 .second1 ul li{
+.second .bg ul li{
   color: #FF8464
 }
-.box1 .bg1 ul li span{
+.bg ul li span{
   font-weight: 600;
 }
 #content .box{
@@ -384,8 +330,11 @@ h5{
   top: 436px;
   left:122px;
 }
-.active{
-  color: #FF8464;
+.lineMargin{
+  margin-top: 50px!important;
+}
+.titleMargin{
+  margin-top: 30px!important
 }
 </style>