首页精品展动画

src/views/home/components/Boutique.vue

 <template>
   <div class="boutique">
-    <el-carousel class="slider" autoplay arrow="nerver">
-      <el-carousel-item>
+    <el-carousel
+      class="slider"
+      autoplay
+      arrow="nerver"
+      @change="handleCarouselChange"
+      :interval="5000"
+      ref="cur_carousel"
+    >
+      <!-- <el-carousel-item>
         <div class="img-container">
-          <!-- <img src="@/assets/imgs/boutique/1.jpg" width="100%" /> -->
           <m-smgz></m-smgz>
         </div>
       </el-carousel-item>
+      <el-carousel-item>
+        <div class="img-container">
+          <m-jyycc></m-jyycc>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="img-container">
+          <m-ylgdyw></m-ylgdyw>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="img-container">
+          <m-sdcs></m-sdcs>
+        </div>
+      </el-carousel-item> -->
+      <el-carousel-item v-for="(node, i) in topics" :key="i">
+        <div class="img-container">
+          <component :is="node.component" v-if="node.show"></component>
+        </div>
+      </el-carousel-item>
     </el-carousel>
 
     <div class="bottom-carousel">
-      <m-swiper></m-swiper>
+      <m-swiper :index.sync="curIndex" @setSwiper="setCarouselIndex"></m-swiper>
     </div>
   </div>
 </template>
 
 <script>
+import mSmgz from "./topic/smgz.vue"
+import mJyycc from './topic/jyycc.vue'
+import mYlgdyw from './topic/ylgdyw.vue'
+import mSdcs from './topic/sdcs.vue'
+
 export default {
   name: "Boutique",
   components: {
-    mSmgz: () => import('./topic/smgz.vue'),
-    mSwiper: () => import('./swiper.vue')
+    mSmgz,
+    mJyycc,
+    mYlgdyw,
+    mSdcs,
+    mSwiper: () => import("./swiper.vue"),
   },
   data() {
-    return {};
+    return {
+      curIndex: 0,
+      topics: [
+        {
+        component: mSmgz,
+        show: true,
+      },
+      {
+        component: mJyycc,
+        show: true,
+      },
+      {
+        component: mYlgdyw,
+        show: true,
+      },
+      {
+        component: mSdcs,
+        show: true,
+      },
+      ],
+    };
+  },
+  methods: {
+    handleCarouselChange(ix) {
+      console.log('iiiiiiiiiiiiiiiiii:', ix)
+      this.curIndex = ix
+      this.topics[ix].show = false;
+      this.$nextTick(() => {
+        this.topics[ix].show = true;
+      });
+    },
+    setCarouselIndex(i) {
+      this.handleCarouselChange(i)
+
+      let em = this.$refs['cur_carousel']
+      em.setActiveItem(i)
+    }
   },
 };
 </script>
@@ -37,10 +107,10 @@ export default {
   height: 100vh;
   width: 100%;
 }
-.img-container{
+.img-container {
   width: 100%;
   height: 100%;
-  img{
+  img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -58,4 +128,5 @@ export default {
     height: 100%;
   }
 }
-</style>>
\ No newline at end of file
+</style>
+>

src/views/home/components/swiper.vue

@@ -6,9 +6,8 @@
         :key="item.id"
         :class="`block${5 - index}`"
         class="list-complete-item"
-        @click="openLink(item.id)"
       >
-        <img :src="item.img" alt="图片" />
+        <img :src="item.img" alt="图片"  @click.stop="changeTopic(item.id)"/>
         <!-- <span class="name">{{ item.name }}</span> -->
       </div>
     </transition-group>
@@ -16,44 +15,74 @@
 </template>
 
 <script>
-import pic from "@/assets/imgs/boutique/1.jpg";
+import pic0 from "@/assets/imgs/boutique/1.jpg";
+import pic1 from "@/assets/imgs/topic/jyycc/jyycc.jpg";
+import pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.png";
+import pic3 from "@/assets/imgs/topic/sdcs/sdcs.png";
 
 export default {
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
-      list: [],
+      list: [
+        {
+          id: 0,
+          name: `card1`,
+          url: `/#/`,
+          img: pic0,
+        },
+        {
+          id: 1,
+          name: `card2`,
+          url: `/#/`,
+          img: pic1,
+        },
+        {
+          id: 2,
+          name: `card3`,
+          url: `/#/`,
+          img: pic2,
+        },
+        {
+          id: 3,
+          name: `card4`,
+          url: `/#/`,
+          img: pic3,
+        },
+      ],
     };
   },
+  watch: {
+    index(cur) {
+      this.handleChange(cur);
+    },
+  },
   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;
+    handleChange(i) {
+      let list = this.list;
 
-      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);
-      });
+      let first = list[0];
+      if (i === 0) {
+        i = 4
+      }
+      
+      let last = list.splice(0, Math.abs(i - first.id));
+      list.splice(list.length, 0, ...last)
     },
+    changeTopic(i) {
+      this.$emit('setSwiper', i)
+    }
   },
-  mounted() {
-    this.getLoopData();
-  },
+  /* mounted() {
+    setTimeout(() => {
+      this.animate();
+    }, 6000);
+  }, */
 };
 </script>
 
@@ -88,9 +117,9 @@ export default {
     &:hover {
       // hover放大，突出显示
       opacity: 1;
-      z-index: 100!important;
-      left: 0!important;
-      bottom: 0!important;
+      z-index: 100 !important;
+      left: 0 !important;
+      bottom: 0 !important;
       transform: scale(1.5) !important;
       & > img {
         cursor: pointer;
@@ -161,7 +190,7 @@ export default {
   }
 }
 .list-complete-item {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 .list-complete-enter, .list-complete-leave-to
 /* .list-complete-leave-active for below version 2.1.8 */ {

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

+<template>
+    <div class="m-jyycc">
+      <div class="banner">
+        <img src="@/assets/imgs/topic/jyycc/jyycc.jpg" alt="" />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {};
+  </script>
+  
+  <style lang="scss" scoped>
+  .m-jyycc {
+    .banner {
+      width: 100%;
+      height: 100%;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file

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

+<template>
+    <div class="m-sdcs">
+      <div class="banner">
+        <img src="@/assets/imgs/topic/sdcs/sdcs.png" alt="" />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {};
+  </script>
+  
+  <style lang="scss" scoped>
+  .m-sdcs {
+    .banner {
+      width: 100%;
+      height: 100%;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file

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

 <template>
   <div class="m-smgz">
-    <div class="waterfall">
+    <div class="waterfall animate__animated animate__fadeInLeft delay3">
       <img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
     </div>
-    <div class="gzmap">
+    <div class="gzmap animate__animated animate__fadeInRight delay3">
       <img src="@/assets/imgs/topic/smgz/map.png" alt="" />
     </div>
-    <div class="animal">
+    <div class="animal animate__animated animate__fadeIn delay1">
       <img src="@/assets/imgs/topic/smgz/animal.png" alt="" />
     </div>
-    <div class="stone">
+    <div class="stone animate__animated animate__fadeInRight">
       <img src="@/assets/imgs/topic/smgz/stone.png" alt="" />
     </div>
-    <div class="fish">
-      <img src="@/assets/imgs/topic/smgz/fish.png" alt="" />
+    <div class="fish animate__animated animate__collapseInRight delay4">
+      <div>
+        <img src="@/assets/imgs/topic/smgz/fish.png" alt="" />
+      </div>
     </div>
-    <div class="gzregion">
+    <div class="gzregion animate__animated animate__fadeInRight delay4">
       <img src="@/assets/imgs/topic/smgz/region.png" alt="" />
     </div>
-    <div class="archaeology">
+    <div class="archaeology animate__animated animate__fadeInUp delay1">
       <img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" />
     </div>
-    <div class="evolution">
+    <div class="evolution animate__animated animate__bounceIn delay5">
       <img src="@/assets/imgs/topic/smgz/evolution.png" alt="" />
     </div>
-    <div class="title-first">
+    <div class="title-first animate__animated animate__fadeInDown delay6">
       <img src="@/assets/imgs/topic/smgz/smgz.png" alt="" />
     </div>
-    <div class="title-last">
-        <img src="@/assets/imgs/topic/smgz/gswwg.png" alt="" />
+    <div class="title-last animate__animated animate__fadeInUp delay6">
+      <img src="@/assets/imgs/topic/smgz/gswwg.png" alt="" />
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  methods: {}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -81,10 +85,17 @@ export default {};
     height: calc(100% - 55px);
   }
   .fish {
-    left: 50px;
+    right: 1360px;
     top: 128px;
-    width: 512px;
     height: 276px;
+    overflow: hidden;
+    > div {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 512px;
+      height: 100%;
+    }
   }
   .gzregion {
     bottom: 140px;
@@ -110,5 +121,26 @@ export default {};
     width: 418px;
     height: 125px;
   }
+
+  @for $var from 1 through 8 {
+    $date: $var * 0.5 + s;
+    .delay#{$var} {
+      animation-delay: $date;
+    }
+  }
+
+  .animate__collapseInRight {
+    animation-name: collapseInRight;
+  }
+  @keyframes collapseInRight {
+    0% {
+      width: 0;
+      overflow: hidden;
+    }
+    100% {
+      width: 512px;
+      overflow: hidden;
+    }
+  }
 }
 </style>

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

+<template>
+  <div class="m-ylgdyw">
+    <div class="banner">
+      <img src="@/assets/imgs/topic/ylgdyw/ylgdyw.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.m-ylgdyw {
+  .banner {
+    width: 100%;
+    height: 100%;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>