diff --git a/src/assets/images/arrow1.png b/src/assets/images/arrow1.png new file mode 100644 index 0000000..3435700 Binary files /dev/null and b/src/assets/images/arrow1.png differ diff --git a/src/assets/images/arrow2.png b/src/assets/images/arrow2.png new file mode 100644 index 0000000..8f1e023 Binary files /dev/null and b/src/assets/images/arrow2.png differ diff --git a/src/assets/images/database-icon1.png b/src/assets/images/database-icon1.png new file mode 100644 index 0000000..c348112 Binary files /dev/null and b/src/assets/images/database-icon1.png differ diff --git a/src/assets/images/database-icon2.png b/src/assets/images/database-icon2.png new file mode 100644 index 0000000..2f75942 Binary files /dev/null and b/src/assets/images/database-icon2.png differ diff --git a/src/assets/images/header-left.png b/src/assets/images/header-left.png deleted file mode 100644 index c713888..0000000 Binary files a/src/assets/images/header-left.png and /dev/null differ diff --git a/src/assets/images/header-right.png b/src/assets/images/header-right.png deleted file mode 100644 index 18abf63..0000000 Binary files a/src/assets/images/header-right.png and /dev/null differ diff --git a/src/assets/images/notice.gif b/src/assets/images/notice.gif deleted file mode 100644 index 17f9f0d..0000000 Binary files a/src/assets/images/notice.gif and /dev/null differ diff --git a/src/assets/images/num-img.png b/src/assets/images/num-img.png deleted file mode 100644 index 01bd009..0000000 Binary files a/src/assets/images/num-img.png and /dev/null differ diff --git a/src/assets/images/star-1.png b/src/assets/images/star-1.png deleted file mode 100644 index d2f0f81..0000000 Binary files a/src/assets/images/star-1.png and /dev/null differ diff --git a/src/assets/images/star-2.png b/src/assets/images/star-2.png deleted file mode 100644 index c00d713..0000000 Binary files a/src/assets/images/star-2.png and /dev/null differ diff --git a/src/assets/images/star-3.png b/src/assets/images/star-3.png deleted file mode 100644 index 82407a5..0000000 Binary files a/src/assets/images/star-3.png and /dev/null differ diff --git a/src/assets/images/title-big.png b/src/assets/images/title-big.png index 2d5a0b9..fb7764d 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/title-small.png b/src/assets/images/title-small.png new file mode 100644 index 0000000..83c229e Binary files /dev/null and b/src/assets/images/title-small.png differ diff --git a/src/assets/images/title.png b/src/assets/images/title.png deleted file mode 100644 index b5ddaea..0000000 Binary files a/src/assets/images/title.png and /dev/null differ diff --git a/src/assets/images/top-line.png b/src/assets/images/top-line.png deleted file mode 100644 index 33beb85..0000000 Binary files a/src/assets/images/top-line.png and /dev/null differ diff --git a/src/assets/images/top.png b/src/assets/images/top.png deleted file mode 100644 index a4e606f..0000000 Binary files a/src/assets/images/top.png and /dev/null differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6877614..91a5c69 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,410 +1,601 @@ #screen-container { - width: 100%; - height: 100vh; - // padding: 0 0.175rem; - font-size: 0.25rem; - line-height: 0.35rem; - color: #fff; - overflow: hidden; - background: url('~@/assets/images/bg.png') no-repeat top center #02061A; - background-size: cover; + width: 100%; + height: 100vh; + // padding: 0 0.175rem; + font-size: .3125rem; + line-height: .4375rem; + color: #fff; + overflow: hidden; + background: url('~@/assets/images/bg.png') no-repeat top center #02061a; + background-size: cover; } -.loading{ - position: fixed; - top: 1rem; - width: 100%; - height:100%; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0,0,0,0.9); - z-index: 99999999; +.loading { + position: fixed; + top: 1.25rem; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.9); + z-index: 99999999; } // 头部主题标题 -.header-container{ - position: relative; - width: 100%; - height: 1rem; - font-size: 0.3rem; - color: #fff; - // &::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; - width: 15.67rem; - height: 1rem; - margin: 0 auto; - background: url('~@/assets/images/header-bg.png') no-repeat top left; - background-size: cover; - h2{ - font-size: 0.3rem; - font-weight: bold; - line-height: .6rem; - text-align: center; - /* 文字渐变色 */ - background: -webkit-linear-gradient(180deg, #fff 30%, #77BAFF 100%); - background: linear-gradient(180deg, #fff 30%, #77BAFF 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; - /* 底部阴影 */ - text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); - } - } - .header-text{ - position: absolute; - - } - .header-weather { - top: .15rem; - right: 0.08rem; - width: 2.3rem; - overflow: hidden; - } - .header-date { - top: .17rem; - left: .17rem; - display: flex; - justify-content: flex-start; - align-items: center; - .time{ - font-size: .3rem; - font-weight: bold; - line-height: .3rem; - padding-right: .17rem; - border-right: 1px solid rgba(255,255,255,.5); - } - .time-other{ - font-size: .14rem; - line-height: .22rem; - padding-left: .17rem; - span{ - display: block; - } - } - } +.header-container { + position: relative; + width: 100%; + height: 1.25rem; + font-size: .375rem; + color: #fff; + // &::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; + width: 19.5875rem; + height: 1.25rem; + margin: 0 auto; + background: url('~@/assets/images/header-bg.png') no-repeat top left; + background-size: cover; + h2 { + font-size: .375rem; + font-weight: bold; + line-height: .75rem; + text-align: center; + background: -webkit-linear-gradient(180deg, #fff 30%, #77baff 100%); + background: linear-gradient(180deg, #fff 30%, #77baff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); + } + } + .header-text { + position: absolute; + } + .header-weather { + top: .1875rem; + width: 3.125rem; + right: -.2rem; + overflow: hidden; + } + .header-date { + top: .2125rem; + left: .2125rem; + display: flex; + justify-content: flex-start; + align-items: center; + .time { + font-size: .375rem; + font-weight: bold; + line-height: .375rem; + padding-right: .2125rem; + border-right: 1px solid rgba(255, 255, 255, 0.5); + } + .time-other { + font-size: .175rem; + line-height: .275rem; + padding-left: .2125rem; + span { + display: block; + } + } + } } -// 头部动态效果 -.line1, -.line2{ - position: absolute; - top: 0; -} +// // 头部动态效果 +// .line1, +// .line2{ +// position: absolute; +// top: 0; +// } -.line1{ - right: 632px; - transform: rotateY(-180deg); -} +// .line1{ +// right: 632px; +// transform: rotateY(-180deg); +// } -.line2{ - left: 632px; -} +// .line2{ +// left: 632px; +// } -.top-line1, -.top-line2{ - display: block; - width: 7.925rem; - height: 1.075rem; - animation: topline 4s linear infinite both; -} +// .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-line1{ +// background: url('~@/assets/images/top-line.png') no-repeat; +// } + +// .top-line2{ +// 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; +// } +// } + +// 底部底色 +.bottom-bg { + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 19.775rem; + height: .6rem; + background: url('~@/assets/images/bottom-bg.png') no-repeat top left; + background-size: cover; } -@keyframes topline { - from { - width: 0; - } - 50%, - to { - width: 643px; - } +// pageOne +.pageOne-database { + display: flex; + justify-content: space-between; + margin-bottom: .575rem; + .database-left, + .database-right { + width: 5.7875rem; + height: 5.25rem; + background-color: #041231; + overflow: hidden; + } + .database-middle { + flex: 1; + } } -.bottom-bg{ - position: fixed; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 15.82rem; - height: .48rem; - background: url('~@/assets/images/bottom-bg.png') no-repeat top left; - background-size: cover; +.database-title { + height: .6rem; + padding-left: .4rem; + font-size: .25rem; + line-height: .5625rem; + color: #f6f9fe; + text-shadow: 0px 2px 8px rgba(0, 9, 35, 1); + background: url('~@/assets/images/title-small.png') no-repeat -0.2rem top; + background-size: cover; } -// pageOne -.pageOne-database{ +.inLib-num{ display: flex; justify-content: space-between; - margin-bottom: .46rem; - .database-left, - .database-right{ - width: 463px; - height: 419px; - background-color: #041231; + align-items: center; + flex-wrap: nowrap; + padding: .625rem .4rem 0 .125rem; + .allTotal{ + width: 2.5rem; + height: 1.1rem; + padding-left: 1.2125rem; + background: url('~@/assets/images/database-icon1.png') no-repeat left top; + background-size: 100% 100%; } - .database-middle{ - flex: 1 ; + .currentNum{ + width: 2.5rem; + height: 1.1rem; + padding-left: 1.2125rem; + background: url('~@/assets/images/database-icon2.png') no-repeat left top; + background-size: 100% 100%; } - .database-title{ +} - } +.flop-figure { + position: relative; + display: inline-block; + width: .275rem; + height: 100%; + line-height: .175rem; + overflow: hidden; + writing-mode: vertical-lr; + text-orientation: upright; + i{ + position: absolute; + text-align: center; + transition: transform 0.6s ease-in-out; + color: #fff; + background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); + } } +.pageLeft-flop-box { + position: relative; + height: .325rem; + margin-top: .125rem; + overflow: hidden; + & div:first-child { + height: .325rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: flex-start; + } + .flop-figure { + width: .275rem; + i { + font-size: .275rem; + font-weight: bold; + } + } + .flop-comma { + margin-left: -0.025rem; + span { + left: 0; + font-size: .275rem; + color: #fff; + background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); + } + } + & em{ + font-style: normal; + font-size: .175rem; + font-weight: bold; + color: #A8CBF6; + height: .375rem; + } +} +.flop-item-name{ + font-size: .1875rem; +} -// 主题内部部分 -.screen-main{ +// 左边进度条 +.pageOne-left-progress{ display: flex; justify-content: space-between; - height: calc(100% - 91px); - margin: 0.0625rem 0 0.5rem 0; - padding: 0 0.325rem; - overflow: hidden; - .screen-left, - .screen-right{ - width: 6.375rem; - } - .screen-middle{ - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-between; - margin: 0 0.5rem; - } - .screen-item{ - margin-top: 0.25rem; - } - .common-title{ - width: 100%; - height: 0.475rem; - line-height: 0.475rem; - padding-left: 0.525rem; - font-size: 0.325rem; - background: url('~@/assets/images/title.png') no-repeat center center; - background-size: cover; - font-family: 'YouSheBiaoTiHei'; - letter-spacing: 0.1rem; - } - .module-content{ - border: 1px solid #2C75E0; - box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5); - } - .small-module{ - height: 3.75rem; - } - .medium-module{ - height: 4.125rem; - } - .big-module{ - height: 6.8125rem; - // margin:0.1625rem 0; - } - - //排行榜-推荐 - list - .lending-ranking{ - .module-content{ - padding: 0 0.25rem; - overflow: hidden; - } - } - .book-list-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.1rem 0.25rem; - .book-img{ - width: 0.825rem; - height: 1.075rem; - margin-right: 0.35rem; - background: url('~@/assets/images/default-img.png') no-repeat center center; - background-size: contain; - display: flex; - align-items: center; - overflow: hidden; - img{ - display: block; - width: 100%; - // height: 100%; - } - } - .book-info{ - flex: 1; - margin-right: 0.35rem; - h4{ - font-size: 0.25rem; - font-weight: normal; - } - p{ - font-size: 0.2rem; - } - } - .ranking-num{ - display: flex; - justify-content: space-between; - align-items: center; - .icon{ - width: 0.5625rem; - height: 0.5625rem; - margin-right: 0.175rem; + flex-wrap: wrap; + padding: 0 .475rem 0 .35rem; + li{ + position: relative; + width: 2.2rem; + font-size: .175rem; + padding-left: .2875rem; + margin-top: .625rem; + p{ + position: relative; + &::before{ + position: absolute; + left: -0.2875rem; + top: .075rem; + content: ""; + width: .275rem; + height: .2875rem; + background: url('~@/assets/images/arrow2.png') no-repeat left top; + background-size: .275rem .2875rem; } } - } - - // 进出馆人数 - .accessToLib-container{ - display: flex; - justify-content: space-between; - text-align: center; - align-items: center; - margin: 0.375rem 0 .25rem 0; - .accessToLib-item{ - width: 2.75rem; - .panel-num{ - display: block; - height: 0.85rem; - margin-top: 0.125rem; - line-height: 0.85rem; - font-size: 0.325rem; - font-weight: bold; - text-align: center; - color: #1AC9FF; - background: url('~@/assets/images/num-img.png') no-repeat center center; - background-size: cover; + .progress-num{ + position: absolute; + right: 0; + top: 0; + font-size: .25rem; + font-weight: bold; + color: #fff; + background: -webkit-linear-gradient(to bottom, #fff 40%, #69A4D6 60%); + background: linear-gradient(to bottom, #fff 40%, #69A4D6 60%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); + i{ + font-size: .15rem; + font-style: normal; } } - } - - // 视频 - .video-box{ - width: 100%; - height: 5.2125rem; - } - - // 阅读之星 - .read-star{ - flex: 1; - .common-title{ - background: url('~@/assets/images/title-big.png') no-repeat center center; - background-size: cover; - } - .module-content{ - padding: .25rem; - overflow: hidden; - .readstart-item{ - display: flex; - justify-content: space-between; - align-items: center; - height: 0.5rem; - padding: 0 0.25rem; - font-size: 0.2rem; - margin-bottom: 0.125rem; - background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%); - .icon-star-1{ - width: 0.35rem; - height: 0.3rem; - margin-left: -0.05rem; - margin-right: 0.2rem; - } - .icon-star-2{ - width: 0.375rem; - height: 0.3rem; - margin-left: -0.0625rem; - margin-right: 0.2rem; + .el-progress { + .el-progress-bar { + .el-progress-bar__outer { + background: #122550; } - .icon-star-3{ - width: 0.275rem; - height: 0.3rem; - margin-right: 0.25rem; - } - .star-num{ - display: block; - width: 0.25rem; - height: 0.25rem; - margin-right: 0.25rem; - font-size: 0.2rem; - line-height: 0.25rem; - text-align: center; - border-radius: 50%; - color: #1AC9FF; - border: 1px solid #1AC9FF; - } - .star-info{ - flex: 1; - margin-right: 0.25rem; - } - &.star1-bg{ - background: url('~@/assets/images/star-1.png') no-repeat left top; - background-size: contain; - } - &.star2-bg{ - background: url('~@/assets/images/star-2.png') no-repeat left top; - background-size: contain; - } - &.star3-bg{ - background: url('~@/assets/images/star-3.png') no-repeat left top; - background-size: contain; + .el-progress-bar__inner { + background: linear-gradient(to right, #7ACAEE, #397FFF) } } - } - } - - // 通知公告 - .notice{ - .module-content{ - display: flex; - justify-content: space-between; - width: 100%; - padding: 0.25rem 0.375rem 0.5rem 0.375rem; - .notice-icon-gif{ - display: block; - width: 2.375rem; - height: 2.875rem; - background: url('~@/assets/images/notice.gif') no-repeat left top; - background-size: contain; - margin-right: 0.15rem; - } - .seamless-warp{ - width: calc(100vw); - height: 3.1rem; - overflow: hidden; - .notice-txt { - animation: myMove 20s linear infinite; - animation-fill-mode: forwards; + &.orange-progress{ + & p{ + &::before{ + background: url('~@/assets/images/arrow1.png') no-repeat left top; + background-size: .275rem .2875rem; } - @keyframes myMove { - 0% { - transform: translateY(2rem); + } + .progress-num{ + background: -webkit-linear-gradient(to bottom, #fff 40%, #FF9239 60%); + background: linear-gradient(to bottom, #fff 40%, #FF9239 60%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); + } + .el-progress { + .el-progress-bar { + .el-progress-bar__outer { + background: #122550; } - 100% { - transform: translateY(-6rem); + .el-progress-bar__inner { + background: linear-gradient(to right, #FF9239, #FFB84B) } } } } } -} \ No newline at end of file +} + + + + +// .number-scroll { +// position: relative; +// color: #4a90e2; +// font-size: 36px; +// height: 40px; +// display: inline-flex; +// align-items: center; +// justify-content: center; +// } + +// 主题内部部分 +// .screen-main{ +// display: flex; +// justify-content: space-between; +// height: calc(100% - 91px); +// margin: 0.0625rem 0 0.5rem 0; +// padding: 0 0.325rem; +// overflow: hidden; +// .screen-left, +// .screen-right{ +// width: 6.375rem; +// } +// .screen-middle{ +// flex: 1; +// display: flex; +// flex-direction: column; +// justify-content: space-between; +// margin: 0 0.5rem; +// } +// .screen-item{ +// margin-top: 0.25rem; +// } +// .common-title{ +// width: 100%; +// height: 0.475rem; +// line-height: 0.475rem; +// padding-left: 0.525rem; +// font-size: 0.325rem; +// background: url('~@/assets/images/title.png') no-repeat center center; +// background-size: cover; +// font-family: 'YouSheBiaoTiHei'; +// letter-spacing: 0.1rem; +// } +// .module-content{ +// border: 1px solid #2C75E0; +// box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5); +// } +// .small-module{ +// height: 3.75rem; +// } +// .medium-module{ +// height: 4.125rem; +// } +// .big-module{ +// height: 6.8125rem; +// // margin:0.1625rem 0; +// } + +// //排行榜-推荐 - list +// .lending-ranking{ +// .module-content{ +// padding: 0 0.25rem; +// overflow: hidden; +// } +// } +// .book-list-item{ +// display: flex; +// justify-content: space-between; +// align-items: center; +// padding: 0.1rem 0.25rem; +// .book-img{ +// width: 0.825rem; +// height: 1.075rem; +// margin-right: 0.35rem; +// background: url('~@/assets/images/default-img.png') no-repeat center center; +// background-size: contain; +// display: flex; +// align-items: center; +// overflow: hidden; +// img{ +// display: block; +// width: 100%; +// // height: 100%; +// } +// } +// .book-info{ +// flex: 1; +// margin-right: 0.35rem; +// h4{ +// font-size: 0.25rem; +// font-weight: normal; +// } +// p{ +// font-size: 0.2rem; +// } +// } +// .ranking-num{ +// display: flex; +// justify-content: space-between; +// align-items: center; +// .icon{ +// width: 0.5625rem; +// height: 0.5625rem; +// margin-right: 0.175rem; +// } +// } +// } + +// // 进出馆人数 +// .accessToLib-container{ +// display: flex; +// justify-content: space-between; +// text-align: center; +// align-items: center; +// margin: 0.375rem 0 .25rem 0; +// .accessToLib-item{ +// width: 2.75rem; +// .panel-num{ +// display: block; +// height: 0.85rem; +// margin-top: 0.125rem; +// line-height: 0.85rem; +// font-size: 0.325rem; +// font-weight: bold; +// text-align: center; +// color: #1AC9FF; +// background: url('~@/assets/images/num-img.png') no-repeat center center; +// background-size: cover; +// } +// } +// } + +// // 视频 +// .video-box{ +// width: 100%; +// height: 5.2125rem; +// } + +// // 阅读之星 +// .read-star{ +// flex: 1; +// .common-title{ +// background: url('~@/assets/images/title-big.png') no-repeat center center; +// background-size: cover; +// } +// .module-content{ +// padding: .25rem; +// overflow: hidden; +// .readstart-item{ +// display: flex; +// justify-content: space-between; +// align-items: center; +// height: 0.5rem; +// padding: 0 0.25rem; +// font-size: 0.2rem; +// margin-bottom: 0.125rem; +// background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%); +// .icon-star-1{ +// width: 0.35rem; +// height: 0.3rem; +// margin-left: -0.05rem; +// margin-right: 0.2rem; +// } +// .icon-star-2{ +// width: 0.375rem; +// height: 0.3rem; +// margin-left: -0.0625rem; +// margin-right: 0.2rem; +// } +// .icon-star-3{ +// width: 0.275rem; +// height: 0.3rem; +// margin-right: 0.25rem; +// } +// .star-num{ +// display: block; +// width: 0.25rem; +// height: 0.25rem; +// margin-right: 0.25rem; +// font-size: 0.2rem; +// line-height: 0.25rem; +// text-align: center; +// border-radius: 50%; +// color: #1AC9FF; +// border: 1px solid #1AC9FF; +// } +// .star-info{ +// flex: 1; +// margin-right: 0.25rem; +// } +// &.star1-bg{ +// background: url('~@/assets/images/star-1.png') no-repeat left top; +// background-size: contain; +// } +// &.star2-bg{ +// background: url('~@/assets/images/star-2.png') no-repeat left top; +// background-size: contain; +// } +// &.star3-bg{ +// background: url('~@/assets/images/star-3.png') no-repeat left top; +// background-size: contain; +// } +// } + +// } +// } + +// // 通知公告 +// .notice{ +// .module-content{ +// display: flex; +// justify-content: space-between; +// width: 100%; +// padding: 0.25rem 0.375rem 0.5rem 0.375rem; +// .notice-icon-gif{ +// display: block; +// width: 2.375rem; +// height: 2.875rem; +// background: url('~@/assets/images/notice.gif') no-repeat left top; +// background-size: contain; +// margin-right: 0.15rem; +// } +// .seamless-warp{ +// width: calc(100vw); +// height: 3.1rem; +// overflow: hidden; +// .notice-txt { +// animation: myMove 20s linear infinite; +// animation-fill-mode: forwards; +// } +// @keyframes myMove { +// 0% { +// transform: translateY(2rem); +// } +// 100% { +// transform: translateY(-6rem); +// } +// } +// } +// } +// } +// } diff --git a/src/main.js b/src/main.js index a9e1987..fa3d70c 100644 --- a/src/main.js +++ b/src/main.js @@ -44,9 +44,11 @@ import { decoration3, decoration5, decoration10, - activeRingChart + activeRingChart, + capsuleChart } 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 cba687a..953e4a2 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -4,7 +4,7 @@ Loading...
-
{{ active +' / '+ pageData.length }}
+
{{ active +' / '+ pageData.length }}
!isNaN(item)) + numberItems.forEach((t) => { + t.style.transition = 'transform 0s ease-in-out' + t.style.transform = `translateY(-0%)` + }) + setTimeout(() => { + numberItems.forEach((ls, index) => { + ls.style.transition = 'transform 0.8s ease-in-out' + ls.style.transform = `translateY(-${numberArr[index] * 10}%)` + }) + }, 15) + }, + // 定时 + initInterval(targetList, time) { + const { setNumberTransform } = this + return setInterval((function fn() { + targetList.forEach(t => { + setTimeout(() => { + setNumberTransform(t) + }, 50) + }) + return fn + })(), time) + }, + // 定时刷新数字翻牌器 + timedRefresh(targetList, type) { + let cityTimer + let userTimer + let deviceTimer + if (type === 'city') { + cityTimer = this.initInterval(targetList, 8000) + } else if (type === 'user') { + userTimer = this.initInterval(targetList, 10000) + } else if (type === 'device') { + deviceTimer = this.initInterval(targetList, 8000) + } + this.$once('hook:beforeDestroy', () => { + clearInterval(cityTimer) + clearInterval(userTimer) + clearInterval(deviceTimer) + userTimer = null + cityTimer = null + deviceTimer = null + }) } } } diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue index 44c5466..70a5442 100644 --- a/src/views/pageOne/index.vue +++ b/src/views/pageOne/index.vue @@ -3,31 +3,40 @@

到馆统计

+
    +
  • +
    +
    + + 0123456789 + {{ ls }} + + 人 +
    +
    +
    {{ item.name }}
    +
    • +
+ +
    +
  • +

    {{ item.name }}

    + {{ item.value }}人 + +
    • +
中间大数据

热门搜索

-
自动驾驶
- 辅助驾驶 -
AEB
-

路测

-
量子芯片
- 光速 -
激光雷达
- 纳米科技 - 电子信息 - 超级计算机 -
自动驾驶
- 辅助驾驶 -
AEB
-

路测

-
量子芯片
- 光速 -
激光雷达
- 纳米科技 - 电子信息 - 超级计算机 +

+ {{ item }} +

@@ -83,38 +92,30 @@ export default { return { list: [], defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', - mySwipera1: { - notNextTick: true, - noSwiping: true, - observer: true, // 开启动态检查器，监测swiper和slide - observeParents: true, // 监测Swiper 的祖/父元素 - speed: 4000, // 切换速度 - loop: true, // 循环 - slidesPerView: 6, // 显示数量 - spaceBetween: 10, // 间隔 - freeMode: true, // 自动贴合 - autoplay: { // 自动播放 - delay: 0, // 自动切换的时间间隔 - stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 - disableOnInteraction: false// 用户操作后是否停止 - } - }, - mySwipera2: { - notNextTick: true, - observer: true, // 开启动态检查器，监测swiper和slide - observeParents: true, // 监测Swiper 的祖/父元素 - speed: 4000, // 切换速度 - loop: true, // 循环 - slidesPerView: 6, // 显示数量 - spaceBetween: 10, // 间隔 - freeMode: true, // 自动贴合 - autoplay: { // 自动播放 - delay: 0, // 自动切换的时间间隔 - stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换 - disableOnInteraction: false, // 用户操作后是否停止 - reverseDirection: true// 方向切换 + userData: [], + progressdata: [ + { + name: '今日到馆', + value: 2300, + type: 1 + }, + { + name: '本月到馆', + value: 5630, + type: 2 + }, + { + name: '昨日到馆', + value: 1269, + type: 3 + }, + { + name: '上月到馆', + value: 6457, + type: 4 } - } + ], + hotTagData: ['呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事', '呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事'] } }, computed: { @@ -141,7 +142,21 @@ export default { singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000 // 单步运动停止的时间(默认值1000ms) } + }, + computedPercentage() { + return (item) => { + if (item.type === 1) { + return item.value > this.getType3Value() ? 100 : 70 + } else if (item.type === 2) { + return item.value > this.getType4Value() ? 100 : 70 + } else if (item.type === 3) { + return item.value > this.getType1Value() ? 100 : 70 + } else if (item.type === 4) { + return item.value > this.getType2Value() ? 100 : 70 + } + } } + }, created() { this.list = data @@ -150,21 +165,72 @@ export default { clearTimeout(this.timer2) }, mounted() { + // 获取全用户数据 + setTimeout(() => { + this.initDataPreview() + }, 700) this.tagAnimation() }, methods: { + getType1Value() { + const type1Item = this.progressdata.find(item => item.type === 1) + return type1Item ? type1Item.value : 0 + }, + getType2Value() { + const type2Item = this.progressdata.find(item => item.type === 2) + return type2Item ? type2Item.value : 0 + }, + getType3Value() { + const type3Item = this.progressdata.find(item => item.type === 3) + return type3Item ? type3Item.value : 0 + }, + getType4Value() { + const type4Item = this.progressdata.find(item => item.type === 4) + return type4Item ? type4Item.value : 0 + }, tagAnimation() { tagCloud({ selector: '#tagcloud1', // 元素选择器，id 或 class - fontsize: 26, // 基本字体大小, 默认16，单位px - radius: 260, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60] + fontsize: 24, // 基本字体大小, 默认16，单位px + radius: 360, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60] mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 - multicolour: true // 彩色字体，颜色随机，取值：true(默认),false + multicolour: false // 彩色字体，颜色随机，取值：true(默认),false + }) + }, + + initDataPreview() { + // 数据概览 + const previewData = { + 'code': 0, + 'data': { + 'allUserNumCount': 224771, + 'allUserOpenNumCount': 68 + }, + 'message': 'success' + } + if (previewData.code !== 0) return + this.allUserNumCount = previewData.data.allUserNumCount + this.userData = [] + this.userData.push({ + id: 'allTotal', + name: '本年累计到馆', + value: this.$parent.formatter(previewData.data.allUserNumCount), + valueArr: this.$parent.formatter(previewData.data.allUserNumCount).split('') + }, { + id: 'currentNum', + name: '当前在馆人数', + value: this.$parent.formatter(previewData.data.allUserOpenNumCount), + valueArr: this.$parent.formatter(previewData.data.allUserOpenNumCount).split('') }) + console.log('userData', this.userData) + setTimeout(() => { + this.$parent.timedRefresh(this.userData, 'user') + }, 1000) } + } } @@ -173,14 +239,29 @@ export default {