首页精品展-神秘贵州

src/router/index.js

@@ -5,6 +5,14 @@ import Home from '../views/home'
 Vue.use(VueRouter)
 // keepAlive先全部为true 后期根据每个页面需求调整
 const routes = [
+  {
+    path: '/loopswiper',
+    name: 'loop',
+    component: () => import('@/views/home/components/swiper.vue'),
+    meta: {
+      keepAlive: true
+    }
+  },  
   {
     path: '/404',
     component: () => import('@/views/404.vue'),

src/views/home/components/Boutique.vue

@@ -3,16 +3,25 @@
     <el-carousel class="slider" autoplay arrow="nerver">
       <el-carousel-item>
         <div class="img-container">
-          <img src="@/assets/imgs/boutique/1.jpg" width="100%" />
+          <!-- <img src="@/assets/imgs/boutique/1.jpg" width="100%" /> -->
+          <m-smgz></m-smgz>
         </div>
       </el-carousel-item>
     </el-carousel>
+
+    <div class="bottom-carousel">
+      <m-swiper></m-swiper>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "Boutique",
+  components: {
+    mSmgz: () => import('./topic/smgz.vue'),
+    mSwiper: () => import('./swiper.vue')
+  },
   data() {
     return {};
   },
@@ -37,4 +46,16 @@ export default {
     object-fit: cover;
   }
 }
+.bottom-carousel {
+  width: 300px;
+  height: 150px;
+  position: absolute;
+  right: 46px;
+  bottom: 20px;
+  z-index: 9;
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>>
\ No newline at end of file

src/views/home/components/swiper.vue

+<template>
+  <div class="card-loop">
+    <transition-group name="list-complete" tag="div">
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        :class="`block${5 - index}`"
+        class="list-complete-item"
+        @click="openLink(item.id)"
+      >
+        <img :src="item.img" alt="图片" />
+        <!-- <span class="name">{{ item.name }}</span> -->
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import pic from "@/assets/imgs/boutique/1.jpg";
+
+export default {
+  data() {
+    return {
+      list: [],
+    };
+  },
+  methods: {
+    getLoopData() {
+      let arr = [];
+      for (let i = 0; i < 5; i++) {
+        arr.push({
+          id: i,
+          name: `card${i + 1}`,
+          url: `/#/`,
+          img: pic,
+        });
+      }
+      this.list = arr;
+
+      this.$nextTick(() => {
+        let _this = this;
+        setInterval(() => {
+          let list = _this.list;
+          let first = list[0];
+          //   Math.floor(Math.random() * 1000 + Math.random())
+          //   list.splice(list.length - 1, 1);
+          //   list.splice(0, 0, first);
+          list.splice(0, 1);
+          list.push(first);
+        }, 5000);
+      });
+    },
+  },
+  mounted() {
+    this.getLoopData();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-loop {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  height: 40%;
+  & > div {
+    width: 100%;
+    height: 100%;
+    &:hover {
+      & > div {
+        opacity: 0.3;
+      }
+    }
+  }
+  & > div > div {
+    // width: 240px;
+    // height: 380px;
+    width: 75%;
+    height: 80%;
+    // border-radius: 1%;
+    perspective: 100px;
+    transform-origin: 0 100%;
+    position: absolute;
+    bottom: 0;
+    &:hover {
+      // hover放大，突出显示
+      opacity: 1;
+      z-index: 100!important;
+      left: 0!important;
+      bottom: 0!important;
+      transform: scale(1.5) !important;
+      & > img {
+        cursor: pointer;
+        transform: rotate(0);
+      }
+      & > span {
+        display: block;
+      }
+    }
+    & > img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      transform: rotateY(-4deg);
+      transition: all 0.2s ease;
+      box-shadow: 0 0 12px 0px #ddd;
+      /* &:hover {
+        cursor: pointer;
+        transform: rotate(0);
+      } */
+    }
+    /* & > span {
+      position: absolute;
+      top: 20px;
+      left: 18px;
+      width: 1px;
+      font-size: 18px;
+      color: rgba(8, 255, 255, 1);
+      text-shadow: 1px 2px #0f0f0f;
+      word-break: break-all;
+      display: none;
+    } */
+
+    &.block5 {
+      //   transform: scale(1.1);
+      left: 0px;
+      bottom: 0%;
+      z-index: 5;
+      /* > img {
+        transform: rotateY(0);
+      } */
+    }
+    &.block4 {
+      //   transform: scale(1.2);
+      left: 8%;
+      bottom: 5%;
+      z-index: 4;
+    }
+    &.block3 {
+      //   transform: scale(1.3);
+      left: 16%;
+      bottom: 10%;
+      z-index: 3;
+    }
+    &.block2 {
+      //   transform: scale(1.4);
+      left: 24%;
+      bottom: 15%;
+      z-index: 2;
+    }
+    &.block1 {
+      //   transform: scale(1.5);
+      left: 32%;
+      bottom: 20%;
+      z-index: 1;
+      //   visibility: hidden;
+    }
+  }
+}
+.list-complete-item {
+  transition: all .3s ease;
+}
+.list-complete-enter, .list-complete-leave-to
+/* .list-complete-leave-active for below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

src/views/home/components/topic/smgz.vue

+<template>
+  <div class="m-smgz">
+    <div class="waterfall">
+      <img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
+    </div>
+    <div class="gzmap">
+      <img src="@/assets/imgs/topic/smgz/map.png" alt="" />
+    </div>
+    <div class="animal">
+      <img src="@/assets/imgs/topic/smgz/animal.png" alt="" />
+    </div>
+    <div class="stone">
+      <img src="@/assets/imgs/topic/smgz/stone.png" alt="" />
+    </div>
+    <div class="fish">
+      <img src="@/assets/imgs/topic/smgz/fish.png" alt="" />
+    </div>
+    <div class="gzregion">
+      <img src="@/assets/imgs/topic/smgz/region.png" alt="" />
+    </div>
+    <div class="archaeology">
+      <img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" />
+    </div>
+    <div class="evolution">
+      <img src="@/assets/imgs/topic/smgz/evolution.png" alt="" />
+    </div>
+    <div class="title-first">
+      <img src="@/assets/imgs/topic/smgz/smgz.png" alt="" />
+    </div>
+    <div class="title-last">
+        <img src="@/assets/imgs/topic/smgz/gswwg.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.m-smgz {
+  height: 100%;
+  height: 100%;
+  position: relative;
+  > div {
+    position: absolute;
+    > img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+  .stone {
+    height: 55px;
+    width: 740px;
+    bottom: 0;
+    right: 0;
+  }
+  .animal {
+    width: 1389px;
+    height: 412px;
+    bottom: 0;
+    left: 0;
+  }
+  .archaeology {
+    bottom: 55px;
+    right: 0;
+    width: 1336px;
+    height: 340px;
+  }
+  .waterfall {
+    top: 0;
+    left: 0;
+    width: 787px;
+    height: 100%;
+  }
+  .gzmap {
+    top: 0;
+    right: 0;
+    width: 1131px;
+    height: calc(100% - 55px);
+  }
+  .fish {
+    left: 50px;
+    top: 128px;
+    width: 512px;
+    height: 276px;
+  }
+  .gzregion {
+    bottom: 140px;
+    right: 0;
+    width: 515px;
+    height: 687px;
+  }
+  .evolution {
+    left: 530px;
+    bottom: 20px;
+    width: 510px;
+    height: 498px;
+  }
+  .title-first {
+    left: 400px;
+    top: 263px;
+    width: 359px;
+    height: 126px;
+  }
+  .title-last {
+    right: 700px;
+    top: 262px;
+    width: 418px;
+    height: 125px;
+  }
+}
+</style>