diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css index af1a2d2..2eab77b 100644 --- a/src/assets/iconfont/iconfont.css +++ b/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; diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf index f19f35f..ae51657 100644 Binary files a/src/assets/iconfont/iconfont.ttf and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff index 2403e9a..36081cc 100644 Binary files a/src/assets/iconfont/iconfont.woff and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 index dcf6ab1..fcace6f 100644 Binary files a/src/assets/iconfont/iconfont.woff2 and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/main.js b/src/main.js index f272a79..142b26b 100644 --- a/src/main.js +++ b/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 diff --git a/src/views/index.vue b/src/views/index.vue index 498ca66..200f399 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -29,7 +29,7 @@

第一行书

-
+ +
+
+
{{ index }} +
+ +
+
+

第二行书

-
+ +
+
+
{{ index }} +
+ +
+
+
- + + + +
第三屏
@@ -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') + } + } + }) + } } }