home

liuqimichale
1 parent 6382662c
Showing 9 changed files with 207 additions and 6 deletions
webintroduce/package.json
webintroduce/src/assets/images/home/banner1-icon.png
webintroduce/src/assets/images/home/banner2-icon.png
webintroduce/src/assets/images/home/bannerBg1.png
webintroduce/src/assets/images/home/bannerBg2.png
webintroduce/src/assets/images/home/bannerBg3.png
webintroduce/src/assets/images/home/blue.png
webintroduce/src/assets/images/home/green.png
webintroduce/src/views/home.vue
@@ -12,6 +12,7 @@
   "dependencies": {
     "js-cookie": "^2.2.0",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^2.5.4",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
 <template>
-    <div> 首页</div>
+  <div>
+    <swiper :options="swiperOption" ref="mySwiper" class="swiper-banner">
+      <!-- slides -->
+      <swiper-slide class="bannerBG1">
+        <div class="contentWidth pos-rel">
+          <p>全方位解决方案  全时空可视化</p>
+          <p>最懂你、任你停</p>
+          <img src="../assets/images/home/banner1-icon.png">
+        </div>
+
+      </swiper-slide>
+      <swiper-slide class="bannerBG2">
+        <div class="contentWidth pos-rel">
+          <p>云端saas服务，大并发高可用架构</p>
+          <p>为您的数字资产保驾护航 数据全方位呵护</p>
+          <img src="../assets/images/home/banner2-icon.png">
+        </div>
+      </swiper-slide>
+      <swiper-slide class="bannerBG3">
+        <div class="contentWidth pos-rel">
+          <p>物联改变时代 智慧停车 从现在开始</p>
+          <p>快速、高效、不停车、不拥堵</p>
+          <div class="parkpoint parkpoint1 pos-abs"></div>
+          <div class="parkpoint parkpoint2 pos-abs"></div>
+          <div class="parkpoint parkpoint3 pos-abs"></div>
+          <div class="parkpoint parkpoint4 pos-abs"></div>
+          <div class="parkpoint parkpoint5 pos-abs"></div>
+          <div class="parkpoint parkpoint6 pos-abs"></div>
+          <div class="parkpoint parkpoint7 pos-abs"></div>
+        </div>
+      </swiper-slide>
+
+      <!-- Optional controls -->
+      <div class="swiper-pagination" slot="pagination"></div>
+      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
+      <!--<div class="swiper-button-next" slot="button-next"></div>-->
+      <!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
+    </swiper>
+  </div>
 </template>
  
 <script>
+import 'swiper/dist/css/swiper.css'
+
+import {swiper, swiperSlide} from 'vue-awesome-swiper'
+
 export default {
   name: 'VHome',
-  data(){
+  components: {
+    swiper,
+    swiperSlide
+  },
+  data() {
     return {
+      swiperOption: {
+        pagination: {
+          el: ".swiper-pagination",
+          clickable:true
+        },
+        autoplay:{
+          enabled: true,
+          disableOnInteraction: false,
+          delay: 3000
+        },
+      }
     }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  mounted() {
+    // current swiper instance
+    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
+    console.log('this is current swiper instance object', this.swiper)
+    //this.swiper(7, 1000, false)
   }
 }
 </script>
  
 <style scoped lang="scss">
+  .swiper-banner {
+    height: 540px;
+  }
+  /*.swiper-pagination {*/
+    /*height: .23rem;*/
+    /*font-family: PingFangSC-Regular;*/
+    /*font-size: .156rem;*/
+    /*color: #fff;*/
+    /*letter-spacing: 0;*/
+    /*line-height: .12rem;*/
+    /*bottom: 0;*/
+  /*}*/
+  /*.swiper-pagination-bullet {*/
+    /*background: #fff;*/
+    /*opacity: 0.8;*/
+    /*height: 0.08rem;*/
+    /*border-radius: 0.06rem;*/
+    /*width: 0.08rem;*/
+    /*transition: all 0.2s; //可设置缓慢变化*/
+  /*}*/
+  /*.swiper-pagination-bullet-active {*/
+    /*width: 30px;*/
+  /*}*/
+  .bannerBG1{
+    background: url("../assets/images/home/bannerBg1.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: left;
+    color: #fff;
+    p:nth-of-type(1){
+      padding-top: 168px;
+      margin: 0 0   25px 0;
+      font-size: 44px;
+    }
+    p:nth-of-type(2){
+      font-size: 24px;
+    }
+    img{
+      position: absolute;
+      right: 0;
+      top:20px;
+    }
+  }
+  .bannerBG2{
+    background: url("../assets/images/home/bannerBg2.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: left;
+    color: #fff;
+    p:nth-of-type(1){
+      padding-top: 168px;
+      margin: 0 0   25px 0;
+      font-size: 44px;
+    }
+    p:nth-of-type(2){
+      font-size: 24px;
+    }
+    img{
+      position: absolute;
+      right: 0;
+      top:20px;
+    }
+  }
+  .bannerBG3{
+    background: url("../assets/images/home/bannerBg3.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: left;
+    color: #fff;
+    p:nth-of-type(1){
+      padding-top: 168px;
+      margin: 0 0   25px 0;
+      font-size: 44px;
+    }
+    p:nth-of-type(2){
+      font-size: 24px;
+    }
+    .parkpoint{
+      width: 25px;
+      height: 39px;
+    }
+    .parkpoint1{
+      background: url("../assets/images/home/green.png") no-repeat;
+      left: 100px;
+      top:50px;
+      animation: pointMove 3S infinite;
+    }
+    .parkpoint2{
+      background: url("../assets/images/home/green.png") no-repeat;
+      left: 200px;
+      top:150px;
+      animation: pointMove 3S infinite;
+    }
+    .parkpoint3{
+      background: url("../assets/images/home/green.png") no-repeat;
+      left: 300px;
+      top:250px;
+      animation: pointMove 3S infinite;
+    }
+    .parkpoint4{
+      background: url("../assets/images/home/green.png") no-repeat;
+      left: 70px;
+      top:350px;
+      animation: pointMove 3S infinite;
+    }
+    .parkpoint5{
+      background: url("../assets/images/home/green.png") no-repeat;
+      right: 70px;
+      top:400px;
+      animation: pointMove 3S infinite;
+    }
+    .parkpoint6{
+      background: url("../assets/images/home/green.png") no-repeat;
+      right: 70px;
+      bottom:50px;
+      animation: pointMove 3S infinite;
+    }
+
+    .parkpoint4{
+      background: url("../assets/images/home/green.png") no-repeat;
+      left: 70px;
+      bottom:350px;
+      animation: pointMove 3S infinite;
+    }
  
-  ul li{
-    @include  border-radius(100%);
-    background-color: #00ffff;
-    color: $baseColor;
   }
+  @keyframes pointMove {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100%{
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+
 </style>