|
|
@ -2,17 +2,17 @@ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
height: 100vh; |
|
|
// padding: 0 0.175rem; |
|
|
// padding: 0 0.175rem; |
|
|
font-size: 0.25rem; |
|
|
|
|
|
line-height: 0.35rem; |
|
|
|
|
|
|
|
|
font-size: .3125rem; |
|
|
|
|
|
line-height: .4375rem; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
background: url('~@/assets/images/bg.png') no-repeat top center #02061A; |
|
|
|
|
|
|
|
|
background: url('~@/assets/images/bg.png') no-repeat top center #02061a; |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.loading { |
|
|
.loading { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 1rem; |
|
|
|
|
|
|
|
|
top: 1.25rem; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -26,8 +26,8 @@ |
|
|
.header-container { |
|
|
.header-container { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 1rem; |
|
|
|
|
|
font-size: 0.3rem; |
|
|
|
|
|
|
|
|
height: 1.25rem; |
|
|
|
|
|
font-size: .375rem; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
// &::before, |
|
|
// &::before, |
|
|
// &::after{ |
|
|
// &::after{ |
|
|
@ -47,54 +47,51 @@ |
|
|
// } |
|
|
// } |
|
|
.header-title { |
|
|
.header-title { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 15.67rem; |
|
|
|
|
|
height: 1rem; |
|
|
|
|
|
|
|
|
width: 19.5875rem; |
|
|
|
|
|
height: 1.25rem; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
background: url('~@/assets/images/header-bg.png') no-repeat top left; |
|
|
background: url('~@/assets/images/header-bg.png') no-repeat top left; |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
h2 { |
|
|
h2 { |
|
|
font-size: 0.3rem; |
|
|
|
|
|
|
|
|
font-size: .375rem; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
line-height: .6rem; |
|
|
|
|
|
|
|
|
line-height: .75rem; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
/* 文字渐变色 */ |
|
|
|
|
|
background: -webkit-linear-gradient(180deg, #fff 30%, #77BAFF 100%); |
|
|
|
|
|
background: linear-gradient(180deg, #fff 30%, #77BAFF 100%); |
|
|
|
|
|
|
|
|
background: -webkit-linear-gradient(180deg, #fff 30%, #77baff 100%); |
|
|
|
|
|
background: linear-gradient(180deg, #fff 30%, #77baff 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
-webkit-text-fill-color: transparent; |
|
|
color: transparent; |
|
|
color: transparent; |
|
|
/* 底部阴影 */ |
|
|
|
|
|
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); |
|
|
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.header-text { |
|
|
.header-text { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
.header-weather { |
|
|
.header-weather { |
|
|
top: .15rem; |
|
|
|
|
|
right: 0.08rem; |
|
|
|
|
|
width: 2.3rem; |
|
|
|
|
|
|
|
|
top: .1875rem; |
|
|
|
|
|
width: 3.125rem; |
|
|
|
|
|
right: -.2rem; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
.header-date { |
|
|
.header-date { |
|
|
top: .17rem; |
|
|
|
|
|
left: .17rem; |
|
|
|
|
|
|
|
|
top: .2125rem; |
|
|
|
|
|
left: .2125rem; |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: flex-start; |
|
|
justify-content: flex-start; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
.time { |
|
|
.time { |
|
|
font-size: .3rem; |
|
|
|
|
|
|
|
|
font-size: .375rem; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
line-height: .3rem; |
|
|
|
|
|
padding-right: .17rem; |
|
|
|
|
|
border-right: 1px solid rgba(255,255,255,.5); |
|
|
|
|
|
|
|
|
line-height: .375rem; |
|
|
|
|
|
padding-right: .2125rem; |
|
|
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
} |
|
|
.time-other { |
|
|
.time-other { |
|
|
font-size: .14rem; |
|
|
|
|
|
line-height: .22rem; |
|
|
|
|
|
padding-left: .17rem; |
|
|
|
|
|
|
|
|
font-size: .175rem; |
|
|
|
|
|
line-height: .275rem; |
|
|
|
|
|
padding-left: .2125rem; |
|
|
span { |
|
|
span { |
|
|
display: block; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
@ -102,55 +99,56 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 头部动态效果 |
|
|
|
|
|
.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; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// @keyframes topline { |
|
|
|
|
|
// from { |
|
|
|
|
|
// width: 0; |
|
|
|
|
|
// } |
|
|
|
|
|
// 50%, |
|
|
|
|
|
// to { |
|
|
|
|
|
// width: 643px; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// 底部底色 |
|
|
.bottom-bg { |
|
|
.bottom-bg { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
transform: translateX(-50%); |
|
|
width: 15.82rem; |
|
|
|
|
|
height: .48rem; |
|
|
|
|
|
|
|
|
width: 19.775rem; |
|
|
|
|
|
height: .6rem; |
|
|
background: url('~@/assets/images/bottom-bg.png') no-repeat top left; |
|
|
background: url('~@/assets/images/bottom-bg.png') no-repeat top left; |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
} |
|
|
} |
|
|
@ -159,252 +157,445 @@ |
|
|
.pageOne-database { |
|
|
.pageOne-database { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
margin-bottom: .46rem; |
|
|
|
|
|
|
|
|
margin-bottom: .575rem; |
|
|
.database-left, |
|
|
.database-left, |
|
|
.database-right { |
|
|
.database-right { |
|
|
width: 463px; |
|
|
|
|
|
height: 419px; |
|
|
|
|
|
|
|
|
width: 5.7875rem; |
|
|
|
|
|
height: 5.25rem; |
|
|
background-color: #041231; |
|
|
background-color: #041231; |
|
|
|
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
.database-middle { |
|
|
.database-middle { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
} |
|
|
} |
|
|
.database-title{ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 主题内部部分 |
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
} |
|
|
.screen-middle{ |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inLib-num{ |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
|
|
|
justify-content: space-between; |
|
|
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; |
|
|
|
|
|
|
|
|
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%; |
|
|
} |
|
|
} |
|
|
.big-module{ |
|
|
|
|
|
height: 6.8125rem; |
|
|
|
|
|
// margin:0.1625rem 0; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//排行榜-推荐 - list |
|
|
|
|
|
.lending-ranking{ |
|
|
|
|
|
.module-content{ |
|
|
|
|
|
padding: 0 0.25rem; |
|
|
|
|
|
|
|
|
.flop-figure { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: .275rem; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
line-height: .175rem; |
|
|
overflow: hidden; |
|
|
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); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.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; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.pageLeft-flop-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
height: .325rem; |
|
|
|
|
|
margin-top: .125rem; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
& div:first-child { |
|
|
|
|
|
height: .325rem; |
|
|
|
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
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; |
|
|
|
|
|
|
|
|
justify-content: flex-start; |
|
|
} |
|
|
} |
|
|
p{ |
|
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
|
|
|
|
.flop-figure { |
|
|
|
|
|
width: .275rem; |
|
|
|
|
|
i { |
|
|
|
|
|
font-size: .275rem; |
|
|
|
|
|
font-weight: bold; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.ranking-num{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
.icon{ |
|
|
|
|
|
width: 0.5625rem; |
|
|
|
|
|
height: 0.5625rem; |
|
|
|
|
|
margin-right: 0.175rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.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); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 进出馆人数 |
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
|
& em{ |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
font-size: .175rem; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
|
|
|
color: #1AC9FF; |
|
|
|
|
|
background: url('~@/assets/images/num-img.png') no-repeat center center; |
|
|
|
|
|
background-size: cover; |
|
|
|
|
|
|
|
|
color: #A8CBF6; |
|
|
|
|
|
height: .375rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.flop-item-name{ |
|
|
|
|
|
font-size: .1875rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 视频 |
|
|
|
|
|
.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{ |
|
|
|
|
|
|
|
|
// 左边进度条 |
|
|
|
|
|
.pageOne-left-progress{ |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
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; |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
.star-info{ |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
margin-right: 0.25rem; |
|
|
|
|
|
} |
|
|
} |
|
|
&.star1-bg{ |
|
|
|
|
|
background: url('~@/assets/images/star-1.png') no-repeat left top; |
|
|
|
|
|
background-size: contain; |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
} |
|
|
&.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 { |
|
|
|
|
|
.el-progress-bar { |
|
|
|
|
|
.el-progress-bar__outer { |
|
|
|
|
|
background: #122550; |
|
|
} |
|
|
} |
|
|
|
|
|
.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); |
|
|
|
|
|
} |
|
|
} |
|
|
100% { |
|
|
|
|
|
transform: translateY(-6rem); |
|
|
|
|
|
|
|
|
.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) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// .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); |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
