You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
836 lines
20 KiB
836 lines
20 KiB
#screen-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-size: .3125rem;
|
|
line-height: .4375rem;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
background: url('~@/assets/images/bg.png') no-repeat top center #02061a;
|
|
}
|
|
|
|
.page-wrapper{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #001244;
|
|
padding-top: 1.5625rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading {
|
|
position: fixed;
|
|
top: 0;
|
|
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: 1.25rem;
|
|
font-size: .375rem;
|
|
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;
|
|
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{
|
|
// 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;
|
|
// }
|
|
// }
|
|
|
|
// 底部底色
|
|
.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;
|
|
z-index: 999;
|
|
}
|
|
|
|
// pageOne
|
|
.pageOne-database {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 6.25rem;
|
|
margin-top: .1875rem;
|
|
.database-left,
|
|
.database-right {
|
|
width: 5.7875rem;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
.inLib-num{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
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%;
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
// 左边进度条
|
|
.pageOne-left-progress{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 .475rem 0 .35rem;
|
|
li{
|
|
position: relative;
|
|
width: 2.2rem;
|
|
font-size: .175rem;
|
|
padding-left: .2875rem;
|
|
margin-top: .7rem;
|
|
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;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.el-progress {
|
|
.el-progress-bar {
|
|
.el-progress-bar__outer {
|
|
background: #122550;
|
|
}
|
|
.el-progress-bar__inner {
|
|
background: linear-gradient(to right, #7ACAEE, #397FFF)
|
|
}
|
|
}
|
|
}
|
|
&.orange-progress{
|
|
& p{
|
|
&::before{
|
|
background: url('~@/assets/images/arrow1.png') no-repeat left top;
|
|
background-size: .275rem .2875rem;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.el-progress-bar__inner {
|
|
background: linear-gradient(to right, #FF9239, #FFB84B)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 地图页
|
|
.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;
|
|
.map-content{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 1.275rem .5rem .625rem .5rem;
|
|
height: 100vh;
|
|
.database-title{
|
|
width: 100%;
|
|
height: .3375rem;
|
|
padding-left: .35rem;
|
|
margin-top: 0;
|
|
line-height: 0;
|
|
background: url('~@/assets/images/title-middle.png') no-repeat left top;
|
|
background-size: cover;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lib-info{
|
|
width: 5.9375rem;
|
|
background-color: rgba(10, 26, 66, 0.6);
|
|
.lib-content{
|
|
padding: .375rem .35rem 0 .4rem;
|
|
}
|
|
.lib-cont01{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: .325rem;
|
|
}
|
|
.lib-cont-item {
|
|
li{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 2.5rem;
|
|
height: 1.05rem;
|
|
font-size: .225rem;
|
|
background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0));
|
|
border-radius: 4px;
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 2rem;
|
|
height: .025rem;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(142, 176, 239,0.2) 20%,
|
|
rgba(142, 176, 239,0.5) 40%,
|
|
rgba(142, 176, 239,0.6) 50%,
|
|
rgba(142, 176, 239,0.5) 60%,
|
|
rgba(142, 176, 239,0.2) 80%,
|
|
rgba(0,0,0,0) 100%
|
|
);
|
|
}
|
|
img{
|
|
display: block;
|
|
width: .725rem;
|
|
height: .65rem;
|
|
margin-right: .125rem;
|
|
}
|
|
p{
|
|
color: #B5C1D1;
|
|
line-height: 0.45rem;
|
|
span{
|
|
display: block;
|
|
&:last-child{
|
|
font-size: .3rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
text-shadow:
|
|
0 0 10px rgba(18,104,245, 0.24),
|
|
0 0 20px rgba(18,104,245, 0.24),
|
|
0 0 30px rgba(18,104,245, 0.24),
|
|
0 0 40px rgba(18,104,245, 0.24),
|
|
0 0 50px rgba(18,104,245, 0.24),
|
|
0 0 60px rgba(18,104,245, 0.24),
|
|
0 0 70px rgba(18,104,245, 0.24),
|
|
0 0 80px rgba(18,104,245, 0.24),
|
|
0 0 90px rgba(18,104,245, 0.24),
|
|
0 0 100px rgba(18,104,245, 0.24);
|
|
i{
|
|
color: #B5C1D1;
|
|
font-size: .2rem;
|
|
font-weight: normal;
|
|
padding-left: .075rem;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.lib-cont02{
|
|
position: relative;
|
|
margin: .1625rem 0 .1rem 0;
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
right: 1px;
|
|
bottom: 0;
|
|
width: .775rem;
|
|
height: .5rem;
|
|
background: url('~@/assets/images/map_30.png') no-repeat left top;
|
|
background-size: cover;
|
|
opacity: .5;
|
|
}
|
|
li{
|
|
width: 100%;
|
|
p{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 1.05rem;
|
|
align-items: center;
|
|
span{
|
|
&:last-child{
|
|
width: 2.375rem;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.lib-text{
|
|
width: 100%;
|
|
height: calc(100vh - 8.625rem);
|
|
font-size: .225rem;
|
|
line-height: .35rem;
|
|
background: linear-gradient(-180deg, rgba(40, 74, 142, 0.4),rgba(0,0,0,0));
|
|
border-radius: 4px;
|
|
padding: .25rem .2875rem 0 .2875rem;
|
|
color: #ADC7FF;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
.map-hx-bg{
|
|
width: 16.325rem;
|
|
height: 11.3125rem;
|
|
background: url('~@/assets/images/map-hx-dot.png') no-repeat top left;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-45%,-50%);
|
|
}
|
|
.map-hx-small{
|
|
width: 11.3125rem;
|
|
height: 9.15rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: url('~@/assets/images/map-hx-small.png') no-repeat center center;
|
|
background-size: cover;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-58%,-45%);
|
|
}
|
|
.map-hx-big{
|
|
width: 12.5rem;
|
|
height: 12.5rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: url('~@/assets/images/map-hx-big2.png') no-repeat center center;
|
|
background-size: cover;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-58%,-40%);
|
|
animation: rotateTrack 40s infinite linear;
|
|
}
|
|
@keyframes rotateTrack {
|
|
0% {
|
|
transform: translate(-58%,-50%) rotateX(40deg) rotateZ(0);
|
|
}
|
|
100% {
|
|
transform: translate(-58%,-50%) rotateX(40deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
.read-num{
|
|
width: 5.9375rem;
|
|
// height: 10.45rem;
|
|
background-color: rgba(10, 26, 66, .6);
|
|
.online{
|
|
height: 1.6875rem;
|
|
background: url('~@/assets/images/map_03.png') no-repeat left top;
|
|
background-size: 1.9rem 1.525rem;
|
|
margin: .25rem 0 .4rem 0;
|
|
padding: 0 .15rem 0 2.25rem;
|
|
font-size: .25rem;
|
|
color: #C8DFFF;
|
|
// line-height: .5rem;
|
|
p{
|
|
padding-top: .25rem;
|
|
}
|
|
.num{
|
|
span{
|
|
font-size: .6rem;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: #fff;
|
|
text-shadow:
|
|
0 0 10px rgba(18,104,245, 0.24),
|
|
0 0 20px rgba(18,104,245, 0.24),
|
|
0 0 30px rgba(18,104,245, 0.24),
|
|
0 0 40px rgba(18,104,245, 0.24),
|
|
0 0 50px rgba(18,104,245, 0.24),
|
|
0 0 60px rgba(18,104,245, 0.24),
|
|
0 0 70px rgba(18,104,245, 0.24),
|
|
0 0 80px rgba(18,104,245, 0.24),
|
|
0 0 90px rgba(18,104,245, 0.24),
|
|
0 0 100px rgba(18,104,245, 0.24);
|
|
}
|
|
i{
|
|
font-size: .4125rem;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
color: rgba(154,197,255,.4);
|
|
padding-left: .125rem;
|
|
}
|
|
}
|
|
}
|
|
.lending-ranking{
|
|
padding: 0 .2625rem 0 .425rem;
|
|
h5{
|
|
font-size: .225rem;
|
|
color: #79B8FF;
|
|
margin-bottom: .25rem;
|
|
}
|
|
.ranking-cont{
|
|
// height: calc(100vh - 6.875rem);
|
|
background: linear-gradient(-90deg, rgba(66,139,221,0.1), rgba(66,139,221,0));
|
|
border: 1px solid rgba(83, 196, 255, .2);
|
|
padding-bottom: .375rem;
|
|
}
|
|
.ranking-title{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
align-items: center;
|
|
font-size: .15rem;
|
|
color: #79B8FF;
|
|
background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0));
|
|
li {
|
|
&:last-child{
|
|
width: 1.375rem;
|
|
}
|
|
}
|
|
}
|
|
.ranking-list{
|
|
li{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: .175rem;
|
|
color: #eef6ff;
|
|
line-height: .375rem;
|
|
padding-top: .125rem;
|
|
text-align: center;
|
|
div{
|
|
&:last-child{
|
|
font-weight: bold;
|
|
}
|
|
i{
|
|
padding-left: .125rem;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
color: #b6d4f7;
|
|
}
|
|
}
|
|
.ranking-progress .el-progress{
|
|
width: 1.725rem;
|
|
margin: 0 auto;
|
|
.el-progress-bar__outer {
|
|
background-color: #054076;
|
|
}
|
|
}
|
|
.ranking-num1{
|
|
background: url('~@/assets/images/ranking01.png') no-repeat center center;
|
|
background-size: .225rem .3125rem;
|
|
}
|
|
.ranking-num2{
|
|
background: url('~@/assets/images/ranking02.png') no-repeat center center;
|
|
background-size: .225rem .3125rem;
|
|
}
|
|
.ranking-num3{
|
|
background: url('~@/assets/images/ranking03.png') no-repeat center center;
|
|
background-size: .225rem .3125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tooltip-main{
|
|
position: relative;
|
|
min-width: 3rem;
|
|
.tooltip-line{
|
|
width: .15rem;
|
|
height: 0;
|
|
background: url('~@/assets/images/line.png') no-repeat top left;
|
|
position: absolute;
|
|
left: -0.25rem;
|
|
bottom: -0.625rem;
|
|
transform-origin: bottom center;
|
|
animation: growBar 1s forwards;
|
|
}
|
|
}
|
|
.tooltip-content{
|
|
opacity: 0;
|
|
line-height: .4125rem;
|
|
border: 1px solid #D1793D;
|
|
background-color: rgba(0,31,87,0.8);
|
|
animation: slideInFromLeft 1s forwards;
|
|
animation-delay:1s;
|
|
.title{
|
|
width: 100%;
|
|
padding: .05rem .1875rem;
|
|
font-weight: bold;
|
|
font-size: .225rem;
|
|
background: linear-gradient(90deg, rgba(255, 116, 32, 1), rgba(255,255,255,0.22));
|
|
}
|
|
.place{
|
|
padding: .125rem .1875rem;
|
|
font-size: 0.2rem;
|
|
color: rgba(197, 209, 232, 1);
|
|
}
|
|
}
|
|
@keyframes growBar {
|
|
0% {height: 0;}
|
|
100% {height: 1.8125rem;}
|
|
}
|
|
@keyframes slideInFromLeft {
|
|
0% {width: 0; opacity: 0;}
|
|
100% {width: 100%; opacity: 1;}
|
|
}
|
|
|
|
// 第三页 统计表
|
|
.page-three{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 .525rem 0 .45rem;
|
|
.three-item{
|
|
width: 11.25rem;
|
|
margin-bottom: .575rem;
|
|
background-color: #01103D;
|
|
}
|
|
.three01,.three02{
|
|
height: 5.25rem;
|
|
}
|
|
.three03,.three04{
|
|
height: 4.7rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.database-title{
|
|
width: 6.0375rem;
|
|
}
|
|
}
|