'保安项目提交'
This commit is contained in:
esacpe
201
src/assets/css/homeBigScreen.scss
Normal file
201
src/assets/css/homeBigScreen.scss
Normal file
@ -0,0 +1,201 @@
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@mixin positon() {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: $headHeight;
|
||||
width: 30%;
|
||||
height: calc(100vh - $headHeight);
|
||||
}
|
||||
|
||||
$headHeight: 4vw; // 头部高度
|
||||
$asideWidth: 30vw; // 侧边菜单宽度
|
||||
$centerWidth: calc(100% - 60vw); // 中间模块宽度
|
||||
$asideMargin: 1vw; // 侧边菜单间距
|
||||
.bigScrenn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background: url("~@/assets/bigHome/homeBg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
&::before {
|
||||
@include positon();
|
||||
left: 0;
|
||||
background: url("~@/assets/bigHome/left.png") no-repeat left center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&::after {
|
||||
@include positon();
|
||||
right: 0;
|
||||
background: url("~@/assets/bigHome/right.png") no-repeat left center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 头部
|
||||
.home-head-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $headHeight;
|
||||
.top-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 2vw;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.51vw;
|
||||
font-family: "YSBTH";
|
||||
.line{
|
||||
width: 4px;
|
||||
height: 1vw;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
margin: 0 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 2.3vw;
|
||||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background-image: linear-gradient(72deg,#0072ff 0%,#00ffff 18%,#07e9ff 51%,#00ffff 83%,#0072ff 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
}
|
||||
|
||||
.topBtn-right {
|
||||
right: 18%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
.topBtn-item {
|
||||
width: 5vw;
|
||||
height: 1.45vw;
|
||||
text-align: center;
|
||||
line-height: 1.35vw;
|
||||
padding-left: 0.3vw;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/bigHome/home_btns_right.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.5vw;
|
||||
span {
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.active-topBtn {
|
||||
background: url("~@/assets/bigHome/home_btns_right_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
span {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
right: 2vw;
|
||||
top: 20%;
|
||||
font-size: 17px;
|
||||
span {
|
||||
color: #0bb7ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 侧边菜单
|
||||
.asideBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
top: $headHeight;
|
||||
width: $asideWidth;
|
||||
height: calc(100vh - $headHeight);
|
||||
overflow: hidden;
|
||||
padding: 1vw 0 0 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.asideBoxL {
|
||||
left: 0;
|
||||
margin-left: $asideMargin;
|
||||
}
|
||||
|
||||
.asideBoxR {
|
||||
right: 0;
|
||||
margin-right: $asideMargin;
|
||||
}
|
||||
.asideItem {
|
||||
height: 100%;
|
||||
width: 49%;
|
||||
margin: 0px 1px;
|
||||
padding: 2px 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
// 中间模块
|
||||
.centerBox{
|
||||
position: absolute;
|
||||
top: 4vw;
|
||||
left: 50%;
|
||||
width: calc(100% - 2*$asideWidth - 3vw);
|
||||
height: calc(100% - $headHeight);
|
||||
transform: translateX(-50%);
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height: calc(100% - 110px);
|
||||
margin-bottom: 20px;
|
||||
background: url("~@/assets/bigHome/mapBg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
&::after{
|
||||
content: "";
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/bigHome/center.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.mapSorce{
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sircle {
|
||||
position: absolute;
|
||||
width: 1.3vw;
|
||||
height: 509px;
|
||||
top: 30%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.leftSiecle {
|
||||
@include sircle;
|
||||
background: url("~@/assets/images/fold-bg.png") no-repeat center center;
|
||||
transform: rotate(180deg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rightSiecle {
|
||||
@include sircle;
|
||||
background: url("~@/assets/images/fold-bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user