9.3

src/App.vue

@@ -48,14 +48,12 @@
     <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%" style="margin: 0 auto">
-           </el-col>
+          <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="/">01 回到首页</a>
+            <a href="/" class="btn1">01 回到首页</a>
           </el-col>
 
           <el-col :span="24" class="a">
@@ -75,7 +73,7 @@
           </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" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
           </el-col>
         </el-row>
       </div>
@@ -85,21 +83,6 @@
       <router-view />
     </div>
 
-    <!--                      
-                      
-                      <div id="nav" class="navbar navbar-default navbar-fixed-top">
-                        
-                        <router-link to="/">首页</router-link> |
-                        <router-link to="/case">案例</router-link>
-                        <router-link to="/dynamic">动态</router-link>
-                        <router-link to="/about">关于</router-link>
-                        <router-link to="/contact">联系</router-link>
-                      </div>
-                    <div>
-           
-                        </div>glyphicon glyphicon-menu-up
-    <router-view/>-->
-
     <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;">
@@ -145,7 +128,7 @@ export default {
     }
   },
   components: {
-    ClickContact,
+
   },
   methods: {
     enter1 () {
@@ -204,7 +187,11 @@ export default {
   width: 80% !important;
 }
 </style>
-
+<style scoped>
+p {
+  margin: 0 50px;
+}
+</style>
 
 <style>
 #app {
@@ -222,7 +209,18 @@ export default {
 .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: 992px) {
   .coll {
     display: block;
@@ -236,10 +234,11 @@ export default {
  border: #000;
 } */
   .page-footer {
-    margin-top: 94px;
+    height: 120px;
   }
   .footer-p {
-    padding: 54px auto !important;
+    line-height: 120px;
+    font-size: 20px;
     margin: 0;
   }
 }
@@ -261,41 +260,77 @@ export default {
 .main {
   padding-bottom: 9.4rem;
 }
+.rtl #drawer__title{
+  margin: 0;
+}
 @media (max-width: 992px) {
   .navbar-brand {
     padding: 0;
   }
   .logo {
-    width: 300px;
-    height: 50px;
+    margin-top: 16.5px;
+    margin-left: 20px;
+    width: 150px;
+    height: 25px;
+    background-size: 100% 100% !important;
     background: url("./assets/logo1.png");
   }
-  .a{
+  .logoimg {
+    margin: -20px auto 20px ;
+  }
+  .a {
     font-size: 2.4rem;
     margin-top: 2rem;
     color: #000;
-     
   }
-  .a a{
+  .a a {
     color: #000;
   }
+ 
+
+  .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: 80px;
+  }
+  .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: 992px) {
-  .navbar {
-    padding: 30px 0;
-    z-index: 50;
-    height: 116px;
-  }
-
   .navbar {
     padding: 30px 0;
     // background-color: transparent;
     border: none;
-
+    padding: 30px 0;
+    z-index: 50;
+    height: 116px;
     margin: 0;
 
     .navbar-brand {

src/components/Business.vue

@@ -129,9 +129,9 @@ export default {
       
       
     }).then(con => {
-      console.log(con,"124")
+      // console.log(con,"124")
        this.service = con;
-      window.console.log(this.service, "543");
+      // window.console.log(this.service, "543");
     })
 
    

src/components/Wheelplanting.vue

@@ -33,6 +33,9 @@ import apis from '../config/api';
 
 export default {
   name: "wheelplanting",
+  props: [
+    'direction',
+  ],
   data () {
     return {
       data: '',
@@ -59,9 +62,8 @@ export default {
     initSwiper () {
       if (!this.swiper) {
         this.swiper = new Swiper(".swiper-container", {
-          // loop: true,
           autoplay: true,
-          direction: "vertical",
+          direction: this.direction || 'horizontal',
           observer: true,
           observeSlideChildren: true,
 
@@ -84,6 +86,7 @@ export default {
   .wheelplanting .con-swiper {
     width: 100%;
     height: 100vh;
+    z-index: 60;
   }
 }
 @media (max-width: 992px){

src/components/mobnav.vue

@@ -10,97 +10,96 @@
 </template>
 
 <script>
-export default {
-   data () {
-    return {
-      cover: {},
-      casetype: [],
-      caselist: [],
-      num: 1,
+// export default {
+//    data () {
+//     return {
+//       cover: {},
+//       casetype: [],
+//       caselist: [],
+//       num: 1,
 
-      allLoaded: false,//数据全部加载
-    }
-  },
-  components: {
+//       allLoaded: false,//数据全部加载
+//     }
+//   },
+//   components: {
 
-  },
+//   },
 
-  created () {
-    // window.console.log(this.cover, "543");
-    // 封面
-    request({
-      ...apis.case.cover,
+//   created () {
 
-    }).then(data => {
-      this.cover = data[0];
-    })
+//     // 封面
+//     request({
+//       ...apis.case.cover,
 
+//     }).then(data => {
+//       this.cover = data[0];
+//     })
 
-    // axios.get('http://localhost:8080/pc/case/cover')
 
-    // 分类
-    // axios.get('http://localhost:8080/pc/caseType/list')
-    request({
-      ...apis.caseType.list,
-    })
-      .then(res => {
 
-        this.casetype = res.records;
 
-      })
-    // 内容http://localhost:8080/pc/case/{case}/list
-    request({
-      ...apis.case.list,
-      urlData: { type: 'case' },
-      params: { pageNum: this.num, pageSize: 8 }
-    }).then(con => {
-      // console.log(con,"124")
-      this.caselist = con.records;
-      // window.console.log(this.caselist, "543");
-    }).catch()
+//     // 分类
+//     request({
+//       ...apis.caseType.list,
+//     })
+//       .then(res => {
 
+//         this.casetype = res.records;
 
-  },
+//       })
 
-  computed: {
+//     request({
+//       ...apis.case.list,
+//       urlData: { type: 'case' },
+//       params: { pageNum: this.num, pageSize: 8 }
+//     }).then(con => {
+  
+//       this.caselist = con.records;
+  
+//     }).catch()
 
-  },
 
-  methods: {
-    add (a) {
+//   },
+
+//   computed: {
+
+//   },
+
+//   methods: {
+//     add (a) {
      
-      console.log(this.num, "124")
-      request({
-        ...apis.case.list,
-        urlData: { type: 'case' },
-        params: { pageNum: a, pageSize: 8 }
-      }).then(con => {
-        console.log(con, "124")
-        this.caselist = this.caselist.concat(con.records);
-        if(con.total%8) this.allLoaded=true;
+//       console.log(this.num, "124")
+//       request({
+//         ...apis.case.list,
+//         urlData: { type: 'case' },
+//         params: { pageNum: a, pageSize: 8 }
+//       }).then(con => {
+//         console.log(con, "124")
+//         this.caselist = this.caselist.concat(con.records);
+//         if(con.total%8) this.allLoaded=true;
       
-        // this.caselist = con.records;
-
-      })
-    },
-
-    classification (Type) {
-       request({
-        ...apis.case.list,
-        urlData: { type: 'case' },
-        params: { pageNum: a, pageSize: 8  }
-      }).then(con => {
-        console.log(con, "124")
-        this.caselist = this.caselist.concat(con.records);
+//         // this.caselist = con.records;
+
+//       })
+//     },
+
+//     classification (Type) {
+//        request({
+//         ...apis.case.list,
+//         urlData: { type: 'case' },
+//         params: { pageNum: a, pageSize: 8  }
+//       }).then(con => {
+//         // console.log(con, "124")
+//         this.caselist = this.caselist.concat(con.records);
         
       
-        // this.caselist = con.records;
+//         // this.caselist = con.records;
 
-      })
-    }
-  }
+//       })
+//     }
+//   }
 
 
-}
+// }
 
 </script>

src/components/wheelplanting1.vue

@@ -1,95 +0,0 @@
-<template>
-<!-- 手机 -->
-  <div class="wheelplanting1">
-    <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>
-  </div>
-</template>
-
-<script>
-import Swiper from "swiper";
-import "swiper/dist/css/swiper.min.css";
-import request from '../../utils/request';
-import apis from '../config/api';
-
-export default {
-  name: "wheelplanting1",
-  data () {
-    return {
-      data: '',
-      blogs: {},
-    };
-  },
-  components: {},
-
-  mounted () {
-
-
-    new Swiper(".swiper-container", {
-      loop: true,
-      autoplay: true,
-      // direction: "vertical",
-      observer: true,
-      observeSlideChildren: true,
-
-      pagination: {
-        el: ".swiper-pagination",
-        hideOnClick: true
-      }
-    });
-
-
-
-
-
-  },
-  created () {
-    // axios.get('http://localhost:8080/pc/carousel/list')
-    request({
-      ...apis.carousel.list,
-    }).then(data => {
-
-      this.blogs = data;
-    })
-
-
-
-  }
-};
-</script>
-
-<style scoped>
-@media (min-width: 992px) {
-  .wheelplanting .con-swiper {
-    width: 100%;
-    height: 100vh;
-  }
-}
-@media (max-width: 992px){
-  
-  .wheelplanting .con-swiper {
-    width: 100%;
-   height: 300px;
-  }
-}
-</style>

src/router.js

@@ -78,6 +78,13 @@ export default new Router({
       component: () => import(/* webpackChunkName: "mobnav" */ './components/mobnav.vue')
     },
     
-    // // 
+    // {
+    //   path: '/wheelplantings',
+    //   name: 'wheelplantings',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (about.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import(/* webpackChunkName: "wheelplantings" */ './components/wheelplantings.vue')
+    // },
   ]
 })

src/views/About.vue

@@ -5,15 +5,15 @@
     </div>
 
     <div class="contanier st">
-      <div class="row">
-        <div class="col-md-12">
+      <div class="row" style="margin-left:0;margin-right:0">
+        <div class="">
           <div class="sssss">
-            <p class="text-left" style="font-size: 2.4rem">
+            <p class="text-left">
               南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
               力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
             </p>
             <br />
-            <div class="col-md-12">
+            <div class="">
               <div class="abc">
                 <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
               </div>
@@ -22,7 +22,7 @@
         </div>
       </div>
 
-      <div class="row about-1">
+      <div class="row about-1"  style="margin-left:0;margin-right:0">
         <div class="col-xs-6 col-md-3">
           <img src="../assets/image/about/Advantage1.png" class="about-1-img" alt="..." />
           <div class="caption">
@@ -71,23 +71,23 @@
               部分服务支持先出预案
               <br />满意再付定金。
               <br />承诺比市面上同档次广告公司
-              的服务价位低20%以上！
+              <br />的服务价位低20%以上！
             </p>
           </div>
         </div>
       </div>
 
-      <div class="row">
-        <h1 style="padding-top: 32px; font-size: 4.8rem">我们的团队</h1>
+      <div class="row"  style="margin-left:0;margin-right:0">
+        <h1 class="h1">我们的团队</h1>
       </div>
 
-      <div class="row about-2">
-        <div class="col-xs-12 col-md-6">
+      <div class="row about-2" style="margin-left:0;margin-right:0">
+        <div class="col-xs-12 col-md-6" >
           <div style="float：left;">
             <img src="../assets/image/about/Photo_sfg.jpg" class="about-ph1" alt="..." />
           </div>
           <div class style="padding: 0;float：right;">
-            <div class="text-left" style="">
+            <div class="text-left" style>
               <h1 class="teamh1">孙福高</h1>
               <p class="teamp1">创始人兼艺术总监</p>
               <p class="teamp2">
@@ -117,7 +117,7 @@
           </div>
         </div>
       </div>
-      <div class="row about-3">
+      <div class="row about-3"  style="margin-left:0;margin-right:0">
         <div class="col-xs-2 col-md-2">
           <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
         </div>
@@ -144,32 +144,36 @@
 
 
 <style scoped>
-.sssss {
-  padding: 40px 20px;
-}
 
-.about-1-img {
-  width: 100%;
-}
 @media (min-width: 768px) {
-  .about-ph1 {
-  }
+ 
 }
 
 @media (max-width: 768px) {
-  .about-2 div{
-    margin-top: 40px;
+  .about {
+    padding-top: 58px;
   }
+  .about-1-img {
+    width: 60px;
+    height: 60px;
+  }
+  .sssss {
+    font-size: 1rem;
+
+    padding: 20px 20px;
+  }
+  .about-1 {
+    border-top: 2px solid #e5e5e5;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    border-bottom: 2px solid #e5e5e5;
+  }
+
   .teamh1 {
     margin-top: 0;
     /* font-size: 2rem; */
   }
-  .teamp1 {
-    /* font-size: 1.6rem; */
-  }
-  .teamp1 {
-    /* font-size: 1.6rem; */
-  }
+  
 }
 
 /* 中等屏幕（桌面显示器，大于等于 992px） */
@@ -189,7 +193,13 @@
   }
 
   .st div div .sssss {
-    padding: 0 79px;
+    padding: 40px 20px;
+
+    font-size: 2.4rem;
+  }
+  .h1 {
+    padding-top: 32px;
+    font-size: 4.8rem;
   }
 
   h2 {
@@ -208,9 +218,6 @@
     padding: 78px 0 84px 0;
     border-bottom: 2px solid #e5e5e5;
   }
-  .about-2 {
-    padding-top: 123px;
-  }
 
   .ph5 {
     width: 100%;
@@ -218,15 +225,15 @@
   }
   .teamh1 {
     margin-top: 0;
-    font-size: 3.6rem;
+    font-size: 1.9vw;
   }
   .teamp1 {
-    font-size: 2.2rem;
+    font-size: 1.1vw;
     color: #595757;
     margin-bottom: 20px;
   }
   .teamp2 {
-    font-size: 2.2rem;
+    font-size: 1.1vw;
   }
 }
 
@@ -236,29 +243,100 @@
 </style>
 
 <style lang="less" scoped>
-.about-2 {
-  padding-top: 60px;
-  div {
-    .about-ph1 {
-      float: left;
-      width: 50%;
-      height: 100%;
-      padding: 0 40px 0 40px;
+
+@media (min-width: 992) and (max-width: 1200) { 
+  
+ }
+
+@media (min-width: 992px) {
+  .about-2 {
+    padding-top: 60px;
+    div {
+      .about-ph1 {
+        float: left;
+        width: 50%;
+     
+        padding: 0 40px ;
+      }
+    }
+  }
+  .about-3 {
+    margin: 0;
+    padding-top: 100px;
+    padding-left: 40px;
+    padding-right: 40px;
+    div {
+      margin: 0;
+      padding: 0;
+      img {
+        width: 100%;
+      }
     }
   }
 }
+@media (max-width: 992px) {
+  .about-1 {
+    padding: 20px 30px;
+    div {
+      .about-1-img {
+      }
+      .caption {
+        h2 {
+          font-size: 1.2rem;
+          font-weight: bold;
+        }
+        .p1 {
+          font-size: 0.8rem;
+        }
+      }
+    }
+  }
+  .h1{
+    font-size: 2.2rem;
+    font-weight: bold;
+    margin-bottom: 24px;
+  }
+  .about-2 {
+     
+    div {margin-top: 20px;
+      div {
+        .about-ph1 {
+          margin-left: 10px;
+          margin-right: 10px;
+          float: left;
+          width: 120px;
+         
+        }
+      }
+      div {
+        div {
+          h1 {
+            font-size: 1.3rem;
+            font-weight: bold;
+            margin-bottom: 6px
+          }
+          .teamp1{
+            font-size: 1.2rem;
+            margin: 2px;
+          }
+          .teamp2{
+            font-size: 1.2rem;
+          }
+        }
+      }
+    }
+  }
+  .about-3 {
+    margin-top: 28px;
 
-.about-3 {
-  margin: 0;
-  padding-top: 100px;
-  padding-left: 40px;
-  padding-right: 40px;
-  div {
-    margin: 0;
-    padding: 0;
-    img {
-      width: 100%;
+    div {
+      margin: 0;
+      padding: 0;
+      img {
+        width: 100%;
+      }
     }
   }
 }
-</style>
+</style>
+

src/views/Case.vue

@@ -5,10 +5,10 @@
       <!-- width="100%" height="300"> -->
     </div>
 
-    <div class="border-bottom">
-      <div id="bs-example-navbar-collapse-2">
-        <button type="button" class="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="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+    <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>
       </div>
     </div>
 
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-xs-6">
-        <el-button class="btn-link" @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;">全部案例</el-button>
       </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
@@ -28,7 +28,7 @@
           <el-col :span="24">
             <button type="button" @click="addall()" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
           </el-col>
-          <el-col :span="24" :offset="6" v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)">
+          <el-col :span="24" v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)">
             <button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
           </el-col>
           <el-col :span="24">
@@ -41,12 +41,14 @@
     <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 }">
-          <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
+          <a href="/details">
+            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
+          </a>
         </div>
       </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>
     </div>
@@ -71,7 +73,7 @@ export default {
       cover: {},
       casetype: [],
       caselist: [],
-      
+
       conditions: {
         pageNum: 0,
         pageSize: 8,
@@ -113,11 +115,11 @@ export default {
   },
 
   methods: {
-    getCaseList(filters = {}) {
+    getCaseList (filters = {}) {
       const params = {
-            ...this.conditions,
-            ...filters
-          }
+        ...this.conditions,
+        ...filters
+      }
 
       return new Promise((resolve, reject) => {
         request({
@@ -157,11 +159,31 @@ export default {
 </script>
 
 <style scoped>
-.case {
-  margin-top: 116px;
-}
+
 .border-bottom {
   /* display: none; */
+  border-bottom: 1px solid #bfbfbf;
+      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;
+
+    border-radius: 0px;
+
+    background-color: rgb(252, 151, 252);
+    border: 2px solid #bfbfbf;
+  
 }
 
 .text-left {
@@ -178,16 +200,23 @@ export default {
 }
 
 @media (max-width: 992px) {
+  .case{
+    margin-top: 58px;
+  }
   .comtype {
     display: none;
+    border-bottom: 1px solid #bfbfbf;
+  }
+  .dyn-main {
+    margin-top: 20px;
   }
 }
-
-  
-
-  .marginTP {
-    margin-top: 3rem;
+.row {
+    margin: 0;
   }
+.marginTP {
+  margin-top: 3rem;
+}
 
 @media (min-width: 992px) {
   .main {
@@ -199,12 +228,17 @@ export default {
     justify-content: center;
   }
   .case {
-    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;
@@ -218,7 +252,7 @@ export default {
     color: #e03723;
     border: 1px solid #e03723;
   }
-  
+
   .dyn-main {
     padding-top: 55px;
     width: 80%;

src/views/Contact.vue

@@ -9,7 +9,7 @@
       <div class="contact-main">
         <h1 style="margin-bottom:70px">联系我们</h1>
 
-        <div class="row">
+        <div class="row" 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>
@@ -67,10 +67,9 @@
 } */
 @media (max-width: 992px) {
   .contact {
-    padding-top: 60px;
-  }
-  .st1 {
+    margin-top: 60px;
   }
+  
   .img1{
     width: 100%;
   }

src/views/Details.vue

@@ -1,75 +1,66 @@
 <template>
   <div class="details">
     <div class="head">
-      <img src="../assets/image/case/首屏banner.jpg" width="100%" height="100%" />
+      <img :src="datas.caseCoverImg" width="100%" />
     </div>
 
-    <div>
-      <div class="contanier st">
-        <div class="row">
-          <h1 style="font-size: 4.8em">1234</h1>
-        </div>
-        <div class="row">
-          <!-- <a style="font-size: 4.8em">客户：</a>
-        <img src="../assets/image/case2/客户logo.jpg" alt="">
-        <a>所属行业：</a>
-          <a>智能家居</a>-->
-          <p style="font-size: 24px; color: #3e3a39">
-            客户：
-            <img src="../assets/image/case2/客户logo.jpg" alt /> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所属行业： 智能家居
-          </p>
-        </div>
-        <div class="row">
-          <div class="border-top"><img src="" width="100%" height= /></div>
-        </div>
-        <div class="row">
-          <div class="col-xs-6 col-md-6">
-            <div class="pull-left">
-              <a class="btn-default" href="#" role="button">
-                <img src="../assets/image/case2/赞.png" alt />
-              </a>赞 | 234
-            </div>
+    <div class="contanier st">
+      <h1 style>{{datas.caseTitle}}</h1>
+
+      <p style>
+        客户：
+        <img :src="datas.caseLogoImg" alt />
+        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所属行业：{{datas.caseIndustry}}
+      </p>
+
+      <div class="border-top" v-html="datas.content"></div>
+
+      <div class="row" style="margin:0">
+        <div class="col-xs-6 col-md-6" style="padding 0;">
+          <div class="pull-left">
+            <span role="button" class="iconfont icon-zan"></span>
+            <span>赞 | 234</span>
           </div>
-          <div class="col-xs-6 col-md-6">
-            <div class="pull-right">
-              分享：
-              <a class="btn-default" href="#" role="button">
-                <img src="../assets/image/case2/微信icon.png" alt />
-              </a>
-              <a class="btn-default" href="#" role="button">
-                <img src="../assets/image/case2/微博icon.png" alt />
-              </a>
-            </div>
+        </div>
+        <div class="col-xs-6 col-md-6" style="padding 0;">
+          <div class="pull-right">
+            分享：
+            <a class="btn-default" href="#" role="button">
+              <img src="../assets/image/case2/微信icon.png" alt />
+            </a>
+            <a class="btn-default" href="#" role="button">
+              <img src="../assets/image/case2/微博icon.png" alt />
+            </a>
           </div>
         </div>
       </div>
-
-      <div class="contanier center-block" style="width: 80%;border-bottom: 1px solid #aaa;">
-        <div class="row case-2">
-          <div class="col-xs-4 col-md-4 case-3">
-            <button type="button" class="btn-link pull-left case-3 button-hover" style="font-size: 24px;color:black;border:none;">上一个案例</button>
-          </div>
-          <div class="col-xs-4 col-md-4 case-3">
-            <button type="button" class="btn btn-default button-hover">返回</button>
-          </div>
-          <div class="col-xs-4 col-md-4 case-3">
-            <button type="button" class="btn-link pull-right case-3 button-hover" style="font-size: 24px;color:black;border:none;">下一个案例</button>
-          </div>
+    </div>
+    <div class="contanier center-block next-prev" style>
+      <div class="row case-2">
+        <div class="col-xs-4 col-md-4 case-3">
+          <button type="button" class="btn1 btn-link pull-left case-3 button-hover prev-page">上一个案例</button>
+        </div>
+        <div class="col-xs-4 col-md-4 case-3">
+          <button type="button" class="btn btn-default button-hover">返回</button>
+        </div>
+        <div class="col-xs-4 col-md-4 case-3">
+          <button type="button" class="btn1 btn-link pull-right case-3 button-hover next-page">下一个案例</button>
         </div>
       </div>
     </div>
 
     <div class="center-block" style="width: 80%">
-      <div class="row">
-        <h2 style="margin-top:64px;margin-bottom:30px">更多好案例</h2>
-      </div>
-      <div class="row">
-        <div v-for="item in 4" :key="item">
-          <div class="col-xs-6 col-md-3" style="padding:0">
-            <a href="#" class="st4">
-              <img src="../assets/image/home/Case2.jpg" style="margin: 0;width: 100%;" />
-            </a>
-          </div>
+      <h2>更多好案例</h2>
+
+      <div class="row home-case" style="padding:0;width: 100%;">
+        <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in 4" :key="index">
+          <a href="/details">
+            <div class="st4" style="{background: `url(${../assets/image/home/Case2.jpg})`}">
+              <div class="casetitle">
+                <p>{{item.caseTitle}}</p>
+              </div>
+            </div>
+          </a>
         </div>
       </div>
     </div>
@@ -87,18 +78,200 @@ export default {
 
 <script scoped>
 // @ is an alias to /src
-
+import request from '../../utils/request'
+import apis from '../config/api';
 
 export default {
   name: 'details',
+
+  data () {
+    return {
+      datas: {},
+      morecase: [],
+    }
+  },
   components: {
 
-  }
+  },
+  created () {
+    this.getDetail()
+  },
+  methods: {
+    getDetail () {
+      const id = this.$route.query.id;
+      const type = this.$route.query.type;
+      const taCaseTypeId = this.$route.query.taCaseTypeId;
+      request({
+        ...apis.case.list,
+        urlData: { type: type },
+        params: { pageNum: 1, pageSize: 1, id: id },
+        query: {}
+      }).then(con => {
+        console.log(con, "124")
+        this.datas = con.records[0];
+        // window.console.log(this.caselist, "543");
+      })
+
+      request({
+        ...apis.case.list,
+        urlData: { type: type },
+        params: { pageNum: 1, pageSize: 4, }
+      }).then(con => {
+        console.log(con, "456")
+        console.log(taCaseTypeId, "456")
+        // this.morecase = con.records[0];
+        // window.console.log(this.caselist, "543");
+      })
+    }
+
+  },
+
 }
 </script>
 
+<style lang="less" scoped>
+@media (min-width: 992px) {
+  .pull-left {
+    font-size: 3.6rem;
+    .iconfont {
+      font-size: 3.6rem;
+    }
+  }
+  .pull-right {
+    font-size: 3.6rem;
+  }
+  .head {
+    img {
+      width: 100%;
+      height: 600px;
+    }
+  }
+  .st {
+    h1 {
+      font-size: 4.8rem;
+    }
+    p {
+      font-size: 2.4rem;
+      color: #3e3a39;
+    }
+    .border-top {
+      padding-top: 50px;
+
+      border-top: 1px solid #aaa;
+    }
+  }
+  .button-hover:hover {
+    color: #e03723;
+    border: 1px solid #e03723;
+  }
+  .btn1 {
+    font-size: 2.4rem !important;
+    color: black !important;
+    border: none !important;
+  }
+  .btn1:hover {
+    color: red !important;
+    text-decoration: none;
+  }
+  .btn {
+    width: 195px;
+    height: 49px;
+    font-size: 2.4rem;
+    background-color: #fff;
+    border: 1px solid #aaaaaa;
+    border-radius: 0px;
+  }
+  .next-prev {
+    width: 80%;
+    border-bottom: 1px solid #aaa;
+    .case2 {
+      .case3 {
+      }
+    }
+  }
+  h2 {
+    margin-top: 64px;
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-width: 992px) {
+  .btn1 {
+    font-size: 1.2rem !important;
+    color: black !important;
+    border: none !important;
+  }
+  .btn1:hover {
+    color: red !important;
+    text-decoration: none;
+  }
+  .btn {
+    width: 100px;
+    padding: 3px;
+    font-size: 1.2rem;
+    background-color: #fff;
+    border: 1px solid #aaaaaa;
+    border-radius: 0px;
+  }
+  .pull-left {
+    .iconfont {
+      font-size: 2.4rem;
+    }
+  }
+  .pull-right {
+  }
+  .st {
+    h1 {
+      font-size: 2rem;
+      img {
+        width: 192px;
+        height: 95px;
+      }
+    }
+    p {
+      font-size: 1.4rem;
+      img {
+        width: 35%;
+      }
+    }
+    .border-top {
+      padding-top: 20px;
+
+      border-top: 1px solid #aaa;
+    }
+  }
+
+  .next-prev {
+    width: 100%;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #aaa;
+    .case2 {
+      margin: 0;
+      .case3 {
+      }
+    }
+  }
+  h2{
+    font-size: 2rem;
+  }
+}
+</style>
+
 <style scoped>
 @media (min-width: 992px) {
+  .details {
+    margin-top: 116px;
+  }
+
+  .coverimg {
+    width: 100%;
+
+    padding-bottom: 35%;
+    background-size: 100% 100% !important;
+    position: relative;
+
+    margin: 0;
+  }
   .case {
     padding-top: 116px;
   }
@@ -112,11 +285,6 @@ export default {
     border-radius: 0;
     border: 2px solid #bcbcbc;
   }
-  .border-top {
-    padding-top: 50px;
-
-    border-top: 1px solid #aaa;
-  }
 
   .case-2 {
     margin: 70px 0;
@@ -126,16 +294,56 @@ export default {
     margin: 0;
     padding: 0;
   }
-  .btn {
-    width: 195px;
-    height: 49px;
+  /* .btn {
     font-size: 24px;
+    margin-top: 88px;
+    padding: 12px 150px;
+    border-radius: 0px;
+    color: #000;
     background-color: #fff;
     border: 1px solid #aaaaaa;
   }
-  .button-hover:hover {
+  .btn:hover {
     color: #e03723;
     border: 1px solid #e03723;
+  } */
+
+  .home-case {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  .st4 {
+    width: 100%;
+
+    padding-bottom: 100%;
+    background-size: 100% 100% !important;
+    position: relative;
+
+    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:hover .casetitle p {
+    text-align: center;
+    display: block;
+    color: #fff;
+    width: 100%;
   }
 }
 </style>

src/views/Dynamic.vue

@@ -6,33 +6,33 @@
       <!-- width="100%" height="300"> -->
     </div>
 
-    <div class="border-bottom">
+    <div class="border-bottom comtype">
       <div>
-        <button type="button" class="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="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <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>
       </div>
     </div>
 
-    <div>
-      <div class="row">
+    <div class="row mobtype border-bottom">
+   
         <div class="col-xs-6">
-          <div>选择想看的案例类型：</div>
+          <div> <p style="line-height:40px">选择想看的动态类型：</p></div>
         </div>
         <div class="col-xs-6">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">全部动态</button>
+          <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
         </div>
-      </div>
+  
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
       <div>
         <el-row>
-          <el-col :span="24" :offset="6">
-            <button type="button" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
+          <el-col :span="24">
+            <button type="button" class="btn-link" style="color:black;font-size: 24px;">全部动态</button>
           </el-col>
-          <el-col :span="24" :offset="6" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
+          <el-col :span="24" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
             <button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
           </el-col>
-          <el-col :span="24" :offset="6">
+          <el-col :span="24">
             <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;position:fixed;bottom:100px;">返回</button>
           </el-col>
         </el-row>
@@ -47,7 +47,7 @@
       </div>
     </div>
 
-    <div>
+    <div style="margin-top:40px" >
       <button type="button" class="btn btn-default" @click="more" v-if="!allLoaded">加载更多</button>
       <p v-else>已经到底了~更多案例尽请期待~</p>
     </div>
@@ -69,7 +69,7 @@ export default {
       cover: {},
       casetype: [],
       caselist: [],
-      
+
       conditions: {
         pageNum: 0,
         pageSize: 8,
@@ -98,14 +98,14 @@ export default {
     // 分类
     // axios.get('http://localhost:8080/pc/dynamicType/list')
     request({
-      ...apis.dynamicType.list,
+      ...apis.caseType.list,
     })
       .then(res => {
-        
+
         this.casetype = (res.records || []).filter(x => x.type === 'movement');
 
       })
-    
+
     this.getCaseList()
   },
 
@@ -114,11 +114,11 @@ export default {
   },
 
   methods: {
-    getCaseList(filters = {}) {
+    getCaseList (filters = {}) {
       const params = {
-            ...this.conditions,
-            ...filters
-          }
+        ...this.conditions,
+        ...filters
+      }
 
       return new Promise((resolve, reject) => {
         request({
@@ -159,37 +159,51 @@ export default {
 
 <style scoped>
 
-
-
-.dynamic {
-  margin-top: 116px;
-}
 .border-bottom {
   /* display: none; */
+  border-bottom: 1px solid #bfbfbf;
+      margin-top: 10px !important;
 }
-
-.marginTP {
-  margin-top: 3rem;
-}
-
+ .btn1 {
+    font-size: 24px !important;
+    color: black !important;
+    border: none !important;
+  }
+  .btn1:hover {
+    color: red !important;
+    text-decoration: none;
+  }
 .text-left {
   color: #000;
 }
+
 .case-ph {
-    bottom: 0;
-    width: 100%;
+  bottom: 0;
+  width: 100%;
 
-    height: 0;
-    padding-bottom: 65%;
-    background-size: 100% 100% !important;
-  }
+  height: 0;
+  padding-bottom: 65%;
+  background-size: 100% 100% !important;
+}
 
-  @media (max-width: 992px) {
-    .comtype{
-      display: none;
-    }
-    
+@media (max-width: 992px) {
+  .dynamic{
+    margin-top: 58px;
   }
+  .comtype {
+    display: none;
+    border-bottom: 1px solid #bfbfbf;
+  }
+  .dyn-main {
+    margin-top: 20px;
+  }
+}
+.row {
+    margin: 0;
+  }
+.marginTP {
+  margin-top: 3rem;
+}
 
 @media (min-width: 992px) {
   .main {
@@ -201,12 +215,17 @@ export default {
     justify-content: center;
   }
   .dynamic {
-    background-color: #fafafa;
-  }
-.mobtype{
-  display: none;
+  margin-top: 116px;
+  margin-bottom: -116px;
+  padding-bottom: 116px; 
+  background-color: #fafafa;
 }
   
+  .mobtype {
+    display: none;
+  }
+
+  
   .btn {
     font-size: 24px;
     margin-top: 88px;
@@ -220,15 +239,6 @@ export default {
     color: #e03723;
     border: 1px solid #e03723;
   }
-  .ph {
-    padding: 12px 34px 0 34px;
-  }
-
-  .ph:hover .ph-houver {
-    transform: translate3d(0, -20px, 0);
-    /* margin-top: -20px; */
-    box-shadow: 0 20px 5px #888888;
-  }
 
   .dyn-main {
     padding-top: 55px;
@@ -242,4 +252,17 @@ export default {
     padding: 10px;
   }
 }
+
+
+.mobbtn{
+color: #e03723;
+   
+  padding:12px 40px;
+
+    border-radius: 0px;
+
+    background-color: rgb(252, 151, 252);
+    border: 2px solid #bfbfbf;
+  
+}
 </style>

src/views/Home.vue

@@ -36,29 +36,16 @@
       </div>
     </nav>
 
-    
-      <div class="aarow_box animated aarowMove">
-        <div class="aarow" @click="arrow()"></div>
-      </div>
-   
-
-    <div class="contanier next-page">
-      <div class="row">
-        <div class="col-md-12 home-wheel">
-          <Wheelplanting></Wheelplanting>
-        </div>
-      </div>
-      <!-- <div class="contanier next-page1">
-      <div class="row">
-        <div class="col-md-12 home-wheel">
-          <Wheelplanting1></Wheelplanting1>
-        </div>
-      </div> -->
-
-
+    <div class="aarow_box animated aarowMove">
+      <div class="aarow" @click="arrow()"></div>
+    </div>
 
-      <div id="pos" style="margin:116px"></div>
+    <div class="home-wheel">
+      <Wheelplanting :direction="isMobilePhone ? '' : 'vertical'" style="z-index：60"></Wheelplanting>
+    </div>
 
+    <div id="pos" style="margin-top:-110px"></div>
+    <div class="contanier" style="margin-top: 110px">
       <div class="row">
         <div class="col-md-12" style="padding:0;width: 100%;">
           <h2>多元化服务 一站式解决客户需求</h2>
@@ -67,8 +54,9 @@
 
       <div class="row">
         <div class="col-md-12" style="padding:0;width: 100%;">
-          <p>
-            核心团队拥有八年以上营销策划及创业设计经验，团队能力多元化，服务体系立体化。
+          <p class="p1">
+            核心团队拥有八年以上营销策划及创业设计经验，
+            <br v-if="isMobilePhone" />团队能力多元化，服务体系立体化。
             <br />我们懂得多，您就更省心!
           </p>
         </div>
@@ -106,7 +94,6 @@
             <h4>创意设计</h4>
             <p class="text-left business-text">
               平面设计
-              <br />平面设计
               <small>(海报/展架/画册/包装...)</small>
               <br />数字媒体
               <small>(H5/短视频/小程序...)</small>
@@ -136,13 +123,13 @@
     <div class="contanier home-case top-case">
       <div class="row home-case" style="padding:0;width: 100%;">
         <div class="col-xs-6 col-md-3 home-case" v-for="(item,index) in caselist" :key="index">
-          <a href="/details">
+          <router-link :to="{ name: 'details', query: { id: item.id , type: item.type , taCaseTypeId: item.taCaseTypeId}}">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
               <div class="casetitle">
                 <p>{{item.caseTitle}}</p>
               </div>
             </div>
-          </a>
+          </router-link>
         </div>
       </div>
     </div>
@@ -156,7 +143,7 @@
         <div class="col-md-12" style="padding:0;width: 100%;">
           <h1>以品质答谢信任</h1>
         </div>
-        <div class="col-md-12" style="padding:0;width: 100%;">
+        <div class="col-md-12" style="padding:0;width: 100%; color:#595757">
           <p>
             至始至终将服务放到首位！
             <br class="br-logotop" />用更好的创意，助力客户创造品牌价值
@@ -184,7 +171,7 @@
         </div>
       </div>
     </div>
-    <a class="btn btn-default btn-lg" href="/dynamic" role="button">更多动态</a>
+    <a class="btn btn-default btn-lg dynbtn" href="/dynamic" role="button">更多动态</a>
   </div>
 </template>
 
@@ -194,18 +181,21 @@
 
 // const times = x => '*'.repeat(x - 1).split('*')
 
-import { scrollIntoView } from 'scroll-js' 
-
+import { scrollIntoView } from 'scroll-js'
 import Wheelplanting from "@/components/Wheelplanting.vue";
 // import Business from "@/components/Business.vue";
-// import Wheelplanting1 from "@/components/Wheelplanting1.vue";
+
 import request from '../../utils/request'
 import apis from '../config/api';
+import { isMobilePhone } from '../../utils'
+
+
 export default {
   name: "home",
   data () {
     return {
       scrolled: false,
+      isMobilePhone,
       show: true,
       data: '',
       blogs: {},
@@ -216,17 +206,11 @@ export default {
     };
   },
   computed: {
-    // rows () {
-    //   if (this.blogs && this.blogs.length) {
-    //     return times[Math.ceil(this.blogs.length / this.deskCols)]
-    //   } else {
-    //     return []
-    //   }
-    // }
+
   },
   components: {
     Wheelplanting,
-    // Wheelplanting1,
+    // Wheelplantings,
     // Business,
   },
   mounted () {
@@ -234,14 +218,17 @@ export default {
       this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 300
     })
 
-    
+
   },
-  methods:{
-      arrow(){
-        // document.getElementsByClassName('home')[0].scrollTop=100;
-        // document.querySelector('#pos').scrollTo()
-        scrollIntoView(document.querySelector('#pos'), document.body, { behavior: 'smooth' })
-      }
+  watch () {
+
+  },
+  methods: {
+    arrow () {
+
+      scrollIntoView(document.querySelector('#pos'), document.body, { behavior: 'smooth' })
+    },
+
   },
 
   created () {
@@ -287,12 +274,16 @@ export default {
 </script>
 
 <style scoped>
-.home {
-}
 @media (max-width: 992px) {
   .business-text {
     display: none;
   }
+  h2 {
+    margin-top: 20px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing:1px;
+  }
   h3 {
     font-size: 2.4rem;
     padding: 0px;
@@ -303,8 +294,21 @@ export default {
     color: #fff;
     margin: 0;
   }
+  .p1 {
+    padding-bottom: 10px !important;
+  }
+  h4 {
+    font-size: 1.6rem;
+    padding: 5px;
+    background-color: red;
+    color: #fff;
+    margin: 0;
+    height: 30px;
+    letter-spacing: 6px;
+  }
   .st {
-    padding: 0 !important;
+    margin-bottom: 30px !important;
+    padding: 0 1% !important;
   }
   .sw {
     padding: 2% !important;
@@ -339,14 +343,60 @@ export default {
     border: none;
   }
 
-  .home-wheel {
-    width: 100%;
-    height: 300px;
-    padding: 0;
-    z-index: 60;
+  p {
+    padding: 0 0 30px 0;
+    font-size: 1.2rem;
+    color: #595757;
+  }
+  .btn {
+    font-size: 1.2rem;
+    margin-top: 30px;
+    width: 140px;
+
+    border-radius: 0px;
+    color: #000;
+    background-color: #fff;
+    border: 2px solid #aaaaaa;
+  }
+  h1 {
+    margin-top: 30px;
+
+    font-size: 1.8rem;
+    font-weight: bold;
+    letter-spacing: 0.3rem;
+  }
+  .dynbtn {
+    margin-top: 0px !important;
   }
 }
+
 @media (min-width: 992px) {
+  h1 {
+    margin: 0;
+    padding-top: 85px;
+  }
+  .btn {
+    font-size: 24px;
+    margin-top: 41px;
+    padding: 12px 50px;
+    border-radius: 0px;
+    color: #000;
+    background-color: #fff;
+    border: 2px solid #aaaaaa;
+  }
+  .btn:hover {
+    color: #e03723;
+    border: 1px solid #e03723;
+  }
+
+  p {
+    padding: 28px 0 50px 0;
+    font-size: 2.4rem;
+    color: #595757;
+  }
+  h2 {
+    margin-top: 86px;
+  }
   h3 {
     font-size: 2.4rem;
     padding: 30px;
@@ -356,6 +406,14 @@ export default {
     color: #fff;
     margin: 0;
   }
+  h4 {
+    font-size: 2.4rem;
+    padding: 10px;
+    background-color: red;
+    color: #fff;
+    margin: 0;
+    height: 43px;
+  }
   .sw {
     padding: 33px;
   }
@@ -384,9 +442,9 @@ export default {
     border: none;
   }
 
- .top-news{
-   margin-top: 110px;
- }
+  .top-news {
+    margin-top: 110px;
+  }
 
   .aarow_box {
     width: 26px;
@@ -436,12 +494,6 @@ export default {
   margin: 0;
 }
 
-.home-wheel {
-  width: 100%;
-
-  padding: 0;
-  z-index: 60;
-}
 /* .home-business {
   widows: 1300px;
   height: 600px;
@@ -456,38 +508,6 @@ export default {
   justify-content: center;
 }
 
-.btn {
-  font-size: 24px;
-  margin-top: 41px;
-  padding: 12px 50px;
-  border-radius: 0px;
-  color: #000;
-  background-color: #fff;
-  border: 1px solid #aaaaaa;
-}
-.btn:hover {
-  color: #e03723;
-  border: 1px solid #e03723;
-}
-
-h1 {
-  margin: 0;
-  padding-top: 85px;
-}
-p {
-  padding: 28px 0 50px 0;
-  font-size: 2.4rem;
-  color: #595757;
-}
-
-h4 {
-  font-size: 2.4rem;
-  padding: 10px;
-  background-color: red;
-  color: #fff;
-  margin: 0;
-  height: 43px;
-}
 .st4 {
   width: 100%;
 

utils/index.js

@@ -0,0 +1,2 @@
+
+export const isMobilePhone = document.body.clientWidth < 768