parent
640f460295
commit
f89cc9b2a9
13 changed files with 377 additions and 1617 deletions
@ -1,124 +1,137 @@ |
||||
@import "./default/index.scss"; |
||||
@import "./var.scss"; |
||||
@import './default/index.scss'; |
||||
@import './var.scss'; |
||||
|
||||
@font-face { |
||||
font-family: PingFang; |
||||
src: url('font/PingFang-Regular.otf'); |
||||
font-family: PingFang; |
||||
src: url('font/PingFang-Regular.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: PingFangSC-Medium; |
||||
src: url('font/PingFangSC-Medium.otf'); |
||||
font-family: PingFangSC-Medium; |
||||
src: url('font/PingFangSC-Medium.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: PingFangSC-Semibold; |
||||
src: url('font/PingFangTC-Semibold.ttf'); |
||||
font-family: PingFangSC-Semibold; |
||||
src: url('font/PingFangTC-Semibold.ttf'); |
||||
} |
||||
@font-face { |
||||
font-family: SFProDisplay-Bold; |
||||
src: url('font/SF-Pro-Display-Bold.otf'); |
||||
font-family: SFProDisplay-Bold; |
||||
src: url('font/SF-Pro-Display-Bold.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: SFProDisplay; |
||||
src: url('font/SF-Pro-Display-Regular.otf'); |
||||
font-family: SFProDisplay; |
||||
src: url('font/SF-Pro-Display-Regular.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: toppan; |
||||
src: url('font/toppan.otf'); |
||||
font-family: toppan; |
||||
src: url('font/toppan.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: ProximaNova; |
||||
src: url('font/ProximaNova-Regular.otf'); |
||||
font-family: ProximaNova; |
||||
src: url('font/ProximaNova-Regular.otf'); |
||||
} |
||||
|
||||
[v-cloak] { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
.site-en { |
||||
font-family: SFProDisplay; |
||||
font-family: SFProDisplay; |
||||
} |
||||
.flex-between { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
::-webkit-scrollbar-thumb { |
||||
width: 5px; |
||||
border-radius: 6px; |
||||
background: #d7d7d7; |
||||
width: 5px; |
||||
border-radius: 6px; |
||||
background: #d7d7d7; |
||||
} |
||||
.main { |
||||
.view { |
||||
// min-width: $min-width; |
||||
min-height: calc(100vh - 90px); |
||||
margin: 0 auto; |
||||
background-color: #fff; |
||||
} |
||||
.content { |
||||
width: 1512px; |
||||
padding: 40px 0; |
||||
margin: 0 auto; |
||||
} |
||||
.view { |
||||
// min-width: $min-width; |
||||
min-height: calc(100vh - 90px); |
||||
margin: 0 auto; |
||||
background-color: #fff; |
||||
} |
||||
.content { |
||||
width: 1512px; |
||||
padding: 40px 0; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
.l-title { |
||||
position: relative; |
||||
padding-bottom: 20px; |
||||
font-size: 18px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #000; |
||||
line-height: 25px; |
||||
border-bottom: 1px solid #ddd; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 30px; |
||||
height: 2px; |
||||
background-color: #156CEB; |
||||
} |
||||
position: relative; |
||||
padding-bottom: 20px; |
||||
font-size: 1rem; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #000; |
||||
line-height: 1.6; |
||||
border-bottom: 1px solid #ddd; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 30px; |
||||
height: 2px; |
||||
background-color: #156ceb; |
||||
} |
||||
} |
||||
.pagination { |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
|
||||
button, .number { |
||||
color: rgba(0, 0, 0, .65) !important; |
||||
background-color: transparent !important; |
||||
border: 1px solid #DCDEE0 !important; |
||||
border-radius: 4px !important; |
||||
} |
||||
button, |
||||
.number { |
||||
color: rgba(0, 0, 0, 0.65) !important; |
||||
background-color: transparent !important; |
||||
border: 1px solid #dcdee0 !important; |
||||
border-radius: 4px !important; |
||||
} |
||||
|
||||
button i { |
||||
color: #333; |
||||
} |
||||
button i { |
||||
color: #333; |
||||
} |
||||
|
||||
.active { |
||||
color: #fff !important; |
||||
background-color: $--color-primary !important; |
||||
} |
||||
.active { |
||||
color: #fff !important; |
||||
background-color: $--color-primary !important; |
||||
} |
||||
} |
||||
.el-menu--popup { |
||||
min-width: 128px; |
||||
margin-top: 0; |
||||
text-align: center; |
||||
.el-submenu__title, .el-menu-item, .menu-child { |
||||
width: 220px !important; |
||||
min-width: 0; |
||||
} |
||||
span { |
||||
font-size: 13px; |
||||
color: #333; |
||||
} |
||||
.active > .el-submenu__title span, .active > span { |
||||
color: #1583FF; |
||||
} |
||||
min-width: 128px; |
||||
margin-top: 0; |
||||
text-align: center; |
||||
.el-submenu__title, |
||||
.el-menu-item, |
||||
.menu-child { |
||||
width: 220px !important; |
||||
min-width: 0; |
||||
} |
||||
span { |
||||
font-size: 0.8rem; |
||||
color: #333; |
||||
} |
||||
.active > .el-submenu__title span, |
||||
.active > span { |
||||
color: #1583ff; |
||||
} |
||||
} |
||||
.home-menu-popup { |
||||
.el-menu { |
||||
background-color: #fff !important; |
||||
} |
||||
} |
||||
.el-menu { |
||||
background-color: #fff !important; |
||||
} |
||||
} |
||||
|
||||
.party { |
||||
.l-title:after { |
||||
background-color: $partyTheme; |
||||
} |
||||
.list .text:hover { |
||||
color: $partyTheme !important; |
||||
} |
||||
} |
||||
|
||||
@ -1,29 +1,31 @@ |
||||
$main-color: #1583FF; |
||||
$main-color: #1583ff; |
||||
$max-width: 1440px; |
||||
$min-width: 1280px; |
||||
$partyTheme: #d12323; |
||||
$lightPartyTheme: #fdf3f3; |
||||
|
||||
@mixin ellipsis { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
@mixin mul-ellipsis($num) { |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: $num; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: $num; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.ellipsis { |
||||
@include ellipsis(); |
||||
@include ellipsis(); |
||||
} |
||||
|
||||
.mul-ellipsis2 { |
||||
@include mul-ellipsis(2); |
||||
@include mul-ellipsis(2); |
||||
} |
||||
|
||||
.mul-ellipsis3 { |
||||
@include mul-ellipsis(3); |
||||
} |
||||
@include mul-ellipsis(3); |
||||
} |
||||
|
||||
Loading…
Reference in new issue