111

src/App.vue

@@ -1,109 +1,34 @@
 <template>
   <div id="app">
-    <!-- <div>
-      <nav class="navbar navbar-default navbar-fixed-top app" :class="{ 'scroll': scrolled }">
-        <div class="container-fluid con">
-         
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed">
-              <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
-            </button>
-           
-            <a class="navbar-brand" href="#">
-            
-              <div alt="Brand" class="logo"></div>
-            </a>
-          </div>
-
-          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <ul class="nav navbar-nav navbar-right">
-            
-              <li class="a">
-                <a href="/">首页</a>
-              </li>
-              <li class="a">
-                <a href="/case">案例</a>
-              </li>
-              <li class="a">
-                <a href="/dynamic">动态</a>
-              </li>
-              <li class="a">
-                <a href="/about">关于</a>
-              </li>
-              <li class="a">
-                <a href="/contact">联系</a>
-              </li>
-            </ul>
-          </div>
-         
-        </div>
-     
-      </nav>
-    </div>
-    -->
-    <!-- <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
-      <div>
-        <el-row style="text-align: center;">
-          <el-col :span="24">
-            <img src="./assets/image/mobile/Sidemenulogo.png" width="46%" class="logoimg" />
-          </el-col>
-          <el-col class="line"></el-col>
-          <el-col :span="24" class="a">
-            <a href="/" class="btn1">01 回到首页</a>
-          </el-col>
-
-          <el-col :span="24" class="a">
-            <a href="/case" class="btn1">02 案例展示</a>
-          </el-col>
-
-          <el-col :span="24" class="a">
-            <a href="/dynamic" class="btn1">03 动态分享</a>
-          </el-col>
-
-          <el-col :span="24" class="a">
-            <a href="/about" class="btn1">04 关于福予</a>
-          </el-col>
-
-          <el-col :span="24" class="a">
-            <a href="/contact" class="btn1">05 联系我们</a>
-          </el-col>
-
-          <el-col :span="24" class="a">
-            <button type="button" class="btn btn-default" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
-          </el-col>
-        </el-row>
-      </div>
-    </el-drawer> -->
-
     <div class="main">
       <router-view />
     </div>
     <div id="hide">
       <div class="coll">
         <div>
-          <div v-if="!current1" class="btn btn-default" role="button" @mouseenter="enter1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;">
-            <img src="./assets/image/联系我们.jpg" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;" />
+          <div v-if="!current1" class="btn btn-default back-top1" role="button" @mouseenter="enter1()">
+            <img src="./assets/image/联系我们.jpg" class="back-top1" />
           </div>
-          <div v-if="current1" class="btn btn-default" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;">
-            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;" />
+          <div v-if="current1" class="btn btn-default back-top1" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()">
+            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" class="back-top1" />
           </div>
         </div>
       </div>
       <div class="coll">
         <div>
-          <a href="#" v-if="!current2" role="button" @mouseenter="enter2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;">
-            <img src="./assets/image/返回顶层.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;" />
+          <a class="back-top2" href="#" v-if="!current2" role="button" @mouseenter="enter2()">
+            <img src="./assets/image/返回顶层.jpg" class="back-top2" />
           </a>
         </div>
         <div>
-          <a class="back-top" href="#" v-if="current2" role="button" @mouseenter.stop="enter2()" @mouseleave="leave2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;">
-            <img src="./assets/image/返回顶层触发.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;" />
+          <a class="back-top2" href="#" v-if="current2" role="button" @mouseenter.stop="enter2()" @mouseleave="leave2()">
+            <img src="./assets/image/返回顶层触发.jpg" class="back-top2" />
           </a>
         </div>
       </div>
     </div>
     <div class="page-footer" style="background-color:#1b1b1b">
-      <p class="footer-p" style="color:rgb(255,255,255)">© 2019 All rights reserved.</p>
+      <p class="footer-p" style="color:rgb(255,255,255)">Copyright © 2019 All rights reserved.</p>
     </div>
   </div>
 </template>
@@ -220,47 +145,40 @@ p {
   /* padding: 0; */
   border: none;
 }
-.iconfont {
-  border: none;
-  font-size: 30px;
-}
-.iconfont:hover {
-  color: red;
-}
 
-@media (min-width: 768px) and (max-width: 992px) {
-  .con {
-    padding-left: 5vw !important;
-    padding-right: 5vw !important;
-  }
-  .logo {
-    margin-top: 0 !important;
-  }
-  .nav li {
-    margin-left: 0 !important;
-  }
-  .a {
-    font-size: 2.4rem !important;
-    margin-top: 0.5rem !important;
-    color: #000;
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-  }
-}
+
+
+
+
 @media (min-width: 992px) {
   .coll {
     display: block;
   }
   .con {
-    padding-left: 10%;
-    padding-right: 10%;
+    padding-left: 9%;
+    padding-right: 9%;
+  }
+
+  .back-top1 {
+    position: fixed;
+    right: 0;
+    bottom: 256px;
+    margin: 0;
+    padding: 0;
+  }
+  .back-top2 {
+    position: fixed;
+    right: 0;
+    bottom: 200px;
+    margin: 0;
+    padding: 0;
   }
 
   .page-footer {
-    height: 120px;
+    height: 6.3vw;
   }
   .footer-p {
-    line-height: 120px;
+    line-height: 6.3vw;
     font-size: 20px;
     margin: 0;
   }
@@ -275,8 +193,6 @@ p {
 #hide {
   display: none;
 }
-
-
 </style>
 
 
@@ -328,7 +244,9 @@ p {
     );
     margin-bottom: 30px;
   }
- 
+  .footer-p{
+    margin:0;
+  }
 }
 @media (min-width: 768px) {
   .navbar {
@@ -392,4 +310,25 @@ p {
     // }
   }
 }
+@media (min-width: 992px) and (max-width: 1200px) {
+  .back-top1 {
+    position: fixed;
+    right: 0;
+    bottom: 156px !important;
+    margin: 0;
+    padding: 0;
+    z-index: 3;
+  }
+  .back-top2 {
+    position: fixed;
+    right: 0;
+    bottom: 100px !important;
+    margin: 0;
+    padding: 0;
+    z-index: 3;
+  }
+}
+
+
+
 </style>

src/components/Business.vue

@@ -19,19 +19,15 @@
         <div class="swiper-button-next"></div>
       </div>
     </div>
-    <br />
-    <br />
-
+    
     <div v-if="!show" class="row st">
       <div class="col-xs-6 col-md-3 sw" v-for="(item,index) in service" :key="index">
         <img :src="item.serviceImageUrl" width="100%" height="100%" alt="..." />
         <div class>
           <h4>{{item.serviceName}}</h4>
-                  <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
+          <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
         </div>
       </div>
-
-
     </div>
   </div>
 </template>
@@ -67,14 +63,7 @@ export default {
           slidesPerView: 4,
           // slidesPerGroup: 1,
           spaceBetween: 40,
-          // virtualTranslate: true,
-          // centeredSlides: true,
-          // watchSlidesProgress: true,
-
-          // direction :horizontal,
-          // slidesPerView : 4,
 
-          // 如果需要前进后退按钮
 
           navigation: {
             nextEl: '.swiper-button-next',
@@ -93,32 +82,6 @@ export default {
   },
 
 
-  // watch: {
-  //     config: {
-  //       handler (nw) {
-  //         this.initShare(nw || {})
-  //       },
-  //       immediate: true,
-  //       deep: true,
-  //     }
-  //   },
-  //   mounted () {
-  //     this.initShare(this.config || {})
-  //   },
-
-  //   methods: {
-  //     initShare (config = {}) {
-  //       const options = {
-  //         ...this.defautlOpt,
-  //         ...config,
-  //       }
-
-  //       if (this.$el && options.title) {
-  //         window.socialShare(this.$el, options)
-  //       }
-  //     }
-  //   }
-
 
 
 
@@ -136,14 +99,14 @@ export default {
 
 
     }).then(con => {
-      console.log(con, "124")
+      // console.log(con, "124")
       this.service = con;
 
       this.show = this.service.length > 4 ? true : false;
-      if(this.show){
-      window.setTimeout(() => this.initSwiper(), 0)
-}
-      console.log(this.service.length, "111111111")
+      if (this.show) {
+        window.setTimeout(() => this.initSwiper(), 0)
+      }
+      // console.log(this.service.length, "111111111")
       // window.console.log(this.service, "543");
     })
 
@@ -158,6 +121,9 @@ export default {
 
 
 <style scoped>
+.col-xs-6{
+  padding: 0px;
+}
 @media (max-width: 992px) {
   .business-text {
     display: none;
@@ -176,9 +142,11 @@ export default {
   .st {
     margin-bottom: 20px !important;
     padding: 0 1% !important;
+    
   }
   .sw {
-    padding: 2% !important;
+   padding-left: 2% !important;
+    padding-right: 2% !important;
   }
 }
 
@@ -231,7 +199,8 @@ export default {
     position: relative;
   }
 
-  p {line-height: 1.6em;
+  p {
+    line-height: 1.6em;
     font-size: 2.2rem;
     padding-bottom: 0;
     margin: 0px;
@@ -251,15 +220,15 @@ export default {
     letter-spacing: 3px;
   }
   .sw {
-    padding: 33px;
+    padding-left: 2%;
+    padding-right: 2%;
   }
-
-  
 }
 .st {
-  padding-left: 10%;
-  padding-right: 10%;
+  padding-left: 9%;
+  padding-right: 9%;
   margin: 0;
+  
 }
 </style>
 
@@ -270,8 +239,20 @@ export default {
     padding: 0 20px;
 
     .sw {
-      padding: 20px;
+      padding: 2vw;
     }
   }
 }
+@media (min-width: 992px) and (max-width: 1550px) {
+  h4 {
+    font-size: 1.7rem;
+    line-height: 30px;
+    margin: 0 0 10px;
+  }
+  p {
+    line-height: 1.3em !important;
+
+    font-size: 1.7rem;
+  }
+}
 </style>

src/components/CaseCard.vue

@@ -1,11 +1,14 @@
 <template>
-  <el-card class="case-card app" shadow="hover" :body-style="{ padding: '0px' }" style=" padding: 0px">
+<div class="hover">
+  <el-card class="case-card app" shadow="never" :body-style="{ padding: '0px' }" style=" padding: 0px">
     <img :style="{background: `url(${thumb})`}" class="image" />
     <div class="body">
       <h3>{{title}}</h3>
       <div class="bottom clearfix caption">{{caption}}</div>
     </div>
   </el-card>
+  <!-- shadow="hover" -->
+  </div>
 </template>
 
 <script>
@@ -24,7 +27,8 @@ export default {
   .case-card {
     width: 100%;
     padding: 0;
-  
+    border-radius: 0px;
+    border: none;
     .image {
       bottom: 0;
       width: 100%;
@@ -33,7 +37,7 @@ export default {
       padding-bottom: 66%;
       background-size: 100% 100% !important;
     }
- 
+
     .body {
       padding: 1.5rem;
       text-align: left;
@@ -45,18 +49,24 @@ export default {
         font-size: 3rem;
         color: #000;
         line-height: 1.2em;
-        
       }
- text-decoration: none !important;
+      text-decoration: none !important;
       .caption {
-        font-size: 2.0rem;
+        font-size: 2rem;
         color: #727171;
-        
+
         line-height: 1.2em;
         margin-top: 6px;
       }
     }
   }
+  .hover:hover{
+  .case-card{
+    margin-top: -20px; 
+     margin-bottom: 20px;
+    box-shadow:0px 0px 16px 5px rgba(0,0,0,0.12);
+  }
+  }
 }
 
 @media (max-width: 992px) {
@@ -94,4 +104,34 @@ export default {
     }
   }
 }
+@media (min-width: 992px) and (max-width: 1500px) {
+  .case-card {
+    .body {
+      padding: 1.05rem;
+      text-align: left;
+
+      h3 {
+        margin: 0;
+        padding: 0;
+
+        font-size: 2.1rem;
+
+        line-height: 0.84em;
+      }
+      text-decoration: none !important;
+      .caption {
+        font-size: 1.4rem;
+
+        line-height: 0.84em;
+        margin-top: 4.2px;
+      }
+    }
+  }
+   .hover:hover{
+  .case-card{
+    margin-top: -10px; 
+    margin-bottom: 10px; 
+    box-shadow:0px 0px 10px 3px rgba(0,0,0,0.12);
+  }
+}}
 </style>

src/components/ClickContact.vue

@@ -2,28 +2,32 @@
   <div class="clickcontact app">
     <div class="contact-1">
       <div class="contact-main">
-        <h1 style="margin-bottom:70px">联系我们</h1>
+        <h1 style="">联系我们</h1>
 
         <div class="row">
           <div class="col-md-6 col-xs-6 st1" style="border-right: 1px solid #aaa;">
-            <img class="img1" src="../assets/image/contact/weixin.jpg" />
-            <div>
-              <h2>微信咨询</h2>
+            <div class="pull-right1">
+              <img class="img1" src="../assets/image/contact/weixin.jpg" style="weight:100%" />
+              <div class="caption">
+                <h2>微信咨询</h2>
+              </div>
             </div>
           </div>
 
           <div class="col-md-6 col-xs-6 st2">
-            <img class="img1" src="../assets/image/contact/QQ.jpg" />
-            <div>
-              <h2>QQ咨询</h2>
+             <div class="pull-left1">
+              <img class="img1" src="../assets/image/contact/QQ.jpg" style="weight:100%" />
+              <div class="caption">
+                <h2>QQ咨询</h2>
+              </div>
             </div>
           </div>
         </div>
 
         <div>
-          <a href="tel:13585167730">
-            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:100%" />
-          </a>
+         
+            <img src="../assets/image/contact/photo.jpg" alt style="width:100%" />
+         
         </div>
       </div>
     </div>
@@ -32,54 +36,33 @@
 
 
 <style>
-
 </style>
 
 
-<style scoped>
-.clickcontact{
-  color: #000;
-}
+<style lang="less" scoped>
 
-/* .contact-box {
-  width: 80%;
-  margin: 0 auto - 120px;
-  
-  .contact-main {
-    width: 704px;
-    text-align: center;
-  }
 
-  .col-xs-6 {
-    &:last-child {
-      float: right;
-    }
-
-    & + .col-xs-6 {
-      
-    }
-  }
-
-} */
+.clickcontact {
+  
+  color: #000;
+}
 
 
 
 @media (min-width: 992px) {
   .contact-1 {
-    
-    padding: 50px;
-  
-
     background-color: #fff;
     display: inline-block;
     border-radius: 0;
- 
+  }
+  h1{
+    font-size: 3.6rem;
+    margin-bottom: 40px;
   }
 
   .contact-1 .contact-main {
     width: 707px;
     margin: 0 auto;
-    padding-top: 20px;
   }
   .st1 {
     padding-right: 120px;
@@ -95,50 +78,34 @@
 h2 {
   margin-bottom: -22px;
 }
-
-/* .contact {
-    padding-top: 116px;
-  }
-
-
+@media (min-width: 992px) and (max-width: 1551px) {
   .contact-1 {
     width: 80%;
-    padding: 50px;
-    margin-top: -120px;
-
-    background-color: #fff;
-    display: inline-block;
-    border-radius: 0;
-    border: 1px solid #dcdcdc;
+    padding: 30px 16px 63px;
+    margin-top: -85px;
   }
-  .contact-2 {
-    padding: 98px 98px 27px 98px;
- 
+  .border-bottom {
+    font-size: 20px;
+    border-bottom: 1px solid #bfbfbf;
+    padding: 0px;
   }
-  .st {
-    padding: 0 100px;
+  h1{
+    font-size: 2.52rem;
   }
-  
-  
-  .img1{
-    width: 100%;
-
+  h2{
+    font-size: 2.1rem
   }
-
-  
-
-  .contact-1 > div {
-    width: 704px;
-    margin: 0 auto;
+.address {
+    .p1 {
+      padding-top: 70px;
+      font-size: 2.52rem;
+    }
+    .p2 {
+      font-size: 2.1rem;
+      padding-top: 12px;
+    }
   }
+}
+ 
 
-
-  @media (max-width: 768px) {
-    
-  .contact-1 > div {
-    width: 222px;
-    margin: 0 auto;
-  }
-    
-  } */
 </style>

src/components/Navbars.vue

@@ -8,7 +8,7 @@
               <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
             </button>
 
-            <a class="navbar-brand" href="#">
+            <a class="navbar-brand" href="/">
               <div alt="Brand" class="logo"></div>
             </a>
           </div>
@@ -18,17 +18,18 @@
               <li class="a">
                 <a href="/">首页</a>
               </li>
+              <!-- class="case" class-active="" -->
               <li class="a">
-                <a href="/case">案例</a>
+                <a href="/case"  :class="{linkactive:'/case'==routepath}">案例</a>
               </li>
               <li class="a">
-                <a href="/dynamic">动态</a>
+                <a href="/Share" :class="{linkactive:'/Share/'==routepath}">动态</a>
               </li>
               <li class="a">
-                <a href="/about">关于</a>
+                <a href="/about" :class="{linkactive:'/about'==routepath}">关于</a>
               </li>
               <li class="a">
-                <a href="/contact">联系</a>
+                <a href="/contact" :class="{linkactive:'/contact'==routepath}">联系</a>
               </li>
             </ul>
           </div>
@@ -44,27 +45,27 @@
           </el-col>
           <el-col class="line"></el-col>
           <el-col :span="24" class="a">
-            <a href="/" class="btn1">01 回到首页</a>
+            <a href="/" class="btn1" :class="{moblinkactive:'/'==routepath}">01 回到首页</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/case" class="btn1">02 案例展示</a>
+            <a href="/case" class="btn1" :class="{moblinkactive:'/case'==routepath}">02 案例展示</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/dynamic" class="btn1">03 动态分享</a>
+            <a href="/Share" class="btn1" :class="{moblinkactive:'/Share/'==routepath}">03 动态分享</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/about" class="btn1">04 关于福予</a>
+            <a href="/about" class="btn1" :class="{moblinkactive:'/about'==routepath}">04 关于福予</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/contact" class="btn1">05 联系我们</a>
+            <a href="/contact" class="btn1" :class="{moblinkactive:'/contact'==routepath}">05 联系我们</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <button type="button" class="btn btn-default" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
+            <button type="button" class="btn btn-default rebtn" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
           </el-col>
         </el-row>
       </div>
@@ -79,13 +80,18 @@ export default {
   data () {
     return {
       scrolled: false,
-      
-    
+
+
       navdrawer: false,
       direction: 'rtl',
+
+      routepath:'',
     }
   },
-
+ mounted () {
+         this.routepath  =  this.$route.path;
+         console.log(this.routepath);
+  },
 
 
 
@@ -106,8 +112,7 @@ p {
 </style>
 
 <style scoped>
-
-
+.icon-caidan
 .coll {
   display: none;
 }
@@ -116,12 +121,20 @@ p {
   /* padding: 0; */
   border: none;
 }
+.navbar-default .navbar-toggle:hover {
+    background-color: none;
+}
+
+/* .navbar-toggle：hover{
+background-color: none;
+padding-bottom: 0px
+} */
 .iconfont {
   border: none;
   font-size: 30px;
 }
 .iconfont:hover {
-  color: red;
+  color:#e03723;
 }
 
 @media (min-width: 768px) and (max-width: 992px) {
@@ -148,8 +161,8 @@ p {
     display: block;
   }
   .con {
-    padding-left: 10%;
-    padding-right: 10%;
+    padding-left: 9%;
+    padding-right: 9%;
   }
 
   .page-footer {
@@ -225,11 +238,11 @@ p {
     border: none !important;
   }
   .btn1:hover {
-    color: red !important;
+    color: #e03723 !important;
     text-decoration: none;
   }
   .btn1:active {
-    color: red !important;
+    color: #e03723 !important;
     text-decoration: none;
   }
 }
@@ -246,6 +259,8 @@ p {
     z-index: 50;
     height: 116px;
     margin: 0;
+    -moz-box-shadow: 0px 2px 5px #888888; /* 老的 Firefox */
+    box-shadow: 0px 2px 5px #888888;
 
     .navbar-brand {
       padding: 0;
@@ -257,6 +272,7 @@ p {
 
     .nav {
       font-size: 2.6rem;
+      margin-top: 5px;
       li {
         margin-left: 2vw;
         a {
@@ -299,4 +315,18 @@ p {
     // }
   }
 }
+.linkactive{
+  border-bottom: 3px solid #000;
+}
+.moblinkactive{
+  color:#e03723 !important;
+}
+.rebtn{
+  border-radius: 0px;
+}
+.rebtn:hover{
+  color: #e03723 !important;
+    border: 1px solid #e03723;
+    background: #fff;
+}
 </style>

src/components/Share.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="social-share" data-initialized="true" style="display: contents;">
-    <a href="#" class="social-share-icon icon-wechat" >
+    <a href="#" class="social-share-icon icon-wechat">
       <img src="../assets/image/case2/微信icon.png" class="share" alt />
     </a>
     <a href="#" class="social-share-icon icon-weibo">
@@ -80,7 +80,7 @@ export default {
 }
 
 @media (max-width: 992px) {
- .social-share .social-share-icon {
+  .social-share .social-share-icon {
     border: none;
     height: 26px;
     width: 26px;
@@ -97,4 +97,23 @@ export default {
     }
   }
 }
+@media (min-width: 992px) and (max-width: 1550px) {
+  .social-share .social-share-icon {
+    border: none;
+    height: 36px;
+    width: 36px;
+    margin-top: -4px;
+  }
+  .social-share {
+    a {
+      &:before {
+        content: none;
+      }
+      .share {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
+}
 </style>

src/components/Wheelplanting.vue

@@ -2,23 +2,11 @@
   <div class="wheelplanting">
     <div class="swiper-container con-swiper">
       <div class="swiper-wrapper">
-        <!-- <div class="col-md-2 col-xs-2" v-for="(item,index) in blogs" :key="index+'img'">
-            <img  :src="item.logoImg" alt class="ph-logo" />
-        </div>-->
-        <!-- <div v-for="item in blogs" :key="item">
-          <div class="swiper-slide">
-            <img :src="item.imageUrl" width="100%" height="" alt />
-          </div>
-        </div>-->
+        
         <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
           <img :src="url.imageUrl" width="100%" height="100%" />
         </div>
-        <!-- <div class="swiper-slide">
-          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
-        </div>
-        <div class="swiper-slide">
-          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
-        </div>-->
+       
       </div>
       <div class="swiper-pagination"></div>
     </div>
@@ -63,16 +51,19 @@ export default {
       if (!this.swiper) {
         this.swiper = new Swiper(".con-swiper", {
           // loop:true,
-          // autoplay: true,
+          autoplay: true,
           direction: this.direction || 'horizontal',
           observer: true,
           observeSlideChildren: true,
+          preloadImages:true,
+          updateOnImagesReady : true,
 
           pagination: {
             el: '.swiper-pagination',
             bulletClass : 'swiper-pagination-bullet',
             bulletActiveClass: 'my-bullet-active',
-            hideOnClick: true,
+            // hideOnClick: true,
+             clickable :true,
          
           }
         });
@@ -106,11 +97,8 @@ export default {
     margin: 8px 10vw 7px 0;
     display: block;
 }
-.swiper-pagination-bullet{
 
- /* margin:7px 0 7px -40px !important; 
- z-index: 60 !important; */
-}
+
 
 .my-bullet-active{
   background: #fff;

src/router.js

@@ -29,7 +29,7 @@ export default new Router({
       component: () => import(/* webpackChunkName: "case" */ './views/Case.vue')
     },
     {
-      path: '/dynamic',
+      path: '/Share',
       name: 'dynamic',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route

src/views/About.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="about">
-
     <Navbars></Navbars>
     <div class>
       <img src="../assets/image/about/aboutbanner.jpg" width="100%" />
@@ -17,7 +16,7 @@
             <br />
             <div class>
               <div class="abc">
-                <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
+                <img src="../assets/image/about/FOYO.jpg" style="width:60vw" />
               </div>
             </div>
           </div>
@@ -150,16 +149,16 @@
 import Navbars from '../components/Navbars'
 
 export default {
-name: 'about',
- data () {},
+  name: 'about',
+  data () { },
   components: {
-   
+
     Navbars,
   },
 
- 
 
-  
+
+
 
 
 }
@@ -183,10 +182,10 @@ name: 'about',
     padding: 20px 20px;
   }
   .about-1 {
-    border-top: 2px solid #e5e5e5;
+    border-top: 1px solid #e5e5e5;
     padding-top: 30px;
     padding-bottom: 30px;
-    border-bottom: 2px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
   }
 
   .teamh1 {
@@ -207,7 +206,7 @@ name: 'about',
     margin-top: -120px;
 
     background-color: #fff;
-    border: 2px solid #dcdcdc;
+    border: 1px solid #dcdcdc;
     display: inline-block;
     border-radius: 0; /*去圆角 */
   }
@@ -236,12 +235,12 @@ name: 'about',
   }
 
   .abc {
-    border-bottom: 2px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
   }
   .about-1 {
     margin: 0 79px;
     padding: 78px 0 84px 0;
-    border-bottom: 2px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
   }
 
   .ph5 {
@@ -330,8 +329,8 @@ name: 'about',
       margin-top: 20px;
       div {
         .about-ph1 {
-          margin-left: 10px;
-          margin-right: 10px;
+          margin-left: 9px;
+          margin-right: 9px;
           float: left;
           width: 120px;
         }
@@ -366,5 +365,57 @@ name: 'about',
     }
   }
 }
+@media (min-width: 992px) and (max-width: 1550px) {
+  .st {
+    width: 80%;
+    padding: 67px 16px 63px;
+    margin-top: -85px;
+    background-color: #fff;
+    border: 1px solid #dcdcdc;
+    display: inline-block;
+    border-radius: 0;
+  }
+  .text-left {
+    font-size: 1.7rem;
+  }
+  .h1 {
+    padding-top: 34px;
+    font-size: 3rem;
+  }
+  h2 {
+    padding-bottom: 21px;
+    font-size: 2.1rem;
+  }
+  .p1 {
+    font-size: 1.5rem;
+  }
+  .col-md-6 {
+    padding: 0;
+  }
+  .about-1 {
+    padding: 50px 0 60px 0;
+  }
+  .teamp1 {
+    font-size: 1.1vw;
+    margin-bottom: 14px;
+  }
+  .about-3 {
+    padding-top: 70px;
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+  .abc {
+
+   
+    padding-bottom: 60px;
+
+}
+.about-1-img {
+
+    width: 140px;
+    height: 140px;
+
+}
+}
 </style>
 

src/views/Case.vue

@@ -8,8 +8,8 @@
 
     <div class="border-bottom comtype">
       <div>
-        <button type="button" class="btn1 btn-link app" style="color:black;font-size: 24px;padding: 25px" @click="() => filterCase()">全部案例</button>
-        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <button type="button" class="btn1 btn-link app" @click="() => filterCase()" :class="{btnactive:thisbtn==''}">全部案例</button>
+        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
       </div>
     </div>
 
@@ -20,21 +20,22 @@
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">{{currentTypeName}}</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;width:140px;padding-left:0;padding-right:0">{{currentTypeName}}</el-button>
       </div>
     </div>
+
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
       <div>
         <el-row style="text-align: center;">
           <el-col :span="24">
-            <button type="button" @click="() => filterCase()" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
+            <button type="button" @click="() => filterCase()" class="btn-link" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部案例</button>
           </el-col>
           <el-col :span="24" v-for="cas in casetype" :key="cas.id">
             <!-- @click="() => filterCase(cas)" -->
-            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{cas.typeName}}</button>
+            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
           </el-col>
           <el-col :span="24">
-            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;padding-left: 40px;padding-right: 40px; margin-top:30px">返回</button>
+            <button type="button" class="btn btn-default rebtn" @click="drawer = flase" style="color:black;font-size: 24px;padding-left: 40px;padding-right: 40px; margin-top:30px">返回</button>
           </el-col>
         </el-row>
       </div>
@@ -42,7 +43,7 @@
 
     <div class="contanier center-block dyn-main">
       <div class="row">
-        <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
+        <div class="col-md-6 col-xs-6 cards" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
           <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
           </router-link>
@@ -52,7 +53,7 @@
     <!--  -->
     <div style="margin-top:40px">
       <button type="button" v-if="!allLoaded" class="btn btn-default" @click="more">加载更多</button>
-      <p v-else>已经到底了~更多案例尽请期待~</p>
+      <p v-else>已经到底了~更多案例敬请期待~</p>
     </div>
   </div>
 </template>
@@ -77,7 +78,7 @@ export default {
       cover: {},
       casetype: [],
       caselist: [],
-
+      thisbtn: '',
       conditions: {
         pageNum: 0,
         pageSize: 8,
@@ -154,11 +155,12 @@ export default {
     },
 
     filterCase (caseType) {
+      // console.log(caseType.typeName)
       this.currentTypeName = caseType ? caseType.typeName : '全部案例'
 
       this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
       this.drawer = false;
-
+      this.thisbtn = caseType ? caseType.typeName : ''
     },
   }
 
@@ -171,28 +173,34 @@ export default {
   text-decoration: none;
 }
 
-.casecard {
+.mobtype {
+  padding: 0;
+  margin-top: 10px;
+}
+
+/* .casecard {
   width: 100%;
 
   padding-bottom: 100%;
-  background-size: 100% 100% !important;
-  /* position: relative; */
+  background-size: 100% 100% !important; */
+/* position: relative; */
 
-  margin: 0;
-}
+/* margin: 0;
+} */
 
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-  margin-top: 10px !important;
+  margin-top: 10px;
 }
 .btn1 {
-  font-size: 24px !important;
-  color: black !important;
-  border: none !important;
+  font-size: 24px;
+  padding: 25px;
+  color: black;
+  border: none;
 }
 .btn1:hover {
-  color: red !important;
+  color: #e03723;
   text-decoration: none;
 }
 .mobbtn {
@@ -229,15 +237,21 @@ export default {
   }
   .dyn-main {
     margin-top: 20px;
-    padding-left: 15px;
-    padding-right: 15px;
+
+     padding-left: 1.6vw;
+    padding-right: 1.6vw;
+  }
+  .marginTP {
+    margin-top: 3.2vw;
+  }
+  .cards{
+    padding-left: 1.6vw;
+    padding-right: 1.6vw;
   }
 }
 .row {
-  margin: 0;
-}
-.marginTP {
-  margin-top: 3rem;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 @media (min-width: 992px) {
@@ -249,6 +263,9 @@ export default {
     /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
     justify-content: center;
   }
+  .marginTP {
+    margin-top: 3rem;
+  }
   .case {
     margin-top: 116px;
     margin-bottom: -116px;
@@ -290,4 +307,40 @@ export default {
   outline: none;
   text-decoration: none;
 }
-</style>
+.mobtype {
+  padding: 0;
+  margin-top: 10px;
+}
+
+@media (min-width: 992px) and (max-width: 1550px) {
+  .btn1 {
+    font-size: 20px;
+    padding: 21px;
+  }
+  .border-bottom {
+    padding: 0;
+    margin-top: 0px;
+  }
+
+  .btn {
+    padding: 9px 105px;
+    font-size: 17px;
+    margin-top: 28px;
+  }
+}
+.btnactive {
+  color: #e03723 !important;
+}
+.rebtn {
+  border-radius: 0px;
+}
+.rebtn:hover {
+  color: #e03723 !important;
+  border: 1px solid #e03723;
+  background: #fff;
+}
+</style>
+
+
+
+

src/views/Contact.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="contact">
-     <Navbars></Navbars>
+    <Navbars></Navbars>
     <div class>
       <img src="../assets/image/contact/contactbanner.png" style="width:100%" />
       <!-- width="100%" height="300"> -->
@@ -10,27 +10,29 @@
       <div class="contact-main">
         <h1 style="margin-bottom:70px">联系我们</h1>
 
-        <div class="row app" style="margin:0" >
-          <div class="col-md-6 col-xs-6 st1" style="border-right: 1px solid #aaa;">
-            <img class="img1" src="../assets/image/contact/weixin.jpg" />
-            <div>
-              <h2>微信咨询</h2>
+        <div class="row app" style="margin:0">
+          <div class="col-md-6 col-xs-6 st1" style=" border-right: 1px solid #aaa;">
+            <div class="pull-right1">
+              <img class="img1" src="../assets/image/contact/weixin.jpg" style="weight:100%" />
+              <div class="caption">
+                <h2>微信咨询</h2>
+              </div>
             </div>
           </div>
-
           <div class="col-md-6 col-xs-6 st2">
-            <img class="img1" src="../assets/image/contact/QQ.jpg" />
-            <div>
-              <h2>QQ咨询</h2>
+            <div class="pull-left1">
+              <img class="img1" src="../assets/image/contact/QQ.jpg" style="weight:100%" />
+              <div class="caption">
+                <h2>QQ咨询</h2>
+              </div>
             </div>
           </div>
         </div>
-
         <div>
-  
-          <a href="tel:13585167730">
-            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:100%" />
+          <a v-if="isMobilePhone" href="tel:13585167730">
+            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:90%" />
           </a>
+          <img v-else src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:80%" />
         </div>
       </div>
       <div class="address" style=" ">
@@ -49,81 +51,84 @@
 <script>
 // @ is an alias to /src
 
-
+import { isMobilePhone } from '../../utils'
 import Navbars from '../components/Navbars'
 
 export default {
-name: 'contact',
- data () {},
+  name: 'contact',
+  data () {
+    return { isMobilePhone, }
+
+  },
   components: {
-   
+
     Navbars,
   },
 
- 
 
-  
+
+
 
 
 }
 </script>
 
+<style>
+.coll {
+  display: none;
+}
+</style>
+
 <style lang="less" scoped>
-@media (max-width: 992px){
-    .address{
-    .p1{
-      padding-top: 70px;font-size: 2.0rem
+.col-md-6,
+.col-xs-6 {
+  padding: 0px;
+}
+@media (max-width: 992px) {
+  .address {
+    .p1 {
+      padding-top: 70px;
+      font-size: 2rem;
     }
-    .p2{
-font-size: 1.2rem;padding-top: 14px;
+    .p2 {
+      font-size: 1.2rem;
+      padding-top: 14px;
     }
   }
 }
-@media (min-width: 992px){
-
-
-  h1{
+@media (min-width: 992px) {
+  h1 {
     font-weight: bold;
   }
-  .address{
-    .p1{
-      padding-top: 70px;font-size: 3.6rem
+  .address {
+    .p1 {
+      padding-top: 70px;
+      font-size: 3.6rem;
     }
-    .p2{
-      font-size: 3rem;padding-top: 14px;
+    .p2 {
+      font-size: 3rem;
+      padding-top: 14px;
     }
   }
-}
-</style>
-
-<style scoped>
-/* .contact-box {
-  width: 80%;
-  margin: 0 auto - 120px;
-  
-  .contact-main {
-    width: 704px;
-    text-align: center;
+  .pull-right1 {
+    float: right;
+    padding-right: 120px;
   }
-
-  .col-xs-6 {
-    &:last-child {
-      float: right;
-    }
-
-    & + .col-xs-6 {
-      
-    }
+  .pull-left1 {
+    float: left;
+    padding-left: 120px;
   }
+}
+</style>
 
-} */
+<style lang="less" scoped>
 @media (max-width: 992px) {
   .contact {
     margin-top: 60px;
   }
-  
-  .img1{
-    width: 100%;
+
+  .img1 {
+    width: 80%;
   }
 }
 
@@ -147,12 +152,6 @@ font-size: 1.2rem;padding-top: 14px;
     margin: 0 auto;
     padding-top: 20px;
   }
-  .st1 {
-    padding-right: 120px;
-  }
-  .st2 {
-    padding-left: 120px;
-  }
 
   .contact-2 {
     padding: 98px 98px 27px 98px;
@@ -162,47 +161,37 @@ h2 {
   margin-bottom: -22px;
 }
 
-
-
-
- /*  .contact-1 {
+@media (min-width: 992px) and (max-width: 1551px) {
+  .contact-1 {
     width: 80%;
-    padding: 50px;
-    margin-top: -120px;
-
-    background-color: #fff;
-    display: inline-block;
-    border-radius: 0;
-    border: 1px solid #dcdcdc;
+    padding: 30px 16px 63px;
+    margin-top: -85px;
   }
-  .contact-2 {
-    padding: 98px 98px 27px 98px;
- 
+  .border-bottom {
+    font-size: 20px;
+    border-bottom: 1px solid #bfbfbf;
+    padding: 0px;
   }
-  .st {
-    padding: 0 100px;
+  h1 {
+    font-size: 2.52rem;
   }
-  
-  
-  .img1{
-    width: 100%;
-
+  h2 {
+    font-size: 2.1rem;
   }
-
-  
-
-  .contact-1 > div {
-    width: 704px;
-    margin: 0 auto;
+  .address {
+    .p1 {
+      padding-top: 70px;
+      font-size: 2.52rem;
+    }
+    .p2 {
+      font-size: 2.1rem;
+      padding-top: 12px;
+    }
   }
-
-
-  @media (max-width: 768px) {
-    
-  .contact-1 > div {
-    width: 222px;
-    margin: 0 auto;
+}
+@media  (max-width: 551px) {
+  h2{
+    font-size: 2rem
   }
-    
-  } */
+}
 </style>

src/views/Details.vue

@@ -53,7 +53,7 @@
     </div>
 
     <div class="center-block st5" style>
-      <h2>更多好案例</h2>
+      <h2>更多好{{type}}</h2>
 
       <div class="row home-case" style="padding:0;width: 100%;margin-left :0; margin-right:0">
         <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in recommends" :key="index">
@@ -89,6 +89,8 @@ export default {
 
   data () {
     return {
+
+      type: '案例',
       detail: {},
       // config: {
       //   // url: '', // 网址，默认使用 window.location.href
@@ -163,6 +165,9 @@ export default {
         urlData: { id },
       }).then(res => {
         this.detail = res || {}
+
+         this.type =  this.detail.current.type == 'case' ? '案例' : '分享'
+        // console.log(this.detail.current.type,'1234')
       })
     },
 
@@ -190,7 +195,9 @@ export default {
 
 
 
+  
   },
+  
 
 }
 </script>
@@ -200,7 +207,7 @@ export default {
   hr {
     margin-bottom: 20px;
     width: 50px;
-    border: 2px solid red;
+    border: 2px solid #e03723;
   }
 }
 @media (max-width: 992px) {
@@ -259,7 +266,7 @@ export default {
     text-decoration: none;
   }
   .btn1:hover {
-    color: red !important;
+    color: #e03723 !important;
     text-decoration: none;
   }
   .btn {
@@ -292,8 +299,7 @@ export default {
     font-size: 1.2rem !important;
     color: black !important;
     border: none !important;
-        text-decoration: none;
-
+    text-decoration: none;
   }
 
   .btn {
@@ -414,6 +420,7 @@ export default {
   .case-3 {
     margin: 0;
     padding: 0;
+    line-height: 49px;
   }
 
   .home-case {
@@ -463,4 +470,23 @@ export default {
     content: "" !important;
   }
 }
+
+@media (min-width: 992px) and (max-width: 1550px) {
+  .st h1 {
+    font-size: 3rem;
+  }
+  .st p {
+    font-size: 1.7rem;
+  }
+  .pull-left {
+    font-size: 2.5rem;
+    .iconfont {
+      font-size: 2.5rem;
+    }
+  }
+
+  .pull-right {
+    font-size: 2.5rem;
+  }
+}
 </style>

src/views/Dynamic.vue

@@ -8,8 +8,8 @@
 
     <div class="border-bottom comtype">
       <div>
-        <button type="button" class="btn1 btn-link app" @click="() => filterCase()" style="color:black;font-size: 24px;padding: 25px">全部动态</button>
-        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <button type="button" class="btn1 btn-link app" @click="() => filterCase()"  :class="{btnactive:thisbtn==''}">全部动态</button>
+        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
       </div>
     </div>
 
@@ -20,20 +20,20 @@
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">{{currentTypeName}}</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;;width:140px;padding-left:0;padding-right:0">{{currentTypeName}}</el-button>
       </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
       <div>
-        <el-row  style="text-align: center;">
+        <el-row style="text-align: center;">
           <el-col :span="24">
-            <button type="button" class="btn-link"  @click="() => filterCase()" style="color:black;font-size: 24px;">全部动态</button>
+            <button type="button" class="btn-link" @click="() => filterCase()" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部动态</button>
           </el-col>
-          <el-col :span="24" v-for="cas in casetype" :key="cas.id" >
-            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{cas.typeName}}</button>
+          <el-col :span="24" v-for="cas in casetype" :key="cas.id">
+            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
           </el-col>
           <el-col :span="24">
-            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;padding-left: 40px;padding-right: 40px; margin-top:30px">返回</button>
+            <button type="button" class="btn btn-default rebtn" @click="drawer = flase" style="color:black;font-size: 24px;padding-left: 40px;padding-right: 40px; margin-top:30px">返回</button>
           </el-col>
         </el-row>
       </div>
@@ -41,7 +41,7 @@
 
     <div class="contanier center-block dyn-main">
       <div class="row">
-        <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
+        <div class="col-md-6 col-xs-6 cards" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
           <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
           </router-link>
@@ -51,7 +51,7 @@
 
     <div style="margin-top:40px">
       <button type="button" class="btn btn-default" @click="more" v-if="!allLoaded">加载更多</button>
-      <p v-else>已经到底了~更多案例尽请期待~</p>
+      <p v-else>已经到底了~更多动态敬请期待~</p>
     </div>
   </div>
 </template>
@@ -85,6 +85,7 @@ export default {
       direction: 'rtl',
 
       currentTypeName: '全部动态',
+      thisbtn:''
     }
   },
   components: {
@@ -158,11 +159,12 @@ export default {
     },
 
     filterCase (caseType) {
-this.currentTypeName = caseType ? caseType.typeName : '全部动态'
+      this.currentTypeName = caseType ? caseType.typeName : '全部动态'
+
 
-      
       this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' });
       this.drawer = false;
+       this.thisbtn = caseType ? caseType.typeName : ''
     },
   }
 
@@ -171,13 +173,11 @@ this.currentTypeName = caseType ? caseType.typeName : '全部动态'
 </script>
 
 <style scoped>
-
-.routelink{
+.routelink {
   text-decoration: none;
 }
 
-.casecard{
- 
+.casecard {
   width: 100%;
 
   padding-bottom: 100%;
@@ -185,33 +185,29 @@ this.currentTypeName = caseType ? caseType.typeName : '全部动态'
   /* position: relative; */
 
   margin: 0;
-
 }
 
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-      margin-top: 10px !important;
+  margin-top: 10px;
 }
- .btn1 {
-    font-size: 24px !important;
-    color: black !important;
-    border: none !important;
-  }
-  .btn1:hover {
-    color: red !important;
-    text-decoration: none;
-  }
-.mobbtn{
-color: #e03723;
-   
-  padding:12px 40px;
-
-    border-radius: 0px;
-
-    background-color: rgb(252, 151, 252);
-    border: 2px solid #bfbfbf;
-  
+.btn1 {
+  font-size: 24px;
+  padding: 25px;
+  color: black;
+  border: none;
+}
+.btn1:hover {
+  color: #e03723;
+  text-decoration: none;
+}
+.mobbtn {
+  color: #e03723;
+  padding: 12px 40px;
+  border-radius: 0px;
+  background-color: rgb(252, 151, 252);
+  border: 2px solid #bfbfbf;
 }
 
 .text-left {
@@ -228,7 +224,7 @@ color: #e03723;
 }
 
 @media (max-width: 992px) {
-  .dynamic{
+  .dynamic {
     margin-top: 58px;
   }
   .comtype {
@@ -237,18 +233,24 @@ color: #e03723;
   }
   .dyn-main {
     margin-top: 20px;
-    
-    padding-left: 15px;
-    padding-right: 15px;
+
+     padding-left: 1.6vw;
+    padding-right: 1.6vw;
+  }
+  .marginTP {
+    margin-top: 3.2vw;
+  }
+  .cards{
+    padding-left: 1.6vw;
+    padding-right: 1.6vw;
   }
 }
 .row {
-    margin: 0;
-  }
-.marginTP {
-  margin-top: 3rem;
+    margin-left: 0;
+  margin-right: 0;
 }
 
+
 @media (min-width: 992px) {
   .main {
     display: -webkit-flex; /* Safari */
@@ -258,18 +260,20 @@ color: #e03723;
     /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
     justify-content: center;
   }
-  .dynamic {
-  margin-top: 116px;
-  margin-bottom: -116px;
-  padding-bottom: 116px; 
-  background-color: #fafafa;
+  .marginTP {
+  margin-top: 3rem;
 }
-  
+  .dynamic {
+    margin-top: 116px;
+    margin-bottom: -116px;
+    padding-bottom: 116px;
+    background-color: #fafafa;
+  }
+
   .mobtype {
     display: none;
   }
 
-  
   .btn {
     font-size: 24px;
     margin-top: 88px;
@@ -296,8 +300,34 @@ color: #e03723;
     padding: 10px;
   }
 }
-.btn-link{
+.btn-link {
   outline: none;
-  text-decoration: none
+  text-decoration: none;
+}
+@media (min-width: 992px) and (max-width: 1550px) {
+  .btn1 {
+    font-size: 20px;
+    padding: 21px;
+  }
+  .border-bottom {
+    padding: 0;
+    margin-top: 0px;
+  }
+  .btn {
+    padding: 9px 105px;
+    font-size: 17px;
+    margin-top: 28px;
+  }
+}
+.btnactive{
+  color:#e03723 !important;
+}
+.rebtn{
+  border-radius: 0px;
+}
+.rebtn:hover{
+  color: #e03723 !important;
+    border: 1px solid #e03723;
+    background: #fff;
 }
 </style>

src/views/Home.vue

@@ -20,7 +20,7 @@
               <a href="/case">案例</a>
             </li>
             <li class="a">
-              <a href="/dynamic">动态</a>
+              <a href="/Share">动态</a>
             </li>
             <li class="a">
               <a href="/about">关于</a>
@@ -32,7 +32,7 @@
         </div>
       </div>
     </nav>
-<Navbars v-if="isMobilePhone"></Navbars>
+    <Navbars v-if="isMobilePhone"></Navbars>
     <div class="aarow_box animated aarowMove">
       <div class="aarow" @click="arrow()"></div>
     </div>
@@ -59,7 +59,7 @@
         </div>
       </div>
 
-      <Business></Business>
+      <Business class="business"></Business>
     </div>
 
     <div class="contanier home-case top-case">
@@ -89,13 +89,13 @@
           <h1>以品质答谢信任</h1>
         </div>
         <div class="col-md-12" style="padding:0;width: 100%; color:#595757">
-          <p>
+          <p class="p2">
             至始至终将服务放到首位！
             <br class="br-logotop" />用更好的创意，助力客户创造品牌价值
           </p>
         </div>
 
-        <div class="row st">
+        <div class="row st partner">
           <!-- <div v></div> -->
           <div class="col-md-2 col-xs-4" v-for="(item,index) in blogs" :key="index+'img'">
             <!-- <img :src="item.logoImg" alt class="ph-logo" /> -->
@@ -156,7 +156,7 @@ export default {
     Wheelplanting,
     // Wheelplantings,
     Business,
-    Navbars:() => import('../components/Navbars'),
+    Navbars: () => import('../components/Navbars'),
   },
   mounted () {
     window.addEventListener('scroll', () => {
@@ -250,6 +250,10 @@ export default {
   }
 }
 
+.col-md-2 {
+  padding: 0;
+}
+
 @media (max-width: 992px) {
   .business-text {
     display: none;
@@ -262,10 +266,13 @@ export default {
     letter-spacing: 1px;
   }
   h3 {
-    font-size: 2.4rem;
-    padding: 0px;
+    padding-top: 3%;
+    padding-left: 5%;
+    font-size: 2rem;
+    /* padding: 0px; */
     width: 100%;
-    height: 2.4rem;
+    height: 19%;
+    /* line-height: 19%; */
 
     background-color: black;
     color: #fff;
@@ -405,9 +412,14 @@ export default {
     padding: 33px;
   }
 
+  .business {
+    margin-bottom: 75px;
+    margin-top: 50px !important;
+  }
+
   .st {
-    padding-left: 10%;
-    padding-right: 10%;
+    padding-left: 9%;
+    padding-right: 9%;
     margin: 0;
   }
   .st .sw p {
@@ -416,13 +428,20 @@ export default {
     padding-bottom: 0;
   }
   .ph-logo {
-    width: 100%;
+    width: 90%;
     /* padding-bottom: 37px; */
     /* height: 100%; */
+    background-position: center center;
     height: 0;
     padding-bottom: 45.8%;
     background-size: 100% 100% !important;
-    margin: 18px;
+    margin: 0px;
+  }
+  .partner {
+    margin-right: -0.6vw;
+  }
+  .ph-logo:nth-child(6n + 1) {
+    margin-left: 0.7vw;
   }
   .home-case {
     padding: 0;
@@ -482,7 +501,6 @@ export default {
   margin: 0;
 }
 
-
 .st4 {
   width: 100%;
 
@@ -544,12 +562,12 @@ h3 {
   hr {
     margin-bottom: 0px;
     width: 50px;
-    border: 2px solid red;
+    border: 2px solid #e03723;
   }
 }
 
 @media (max-width: 992px) {
-  .casetitle{
+  .casetitle {
     display: none;
   }
   .navbar {
@@ -566,28 +584,29 @@ h3 {
 }
 @media (min-width: 992px) {
   .st4 .casetitle {
-  display: none;
-}
+    display: none;
+  }
 
-.st4:hover .casetitle {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  float: left;
-  padding: 0 auto;
-  background: rgba(0, 0, 0, 0.7);
-  align-items: center;
-  display: -webkit-flex;
-  display: flex;
+  .st4:hover .casetitle {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    float: left;
+    padding: 0 auto;
+    background: rgba(0, 0, 0, 0.7);
+    align-items: center;
+    display: -webkit-flex;
+    display: flex;
 
-  text-align: center;
-}
-.st4 .casetitle p {
-  text-align: center;
-  display: block;
-  color: #fff;
-  width: 100%;
-}
+    text-align: center;
+  }
+  .st4 .casetitle p {
+    font-size: 2.4rem;
+    text-align: center;
+    display: block;
+    color: #fff;
+    width: 100%;
+  }
   .br-logotop {
     display: none;
   }
@@ -601,7 +620,6 @@ h3 {
     margin: 0;
     transition: all 0.5s;
 
-
     .navbar-brand {
       padding: 0;
 
@@ -612,6 +630,7 @@ h3 {
 
     .nav {
       font-size: 2.6rem;
+      margin-top: 5px;
       li {
         margin-left: 2vw;
         a {
@@ -638,8 +657,11 @@ h3 {
       // background: #fff;
       background: rgba(255, 255, 255, 1);
       padding: 30px 0;
+      -moz-box-shadow: 0px 2px 2px #ccc; /* 老的 Firefox */
+      box-shadow: 0px 2px 2px #ccc;
       .nav {
         font-size: 2.6rem;
+
         li {
           a {
             color: #000;
@@ -653,14 +675,69 @@ h3 {
             }
           }
         }
+        li:first-child {
+          a{
+            border-bottom: 3px solid #000;
+          }
+        }
       }
 
       .logo {
         background: url("../assets/logo1.png");
       }
     }
-
-    
+  }
+  .p2 {
+    margin-bottom: 75px;
   }
 }
+@media (min-width: 992px) and (max-width: 1550px) {
+  h2 {
+    font-size: 3rem;
+  }
+  .p1 {
+    font-size: 1.7rem;
+  }
+  h4 {
+    font-size: 1.7rem;
+    line-height: 30px;
+  }
+  h1 {
+    font-size: 3rem;
+    padding-top: 60px;
+  }
+  .p2 {
+    padding: 7px 5px 0 5px;
+    font-size: 1.7rem;
+  }
+  .p2 {
+    margin-bottom: 50px;
+  }
+  .top-news {
+    margin-top: 45px;
+    h3 {
+      font-size: 1.7rem;
+      padding: 30px;
+      height: 70px;
+      line-height: 1.7rem;
+      padding: 28px;
+    }
+  }
+  .btn {
+    font-size: 17px;
+    margin-top: 28px;
+    padding: 8.4px 35px;
+  }
+  .business {
+    margin-bottom: 60px;
+    margin-top: 40px !important;
+  }
+}
+@media (max-width: 600px) {
+  h3 {font-size: 1.4rem}
+}
+@media (max-width: 400px) {
+  h3 {font-size: 1rem}
+}
+
 </style>