web

.babelrc

@@ -6,7 +6,9 @@
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
       }
     }],
-    "stage-2"
+    
+    "stage-2",
+    // ["es2015", "stage-2"],
   ],
   "plugins": ["transform-vue-jsx"]
 }

build/webpack.base.conf.js

@@ -13,7 +13,7 @@ function resolve (dir) {
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
-    app: './src/main.js'
+    app: ["babel-polyfill",'./src/main.js']
   },
   output: {
     path: config.build.assetsRoot,
@@ -64,7 +64,9 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
-      }
+      },
+      
+      
     ]
   },
   node: {

package.json

@@ -13,6 +13,7 @@
     "animate.css": "^3.7.0",
     "element-ui": "^2.8.2",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-fullpage": "^2.0.5",
     "vue-router": "^3.0.1"
   },
@@ -24,11 +25,13 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "es6-promise": "^4.2.8",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -45,7 +48,7 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "swiper": "^2.7.6",
+    "swiper": "^4.5.0",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

src/App.vue

@@ -32,9 +32,23 @@ touch-action: none;
   text-align: center;
   color: #2c3e50;
 }
+a{
+  text-decoration: none
+}
 html{
    /* touch-action:none; */
 }
+body .el-table th.gutter {
+  display: table-cell !important;
+}
+
+body .el-table colgroup.gutter {
+  display: table-cell !important;
+}
+
+table {
+  width: 100% !important;
+}
 .el-submenu__title i{
   display: none;
 }
@@ -94,4 +108,65 @@ html{
   left: 9.6% !important;
 }
 
+/* .el-form--inline .el-form-item {
+    margin: 0 !important;
+} */
+.el-form-item__label{
+  width: 76px !important;
+    -moz-text-align-last: justify !important;
+    text-align-last: justify !important;
+    text-align: justify !important;
+  padding: 0 4px 0 0 !important;
+  font-size: 18px !important;
+  font-weight:300 !important;
+  color: rgba(0, 0, 0, 1) !important;
+}
+.el-form-item__label:before{
+  content: none !important;
+}
+.el-input__inner{
+  border: none !important;
+  border-bottom: 1px solid rgba(187, 187, 187, 1) !important;
+  outline: none !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  width: 160px !important;
+  font-size: 18px !important;
+    font-family: PingFangSC-Light !important;
+    font-weight: 300 !important;
+    color: rgba(0, 0, 0, 1) !important;
+    height: 25px !important;
+    line-height: 20px !important;
+}
+.el-input__inner::placeholder{
+  color: rgba(0, 0, 0, 1) !important;
+  font-weight: 400 !important;
+}
+.el-input--suffix .el-input__inner{
+  width: 160px !important;
+  font-size: 18px !important;
+  font-weight: 300 !important;
+}
+.el-select-dropdown__item{
+  font-size:16px !important;
+font-weight:400 !important;
+color:rgba(128,128,128,1) !important;
+line-height:22px !important;
+height: 40px !important;
+    line-height: 40px !important;
+}
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color:rgba(217,230,255,1) !important;
+    color:rgba(78,132,255,1) !important;
+}
+.el-select-dropdown{
+  box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2) !important;
+}
+.el-input__suffix{
+  right:0 !important;
+}
+.el-form-item{
+  display: flex;
+  margin: 0 !important;
+}
 </style>

src/components/commonComponents/icon.vue

@@ -9,43 +9,79 @@
           <div class="bar"></div>
           <p class="small_tittle">向精细化案场进发</p>
           <div class="mes_con">
-            <div class="con_fir">
-              <div class="name_con">
-                <div class="con_tittle">姓名</div>
-                <input type="text" class="inp">
+            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" class="demo-form-inline">
+              <div class="con_fir">
+                <div class="name_con">
+                  <!-- <div class="con_tittle">姓名</div>
+                  <input type="text" class="inp">-->
+                  <el-form-item label="姓名" prop="name">
+                    <el-input v-model="ruleForm.name"></el-input>
+                  </el-form-item>
+                </div>
+                <div class="phone_con">
+                  <!-- <div class="con_tittle">手机</div>
+                  <input type="text" class="inp">-->
+                  <el-form-item label="手机" prop="phone">
+                    <el-input v-model="ruleForm.phone"></el-input>
+                  </el-form-item>
+                </div>
               </div>
-              <div class="phone_con">
-                <div class="con_tittle">手机</div>
+              <div class="con_sec">
+                <div class="name_con">
+                  <div class="con_tittle">城市</div>
+                  <input type="text" class="inp" v-model="city">
+                </div>
+                <!-- <div class="phone_con">
+                <div class="con_tittle">体验项目</div>
                 <input type="text" class="inp">
+                </div>-->
+                <div class="phone_con">
+                  <el-form-item label="体验项目" prop="region">
+                    <el-select v-model="ruleForm.region" placeholder="请选择">
+                      <el-option label="全渠道在线平台" value="online"></el-option>
+                      <el-option label="二手房管理平台" value="secondHouse"></el-option>
+                      <el-option label="AI迎宾判客系统" value="AIwelcome"></el-option>
+                      <el-option label="智慧大屏机" value="bigscreen"></el-option>
+                      <el-option label="全案发布平台" value="release"></el-option>
+                      <el-option label="微楼书" value="micro"></el-option>
+                      <el-option label="智慧社区" value="community"></el-option>
+                      <el-option label="城的空间" value="city"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
               </div>
-            </div>
-            <div class="con_sec">
-              <div class="name_con">
-                <div class="con_tittle">城市</div>
-                <input type="text" class="inp">
+              <div class="con_third">
+                <div class="con_tittle">公司</div>
+                <input type="text" class="company_inp" v-model="company">
               </div>
-              <div class="phone_con">
-                <div class="con_tittle">体验项目</div>
-                <input type="text" class="inp">
+              <div class="btn" @click="submitForm('ruleForm')">
+                <div class="submit">提交</div>
               </div>
-            </div>
-            <div class="con_third">
-              <div class="con_tittle">公司</div>
-              <input type="text" class="company_inp">
-            </div>
-          </div>
-          <div class="btn" @click="submit">
-            <div class="submit">提交</div>
+              <div class="cancel" @click="cancel">
+                <img src="../../assets/image/logoicon/cancel.png" alt class="cancelImg">
+              </div>
+            </el-form>
           </div>
         </div>
-        <div class="cancel" @click="cancel">
-          <img src="../../assets/image/logoicon/cancel.png" alt="" class="cancelImg">
+      </div>
+    </div>
+    <div class="submit_mask" v-show="success">
+      <div>
+        <div class="submit_bullet">
+        <div class="submit_mes">
+          <div class="success_logo"></div>
+          <p class="success_tittle">提交成功!</p>
+          <p class="success_con1">感谢您对我们的信任</p>
+          <p class="success_con2">稍后将有工作人员与您联系, 请保持手机畅通</p>
         </div>
       </div>
+      <div class="success_cancel" @click="cancel_success">
+        <img src="../../assets/image/logoicon/cancel.png" alt class="cancelImg">
+      </div>
+      </div>
     </div>
   </div>
 </template>
-
 <script>
 export default {
   name: "to-top",
@@ -54,48 +90,84 @@ export default {
       scrollTop: '',
       toTopIsShow: false,
       mask: false,
+      success: false,
+      city:'',
+      company:'',
+      ruleForm: {
+        name: '',
+        region: '',
+        phone: '',
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入您的姓名', trigger: 'blur' },
+          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入手机号', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择一个想要体验的项目', trigger: 'change' }
+        ],
+      }
     }
   }
   ,
   methods: {
-     handleScroll () {
-          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-          if(this.scrollTop>500){
-            this.toTopIsShow=true
-          }else{
-              this.toTopIsShow= false
-          }
-        },
-        toTop(){
-          let timer=null,_that=this;
-          cancelAnimationFrame(timer)
-          timer=requestAnimationFrame(function fn(){
-            if(_that.scrollTop>0){
-              _that.scrollTop-=200;
-              document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
-              timer=requestAnimationFrame(fn)
-            }else {
-              cancelAnimationFrame(timer);
-              _that.toTopIsShow=false;
-            }
-          })
-        },
+    handleScroll () {
+      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      if (this.scrollTop > 500) {
+        this.toTopIsShow = true
+      } else {
+        this.toTopIsShow = false
+      }
+    },
+    toTop () {
+      let timer = null, _that = this;
+      cancelAnimationFrame(timer)
+      timer = requestAnimationFrame(function fn () {
+        if (_that.scrollTop > 0) {
+          _that.scrollTop -= 200;
+          document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
+          timer = requestAnimationFrame(fn)
+        } else {
+          cancelAnimationFrame(timer);
+          _that.toTopIsShow = false;
+        }
+      })
+    },
     news () {
-      this.mask = true
+      this.mask = true;
+      this.ruleForm.name = '';
+      this.ruleForm.phone = '';
+      this.city = '';
+      this.ruleForm.region = '';
+      this.company = '';
     },
-    cancel() {
-        this.mask = false
+    cancel () {
+      this.mask = false
     },
-    submit() {
-        this.mask = false
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.success = true,
+            this.mask = false
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    cancel_success () {
+      this.success = false
     }
   },
   mounted () {
     window.addEventListener('scroll', this.handleScroll);
   },
-  destroyed(){
-        window.removeEventListener('scroll', this.handleScroll)
-      }
+  destroyed () {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
 }
 </script>
 
@@ -136,13 +208,59 @@ export default {
   align-items: center;
   justify-content: center;
 }
-.mes {
+.submit_mask {
+  width: 100%;
+  height: 100%;
+  padding-top: 59px;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bullet {
   width: 760px;
   height: 480px;
   background: url("../../assets/image/logoicon/mask.png") no-repeat center;
   background-size: 100%;
   text-align: center;
 }
+.submit_bullet {
+  width: 760px;
+  height: 480px;
+  background: url("../../assets/image/logoicon/mask.png") no-repeat center;
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.success_logo {
+  width: 108px;
+  height: 108px;
+  background-color: red;
+  background: url("../../assets/image/logoicon/success.png") no-repeat center;
+  background-size: 100%;
+  margin: auto;
+}
+.success_tittle {
+  font-size: 26px;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 1);
+  line-height: 37px;
+  margin: 20px 0 10px 0;
+}
+.success_con1,
+.success_con2 {
+  font-size: 16px;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(102, 102, 102, 1);
+  line-height: 22px;
+}
+
 .tittle {
   padding-top: 40px;
   font-size: 30px;
@@ -178,6 +296,10 @@ export default {
   text-align-last: justify;
   text-align: justify;
   margin-right: 4px;
+  font-size: 18px;
+
+  font-weight: 300;
+  color: rgba(0, 0, 0, 1);
 }
 .con_fir,
 .con_sec,
@@ -187,27 +309,27 @@ export default {
   justify-content: space-between;
 }
 .inp {
-  font-size:18px;
-font-family:PingFangSC-Light;
-font-weight:300;
-color:rgba(0,0,0,1);
+  font-size: 18px;
+  font-family: PingFangSC-Light;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 1);
   width: 160px;
   border: none;
   border-bottom: 1px solid rgba(187, 187, 187, 1);
   outline: none;
 }
 .company_inp {
-  font-size:18px;
-font-family:PingFangSC-Light;
-font-weight:300;
-color:rgba(0,0,0,1);
+  font-size: 18px;
+  font-family: PingFangSC-Light;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 1);
   width: 462px;
   border: none;
   border-bottom: 1px solid rgba(187, 187, 187, 1);
   outline: none;
 }
 .btn {
-  margin: 63px auto 43px auto;
+  margin: 43px auto;
   width: 169px;
   height: 48px;
   background: rgba(78, 132, 255, 1);
@@ -223,10 +345,11 @@ color:rgba(0,0,0,1);
   color: rgba(255, 255, 255, 1);
   cursor: pointer;
 }
-.cancel {
+.cancel,
+.cancel_success {
   /* background: url("../../assets/image/logoicon/cancel.png") no-repeat;
   background-size: 100% 100%; */
-  margin: 70px auto 0 auto;
+  margin: 90px auto 0 auto;
   width: 40px;
   height: 40px;
   border-radius: 50%;
@@ -239,7 +362,10 @@ color:rgba(0,0,0,1);
   /* font-size: 16px; */
   cursor: pointer;
 }
-.cancelImg{
+.success_cancel{
+  margin: 32px auto 0 auto;
+}
+.cancelImg {
   width: 80px;
   height: 80px;
   border-radius: 50%;

src/components/pages/index.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="section" :style="{'height':offsetheight+'px'}">
       <headerTab></headerTab>
+      <icon></icon>
       <div class="container" :style="{'transform': 'translate3d(0px,-'+ fullPage*offsetheight +'px, 0px)'}">
         <div class="page-1 page fp-auto-height">
           <div class="part-1" :class="page1 == true ? 'animated fadeIn5' :''">
@@ -23,6 +24,9 @@
                 <div class="frame3"></div>
                 <div class="frame4"></div>
               </div>
+              <!-- <span class="arrow-left" @click="arrow_left()"></span>
+              <span class="arrow-right" @click="arrow_right()"></span>-->
+
               <div class="swiper-container">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide red-slide" style="width:960px;">
@@ -102,6 +106,8 @@
                     </div>
                   </div>
                 </div>
+                <!-- <div class="swiper-button-prev"></div>
+                <div class="swiper-button-next"></div>-->
                 <div class="pagination"></div>
               </div>
             </div>
@@ -112,28 +118,36 @@
             <div class="produce">
               <p class="title">产品简介</p>
               <div class="peoduce_top">
-                <div class="list first" :class="page3 == true ? 'animation fadeIn1' :''">
-                  <p class="list-name">AI迎宾判客系统</p>
-                  <img src="../../assets/image/home/produce/Group45.png" alt style="margin-top: 10.5%;">
-                  <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
-                </div>
-                <div class="list" :class="page3 == true ? 'animation fadeIn2' :''">
-                  <p class="list-name">智慧大屏机</p>
-                  <img src="../../assets/image/home/produce/Group46.png" alt>
-                  <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
-                </div>
+                <router-link to="../productCenter/AIwelcome" class="list first" :class="page3 == true ? 'animation fadeIn1' :''">
+                  <div>
+                    <p class="list-name">AI迎宾判客系统</p>
+                    <img src="../../assets/image/home/produce/Group45.png" alt style="margin-top: 10.5%;">
+                    <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
+                  </div>
+                </router-link>
+                <router-link to="../productCenter/bigscreen" class="list" :class="page3 == true ? 'animation fadeIn2' :''">
+                  <div>
+                    <p class="list-name">智慧大屏机</p>
+                    <img src="../../assets/image/home/produce/Group46.png" alt>
+                    <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
+                  </div>
+                </router-link>
               </div>
               <div class="produce_bottom">
-                <div class="list" :class="page3 == true ? 'animation fadeIn3' :''" >
-                  <p class="list-name">银城慧家APP</p>
-                  <img src="../../assets/image/home/produce/Group47.png" alt style="margin-top: 10.5%;">
-                  <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
-                </div>
-                <div class="list" :class="page3 == true ? 'animation fadeIn4' :''">
-                  <p class="list-name">全楼盘</p>
-                  <img src="../../assets/image/home/produce/Group48.png" alt>
-                  <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
-                </div>
+                <router-link to="../productCenter/community" class="list" :class="page3 == true ? 'animation fadeIn3' :''">
+                  <div>
+                    <p class="list-name">银城慧家APP</p>
+                    <img src="../../assets/image/home/produce/Group47.png" alt style="margin-top: 10.5%;">
+                    <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
+                  </div>
+                </router-link>
+                <router-link to="../productCenter/online" class="list" :class="page3 == true ? 'animation fadeIn4' :''">
+                  <div>
+                    <p class="list-name">全楼盘</p>
+                    <img src="../../assets/image/home/produce/Group48.png" alt>
+                    <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
+                  </div>
+                </router-link>
               </div>
             </div>
           </div>
@@ -169,37 +183,39 @@
                   </div>
                 </div>
               </div>
+              <div class="swiper-button-prev"></div>
+              <div class="swiper-button-next"></div>
             </div>
           </div>
         </div>
         <div class="page-5 fp-auto-height">
           <div class="page-5-con">
             <p class="title">我们的客户</p>
-          <div class="logo-box">
-            <div>
-              <img src="../../assets/image/home/logo/Group29.png" alt>
-              <img src="../../assets/image/home/logo/Group32.png" alt>
-              <img src="../../assets/image/home/logo/Group35.png" alt>
-              <img src="../../assets/image/home/logo/Group40.png" alt>
-              <img src="../../assets/image/home/logo/Group41.png" alt>
-            </div>
-            <div>
-              <img src="../../assets/image/home/logo/Group30.png" alt>
-              <img src="../../assets/image/home/logo/Group33.png" alt>
-              <img src="../../assets/image/home/logo/Group36.png" alt>
-              <img src="../../assets/image/home/logo/Group39.png" alt>
-              <img src="../../assets/image/home/logo/Group42.png" alt>
-            </div>
+            <div class="logo-box">
+              <div>
+                <img src="../../assets/image/home/logo/Group29.png" alt>
+                <img src="../../assets/image/home/logo/Group32.png" alt>
+                <img src="../../assets/image/home/logo/Group35.png" alt>
+                <img src="../../assets/image/home/logo/Group40.png" alt>
+                <img src="../../assets/image/home/logo/Group41.png" alt>
+              </div>
+              <div>
+                <img src="../../assets/image/home/logo/Group30.png" alt>
+                <img src="../../assets/image/home/logo/Group33.png" alt>
+                <img src="../../assets/image/home/logo/Group36.png" alt>
+                <img src="../../assets/image/home/logo/Group39.png" alt>
+                <img src="../../assets/image/home/logo/Group42.png" alt>
+              </div>
 
-            <div>
-              <img src="../../assets/image/home/logo/Group31.png" alt>
-              <img src="../../assets/image/home/logo/Group34.png" alt>
-              <img src="../../assets/image/home/logo/Group37.png" alt>
-              <img src="../../assets/image/home/logo/Group38.png" alt>
-              <img src="../../assets/image/home/logo/Group43.png" alt>
+              <div>
+                <img src="../../assets/image/home/logo/Group31.png" alt>
+                <img src="../../assets/image/home/logo/Group34.png" alt>
+                <img src="../../assets/image/home/logo/Group37.png" alt>
+                <img src="../../assets/image/home/logo/Group38.png" alt>
+                <img src="../../assets/image/home/logo/Group43.png" alt>
+              </div>
             </div>
           </div>
-          </div>
           <footerNav class="foot"></footerNav>
         </div>
       </div>
@@ -212,20 +228,13 @@
 
 
 <script>
-import Swiper from '../../static/js/idangerous.swiper.min.js';
+
+import Swiper from 'swiper';
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
-// window.onload = function() {
-//   var mySwiper = new Swiper('.swiper-container', {
-//       centeredSlides: true,
-//       slidesPerView: 'auto',
-//       loop: true
-//     })
-// }
-
+import icon from "@/components/commonComponents/icon";
 export default {
-  components: { headerTab, footerNav, Swiper },
+  components: { headerTab, footerNav, Swiper, icon },
   data () {
     return {
       bannerList: [
@@ -256,29 +265,42 @@ export default {
     };
   },
   mounted () {
-
-
-
-
     //在元素加载完毕的时候添加鼠标滑动事件
     //
     if (document.addEventListener) {
       document.addEventListener("DOMMouseScroll", this.scroll, false);
+      document.addEventListener('wheel', this.scroll, false);
+      document.addEventListener('mousewheel', this.scroll, false);
+    }else{
+      document.attachEvent('onmousewheel', this.scroll);
     }
     window.onmousewheel = document.onmousewheel = this.scroll;
     var mySwiper = new Swiper('.swiper-container', {
-      centeredSlides: true,
       slidesPerView: 'auto',
       loop: true,
-      autoplay: 4000,
-      // grabCursor : true,
+      // autoplay: 4000,
+      autoplay: {
+        delay: 4000,
+        disableOnInteraction: false,
+      },
+      paginationClickable: true,
+      slideToClickedSlide: true,
+      centeredSlides: true,
     });
     var mySwiper = new Swiper('.page-4-swiper-container', {
       centeredSlides: true,
       slidesPerView: 3,
       loop: true,
-      autoplay: 4000,
-      grabCursor : true,
+      // autoplay: 4000,
+      autoplay: {
+        delay: 4000,
+        disableOnInteraction: false,
+      },
+      grabCursor: true,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
     });
   },
   methods: {
@@ -299,10 +321,8 @@ export default {
       if (this.fullPageNum) {
         return false;
       }
-      //
-      //   e.wheelDelta为负数时向下滑动
-      //
-      if (e.wheelDelta < 0) {
+      if (e.wheelDelta < 0 || -e.deltaY < 0 || -e.detail < 0) {
+        // console.log("下滑")
         if (this.fullPage >= 4) {
           return false;
         }
@@ -318,6 +338,7 @@ export default {
         //   否则就是向上划
         //
       } else {
+        // console.log("上划")
         if (this.fullPage <= 0) {
           return false;
         }
@@ -343,17 +364,20 @@ export default {
       } else {
         this.page1 = false;
       }
-    }
-  }
+    },
+  },
+  beforeDestroy(){
+    console.log(this.scroll,"aaa")
+    window.removeEventListener("DOMMouseScroll",this.scroll)
+    window.removeEventListener("wheel",this.scroll)
+    window.removeEventListener("mousewheel",this.scroll)
+  },
 };
 </script>
 <style scoped lang="less">
-@import "../../static/css/idangerous.swiper.css";
 .el-carousel__item h3 {
   color: #475669;
   font-size: 14px;
-  // opacity: 0.75;
-  // line-height: 200px;
   margin: 0;
 }
 
@@ -458,11 +482,11 @@ export default {
       width: 100%;
       margin: auto;
       position: absolute;
-      bottom: 2%;
+      bottom: 1%;
       // padding: 8.5% 0 3% 0;
       .title {
         font-size: 56px;
-        margin: 2%;
+        margin: 1%;
         // margin-top: 7%;
         // padding-top: 5%;
         color: #fff;
@@ -474,26 +498,25 @@ export default {
         width: 50%;
         min-width: 540px;
         margin: 20px auto;
-        .peoduce_top{
+        .peoduce_top {
           display: flex;
           // justify-content: space-between;
         }
-        .produce_bottom{
+        .produce_bottom {
           display: flex;
           // justify-content: space-between;
         }
         .list {
-          
-              width: 54.48%;
-    /* height: 23.81%; */
-    background-color: #fff;
-    border-radius: 4px;
-    padding: 0 4%;
-    margin: 0.5%;
+          width: 54.48%;
+          /* height: 23.81%; */
+          background-color: #fff;
+          border-radius: 4px;
+          padding: 0 4%;
+          margin: 0.5%;
           .list-name {
             color: #03033f;
             border-bottom: 1.5px dashed #040445;
-            padding: 7.5% 0 4% 0;
+            padding: 2.5% 0 2% 0;
             font-size: 30px;
           }
           img {
@@ -531,12 +554,28 @@ export default {
       // background-size:
       .page-4-swiper-container {
         width: 87%;
-
         overflow: hidden;
+        position: relative;
         .swiper-wrapper {
-          margin: auto;
+          // margin: auto;
           width: 87%;
-          overflow: hidden;
+          // overflow: hidden;
+        }
+        .swiper-button-prev{
+          width: 27%;
+          height: 45%;
+          background-color: #fff;
+          position: absolute;
+          top: 41%;
+          opacity: 0;
+        }
+        .swiper-button-next{
+          width: 27%;
+          height: 45%;
+          background-color: #fff;
+          position: absolute;
+          top: 41%;
+          opacity: 0;
         }
       }
       .opt {
@@ -560,37 +599,45 @@ export default {
       }
       .swiper-slide {
         opacity: 1;
+        text-align: center;
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
+        transition: 300ms;
         /* height: 100%; */
         -webkit-transition: 300ms;
         -moz-transition: 300ms;
         -ms-transition: 300ms;
         -o-transition: 300ms;
         transition: 300ms;
-        -webkit-transform: scale(0.6735);
-        -moz-transform: scale(0.6735);
-        -ms-transform: scale(0.6735);
-        -o-transform: scale(0.6735);
-        transform: scale(0.6735);
+        // -webkit-transform: scale(0.6735);
+        // -moz-transform: scale(0.6735);
+        // -ms-transform: scale(0.6735);
+        // -o-transform: scale(0.6735);
+        // transform: scale(0.6735);
       }
-      .swiper-slide-visible {
-        opacity: 1;
-        -webkit-transform: scale(0.6735);
-        -moz-transform: scale(0.6735);
-        -ms-transform: scale(0.6735);
-        -o-transform: scale(0.6735);
+      .swiper-slide:not(.swiper-slide-active) {
         transform: scale(0.6735);
       }
+      // .swiper-slide-visible {
+      //   opacity: 1;
+      //   -webkit-transform: scale(0.6735);
+      //   -moz-transform: scale(0.6735);
+      //   -ms-transform: scale(0.6735);
+      //   -o-transform: scale(0.6735);
+      //   transform: scale(0.6735);
+      // }
 
-      .swiper-slide-active {
-        /* top: 0; */
-        opacity: 1;
-        -webkit-transform: scale(1);
-        -moz-transform: scale(1);
-        -ms-transform: scale(1);
-        -o-transform: scale(1);
-        transform: scale(1);
-        z-index: 1000;
-      }
+      // .swiper-slide-active {
+      //   /* top: 0; */
+      //   opacity: 1;
+      //   -webkit-transform: scale(1);
+      //   -moz-transform: scale(1);
+      //   -ms-transform: scale(1);
+      //   -o-transform: scale(1);
+      //   transform: scale(1);
+      //   z-index: 1000;
+      // }
 
       // .blue-slide {
 
@@ -654,27 +701,27 @@ export default {
     height: 100%;
     background-size: 100% 100%;
     overflow: hidden;
-    .page-5-con{
+    .page-5-con {
       // margin: 13%;
       position: absolute;
-    bottom: 30%;
+      bottom: 30%;
       .title {
-      font-size: 56px;
-      margin-bottom: 30px;
-      color: #fff;
-    }
-    .logo-box {
-      width: 65.63%;
-      min-width: 980px;
-      margin: auto;
-      // margin: 0.63% auto;
-      img {
-        width: 13.14%;
-        min-width: 183px;
-        height: 19.7%;
-        margin: 0.39%;
+        font-size: 56px;
+        margin-bottom: 30px;
+        color: #fff;
+      }
+      .logo-box {
+        width: 65.63%;
+        min-width: 980px;
+        margin: auto;
+        // margin: 0.63% auto;
+        img {
+          width: 13.14%;
+          min-width: 183px;
+          height: 19.7%;
+          margin: 0.39%;
+        }
       }
-    }
     }
   }
 }

src/components/pages/productCenter/city.vue

@@ -343,7 +343,7 @@ letter-spacing:7px;
 .city_content {
   background: url(../../../assets/image/program/bg.jpg) no-repeat center;
   background-size: 100%;
-  margin-top: 174px;
+  padding-top: 174px;
   .product_int {
     margin: 0 auto;
     padding: 80px 0;

src/components/pages/productCenter/community.vue

@@ -323,10 +323,10 @@ export default {
   width: 100%;
   // height: 100%;
   background-color: red;
-  background: url(../../../assets/image/yincheng/bg.jpg) no-repeat center;
-  background-size: 100% 100%;
+  background: url('../../../assets/image/yincheng/bg.jpg') no-repeat center 100%;
+  background-size: 100%;
   .community_content {
-    margin: 0 auto 70px auto;
+    margin: 0 auto;
     padding: 140px 0;
     width: 960px;
     // display: flex;

src/components/pages/solution/solution.vue

@@ -383,38 +383,37 @@ export default {
     };
   },
   methods: {
-    backTop () {
-      let that = this
-      let timer = setInterval(() => {
-        let ispeed = Math.floor(-that.scrollTop / 5)
-        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
-        if (that.scrollTop === 0) {
-          clearInterval(timer)
-        }
-      }, 16)
-  },
-
-  scrollToTop () {
-    let that = this
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-    that.scrollTop = scrollTop
-    if (that.scrollTop > 60) {
-      that.btnFlag = true
-    } else {
-      that.btnFlag = false
-    }
-  },
-
-
+  //   backTop () {
+  //     let that = this
+  //     let timer = setInterval(() => {
+  //       let ispeed = Math.floor(-that.scrollTop / 5)
+  //       document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+  //       if (that.scrollTop === 0) {
+  //         clearInterval(timer)
+  //       }
+  //     }, 16)
+  // },
 
+  // scrollToTop () {
+  //   let that = this
+  //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+  //   that.scrollTop = scrollTop
+  //   if (that.scrollTop > 60) {
+  //     that.btnFlag = true
+  //   } else {
+  //     that.btnFlag = false
+  //   }
+  // },
     handleClick (tab, event) {
-      console.log(tab, event);
-      if (this.activeName === "second") {
+      console.log("111",tab, event);
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      if (this.activeName == "second") {
         this.title = "智慧社区服务平台 ";
         this.desc = "一个全系平台，四大集群系统";
         this.desc2 = "";
         this.engdesc = "A FULL SYSTEM PLATFORM, FOUR CLUSTERS SYSTEM";
-      } else if (this.activeName === "third") {
+      } else if (this.activeName == "third") {
         this.title = "按需定制";
         this.desc = "软件开发 我们更懂你 ";
         this.desc2 = "我们提供的就是您想要的服务";
@@ -439,10 +438,10 @@ export default {
     }
   },
   mounted(){
-    window.addEventListener('scroll', this.scrollToTop)
+    // window.addEventListener('scroll', this.scrollToTop)
   },
   destroyed () {
-  window.removeEventListener('scroll', this.scrollToTop)
+  // window.removeEventListener('scroll', this.scrollToTop)
 },
 };
 </script>

src/main.js

@@ -2,24 +2,23 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import ElementUI from 'element-ui'
+// import 'babel-polyfill'
+// import promise from 'es6-promise'
 import 'element-ui/lib/theme-chalk/index.css'
 import App from './App'
 import router from './router'
-
+import 'swiper/dist/css/swiper.css';
 Vue.config.productionTip = false
 
 import animate from 'animate.css'
-import 'vue-fullpage/vue-fullpage.css'
-import VueFullpage from 'vue-fullpage'
-Vue.use(VueFullpage)
-
+// import 'vue-fullpage/vue-fullpage.css'
+// import VueFullpage from 'vue-fullpage'
+// Vue.use(VueFullpage)
 Vue.use(animate)
 
-
-
 Vue.use(ElementUI)
-
-
+// require('es6-promise').polyfill()
+// promise.polyfill()
  
 // new Vue({
 //   el: '#app',

src/router/index.js

@@ -128,5 +128,13 @@ export default new Router({
       component: aboutUs
     }
 
-  ]
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+        return savedPosition
+    } else {
+        return { x: 0, y: 0 }
+    }
+}
 })
+