diff --git a/src/assets/images/bottom-bg.png b/src/assets/images/bottom-bg.png index af4972f..933848e 100644 Binary files a/src/assets/images/bottom-bg.png and b/src/assets/images/bottom-bg.png differ diff --git a/src/assets/images/header_09.png b/src/assets/images/header_09.png new file mode 100644 index 0000000..bc3403a Binary files /dev/null and b/src/assets/images/header_09.png differ diff --git a/src/assets/images/header_11.png b/src/assets/images/header_11.png new file mode 100644 index 0000000..a972743 Binary files /dev/null and b/src/assets/images/header_11.png differ diff --git a/src/assets/images/header_15.png b/src/assets/images/header_15.png new file mode 100644 index 0000000..bdacbe0 Binary files /dev/null and b/src/assets/images/header_15.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index affecdd..e9e128a 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -34,7 +34,30 @@ background: rgba(0, 0, 0, 0.9); z-index: 99999999; } +.header-page{ + position: fixed; + right: .175rem; + top: .175rem; + font-size:.175rem; + background: rgba(82,146,255,0.2); + border: 1px solid #5292FF; + padding: 0 .075rem; + line-height: .3125rem; + z-index: 999999; + cursor: pointer; +} +.dot-container { + display: flex; + justify-content: space-around; + width: .75rem; +} +.dot { + width: .1375rem; + height: .075rem; + margin-right: .075rem; + animation: blink 1s infinite; +} // 头部主题标题 .header-container { position: relative; @@ -43,22 +66,6 @@ height: 1.0625rem; color: #fff; z-index: 9999; - // &::before, - // &::after{ - // content: ""; - // position: absolute; - // top: 0; - // width: 6.2rem; - // height: 1.05rem; - // } - // &::before{ - // left: 0; - // background: url('~@/assets/images/header-left.png') no-repeat top center; - // } - // &::after{ - // right: 0; - // background: url('~@/assets/images/header-right.png') no-repeat top center; - // } .header-title { position: relative; font-family: 'Microsoft YaHei'; @@ -90,7 +97,7 @@ height: .075rem; background: url('~@/assets/images/header_13_b.png') no-repeat top left; background-size: contain; - transform: translateX(-47%); + margin-left: -1.175rem; overflow: hidden; .bottom-block{ position: absolute; @@ -103,6 +110,47 @@ transform: translateX(-50%) rotate(180deg); animation: runblock 3s infinite; } + } + .left-dots{ + position: absolute; + left: 2.25rem; + top: .0625rem; + .dot:nth-child(1) { + background: url('~@/assets/images/header_03.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(2) { + background: url('~@/assets/images/header_05.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(3) { + background: url('~@/assets/images/header_07.png') no-repeat top left; + background-size: contain; + } + + .dot:nth-child(3) { + animation-delay: 0.4s; + } + } + .right-dots{ + position: absolute; + right: 2rem; + top: .0625rem; + .dot:nth-child(1) { + background: url('~@/assets/images/header_09.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(2) { + background: url('~@/assets/images/header_11.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(3) { + background: url('~@/assets/images/header_15.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(1) { + animation-delay: 0.4s; + } } } @keyframes runblock{ @@ -117,89 +165,17 @@ } } - .dot-container { - display: flex; - justify-content: space-around; - width: .75rem; - } - .dot { - width: .1375rem; - height: .075rem; - margin-right: .075rem; - animation: blink 1s infinite; - } - .left-dots{ - position: absolute; - left: 2.25rem; - top: .0625rem; - .dot:nth-child(1) { - background: url('~@/assets/images/header_03.png') no-repeat top left; - background-size: contain; - } - .dot:nth-child(2) { - background: url('~@/assets/images/header_05.png') no-repeat top left; - background-size: contain; - } - .dot:nth-child(3) { - background: url('~@/assets/images/header_07.png') no-repeat top left; - background-size: contain; - } - - .dot:nth-child(3) { - animation-delay: 0.4s; - } - } - .right-dots{ - position: absolute; - right: 2rem; - top: .0625rem; - .dot:nth-child(1) { - background: url('~@/assets/images/header_07.png') no-repeat top left; - background-size: contain; - } - .dot:nth-child(2) { - background: url('~@/assets/images/header_05.png') no-repeat top left; - background-size: contain; - } - .dot:nth-child(3) { - background: url('~@/assets/images/header_03.png') no-repeat top left; - background-size: contain; - } - .dot:nth-child(1) { - animation-delay: 0.4s; - } - } - - .dot:nth-child(2) { - animation-delay: 0.2s; - } - - @keyframes blink { - 0% { - opacity: 0.2; - } - 20% { - opacity: 1; - } - 100% { - opacity: 0.2; - } - } - - - - .header-text { position: absolute; } .header-weather { - top: .3125rem; + top: .175rem; width: 2.5rem; right: 0.25rem; overflow: hidden; } .header-date { - top: .2125rem; + top: .125rem; left: .2125rem; display: flex; justify-content: flex-start; @@ -223,47 +199,21 @@ } } -// // 头部动态效果 -// .line1, -// .line2{ -// position: absolute; -// top: 0; -// } - -// .line1{ -// right: 632px; -// transform: rotateY(-180deg); -// } - -// .line2{ -// left: 632px; -// } - -// .top-line1, -// .top-line2{ -// display: block; -// width: 7.925rem; -// height: 1.075rem; -// animation: topline 4s linear infinite both; -// } - -// .top-line1{ -// background: url('~@/assets/images/top-line.png') no-repeat; -// } - -// .top-line2{ -// background: url('~@/assets/images/top-line.png') no-repeat; -// } - -// @keyframes topline { -// from { -// width: 0; -// } -// 50%, -// to { -// width: 643px; -// } -// } +.dot:nth-child(2) { + animation-delay: 0.2s; +} + +@keyframes blink { + 0% { + opacity: 0.2; + } + 20% { + opacity: 1; + } + 100% { + opacity: 0.2; + } +} // 底部底色 .bottom-bg { @@ -271,11 +221,58 @@ bottom: 0; left: 50%; transform: translateX(-50%); - width: 19.775rem; - height: .6rem; + width: 18.2625rem; + height: .725rem; background: url('~@/assets/images/bottom-bg.png') no-repeat top left; background-size: cover; z-index: 999; + .bottom-content{ + position: relative; + width: 100%; + height: 100%; + } + .left-dots{ + position: absolute; + left: 4rem; + bottom: .1875rem; + .dot:nth-child(1) { + background: url('~@/assets/images/header_15.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(2) { + background: url('~@/assets/images/header_11.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(3) { + background: url('~@/assets/images/header_09.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(3) { + animation-delay: 0.4s; + } + } + .right-dots{ + position: absolute; + right: 4rem; + bottom: .1875rem; + + .dot:nth-child(1) { + background: url('~@/assets/images/header_07.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(2) { + background: url('~@/assets/images/header_05.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(3) { + background: url('~@/assets/images/header_03.png') no-repeat top left; + background-size: contain; + } + .dot:nth-child(1) { + animation-delay: 0.4s; + } + } + } // pageOne @@ -755,6 +752,7 @@ top: 0; background-size: cover; font-family: 'DingTalk_JinBuTi_Regular'; + overflow: hidden; .map-content{ display: flex; justify-content: space-around; @@ -875,7 +873,7 @@ align-items: center; span{ &:last-child{ - width: 2.375rem; + width: 226px; text-align: right; } } @@ -888,9 +886,8 @@ height: calc(100vh - 8.625rem); background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0)); border-radius: 4px; - padding: .25rem 0 0 .2875rem; + padding: .25rem 0 0 .2875rem; overflow: hidden; - // border: 1px solid red; } .lib-text{ position: absolute; @@ -899,6 +896,7 @@ font-size: 18px; line-height: .35rem; color: #ADC7FF; + overflow: hidden; } } .map-hx-bg{ @@ -1022,7 +1020,7 @@ font-size: .225rem; color: #eef6ff; line-height: .375rem; - padding-top: .125rem; + padding: .0625rem 0; text-align: center; div{ &:last-child{ @@ -1298,6 +1296,21 @@ } } } + +.ranking-list{ + li.hovered{ + background-color: #142B76; + border-radius: .05rem; + animation: myListScale 1s forwards; + } +} + +@keyframes myListScale { + to { + -webkit-transform: scaleX(1.06) scaleY(1.03); + transform: scaleX(1.06) scaleY(1.03); + } +} .four-contact{ display: flex; justify-content: center; diff --git a/src/views/index.vue b/src/views/index.vue index a06e0a8..0d0020e 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -4,23 +4,29 @@ Loading...
-
{{ active +' / '+ pageData.length }}
+
{{ (currentPage+1) +' / '+ pageData.length }}
- + - - - + + +
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -41,7 +47,8 @@ export default { }, data() { return { - active: 4, + active: 1, + currentPage: 0, isLoading: false, height: '', headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览', @@ -66,7 +73,8 @@ export default { middleTimer: null, deviceTimer: null, todayTimer: null, - yearTimer: null + yearTimer: null, + intervalId: null // 用于存储定时器的ID } }, computed: { @@ -77,9 +85,11 @@ export default { // meta.callback = (r) => { // console.log(r, '回调') // } + this.startAutoSwitch() }, beforeDestroy() { clearInterval(this.timer2) + this.stopAutoSwitch() // window.removeEventListener('resize', this.setElementHeight) }, mounted() { @@ -92,25 +102,74 @@ export default { }) }, methods: { - autoPagination(active) { - console.log('active', active) - if (active === 1 || active === 3) { - clearInterval(this.timer2) - this.timer2 = setInterval(() => { - setTimeout(() => { - // if (this.active >= this.pageData.length) { - // this.active = 1 - // } else { - // this.active = active + 1 - // } - this.active = active + 1 - // this.showLoading() - }, 0) - }, 10000) - } else { - console.log('this.active', this.active) - this.active = active + 1 + startAutoSwitch() { + this.intervalId = setInterval(() => { + this.currentPage = (this.currentPage + 1) % 4 + }, 20000) + }, + stopAutoSwitch() { + clearInterval(this.intervalId) + }, + goToNextPage() { + this.currentPage = (this.currentPage + 1) % 4 + this.stopAutoSwitch() // 停止自动切换，以免与手动切换冲突 + + // 设置定时器，恢复自动切换 + // setTimeout(() => { + // this.startAutoSwitch() + // }, 200000) + }, + + // goToNextPage() { + // // 清除之前的计时器，以防多个计时器同时运行 + // clearTimeout(this.timer) + + // // 执行页面跳转的逻辑 + // this.autoPagination(this.currentPage + 1) + + // // 设置5秒后自动跳转 + // this.timer = setTimeout(() => { + // this.autoPagination(this.currentPage + 1) + // }, 20000) + // }, + autoPagination(page) { + // this.currentPage = page + console.log('page:', page) + if (page > this.pageData.length) { + page = 1 } + this.currentPage = page + console.log('当前页:', this.currentPage) + // if (this.currentPage === 1 || this.currentPage === 3) { + // clearInterval(this.timer2) + // this.timer2 = setInterval(() => { + // setTimeout(() => { + // this.autoPagination(this.currentPage + 1) + // }, 0) + // }, 8000) + // } + + // if (this.currentPage >= this.pageData.length) { + // this.currentPage = 1 + // } else { + // this.currentPage = active + 1 + // } + // console.log('changePage', this.active) + + // if (this.currentPage < this.pageData.length) { + // if (this.currentPage === 1 || this.currentPage === 3) { + // clearInterval(this.timer2) + // this.timer2 = setInterval(() => { + // setTimeout(() => { + // this.active = this.currentPage + 1 + // }, 0) + // }, 10000) + // } else { + // this.active = this.currentPage + 1 + // } + // } else { + // this.active = 1 + // } this.$once('hook:beforeDestroy', () => { clearInterval(this.timer2) clearInterval(this.leftTimer) diff --git a/src/views/map/index.vue b/src/views/map/index.vue index 5b498a0..ffbafad 100644 --- a/src/views/map/index.vue +++ b/src/views/map/index.vue @@ -34,7 +34,7 @@

占地面积 - 40平方米 + 45平方米

@@ -64,7 +64,7 @@
  • 借阅次数
      • -
    • +
    • {{ index>=3 ? index+1 : null }}
      {{ item.name }}
      @@ -95,6 +95,7 @@ export default { }, data() { return { + currentHover: -1, timeTicket: null, defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', count: 0, @@ -171,7 +172,12 @@ export default { window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内 }, 300) this.rankingDataComputed() - this.startScrolling() + if (document.getElementsByClassName('scroll-container')[0]) { + this.startScrolling() + } + setInterval(() => { + this.currentHover = (this.currentHover + 1) % this.rankingData.length + }, 1000) }, methods: { escapeHtml(str) { @@ -285,8 +291,7 @@ export default { rippleEffect: { // brushType: 'stroke', color: 'transparent' - // period: 12 - // scale: 4 + // scale: 1.5 }, label: { normal: { @@ -780,7 +785,7 @@ export default { // keyboard: true, //键盘控制 // mousewheelControl: true, //鼠标轮控制 autoplay: { - delay: 5000, // 自动切换的时间间隔，单位ms + delay: 3000, // 自动切换的时间间隔，单位ms stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换 disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay // reverseDirection: false, //开启反向自动轮播 @@ -800,7 +805,7 @@ export default { setTimeout(() => { if (_self.count === _self.libInfoData.length - 1) { _self.count = 0 - _self.$parent.autoPagination(2) + // _self.$parent.autoPagination(3) } else { _self.count++ } @@ -812,7 +817,7 @@ export default { _self.updatePageWithData() _self.autohover() _self.currentIndex = 0 - }, 5000) + }, 3000) } } } diff --git a/src/views/pageFour/index.vue b/src/views/pageFour/index.vue index 509da9e..63bd313 100644 --- a/src/views/pageFour/index.vue +++ b/src/views/pageFour/index.vue @@ -60,7 +60,7 @@
    • 借阅数量
      -
    • +
    • {{ index>=3 ? index+1 : null }}
      {{ item.name }}
      @@ -87,6 +87,7 @@ export default { name: 'PageFour', data() { return { + currentHover: -1, content: '本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!', poster: require('@/assets/images/poster.png'), videoIndex: 0, @@ -131,6 +132,9 @@ export default { mounted() { this.rankingDataComputed() this.startScrolling() + setInterval(() => { + this.currentHover = (this.currentHover + 1) % this.rankingData.length + }, 1000) }, methods: { // 通知滚动 @@ -180,9 +184,9 @@ export default { }) console.log('this.videoIndex.length ', this.videoIndex) console.log('this.slideData.length ', this.slideData.length) - if (this.videoIndex === this.slideData.length - 1) { - this.$parent.autoPagination(0) - } + // if (this.videoIndex === this.slideData.length - 1) { + // this.$parent.autoPagination(1) + // } setTimeout(() => { nextVideo.play() }, 1000) diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue index e3c39ad..615803e 100644 --- a/src/views/pageOne/index.vue +++ b/src/views/pageOne/index.vue @@ -202,6 +202,9 @@ export default { async mounted() { this.initPageOne() this.tagAnimation() + // setTimeout(() => { + // this.$parent.autoPagination(2) + // }, 8000) }, methods: { getType1Value() { @@ -236,9 +239,6 @@ export default { // 获取全用户数据 await this.initDataPreview() await this.ininMiddleData() - setTimeout(() => { - this.$parent.autoPagination(1) - }, 700) }, async initDataPreview() { // 数据概览 diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue index 16cd363..ff598d5 100644 --- a/src/views/pageThree/index.vue +++ b/src/views/pageThree/index.vue @@ -34,7 +34,7 @@
    • 借阅数量
      -
    • +
    • {{ index>=3 ? index+1 : null }}
      {{ item.name }}
      @@ -80,7 +80,7 @@
    • 借阅数量
      -
    • +
    • {{ index>=3 ? index+1 : null }}
      {{ item.name }}
      @@ -124,6 +124,7 @@ export default { }, data() { return { + currentHover: -1, chartData: { returnData: [220, 132, 10, 134, 90, 230], borrowedData: [20, 182, 191, 234, 290, 330] @@ -152,6 +153,9 @@ export default { mounted() { this.rankingDataComputed() this.initDataPreview() + setInterval(() => { + this.currentHover = (this.currentHover + 1) % this.rankingData.length + }, 1000) }, methods: { rankingDataComputed() { @@ -196,8 +200,11 @@ export default { setTimeout(() => { this.$parent.timedRefresh(this.todayTotal, 'todayTotal') this.$parent.timedRefresh(this.yearTotal, 'yearTotal') - this.$parent.autoPagination(3) }, 1000) + + // setTimeout(() => { + // this.$parent.autoPagination(4) + // }, 8000) } } }