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.
1808 lines
42 KiB
1808 lines
42 KiB
|
|
#screen-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-size: .3125rem;
|
|
line-height: .4375rem;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
background: url('~@/assets/images/bg2.png') no-repeat top center #02061a;
|
|
background-size: 100% 100%;
|
|
font-family: 'DingTalk_JinBuTi_Regular';
|
|
}
|
|
|
|
.page-wrapper{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #001244;
|
|
padding-top: 1.5625rem;
|
|
overflow: hidden;
|
|
}
|
|
.page-four-wrapper{
|
|
background: #000629;
|
|
}
|
|
.loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
z-index: 99999999;
|
|
}
|
|
.header-page{
|
|
// position: fixed;
|
|
// right: .175rem;
|
|
// top: .175rem;
|
|
margin-left: .125rem;
|
|
margin-top: -0.125rem;
|
|
font-size:.175rem;
|
|
background: rgba(82,146,255,0.2);
|
|
border: 1px solid #5292FF;
|
|
height: .3125rem;
|
|
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;
|
|
width: 100%;
|
|
height: 1.0625rem;
|
|
color: #fff;
|
|
z-index: 9999;
|
|
.header-title {
|
|
position: relative;
|
|
font-family: 'Microsoft YaHei';
|
|
width: 18.1375rem;
|
|
height: 1.0625rem;
|
|
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-bottom{
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 2.45rem;
|
|
height: .075rem;
|
|
background: url('~@/assets/images/header_13_b.png') no-repeat top left;
|
|
background-size: contain;
|
|
margin-left: -1.175rem;
|
|
overflow: hidden;
|
|
.bottom-block{
|
|
position: absolute;
|
|
// left: 50%;
|
|
bottom: 0;
|
|
width: .8rem;
|
|
height: .0625rem;
|
|
background: url('~@/assets/images/header_13.png') no-repeat top left;
|
|
background-size: contain;
|
|
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{
|
|
0%{
|
|
left: calc(.375rem);
|
|
}
|
|
50%{
|
|
left: calc(100% - .375rem);
|
|
}
|
|
100%{
|
|
left: calc(.375rem);
|
|
}
|
|
}
|
|
|
|
.header-text {
|
|
position: absolute;
|
|
}
|
|
.header-weather {
|
|
// top: .175rem;
|
|
max-width: 2rem;
|
|
height: .625rem;
|
|
margin-top: .125rem;
|
|
// right: 0.25rem;
|
|
overflow: hidden;
|
|
}
|
|
.header-date {
|
|
top: .125rem;
|
|
left: .2125rem;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.time {
|
|
width: 1.625rem;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
// 底部底色
|
|
.bottom-bg {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
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
|
|
.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;
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.middle2-item{
|
|
position: absolute;
|
|
width: 3.3375rem;
|
|
// height: 1.275rem;
|
|
height: 1.6rem;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
p{
|
|
// font-size: .225rem;
|
|
font-size: .3rem;
|
|
margin-top: .125rem;
|
|
color: #CCDEFF;
|
|
letter-spacing: .025rem;
|
|
}
|
|
.middle-num{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: .13rem;
|
|
.middle-unit{
|
|
display: block;
|
|
font-size: .175rem;
|
|
color: #CCDEFF;
|
|
padding-left: .0625rem;
|
|
margin-top: .125rem;
|
|
}
|
|
}
|
|
&.totalBook{
|
|
top: .91rem;
|
|
left: 1.1125rem;
|
|
}
|
|
&.fansNum{
|
|
top: 3.55rem;
|
|
left: .6125rem;
|
|
}
|
|
&.totalBook,
|
|
&.fansNum{
|
|
background: url('~@/assets/images/pageOne-1-b.png') no-repeat top left;
|
|
background-size: cover;
|
|
p{
|
|
padding-left: .45rem;
|
|
}
|
|
}
|
|
&.lendingNum{
|
|
top: 3.55rem;
|
|
right: .2375rem;
|
|
}
|
|
&.cardNum{
|
|
top: .91rem;
|
|
right: .7375rem;
|
|
}
|
|
&.lendingNum,
|
|
&.cardNum{
|
|
background: url('~@/assets/images/pageOne-2-b.png') no-repeat top left;
|
|
background-size: cover;
|
|
p{
|
|
text-align: right;
|
|
padding-right: .45rem;
|
|
}
|
|
.middle-num{
|
|
padding-right: .275rem;
|
|
justify-content: flex-end;
|
|
.chartNum{
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.small-module{
|
|
// height: .4rem;
|
|
height: .63rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.middle-img{
|
|
position: relative;
|
|
// width: 5.4rem;
|
|
width: 5rem;
|
|
.middle-img-book{
|
|
position: absolute;
|
|
top: .75rem;
|
|
left: 50%;
|
|
// width: 4.8875rem;
|
|
// height: 3.925rem;
|
|
width: 4.51rem;
|
|
height: 3.55rem;
|
|
transform: translateX(-50%);
|
|
z-index: 999;
|
|
background: url('~@/assets/images/pageOne-3.png') no-repeat center center;
|
|
background-size: cover;
|
|
animation: hovering 1s infinite alternate-reverse ease-in-out;
|
|
}
|
|
.wq{
|
|
position: absolute;
|
|
top: .375rem;
|
|
left: 50%;
|
|
// width: 4.8875rem;
|
|
// height: 3.925rem;
|
|
width: 4.51rem;
|
|
height: 3.55rem;
|
|
background: url('~@/assets/images/wq.png') no-repeat center center;
|
|
background-size: cover;
|
|
transform: translateX(-51%);
|
|
z-index: 9999;
|
|
animation: hovering 1s infinite alternate-reverse ease-in-out;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.line-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: .2875rem;
|
|
width: 5.125rem;
|
|
height: 5.125rem;
|
|
border-radius: 50%;
|
|
border: 6px solid #fff;
|
|
border-top-color: transparent;
|
|
transform: rotate(-20deg) scaleY(0.3);
|
|
z-index: 9999;
|
|
}
|
|
.box {
|
|
position: relative;
|
|
width: 5.125rem;
|
|
height: 5.125rem;
|
|
border-radius: 50%;
|
|
transform: rotate(-10deg) scaleY(0.1);
|
|
animation: spin 3s infinite linear;
|
|
border: 1px solid red;
|
|
}
|
|
.ball {
|
|
display: inline-block;
|
|
background: #a0b8f3;
|
|
width: .375rem;
|
|
height: .375rem;
|
|
background: url('~@/assets/images/pageOne-5.png') no-repeat center center;
|
|
background-size: cover;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: .5625rem;
|
|
top: .5625rem;
|
|
animation: ball-spin 3s infinite linear;
|
|
}
|
|
.middle-img-bottom{
|
|
position: absolute;
|
|
// bottom: -0.25rem;
|
|
bottom: 0;
|
|
left: 0;
|
|
// width: 5.4rem;
|
|
// height: 3.4375rem;
|
|
width: 5rem;
|
|
height: 3.19rem;
|
|
background: url('~@/assets/images/pageOne-4.png') no-repeat center center;
|
|
background-size: cover;
|
|
// animation: middleMove 3s infinite linear;
|
|
svg path { stroke: transparent; fill: none; stroke-width: 2; }
|
|
.rect {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
// width: .75rem;
|
|
// height: .125rem;
|
|
width: .5rem;
|
|
height: .06rem;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(255, 255, 255,0.5) 40%,
|
|
rgba(255, 255, 255,0.6) 50%,
|
|
rgba(255, 255, 255,0.5) 60%,
|
|
rgba(0,0,0,0) 100%
|
|
);
|
|
border-radius: 50%;
|
|
filter: blur(2px);
|
|
}
|
|
.qxRect{
|
|
offset-path: path("M0 80 S 170 160, 400 70");
|
|
offset-distance: 0%;
|
|
animation: svg-path-animation 6s ease-in-out 0s infinite normal;
|
|
}
|
|
@keyframes svg-path-animation {
|
|
0% {offset-distance: 10%;}
|
|
70% {offset-distance: 80%;}
|
|
100% {offset-distance: 90%; opacity: 0.2;}
|
|
}
|
|
}
|
|
.middle-img-dot{
|
|
position: absolute;
|
|
top: 3rem;
|
|
left: -1.25rem;
|
|
width: 7.625rem;
|
|
height: 2.0375rem;
|
|
background: url('~@/assets/images/pageOne-6.png') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes ball-spin {
|
|
0% {
|
|
transform: rotate(0deg) scaleY(2) rotate(30deg) scale(1);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg) scaleY(2) rotate(30deg) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes middleMove{
|
|
from {
|
|
transform: rotateX(75deg) rotateZ(0);
|
|
}
|
|
to {
|
|
transform: rotateX(75deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
.database-box {
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
animation: hovering 2s infinite alternate-reverse ease-in-out;
|
|
}
|
|
|
|
.logo {
|
|
display: block;
|
|
width: 5.825rem;
|
|
height: 6.4125rem;
|
|
position: relative;
|
|
}
|
|
.logo:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
content: "";
|
|
width: 5.825rem;
|
|
height: 6.4125rem;
|
|
background: url('~@/assets/images/database-middle.png') no-repeat center center;
|
|
background-size: contain;
|
|
transition: 5s ease-out;
|
|
}
|
|
.logo:hover:after {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.ring {
|
|
pointer-events: none;
|
|
width: 5.825rem;
|
|
height: 5.825rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
.ring .particle {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: 10px solid;
|
|
width: 5.825rem;
|
|
height: 5.825rem;
|
|
border-radius: 50%;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-bottom: 0;
|
|
box-shadow: 0 0 1px 0px currentColor;
|
|
transform-style: preserve-3d;
|
|
}
|
|
.ring .particle:after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
display: block;
|
|
content: "";
|
|
width: 5px;
|
|
height: 5px;
|
|
background: currentColor;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 5px 0px white;
|
|
}
|
|
|
|
.ring1 {
|
|
color: rgba(44, 198, 255,1);
|
|
animation: rotateAnimate1 16s infinite reverse linear;
|
|
}
|
|
.ring1 .particle {
|
|
-webkit-animation: rotateAnimate1 6s infinite linear;
|
|
animation: rotateAnimate1 6s infinite linear;
|
|
}
|
|
|
|
.ring2 {
|
|
color: rgba(255, 255, 255,1);
|
|
animation: rotateAnimate1 16s infinite reverse linear;
|
|
}
|
|
|
|
.ring2 .particle {
|
|
width: 5.575rem;
|
|
height: 5.575rem;
|
|
-webkit-animation: rotateAnimate2 6s infinite linear;
|
|
animation: rotateAnimate2 6s infinite linear;
|
|
}
|
|
|
|
.ring2 .particle:after {
|
|
top: 0%;
|
|
}
|
|
|
|
.ring3 {
|
|
color: rgba(14, 93, 182, 1);
|
|
animation: rotateAnimate1 16s infinite reverse linear;
|
|
}
|
|
.ring3 .particle {
|
|
width: 5.575rem;
|
|
height: 5.575rem;
|
|
-webkit-animation: rotateAnimate3 6s infinite linear;
|
|
animation: rotateAnimate3 6s infinite linear;
|
|
}
|
|
|
|
@-webkit-keyframes rotateAnimate1 {
|
|
0% {
|
|
transform: rotateX(45deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateAnimate1 {
|
|
0% {
|
|
transform: rotateX(45deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes rotateAnimate2 {
|
|
0% {
|
|
transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
|
|
}
|
|
}
|
|
@keyframes rotateAnimate2 {
|
|
0% {
|
|
transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes rotateAnimate3 {
|
|
0% {
|
|
transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
|
|
}
|
|
}
|
|
@keyframes rotateAnimate3 {
|
|
0% {
|
|
transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes hovering {
|
|
0% {
|
|
transform: translateX(-50%) translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%) translate3d(0, -10px, 0);
|
|
}
|
|
}
|
|
@keyframes hovering {
|
|
0% {
|
|
transform: translateX(-50%) translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%) translate3d(0, -10px, 0);
|
|
}
|
|
}
|
|
|
|
.database-title {
|
|
height: .6rem;
|
|
padding-left: .4rem;
|
|
margin-top: -0.25rem;
|
|
// font-size: .25rem;
|
|
font-size: .3rem;
|
|
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: center;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
padding: .625rem .125rem 0 0;
|
|
.allTotal{
|
|
width: 50%;
|
|
height: 1.1rem;
|
|
padding-left: 1.15rem;
|
|
background: url('~@/assets/images/database-icon1.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
}
|
|
.totayTotal{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
// align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-left: -.38rem;
|
|
// width: 100%;
|
|
// height: 1.52rem;
|
|
height: 1.88rem;
|
|
padding-left: 2rem;
|
|
background: url('~@/assets/images/map_03.png') no-repeat .3rem .25rem;
|
|
// background-size: 5.58rem 1.1rem;
|
|
background-size: 1.52rem 1.15rem;
|
|
}
|
|
.currentNum,
|
|
.lastYearTotal{
|
|
width: 50%;
|
|
height: 1.1rem;
|
|
padding-left: 1.1rem;
|
|
background: url('~@/assets/images/database-icon2.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
}
|
|
.flop-figure {
|
|
position: relative;
|
|
display: inline-block;
|
|
// width: .28rem;
|
|
width: .38rem;
|
|
height: 100%;
|
|
line-height: .38rem;
|
|
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: .63rem;
|
|
height: 1rem;
|
|
// margin-top: .25rem;
|
|
overflow: hidden;
|
|
& div:first-child {
|
|
// height: .63rem;
|
|
height: 1rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.flop-figure {
|
|
// width: .5rem;
|
|
width: .81rem;
|
|
i {
|
|
// font-size: .63rem;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-left: 0.07rem;
|
|
}
|
|
}
|
|
.flop-comma {
|
|
margin-left: -0.025rem;
|
|
span {
|
|
left: 0;
|
|
// font-size: .275rem;
|
|
font-size: .38rem;
|
|
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: .23rem;
|
|
margin-top: .38rem;
|
|
margin-left: -0.13rem;
|
|
}
|
|
}
|
|
.flop-item-name{
|
|
// font-size: .25rem;
|
|
font-size: .3rem;
|
|
// text-align: right;
|
|
// padding-right: .3rem;
|
|
}
|
|
|
|
// 左边进度条
|
|
.pageOne-left-progress{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 .5rem;
|
|
li{
|
|
position: relative;
|
|
width: 100%;
|
|
// font-size: .25rem;
|
|
font-size: .3rem;
|
|
padding-left: .1625rem;
|
|
// margin-top: .7rem;
|
|
margin-top: .47rem;
|
|
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: .3rem;
|
|
font-size: .45rem;
|
|
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;
|
|
overflow: hidden;
|
|
img{
|
|
display: block;
|
|
padding: .125rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
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;
|
|
font-family: 'DingTalk_JinBuTi_Regular';
|
|
overflow: hidden;
|
|
.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 bottom;
|
|
background-size: cover;
|
|
font-weight: bold;
|
|
&.big-title{
|
|
padding-bottom: .45rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: rgba(154, 197, 255, 0.4);
|
|
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.825rem;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scroll-container{
|
|
position: relative;
|
|
width: calc(100%);
|
|
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;
|
|
overflow: hidden;
|
|
}
|
|
.lib-text{
|
|
position: relative;
|
|
margin-right: .175rem;
|
|
font-size: .28rem;
|
|
line-height: .4rem;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
.lib-animation {
|
|
animation: myLib 26s linear infinite;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes myLib {
|
|
0% {
|
|
transform: translateY(1rem);
|
|
}
|
|
100% {
|
|
transform: translateY(calc(-1 * var(--container-height)));
|
|
}
|
|
}
|
|
|
|
.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: contain;
|
|
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;
|
|
background-color: rgba(10, 26, 66, .6);
|
|
// background-color: #011244;
|
|
.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;
|
|
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{
|
|
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: .225rem;
|
|
color: #79B8FF;
|
|
line-height: .5rem;
|
|
background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0));
|
|
li {
|
|
&:last-child{
|
|
width: 1.375rem;
|
|
}
|
|
}
|
|
}
|
|
.ranking-list{
|
|
li,
|
|
.ranking-item{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: .225rem;
|
|
color: #eef6ff;
|
|
line-height: .375rem;
|
|
padding: .0625rem 0;
|
|
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{
|
|
// font-family: 'DingTalk_JinBuTi_Regular';
|
|
// position: relative;
|
|
// // min-width: 3rem;
|
|
// width: 4rem;
|
|
// // text-wrap: wrap;
|
|
// .tooltip-line{
|
|
// width: .15rem;
|
|
// height: 0;
|
|
// background: url('~@/assets/images/line.png') no-repeat top left;
|
|
// position: absolute;
|
|
// left: -0.225rem;
|
|
// bottom: -0.25rem;
|
|
// transform-origin: bottom center;
|
|
// animation: growBar 1s forwards;
|
|
// }
|
|
// }
|
|
// .tooltip-content{
|
|
// height: 1.8125rem;
|
|
// opacity: 0;
|
|
// line-height: .35rem;
|
|
// border: 1px solid #D1793D;
|
|
// background-color: rgba(0,31,87,0.8);
|
|
// animation: slideInFromLeft 1s forwards;
|
|
// animation-delay: 2s;
|
|
// .title{
|
|
// width: 100%;
|
|
// padding: .05rem .1875rem;
|
|
// font-weight: bold;
|
|
// // font-size: .225rem;
|
|
// font-size: .28rem;
|
|
// background: linear-gradient(90deg, rgba(255, 116, 32, 1), rgba(255,255,255,0.22));
|
|
// }
|
|
// .place{
|
|
// text-wrap: wrap;
|
|
// padding: .125rem .1875rem;
|
|
// font-size: .3rem;
|
|
// color: #fff;
|
|
// }
|
|
// }
|
|
// @keyframes growBar {
|
|
// 0% {height: 0;}
|
|
// 100% {height: 1.8125rem;}
|
|
// }
|
|
// @keyframes slideInFromLeft {
|
|
// 0% {width: 0; opacity: 0;}
|
|
// 100% {width: 100%; opacity: 1;}
|
|
// }
|
|
|
|
|
|
.tooltip-main{
|
|
font-family: 'DingTalk_JinBuTi_Regular';
|
|
position: relative;
|
|
width: 4rem;
|
|
.tooltip-line{
|
|
width: .07rem;
|
|
height: 0;
|
|
position: absolute;
|
|
left: -0.225rem;
|
|
bottom: -0.25rem;
|
|
transform-origin: bottom center;
|
|
animation: growBar 1s forwards;
|
|
filter: blur(0.01rem);
|
|
}
|
|
}
|
|
.tooltip-content{
|
|
height: 1.8125rem;
|
|
opacity: 0;
|
|
line-height: .35rem;
|
|
border: 1px solid #D1793D;
|
|
background-color: rgba(0,31,87,0.8);
|
|
animation: slideInFromLeft 1s forwards;
|
|
animation-delay: 2s;
|
|
.title{
|
|
width: 100%;
|
|
padding: .05rem .1875rem;
|
|
font-weight: bold;
|
|
font-size: .28rem;
|
|
}
|
|
.place{
|
|
text-wrap: wrap;
|
|
padding: .125rem .1875rem;
|
|
font-size: .3rem;
|
|
color: #fff;
|
|
}
|
|
}
|
|
@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;
|
|
font-family: 'DingTalk_JinBuTi_Regular';
|
|
.three-item{
|
|
width: 11.25rem;
|
|
margin-bottom: .575rem;
|
|
background-color: #01103D;
|
|
}
|
|
.three01,.three02{
|
|
height: 5.5rem;
|
|
}
|
|
.three03,.three04{
|
|
height: 4.7rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.database-title{
|
|
// width: 6.0375rem;
|
|
height: .6rem;
|
|
font-weight: bold;
|
|
background: url('~@/assets/images/title-big.png') no-repeat -0.2rem top;
|
|
background-size: cover;
|
|
}
|
|
.three-lending{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: .1875rem .3125rem 0 .4125rem;
|
|
h5{
|
|
font-size: .225rem;
|
|
color: #47A6FF;
|
|
}
|
|
.three-lending-left{
|
|
width: calc(100% - 5.25rem);
|
|
.totalItem{
|
|
.pageLeft-flop-box{
|
|
position: relative;
|
|
height: 0.9125rem;
|
|
margin: .2875rem 0 .4rem 0;
|
|
overflow: hidden;
|
|
& div:first-child {
|
|
height: 0.875rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.flop-figure {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 0.7rem;
|
|
height: 100%;
|
|
line-height: 0.55rem;
|
|
letter-spacing: .25rem;
|
|
padding: 0.1rem 0;
|
|
overflow: hidden;
|
|
writing-mode: vertical-lr;
|
|
text-orientation: upright;
|
|
background: rgba(13,145,214,0.25);
|
|
margin-right: .1625rem;
|
|
border: 2px solid #0D79FF;
|
|
border-radius: .05rem;
|
|
i {
|
|
font-size: .6rem;
|
|
font-weight: 600;
|
|
position: absolute;
|
|
// text-align: center;
|
|
transition: transform 0.6s ease-in-out;
|
|
color: #BFE0FF;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.three-lending-right{
|
|
width: 5.25rem;
|
|
h5{
|
|
position: relative;
|
|
padding-left: .2rem;
|
|
&::before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: .0625rem;
|
|
height: .2rem;
|
|
background-color: #47A6FF;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
.ranking-cont{
|
|
padding-bottom: .125rem;
|
|
.ranking-list{
|
|
.ranking-progress .el-progress{
|
|
width: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// page4
|
|
.page-four{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 .4rem 0 .55rem;
|
|
font-family: 'DingTalk_JinBuTi_Regular';
|
|
}
|
|
.four-video{
|
|
width: 16.625rem;
|
|
height: 10.875rem;
|
|
padding: 0 .375rem;
|
|
background: url('~@/assets/images/page4_03.png') no-repeat top left;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
h4{
|
|
height: .9rem;
|
|
line-height: 1.05rem;
|
|
font-size: .325rem;
|
|
font-weight: bold;
|
|
color: #DFFDFE;
|
|
background: url('~@/assets/images/page4_02.png') no-repeat bottom left;
|
|
background-size: 100% .0375rem;
|
|
}
|
|
}
|
|
.four-right{
|
|
width: 5.9375rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.database-title{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.four-notice,
|
|
.four-ranking{
|
|
width: 5.9375rem;
|
|
background-color: #011244;
|
|
}
|
|
.four-notice{
|
|
height: calc(100% / 2 + 40px);
|
|
.seamless-warp{
|
|
position: relative;
|
|
width: calc(100%);
|
|
height: 5.5rem;
|
|
margin-top: .125rem;
|
|
overflow: hidden;
|
|
.notice-text{
|
|
position: relative;
|
|
padding: 0 .375rem;
|
|
margin-bottom: .25rem;
|
|
// font-size: .225rem;
|
|
font-size: .28rem;
|
|
color: #ADC7FF;
|
|
line-height: .375rem;
|
|
font-weight: bold;
|
|
.notice-title{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
width: calc(100%);
|
|
height: .5rem;
|
|
line-height: .5rem;
|
|
padding: 0 .375rem;
|
|
color: #7D93C2;
|
|
// font-size: .2rem;
|
|
font-size: .25rem;
|
|
background-color: #011244;
|
|
span{
|
|
display: block;
|
|
}
|
|
}
|
|
p{
|
|
color: #fff;
|
|
white-space: pre-line;
|
|
text-indent: 2em;
|
|
padding: .5rem 0; // 给标题留空间
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 滚动动画（核心修正） */
|
|
.scroll-animation {
|
|
animation: myMove linear forwards;
|
|
--scroll-duration: 20s;
|
|
animation-duration: var(--scroll-duration);
|
|
animation-delay: 0s;
|
|
animation-fill-mode: forwards; /* 动画结束后停在最后一帧 */
|
|
}
|
|
|
|
/* 精准的滚动动画：从顶部到完全显示底部 */
|
|
@keyframes myMove {
|
|
0% {
|
|
transform: translateY(0); /* 初始位置：内容顶部对齐容器顶部 */
|
|
}
|
|
100% {
|
|
/* 最终位置：内容底部对齐容器底部（完全滚到底） */
|
|
transform: translateY(calc(-1 * (var(--content-height) - var(--container-height))));
|
|
}
|
|
}
|
|
|
|
.four-ranking{
|
|
height: calc(100% / 2 - 70px);
|
|
&.lending-ranking{
|
|
padding: 0;
|
|
}
|
|
.ranking-cont{
|
|
margin: .25rem .375rem 0 .3125rem;
|
|
padding-bottom: .13rem;
|
|
.ranking-list{
|
|
padding-top: .125rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
width: 5.9375rem;
|
|
height: 2.125rem;
|
|
background: url('~@/assets/images/page4_06.png') no-repeat top left;
|
|
background-size: contain;
|
|
.wechat-img{
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
background: url('~@/assets/images/wechat-img2.png') no-repeat left top;
|
|
background-size: contain;
|
|
margin-right: .475rem;
|
|
text-align: center;
|
|
line-height: 1.35rem;
|
|
overflow: hidden;
|
|
img{
|
|
display: block;
|
|
padding: .125rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
span{
|
|
display: block;
|
|
font-size: .25rem;
|
|
color: #4DDBFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1440px) {
|
|
.pageOne-database{
|
|
margin-top: .375rem;
|
|
height: 6.5rem;
|
|
}
|
|
.pageOne-book {
|
|
.pageOne-book-content {
|
|
padding: .375rem 0;
|
|
.wechat-code{
|
|
width: 4.25rem;
|
|
height: 5.5rem;
|
|
.wechat-img{
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
line-height: 2.5rem;
|
|
}
|
|
span{
|
|
font-size: .275rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scrollBox{
|
|
.seamless01{
|
|
margin-bottom: .5rem;
|
|
}
|
|
ul{
|
|
height: 2.3rem;
|
|
li{
|
|
width: 1.625rem;
|
|
height: 2.3rem;
|
|
margin-right: .7375rem;
|
|
.bord{
|
|
.book-img{
|
|
width: 1.625rem;
|
|
height: 2.3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-three {
|
|
.three03,
|
|
.three04{
|
|
height: calc(100vh/2 - 1.375rem);
|
|
}
|
|
}
|
|
|
|
.four-video{
|
|
width: 16.625rem;
|
|
height: calc(100vh - 2.5rem);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.el-carousel__container{
|
|
height: calc(100vh - 4.5rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.four-notice{
|
|
height: 4rem;
|
|
.seamless-warp{
|
|
height: 3.25rem;
|
|
}
|
|
}
|
|
|
|
.four-contact{
|
|
width: 5.9375rem;
|
|
height: 2.5rem;
|
|
background-size: 100% 100%;
|
|
.wechat-img{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
span{
|
|
font-size: .275rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.five-video{
|
|
width: 100%;
|
|
height: 10.875rem;
|
|
padding: 0 .375rem;
|
|
background: url('~@/assets/images/page4_03-b.png') no-repeat top left;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
h4{
|
|
height: .9rem;
|
|
line-height: 1.05rem;
|
|
font-size: .325rem;
|
|
font-weight: bold;
|
|
color: #DFFDFE;
|
|
background: url('~@/assets/images/page4_02.png') no-repeat bottom left;
|
|
background-size: 100% .0375rem;
|
|
}
|
|
}
|