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

pageone

master
xuhuajiao 8 months ago
parent
f9df8888e5
commit
d6c03d945e
20 changed files with 756 additions and 427 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/arrow1.png
  2. BIN
      src/assets/images/arrow2.png
  3. BIN
      src/assets/images/database-icon1.png
  4. BIN
      src/assets/images/database-icon2.png
  5. BIN
      src/assets/images/header-left.png
  6. BIN
      src/assets/images/header-right.png
  7. BIN
      src/assets/images/notice.gif
  8. BIN
      src/assets/images/num-img.png
  9. BIN
      src/assets/images/star-1.png
  10. BIN
      src/assets/images/star-2.png
  11. BIN
      src/assets/images/star-3.png
  12. BIN
      src/assets/images/title-big.png
  13. BIN
      src/assets/images/title-small.png
  14. BIN
      src/assets/images/title.png
  15. BIN
      src/assets/images/top-line.png
  16. BIN
      src/assets/images/top.png
  17. 921
      src/assets/styles/index.scss
  18. 4
      src/main.js
  19. 56
      src/views/index.vue
  20. 202
      src/views/pageOne/index.vue

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

Side by Side

After

Width: 22  |  Height: 23  |  Size: 455 B

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

Side by Side

After

Width: 22  |  Height: 23  |  Size: 439 B

BIN
src/assets/images/database-icon1.png
View File

Side by Side

After

Width: 200  |  Height: 88  |  Size: 21 KiB

BIN
src/assets/images/database-icon2.png
View File

Side by Side

After

Width: 200  |  Height: 88  |  Size: 20 KiB

BIN
src/assets/images/header-left.png
View File

Side by Side

Before

Width: 496  |  Height: 84  |  Size: 3.8 KiB

BIN
src/assets/images/header-right.png
View File

Side by Side

Before

Width: 496  |  Height: 84  |  Size: 3.0 KiB

BIN
src/assets/images/notice.gif
View File

Side by Side

Before

Width: 1024  |  Height: 920  |  Size: 129 KiB

BIN
src/assets/images/num-img.png
View File

Side by Side

Before

Width: 220  |  Height: 68  |  Size: 6.1 KiB

BIN
src/assets/images/star-1.png
View File

Side by Side

Before

Width: 700  |  Height: 40  |  Size: 6.4 KiB

BIN
src/assets/images/star-2.png
View File

Side by Side

Before

Width: 700  |  Height: 40  |  Size: 5.5 KiB

BIN
src/assets/images/star-3.png
View File

Side by Side

Before

Width: 700  |  Height: 40  |  Size: 6.7 KiB

BIN
src/assets/images/title-big.png
View File

Side by Side Swipe Overlay

Before

Width: 740  |  Height: 38  |  Size: 5.9 KiB

After

Width: 1173  |  Height: 48  |  Size: 15 KiB

BIN
src/assets/images/title-small.png
View File

Side by Side

After

Width: 483  |  Height: 48  |  Size: 14 KiB

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

Side by Side

Before

Width: 510  |  Height: 38  |  Size: 4.2 KiB

BIN
src/assets/images/top-line.png
View File

Side by Side

Before

Width: 634  |  Height: 86  |  Size: 2.7 KiB

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

Side by Side

Before

Width: 1896  |  Height: 91  |  Size: 44 KiB

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

@ -1,410 +1,601 @@
#screen-container { #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; display: flex;
justify-content: space-between; 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; display: flex;
justify-content: space-between; 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)
} }
} }
} }
} }
} }
}
}
// .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);
// }
// }
// }
// }
// }
// }

4
src/main.js
View File

@ -44,9 +44,11 @@ import {
decoration3, decoration3,
decoration5, decoration5,
decoration10, decoration10,
activeRingChart
activeRingChart,
capsuleChart
} from '@jiaminghi/data-view' } from '@jiaminghi/data-view'
Vue.use(capsuleChart)
Vue.use(loading) Vue.use(loading)
Vue.use(borderBox8) Vue.use(borderBox8)
Vue.use(decoration3) Vue.use(decoration3)

56
src/views/index.vue
View File

@ -4,7 +4,7 @@
<dv-loading>Loading...</dv-loading> <dv-loading>Loading...</dv-loading>
</div> </div>
<Header :header-title="headerTitle" /> <Header :header-title="headerTitle" />
<div style="position: fixed; right: .14rem; top: .14rem; font-size: .14rem; background: rgba(82,146,255,0.2);border: 1px solid #5292FF; padding: .03rem .06rem; line-height: .25rem;">{{ active +' / '+ pageData.length }}</div>
<div style="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;">{{ active +' / '+ pageData.length }}</div>
<section ref="sectionRef"> <section ref="sectionRef">
<keep-alive> <keep-alive>
<PageOne <PageOne
@ -118,6 +118,60 @@ export default {
this.showLoading() this.showLoading()
this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px` this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px`
}, 100) }, 100)
},
// 数字3位数加分隔符
formatter(str) {
const reg = /(?=(?!\b)(\d{3})+$)/g
return str.toString().replace(reg, ',')
},
// 设置文字滚动
setNumberTransform(item) {
const numberItems = document.querySelectorAll(`.${item.id} i`)
// const numberItems = this.$refs[`${item.id}`]
const numberArr = item.valueArr.filter(item => !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
})
} }
} }
} }

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

@ -3,31 +3,40 @@
<div class="pageOne-database"> <div class="pageOne-database">
<div class="database-left"> <div class="database-left">
<h3 class="database-title">到馆统计</h3> <h3 class="database-title">到馆统计</h3>
<ul class="inLib-num">
<li
v-for="(item, index) in userData"
:key="index"
:class="[{'allTotal': item.id === 'allTotal'}, {'currentNum': item.id === 'currentNum'}]"
>
<div class="pageLeft-flop-box">
<div>
<span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
<i v-if="!isNaN(ls)">0123456789</i>
<span v-else>{{ ls }}</span>
</span>
<em>人</em>
</div>
</div>
<div class="flop-item-name">{{ item.name }}</div>
</li>
</ul>
<!-- <dv-capsule-chart :config="config" style="width:300px;height:200px" /> -->
<ul class="pageOne-left-progress">
<li v-for="(item,index) in progressdata" :key="index" :class="[{'blue-progress':item.type===1 || item.type === 2},{'orange-progress':item.type===3 || item.type === 4}]">
<p>{{ item.name }}</p>
<span class="progress-num">{{ item.value }}<i>人</i></span>
<el-progress :percentage="computedPercentage(item)" :stroke-width="8" :show-text="false" />
</li>
</ul>
</div> </div>
<div class="database-middle">中间大数据</div> <div class="database-middle">中间大数据</div>
<div class="database-right"> <div class="database-right">
<h3 class="database-title">热门搜索</h3> <h3 class="database-title">热门搜索</h3>
<div id="tagcloud1" class="tagcloud"> <div id="tagcloud1" class="tagcloud">
<div>自动驾驶</div>
<a href="##">辅助驾驶</a>
<div>AEB</div>
<div href="##"><p>路测</p></div>
<div href="##">量子芯片</div>
<i>光速</i>
<div href="##">激光雷达</div>
<b>纳米科技</b>
<a href="##">电子信息</a>
<a href="##">超级计算机</a>
<div>自动驾驶</div>
<a href="##">辅助驾驶</a>
<div>AEB</div>
<div href="##"><p>路测</p></div>
<div href="##">量子芯片</div>
<i>光速</i>
<div href="##">激光雷达</div>
<b>纳米科技</b>
<a href="##">电子信息</a>
<a href="##">超级计算机</a>
<p v-for="(item,index) in hotTagData" :key="index" class="color1">
<span>{{ item }}</span>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -83,38 +92,30 @@ export default {
return { return {
list: [], list: [],
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', 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: { computed: {
@ -141,7 +142,21 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) 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() { created() {
this.list = data this.list = data
@ -150,21 +165,72 @@ export default {
clearTimeout(this.timer2) clearTimeout(this.timer2)
}, },
mounted() { mounted() {
// 获取全用户数据
setTimeout(() => {
this.initDataPreview()
}, 700)
this.tagAnimation() this.tagAnimation()
}, },
methods: { 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() { tagAnimation() {
tagCloud({ tagCloud({
selector: '#tagcloud1', // 元素选择器，id 或 class 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 mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 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 {
<style lang="scss"> <style lang="scss">
@import "~@/assets/styles/index.scss"; @import "~@/assets/styles/index.scss";
.tagcloud { .tagcloud {
width: 5.5rem;
width: 5rem;
height: 5rem; height: 5rem;
margin: .2rem;
margin-left: .3rem;
margin: 0 0 0 .45rem;
overflow: hidden; overflow: hidden;
a {
text-decoration: none;
cursor: pointer;
p{
border-top: 2px dotted #1F6374;
border-left: 2px dotted #184D61;
border-right: 2px dotted #184D61;
border-bottom: 2px dotted RGBA(24, 77, 97, 0.3);
padding: .0625rem;
span{
display: block;
padding: .075rem 8px;
white-space: nowrap;
}
&.color1{
span{
border: 1px solid #30ADA6;
background-color: #106B66;
color: #51EAE2;
z-index: 99;
}
}
} }
} }
@ -218,4 +299,5 @@ export default {
} }
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save