xuhuajiao
/
qy_bigScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

效果更新

master
xuhuajiao 7 months ago
parent
eef2ab68d4
commit
a66e2755ca
10 changed files with 277 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/bottom-bg.png
  2. BIN
      src/assets/images/header_09.png
  3. BIN
      src/assets/images/header_11.png
  4. BIN
      src/assets/images/header_15.png
  5. 287
      src/assets/styles/index.scss
  6. 125
      src/views/index.vue
  7. 21
      src/views/map/index.vue
  8. 12
      src/views/pageFour/index.vue
  9. 6
      src/views/pageOne/index.vue
  10. 13
      src/views/pageThree/index.vue

BIN
src/assets/images/bottom-bg.png
View File

Side by Side Swipe Overlay

Before

Width: 1582  |  Height: 48  |  Size: 35 KiB

After

Width: 1461  |  Height: 58  |  Size: 33 KiB

BIN
src/assets/images/header_09.png
View File

Side by Side

After

Width: 11  |  Height: 6  |  Size: 1.2 KiB

BIN
src/assets/images/header_11.png
View File

Side by Side

After

Width: 11  |  Height: 6  |  Size: 1.1 KiB

BIN
src/assets/images/header_15.png
View File

Side by Side

After

Width: 11  |  Height: 6  |  Size: 1.1 KiB

287
src/assets/styles/index.scss
View File

@ -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;
// }
.dot:nth-child(2) {
animation-delay: 0.2s;
}
// @keyframes topline {
// from {
// width: 0;
// }
// 50%,
// to {
// width: 643px;
// }
// }
@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;

125
src/views/index.vue
View File

@ -4,23 +4,29 @@
<dv-loading>Loading...</dv-loading>
</div>
<Header :header-title="headerTitle" />
<div style="position: fixed; right: .175rem; top:.3125rem; font-size:.175rem; background: rgba(82,146,255,0.2);border: 1px solid #5292FF; padding: 0 .075rem; line-height: .3125rem; z-index: 999;">{{ active +' / '+ pageData.length }}</div>
<div class="header-page" @click="goToNextPage">{{ (currentPage+1) +' / '+ pageData.length }}</div>
<section ref="sectionRef">
<keep-alive>
<PageOne
v-if="active === 1"
ref="user"
:height="height"
/>
<PageOne v-if="currentPage === 0" ref="user" />
</keep-alive>
<Map
v-if="active === 2"
:height="height"
/>
<PageThree v-if="active === 3" />
<PageFour v-if="active === 4" />
<Map v-if="currentPage === 1" />
<PageThree v-if="currentPage === 2" />
<PageFour v-if="currentPage === 3" />
</section>
<div class="bottom-bg" />
<div class="bottom-bg">
<div class="bottom-content">
<div class="dot-container left-dots">
<div class="dot" />
<div class="dot" />
<div class="dot" />
</div>
<div class="dot-container right-dots">
<div class="dot" />
<div class="dot" />
<div class="dot" />
</div>
</div>
</div>
</div>
</template>
@ -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)

21
src/views/map/index.vue
View File

@ -34,7 +34,7 @@
<img src="@/assets/images/map_28.png" alt="">
<p>
<span>占地面积</span>
<span>40<i>平方米</i></span>
<span>45<i>平方米</i></span>
</p>
</li>
</ul>
@ -64,7 +64,7 @@
<li style="width: 1.75rem; text-align: right; padding-right: .375rem;">借阅次数</li>
</ul>
<ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :key="index">
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
<div style="width: 1.5rem; text-align: left; padding-left: .25rem;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;">
@ -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)
}
}
}

12
src/views/pageFour/index.vue
View File

@ -60,7 +60,7 @@
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li>
</ul>
<ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :key="index">
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
<div style="width: 1.5rem; text-align: left;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;">
@ -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)

6
src/views/pageOne/index.vue
View File

@ -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() {
// 数据概览

13
src/views/pageThree/index.vue
View File

@ -34,7 +34,7 @@
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li>
</ul>
<ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :key="index">
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
<div style="width: 1.5rem; text-align: left;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;">
@ -80,7 +80,7 @@
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li>
</ul>
<ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :key="index">
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
<div style="width: 1.5rem; text-align: left;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;">
@ -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)
}
}
}

Write Preview
Loading…
Cancel
Save