916

src/App.vue

 <template>
   <div id="app">
-    <div>
+    <!-- <div>
       <nav class="navbar navbar-default navbar-fixed-top app" :class="{ 'scroll': scrolled }">
         <div class="container-fluid con">
-          <!-- Brand and toggle get grouped for better mobile display -->
+         
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed">
               <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
             </button>
-            <!-- <el-button class="btn-link" @click="navdrawer = true" type="button" style="margin-left: 16px;"><span class="iconfont icon-caidan"></span></el-button> -->
+           
             <a class="navbar-brand" href="#">
-              <!-- <img alt="Brand" src="./assets/logo1.png" /> -->
+            
               <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">
-              <!-- <router-link to="/">首页</router-link> 
-                        <router-link to="/case" class="a"  style="color:#000000;">案例</router-link>
-                        <router-link to="/dynamic" class="a" style="color:#000000;">动态</router-link>
-                        <router-link to="/about" class="a" style="color:#000000;">关于</router-link>
-              <router-link to="/contact" class="a" style="color:#000000;">联系</router-link>-->
+            
               <li class="a">
                 <a href="/">首页</a>
               </li>
               </li>
             </ul>
           </div>
-          <!-- /.navbar-collapse -->
+         
         </div>
-        <!-- /.container-fluid -->
+     
       </nav>
     </div>
-
-    <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
+    -->
+    <!-- <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
       <div>
         <el-row style="text-align: center;">
           <el-col :span="24">
           </el-col>
         </el-row>
       </div>
-    </el-drawer>
+    </el-drawer> -->
 
     <div class="main">
       <router-view />
   },
 
   mounted () {
-    window.addEventListener('scroll', () => {
-      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
-    })
+
 
     window.onscroll = function () {
       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
 <style>
 #app {
-  
-  font-family: "Microsoft Yahei Light","Microsoft Yahei","KaiGenGothicSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Microsoft Yahei Light", "Microsoft Yahei",
+    "KaiGenGothicSC-Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   width: auto;
   margin: 0;
 }
-.app{
-
-  font-family: "Microsoft Yahei","KaiGenGothicSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif;
+.app {
+  font-family: "Microsoft Yahei", "KaiGenGothicSC-Light", "Helvetica Neue",
+    "Helvetica", "Arial", sans-serif;
 }
 
 .coll {
   color: red;
 }
 
-
-
 @media (min-width: 768px) and (max-width: 992px) {
   .con {
     padding-left: 5vw !important;
     padding-right: 5vw !important;
   }
-  .logo{
+  .logo {
     margin-top: 0 !important;
   }
-  .nav li {margin-left: 0 !important;}
+  .nav li {
+    margin-left: 0 !important;
+  }
   .a {
     font-size: 2.4rem !important;
     margin-top: 0.5rem !important;
   .main {
     padding-bottom: 9.4rem;
   }
- 
 }
 
 .rtl #drawer__title {
   display: none;
 }
 
+
+</style>
+
+
+<style lang="less" scoped>
 @media (max-width: 992px) {
   .navbar {
     height: 60px;
     );
     margin-bottom: 30px;
   }
-  .btn1 {
-    font-size: 24px !important;
-    color: black !important;
-    border: none !important;
-  }
-  .btn1:hover {
-    color: red !important;
-    text-decoration: none;
-  }
-  .btn1:active {
-    color: red !important;
-    text-decoration: none;
-  }
+ 
 }
-</style>
-
-
-<style lang="less" scoped>
 @media (min-width: 768px) {
   .navbar {
     padding: 30px 0;
       li {
         margin-left: 2vw;
         a {
-      
-color: #000;
-    padding-left: 5px;
-    padding-right: 5px;
-    margin: 0 10px;
+          color: #000;
+          padding-left: 5px;
+          padding-right: 5px;
+          margin: 0 10px;
           &:hover {
             border-bottom: 3px solid #000;
           }

src/components/Business.vue

 <template>
   <div class="business">
- <div 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%" />
-            <div>
-              <h4>{{item.serviceName}}</h4>
-              <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
+    <div v-if="show" class="st">
+      <div class="swiper-father">
+        <div class="swiper-container swiper-list" style="width: 100%">
+          <div class="swiper-wrapper">
+            <div v-for="(item,index) in service" :key="index" class="swiper-slide">
+              <div style="width: 100%;">
+                <img :src="item.serviceImageUrl" width="100%" />
+                <div>
+                  <h4>{{item.serviceName}}</h4>
+                  <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
+                </div>
+              </div>
             </div>
           </div>
- </div>
-    
-    <!-- <div class="contanier st">
-      <div class="col-xs-6 col-md-3">
-        <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
-        <div>
-          <h4>品牌服务</h4>
-          <p class="text-left business-text">
-            品牌咨询
-            <br />品牌策划
-            <br />CIS/VIS
-            <br />logo设计
-            <br />
-          </p>
         </div>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
       </div>
-
-      <div class="col-xs-6 col-md-3">
-        <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
-        <div class="caption">
-          <h4>营销与策划</h4>
-          <p class="text-left">
-            营销创意
-            <br />广告创意
-            <br />活动策划与执行
-          </p>
-        </div>
-      </div>
-      <div class="col-xs-6 col-md-3">
-        <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
-        <div class="caption">
-          <h4>创意设计</h4>
-          <p class="text-left">
-            平面设计
-            <br />平面设计
-            <small>(海报/展架/画册/包装...)</small>
-            <br />数字媒体
-            <small>(H5/短视频/小程序...)</small>
-            <br />动画制作
-            <br />视觉设计
-            <small>(app/网站)</small>
-            <br />空间设计
-            <small>(美陈/展厅/店面/导视)</small>
-            <br />视频包装
-          </p>
-        </div>
-      </div>
-      <div class="col-xs-6 col-md-3">
-        <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
-        <div class="caption">
-          <h4>制作与传播</h4>
-          <p class="text-left">
-            物料制作
-            <br />传统媒介
-            <br />网络制作
-          </p>
+    </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>
         </div>
       </div>
-    </div>-->
+
+
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-//  import Swiper from "swiper";
-// import Swiper from "swiper";
+import Swiper from 'swiper';
 import "swiper/dist/css/swiper.min.css";
 import request from '../../utils/request'
 import apis from '../config/api';
   name: "business",
   data () {
     return {
-      show: true,
+      show: false,
       service: []
     };
   },
   components: {},
 
   mounted () {
-  
+    // this.initSwiper()
+  },
+  methods: {
+    initSwiper () {
+
+      if (!this.swiper) {
+
+        this.swiper = new Swiper('.swiper-list', {
+
+          // loop: true,
+
+          slidesPerView: 4,
+          // slidesPerGroup: 1,
+          spaceBetween: 40,
+          // virtualTranslate: true,
+          // centeredSlides: true,
+          // watchSlidesProgress: true,
+
+          // direction :horizontal,
+          // slidesPerView : 4,
+
+          // 如果需要前进后退按钮
+
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
+
+
+
+        })
+      } else {
+        this.swiper.update(true)
+      }
+
+
+    }
   },
+
+
+  // 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)
+  //       }
+  //     }
+  //   }
+
+
+
+
+
+
   created () {
 
 
 
 
+
     //http://localhost:8080/pc/service/list
     request({
       ...apis.service.list,
 
 
     }).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")
       // window.console.log(this.service, "543");
     })
 
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-
 
+<style scoped>
 @media (max-width: 992px) {
- .business-text{
-   display: none;
- }
-
+  .business-text {
+    display: none;
+  }
 
   h4 {
     font-family: "Microsoft Yahei Light";
   .sw {
     padding: 2% !important;
   }
-
-
-
- 
-
- 
 }
 
 @media (min-width: 992px) {
+  .swiper-button-prev {
+    width: 36px;
+    height: 96px;
+    top: 25%;
+    background-image: url(../assets/image/home/service_arrow_normal.png);
+    background-size: 36px, 96px;
+    left: -5vw;
+    right: auto;
+    outline: none;
+  }
+  .swiper-button-next {
+    width: 36px;
+    height: 96px;
+
+    top: 25%;
+    background-image: url(../assets/image/home/service_arrow_normal.png);
+    background-size: 36px, 96px;
+    right: -5vw;
+    transform: rotate(180deg);
+    outline: none;
+  }
+  .swiper-button-prev:hover {
+    width: 36px;
+    height: 96px;
+    top: 25%;
+    background-image: url(../assets/image/home/service_arrow_trigger.png);
+    background-size: 36px, 96px;
+    left: -5vw;
+    right: auto;
+    outline: none;
+  }
+  .swiper-button-next:hover {
+    width: 36px;
+    height: 96px;
+
+    top: 25%;
+    background-image: url(../assets/image/home/service_arrow_trigger.png);
+    background-size: 36px, 96px;
+    right: -5vw;
+    transform: rotate(180deg);
+    outline: none;
+  }
 
+  /* trigger */
+  .swiper-father {
+    position: relative;
+  }
 
-  p {
+  p {line-height: 1.6em;
+    font-size: 2.2rem;
+    padding-bottom: 0;
     margin: 0px;
     padding: 0px 5px 0 5px;
     font-size: 2.4rem;
     color: #595757;
   }
-  
 
   h4 {
     font-family: "Microsoft Yahei Light";
     padding: 33px;
   }
 
-  .st {
-    padding-left: 10%;
-    padding-right: 10%;
-    margin: 0;
-  }
-  .st .sw p {
-    line-height: 1.6em;
-    font-size: 2.2rem;
-    padding-bottom: 0;
-  }
-
-
-
+  
+}
+.st {
+  padding-left: 10%;
+  padding-right: 10%;
+  margin: 0;
 }
-
-
-
 </style>
 
 
 <style lang="less" scoped>
-
-
-
-
-
-
-
-
- @media (max-width: 992px) {
- 
-
+@media (max-width: 992px) {
   .st {
     padding: 0 20px;
 
       padding: 20px;
     }
   }
-} 
-
+}
 </style>

src/components/Navbars.vue

+<template>
+  <div class="navbars">
+    <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>
+</template>
+
+<script>
+
+
+export default {
+  data () {
+    return {
+      scrolled: false,
+      
+    
+      navdrawer: false,
+      direction: 'rtl',
+    }
+  },
+
+
+
+
+
+
+}
+</script>
+
+<style>
+.messageBox-Contace {
+  width: 80% !important;
+}
+</style>
+<style scoped>
+p {
+  margin: 0 50px;
+}
+</style>
+
+<style scoped>
+
+
+.coll {
+  display: none;
+}
+.navbar-toggle {
+  margin: 0 10px 0 0;
+  /* 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%;
+  }
+
+  .page-footer {
+    height: 120px;
+  }
+  .footer-p {
+    line-height: 120px;
+    font-size: 20px;
+    margin: 0;
+  }
+  .main {
+    padding-bottom: 9.4rem;
+  }
+}
+
+.rtl #drawer__title {
+  margin: 0;
+}
+#hide {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .navbar {
+    height: 60px;
+  }
+  .navbar-brand {
+    padding: 0;
+  }
+  .logo {
+    margin-top: 15px;
+    margin-left: 20px;
+    width: 150px;
+    height: 30px;
+    background-size: 100% 100% !important;
+    background: url("../assets/logo1.png");
+  }
+  .logoimg {
+    margin: -20px auto 0px;
+  }
+  .a {
+    font-size: 2.4rem;
+    margin-top: 2rem;
+    color: #000;
+  }
+  .a a {
+    color: #000;
+  }
+  .main {
+    padding-bottom: 3rem;
+  }
+
+  .line {
+    height: 2px;
+    width: 300px;
+    background: -webkit-linear-gradient(
+      left,
+      rgba(255, 255, 255, 0),
+      #aaa,
+      rgba(255, 255, 255, 0)
+    );
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0),
+      #aaa,
+      rgba(255, 255, 255, 0)
+    );
+    margin-bottom: 30px;
+  }
+  .btn1 {
+    font-size: 24px !important;
+    color: black !important;
+    border: none !important;
+  }
+  .btn1:hover {
+    color: red !important;
+    text-decoration: none;
+  }
+  .btn1:active {
+    color: red !important;
+    text-decoration: none;
+  }
+}
+</style>
+
+
+<style lang="less" scoped>
+@media (min-width: 768px) {
+  .navbar {
+    padding: 30px 0;
+    // background-color: transparent;
+    border: none;
+    padding: 30px 0;
+    z-index: 50;
+    height: 116px;
+    margin: 0;
+
+    .navbar-brand {
+      padding: 0;
+
+      img {
+        height: 100%;
+      }
+    }
+
+    .nav {
+      font-size: 2.6rem;
+      li {
+        margin-left: 2vw;
+        a {
+          color: #000;
+          padding-left: 5px;
+          padding-right: 5px;
+          margin: 0 10px;
+          &:hover {
+            border-bottom: 3px solid #000;
+          }
+        }
+      }
+    }
+
+    .logo {
+      width: 300px;
+      height: 60px;
+      background: url("../assets/logo1.png");
+    }
+
+    // &.scroll {
+    //   transition: all 0.5s;
+    //   background: #fff;
+
+    //   .nav {
+    //     li {
+    //       a {
+    //         color: #000;
+
+    //         &:hover {
+    //           border-bottom: 3px solid #000;
+    //         }
+    //       }
+    //     }
+    //   }
+
+    //   .logo {
+    //     background: url("./assets/logo1.png");
+    //   }
+    // }
+  }
+}
+</style>

src/components/Wheelplanting.vue

 
     initSwiper () {
       if (!this.swiper) {
-        this.swiper = new Swiper(".swiper-container", {
+        this.swiper = new Swiper(".con-swiper", {
           // loop:true,
           // autoplay: true,
           direction: this.direction || 'horizontal',

src/views/About.vue

 <template>
   <div class="about">
+
+    <Navbars></Navbars>
     <div class>
       <img src="../assets/image/about/aboutbanner.jpg" width="100%" />
     </div>
   </div>
 </template>
 
+<script>
+// @ is an alias to /src
+
+
+import Navbars from '../components/Navbars'
+
+export default {
+name: 'about',
+ data () {},
+  components: {
+   
+    Navbars,
+  },
 
+ 
+
+  
+
+
+}
+</script>
 
 <style scoped>
 @media (min-width: 768px) {

src/views/Case.vue

 <template>
   <div class="case">
+    <Navbars></Navbars>
     <div>
       <img :src="cover.coverImg" width="100%" />
       <!-- width="100%" height="300"> -->
       <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;">全部案例</button>
           </el-col>
-          <el-col :span="24" v-for="cas in casetype" :key="cas.id"> 
+          <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>
           </el-col>
         </div>
       </div>
     </div>
-<!--  -->
+    <!--  -->
     <div style="margin-top:40px">
       <button type="button" v-if="!allLoaded" class="btn btn-default" @click="more">加载更多</button>
       <p v-else>已经到底了~更多案例尽请期待~</p>
 import request from '../../utils/request'
 import apis from '../config/api'
 import CaseCard from '../components/CaseCard'
+import Navbars from '../components/Navbars'
 
 export default {
   name: 'Case',
   components: {
     CaseCard,
+    Navbars,
   },
   data () {
     return {
 </script>
 
 <style scoped>
-
-.routelink{
+.routelink {
   text-decoration: none;
 }
 
-.casecard{
- 
+.casecard {
   width: 100%;
 
   padding-bottom: 100%;
   /* position: relative; */
 
   margin: 0;
-
 }
 
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-      margin-top: 10px !important;
+  margin-top: 10px !important;
 }
- .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;
+.btn1 {
+  font-size: 24px !important;
+  color: black !important;
+  border: none !important;
+}
+.btn1:hover {
+  color: red !important;
+  text-decoration: none;
+}
+.mobbtn {
+  color: #e03723;
 
-    border-radius: 0px;
+  padding: 12px 40px;
+
+  border-radius: 0px;
 
-    background-color: rgb(252, 151, 252);
-    border: 2px solid #bfbfbf;
-  
+  background-color: rgb(252, 151, 252);
+  border: 2px solid #bfbfbf;
 }
 
 .text-left {
 }
 
 @media (max-width: 992px) {
-  .case{
+  .case {
     margin-top: 58px;
   }
   .comtype {
   }
 }
 .row {
-    margin: 0;
-  }
+  margin: 0;
+}
 .marginTP {
   margin-top: 3rem;
 }
     justify-content: center;
   }
   .case {
-  margin-top: 116px;
-  margin-bottom: -116px;
-  padding-bottom: 116px; 
-  background-color: #fafafa;
-}
-  
+    margin-top: 116px;
+    margin-bottom: -116px;
+    padding-bottom: 116px;
+    background-color: #fafafa;
+  }
+
   .mobtype {
     display: none;
   }
 
-  
   .btn {
     font-size: 24px;
     margin-top: 88px;
     padding: 10px;
   }
 }
-.btn-link{
+.btn-link {
   outline: none;
-  text-decoration: none
+  text-decoration: none;
 }
 </style>

src/views/Contact.vue

 <template>
   <div class="contact">
+     <Navbars></Navbars>
     <div class>
       <img src="../assets/image/contact/contactbanner.png" style="width:100%" />
       <!-- width="100%" height="300"> -->
   </div>
 </template>
 
+
+
+<script>
+// @ is an alias to /src
+
+
+import Navbars from '../components/Navbars'
+
+export default {
+name: 'contact',
+ data () {},
+  components: {
+   
+    Navbars,
+  },
+
+ 
+
+  
+
+
+}
+</script>
+
 <style lang="less" scoped>
 @media (max-width: 992px){
     .address{

src/views/Details.vue

 <template>
   <div class="details">
+    <Navbars></Navbars>
     <div class="head">
       <img :src="current.caseCoverImg" width="100%" />
     </div>
     <div class="contanier st">
       <h1 style>{{current.caseTitle}}</h1>
 
-      <p >
+      <p>
         客户：
         <img :src="current.caseLogoImg" alt />
         &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所属行业：{{current.caseIndustry}}
           </div>
         </div>
         <div class="col-xs-6 col-md-6" style="padding 0;">
-          <div class="pull-right" >
-            
-            <div style=" display: flex;"><span class="sharetext" >分享：</span><share :config="shareConfig"/></div> <div></div>
-  
-  
+          <div class="pull-right">
+            <div style=" display: flex;">
+              <span class="sharetext">分享：</span>
+              <share :config="shareConfig" />
+            </div>
+            <div></div>
           </div>
         </div>
       </div>
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
                 <div style="width: 100%">
-                  <hr>
-                  <p>
-                    {{item.caseTitle}}
-                  </p>
+                  <hr />
+                  <p>{{item.caseTitle}}</p>
                 </div>
               </div>
             </div>
   </div>
 </template>
 
+
+
+
+
 <script>
 // @ is an alias to /src
 import request from '../../utils/request'
-import apis from '../config/api';
-
-
+import apis from '../config/api'
 
 
 
 export default {
-  name: 'CaseDetails',
+  name: 'Details',
 
   data () {
     return {
       // }
     }
 
+  },
+  components: {
+    share: () => import('../components/Share'),
+
+    Navbars: () => import('../components/Navbars'),
+
   },
   computed: {
     shareConfig () {
       return {
-        
+
         url: window.location.href,
         title: this.current.caseTitle,
         image: this.current.caseCoverImg, // 图片, 默认取网页中第一个img标签
       return (this.detail.recommends || []).slice(0, 4)
     },
   },
-  components: {
-    share: () => import('../components/Share'),
-  },
+
   created () {
 
-// var $config = {
-//     title               : '234',
-//     description         : '123',
-//     sites: ['weibo', 'wechat'], // 启用的站点
-//     wechatQrcodeTitle   : "微信扫一扫：分享", // 微信二维码提示文字
-//     wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
-// };
 
-// socialShare('.social-share-cs', $config);
 
 
     this.getDetail(this.$route.params.id)
       })
     },
 
-    
+
 
   },
 
 </script>
 
 <style lang="less" scoped>
-
-
 .casetitle {
   hr {
     margin-bottom: 20px;
     border: 2px solid red;
   }
 }
+@media (max-width: 992px) {
+  .casetitle {
+    display: none;
+  }
+}
 
 @media (min-width: 992px) {
   .pull-left {
     font-size: 2.4rem !important;
     color: black !important;
     border: none !important;
+    text-decoration: none;
   }
   .btn1:hover {
     color: red !important;
     font-size: 1.2rem !important;
     color: black !important;
     border: none !important;
+        text-decoration: none;
+
   }
-  .btn1:hover {
-    color: red !important;
-    text-decoration: none;
-  }
+
   .btn {
     width: 100px;
     padding: 3px;
   .pull-right {
     display: flex;
   }
-  .zantext{
+  .zantext {
     // margin-top: -3px;
     margin-left: 10px;
   }
-  .sharetext{
-display:inline-block;line-height:42px
+  .sharetext {
+    display: inline-block;
+    line-height: 42px;
   }
   .st {
     h1 {
 
     margin: 0;
   }
- 
 }
 </style>
 
     width: 100%;
   }
 }
-
 </style>
 
 <style lang="less" scoped>
-
 .icon-nobefore {
- &::before {
-   content: '' !important;
- } 
+  &::before {
+    content: "" !important;
+  }
 }
 </style>

src/views/Dynamic.vue

 <template>
   <div class="dynamic">
+    <Navbars></Navbars>
     <div>
       <img :src="cover.coverImg" width="100%" />
       <!-- width="100%" height="300"> -->
 import request from '../../utils/request'
 import apis from '../config/api'
 import CaseCard from '../components/CaseCard'
+import Navbars from '../components/Navbars'
 
 export default {
   name: 'dynamic',
   },
   components: {
     CaseCard,
+    Navbars,
   },
 
   created () {

src/views/Home.vue

         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
             <span class="sr-only">Toggle navigation</span>
-            
           </button>
           <a class="navbar-brand" href="/">
             <div alt="Brand" class="logo"></div>
         </div>
       </div>
     </nav>
-
+<Navbars v-if="isMobilePhone"></Navbars>
     <div class="aarow_box animated aarowMove">
       <div class="aarow" @click="arrow()"></div>
     </div>
         </div>
       </div>
 
-      
-<Business></Business>
-      <!-- <div class="row st"> -->
-
-        
-        <!-- <div class="col-xs-6 col-md-3 sw">
-          <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
-          <div class>
-            <h4>品牌服务</h4>
-            <p class="text-left business-text">
-              品牌咨询
-              <br />品牌策划
-              <br />CIS/VIS
-              <br />logo设计
-              <br />
-            </p>
-          </div>
-        </div>
-
-        <div class="col-xs-6 col-md-3 sw">
-          <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
-          <div class>
-            <h4>营销与策划</h4>
-            <p class="text-left business-text">
-              营销创意
-              <br />广告创意
-              <br />活动策划与执行
-            </p>
-          </div>
-        </div>
-
-        <div class="col-xs-6 col-md-3 sw">
-          <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
-          <div class>
-            <h4>创意设计</h4>
-            <p class="text-left business-text">
-              平面设计
-              <small>(海报/展架/画册/包装...)</small>
-              <br />数字媒体
-              <small>(H5/短视频/小程序...)</small>
-              <br />动画制作
-              <br />视觉设计
-              <small>(app/网站)</small>
-              <br />空间设计
-              <small>(美陈/展厅/店面/导视)</small>
-              <br />视频包装
-            </p>
-          </div>
-        </div>
-
-        <div class="col-xs-6 col-md-3 sw">
-          <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
-          <div class>
-            <h4>制作与传播</h4>
-            <p class="text-left business-text">
-              物料制作
-              <br />传统媒介
-              <br />网络制作
-            </p>
-          </div>
-        </div> -->
-      <!-- </div> -->
+      <Business></Business>
     </div>
 
     <div class="contanier home-case top-case">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
                 <div style="width: 100%">
-                  <hr>
-                  <p>
-                    {{item.caseTitle}}
-                  </p>
+                  <hr />
+                  <p>{{item.caseTitle}}</p>
                 </div>
               </div>
             </div>
           <div class="row">
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
               <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
-                <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"><h3 class="text-left" style>{{item.caseTitle}}</h3></div>
-                
+                <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic">
+                  <h3 class="text-left" style>{{item.caseTitle}}</h3>
+                </div>
               </router-link>
             </div>
             <!-- item.caseCoverImg -->
   data () {
     return {
       scrolled: false,
-      // rescrolled: false,
+      rescrolled: false,
       isMobilePhone,
       show: true,
       data: '',
     Wheelplanting,
     // Wheelplantings,
     Business,
+    Navbars:() => import('../components/Navbars'),
   },
   mounted () {
     window.addEventListener('scroll', () => {
-      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 300
-      
+      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 100
+
+    })
+
+    window.addEventListener('!scroll', () => {
+      this.rescrolled = (document.documentElement.scrollTop || document.body.scrollTop) < 100
+
     })
 
-    // window.addEventListener('scrolll', () => {
-    //   this.rescrolled = (document.documentElement.scrollTop || document.body.scrollTop) < 300
-      
-    // })
 
-    
 
 
   },
- 
+
   methods: {
     arrow () {
 
 
 <style scoped>
 @media (min-width: 768px) and (max-width: 992px) {
-
   .home {
-  margin-top: 116px;
-  margin-bottom: -116px;
-  padding-bottom: 116px; 
-  
-}
+    margin-top: 116px;
+    margin-bottom: -116px;
+    padding-bottom: 116px;
+  }
   .con {
     padding-left: 5vw !important;
     padding-right: 5vw !important;
   }
-  .logo{
+  .logo {
     margin-top: 0 !important;
   }
-  .nav li {margin-left: 0 !important;}
+  .nav li {
+    margin-left: 0 !important;
+  }
   .a {
     font-size: 2.4rem !important;
     margin-top: 0.5rem !important;
   margin: 0;
 }
 
-/* .home-business {
-  widows: 1300px;
-  height: 600px;
-} */
-
-.main {
-  display: -webkit-flex; /* Safari */
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
-  justify-content: center;
-}
 
 .st4 {
   width: 100%;
 
   margin: 0;
 }
-.st4 .casetitle {
-  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;
 
-  text-align: center;
-}
-.st4 .casetitle p {
-  text-align: center;
-  display: block;
-  color: #fff;
-  width: 100%;
-}
 .home-news {
   padding: 0 6px;
   margin-bottom: 12px;
   padding-bottom: 60%;
   background-size: 100% 100% !important;
 }
-h3{
-      position: absolute;
-   
-    width: calc(100% - 12px);
- bottom: 0;
+h3 {
+  position: absolute;
+
+  width: calc(100% - 12px);
+  bottom: 0;
   color: #fff;
- 
-  background: rgba(0, 0, 0, 0.8);
-}
 
+  background: rgba(0, 0, 0, 0.9);
+}
 </style>
 
 
 <style lang="less" scoped>
-.routelink{
+.home-wheel {
+  z-index: 60;
+}
+.routelink {
   text-decoration: none;
 }
 
-
-
 .casetitle {
   hr {
     margin-bottom: 0px;
   }
 }
 
-
 @media (max-width: 992px) {
+  .casetitle{
+    display: none;
+  }
   .navbar {
     display: none;
   }
   }
 }
 @media (min-width: 992px) {
+  .st4 .casetitle {
+  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;
+
+  text-align: center;
+}
+.st4 .casetitle p {
+  text-align: center;
+  display: block;
+  color: #fff;
+  width: 100%;
+}
   .br-logotop {
     display: none;
   }
   .navbar {
     height: 116px;
     z-index: 70;
-    padding: 30px 0;
-    background-color: transparent;
+    padding: 47px 0;
+    // background-color: transparent;
+    background: rgba(255, 255, 255, 0);
     border: none;
     margin: 0;
+    transition: all 0.5s;
+
+
     .navbar-brand {
       padding: 0;
 
         a {
           color: #fff;
 
-     padding-left: 5px;
-    padding-right: 5px;
-    margin: 0 10px;
+          padding-left: 5px;
+          padding-right: 5px;
+          margin: 0 10px;
           &:hover {
             border-bottom: 3px solid #fff;
           }
       height: 60px;
       background: url("../assets/logo.png");
     }
-
+    // padding-top: 20px;
     &.scroll {
       transition: all 0.5s;
-      background: #fff;
-
+      // background: #fff;
+      background: rgba(255, 255, 255, 1);
+      padding: 30px 0;
       .nav {
+        font-size: 2.6rem;
         li {
           a {
             color: #000;
 
-    padding-left: 5px;
-    padding-right: 5px;
-    margin: 0 10px;
+            padding-left: 5px;
+            padding-right: 5px;
+            margin: 0 10px;
 
             &:hover {
               border-bottom: 3px solid #000;
       }
     }
 
-    //  &.scrolll {
-    //   transition: all 0.5s;
-    //   background-color: transparent;
-    //   .nav {
-    //     li {
-    //       a {
-    //         color: #fff;
-
-    //         &:hover {
-    //           border-bottom: 3px solid #fff;
-    //         }
-    //       }
-    //     }
-    //   }
-
-    //   .logo {
-    //     background: url("../assets/logo.png");
-    //   }
-    // }
+    
   }
 }
 </style>