zls

babel.config.js

@@ -1,5 +1,13 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/app',
+  ],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
   ]
+  
 }

package-lock.json

@@ -791,7 +791,6 @@
       "version": "7.5.5",
       "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.5.5.tgz?cache=0&sync_timestamp=1563398515522&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.5.5.tgz",
       "integrity": "sha1-dPulbTXvvspEQJHHhQzNSU/S8TI=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -1018,11 +1017,15 @@
       "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
       "dev": true
     },
+    "@vant/icons": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.1.15.tgz",
+      "integrity": "sha512-96tbJotfofrKpOrUGWKkiGLJsCFc0OX5pikWLW5yarD+EMhi0zCrQSDb95xGrp/HETAFm+nSTQu2e1zGsWN/7A=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
-      "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=",
-      "dev": true
+      "integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA="
     },
     "@vue/babel-plugin-transform-vue-jsx": {
       "version": "1.0.0",
@@ -2635,6 +2638,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.12.2.tgz",
+      "integrity": "sha512-Vz9s+I6vAnsY8sYczU/cdtkKAHSorapa/2St6K+OzowplKizpWxul4HLi3kj1eRmHMFjhbROSMGXP+mFna2nUw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "babel-plugin-module-resolver": {
       "version": "3.2.0",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-module-resolver/download/babel-plugin-module-resolver-3.2.0.tgz",
@@ -9334,8 +9347,7 @@
     "regenerator-runtime": {
       "version": "0.13.3",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.3.tgz",
-      "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U=",
-      "dev": true
+      "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U="
     },
     "regenerator-transform": {
       "version": "0.14.1",
@@ -11188,6 +11200,17 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.2.11.tgz",
+      "integrity": "sha512-oRxU+Z6zhxbxv8vhKZi7vqEmOYDxGaC9pKda/+45tfeboJGmu5kNyPxEg/KQ0sg8FpV4YIv4k5H1ZP9bSyaUsw==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "1.1.15",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -11264,6 +11287,11 @@
       "integrity": "sha1-J1b0bLMlgFTF9HI96K5+hzAqHM8=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "15.7.1",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.1.tgz?cache=0&sync_timestamp=1563435501637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.7.1.tgz",
@@ -11296,6 +11324,11 @@
         }
       }
     },
+    "vue-pickers": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-pickers/-/vue-pickers-2.1.0.tgz",
+      "integrity": "sha512-04RwFebfPrT61bgXT4m3Pz/vS0aWzfX7nWei6qsWM5kyjloJs5+zTmhg7/Pp1vqj1O63lcM5dCd2jk15lwni/w=="
+    },
     "vue-router": {
       "version": "3.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.2.tgz",

package.json

@@ -14,7 +14,9 @@
     "moment": "^2.24.0",
     "scroll-js": "^3.0.0",
     "swiper": "^4.5.0",
+    "vant": "^2.2.11",
     "vue": "^2.6.10",
+    "vue-pickers": "^2.1.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
@@ -23,6 +25,7 @@
     "@vue/cli-plugin-eslint": "^3.10.0",
     "@vue/cli-service": "^3.10.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.12.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "less": "^3.10.3",

public/index.html

@@ -6,9 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
-    <link rel="icon" href="<%= BASE_URL %>favicon.jpg">
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
     <link rel="stylesheet" href="/share/css/share.min.css">
+ 
 
     <script>
       if (navigator.userAgent.toLocaleLowerCase().match(/msie|trident/)) {
@@ -21,9 +22,11 @@
     <script src="/bootstrap/js/bootstrap.min.js"></script>
     <script src="/swiper/dist/js/swiper.min.js"></script>
     <script src="/share/js/social-share.min.js"></script>
+    <!-- <script src="/until/animate.js"></script> -->
     <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/swiper/dist/css/swiper.min.css">
     <link rel="stylesheet" href="/iconfont.css">
+    <link rel="stylesheet" href="/until/style.css">
     <title>福予传媒-品牌策划｜创意设计｜制作与传播</title>
   </head>
   <body>

public/until/animate.js

@@ -0,0 +1,43 @@
+
+
+// <template>
+//   <div>
+//     <VuePicker :data="pickData"
+//       @cancel="cancel"
+//       @confirm="confirm"
+//       :showToolbar="false"
+//       :maskClick="true"
+//       :visible.sync="pickerVisible"
+//     />
+//   </div>
+// </template>
+
+// <script>
+//   import VuePicker from 'vue-pickers'
+//   var tdata = []
+//   for (let i = 0; i < 20; i++) {
+//     tdata.push({
+//       label: '第' + i + '行',
+//       value: i
+//     })
+//   }
+
+//   export default {
+//     components: { VuePicker },
+//     data () {
+//       return {
+//         pickerVisible: false,
+//         pickData: [ tdata ],
+//         result: ''
+//       }
+//     },
+//     methods: {
+//       cancel () {
+//         console.log('cancel')
+//       },
+//       confirm (res) {
+//         console.log(res)
+//       }
+//     },
+//   }
+// </script>

public/until/style.css

@@ -0,0 +1,66 @@
+/* * {
+    margin: 0;
+    padding: 0;
+} */
+.scroller-component {
+    display: block;
+    position: relative;
+    height: 238px;
+    overflow: hidden;
+    width: 100%;
+}
+
+.scroller-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.scroller-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    margin: 0 auto;
+    width: 100%;
+    z-index: 3;
+    transform: translateZ(0px);
+    background-image:
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
+        linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+    background-position: top, bottom;
+    background-size: 100% 102px;
+    background-repeat: no-repeat;
+}
+
+.scroller-item {
+    text-align: center;
+    font-size: 16px;
+    height: 34px;
+    line-height: 34px;
+    color: #000;
+}
+
+.scroller-indicator {
+    width: 100%;
+    height: 34px;
+    position: absolute;
+    left: 0;
+    top: 102px;
+    z-index: 3;
+    background-image:
+        linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
+        linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
+    background-position: top, bottom;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+}
+
+.scroller-item {
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

src/App.vue

@@ -9,8 +9,8 @@
           <div v-if="!current1" class="btn btn-default back-top1" role="button" @mouseenter="enter1()">
             <img src="./assets/image/联系我们.jpg" class="back-top1" />
           </div>
-          <div v-if="current1" class="btn btn-default back-top1" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()">
-            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" class="back-top1" />
+          <div v-if="current1" class="btn btn-default back-top1 back-top1s" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()">
+            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" class="back-top1 back-top1s" />
           </div>
         </div>
       </div>
@@ -22,7 +22,7 @@
         </div>
         <div>
           <a class="back-top2" href="#" v-if="current2" role="button" @mouseenter.stop="enter2()" @mouseleave="leave2()">
-            <img src="./assets/image/返回顶层触发.jpg" class="back-top2" />
+            <img src="./assets/image/返回顶层触发.jpg" class="back-top2 back-top2s" />
           </a>
         </div>
       </div>
@@ -111,6 +111,7 @@ export default {
 <style>
 .messageBox-Contace {
   width: 80% !important;
+  height: 80vh !important;
 }
 
 .btn:hover {
@@ -136,10 +137,10 @@ export default {
   border: 1px solid #e03723;
 }
 @media (max-width: 992px) {
-  .top{
-  width:100%;
-   height:47.8px
-}
+  .top {
+    width: 100%;
+    height: 47.8px;
+  }
 }
 </style>
 
@@ -168,8 +169,6 @@ p {
     sans-serif;
 }
 
-
-
 .coll {
   display: none;
 }
@@ -178,11 +177,31 @@ p {
   /* padding: 0; */
   border: none;
 }
-a:focus, a:hover {
-    /* color: #23527c; */
-    text-decoration: none;
+a:focus,
+a:hover {
+  /* color: #23527c; */
+  text-decoration: none;
 }
 @media (min-width: 992px) {
+   .el-message-box__headerbtn {
+
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    padding: 0;
+    border: none;
+    outline: 0;
+    background: 0 0;
+    font-size: 38px !important;
+    cursor: pointer;
+color: #aaa !important;
+}
+
+.el-message-box__headerbtn:hover .el-message-box__close {
+color: #e03723 !important;
+
+}
+
   .coll {
     display: block;
   }
@@ -198,6 +217,7 @@ a:focus, a:hover {
     margin: 0;
     padding: 0;
   }
+  
   .back-top2 {
     position: fixed;
     right: 0;
@@ -211,7 +231,7 @@ a:focus, a:hover {
   }
   .footer-p {
     line-height: 6.3vw;
-    font-size: 20px;
+    font-size: 2rem;
     margin: 0;
   }
   .main {
@@ -230,17 +250,15 @@ a:focus, a:hover {
 
 <style lang="less" scoped>
 @media (max-width: 992px) {
-  .top{
-  width:100%;
-   height:47.8px
-}
- 
- 
+  .top {
+    width: 100%;
+    height: 47.8px;
+  }
+
   // .main {
   //   // padding-bottom: 3rem;
   // }
 
-
   .page-footer {
     height: 9.8vw;
   }
@@ -251,21 +269,19 @@ a:focus, a:hover {
   }
 }
 @media (min-width: 768px) {
-
-   
- 
-  
 }
-@media (min-width: 992px) and (max-width: 1200px) {
+@media (min-width: 992px) and (max-width: 1550px) {
   .back-top1 {
     position: fixed;
     right: 0;
-    bottom: 156px !important;
+    bottom: 150px !important;
     margin: 0;
     padding: 0;
     z-index: 3;
+    width: 50px;
   }
   .back-top2 {
+    width: 50px;
     position: fixed;
     right: 0;
     bottom: 100px !important;
@@ -273,5 +289,11 @@ a:focus, a:hover {
     padding: 0;
     z-index: 3;
   }
+  .footer-p {
+    font-size: 1.5rem;
+  }
+  .back-top2s, .back-top1s {
+    width: 163.6px !important;
+  }
 }
 </style>

src/components/Business.vue

@@ -201,7 +201,7 @@ export default {
 
   p {
     line-height: 1.6em;
-    font-size: 2.2rem;
+    
     padding-bottom: 0;
     margin: 0px;
     padding: 0px 5px 0 5px;

src/components/ClickContact.vue

@@ -7,7 +7,7 @@
         <div class="row">
           <div class="col-md-6 col-xs-6 st1" style="border-right: 1px solid #aaa;">
             <div class="pull-right1">
-              <img class="img1" src="../assets/image/contact/weixin.jpg" style="weight:100%" />
+              <img class="img1" src="../assets/image/contact/weixin.jpg" style="width:200px" />
               <div class="caption">
                 <h2>微信咨询</h2>
               </div>
@@ -16,7 +16,7 @@
 
           <div class="col-md-6 col-xs-6 st2">
              <div class="pull-left1">
-              <img class="img1" src="../assets/image/contact/QQ.jpg" style="weight:100%" />
+              <img class="img1" src="../assets/image/contact/QQ.jpg" style="width:200px" />
               <div class="caption">
                 <h2>QQ咨询</h2>
               </div>
@@ -26,7 +26,7 @@
 
         <div>
          
-            <img src="../assets/image/contact/photo.jpg" alt style="width:100%" />
+            <img src="../assets/image/contact/photo.jpg" alt class="contantimg" style="width:60%; " />
          
         </div>
       </div>
@@ -56,33 +56,39 @@
     border-radius: 0;
   }
   h1{
-    font-size: 3.6rem;
+    font-size: 2.4rem;
     margin-bottom: 40px;
   }
 
   .contact-1 .contact-main {
     width: 707px;
+    height: 600px;
     margin: 0 auto;
   }
   .st1 {
-    padding-right: 120px;
+    padding-right: 40px;
   }
   .st2 {
-    padding-left: 120px;
+    padding-left: 40px;
   }
 
   .contact-2 {
     padding: 98px 98px 27px 98px;
   }
+ 
 }
 h2 {
   margin-bottom: -22px;
 }
+.contantimg{
+  margin-top: 70px
+}
 @media (min-width: 992px) and (max-width: 1551px) {
   .contact-1 {
     width: 80%;
     padding: 30px 16px 63px;
     margin-top: -85px;
+     margin-bottom: -85px;
   }
   .border-bottom {
     font-size: 20px;
@@ -91,6 +97,8 @@ h2 {
   }
   h1{
     font-size: 2.52rem;
+    margin-bottom: 60px;
+    margin-top: 60px
   }
   h2{
     font-size: 2.1rem

src/components/Navbars.vue

@@ -38,13 +38,13 @@
     </div>
 
     <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
-      <div>
+      <div  style="text-align: center;">
         <el-row style="text-align: center;">
           <el-col :span="24">
-            <img src="../assets/image/mobile/Sidemenulogo.png" width="46%" class="logoimg" />
+            <img src="../assets/image/mobile/Sidemenulogo.png" class="logoimg" />
           </el-col>
           <el-col class="line"></el-col>
-          <div>
+          <div class="btnheight">
             <el-col :span="24" class="a">
               <a href="/" class="btn1" :class="{moblinkactive:'/'==routepath}">01 回到首页</a>
             </el-col>
@@ -64,12 +64,11 @@
             <el-col :span="24" class="a">
               <a href="/contact" class="btn1" :class="{moblinkactive:'/contact'==routepath}">05 联系我们</a>
             </el-col>
-
-            <el-col :span="24" class="a">
-              <button type="button" class="btn rebtn" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
-            </el-col>
           </div>
         </el-row>
+        <el-col :span="24" class="a">
+          <button type="button" class="btn rebtn" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
+        </el-col>
       </div>
     </el-drawer>
   </div>
@@ -92,7 +91,7 @@ export default {
   },
   mounted () {
     this.routepath = this.$route.path;
-    console.log(this.routepath);
+    // console.log(this.routepath);
   },
 
 
@@ -208,10 +207,11 @@ padding-bottom: 0px
     background: url('../assets/logo1.png');
   }
   .logoimg {
-    margin: -20px auto 0px;
+    margin: -40px auto 0px;
+    width: 30vw;
   }
   .a {
-    height: 11vh;
+    height: 8vh;
     font-size: 2.4rem;
     /* margin-top: 2rem; */
     color: #000;
@@ -224,14 +224,15 @@ padding-bottom: 0px
   }
 
   .line {
-    height: 2px;
+    height: 1px;
     width: 80vw;
     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;
+    margin-top: 20px;
   }
   .btn1 {
-    font-size: 24px !important;
+    font-size: 1.5rem !important;
     color: black !important;
     border: none !important;
   }
@@ -279,7 +280,7 @@ padding-bottom: 0px
           padding-left: 5px;
           padding-right: 5px;
           line-height: 40px;
-          padding-top: 0px; 
+          padding-top: 0px;
           padding-bottom: 0px;
           margin: 0 10px;
           &:hover {
@@ -305,13 +306,21 @@ padding-bottom: 0px
   color: #e03723 !important;
 }
 .rebtn {
+  position: fixed;
   border-radius: 0px;
   border: 1px solid #aaa;
   background: none;
+  bottom: 5vh;
+  right: 27vw;
+  font-size: 1.5rem !important;
+  width: 100px;
 }
 .rebtn:hover {
   color: #e03723 !important;
   border: 1px solid #e03723;
   background: #fff;
 }
+.btnheight {
+  height: 60vh;
+}
 </style>

src/components/Wheelplanting.vue

@@ -4,7 +4,10 @@
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
           <div class="size">
-            <img class="imgrul" :src="url.imageUrl" />
+            <router-link :to="{ name: 'details', params: { id: url.link }}" v-if="url.link" class="routelink">
+           <img class="imgrul" :src="url.imageUrl" />
+          </router-link>
+            <img v-else class="imgrul" :src="url.imageUrl" />
           </div>
         </div>
       </div>
@@ -79,10 +82,14 @@ export default {
 <style scoped>
 @media (min-width: 992px) {
   .wheelplanting .con-swiper {
-    /* width: 100%; */
+    width: 100%;
     height: 100vh;
     z-index: 60;
   }
+  .imgrul {
+    width: 100vw;
+    height: 100vh;
+  }
 }
 @media (max-width: 992px) {
   .wheelplanting .con-swiper {
@@ -101,6 +108,7 @@ export default {
     text-align:center
   }
   .imgrul {
+    width: 100vw;
     height: 53vw;
     /* margin:0 auto; */
     /* max-width:200vw; */

src/main.js

@@ -5,8 +5,12 @@ import router from './router'
 import store from './store'
 import 'element-ui/lib/theme-chalk/index.css'
 
+
+
 Vue.config.productionTip = false
+import { Picker } from 'vant'
 
+Vue.use(Picker);
 Vue.use(ElementUI)
 
 new Vue({

src/views/About.vue

@@ -178,6 +178,7 @@ export default {
   }
   .foyoimg{
     width: 80vw !important;
+    /* margin-bottom: 20px !important; */
   }
   .sssss {
     font-size: 1.2rem;
@@ -214,7 +215,7 @@ export default {
     border-radius: 0; /*去圆角 */
   }
   .about {
-    padding-top: 116px;
+    padding-top: 100px;
   }
 
   .st div div .sssss {
@@ -229,7 +230,7 @@ export default {
   }
 
   h2 {
-    padding-bottom: 30px;
+    padding-bottom: 10px;
     font-weight: bold;
   }
   .about-1-img {
@@ -242,7 +243,7 @@ export default {
   }
   .about-1 {
     margin: 0 79px;
-    padding: 78px 0 84px 0;
+    padding: 30px 0 70px 0;
     border-bottom: 1px solid #e5e5e5;
   }
 
@@ -263,6 +264,10 @@ export default {
   .teamp2 {
     font-size: 1.1vw;
   }
+   .foyoimg{
+   
+    margin-bottom: 30px !important;
+  }
 }
 
 /* 大屏幕（大桌面显示器，大于等于 1200px） */
@@ -313,7 +318,7 @@ export default {
       // }
       .caption {
         h2 {
-          font-size: 2.4rem;
+          font-size: 1.6rem;
           font-weight: bold;
         }
         .p1 {
@@ -323,13 +328,14 @@ export default {
     }
   }
   .h1 {
-    font-size: 2.2rem;
+    margin-top: 30px;
+    font-size: 1.6rem;
     font-weight: bold;
     margin-bottom: 0px;
   }
   .about-2 {
     div {
-      margin-top: 20px;
+      margin-top: 12px;
       div {
         .about-ph1 {
           margin-left: 9px;
@@ -425,7 +431,7 @@ export default {
       // }
       .caption {
         h2 {
-          font-size: 2.1rem;
+          font-size: 1.6rem;
           font-weight: bold;
         }
         .p1 {

src/views/Case.vue

@@ -17,7 +17,7 @@
     <div class="row mobtype border-bottom">
       <div class="col-xs-6">
         <div>
-          <p style="line-height:40px">选择想看的案例类型：</p>
+          <p style="line-height:38px">选择想看的案例类型：</p>
         </div>
       </div>
       <div class="col-xs-6">
@@ -28,15 +28,18 @@
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%" style="text-align: center;">
       <div>
         <el-row style="text-align: center;height:72.5vh;display: grid;">
-          <el-col :span="24">
+          <!-- <el-col :span="24">
             <button type="button" @click="() => filterCase()" class="btn-link" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部案例</button>
+          </el-col>-->
+          <el-col :span="24">
+            <van-picker class="values" :columns="columns" @cancel="drawer = false" :class="{btnactive:thisbtn==values}" @confirm="onConfirm" @change="onChange"  />
           </el-col>
-          <el-col :span="24" v-for="cas in casetype" :key="cas.id">
-            <!-- @click="() => filterCase(cas)" -->
+          <!-- <el-col :span="24" v-for="cas in casetype" :key="cas.id"> value-key=''
+         
             <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
-          </el-col>
+          </el-col>-->
         </el-row>
-        <button type="button" class="btn rebtn" @click="drawer = flase" style="text-align:center;color:black;font-size: 24px;padding-left: 40px;padding-right: 40px;">返回</button>
+        <button type="button" class="btn rebtn" @click="() => filterCase()" style="text-align:center;color:black;">确定</button>
       </div>
     </el-drawer>
 
@@ -50,7 +53,7 @@
       </div>
     </div>
     <!--  -->
-    <div style="margin-top:40px">
+    <div style="margin-top:27px">
       <button type="button" class="btn rebtn" @click="more" v-if="!allLoaded">加载更多</button>
       <p v-else>已经到底了~更多案例敬请期待~</p>
     </div>
@@ -65,12 +68,25 @@ import request from '../../utils/request'
 import apis from '../config/api'
 import CaseCard from '../components/CaseCard'
 import Navbars from '../components/Navbars'
+// import Picker from 'vant/lib/picker';
+import 'vant/lib/picker/style';
+// import { Picker } from 'vant'
+
+// import VuePicker from 'vue-pickers'
+// var tdata = []
+// for (let i = 0; i < 20; i++) {
+//   tdata.push({
+//     label: '第' + i + '行',
+//     value: i
+//   })
+// }
 
 export default {
   name: 'Case',
   components: {
     CaseCard,
     Navbars,
+    // VuePicker,
   },
   data () {
     return {
@@ -89,6 +105,12 @@ export default {
       navdrawer: false,
       direction: 'rtl',
       currentTypeName: '全部案例',
+
+      columns: ['全部案例'],
+      indexs: [],
+
+      value: '',
+      index: '',
     }
   },
 
@@ -108,7 +130,29 @@ export default {
       ...apis.caseType.list,
     })
       .then(res => {
-        this.casetype = (res.records || []).filter(x => x.type === 'case');
+         this.casetype = (res.records || []).filter(x => x.type === 'case');
+        // console.log(res.records || []).filter(x => x.type === 'case')
+        let type = (res.records || []).filter(x => x.type === 'case');
+
+        type.map((row, index) => {
+          this.columns[index + 1] = row.typeName
+          this.indexs[index] = row.id
+        
+        });
+
+        //      return data.map((row, inx) => {
+        //   return eval('(' + row.content + ')').reduce((acc, col) => {
+        //     const r = {this.columns = 
+
+        //       key: inx + 1,
+        //       createDate: row.createDate,
+        //       [`${col.key}`]: col.value,
+        //       ...acc,
+        //     }
+        //     console.log('r', r)
+        //     return r
+        //   }, {})
+        // })
       })
 
     this.getCaseList()
@@ -119,6 +163,23 @@ export default {
   },
 
   methods: {
+    // cancel () {
+    //         console.log('cancel')
+    //       },
+    //       confirm (res) {
+    //         console.log(res)
+    //       },
+    onChange (picker, value, index) {
+      console.log(picker);
+      this.value = value
+      this.index = index
+      console.log(`当前值：${value}, 当前索引：${index}`);
+    },
+
+    onConfirm (value, index) {
+      Toast(`当前值：${value}, 当前索引：${index}`);
+    },
+
     getCaseList (filters = {}) {
       const params = {
         ...this.conditions,
@@ -154,12 +215,31 @@ export default {
     },
 
     filterCase (caseType) {
-      // console.log(caseType.typeName)
-      this.currentTypeName = caseType ? caseType.typeName : '全部案例'
+      //  let value = ref.getColumnValue
+
+      if (this.value) {
+
+        console.log(this.value, this.indexs, '111111111')
+
+this.currentTypeName = this.value
+
+        this.getCaseList({ pageNum: 1, caseType: this.value=='全部案例' ? '': this.indexs[this.index-1] })
+        this.currentTypeName = this.value
+        
+        this.drawer = false;
+
+      } else {
+        console.log(caseType)
+        this.currentTypeName = caseType ? caseType.typeName : '全部案例'
+
+        this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
+
+        this.thisbtn = caseType ? caseType.typeName : ''
+        this.drawer = false;
+      }
+
+
 
-      this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
-      this.drawer = false;
-      this.thisbtn = caseType ? caseType.typeName : ''
     },
   }
 
@@ -174,7 +254,7 @@ export default {
 
 .mobtype {
   padding: 0;
-  margin-top: 10px;
+  margin-top: 0px;
 }
 
 .case {
@@ -184,7 +264,7 @@ export default {
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-  margin-top: 10px;
+  margin-top: 0px;
 }
 .btn1 {
   font-size: 24px;
@@ -221,6 +301,9 @@ export default {
 }
 
 @media (max-width: 992px) {
+  .rebtn {
+    width: 120px;
+  }
   .case {
     background-color: #fafafa;
     padding-bottom: 3rem;
@@ -230,7 +313,7 @@ export default {
     border-bottom: 1px solid #bfbfbf;
   }
   .dyn-main {
-    margin-top: 20px;
+    margin-top: 10px;
 
     padding-left: 1.6vw;
     padding-right: 1.6vw;
@@ -242,6 +325,9 @@ export default {
     padding-left: 1.6vw;
     padding-right: 1.6vw;
   }
+  p {
+    margin: 0;
+  }
 }
 .row {
   margin-left: 0;
@@ -261,9 +347,9 @@ export default {
     margin-top: 3rem;
   }
   .case {
-    margin-top: 116px;
-    margin-bottom: -116px;
-    padding-bottom: 116px;
+    margin-top: 100px;
+    margin-bottom: -100px;
+    padding-bottom: 100px;
     background-color: #fafafa;
   }
 
@@ -329,7 +415,7 @@ export default {
 }
 .mobtype {
   padding: 0;
-  margin-top: 10px;
+  margin-top: 0px;
 }
 
 @media (min-width: 992px) and (max-width: 1550px) {
@@ -352,6 +438,7 @@ export default {
   color: #e03723 !important;
 }
 .rebtn {
+  /* width: 120px; */
   border-radius: 0px;
   border: 1px solid #aaa;
   background: none;

src/views/Contact.vue

@@ -40,7 +40,10 @@
           <strong>南京福予文化传媒有限公司</strong>
         </p>
 
-        <p class="p2 app">地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
+        <p class="p2">
+          南京市江宁区秣周东路12号悠谷三号楼
+          <br v-if="isMobilePhone"/>（砂之船奥特莱斯旁）
+        </p>
       </div>
     </div>
   </div>
@@ -80,11 +83,10 @@ export default {
 </style>
 
 <style lang="less" scoped>
-.contact{
+.contact {
   min-height: 85vh;
 }
 
-
 .col-md-6,
 .col-xs-6 {
   padding: 0px;
@@ -93,11 +95,11 @@ export default {
   .address {
     .p1 {
       padding-top: 7.57vw;
-      font-size: 2.9vw;
+      font-size: 3.8vw;
       margin-bottom: 0;
     }
     .p2 {
-      font-size: 2.4vw;
+      font-size: 1.2rem;
       padding-top: 1.9vw;
     }
   }
@@ -106,13 +108,17 @@ export default {
   h1 {
     font-weight: bold;
   }
+  h2 {
+    font-size: 2.5rem;
+    font-weight: 200;
+  }
   .address {
     .p1 {
       padding-top: 70px;
       font-size: 3.6rem;
     }
     .p2 {
-      font-size: 3rem;
+      font-size: 2.5rem;
       padding-top: 14px;
     }
   }
@@ -137,32 +143,35 @@ export default {
   .img1 {
     width: 20vw !important;
   }
-  .pull-right1{
+  .pull-right1 {
     float: right;
     margin-right: 8.5vw;
   }
-  .pull-left1{
+  .pull-left1 {
     float: left;
-    margin-left: 8.5vw
+    margin-left: 8.5vw;
   }
-  h1{
-    font-size: 3.22vw;
+  h1 {
+    // font-size: 3.22vw;
     margin-top: 4.9vw;
     margin-bottom: 5vw !important;
+    font-size: 1.6rem;
+
+    font-weight: bold;
+
+    // margin-bottom: 0px;
   }
-  h2{
+  h2 {
     font-size: 2.4vw;
     margin-top: 1.6vw;
-   
-  margin-bottom: 0.08vw !important;
-
 
+    margin-bottom: 0.08vw !important;
   }
 }
 
 @media (min-width: 992px) {
   .contact {
-    padding-top: 116px;
+    padding-top: 100px;
   }
   .contact-1 {
     width: 80%;
@@ -184,11 +193,9 @@ export default {
   .contact-2 {
     padding: 98px 98px 27px 98px;
   }
-  
 }
 h2 {
   margin-bottom: -22px;
-
 }
 
 @media (min-width: 992px) and (max-width: 1551px) {
@@ -219,7 +226,7 @@ h2 {
     }
   }
 }
-@media  (max-width: 551px) {
+@media (max-width: 551px) {
   // h2{
   //   font-size: 2rem
   // }

src/views/Details.vue

@@ -68,7 +68,7 @@
       <div class="row home-case" style="padding:0;width: 100%;margin-left :0; margin-right:0">
         <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in recommends" :key="index">
           <router-link :to="{name: 'details', params: { id: item.id }}">
-            <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
+            <div class="st4" :style="{background: `url(${item.caseMoreCoverImg||item.caseCoverImg})`}">
               <div class="casetitle">
                 <div style="width: 100%">
                   <hr />
@@ -250,7 +250,7 @@ export default {
       font-size: 4rem;
     }
     .zantext {
-      font-size: 3.6rem;
+      font-size: 2.4rem;
       line-height: 4rem;
     }
   }
@@ -343,6 +343,7 @@ export default {
   h2 {
     margin-top: 64px;
     margin-bottom: 30px;
+    font-size: 2.4rem
   }
   .st5 {
     width: 80%;
@@ -465,7 +466,7 @@ export default {
 <style scoped>
 @media (min-width: 992px) {
   .details {
-    margin-top: 116px;
+    margin-top: 100px;
   }
 
   .coverimg {
@@ -478,7 +479,7 @@ export default {
     margin: 0;
   }
   .case {
-    padding-top: 116px;
+    padding-top: 100px;
   }
 
   .st {
@@ -488,7 +489,7 @@ export default {
     background-color: #fff;
     display: inline-block;
     border-radius: 0;
-    border: 2px solid #bcbcbc;
+    border: 1px solid #bcbcbc;
   }
 
   .case-2 {
@@ -546,6 +547,7 @@ export default {
   }
   .p2 {
     line-height: 55px;
+    font-size: 2.4rem
   }
 }
 </style>
@@ -562,6 +564,10 @@ export default {
   //     font-size: 3rem;
   //     line-height: 3.4rem;
   //   }
+   .movment {
+    font-size: 1.7rem;
+  
+  }
   .st h1 {
     font-size: 3rem;
   }
@@ -569,24 +575,29 @@ export default {
     font-size: 1.7rem;
   }
   .pull-left {
-    font-size: 2.5rem;
+    font-size: 1.7rem;
     .iconfont {
       font-size: 2.5rem;
     }
     .zantext {
-      font-size: 2.5rem;
+      font-size: 1.7rem;
       line-height: 2.8rem;
     }
   }
 
+  .btn1{
+    font-size: 1.7rem !important;
+  }
+
   .pull-right {
-    font-size: 2.5rem;
+    font-size: 1.7rem;
   }
  
 }
 @media (min-width: 1550px){
   .sharetext{
-    font-size: 3.6rem
+    font-size: 2.4rem;
+    line-height:5.8rem;
   }
 }
 a {

src/views/Dynamic.vue

@@ -27,15 +27,14 @@
     <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%" style="text-align: center;">
       <div>
         <el-row style="text-align: center;height:72.5vh;display: grid;">
-          <el-col :span="24">
+          <!-- <el-col :span="24">
             <button type="button" class="btn-link" @click="() => filterCase()" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部动态</button>
+          </el-col>-->
+          <el-col :span="24">
+            <van-picker class="values" :columns="columns" @cancel="drawer = false" @confirm="onConfirm" @change="onChange" />
           </el-col>
-          <el-col :span="24" v-for="cas in casetype" :key="cas.id">
-            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
-          </el-col>
-          
         </el-row>
-         <button type="button" class="btn rebtn" @click="drawer = flase" style="text-align:center;color:black;font-size: 24px;padding-left: 40px;padding-right: 40px;">返回</button>
+        <button type="button" class="btn rebtn" @click="drawer = flase" style="text-align:center;color:black">确定</button>
       </div>
     </el-drawer>
 
@@ -65,6 +64,8 @@ import apis from '../config/api'
 import CaseCard from '../components/CaseCard'
 import Navbars from '../components/Navbars'
 
+import 'vant/lib/picker/style';
+
 export default {
   name: 'dynamic',
   data () {
@@ -84,7 +85,13 @@ export default {
       direction: 'rtl',
 
       currentTypeName: '全部动态',
-      thisbtn: ''
+      thisbtn: '',
+
+      columns: ['全部动态'],
+      indexs: [],
+
+      value: '',
+      index: '',
     }
   },
   components: {
@@ -105,12 +112,29 @@ export default {
     })
       .then(res => {
         this.casetype = (res.records || []).filter(x => x.type === 'movement');
+        let type = (res.records || []).filter(x => x.type === 'movement');
+        type.map((row, index) => {
+          this.columns[index + 1] = row.typeName
+          this.indexs[index] = row.id
+
+        });
       })
     this.getCaseList()
   },
   computed: {
   },
   methods: {
+    onChange (picker, value, index) {
+      console.log(picker);
+      this.value = value
+      this.index = index
+      console.log(`当前值：${value}, 当前索引：${index}`);
+    },
+
+    onConfirm (value, index) {
+      Toast(`当前值：${value}, 当前索引：${index}`);
+    },
+
     getCaseList (filters = {}) {
       const params = {
         ...this.conditions,
@@ -142,38 +166,50 @@ export default {
       }
     },
     filterCase (caseType) {
-      this.currentTypeName = caseType ? caseType.typeName : '全部动态'
-      this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' });
-      this.drawer = false;
-      this.thisbtn = caseType ? caseType.typeName : ''
+
+      if (this.value) {
+
+        console.log(this.value, this.indexs, '111111111')
+
+        this.currentTypeName = this.value
+
+        this.getCaseList({ pageNum: 1, caseType: this.value == '全部动态' ? '' : this.indexs[this.index - 1] })
+        this.currentTypeName = this.value
+
+        this.drawer = false;
+
+      } else {
+        this.currentTypeName = caseType ? caseType.typeName : '全部动态'
+        this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' });
+        this.drawer = false;
+        this.thisbtn = caseType ? caseType.typeName : ''
+      }
     },
   }
 }
 </script>
 
+
+
+
 <style scoped>
 .routelink {
   text-decoration: none;
 }
 
+.mobtype {
+  padding: 0;
+  margin-top: 0px;
+}
+
 .dynamic {
   min-height: 90vh;
 }
 
-/* .casecard {
-  width: 100%;
-
-  padding-bottom: 100%;
-  background-size: 100% 100% !important;
-  position: relative;
-
-  margin: 0;
-} */
-
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-  margin-top: 10px;
+  margin-top: 0px;
 }
 .btn1 {
   font-size: 24px;
@@ -187,10 +223,12 @@ export default {
 }
 .mobbtn {
   color: #e03723;
+  background-color: #fafafa;
   padding: 12px 40px;
+
   border-radius: 0px;
- background-color: #fafafa;
- border:none;
+
+  border: none;
   /* border: 2px solid #bfbfbf; */
 }
 
@@ -206,22 +244,12 @@ export default {
   padding-bottom: 65%;
   background-size: 100% 100% !important;
 }
-.coverimg{
-     width: 100%;
-    /* padding-bottom: 37px; */
-    /* height: 100%; */
-   
-    height: 0;
-    padding-bottom: 40.3%;
-    background-size: 100% 100% !important;
-  
-  }
 
 @media (max-width: 992px) {
+  .rebtn {
+    width: 120px;
+  }
   .dynamic {
-    /* margin-top: 47.8px;
-    margin-bottom: -47.8px;
-    padding-bottom: 47.8px; */
     background-color: #fafafa;
     padding-bottom: 3rem;
   }
@@ -230,7 +258,7 @@ export default {
     border-bottom: 1px solid #bfbfbf;
   }
   .dyn-main {
-    margin-top: 20px;
+    margin-top: 10px;
 
     padding-left: 1.6vw;
     padding-right: 1.6vw;
@@ -242,6 +270,9 @@ export default {
     padding-left: 1.6vw;
     padding-right: 1.6vw;
   }
+  p {
+    margin: 0;
+  }
 }
 .row {
   margin-left: 0;
@@ -261,9 +292,9 @@ export default {
     margin-top: 3rem;
   }
   .dynamic {
-    margin-top: 116px;
-    margin-bottom: -116px;
-    padding-bottom: 116px;
+    margin-top: 100px;
+    margin-bottom: -100px;
+    padding-bottom: 100px;
     background-color: #fafafa;
   }
 
@@ -279,6 +310,7 @@ export default {
     color: #000;
     background-color: #fff;
     border: 1px solid #aaaaaa;
+    outline: none;
   }
   .btn:hover {
     color: #e03723;
@@ -313,10 +345,24 @@ export default {
     padding: 10px;
   }
 }
+.coverimg {
+  width: 100%;
+  /* padding-bottom: 37px; */
+  /* height: 100%; */
+
+  height: 0;
+  padding-bottom: 40.3%;
+  background-size: 100% 100% !important;
+}
 .btn-link {
   outline: none;
   text-decoration: none;
 }
+.mobtype {
+  padding: 0;
+  margin-top: 0px;
+}
+
 @media (min-width: 992px) and (max-width: 1550px) {
   .btn1 {
     font-size: 20px;
@@ -326,6 +372,7 @@ export default {
     padding: 0;
     margin-top: 0px;
   }
+
   .btn {
     padding: 9px 105px;
     font-size: 17px;
@@ -336,6 +383,7 @@ export default {
   color: #e03723 !important;
 }
 .rebtn {
+  /* width: 120px; */
   border-radius: 0px;
   border: 1px solid #aaa;
   background: none;
@@ -348,7 +396,6 @@ export default {
 </style>
 
 
-
 <style lang="less" scoped>
 @media (min-width: 992px) {
   .cards:hover {
@@ -362,12 +409,13 @@ export default {
 }
 @media (min-width: 992px) and (max-width: 1500px) {
   .cards:hover {
+    transition: all 0.4s;
     .casecard {
-      transition: all 0.4s;
       margin-top: -10px;
       margin-bottom: 10px;
       box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.12);
     }
   }
 }
-</style>
+</style>
+

src/views/Home.vue

@@ -278,12 +278,13 @@ export default {
     margin-top: 20px;
     font-size: 20px;
     font-weight: bold;
-    letter-spacing: 1px;
+    letter-spacing: 0px;
   }
   h3 {
     padding-top: 3%;
     padding-left: 5%;
     font-size: 2rem;
+    font-weight: 300;
     /* padding: 0px; */
     width: 100%;
     height: 19%;
@@ -370,7 +371,7 @@ export default {
     margin-bottom: 3vw;
     font-size: 1.8rem;
     font-weight: bold;
-    letter-spacing: 0.3rem;
+    letter-spacing: 0px;
     color: #000;
   }
   .dynbtn {
@@ -394,6 +395,7 @@ export default {
     color: #000;
     background-color: #fff;
     border: 1px solid #aaaaaa;
+    width: 200px;
   }
   .btn:hover {
     color: #e03723;
@@ -465,7 +467,8 @@ export default {
   }
   .ph-logo:nth-child(6n + 1) {
     margin-top: 37px;
-    margin-left: 0.4vw;
+    margin-left: 0.5vw;
+    margin-right: 0.5vw;
   }
   .home-case {
     padding: 0;
@@ -614,7 +617,7 @@ h3 {
     margin-bottom: 5.2vw;
   }
   .btn-lg {
-    width: 100px;
+    width: 120px;
     // padding: 3px;
     font-size: 1.2rem;
     background-color: #fff;
@@ -650,6 +653,14 @@ h3 {
     display: block;
     color: #fff;
     width: 100%;
+    font-family: 'Microsoft Yahei Light';
+    font-size: 2.4rem;
+    padding: 0px;
+ 
+    color: #fff;
+  
+    line-height: 43px;
+
   }
   .br-logotop {
     display: none;
@@ -673,7 +684,7 @@ h3 {
     }
 
     .nav {
-      font-size: 2.6rem;
+      font-size: 2.2rem;
       margin-top: 5px;
       li {
         margin-left: 2vw;
@@ -691,8 +702,8 @@ h3 {
     }
 
     .logo {
-      width: 300px;
-      height: 60px;
+      width: 280px;
+      height: 53px;
       background: url('../assets/logo.png');
     }
     // padding-top: 20px;
@@ -706,7 +717,7 @@ h3 {
       // box-shadow: 0px 2px 2px  #ccc;
       box-shadow: 2px 2px rgba(183, 183, 185, 0.2);
       .nav {
-        font-size: 2.4rem;
+        font-size: 2.2rem;
 
         li {
           a {
@@ -732,18 +743,21 @@ h3 {
 
       .logo {
         margin-top: -10px;
-        width: 300px;
-        height: 60px;
+        width: 280px;
+        height: 56px;
         background: url('../assets/logo1.png');
         background-size: 100% 100% !important;
       }
     }
   }
   .p2 {
-    margin-bottom: 38px;
+    margin-bottom: 50px;
   }
 }
 @media (min-width: 992px) and (max-width: 1550px) {
+  .st4 .casetitle p{
+    font-size: 1.7rem
+  }
   h2 {
     font-size: 3rem;
   }
@@ -763,10 +777,10 @@ h3 {
     font-size: 1.7rem;
   }
   .p2 {
-    margin-bottom: 50px;
+    margin-bottom: 17px;
   }
   .top-news {
-    margin-top: 45px;
+    margin-top: 80px;
     h3 {
       font-size: 1.7rem;
       padding: 30px;
@@ -779,6 +793,7 @@ h3 {
     font-size: 17px;
     margin-top: 28px;
     padding: 8.4px 35px;
+    width: 160px;
   }
   .business {
     margin-bottom: 60px;