9.10

src/App.vue

 <template>
   <div id="app">
     <div>
-      <nav class="navbar navbar-default navbar-fixed-top" :class="{ 'scroll': scrolled }">
+      <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">
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/case">02 案例展示</a>
+            <a href="/case" class="btn1">02 案例展示</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/dynamic">03 动态分享</a>
+            <a href="/dynamic" class="btn1">03 动态分享</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/about">04 关于福予</a>
+            <a href="/about" class="btn1">04 关于福予</a>
           </el-col>
 
           <el-col :span="24" class="a">
-            <a href="/contact">05 联系我们</a>
+            <a href="/contact" class="btn1">05 联系我们</a>
           </el-col>
 
           <el-col :span="24" class="a">
     <div class="main">
       <router-view />
     </div>
-<div id="hide">
-    <div class="coll">
-      <div >
-        <div class="btn btn-default" href="#" 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>
-        <div class="btn btn-default" role="button" @click="open" v-if="current1" @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 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>
+          <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>
         </div>
       </div>
-    </div>
-    <div class="coll">
-      <div>
-        <a href="#" 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>
-      </div>
-      <div>
-        <a class="back-top" href="#" role="button" v-if="current2" @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>
+      <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>
+        </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>
+        </div>
       </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>
     </div>
     }
 
   },
- 
+
   mounted () {
     window.addEventListener('scroll', () => {
       this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
     })
 
-    window.onscroll=function(){
-    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
-    if(scrollTop!=0)
-    {
-        document.getElementById("hide").style.display="block";  
-        
-    }else{document.getElementById("hide").style.display="none";  }
-}
+    window.onscroll = function () {
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      if (scrollTop != 0) {
+        document.getElementById("hide").style.display = "block";
+
+      } else { document.getElementById("hide").style.display = "none"; }
+    }
 
 
   }
 
-  
+
 
 
 
 
 <style>
 #app {
-  font-family: Microsoft YaHei;
+  
+  font-family: "Microsoft Yahei Light","Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  background-color: fafafa;
+  /* background-color: fafafa; */
   color: #2c3e50;
   margin-top: px;
   width: auto;
   margin: 0;
 }
+.app{
+
+  font-family: "Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
 
 .coll {
   display: none;
 .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;
     padding-left: 10%;
     padding-right: 10%;
   }
-  
+
   .page-footer {
     height: 120px;
   }
     font-size: 20px;
     margin: 0;
   }
+  .main {
+    padding-bottom: 9.4rem;
+  }
+ 
 }
 
-.main {
-  padding-bottom: 9.4rem;
-}
-.rtl #drawer__title{
+.rtl #drawer__title {
   margin: 0;
 }
-#hide{
-  display: none
+#hide {
+  display: none;
 }
+
 @media (max-width: 992px) {
+  .navbar {
+    height: 60px;
+  }
   .navbar-brand {
     padding: 0;
   }
     background: url("./assets/logo1.png");
   }
   .logoimg {
-    margin: -20px auto 20px ;
+    margin: -20px auto 0px;
   }
   .a {
     font-size: 2.4rem;
   .a a {
     color: #000;
   }
- 
+  .main {
+    padding-bottom: 3rem;
+  }
 
   .line {
     height: 2px;
 
 
 <style lang="less" scoped>
-@media (min-width: 992px) {
+@media (min-width: 768px) {
   .navbar {
     padding: 30px 0;
     // background-color: transparent;
       li {
         margin-left: 2vw;
         a {
-          color: #000;
-
+      
+color: #000;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 0 10px;
           &:hover {
             border-bottom: 3px solid #000;
           }

src/components/CaseCard.vue

 <template>
-  <el-card class="case-card" shadow="hover" :body-style="{ padding: '0px' }" style=" padding: 0px">
+  <el-card class="case-card app" shadow="hover" :body-style="{ padding: '0px' }" style=" padding: 0px">
     <img :style="{background: `url(${thumb})`}" class="image" />
     <div class="body">
       <h3>{{title}}</h3>
       }
  text-decoration: none !important;
       .caption {
-        font-size: 2.4rem;
+        font-size: 2.0rem;
         color: #727171;
-        line-height: 1.2em;
         
+        line-height: 1.2em;
+        margin-top: 6px;
       }
     }
   }
     }
 
     .body {
-      padding: 0.5rem 1rem;
+      padding: 0.3rem 1rem;
       text-align: left;
 
       h3 {
         margin: 0;
         padding: 0;
         font-weight: 400;
-        font-size: 2rem;
+        font-size: 1.2rem;
         color: #000;
         line-height: 1em;
       }
 
       .caption {
-        font-size: 1.6rem;
+        font-size: 0.8rem;
         color: #727171;
         line-height: 1em;
       }

src/components/ClickContact.vue

 <template>
-  <div class="clickcontact">
+  <div class="clickcontact app">
     <div class="contact-1">
       <div class="contact-main">
         <h1 style="margin-bottom:70px">联系我们</h1>
 
 
 <style scoped>
+.clickcontact{
+  color: #000;
+}
+
 /* .contact-box {
   width: 80%;
   margin: 0 auto - 120px;

src/components/Wheelplanting.vue

     initSwiper () {
       if (!this.swiper) {
         this.swiper = new Swiper(".swiper-container", {
-          autoplay: true,
+          // loop:true,
+          // autoplay: true,
           direction: this.direction || 'horizontal',
           observer: true,
           observeSlideChildren: true,
 
           pagination: {
-            el: ".swiper-pagination",
-            hideOnClick: true
+            el: '.swiper-pagination',
+            bulletClass : 'swiper-pagination-bullet',
+            bulletActiveClass: 'my-bullet-active',
+            hideOnClick: true,
+         
           }
         });
       } else {
     z-index: 60;
   }
 }
-@media (max-width: 992px){
-  
+@media (max-width: 992px) {
   .wheelplanting .con-swiper {
     width: 100%;
-   height: 300px;
+    height: 300px;
   }
 }
-</style>
+</style>
+<style type="text/css">
+.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
+  opacity: 0.7;
+    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;
+  opacity: 1;
+}</style>

src/config/api.js

-const commPrefix = '/pc'
+const commPrefix = '/api/pc'
 
 const apis = {
   carousel:{
     list:{
-      url:`${commPrefix}/carousel/list`
+      url:`${commPrefix}/carousel/list`,
+      method: 'get',
     }
   },
   case: {

src/main.js

 new Vue({
   router,
   store,
+  // scrollBehavior(to,from,savedPosition){
+  //   if(savedPosition){
+  //     return savedPosition;
+  //   }else{
+  //     return {x:0,y:0}
+  //   }
+  // },
   
+
   render: h => h(App)
 }).$mount('#app')

src/router.js

     //   // which is lazy-loaded when the route is visited.
     //   component: () => import(/* webpackChunkName: "wheelplantings" */ './components/wheelplantings.vue')
     // },
-  ]
+  ],
+  scrollBehavior (to, from, saveTop) {
+    // return 期望滚动到哪个的位置
+    if(saveTop){
+      return saveTop
+    }else{
+      return {x:0,y:0}
+    }
+  },
 })

src/views/About.vue

   }
   .sssss {
     font-size: 1rem;
-
+color: #3e3a39;
     padding: 20px 20px;
   }
   .about-1 {
 
   .st div div .sssss {
     padding: 40px 20px;
-
+color: #3e3a39;
     font-size: 2.4rem;
   }
   .h1 {
     padding-top: 32px;
     font-size: 4.8rem;
+    font-weight: bold;
   }
 
   h2 {
     padding-bottom: 30px;
+    font-weight: bold;
   }
   .about-1-img {
     width: 175px;
   .teamh1 {
     margin-top: 0;
     font-size: 1.9vw;
+    font-weight: bold;
   }
   .teamp1 {
     font-size: 1.1vw;
     color: #595757;
     margin-bottom: 20px;
+    
   }
   .teamp2 {
     font-size: 1.1vw;
   }
 }
 
+
 /* 大屏幕（大桌面显示器，大于等于 1200px） */
 @media (min-width: 1200px) {
 }
  }
 
 @media (min-width: 992px) {
+  .p1{
+  color: #000;
+  font-size: 2.0rem;
+}
   .about-2 {
     padding-top: 60px;
     div {
     }
   }
 }
+
 @media (max-width: 992px) {
   .about-1 {
-    padding: 20px 30px;
+    padding: 20px 0px;
     div {
       // .about-1-img {
       // }
   .h1{
     font-size: 2.2rem;
     font-weight: bold;
-    margin-bottom: 24px;
+    margin-bottom: 0px;
   }
   .about-2 {
      

src/views/Case.vue

 
     <div class="border-bottom comtype">
       <div>
-        <button type="button" class="btn1 btn-link" 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" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <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>
       </div>
     </div>
 
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部案例</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">{{currentTypeName}}</el-button>
       </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
             <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{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:auto 40px; margin-top:30px">返回</button>
+            <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>
           </el-col>
         </el-row>
       </div>
       drawer: false,
       navdrawer: false,
       direction: 'rtl',
-
+      currentTypeName: '全部案例',
     }
   },
 
     },
 
     filterCase (caseType) {
+      this.currentTypeName = caseType ? caseType.typeName : '全部案例'
+
       this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
+      this.drawer = false;
+
     },
   }
 
   }
   .dyn-main {
     margin-top: 20px;
+    padding-left: 15px;
+    padding-right: 15px;
   }
 }
 .row {

src/views/Contact.vue

       <div class="contact-main">
         <h1 style="margin-bottom:70px">联系我们</h1>
 
-        <div class="row" style="margin:0">
+        <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>
           <strong>南京福予文化传媒有限公司</strong>
         </p>
 
-        <p class="p2">地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
+        <p class="p2 app">地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
       </div>
     </div>
   </div>
   }
 }
 @media (min-width: 992px){
+
+
+  h1{
+    font-weight: bold;
+  }
   .address{
     .p1{
       padding-top: 70px;font-size: 3.6rem

src/views/Details.vue

 <template>
   <div class="details">
     <div class="head">
-      <img :src="cover.coverImg" width="100%" />
+      <img :src="current.caseCoverImg" width="100%" />
     </div>
 
     <div class="contanier st">
           <router-link :to="{name: 'details', params: { id: item.id }}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
-                <p>{{item.caseTitle}}</p>
+                <div style="width: 100%">
+                  <hr>
+                  <p>
+                    {{item.caseTitle}}
+                  </p>
+                </div>
               </div>
             </div>
           </router-link>
   computed: {
     shareConfig () {
       return {
+        
         url: window.location.href,
         title: this.current.caseTitle,
+        image: this.current.caseCoverImg, // 图片, 默认取网页中第一个img标签
         description: this.current.caseSummary,
       }
     },
 // socialShare('.social-share-cs', $config);
 
 
-
     this.getDetail(this.$route.params.id)
   },
   beforeRouteUpdate (to, from, next) {
 </script>
 
 <style lang="less" scoped>
+
+
+.casetitle {
+  hr {
+    margin-bottom: 20px;
+    width: 50px;
+    border: 2px solid red;
+  }
+}
+
 @media (min-width: 992px) {
   .pull-left {
     font-size: 3.6rem;
   .st {
     h1 {
       font-size: 4.8rem;
+      font-weight: bold;
     }
     p {
       font-size: 2.4rem;
 
     margin: 0;
   }
-  .st4 .casetitle {
-    display: none;
-  }
+ 
 }
 </style>
 
 
     text-align: center;
   }
-  .st4:hover .casetitle p {
+  .st4 .casetitle p {
+    font-size: 2.4rem;
     text-align: center;
     display: block;
     color: #fff;

src/views/Dynamic.vue

 
     <div class="border-bottom comtype">
       <div>
-        <button type="button" class="btn1 btn-link" @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" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <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>
       </div>
     </div>
 
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">{{currentTypeName}}</el-button>
       </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
             <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{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:auto 40px; margin-top:30px">返回</button>
+            <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>
           </el-col>
         </el-row>
       </div>
       drawer: false,
       navdrawer: false,
       direction: 'rtl',
+
+      currentTypeName: '全部动态',
     }
   },
   components: {
     },
 
     filterCase (caseType) {
-      this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
+this.currentTypeName = caseType ? caseType.typeName : '全部动态'
+
+      
+      this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' });
+      this.drawer = false;
     },
   }
 
 }
 
 @media (max-width: 992px) {
-  .case{
+  .dynamic{
     margin-top: 58px;
   }
   .comtype {
   }
   .dyn-main {
     margin-top: 20px;
+    
+    padding-left: 15px;
+    padding-right: 15px;
   }
 }
 .row {
     /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
     justify-content: center;
   }
-  .case {
+  .dynamic {
   margin-top: 116px;
   margin-bottom: -116px;
   padding-bottom: 116px; 

src/views/Home.vue

 <template>
   <div class="home">
-    <nav class="navbar navbar-default navbar-fixed-top" :class="{ 'scroll': scrolled }">
+    <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" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
             <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
+            
           </button>
           <a class="navbar-brand" href="/">
             <div alt="Brand" class="logo"></div>
     <div class="contanier" style="margin-top: 110px">
       <div class="row">
         <div class="col-md-12" style="padding:0;width: 100%;">
-          <h2>多元化服务 一站式解决客户需求</h2>
+          <h2>多元化服务&nbsp;&nbsp; 一站式解决客户需求</h2>
         </div>
       </div>
 
           <router-link :to="{ name: 'details', params: { id: item.id }}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
-                <p>{{item.caseTitle}}</p>
+                <div style="width: 100%">
+                  <hr>
+                  <p>
+                    {{item.caseTitle}}
+                  </p>
+                </div>
               </div>
             </div>
           </router-link>
           <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"></div>
-                <h3 class="text-left" style>{{item.caseTitle}}</h3>
+                <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"><h3 class="text-left" style>{{item.caseTitle}}</h3></div>
+                
               </router-link>
             </div>
             <!-- item.caseCoverImg -->
         </div>
       </div>
     </div>
-    <router-link class="btn btn-default btn-lg" role="button" :to="{ name: 'dynamic' }">更多案例</router-link>
+    <router-link class="btn btn-default btn-lg" role="button" :to="{ name: 'dynamic' }">更多动态</router-link>
   </div>
 </template>
 
   data () {
     return {
       scrolled: false,
+      // rescrolled: false,
       isMobilePhone,
       show: true,
       data: '',
   mounted () {
     window.addEventListener('scroll', () => {
       this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 300
+      
     })
 
+    // window.addEventListener('scrolll', () => {
+    //   this.rescrolled = (document.documentElement.scrollTop || document.body.scrollTop) < 300
+      
+    // })
+
+    
+
 
   },
  
     request({
       ...apis.case.list,
       urlData: { type: 'case' },
-      params: { topping: 1 }
+      params: { pageSize: 100 }
     }).then(con => {
       // console.log(con,"124")
-      this.caselist = con.records;
+      this.caselist = (con.records || []).filter(x => x.topping === 1);
       // window.console.log(this.caselist, "543");
     })
 
 </script>
 
 <style scoped>
+@media (min-width: 768px) and (max-width: 992px) {
 
+  .home {
+  margin-top: 116px;
+  margin-bottom: -116px;
+  padding-bottom: 116px; 
+  
+}
+  .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 (max-width: 992px) {
   .business-text {
     display: none;
   }
   h2 {
+    font-family: Microsoft Yahei Light;
     margin-top: 20px;
     font-size: 20px;
     font-weight: bold;
     padding-bottom: 10px !important;
   }
   h4 {
+    font-family: Microsoft Yahei Light;
     font-size: 1.6rem;
     padding: 5px;
-    background-color: red;
+    background-color: #e03723;
     color: #fff;
     margin: 0;
     height: 30px;
     letter-spacing: 6px;
   }
   .st {
-    margin-bottom: 30px !important;
+    margin-bottom: 20px !important;
     padding: 0 1% !important;
   }
   .sw {
   .top-case {
     margin-top: 40px;
     padding: 0;
-
+    padding-bottom: 30px !important;
     border: none;
   }
   .aarow_box {
   }
 
   p {
-    padding: 0 0 30px 0;
+    padding: 0 0 20px 0;
     font-size: 1.2rem;
     color: #595757;
   }
   .btn {
     font-size: 1.2rem;
-    margin-top: 30px;
+    margin-top: 0px;
     width: 140px;
 
     border-radius: 0px;
     color: #000;
     background-color: #fff;
-    border: 2px solid #aaaaaa;
+    border: 1px solid #aaaaaa;
   }
   h1 {
     margin-top: 30px;
     font-size: 1.8rem;
     font-weight: bold;
     letter-spacing: 0.3rem;
+    color: #000;
   }
   .dynbtn {
     margin-top: 0px !important;
 
 @media (min-width: 992px) {
   h1 {
+    font-size: 4.8rem;
     margin: 0;
     padding-top: 85px;
+    padding-bottom: 10px;
+    color: #000;
   }
   .btn {
     font-size: 24px;
     border-radius: 0px;
     color: #000;
     background-color: #fff;
-    border: 2px solid #aaaaaa;
+    border: 1px solid #aaaaaa;
   }
   .btn:hover {
     color: #e03723;
-    border: 2px solid #e03723;
+    border: 1px solid #e03723;
   }
 
   p {
-    padding: 28px 0 50px 0;
+    padding: 18px 5px 0 5px;
     font-size: 2.4rem;
     color: #595757;
   }
   h2 {
+    font-family: Microsoft Yahei Light;
+    font-size: 4.8rem;
     margin-top: 86px;
+    color: #000;
   }
   h3 {
     font-size: 2.4rem;
     margin: 0;
   }
   h4 {
+    font-family: Microsoft Yahei Light;
     font-size: 2.4rem;
     padding: 10px;
-    background-color: red;
+    background-color: #e03723;
     color: #fff;
     margin: 0;
     height: 43px;
+    letter-spacing: 3px;
   }
   .sw {
     padding: 33px;
     margin: 0;
   }
   .st .sw p {
+    line-height: 1.6em;
     font-size: 2.2rem;
     padding-bottom: 0;
   }
 
   text-align: center;
 }
-.st4:hover .casetitle p {
+.st4 .casetitle p {
   text-align: center;
   display: block;
   color: #fff;
 }
 
 .home-dynamic {
-  bottom: 0;
+  /* 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;
+  bottom: 0;
+  width: 100%; 
+      position: absolute;
+    bottom: 0;
+  
+    width: calc(100% - 12px);
+    */
 
   height: 0;
-  padding-bottom: 48.5%;
+  padding-bottom: 60%;
   background-size: 100% 100% !important;
 }
+h3{
+      position: absolute;
+   
+    width: calc(100% - 12px);
+ bottom: 0;
+  color: #fff;
+ 
+  background: rgba(0, 0, 0, 0.8);
+}
+
 </style>
 
 
 .routelink{
   text-decoration: none;
 }
+
+
+
+.casetitle {
+  hr {
+    margin-bottom: 0px;
+    width: 50px;
+    border: 2px solid red;
+  }
+}
+
+
 @media (max-width: 992px) {
   .navbar {
     display: none;
         a {
           color: #fff;
 
+     padding-left: 5px;
+    padding-right: 5px;
+    margin: 0 10px;
           &:hover {
             border-bottom: 3px solid #fff;
           }
           a {
             color: #000;
 
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 0 10px;
+
             &:hover {
               border-bottom: 3px solid #000;
             }
         background: url("../assets/logo1.png");
       }
     }
+
+    //  &.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>
+</style>

vue.config.js

       '/api': {
         target: 'http://localhost:8080',
         ws: true,
-        changeOrigin: true
-      },
-      '/pc': {
-        target: 'http://localhost:8080',
-        ws: true,
-        changeOrigin: true
+        changeOrigin: true,
+        pathRewrite: {'^/api': ''}
       }
     }
   }