20 changed files with 756 additions and 427 deletions
-
BINsrc/assets/images/arrow1.png
-
BINsrc/assets/images/arrow2.png
-
BINsrc/assets/images/database-icon1.png
-
BINsrc/assets/images/database-icon2.png
-
BINsrc/assets/images/header-left.png
-
BINsrc/assets/images/header-right.png
-
BINsrc/assets/images/notice.gif
-
BINsrc/assets/images/num-img.png
-
BINsrc/assets/images/star-1.png
-
BINsrc/assets/images/star-2.png
-
BINsrc/assets/images/star-3.png
-
BINsrc/assets/images/title-big.png
-
BINsrc/assets/images/title-small.png
-
BINsrc/assets/images/title.png
-
BINsrc/assets/images/top-line.png
-
BINsrc/assets/images/top.png
-
919src/assets/styles/index.scss
-
4src/main.js
-
56src/views/index.vue
-
202src/views/pageOne/index.vue
|
After Width: 22 | Height: 23 | Size: 455 B |
|
After Width: 22 | Height: 23 | Size: 439 B |
|
After Width: 200 | Height: 88 | Size: 21 KiB |
|
After Width: 200 | Height: 88 | Size: 20 KiB |
|
Before Width: 496 | Height: 84 | Size: 3.8 KiB |
|
Before Width: 496 | Height: 84 | Size: 3.0 KiB |
|
Before Width: 1024 | Height: 920 | Size: 129 KiB |
|
Before Width: 220 | Height: 68 | Size: 6.1 KiB |
|
Before Width: 700 | Height: 40 | Size: 6.4 KiB |
|
Before Width: 700 | Height: 40 | Size: 5.5 KiB |
|
Before Width: 700 | Height: 40 | Size: 6.7 KiB |
|
Before Width: 740 | Height: 38 | Size: 5.9 KiB After Width: 1173 | Height: 48 | Size: 15 KiB |
|
After Width: 483 | Height: 48 | Size: 14 KiB |
|
Before Width: 510 | Height: 38 | Size: 4.2 KiB |
|
Before Width: 634 | Height: 86 | Size: 2.7 KiB |
|
Before Width: 1896 | Height: 91 | Size: 44 KiB |
@ -1,410 +1,601 @@ |
|||
#screen-container { |
|||
width: 100%; |
|||
height: 100vh; |
|||
// padding: 0 0.175rem; |
|||
font-size: 0.25rem; |
|||
line-height: 0.35rem; |
|||
color: #fff; |
|||
overflow: hidden; |
|||
background: url('~@/assets/images/bg.png') no-repeat top center #02061A; |
|||
background-size: cover; |
|||
width: 100%; |
|||
height: 100vh; |
|||
// padding: 0 0.175rem; |
|||
font-size: .3125rem; |
|||
line-height: .4375rem; |
|||
color: #fff; |
|||
overflow: hidden; |
|||
background: url('~@/assets/images/bg.png') no-repeat top center #02061a; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.loading{ |
|||
position: fixed; |
|||
top: 1rem; |
|||
width: 100%; |
|||
height:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(0,0,0,0.9); |
|||
z-index: 99999999; |
|||
.loading { |
|||
position: fixed; |
|||
top: 1.25rem; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(0, 0, 0, 0.9); |
|||
z-index: 99999999; |
|||
} |
|||
|
|||
// 头部主题标题 |
|||
.header-container{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 1rem; |
|||
font-size: 0.3rem; |
|||
color: #fff; |
|||
// &::before, |
|||
// &::after{ |
|||
// content: ""; |
|||
// position: absolute; |
|||
// top: 0; |
|||
// width: 6.2rem; |
|||
// height: 1.05rem; |
|||
// } |
|||
// &::before{ |
|||
// left: 0; |
|||
// background: url('~@/assets/images/header-left.png') no-repeat top center; |
|||
// } |
|||
// &::after{ |
|||
// right: 0; |
|||
// background: url('~@/assets/images/header-right.png') no-repeat top center; |
|||
// } |
|||
.header-title{ |
|||
position: relative; |
|||
width: 15.67rem; |
|||
height: 1rem; |
|||
margin: 0 auto; |
|||
background: url('~@/assets/images/header-bg.png') no-repeat top left; |
|||
background-size: cover; |
|||
h2{ |
|||
font-size: 0.3rem; |
|||
font-weight: bold; |
|||
line-height: .6rem; |
|||
text-align: center; |
|||
/* 文字渐变色 */ |
|||
background: -webkit-linear-gradient(180deg, #fff 30%, #77BAFF 100%); |
|||
background: linear-gradient(180deg, #fff 30%, #77BAFF 100%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
color: transparent; |
|||
/* 底部阴影 */ |
|||
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
.header-text{ |
|||
position: absolute; |
|||
|
|||
} |
|||
.header-weather { |
|||
top: .15rem; |
|||
right: 0.08rem; |
|||
width: 2.3rem; |
|||
overflow: hidden; |
|||
} |
|||
.header-date { |
|||
top: .17rem; |
|||
left: .17rem; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
.time{ |
|||
font-size: .3rem; |
|||
font-weight: bold; |
|||
line-height: .3rem; |
|||
padding-right: .17rem; |
|||
border-right: 1px solid rgba(255,255,255,.5); |
|||
} |
|||
.time-other{ |
|||
font-size: .14rem; |
|||
line-height: .22rem; |
|||
padding-left: .17rem; |
|||
span{ |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
.header-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 1.25rem; |
|||
font-size: .375rem; |
|||
color: #fff; |
|||
// &::before, |
|||
// &::after{ |
|||
// content: ""; |
|||
// position: absolute; |
|||
// top: 0; |
|||
// width: 6.2rem; |
|||
// height: 1.05rem; |
|||
// } |
|||
// &::before{ |
|||
// left: 0; |
|||
// background: url('~@/assets/images/header-left.png') no-repeat top center; |
|||
// } |
|||
// &::after{ |
|||
// right: 0; |
|||
// background: url('~@/assets/images/header-right.png') no-repeat top center; |
|||
// } |
|||
.header-title { |
|||
position: relative; |
|||
width: 19.5875rem; |
|||
height: 1.25rem; |
|||
margin: 0 auto; |
|||
background: url('~@/assets/images/header-bg.png') no-repeat top left; |
|||
background-size: cover; |
|||
h2 { |
|||
font-size: .375rem; |
|||
font-weight: bold; |
|||
line-height: .75rem; |
|||
text-align: center; |
|||
background: -webkit-linear-gradient(180deg, #fff 30%, #77baff 100%); |
|||
background: linear-gradient(180deg, #fff 30%, #77baff 100%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
color: transparent; |
|||
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
.header-text { |
|||
position: absolute; |
|||
} |
|||
.header-weather { |
|||
top: .1875rem; |
|||
width: 3.125rem; |
|||
right: -.2rem; |
|||
overflow: hidden; |
|||
} |
|||
.header-date { |
|||
top: .2125rem; |
|||
left: .2125rem; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
.time { |
|||
font-size: .375rem; |
|||
font-weight: bold; |
|||
line-height: .375rem; |
|||
padding-right: .2125rem; |
|||
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|||
} |
|||
.time-other { |
|||
font-size: .175rem; |
|||
line-height: .275rem; |
|||
padding-left: .2125rem; |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 头部动态效果 |
|||
.line1, |
|||
.line2{ |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
// // 头部动态效果 |
|||
// .line1, |
|||
// .line2{ |
|||
// position: absolute; |
|||
// top: 0; |
|||
// } |
|||
|
|||
.line1{ |
|||
right: 632px; |
|||
transform: rotateY(-180deg); |
|||
} |
|||
// .line1{ |
|||
// right: 632px; |
|||
// transform: rotateY(-180deg); |
|||
// } |
|||
|
|||
.line2{ |
|||
left: 632px; |
|||
} |
|||
// .line2{ |
|||
// left: 632px; |
|||
// } |
|||
|
|||
.top-line1, |
|||
.top-line2{ |
|||
display: block; |
|||
width: 7.925rem; |
|||
height: 1.075rem; |
|||
animation: topline 4s linear infinite both; |
|||
} |
|||
// .top-line1, |
|||
// .top-line2{ |
|||
// display: block; |
|||
// width: 7.925rem; |
|||
// height: 1.075rem; |
|||
// animation: topline 4s linear infinite both; |
|||
// } |
|||
|
|||
.top-line1{ |
|||
background: url('~@/assets/images/top-line.png') no-repeat; |
|||
} |
|||
// .top-line1{ |
|||
// background: url('~@/assets/images/top-line.png') no-repeat; |
|||
// } |
|||
|
|||
// .top-line2{ |
|||
// background: url('~@/assets/images/top-line.png') no-repeat; |
|||
// } |
|||
|
|||
.top-line2{ |
|||
background: url('~@/assets/images/top-line.png') no-repeat; |
|||
// @keyframes topline { |
|||
// from { |
|||
// width: 0; |
|||
// } |
|||
// 50%, |
|||
// to { |
|||
// width: 643px; |
|||
// } |
|||
// } |
|||
|
|||
// 底部底色 |
|||
.bottom-bg { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 19.775rem; |
|||
height: .6rem; |
|||
background: url('~@/assets/images/bottom-bg.png') no-repeat top left; |
|||
background-size: cover; |
|||
} |
|||
|
|||
@keyframes topline { |
|||
from { |
|||
width: 0; |
|||
} |
|||
50%, |
|||
to { |
|||
width: 643px; |
|||
} |
|||
// pageOne |
|||
.pageOne-database { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: .575rem; |
|||
.database-left, |
|||
.database-right { |
|||
width: 5.7875rem; |
|||
height: 5.25rem; |
|||
background-color: #041231; |
|||
overflow: hidden; |
|||
} |
|||
.database-middle { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.bottom-bg{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 15.82rem; |
|||
height: .48rem; |
|||
background: url('~@/assets/images/bottom-bg.png') no-repeat top left; |
|||
background-size: cover; |
|||
.database-title { |
|||
height: .6rem; |
|||
padding-left: .4rem; |
|||
font-size: .25rem; |
|||
line-height: .5625rem; |
|||
color: #f6f9fe; |
|||
text-shadow: 0px 2px 8px rgba(0, 9, 35, 1); |
|||
background: url('~@/assets/images/title-small.png') no-repeat -0.2rem top; |
|||
background-size: cover; |
|||
} |
|||
|
|||
// pageOne |
|||
.pageOne-database{ |
|||
.inLib-num{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: .46rem; |
|||
.database-left, |
|||
.database-right{ |
|||
width: 463px; |
|||
height: 419px; |
|||
background-color: #041231; |
|||
align-items: center; |
|||
flex-wrap: nowrap; |
|||
padding: .625rem .4rem 0 .125rem; |
|||
.allTotal{ |
|||
width: 2.5rem; |
|||
height: 1.1rem; |
|||
padding-left: 1.2125rem; |
|||
background: url('~@/assets/images/database-icon1.png') no-repeat left top; |
|||
background-size: 100% 100%; |
|||
} |
|||
.database-middle{ |
|||
flex: 1 ; |
|||
.currentNum{ |
|||
width: 2.5rem; |
|||
height: 1.1rem; |
|||
padding-left: 1.2125rem; |
|||
background: url('~@/assets/images/database-icon2.png') no-repeat left top; |
|||
background-size: 100% 100%; |
|||
} |
|||
.database-title{ |
|||
} |
|||
|
|||
} |
|||
.flop-figure { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: .275rem; |
|||
height: 100%; |
|||
line-height: .175rem; |
|||
overflow: hidden; |
|||
writing-mode: vertical-lr; |
|||
text-orientation: upright; |
|||
i{ |
|||
position: absolute; |
|||
text-align: center; |
|||
transition: transform 0.6s ease-in-out; |
|||
color: #fff; |
|||
background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); |
|||
background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-shadow: 0 2px 8px rgba(5,28,55,0.42); |
|||
} |
|||
} |
|||
|
|||
.pageLeft-flop-box { |
|||
position: relative; |
|||
height: .325rem; |
|||
margin-top: .125rem; |
|||
overflow: hidden; |
|||
& div:first-child { |
|||
height: .325rem; |
|||
overflow: hidden; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
.flop-figure { |
|||
width: .275rem; |
|||
i { |
|||
font-size: .275rem; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.flop-comma { |
|||
margin-left: -0.025rem; |
|||
span { |
|||
left: 0; |
|||
font-size: .275rem; |
|||
color: #fff; |
|||
background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); |
|||
background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-shadow: 0 2px 8px rgba(5,28,55,0.42); |
|||
} |
|||
} |
|||
& em{ |
|||
font-style: normal; |
|||
font-size: .175rem; |
|||
font-weight: bold; |
|||
color: #A8CBF6; |
|||
height: .375rem; |
|||
} |
|||
} |
|||
.flop-item-name{ |
|||
font-size: .1875rem; |
|||
} |
|||
|
|||
|
|||
// 主题内部部分 |
|||
.screen-main{ |
|||
// 左边进度条 |
|||
.pageOne-left-progress{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: calc(100% - 91px); |
|||
margin: 0.0625rem 0 0.5rem 0; |
|||
padding: 0 0.325rem; |
|||
overflow: hidden; |
|||
.screen-left, |
|||
.screen-right{ |
|||
width: 6.375rem; |
|||
} |
|||
.screen-middle{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
margin: 0 0.5rem; |
|||
} |
|||
.screen-item{ |
|||
margin-top: 0.25rem; |
|||
} |
|||
.common-title{ |
|||
width: 100%; |
|||
height: 0.475rem; |
|||
line-height: 0.475rem; |
|||
padding-left: 0.525rem; |
|||
font-size: 0.325rem; |
|||
background: url('~@/assets/images/title.png') no-repeat center center; |
|||
background-size: cover; |
|||
font-family: 'YouSheBiaoTiHei'; |
|||
letter-spacing: 0.1rem; |
|||
} |
|||
.module-content{ |
|||
border: 1px solid #2C75E0; |
|||
box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5); |
|||
} |
|||
.small-module{ |
|||
height: 3.75rem; |
|||
} |
|||
.medium-module{ |
|||
height: 4.125rem; |
|||
} |
|||
.big-module{ |
|||
height: 6.8125rem; |
|||
// margin:0.1625rem 0; |
|||
} |
|||
|
|||
//排行榜-推荐 - list |
|||
.lending-ranking{ |
|||
.module-content{ |
|||
padding: 0 0.25rem; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
.book-list-item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0.1rem 0.25rem; |
|||
.book-img{ |
|||
width: 0.825rem; |
|||
height: 1.075rem; |
|||
margin-right: 0.35rem; |
|||
background: url('~@/assets/images/default-img.png') no-repeat center center; |
|||
background-size: contain; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
// height: 100%; |
|||
} |
|||
} |
|||
.book-info{ |
|||
flex: 1; |
|||
margin-right: 0.35rem; |
|||
h4{ |
|||
font-size: 0.25rem; |
|||
font-weight: normal; |
|||
} |
|||
p{ |
|||
font-size: 0.2rem; |
|||
} |
|||
} |
|||
.ranking-num{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 0.5625rem; |
|||
height: 0.5625rem; |
|||
margin-right: 0.175rem; |
|||
flex-wrap: wrap; |
|||
padding: 0 .475rem 0 .35rem; |
|||
li{ |
|||
position: relative; |
|||
width: 2.2rem; |
|||
font-size: .175rem; |
|||
padding-left: .2875rem; |
|||
margin-top: .625rem; |
|||
p{ |
|||
position: relative; |
|||
&::before{ |
|||
position: absolute; |
|||
left: -0.2875rem; |
|||
top: .075rem; |
|||
content: ""; |
|||
width: .275rem; |
|||
height: .2875rem; |
|||
background: url('~@/assets/images/arrow2.png') no-repeat left top; |
|||
background-size: .275rem .2875rem; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 进出馆人数 |
|||
.accessToLib-container{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
text-align: center; |
|||
align-items: center; |
|||
margin: 0.375rem 0 .25rem 0; |
|||
.accessToLib-item{ |
|||
width: 2.75rem; |
|||
.panel-num{ |
|||
display: block; |
|||
height: 0.85rem; |
|||
margin-top: 0.125rem; |
|||
line-height: 0.85rem; |
|||
font-size: 0.325rem; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
color: #1AC9FF; |
|||
background: url('~@/assets/images/num-img.png') no-repeat center center; |
|||
background-size: cover; |
|||
.progress-num{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
font-size: .25rem; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
background: -webkit-linear-gradient(to bottom, #fff 40%, #69A4D6 60%); |
|||
background: linear-gradient(to bottom, #fff 40%, #69A4D6 60%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-shadow: 0 2px 8px rgba(5,28,55,0.42); |
|||
i{ |
|||
font-size: .15rem; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 视频 |
|||
.video-box{ |
|||
width: 100%; |
|||
height: 5.2125rem; |
|||
} |
|||
|
|||
// 阅读之星 |
|||
.read-star{ |
|||
flex: 1; |
|||
.common-title{ |
|||
background: url('~@/assets/images/title-big.png') no-repeat center center; |
|||
background-size: cover; |
|||
} |
|||
.module-content{ |
|||
padding: .25rem; |
|||
overflow: hidden; |
|||
.readstart-item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 0.5rem; |
|||
padding: 0 0.25rem; |
|||
font-size: 0.2rem; |
|||
margin-bottom: 0.125rem; |
|||
background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%); |
|||
.icon-star-1{ |
|||
width: 0.35rem; |
|||
height: 0.3rem; |
|||
margin-left: -0.05rem; |
|||
margin-right: 0.2rem; |
|||
.el-progress { |
|||
.el-progress-bar { |
|||
.el-progress-bar__outer { |
|||
background: #122550; |
|||
} |
|||
.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; |
|||
.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); |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue