zzz

package-lock.json

         "ajv-keywords": "^3.1.0"
       }
     },
+    "scroll-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/scroll-js/download/scroll-js-3.0.0.tgz",
+      "integrity": "sha1-F3NVJl728A4c138eIvnxhbpqXYE="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",

package.json

     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "element-ui": "^2.11.1",
+    "scroll-js": "^3.0.0",
     "swiper": "^4.5.0",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.4",

src/App.vue

         <div class="container-fluid con">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-              <span class="iconfont icon-caidan"></span>
+            <button type="button" class="navbar-toggle collapsed">
+              <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
             </button>
+            <!-- <el-button class="btn-link" @click="navdrawer = true" type="button" style="margin-left: 16px;"><span class="iconfont icon-caidan"></span></el-button> -->
             <a class="navbar-brand" href="#">
               <!-- <img alt="Brand" src="./assets/logo1.png" /> -->
               <div alt="Brand" class="logo"></div>
       </nav>
     </div>
 
+    <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
+      <div>
+        <el-row style="text-align: center;">
+
+          
+              
+        <el-col :span="24" >
+          <img src="./assets/image/mobile/Sidemenulogo.png" width="46%" style="margin: 0 auto">
+           </el-col>
+          <el-col :span="24" class="a">
+            <a href="/">01 回到首页</a>
+          </el-col>
+
+          <el-col :span="24" class="a">
+            <a href="/case">02 案例展示</a>
+          </el-col>
+
+          <el-col :span="24" class="a">
+            <a href="/dynamic">03 动态分享</a>
+          </el-col>
+
+          <el-col :span="24" class="a">
+            <a href="/about">04 关于福予</a>
+          </el-col>
+
+          <el-col :span="24" class="a">
+            <a href="/contact">05 联系我们</a>
+          </el-col>
+
+          <el-col :span="24" class="a">
+             <button type="button" class="btn btn-default" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-drawer>
+
     <div class="main">
       <router-view />
     </div>
 
     <div class="coll">
       <div>
-        <div class="btn btn-default" href="#" role="button" v-if="!current1" @mouseenter="enter1()" @mouseleave="leave1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;">
+        <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>
-        <el-button class="btn btn-default" @click="open" v-if="current1" @mouseenter.stop="enter1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;">
+        <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;" />
-        </el-button>
+        </div>
       </div>
     </div>
     <div class="coll">
       <div>
-        <a href="#" role="button" @mouseenter="enter2()" @mouseleave="leave2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;">
+        <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>
       scrolled: false,
       current1: false,
       current2: false,
+      key: 1,
+      navdrawer: false,
+      direction: 'rtl',
     }
   },
   components: {
     },
 
     open () {
-      this.$alert('', {
-        dangerouslyUseHTMLString: true
-      });
+      const h = this.$createElement;
+      this.$msgbox({
+        title: '',
+        message: h(ClickContact, { key: this.key++ }),
+        showClose: true,
+        showCancelButton: false,
+        center: true,
+        showConfirmButton: false,
+        customClass: 'messageBox-Contace',
+
+
+
+      })
     }
 
   },
 }
 </script>
 
+<style>
+.messageBox-Contace {
+  width: 80% !important;
+}
+</style>
 
 
 <style>
 .main {
   padding-bottom: 9.4rem;
 }
+@media (max-width: 992px) {
+  .navbar-brand {
+    padding: 0;
+  }
+  .logo {
+    width: 300px;
+    height: 50px;
+    background: url("./assets/logo1.png");
+  }
+  .a{
+    font-size: 2.4rem;
+    margin-top: 2rem;
+    color: #000;
+     
+  }
+  .a a{
+    color: #000;
+  }
+}
 </style>
 
 

src/components/Business.vue

 <template>
   <div class="business">
+
+
+    
     <div class="swiper-container" id="swiper2">
       <div class="swiper-wrapper">
 

src/components/ClickContact.vue

 </template>
 
 
+<style>
+
+</style>
+
+
 <style scoped>
 /* .contact-box {
   width: 80%;
   }
 }
 
+
+
 @media (min-width: 992px) {
   .contact-1 {
-    width: 80%;
+    
     padding: 50px;
-    margin-top: -120px;
+  
 
     background-color: #fff;
     display: inline-block;
     border-radius: 0;
-    border: 1px solid #dcdcdc;
+ 
   }
 
   .contact-1 .contact-main {

src/components/wheelplanting1.vue

+<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/config/api.js

   },
   case: {
     cover: {
-      url: `${commPrefix}/case/cover`,
+      url: `${commPrefix}/cover`,
       method: 'get',
     },
 

src/views/About.vue

       <div class="row">
         <div class="col-md-12">
           <div class="sssss">
-            <p class="text-left" >
+            <p class="text-left" style="font-size: 2.4rem">
               南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
               力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
             </p>
             <br />
             <div class="col-md-12">
-            <div class="abc">
-              <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
+              <div class="abc">
+                <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
+              </div>
             </div>
           </div>
-          </div>
         </div>
       </div>
 
       </div>
 
       <div class="row about-2">
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/image/about/Photo_sfg.jpg" class="about-ph1" alt="..." />
-        </div>
-        <div class="col-xs-6 col-md-3" style="padding: 0">
-          <div class="text-left">
-            <h1 style="margin-top: 0; font-size: 3.6rem">孙福高</h1>
-            <p style="font-size: 2.2rem;color: #595757;margin-bottom: 20px">创始人兼艺术总监</p>
-            <p style="font-size: 2.2rem">
-              10多年视觉设计经验；
-              <br />8余年项目管理经验；
-              <br />擅长将多种媒体技术与新兴技术结合；
-              <br />带队服务于丰盛集团、中国船舶重工集团、银城地产等上市公司及国企。
-            </p>
+        <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="">
+              <h1 class="teamh1">孙福高</h1>
+              <p class="teamp1">创始人兼艺术总监</p>
+              <p class="teamp2">
+                10多年视觉设计经验；
+                <br />8余年项目管理经验；
+                <br />擅长将多种媒体技术与新兴技术结合；
+                <br />带队服务于丰盛集团、中国船舶重工集团、银城地产等上市公司及国企。
+              </p>
+            </div>
           </div>
         </div>
-
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/image/about/Photo_ly.jpg" class="about-ph1" alt="..." />
-        </div>
-        <div class="col-xs-6 col-md-3" style="padding: 0">
-          <div class="text-left">
-            <h1 style="margin-top: 0; font-size: 3.6rem">李阳</h1>
-            <p style="font-size: 2.2rem;color: #595757;margin-bottom: 20px">创意总监兼合伙人</p>
-            <p style="font-size: 2.2rem">
-              职业广告人；
-              <br />丰富的产品推广及活动策划经验；
-              <br />江苏省省级政府项目主策划；
-              <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
-            </p>
+        <div class="col-xs-12 col-md-6">
+          <div class>
+            <img src="../assets/image/about/Photo_ly.jpg" class="about-ph1" alt="..." />
+          </div>
+          <div class style="padding: 0">
+            <div class="text-left">
+              <h1 class="teamh1">李阳</h1>
+              <p class="teamp1">创意总监兼合伙人</p>
+              <p class="teamp2">
+                职业广告人；
+                <br />丰富的产品推广及活动策划经验；
+                <br />江苏省省级政府项目主策划；
+                <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
+              </p>
+            </div>
           </div>
         </div>
       </div>
-
       <div class="row about-3">
         <div class="col-xs-2 col-md-2">
           <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
 
 
 <style scoped>
-
-.sssss{
+.sssss {
   padding: 40px 20px;
 }
 
 .about-1-img {
-    width: 100%;
-    
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .about-ph1 {
   }
+}
 
-/* 小屏幕（平板，大于等于 768px） */
-@media (min-width: 768px) {
+@media (max-width: 768px) {
+  .about-2 div{
+    margin-top: 40px;
+  }
+  .teamh1 {
+    margin-top: 0;
+    /* font-size: 2rem; */
+  }
+  .teamp1 {
+    /* font-size: 1.6rem; */
+  }
+  .teamp1 {
+    /* font-size: 1.6rem; */
+  }
 }
 
 /* 中等屏幕（桌面显示器，大于等于 992px） */
   .about {
     padding-top: 116px;
   }
-  p{
-    font-size: 2.4rem;
-  }
-  .st div div .sssss{
+
+  .st div div .sssss {
     padding: 0 79px;
   }
 
-  h2{
+  h2 {
     padding-bottom: 30px;
   }
   .about-1-img {
     width: 175px;
     height: 175px;
   }
-  .about-ph1 {
-    padding: 0 40px 0 40px;
-  }
-  
 
   .abc {
     border-bottom: 2px solid #e5e5e5;
   .about-2 {
     padding-top: 123px;
   }
-  
+
   .ph5 {
     width: 100%;
     padding: 0px;
-    
+  }
+  .teamh1 {
+    margin-top: 0;
+    font-size: 3.6rem;
+  }
+  .teamp1 {
+    font-size: 2.2rem;
+    color: #595757;
+    margin-bottom: 20px;
+  }
+  .teamp2 {
+    font-size: 2.2rem;
   }
 }
 
 /* 大屏幕（大桌面显示器，大于等于 1200px） */
 @media (min-width: 1200px) {
 }
-
-
 </style>
 
 <style lang="less" scoped>
- .about-3{
-   margin: 0;
-    padding-top: 100px;
-    padding-left: 40px;
-    padding-right: 40px;
-    div{
-      margin: 0;
-      padding: 0;
-      img{
-        width: 100%;
-      }
+.about-2 {
+  padding-top: 60px;
+  div {
+    .about-ph1 {
+      float: left;
+      width: 50%;
+      height: 100%;
+      padding: 0 40px 0 40px;
     }
- }
-
+  }
+}
 
+.about-3 {
+  margin: 0;
+  padding-top: 100px;
+  padding-left: 40px;
+  padding-right: 40px;
+  div {
+    margin: 0;
+    padding: 0;
+    img {
+      width: 100%;
+    }
+  }
+}
 </style>

src/views/Case.vue

       <!-- 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">全部案例</button>
+    <div class="border-bottom comtype">
+      <div id>
+        <button type="button" @click="addall()" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
         <button v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
       </div>
     </div>
 
-    <div class="row mobtype">
+    <div class="row mobtype border-bottom">
       <div class="col-xs-6">
-        <div><p style="line-height:40px">选择想看的案例类型：</p></div>
+        <div>
+          <p style="line-height:40px">选择想看的案例类型：</p>
+        </div>
       </div>
       <div class="col-xs-6">
         <el-button class="btn-link" @click="drawer = true" type="button" style="margin-left: 16px;">全部案例</el-button>
     </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-row style="text-align: center;">
+          <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" @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">
-            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;position:fixed;bottom:100px;">返回</button>
+          <el-col :span="24">
+            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;">返回</button>
           </el-col>
         </el-row>
       </div>
 
       allLoaded: false,//数据全部加载
       drawer: false,
+      navdrawer: false,
       direction: 'rtl',
+
     }
   },
   components: {
     }).then(con => {
       // console.log(con,"124")
       this.caselist = con.records;
+      if (con.total <= this.num * con.size) this.allLoaded = true;
+
+
       // window.console.log(this.caselist, "543");
-    }).catch()
+    })
 
 
   },
   },
 
   methods: {
+
     add (a) {
 
       console.log(this.num, "124")
       }).then(con => {
         console.log(con, "124")
         this.caselist = this.caselist.concat(con.records);
-        if (con.total % 8) this.allLoaded = true;
+        this.allLoaded = false;
+        if (con.total <= this.num * con.size) this.allLoaded = true;
 
         // this.caselist = con.records;
 
         params: { pageNum: a, pageSize: 8 }
       }).then(con => {
         console.log(con, "124")
+
         this.caselist = this.caselist.concat(con.records);
 
 
       })
     },
 
+    addall () {
+      this.num = 1;
+      add(num);
+    }
+
 
   }
 
 </script>
 
 <style scoped>
-
-.mobtype{
-  margin-top: 20px;
-}
-
 .case {
   margin-top: 116px;
 }
 .border-bottom {
-  display: none;
+  /* display: none; */
 }
 
 .ph {
   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 (min-width: 992px) {
   .main {
   .case {
     background-color: #fafafa;
   }
+  .mobtype {
+    display: none;
+  }
 
-  
   .btn {
     font-size: 24px;
     margin-top: 88px;
   }
 
   .border-bottom {
-    display: block;
+    /* display: block; */
     font-size: 24px;
     border-bottom: 1px solid #bfbfbf;
     padding: 10px;

src/views/Contact.vue

 
 } */
 @media (max-width: 992px) {
+  .contact {
+    padding-top: 60px;
+  }
   .st1 {
   }
+  .img1{
+    width: 100%;
+  }
 }
 
 @media (min-width: 992px) {
+  .contact {
+    padding-top: 116px;
+  }
   .contact-1 {
     width: 80%;
     padding: 50px;
   margin-bottom: -22px;
 }
 
-.contact {
-    padding-top: 116px;
-  }
+
 
 
  /*  .contact-1 {

src/views/Dynamic.vue

+
 <template>
   <div class="dynamic">
     <div>
       <!-- width="100%" height="300"> -->
     </div>
 
-    <div class="border-bottom">
-      <div>
+    <div class="border-bottom comtype" >
+      <div id="bs-example-navbar-collapse-2">
         <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
-        <button v-for="cas in casetype" :key="cas" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+        <button v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
       </div>
     </div>
 
-    <div>
-      <div class="row">
-        <div class="col-xs-6">
-          <div>选择想看的案例类型：</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>
-        </div>
+    <div class="row mobtype border-bottom">
+      <div class="col-xs-6">
+        <div><p style="line-height:40px">选择想看的案例类型：</p></div>
+      </div>
+      <div class="col-xs-6">
+        <el-button class="btn-link" @click="drawer = true" type="button" style="margin-left: 16px;">全部案例</el-button>
       </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>
+          <el-col :span="24" :offset="6" 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">
+            <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>
+      </div>
+    </el-drawer>
 
     <div class="contanier center-block dyn-main">
       <div class="row">
           <div class="col-md-6 col-xs-6 ph">
             <div class="ph-houver">
               <a href="/details" style="text-decoration:none;">
-                <img :src="item.caseCoverImg" alt style="width:100%;" />
+                <div :style="{background: `url(${item.caseCoverImg})`}" class="case-ph"></div>
                 <div class="text-left">
                   <h2>{{item.caseTitle}}</h2>
                   <P>{{item.caseSummary}}</P>
     </div>
 
     <div>
-      <button type="button" class="btn btn-default" @click="add">加载更多</button>
+      <button type="button" v-show="!allLoaded" class="btn btn-default" @click="add(++num)">加载更多</button>
     </div>
 
-    <div v-if="show">
+    <div v-show="allLoaded">
       <p>已经到底了~更多案例尽请期待~</p>
     </div>
   </div>
       casetype: [],
       caselist: [],
       num: 1,
-      show: true,
+
+      allLoaded: false,//数据全部加载
+      drawer: false,
+      direction: 'rtl',
+      
     }
   },
   components: {
     // window.console.log(this.cover, "543");
     // 封面
     request({
-      ...apis.case.cover,
+      ...apis.dynamic.cover,
 
     }).then(data => {
       this.cover = data[0];
     })
 
 
-    // axios.get('http://localhost:8080/pc/case/cover')
+    // axios.get('http://localhost:8080/pc/dynamic/cover')
 
     // 分类
-    // axios.get('http://localhost:8080/pc/caseType/list')
+    // axios.get('http://localhost:8080/pc/dynamicType/list')
     request({
-      ...apis.caseType.list,
+      ...apis.dynamicType.list,
     })
       .then(res => {
-        
+
         this.casetype = res.records;
 
       })
     request({
       ...apis.case.list,
       urlData: { type: 'case' },
-      params: { pageNum: 1, pageSize: 8 }
+      params: { pageNum: this.num, pageSize: 8 }
     }).then(con => {
       // console.log(con,"124")
       this.caselist = con.records;
   },
 
   methods: {
-    add () {
+    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;
+
+        // 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);
+
+
+
+
+      })
+    },
+
 
-      // axios.get('http://localhost:8080/pc/case/case/list/?pageNum=2&pageSize=8')
-      //   .then(con => {
-      //     this.caselist = con.data.data.records;
-      //     window.console.log(this.caselist, "543");
-      //   })
-    }
   }
 
 
 </script>
 
 <style scoped>
+
+
+
+.dynamic {
+  margin-top: 116px;
+}
 .border-bottom {
-  display: none;
+  /* display: none; */
 }
 
 .ph {
 .text-left {
   color: #000;
 }
+.case-ph {
+    bottom: 0;
+    width: 100%;
 
-@media (min-width: 992px) {
-  .dynamic {
-    padding-top: 116px;
+    height: 0;
+    padding-bottom: 65%;
+    background-size: 100% 100% !important;
   }
+
+  @media (max-width: 992px) {
+    .comtype{
+      display: none;
+    }
+    
+  }
+
+@media (min-width: 992px) {
   .main {
     display: -webkit-flex; /* Safari */
     display: flex;
   .dynamic {
     background-color: #fafafa;
   }
-
+.mobtype{
+  display: none;
+}
+  
   .btn {
     font-size: 24px;
     margin-top: 88px;
   }
 
   .border-bottom {
-    display: block;
+    /* display: block; */
     font-size: 24px;
     border-bottom: 1px solid #bfbfbf;
     padding: 10px;
   }
 }
-</style>
+</style>

src/views/Home.vue

       </div>
     </nav>
 
-    <a href="#pos">
+    
       <div class="aarow_box animated aarowMove">
-        <div class="aarow"></div>
+        <div class="aarow" @click="arrow()"></div>
       </div>
-    </a>
+   
 
     <div class="contanier next-page">
       <div class="row">
           <Wheelplanting></Wheelplanting>
         </div>
       </div>
-      <div name="pos"></div>
+      <!-- <div class="contanier next-page1">
+      <div class="row">
+        <div class="col-md-12 home-wheel">
+          <Wheelplanting1></Wheelplanting1>
+        </div>
+      </div> -->
+
+
+
+      <div id="pos" style="margin:116px"></div>
 
       <div class="row">
         <div class="col-md-12" 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">
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
-              <div class="casetitle">{{item.caseTitle}}</div>
+              <div class="casetitle">
+                <p>{{item.caseTitle}}</p>
+              </div>
             </div>
           </a>
         </div>
 
 // const times = x => '*'.repeat(x - 1).split('*')
 
+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';
 export default {
   },
   components: {
     Wheelplanting,
+    // Wheelplanting1,
     // Business,
   },
   mounted () {
     window.addEventListener('scroll', () => {
       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' })
+      }
   },
 
   created () {
       urlData: { type: 'movement' },
       params: { pageNum: 1, pageSize: 4, topping: 1 }
     }).then(con => {
-      console.log(con, "124")
+      // console.log(con, "124")
       this.dynamiclist = con.records;
-      window.console.log(this.dynamiclist, "543");
+      // window.console.log(this.dynamiclist, "543");
     })
   }
 };
   .aarow_box {
     display: none;
   }
-  .aarow{
+  .aarow {
     display: none;
   }
   .home-case {
     border: none;
   }
 
-  .st4:hover .casetitle {
-    display: block;
-  }
+ .top-news{
+   margin-top: 110px;
+ }
+
   .aarow_box {
     width: 26px;
     height: 26px;
 
   padding-bottom: 100%;
   background-size: 100% 100% !important;
+  position: relative;
 
   margin: 0;
 }
-.casetitle {
+.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%;
+}
 .home-news {
   padding: 0 6px;
   margin-bottom: 12px;

vim.exe.stackdump

+Stack trace:
+Frame        Function    Args
+00180000000  0018005E0DE (00180230639, 00180230C39, 001802412F0, 000FFFFB740)
+00180000000  001800468F9 (CCCCCC00009CC1, FF783B00767676, D6D661000CC616, 000002AA9E0)
+00180000000  00180046932 (00180230616, 000000001E7, 001802412F0, 76767600CCCCCC)
+00180000000  00180043543 (00000000000, 00180000000, 7FF96E14D6DE, 001800004EC)
+00180000000  0018006BF01 (CCCCCC00009CC1, FF783B00767676, D6D661000CC616, 9E00B4005648E7)
+00180000000  0018006CD8E (00000000000, 00000000000, 00000000000, 00000000000)
+00180000000  0018006ED24 (00000000000, 00000000008, 0006C31E290, 00000000000)
+00000000001  00180137221 (0010065D540, 00000000008, 00000000000, 00000000000)
+00000000001  0018011DDBB (0010065D540, 00000000008, 00000000000, 00000000000)
+00000000001  001004F77E4 (00100575E0A, 00100663D08, 00000000000, 00100663D0C)
+00000000001  001005820F3 (00000000008, 00100664140, 00000000000, 00000000000)
+00000000001  00100576D86 (00000000000, 0005B19FA13, 000179783A0, 00000010000)
+00000000001  001005D4CEB (000FFFFCCD0, 001801D6A60, 00100000001, 00000000001)
+0060004F7A0  001005E218A (00000000020, 30001010000FF00, 00180047EB8, 00180046E80)
+000FFFFCCD0  00180047F24 (00000000000, 00000000000, 00000000000, 00000000000)
+00000000000  00180045A03 (00000000000, 00000000000, 00000000000, 00000000000)
+End of stack trace (more stack frames may be present)