驼驼-商城

htmldev/loan/package-lock.json

@@ -5637,6 +5637,23 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz",
+      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
+      "dev": true,
+      "requires": {
+        "ssr-window": "^2.0.0"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz",
+          "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q=",
+          "dev": true
+        }
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -12816,6 +12833,12 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-1.0.1.tgz",
+      "integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k=",
+      "dev": true
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -13174,6 +13197,16 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-4.5.1.tgz?cache=0&sync_timestamp=1618593864875&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fswiper%2Fdownload%2Fswiper-4.5.1.tgz",
+      "integrity": "sha1-7UOZjngM60eGEAecjSP9Ql7KY28=",
+      "dev": true,
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz",
@@ -13932,6 +13965,16 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600441301164&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha1-BVALUB/7P+yb9+uZhbz0roNg7Z4=",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",

htmldev/loan/package.json

@@ -40,6 +40,7 @@
     "sass-loader": "^10.0.2",
     "standard": "^14.3.4",
     "style-resources-loader": "^1.3.3",
+    "vue-awesome-swiper": "^3.1.3",
     "vant": "^2.10.9",
     "vue-router": "3.0.7",
     "vue-template-compiler": "^2.6.11",

htmldev/loan/src/main.js

@@ -5,6 +5,8 @@ import store from './store'
 import { toThousands } from './filter/toThousands'
 import refreshTitle from './utils/refreshTitle'
 
+require('./assets/styles/swiper@5.3.6.min.css')
+
 Vue.config.productionTip = false
 
 Vue.filter('toThousands', toThousands)

htmldev/loan/src/views/loan/index/child/banner.vue

@@ -0,0 +1,79 @@
+<template>
+  <swiper class="ybr-swiper-container"
+          :class="{'swiper-no-swiping': arrBanner.length === 1}"
+          :options="ybrSWOptions"
+          v-if="arrBanner.length">
+    <swiper-slide v-for="(item, index) in arrBanner"
+                  :key="index">
+      <img class="banner"
+           :src="item"
+           alt="">
+    </swiper-slide>
+    <div class="sw-pagination"
+         slot="pagination"></div>
+  </swiper>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
+export default {
+  name: 'banner',
+  components: {
+    swiper,
+    swiperSlide
+  },
+  props: {
+    arrBanner: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  computed: {
+    ybrSWOptions () {
+      return {
+        loop: true,
+        autoplay: this.arrBanner.length > 1,
+        pagination: {
+          el: '.sw-pagination',
+          clickable: true
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ybr-swiper-container {
+  .banner {
+    display: block;
+    width: 100%;
+    height: 147px;
+  }
+
+  ::v-deep .sw-pagination {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+    text-align: center;
+
+    .swiper-pagination-bullet {
+      margin: 0 3px !important;
+    }
+
+    .swiper-pagination-bullet {
+      width: 6px;
+      height: 6px;
+      opacity: 1;
+      background: #fff;
+    }
+
+    .swiper-pagination-bullet-active {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+</style>

htmldev/loan/src/views/loan/index/child/notice.vue

@@ -0,0 +1,97 @@
+<template>
+  <swiper class="sw-notice"
+          style="height: 44px;"
+          :options="swOptions"
+          v-if="message.length"
+          ref="myNotice">
+    <swiper-slide class="sw-slide"
+                  v-for="(item,index) in message"
+                  :key="index">
+      <div class="item">
+        <p>{{ item }}</p>
+      </div>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
+export default {
+  name: 'notice',
+  props: {
+    message: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    swOptions () {
+      return {
+        direction: 'vertical',
+        loop: true,
+        speed: 2000,
+        height: 44,
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false
+        }
+      }
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  beforeDestroy () {
+    this.$refs.myNotice && this.$refs.myNotice.swiper.destroy()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sw-notice {
+  width: 100%;
+  background: #fff;
+
+  &:before {
+    @include vertical-center;
+    left: 9px;
+    z-index: 1;
+    display: block;
+    content: '';
+    width: 18px;
+    height: 18px;
+    background: url("../image/voice@2x.png") center center/16px 16px no-repeat;
+  }
+
+  .sw-slide {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 41px);
+    height: 44px;
+    margin-left: 41px;
+
+    p {
+      width: 100%;
+      font-size: 14px;
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

htmldev/loan/src/views/loan/index/index.vue

@@ -1,10 +1,28 @@
 <template>
-  <div>marketing</div>
+  <div>
+    <!--轮播图-->
+    <Banner :arrBanner="arrBanner"/>
+    <!--消息轮播-->
+    <Notice :message="noticeArr"/>
+  </div>
 </template>
 
 <script>
+import Banner from './child/banner'
+import Notice from './child/notice'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    Banner,
+    Notice
+  },
+  data () {
+    return {
+      arrBanner: [],
+      noticeArr: ['187****7123成功获得贷款39万', '287****7123成功获得贷款39万']
+    }
+  }
 }
 </script>