new first page3

src/components/swiperr.vue

@@ -81,7 +81,7 @@ export default {
 
 .swiper-wrapper img {
   width: 100%;
-  height: 400px;
+  // height: 400px;
 }
 
 .swiper-button-next {

src/views/Home.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="home" v-cloak>
-    <swiperr :message="messageParent"></swiperr>
+    <swiperr :message="messageParent" class="wheelPicture"></swiperr>
     <div id="content">
       <div class="box1">
-        <h4>每个项目，我们从认知做原型开始</h4>
-        <h5>深入了解行业背景，深度沟通用户需求，规划处最合适的产品</h5>
+        <h4>每个项目，我们从认真做原型开始</h4>
+        <h5>深入了解行业背景，深度沟通用户需求，规划出最合适的产品</h5>
         <div class="picture">
-          <div class="first"  @mouseover="mouseOver" @mouseleave="mouseLeave">
-            <div class="bg">
-              <p class="line" :class="{lineMargin:activeFlag}"></p>
+          <div class="first"  @mouseover="mouseOver" @mouseleave="mouseLeave" :class="{mouseoverBackgroung1:activeFlag}">
+            <div class="bg" :class="{paddingMargin:activeFlag}">
+              <p class="line"></p>
               <h6 v-bind:class="{titleMargin:activeFlag}">面对老板和客户</h6>
               <ul v-show="activeFlag">
                 <li v-for="(box11Arr,index) in box11Arrs" :key="index">
@@ -17,9 +17,9 @@
               </ul>
             </div>
           </div>
-          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam" >
-            <div class="bg">
-              <p class="line" :class="{lineMargin:activeTeamFlag}"></p>
+          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam" :class="{mouseoverBackgroung2:activeTeamFlag}">
+            <div class="bg" :class="{paddingMargin:activeTeamFlag}">
+              <p class="line"></p>
               <h6 :class="{titleMargin:activeTeamFlag}">面对团队内部</h6>
               <ul v-show="activeTeamFlag">
                 <li v-for="(box12Arr,index) in box12Arrs" :key="index">
@@ -42,13 +42,10 @@
           <div class="box3">
             <h4>项目开发</h4>
             <p><span>芝麻开发模式：</span>
-              该模式下我们按项目人员填写的实际工作时长和工作进度计费，只需您
-              按月支付项目费用。省去了估价环节，需求变更、设计、会议等所有环节收费
-              透明，项目成本一目了然。
+              该模式下我们按项目人员填写的实际工作时长和工作进度计费，只需您按月支付项目费用。省去了估价环节，需求变更、设计、会议等所有环节收费透明，项目成本一目了然。
             </p>
             <p><span>传统开发模式：</span>
-               我们支持对项目按传统模式开发计费，根据原型进行详细评估，给出整体项目报价，
-               报价更精准。签订合同后客户支付50%预付款，开发完成交付后支付剩余50%尾款。
+               我们支持对项目按传统模式开发计费，根据原型进行详细评估，给出整体项目报价，报价更精准。签订合同后客户支付50%预付款，开发完成交付后支付剩余50%尾款。
             </p>
           </div>
           <div class="box4">
@@ -66,7 +63,7 @@
                   <div class="downBox">
                     <ul>
                       <li v-for="(content,inde) in devoteArr.content" :key="inde">
-                        <p><span>· </span>{{content}}</p>
+                        <span>·</span><p>{{content}}</p>
                       </li>
                     </ul>
                   </div>
@@ -76,11 +73,10 @@
           </div>
         </div>
         <div class="right">
-          <h4>原型计划</h4>
+          <h4>原型规划</h4>
           <div class="text">
             <p>原型阶段只需您预付2W项目资金，我们根据需求完成最合适的产品原型，
-            原型按芝麻开发模式计费，项目资金多退少不补。完成后交付原型相关的
-            所有文件，后续的开发阶段，由您自主选择合作方式。
+            原型按芝麻开发模式计费，项目资金多退少不补。完成后交付原型相关的所有文件，后续的开发阶段，由您自主选择合作方式。
             </p>
             <img src="./images/home_right.png" alt="插画">
           </div>
@@ -128,12 +124,6 @@ h5{
   right: 0px;
   z-index: -999;
 }
-#content .box1 h4{
-  width: 480px;
-}
-#content .box1 h5{
-  width: 594px;
-}
 #content .box1 .picture{
   margin-top: 60px;
   display: flex;
@@ -141,30 +131,29 @@ h5{
   justify-content: space-between;
 }
 #content .box1 .picture .first{
-  width: 550px;
+  width: 45.83%;
   height: 230px;
   border-radius: 20px;
   background: url('./images/1@2x.png') no-repeat;
-  background-size: 550px 230px;
+  background-size: 100% 100%;
 }
 .bg{
   height: 220px;
+  padding-top: 70px;
 }
 #content .box1 .picture .second{
-  width: 550px;
+  width: 45.83%;
   height: 230px;
   border-radius: 20px;
   background: url("./images/2@2x.png") no-repeat;
-  background-size: 550px 230px;
+  background-size: 100% 100%;
 }
 .box1 .first .line{
-  margin-top: 70px;
   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;
@@ -196,18 +185,13 @@ h5{
   font-weight: 600;
 }
 #content .box{
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 110px;
   position: relative;
 }
-#content .box2 h4{
-  width: 384px;
-}
-#content .box2 h5{
-  width: 688px;
-}
 #content .box2 .picture{
   margin-top: 60px;
   width: 612px;
@@ -220,7 +204,7 @@ h5{
 #content .box3 h4{
   font-size: 28px;
   line-height: 40px;
-  width: 475px;
+  /* width: 475px; */
   margin-top: 80px;
   margin-bottom: 40px;
 }
@@ -238,12 +222,6 @@ h5{
 .box4{
   margin-top: 116px;
 }
-.box4 h4{
-  width: 384px;
-}
-.box4 h5{
-  width: 362px;
-}
 .box4 .img .devote{
   margin-top: 60px;
   display: flex;
@@ -287,8 +265,18 @@ h5{
   width: 224px;
   margin: 20px 0px 0px 28px;
 }
-.downBox ul li p{
+.downBox ul li{
+  display: flex;
   width: 224px;
+}
+.downBox ul li span{
+  width: 10px;
+  font-weight: 600;
+  height: 26px;
+  line-height: 26px;
+}
+.downBox ul li p{
+  width: 214px;
   font-size: 16px;
   line-height: 26px;
   color: #677897;
@@ -297,9 +285,6 @@ h5{
   word-wrap: break-word;
   word-break:normal;
 }
-.downBox ul li span{
-  font-weight: 600;
-}
 .right{
   width: 668px;
   height: 1110px;
@@ -330,12 +315,193 @@ h5{
   top: 436px;
   left:122px;
 }
-.lineMargin{
-  margin-top: 50px!important;
-}
 .titleMargin{
   margin-top: 30px!important
 }
+.mouseoverBackgroung1{
+  background: url('./images/点击态.png')!important;
+}
+.mouseoverBackgroung2{
+  background: url('./images/点击状态.png')!important;
+}
+.paddingMargin{
+  padding-top: 50px!important
+}
+.wheelPicture{
+  max-height: 400px;
+}
+@media screen and (max-width: 1440px){
+  #content{
+    width: 100%!important;
+    padding: 0px 8.3%!important;
+  }
+  .background{
+    width: 50%;
+  }
+  .picture{
+    /* height: auto; */
+    margin-top: 50px!important;
+  }
+  .bg{
+    height: auto;
+    padding-top: 60px!important;
+  }
+  .box1 .first{
+    background: url('./images/1@2x.png') no-repeat!important;
+    background-size:100% 100%!important ;
+  }
+  .box1 .second{
+    background: url('./images/2@2x.png') no-repeat!important;
+    background-size:100% 100%!important ;
+  }
+  .box{
+    width: 100%!important;
+    margin-top: 100px!important;
+  }
+  .box2 .picture{
+    height: auto;
+    width: 42%!important;
+  }
+  .box2 h4{
+    font-size: 30px!important;
+  }
+  .box2 h5{
+    font-size: 16px!important;
+  }
+  .box2 .picture img{
+    width: 530px!important;
+  }
+  .box3{
+    width: 32%;
+  }
+  #content .box3 p{
+  width: 100%;
+  font-size: 18px;
+  color: #677897;
+  text-align: justify;
+  line-height: 30px;
+  margin-bottom: 50px;
+}
+  .box4{
+    width: 100%!important;
+  }
+  .box4 .img{
+    /* background: #FF8464; */
+    width: 24%!important;
+    margin-right: 1%!important;
+  }
+  .devote>li{
+    width: 100%!Important;
+  }
+  .upBox{
+    width: 100%!important;
+  }
+  .downBox{
+    width: 100%!important;
+    height: 185px;
+  }
+  .downBox ul{
+    width: 100%!important;
+  }
+  .downBox ul li{
+    width: 100%!important;
+  }
+  .downBox ul li span{
+    width: 3%!important
+  }
+  .downBox ul li p{
+    width: 145px!important;
+    font-size: 14px;
+    word-wrap: break-word;
+    word-break:normal;
+    }
+}
+@media screen and (max-width: 1250px) {
+  .right h4{
+    margin-left: 260px;
+    font-size: 26px;
+  }
+  .right p{
+    margin-left: 260px;
+    font-size: 16px;
+  }
+  .box2 .picture img{
+    width: 100%!important;
+    height: auto;
+  }
+}
+  @media screen and (max-width: 1200px) {
+    #content{
+      width: 1440px!important;
+    }
+.box4{
+  margin-top: 116px;
+}
+.box4 .img .devote{
+  margin-top: 60px;
+  display: flex;
+}
+.box4 .img .devote li{
+  width: 280px!important;
+  margin-right: 26px;
+}
+.upBox{
+  width: 280px!important;
+  height: 150px;
+  background: #EAEFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.upBox div{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.upBox img{
+  width: 44px;
+  height: 44px;
+}
+.upBox p{
+  margin-top: 20px;
+  font-size: 20px;
+  line-height: 28px;
+  color: #566784;
+  letter-spacing: 0;
+}
+.downBox{
+  height: 146px;
+  border: 1px solid #EAEFFF;
+  margin-bottom: 100px;
+}
+.downBox ul{
+  display: flex;
+  flex-direction: column;
+  width: 224px!important;
+  margin: 20px 0px 0px 28px;
+}
+.downBox ul li{
+  display: flex;
+  width: 214px!important;
+}
+.downBox ul li span{
+  width: 10px;
+  font-weight: 600;
+  height: 26px;
+  line-height: 26px;
+}
+.downBox ul li p{
+  width: 214px!important;
+  font-size: 16px;
+  line-height: 26px;
+  color: #677897;
+  letter-spacing: 0;
+  text-align: justify;
+  word-wrap: break-word;
+  word-break:normal;
+}
+}
+
 </style>
 
 <script>