diff --git a/src/assets/images/1_03.png b/src/assets/images/1_03.png new file mode 100644 index 0000000..77fc900 Binary files /dev/null and b/src/assets/images/1_03.png differ diff --git a/src/assets/images/2_03.png b/src/assets/images/2_03.png new file mode 100644 index 0000000..e297de5 Binary files /dev/null and b/src/assets/images/2_03.png differ diff --git a/src/assets/images/book_03.png b/src/assets/images/book_03.png new file mode 100644 index 0000000..1c28961 Binary files /dev/null and b/src/assets/images/book_03.png differ diff --git a/src/assets/images/database-img1.png b/src/assets/images/database-img1.png new file mode 100644 index 0000000..429349d Binary files /dev/null and b/src/assets/images/database-img1.png differ diff --git a/src/assets/images/database-img2.png b/src/assets/images/database-img2.png new file mode 100644 index 0000000..15c2cea Binary files /dev/null and b/src/assets/images/database-img2.png differ diff --git a/src/assets/images/mapBg.png b/src/assets/images/mapBg.png new file mode 100644 index 0000000..278171f Binary files /dev/null and b/src/assets/images/mapBg.png differ diff --git a/src/assets/images/map_03.png b/src/assets/images/map_03.png new file mode 100644 index 0000000..62ba7a8 Binary files /dev/null and b/src/assets/images/map_03.png differ diff --git a/src/assets/images/map_10.png b/src/assets/images/map_10.png new file mode 100644 index 0000000..ddf52ae Binary files /dev/null and b/src/assets/images/map_10.png differ diff --git a/src/assets/images/map_14.png b/src/assets/images/map_14.png new file mode 100644 index 0000000..c5f6642 Binary files /dev/null and b/src/assets/images/map_14.png differ diff --git a/src/assets/images/map_18.png b/src/assets/images/map_18.png new file mode 100644 index 0000000..ea879e2 Binary files /dev/null and b/src/assets/images/map_18.png differ diff --git a/src/assets/images/map_20.png b/src/assets/images/map_20.png new file mode 100644 index 0000000..67f6ec0 Binary files /dev/null and b/src/assets/images/map_20.png differ diff --git a/src/assets/images/map_28.png b/src/assets/images/map_28.png new file mode 100644 index 0000000..472e106 Binary files /dev/null and b/src/assets/images/map_28.png differ diff --git a/src/assets/images/map_30.png b/src/assets/images/map_30.png new file mode 100644 index 0000000..6bb11b5 Binary files /dev/null and b/src/assets/images/map_30.png differ diff --git a/src/assets/images/ranking01.png b/src/assets/images/ranking01.png new file mode 100644 index 0000000..8451edf Binary files /dev/null and b/src/assets/images/ranking01.png differ diff --git a/src/assets/images/ranking02.png b/src/assets/images/ranking02.png new file mode 100644 index 0000000..3fb76e8 Binary files /dev/null and b/src/assets/images/ranking02.png differ diff --git a/src/assets/images/ranking03.png b/src/assets/images/ranking03.png new file mode 100644 index 0000000..a25e5e9 Binary files /dev/null and b/src/assets/images/ranking03.png differ diff --git a/src/assets/images/title-big.png b/src/assets/images/title-big.png index fb7764d..0ccaa1d 100644 Binary files a/src/assets/images/title-big.png and b/src/assets/images/title-big.png differ diff --git a/src/assets/images/wechat-img1.png b/src/assets/images/wechat-img1.png new file mode 100644 index 0000000..74841db Binary files /dev/null and b/src/assets/images/wechat-img1.png differ diff --git a/src/assets/images/wechat-img2.png b/src/assets/images/wechat-img2.png new file mode 100644 index 0000000..15a4e0a Binary files /dev/null and b/src/assets/images/wechat-img2.png differ diff --git a/src/assets/styles/font-some.css b/src/assets/styles/font-some.css index 0460bee..a1dc907 100644 --- a/src/assets/styles/font-some.css +++ b/src/assets/styles/font-some.css @@ -1,12 +1,11 @@ .chartNum{ display: flex; justify-content: center; - margin-top: 0.25rem; } .box-items { position: relative; display: flex; - height: 0.6rem; + height: .5rem; text-align: center; } /*滚动数字设置*/ @@ -14,11 +13,9 @@ display: flex; justify-content: center; text-align: center; - width: 0.45rem; - height: 0.6rem; - line-height: 0.6rem; - margin-right: 0.125rem; - border: 1px solid #2C75E0; + width: .225rem; + height: .5rem; + line-height: .4rem; } .number-item span{ position: relative; @@ -32,14 +29,18 @@ .number-item span i{ font-style: normal; position: absolute; - top: 0.1rem; + top: 0; left: 50%; - font-size: 0.325rem; + font-size: 0.375rem; font-weight: bold; - color: #1AC9FF; - transform: translate(-50%,0); - transition: transform 1s ease-in-out; - letter-spacing: 10px; + z-index: 99999; + color: #fff; + background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 20%,rgba(239,252,254,1) 70%); + background: linear-gradient(90deg, rgba(14,197,236,1) 20%,rgba(239,252,254,1) 70%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); } .number-item:last-child { margin-right: 0; diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 91a5c69..55aa16f 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -9,6 +9,13 @@ background: url('~@/assets/images/bg.png') no-repeat top center #02061a; background-size: cover; } +.map-wrapper{ + width: 100%; + height: 100vh; + background: url('~@/assets/images/mapBg.png') no-repeat top left; position: absolute; + left:0; top: 0; + background-size: cover; display: flex; justify-content: space-around; padding-top: 1.25rem; +} .loading { position: fixed; @@ -29,6 +36,7 @@ height: 1.25rem; font-size: .375rem; color: #fff; + z-index: 9999; // &::before, // &::after{ // content: ""; @@ -157,22 +165,76 @@ .pageOne-database { display: flex; justify-content: space-between; - margin-bottom: .575rem; + height: 6.25rem; + margin-top: .1875rem; .database-left, .database-right { width: 5.7875rem; - height: 5.25rem; - background-color: #041231; - overflow: hidden; + height: 5.625rem; + background-color: #041232; } .database-middle { + position: relative; + margin-top: -0.25rem; flex: 1; + display: flex; + justify-content: center; + align-items: center; + & img{ + display: block; + } + .middle-item{ + position: absolute; + width: 1.975rem; + height: 1.75rem; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: center; + background: url('~@/assets/images/database-img2.png') no-repeat top left; + background-size: cover; + p{ + margin-top: .3rem; + font-size: .275rem; + font-weight: 600; + font-style: italic; + color: #44C1EF; + text-shadow: 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1), 0 0 10px rgba(73,223,255,.1); + background: linear-gradient(0deg, #50CEF2 0%, #54D2F3 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: .025rem; + } + &.totalBook{ + top: .85rem; + left: .4125rem; + } + &.fansNum{ + top: 3.575rem; + left: 1.3rem; + } + &.lendingNum{ + top: 3.575rem; + right: 1.6375rem + } + &.cardNum{ + top: .85rem; + right: .55rem; + } + } } } +.small-module{ + height: .4rem; + overflow: hidden; +} + .database-title { height: .6rem; padding-left: .4rem; + margin-top: -0.25rem; font-size: .25rem; line-height: .5625rem; color: #f6f9fe; @@ -283,7 +345,7 @@ width: 2.2rem; font-size: .175rem; padding-left: .2875rem; - margin-top: .625rem; + margin-top: .7rem; p{ position: relative; &::before{ @@ -355,6 +417,50 @@ } +// pageOne 底部图书 +.pageOne-book{ + background-color: #031437; + border: 1px solid #031A47; + margin-top: -0.1875rem; + .database-title{ + width: 14.5rem; + height: .6rem; + background: url('~@/assets/images/title-big.png') no-repeat left top; + background-size: cover; + } + .pageOne-book-content{ + display: flex; + justify-content: flex-start; + align-items: center; + padding-top: .125rem; + .wechat-code{ + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + width: 4.025rem; + height: 5.25rem; + background: url('~@/assets/images/wechat-img1.png') no-repeat left top; + background-size: cover; + margin-top: -0.5rem; + .wechat-img{ + width: 1.9rem; + height: 1.9rem; + background: url('~@/assets/images/wechat-img2.png') no-repeat left top; + background-size: cover; + margin: 0 auto .3rem auto; + text-align: center; + line-height: 1.9rem; + } + span{ + display: block; + font-size: .2rem; + color: #4DDBFF; + text-align: center; + } + } + } +} // .number-scroll { diff --git a/src/main.js b/src/main.js index fa3d70c..a9e1987 100644 --- a/src/main.js +++ b/src/main.js @@ -44,11 +44,9 @@ import { decoration3, decoration5, decoration10, - activeRingChart, - capsuleChart + activeRingChart } from '@jiaminghi/data-view' -Vue.use(capsuleChart) Vue.use(loading) Vue.use(borderBox8) Vue.use(decoration3) diff --git a/src/views/index.vue b/src/views/index.vue index 953e4a2..e7cf13b 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -4,7 +4,7 @@ Loading...
-
{{ active +' / '+ pageData.length }}
+
{{ active +' / '+ pageData.length }}
!isNaN(item)) @@ -140,6 +141,7 @@ export default { }) }, 15) }, + // 定时 initInterval(targetList, time) { const { setNumberTransform } = this @@ -154,24 +156,52 @@ export default { }, // 定时刷新数字翻牌器 timedRefresh(targetList, type) { - let cityTimer - let userTimer + let leftTimer + let middleTimer let deviceTimer - if (type === 'city') { - cityTimer = this.initInterval(targetList, 8000) - } else if (type === 'user') { - userTimer = this.initInterval(targetList, 10000) + if (type === 'middle') { + middleTimer = this.initInterval2(targetList, 8000) + } else if (type === 'left') { + leftTimer = this.initInterval(targetList, 10000) } else if (type === 'device') { deviceTimer = this.initInterval(targetList, 8000) } this.$once('hook:beforeDestroy', () => { - clearInterval(cityTimer) - clearInterval(userTimer) + clearInterval(leftTimer) + clearInterval(middleTimer) clearInterval(deviceTimer) - userTimer = null - cityTimer = null + middleTimer = null + leftTimer = null deviceTimer = null }) + }, + setNumberTransform2(item) { + var numberItems = document.querySelectorAll(`.${item.id} i`) + const numberArr = item.valueArr.filter(item => !isNaN(item)) + for (var index = 0; index < numberItems.length; index++) { + const elem = numberItems[index] + elem.style.transition = 'transform 0s ease-in-out' + elem.style.transform = `translate(-50%,-0%)` + } + setTimeout(() => { + for (var index = 0; index < numberItems.length; index++) { + const elem = numberItems[index] + elem.style.transition = 'transform 1s ease-in-out' + elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)' + } + }, 15) + }, + // 定时 + initInterval2(targetList, time) { + const { setNumberTransform2 } = this + return setInterval((function fn() { + targetList.forEach(t => { + setTimeout(() => { + setNumberTransform2(t) + }, 50) + }) + return fn + })(), time) } } } diff --git a/src/views/map/index.vue b/src/views/map/index.vue index 4bd08dc..3681d2c 100644 --- a/src/views/map/index.vue +++ b/src/views/map/index.vue @@ -1,7 +1,5 @@