页面效果

src/assets/iconfont/iconfont.css

@@ -1,13 +1,13 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 3646564 */
-  src: url('iconfont.woff2?t=1717656975450') format('woff2'),
-       url('iconfont.woff?t=1717656975450') format('woff'),
-       url('iconfont.ttf?t=1717656975450') format('truetype'),
-       url('iconfont.svg?t=1717656975450#iconfont') format('svg');
+  font-family: "iconfont2"; /* Project id 3646564 */
+  src: url('iconfont.woff2?t=1718094031775') format('woff2'),
+       url('iconfont.woff?t=1718094031775') format('woff'),
+       url('iconfont.ttf?t=1718094031775') format('truetype'),
+       url('iconfont.svg?t=1718094031775#iconfont') format('svg');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: "iconfont2" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;

src/main.js

@@ -10,15 +10,16 @@ Vue.use(ElementUI)
 // 适配flex
 import '@/common/flexible.js'
 
+import './assets/js/rollSlide.js'
+import './assets/js/tagcloud-2.2.js'
+
 // 引入全局css
-import './assets/styles/style.scss'
-import './assets/iconfont/iconfont.js'
 import './assets/fonts/fonts.css'
+import './assets/iconfont/iconfont.js'
+import './assets/styles/style.scss'
 
-import '@/icons'
+import './icons'
 
-import './assets/js/rollSlide.js'
-import './assets/js/tagcloud-2.2.js'
 // 按需引入然后注册在vue原型上
 import { Message } from 'element-ui'
 Vue.prototype.$message = Message

src/views/index.vue

@@ -29,7 +29,7 @@
 
         <div class="container">
           <p>第一行书</p>
-          <div id="e" class="roll-wrap roll_row">
+          <!-- <div id="e" class="roll-wrap roll_row">
             <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
               <li v-for="(item,index) in list" :key="index">{{ index }}
                 <div class="book-img">
@@ -37,9 +37,18 @@
                 </div>
               </li>
             </ul>
+          </div> -->
+          <div class="swiper-container seamless01-swiper">
+            <div class="swiper-wrapper">
+              <div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }}
+                <div class="book-img">
+                  <img :src="item.cover" :onerror="defaultImg">
+                </div>
+              </div>
+            </div>
           </div>
           <p>第二行书</p>
-          <div id="f" class="roll-wrap roll_row">
+          <!-- <div id="f" class="roll-wrap roll_row">
             <ul class="roll__list" :style="{'position': 'absolute', 'right': 0,'top': 0, 'width': list.length*60 + 'px'} ">
               <li v-for="(item,index) in list" :key="index">
                 {{ index }}
@@ -48,11 +57,23 @@
                 </div>
               </li>
             </ul>
+          </div> -->
+          <div class="swiper-container seamless02-swiper">
+            <div class="swiper-wrapper">
+              <div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }}
+                <div class="book-img">
+                  <img :src="item.cover" :onerror="defaultImg">
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </swiper-slide>
       <swiper-slide class="slide">
-        <Map />
+        <Map ref="mapRefs" />
+      </swiper-slide>
+      <swiper-slide class="slide">
+        <div>第三屏</div>
       </swiper-slide>
       <div slot="pagination" class="swiper-pagination-home" />
     </swiper>
@@ -76,21 +97,41 @@ export default {
     swiperSlide
   },
   data() {
+    const _self = this
     return {
       headerTitle: '祁阳图书馆',
       list: [],
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       swiperOption: {
+        loop: true,
         initialSlide: 0,
         notNextTick: false,
         observer: true, // 开启动态检查器
-        autoplay: false,
+        speed: 2000,
+        autoplay: {
+          delay: 10000, // 自动切换的时间间隔，单位ms
+          stopOnLastSlide: true, // 当切换到最后一个slide时停止自动切换
+          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
+          // reverseDirection: true // 开启反向自动轮播
+          // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
+        },
+        direction: 'vertical',
         // 显示分页
         pagination: {
           el: '.swiper-pagination-home',
           type: 'fraction'
+        },
+        on: {
+          slideChangeTransitionEnd() {
+            console.log(' this.activeIndex-index', this.activeIndex)
+            $('#e').rollNoInterval().left()
+            $('#f').rollNoInterval().right()
+            _self.addAnimationClass(this.activeIndex)
+          }
         }
-      }
+      },
+      mySwipera1: null,
+      mySwipera2: null
     }
   },
   computed: {
@@ -117,16 +158,78 @@ export default {
       keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
       multicolour: true // 彩色字体，颜色随机，取值：true(默认),false
     })
-    $('#e').rollNoInterval().left()
-    $('#f').rollNoInterval().right()
+    // $('#e').rollNoInterval().left()
+    // $('#f').rollNoInterval().right()
+    // this.mySwipera1 = new Swiper('.seamless01-swiper', {
+    //   observer: true, // 开启动态检查器，监测swiper和slide
+    //   observeParents: true, // 监测Swiper 的祖/父元素
+    //   speed: 4000, // 切换速度
+    //   loop: true, // 循环
+    //   slidesPerView: 4, // 显示数量
+    //   spaceBetween: 10, // 间隔
+    //   freeMode: true, // 自动贴合
+    //   autoplay: { // 自动播放
+    //     delay: 0, // 自动切换的时间间隔
+    //     stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
+    //     disableOnInteraction: false// 用户操作后是否停止
+    //   },
+    //   breakpoints: {
+    //     750: { // 当屏幕宽度大于等于320
+    // 	  slidesPerView: 3
+    //     }
+    //   }
+    // })
+    // this.mySwipera2 = new Swiper('.seamless02-swiper', {
+    //   observer: true, // 开启动态检查器，监测swiper和slide
+    //   observeParents: true, // 监测Swiper 的祖/父元素
+    //   speed: 4000, // 切换速度
+    //   loop: true, // 循环
+    //   slidesPerView: 4, // 显示数量
+    //   spaceBetween: 10, // 间隔
+    //   freeMode: true, // 自动贴合
+    //   autoplay: { // 自动播放
+    //     delay: 0, // 自动切换的时间间隔
+    //     stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
+    //     disableOnInteraction: false, // 用户操作后是否停止
+    //     reverseDirection: true// 方向切换
+    //   },
+    //   breakpoints: {
+    //     750: { // 当屏幕宽度大于等于320
+    // 	    slidesPerView: 3
+    //     }
+    //   }
+    // })
   },
   methods: {
+    addAnimationClass(activeIndex) {
+      this.$nextTick(() => {
+        const swiper = this.$refs.mySwiperHome.swiper
+        if (swiper) {
+          const slides = swiper.slides
+          const nextSlide = slides.eq(2)
+          if (activeIndex === 2) {
+            nextSlide.find('.place-point').children().addClass('bouncePoint')
+            this.$refs.mapRefs.isPage2 = true
+            this.$refs.mapRefs.libIndex = 0
+            this.$refs.mapRefs.libCurrent = this.$refs.mapRefs.libInfoData[this.$refs.mapRefs.libIndex]
+            this.$refs.mapRefs.init()
+            this.$refs.mapRefs.updatePageWithData()
+          } else {
+            this.$refs.mapRefs.isPage2 = false
+            nextSlide.find('.place-point').children().removeClass('bouncePoint')
+          }
+        }
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
+::v-deep .swiper-wrapper{
+  transition-timing-function: ease-in-out !important;
+}
 .tagcloud {
   width: 5.5rem;
   height: 5rem;
@@ -149,20 +252,22 @@ a {
     margin-top: .2rem;
   }
 }
+
+/* seamlesswrap */
+.seamlesswrap{width: 100%;box-sizing: border-box;padding: 200px;}
+.seamlesswrap img{width: 100%;display: block;}
+.seamlesswrap .swiper-container-free-mode>.swiper-wrapper{
+    -webkit-transition-timing-function:linear!important;
+  -o-transition-timing-function:linear!important;
+  transition-timing-function:linear!important; }
+.seamlesswrap .swiper-container{margin: 10px 0;}
+
 .roll-wrap{
     position: relative;
     width: 100%;
     height: 100px;
     overflow: hidden;
 }
-// .roll_row .roll__list::before, .roll_row .roll__list::after {
-//     content: "";
-//     display: table;
-//     line-height: 0;
-// }
-// .roll_row .roll__list::after {
-//     clear: both;
-// }
 .roll_row .roll__list{
   display: flex;
   flex-wrap: nowrap;
@@ -172,13 +277,9 @@ a {
     display: block;
     margin-right: 20px;
     width: .5rem;
-    // height: .5rem;
-    // line-height: .5rem;
     font-weight: bold;
     font-size: .3rem;
     text-align: center;
-    // color: #fff;
-    // background-color: #ff9900;
 }
 .book-img{
   width: .5rem;
@@ -191,7 +292,6 @@ a {
   img{
     display: block;
     width: 100%;
-    // height: 100%;
   }
 }
 .swiper-slide{

src/views/map/index.vue

@@ -6,9 +6,9 @@
         <!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> -->
         <img class="map_img" src="@/assets/images/map.png" alt="">
         <div class="place-point">
-          <div v-for="(item,index) in libInfoData" v-show="libIndex===index" :key="index" :class="['point'+ parseInt(index+1),'bouncePoint']" style="position: absolute">
+          <div v-for="(item,index) in libInfoData" v-show="libIndex===index" :key="index" :class="['point'+ parseInt(index+1)]" style="position: absolute">
             <p style="font-size: .14rem; ">{{ item.name }}</p>
-            <i class="iconfont icon-weizhi" />
+            <span class="iconfont icon-weizhi" />
             <div class="pulse" />
           </div>
         </div>
@@ -51,6 +51,7 @@ export default {
   },
   data() {
     return {
+      isPage2: false,
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       timeTicket: null,
       headerTitle: '祁阳图书馆',
@@ -98,13 +99,15 @@ export default {
   },
 
   mounted() {
-    this.init()
-    this.libCurrent = this.libInfoData[this.libIndex]
-    this.updatePageWithData()
+    // this.libCurrent = this.libInfoData[this.libIndex]
   },
   methods: {
     updatePageWithData() {
       console.log('update')
+      console.log('_self.isPage22222', this.isPage2)
+      if (!this.isPage2) {
+        return false
+      }
       // 生成一个随机数来确定要显示的图片数量
       const displayCountOptions = [1, 2, 3, 5]
       const displayCount = displayCountOptions[Math.floor(Math.random() * displayCountOptions.length)]
@@ -161,10 +164,15 @@ export default {
         },
         on: {
           slideChangeTransitionEnd() {
+            if (_self.isPage2) {
+              _self.$refs.mySwiper.swiper.update()
+              _self.$refs.mySwiper.swiper.autoplay.start()
+            } else {
+              _self.$refs.mySwiper.swiper.autoplay.stop()
+            }
             console.log(' this.activeIndex', this.activeIndex)
             console.log('_self.libIndex', _self.libIndex)
             _self.currentIndex = this.activeIndex
-
             if (_self.currentIndex === _self.displayedImages.length - 1) {
               setTimeout(() => {
                 if (_self.libIndex === _self.libInfoData.length - 1) {
@@ -176,8 +184,6 @@ export default {
                 _self.updatePageWithData()
                 _self.currentIndex = 0
               }, 3000)
-              _self.$refs.mySwiper.swiper.update()
-              _self.$refs.mySwiper.swiper.autoplay.start()
             }
           }
         }
@@ -331,56 +337,12 @@ export default {
   height: 600px;
   border: 1px solid #fff;
 }
-
-// .pin {
-//   width: 30px;
-//   height: 30px;
-//   border-radius: 50% 50% 50% 0;
-//   background: #89849b;
-//   position: absolute;
-//   -webkit-transform: rotate(0);
-//   -moz-transform: rotate(0);
-//   -o-transform: rotate(0);
-//   -ms-transform: rotate(0);
-//   transform: rotate(0);
-//   left: 50%;
-//   top: 50%;
-//   margin: -20px 0 0 -20px;
-//   -webkit-animation-name: bounce;
-//   -moz-animation-name: bounce;
-//   -o-animation-name: bounce;
-//   -ms-animation-name: bounce;
-//   animation-name: bounce;
-//   -webkit-animation-fill-mode: both;
-//   -moz-animation-fill-mode: both;
-//   -o-animation-fill-mode: both;
-//   -ms-animation-fill-mode: both;
-//   animation-fill-mode: both;
-//   -webkit-animation-duration: 1s;
-//   -moz-animation-duration: 1s;
-//   -o-animation-duration: 1s;
-//   -ms-animation-duration: 1s;
-//   animation-duration: 1s;
-// }
-// .pin:after {
-//   content: '';
-//   width: 14px;
-//   height: 14px;
-//   margin: 8px 0 0 8px;
-//   background: #2f2f2f;
-//   position: absolute;
-//   border-radius: 50%;
-// }
 .pulse {
   background: rgba(0,0,0,0.2);
   border-radius: 50%;
   height: 14px;
   width: 14px;
   margin: -9px 0 0 5px;
-  // position: absolute;
-  // left: 50%;
-  // top: 50%;
-  // margin: 11px 0px 0px -12px;
   -webkit-transform: rotateX(55deg);
   -moz-transform: rotateX(55deg);
   -o-transform: rotateX(55deg);