lcw
This commit is contained in:
@ -3,261 +3,306 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.homeBox{
|
||||
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.home-aside {
|
||||
position: relative;
|
||||
width: 442px;
|
||||
top: 70px;
|
||||
height: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
|
||||
.asideTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, #124CB3 0%, rgba(18, 76, 179, 0.23) 77%, rgba(18, 76, 179, 0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 40px;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.asideCnt {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.aside-middle {
|
||||
height: calc(100%/2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.homeBtn {
|
||||
height: 302px;
|
||||
width: calc(100% - 894px);
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
// 头部
|
||||
.headBox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.home-aside{
|
||||
position: relative;
|
||||
width: 442px;
|
||||
top: 70px;
|
||||
height: 70px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
|
||||
.headBoxBg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
.asideTitle{
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 151px;
|
||||
}
|
||||
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 56px;
|
||||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
}
|
||||
|
||||
.topBtn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
|
||||
.topBtn-item {
|
||||
width: 190px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient( 90deg, #124CB3 0%, rgba(18,76,179,0.23) 77%, rgba(18,76,179,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 40px;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.asideCnt{
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.aside-middle{
|
||||
height: calc(100%/2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.homeBtn{
|
||||
height: 302px;
|
||||
width: calc(100% - 894px);
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
// 头部
|
||||
.headBox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 2;
|
||||
.headBoxBg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
justify-content: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 151px;
|
||||
}
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 56px;
|
||||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
}
|
||||
.topBtn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
.topBtn-item {
|
||||
width: 190px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-family: "YSBTH";
|
||||
margin-top: -4px;
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.topBtn-left {
|
||||
left: 30px;
|
||||
font-size: 12px;
|
||||
.text {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-family: "YSBTH";
|
||||
color: #0bb7ff;
|
||||
}
|
||||
.tests {
|
||||
color: #0a99ff;
|
||||
}
|
||||
}
|
||||
.leftBtn-yjbtn{
|
||||
position: absolute;
|
||||
left: 360px;
|
||||
top: 20px;
|
||||
.leftBtn-item{
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
.btms{
|
||||
margin-top: -4px;
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.yjbtnActive{
|
||||
background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
|
||||
}
|
||||
|
||||
.topBtn-left {
|
||||
left: 30px;
|
||||
font-size: 12px;
|
||||
|
||||
.text {
|
||||
font-family: "YSBTH";
|
||||
color: #0bb7ff;
|
||||
}
|
||||
|
||||
.tests {
|
||||
color: #0a99ff;
|
||||
}
|
||||
}
|
||||
|
||||
.leftBtn-yjbtn {
|
||||
position: absolute;
|
||||
left: 360px;
|
||||
top: 20px;
|
||||
|
||||
.leftBtn-item {
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.btms{
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.btms {
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
.yjbtnActive {
|
||||
background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.btms {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
|
||||
.topBtn-right {
|
||||
right: 270px;
|
||||
top: 22px;
|
||||
|
||||
.topBtn-item {
|
||||
background: url("~@/assets/images/home_btns_right.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active-topBtn {
|
||||
background: url("~@/assets/images/home_btns_right_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
.topBtn-right {
|
||||
right: 270px;
|
||||
top: 22px;
|
||||
.topBtn-item {
|
||||
background: url("~@/assets/images/home_btns_right.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.active-topBtn {
|
||||
background: url("~@/assets/images/home_btns_right_active.png") no-repeat
|
||||
center center;
|
||||
background-size: 100% 100%;
|
||||
span {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
font-size: 17px;
|
||||
z-index: 9;
|
||||
span {
|
||||
color: #0bb7ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 左边
|
||||
.asideL{
|
||||
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0px;
|
||||
.asideL-top{
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
background: #052249;
|
||||
}
|
||||
.asideL-Bottom{
|
||||
height: calc(100% - 141px);
|
||||
.commom-aside{
|
||||
height: calc((100%/3) - 6px);
|
||||
margin-top: 7px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
.commom-aside-small{
|
||||
height: calc(((100% - 146px) /3) - 6px);
|
||||
background: #052249;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.commom-aside-big{
|
||||
height: calc(((100% - (100% - 146px) /3)/2) - 6px);
|
||||
margin-bottom: 9px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
.home-center{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 890px);
|
||||
height: 80px;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
font-size: 17px;
|
||||
z-index: 9;
|
||||
|
||||
span {
|
||||
color: #0bb7ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 左边
|
||||
.asideL {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0px;
|
||||
|
||||
.asideL-top {
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
background: #052249;
|
||||
}
|
||||
|
||||
.home-foot-t{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 920px);
|
||||
height: calc((100% - 141px)/3 - 32px);
|
||||
min-width: 560px;
|
||||
overflow: hidden;
|
||||
z-index: 9;
|
||||
background: url("~@/assets/images/right-1.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.comom-title{
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.title{
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
.asideL-Bottom {
|
||||
height: calc(100% - 141px);
|
||||
|
||||
.commom-aside {
|
||||
height: calc((100%/3) - 6px);
|
||||
margin-top: 7px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
// 公用
|
||||
.comom-title{
|
||||
background: url("~@/assets/images/bg17.png") no-repeat center center;
|
||||
}
|
||||
|
||||
// 右边
|
||||
.asideR {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
.commom-aside-small {
|
||||
height: calc(((100% - 146px) /3) - 6px);
|
||||
background: #052249;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.commom-aside-big {
|
||||
height: calc(((100% - (100% - 146px) /3)/2) - 6px);
|
||||
margin-bottom: 9px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
.home-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 890px);
|
||||
z-index: 9;
|
||||
background: #052249;
|
||||
height: calc(100% - (100% - 141px) / 3 - 45px);
|
||||
|
||||
.middle-top {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.middle-bottom {
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
.home-foot-t {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 920px);
|
||||
height: calc((100% - 141px)/3 - 32px);
|
||||
min-width: 560px;
|
||||
overflow: hidden;
|
||||
z-index: 9;
|
||||
background: url("~@/assets/images/right-1.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.comom-title {
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
.comom-cnt{
|
||||
height: calc(100% - 35px);
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 公用
|
||||
.comom-title {
|
||||
background: url("~@/assets/images/bg17.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.comom-cnt {
|
||||
height: calc(100% - 35px);
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
src/assets/images/ddtb.png
Normal file
BIN
src/assets/images/ddtb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/xxxxxx.png
Normal file
BIN
src/assets/images/xxxxxx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user