new first page4 移动端适应

src/App.vue

@@ -99,8 +99,18 @@
 @media only screen and (max-width: 1440px) {
   #nav {
     width: 100% !important;
+    position: relative;
+  }
+  #nav img {
+    width: 160px;
+    height: 59px;
+    margin-top: 11px;
+    margin-right: 0px!important;
+  }
+  #nav-a{
+    position :absolute;
+    right :8.33%;
   }
-
   .liubai {
     width: 83.3% !important;
     margin: auto 8.3% !important;
@@ -111,10 +121,16 @@
   #nav-a {
     display: none !important;
   }
-
+  .fenge {
+    height: 40px !important;
+    backgroundColor: blue;
+  }
   .phonemenu {
     display: block !important;
   }
+  #home_tab img{
+    display:none;
+  }
 }
 
 @media only screen and (min-width: 661px) {
@@ -122,7 +138,42 @@
     display: none;
   }
 }
-
+@media screen and (max-width :1100px ) {
+  #nav-a {
+  display: flex;
+  a {
+    font-size: 17px!important;
+    width: 100px!important;
+    &.router-link-exact-active {
+      width: 90px!important;
+    }
+  }
+}
+}
+@media screen and (max-width :800px ) {
+  #nav-a {
+  display: flex;
+  a {
+    font-size: 16px!important;
+    width: 90px!important;
+    &.router-link-exact-active {
+      width: 80px!important;
+    }
+  }
+}
+}
+@media screen and (max-width :750px ) {
+  #nav-a {
+  display: flex;
+  a {
+    font-size: 15px!important;
+    width: 80px!important;
+    &.router-link-exact-active {
+      width: 70px!important;
+    }
+  }
+}
+}
 .fenge {
   height: 80px;
   backgroundColor: blue;
@@ -147,7 +198,6 @@
   border-radius: 2%;
   padding-top: 40px;
 }
-
 .switching li {
   padding-bottom: 6px !important;
 }
@@ -209,6 +259,7 @@
   margin-top: 11px;
   margin-right: 515px;
 }
+
 </style>
 
 <script>

src/components/swiperr.vue

@@ -75,13 +75,12 @@ export default {
 
 .swiper-wrapper {
   width: 100%;
-  height: 400px;
   object-fit:contain
 }
 
 .swiper-wrapper img {
   width: 100%;
-  height: 100%;
+  max-height:400px;
 }
 
 .swiper-button-next {

src/views/Home.vue

@@ -6,7 +6,7 @@
         <h4>每个项目，我们从认真做原型开始</h4>
         <h5>深入了解行业背景，深度沟通用户需求，规划出最合适的产品</h5>
         <div class="picture">
-          <div class="first"  @mouseover="mouseOver" @mouseleave="mouseLeave" >
+          <div class="first" @mouseover="mouseOver" @mouseleave="mouseLeave" @touchmove="mouseOver" @touchend="mouseLeave">
             <div class="bg" :class="{paddingMargin:activeFlag}">
               <p class="line"></p>
               <h6 v-bind:class="{titleMargin:activeFlag}">面对老板和客户</h6>
@@ -16,8 +16,10 @@
                 </li>
               </ul>
             </div>
+            <img src="./images/1@2x.png" alt="加载失败" v-if="!activeFlag">
+            <img src="./images/点击态1.png" alt="加载失败" v-else>            
           </div>
-          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam">
+          <div class="second" @mouseover="mouseOverTeam" @mouseleave="mouseLeaveTeam" @touchmove="mouseOverTeam" @touchend="mouseLeaveTeam">
             <div class="bg" :class="{paddingMargin:activeTeamFlag}">
               <p class="line"></p>
               <h6 :class="{titleMargin:activeTeamFlag}">面对团队内部</h6>
@@ -27,18 +29,28 @@
                 </li>
               </ul>
             </div>
+            <img src="./images/2@2x.png" alt="加载失败" v-if="!activeTeamFlag">
+            <img src="./images/点击状态1.png" alt="加载失败" v-else>
           </div>
         </div>
       </div>
       <div class="box">
-        <div class="left">
-          <div class="box2">
+        <div class="box2">
+          <div class="left">
             <h4>项目开发流程，选择更灵活</h4>
             <h5>一流的团队，规范的流程，完善的评价体系共同保障您的项目的高质量产出</h5>
             <div class="picture">
               <img src="./images/3@2x.png" alt="加载失败">
             </div>
           </div>
+          <div class="right">
+            <h4>原型规划</h4>
+            <div class="text">
+              <p>原型阶段只需您预付2W项目资金，我们根据需求完成最合适的产品原型，原型按芝麻开发模式计费，项目资金多退少不补。完成后交付原型相关的所有文件，后续的开发阶段，由您自主选择合作方式。</p>
+              <img src="./images/home_right.png" alt="插画">
+            </div>
+          </div>
+        </div>
           <div class="box3">
             <h4>项目开发</h4>
             <p><span>芝麻开发模式：</span>
@@ -71,16 +83,6 @@
               </ul>
             </div>
           </div>
-        </div>
-        <div class="right">
-          <h4>原型规划</h4>
-          <div class="text">
-            <p>原型阶段只需您预付2W项目资金，我们根据需求完成最合适的产品原型，
-            原型按芝麻开发模式计费，项目资金多退少不补。完成后交付原型相关的所有文件，后续的开发阶段，由您自主选择合作方式。
-            </p>
-            <img src="./images/home_right.png" alt="插画">
-          </div>
-        </div>
       </div>
     </div>
     <img src="./images/4-BG@2x.png" alt="加载失败" class="background">
@@ -112,13 +114,13 @@ h5{
 
 /*新首页样式开始*/
 #content{
-  width: 80%;
+  width: 1440px;
+  padding: 0 120px;
   margin: 0 auto;
-  padding: 0px 120px;
   margin-top: 80px;
   position: relative;
 }
-.background{  /*未加载时*/
+.background{  /*原型规划的样式*/
   width: 788px;
   height: 1388px;
   position: absolute;
@@ -136,19 +138,28 @@ h5{
   width: 42.83%;
   height: 230px;
   border-radius: 20px;
-  background: url('./images/1@2x.png') no-repeat;
-  background-size: 100% 100%;
+  position: relative;
+  /* background: url('./images/1@2x.png') no-repeat; */
+  /* background-size: 100% 100%; */
+}
+#content .box1 .picture .second img,
+#content .box1 .picture .first img {
+  position: absolute;
+  width: 100%;
+  height: 230px;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }
 .bg{
-  height: 270px;
+  height: 230px;
   padding-top: 70px;
 }
 #content .box1 .picture .second{
+  position: relative;
   width: 42.83%;
   height: 230px;
   border-radius: 20px;
-  background: url("./images/2@2x.png") no-repeat;
-  background-size: 100% 100%;
 }
 .box1 .first .line{
   margin-left: 40px;
@@ -158,7 +169,7 @@ h5{
 .box1 .second .line{
   margin-left: 40px;
   width: 30px;
-  border: 1px solid #FF8464;
+  border-top: 2px solid #FF8464;
 }
 .box1 h6{
   margin-top: 30px;
@@ -189,24 +200,26 @@ h5{
 #content .box{
   width: 100%;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
   margin-top: 110px;
-  position: relative;
 }
-#content .box2 .picture{
-  margin-top: 60px;
+.left{
   width: 612px;
-  height: 498px;
 }
-#content .box2 .picture img{
-  width:612px;
+.left .picture {
+  width: 100%;
+}
+#content .left .picture{
+  margin-top: 60px;
   height: 498px;
 }
+#content .left .picture img{
+  width:100%;
+  height: auto;
+}
 #content .box3 h4{
   font-size: 28px;
   line-height: 40px;
-  /* width: 475px; */
   margin-top: 80px;
   margin-bottom: 40px;
 }
@@ -287,35 +300,37 @@ h5{
   word-wrap: break-word;
   word-break:normal;
 }
+.box2{
+  height: 637px;
+  display: flex;
+  justify-content: space-between;
+}
 .right{
-  width: 668px;
-  height: 1110px;
-  position: absolute;
-  right: 0;
-  z-index: -100;
+  width: 490px;
+  /* height: 637px; */
 }
 .right h4{
-  margin-left: 178px;
+  /* margin-left: 178px; */
   margin-top: 256px;
   font-size: 28px;
   color: #677897;
 }
 .right p{
   margin-top: 40px;
-  width: 490px;
+  width: 100%;
   font-size: 18px;
   line-height: 30px;
-  margin-left: 178px;
+  color: #677897;
 }
 .right .text{
-  width:668px;
+  width:100%;
   height: 1318px;
   position: relative;
 }
 .right img{
   position: absolute;
   top: 436px;
-  left:122px;
+  right:6.9%;
 }
 .titleMargin{
   margin-top: 30px!important
@@ -327,216 +342,388 @@ h5{
   /*border-radius: 20px;*/
   /*background-size: 100% 100%;*/
 /*}*/
-#content .box1 .picture .first:hover{
+/* #content .box1 .picture .first:hover{
   background: url('./images/点击态.png')!important;
   width: 42.83%!important;
-  height: 100%!important;
+  height: 230px!important;
   border-radius: 20px;
   background-size: 100% 100%;
-}
-#content .box1 .picture .second:hover {
+} */
+/* #content .box1 .picture .second:hover {
   background: url('./images/点击状态.png')!important;
   width: 42.83%!important;
-  height: 100%!important;
+  height: 230px!important;
   border-radius: 20px;
   background-size: 100% 100%;
-}
-
-/*.mouseoverBackgroung2{*/
-  /*background: url('./images/点击状态.png')!important;*/
-  /*width: 42.83%!important;*/
-  /*height: 100%!important;*/
-  /*border-radius: 20px;*/
-  /*background-size: 100% 100%;*/
-/*}*/
+} */
 .paddingMargin{
   padding-top: 50px!important
 }
-.wheelPicture{
-  /*max-height: 400px;*/
-}
 @media screen and (max-width: 1440px){
   #content{
     width: 100%!important;
     padding: 0 8.3%!important;
   }
   .background{
-    width: 50%;
+    width: 42.5;
   }
   .picture{
     /* height: auto; */
     margin-top: 50px!important;
   }
+  .left{
+    width: 51%!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{
+  .left h4{
     font-size: 30px!important;
   }
-  .box2 h5{
+  .left h5{
     font-size: 16px!important;
   }
-  .box2 .picture img{
-    width: 530px!important;
+  .right{
+    width: 41%;
   }
   .box3{
     width: 32%;
   }
   #content .box3 p{
-  width: 100%;
-  font-size: 18px;
-  color: #677897;
-  text-align: justify;
-  line-height: 30px;
-  margin-bottom: 50px;
+    width: 100%;
+    font-size: 18px;
+    color: #677897;
+    text-align: justify;
+    line-height: 30px;
+    margin-bottom: 50px;
+    }
+    .box4{
+      width: 100%!important;
+    }
+    .paddingMargin{
+      padding-top: 40px!important
+    }
 }
-  .box4{
-    width: 100%!important;
+@media screen and (max-width: 1250px) {
+  .right h4{
+    font-size: 26px;
   }
-  .box4 .img{
-    /* background: #FF8464; */
-    width: 24%!important;
-    margin-right: 1%!important;
+  .right p{
+    font-size: 16px;
   }
-  .devote>li{
-    width: 100%!Important;
+  #content{
+    margin-top: 50px;
   }
-  .upBox{
-    width: 100%!important;
+  .box1 h4{
+    font-size: 28px;
   }
-  .downBox{
-    width: 100%!important;
-    height: 185px;
+  .box1 h5{
+    margin-top: 8px;
+    font-size: 17px;
   }
-  .downBox ul{
-    width: 100%!important;
+  .box1 .picture{
+    margin-top: 40px!important;
   }
-  .downBox ul li{
-    width: 100%!important;
+  #content .box1 .picture .first,
+  #content .box1 .picture .second{
+    height: 200px!important
   }
-  .downBox ul li span{
-    width: 3%!important
+  #content .box1 .picture .first img,
+  #content .box1 .picture .second img{
+    height: 200px!important
   }
-  .downBox ul li p{
-    width: 145px!important;
-    font-size: 14px;
-    word-wrap: break-word;
-    word-break:normal;
-    }
+  #content .box1 .picture .first img:hover,
+  #content .box1 .picture .second img:hover{
+    height: 200px!important
+  }
+  .bg{
+    padding:40px 0!important
+  }
+  .paddingMargin{
+    padding: 30px 0!important
+  }
+  .box1 .line{
+    margin-left: 30px!important;
+  }
+  .box1 h6{
+  margin-top: 20px!important;
+  margin-left: 30px;
+  font-size: 18px;
 }
-@media screen and (max-width: 1250px) {
+.bg ul{
+  margin-top: 15px;
+  margin-left: 30px;
+}
+.bg ul li{
+  font-size: 14px;
+  letter-spacing: 0.18px;
+  line-height: 22px;
+  color: #566784
+}
+  .box{
+    margin-top: 80px!important;
+  }
+  .box2{
+    height: 572px
+  }
+  .box2 img{
+    width: 100%;
+  }
+  .left h4{
+    font-size: 28px!important;
+  }
+  .left h5{
+    margin-top:10px!important; 
+  }
   .right h4{
-    margin-left: 260px;
-    font-size: 26px;
+    margin-top: 100px!important;
   }
-  .right p{
-    margin-left: 260px;
+  .background{  /*原型规划的样式*/
+    top: 1070px!important;
+    right: 0px;
+    z-index: -999;
+  }
+  .right img{
+    top: 420px!important;
+  }
+  .box3 h4{
+    margin:35px 0px!important;
+    font-size: 26px!important;
+  }
+  .box3 p{
+    margin:35px 0px!important;
+    font-size: 16px!important;
+  }
+  .box4{
+    margin-top: 60px!important;
+  }
+  .box4 h4{
+    font-size: 26px!important;
+  }
+  .box4 h5{
+    margin-top: 10px;
     font-size: 16px;
   }
-  .box2 .picture img{
-    width: 100%!important;
-    height: auto;
+  .box4 .img .devote{
+    /* border: 1px solid black; */
+    margin-top: 30px!important;
   }
+  .downBox{
+    margin-bottom: 10px!important;
+  }
+  .background{  /*原型规划的样式*/
+  width: 54%;
 }
-  @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;
+@media screen and (max-width: 1150px) {
+  .right img{
+    top: 490px!important;
+  }
 }
-.upBox{
-  width: 280px!important;
-  height: 150px;
-  background: #EAEFFF;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+@media screen and (max-width: 1000px) {
+  .background{
+    top: 950px!important;
+  }
+  .right img{
+    top: 450px!important;
+  }
+  .left h4{
+    font-size: 24px!important;
+  }
+  .left h5{
+    font-size: 14px!important;
+  }
+  .box2{
+    height: 500px
+  }
+  .box3 h4{
+    margin: 20px 0!important
+  }
+  .box4 h4{
+    font-size: 24px!important;
+  }
+  .box4 h5{
+    font-size: 15px;
+  }
+    #content .box1 .picture .first img,
+  #content .box1 .picture .second img{
+    height: 180px!important
+  }
+  #content .box1 .picture .first img:hover,
+  #content .box1 .picture .second img:hover{
+    height: 180px!important
+  }
+    .bg{
+    padding:20px 0!important
+  }
+  .paddingMargin{
+    padding: 20px 0!important
+  }
+  .box1 .line{
+    margin-left: 20px!important;
+    background: #FF8464;
+  }
+  .box1 h6{
+  margin-top: 20px!important;
+  margin-left: 15px;
+  font-size: 16px;
 }
-.upBox div{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.bg ul{
+  margin-top: 15px;
+  margin-left: 15px;
 }
-.upBox img{
-  width: 44px;
-  height: 44px;
+.bg ul li{
+  font-size: 12px;
+  letter-spacing: 0.18px;
+  line-height: 22px;
+  color: #566784
 }
-.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;
+@media screen and (max-width: 800px) {
+  .box{
+    margin-top: 20px!important
+  }
+  .box1 h4{
+    font-size: 22px!important;
+  }
+  .box1 h5{
+    font-size: 16px!important
+  }
+  .box2 h4{
+    font-size: 22px!important;
+  }
+  .box3 h4{
+    font-size: 22px!important
+  }
+  .background{
+    top: 750px!important;
+  }
+  .box3 h4{
+    margin-top: 50px!important;
+  }
+  .box3 p{
+    margin-top: 0px!important;
+    font-size: 15px!important;
+  }
+  .box4{
+    margin-top: 0px!important;
+  }
+    #content .box1 .picture .first,
+  #content .box1 .picture .second{
+    height: 150px!important
+  }
+  #content .box1 .picture .first img,
+  #content .box1 .picture .second img{
+    height: 150px!important
+  }
+.box1 .line{
+    margin-top: 12px!important;
+    margin-left: 10px!important;
+  }
+  .paddingMargin{
+    padding: 10px 0 0 10px!important;
+  }
+  .box1 h6{
+  margin-top: 10px!important;
+  margin-left: 10px;
+  font-size: 14px;
 }
-.downBox ul{
-  display: flex;
-  flex-direction: column;
-  width: 224px!important;
-  margin: 20px 0px 0px 28px;
+.bg ul{
+  margin-top: 12px;
+  margin-left: 10px;
 }
-.downBox ul li{
-  display: flex;
-  width: 214px!important;
+.bg ul li{
+  font-size: 12px;
+  letter-spacing: 0.18px;
+  line-height: 22px;
+  color: #566784
 }
 .downBox ul li span{
-  width: 10px;
-  font-weight: 600;
-  height: 26px;
-  line-height: 26px;
+  width: 20px;
 }
-.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;
 }
-
+@media screen and (max-width: 661px) {
+  .box1 .picture{
+    flex-direction: column!important;
+  }
+  .box1 .picture .first,.box1 .picture .second{
+    width: 100%!important;
+    margin-bottom: 20px;
+  }
+  .box2{
+    flex-direction: column;
+    height: auto;
+  }
+  .left{
+    width: 100%!important;
+    height: auto!important;
+  }
+  .left .picture{
+    margin-top: 1px!important;
+    height: auto!important;
+  }
+  .right{
+    width: 100%;
+    height: auto!important;
+  }
+  .right .text{
+    height: auto
+  }
+  .right h4{
+    margin-top: 10px!important
+  }
+  .right p{
+    margin-top: 10px!important
+  }
+  .background{
+    width: 100%!important;
+  }
+  .box2 .right .text{
+    height: auto!important;
+  }
+  .box2 .right img{
+    top: 10px!important;
+    position: relative;
+  }
+  .box3{
+    width: 100%!important;
+    margin-top: 35px!important;
+  }
+  .box3 h4{
+    font-size: 22px!important;
+    margin: 20px 10px 10px 0px!important;
+  }
+  .box3 p{
+    margin: 10px 0!important
+  }
+  .box4{
+    margin-top: 20px!important
+  }
+  .box h4{
+    font-size: 22px!important;
+  }
+  .box4 .devote{
+    justify-content: center!important;
+  }
+  .box4 .devote>li{
+    margin-bottom: 25px!important;
+  }
+  .box4 .downBox ul li p{
+    font-size: 14px!important;
+  }
 }
-
-
 .flex-wrap-footer-box {
-  width: 1200px;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
 }
-
 </style>
 
 <script>
@@ -597,6 +784,7 @@ export default {
       // box13Arry: [],
       // clientArry: [],
       api2: "api_get_picture",
+      offsetTop:"0",
       time: new Date().getTime() + ""
     };
   },
@@ -651,7 +839,6 @@ export default {
       this.activeTeamFlag = true
     },
     mouseLeaveTeam(){
-      console.log(111)
       this.activeTeamFlag = false
     }
   }