Skip to content

P
pjnkb-vue
Commit 9400fdf0 authored by 李苏's avatar 李苏 💬
Browse files
Options

css样式优化

parent af06d861
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 113 deletions
src/views/index.vue
View file @ 9400fdf0
......@@ -1222,34 +1222,71 @@
}
</script>
<style lang="scss" scoped>
// 公共阴影样式
@mixin box-shadow-style {
box-shadow: inset 0 0 30px #07417a, 0 0 10px #07417a;
}
// 公共边框角样式
@mixin border-corner-style($position: top, $side: left) {
width: 20px;
height: 20px;
position: absolute;
@if $position == top {
top: -2px;
@if $side == left {
border-top: 2px solid #26c6f0;
border-left: 2px solid #26c6f0;
left: -2px;
} @else {
border-top: 2px solid #26c6f0;
border-right: 2px solid #26c6f0;
right: -2px;
}
} @else {
bottom: -2px;
@if $side == left {
border-bottom: 2px solid #26c6f0;
border-left: 2px solid #26c6f0;
left: -2px;
} @else {
border-bottom: 2px solid #26c6f0;
border-right: 2px solid #26c6f0;
right: -2px;
}
}
}
.data-box1 {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
border: 2px solid #032d60;
@include box-shadow-style;
/*position: relative;*/
}
.main_title {
width: 100%;
height: 35px;
line-height: 33px;
background-color: #1b4081;
color: #fff;
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
padding-left: 20px;
text-align: left;
position: relative;
border: 1px solid #03657c;
}
.main_title:before {
width: 100%;
height: 35px;
line-height: 33px;
background-color: #1b4081;
color: #fff;
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
padding-left: 20px;
text-align: left;
position: relative;
border: 1px solid #03657c;
&:before {
position: absolute;
left: 2px;
content: '';
width: 4px;
height: 35px;
background-color: #2EB976;}
background-color: #2EB976;
}
}
.lbbt {
height: 4vh;
width: 100%;
......@@ -1261,34 +1298,28 @@
}
#aqscts {
// color: # !important;
color: #26c6de !important;
box-sizing: border-box;
// cursor: url(../../images/dashboard/pointer.png) 8 3,auto;
font-family: 微软雅黑;
text-shadow: #00d8ff 0 0 20.9455px;
width: 100%;
}
.grid-container {
display: grid;
// grid-template-columns: repeat(3, 1fr);
// grid-template-rows: repeat(3, 32%);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 47%);
gap: 10px;
height: calc(100% - 66px);
width: 100%;
}
.grid-container>div {
border: 2px solid #26c6f0;
border-radius: 7px;
> div {
border: 2px solid #26c6f0;
border-radius: 7px;
}
}
.menu {
// float: left;
width: 128px;
height: 48px;
margin: 5px 6px 0;
......@@ -1302,7 +1333,6 @@
height: calc(100vh - 84px);
width: 100%;
padding-top: 2px;
// background-image: url('./static/data08.png');
background-color: #000e1d;
background-size: 100% 100%;
overflow: hidden;
......@@ -1341,8 +1371,7 @@
margin: -14px auto 0 auto;
color: #83c7e3;
font-size: 14px;
// letter-spacing: 2px;
font-weight: 600
font-weight: 600;
}
.data-title {
......@@ -1352,11 +1381,11 @@
color: #83c7e3;
font-size: 20px;
letter-spacing: 2px;
font-weight: 600
}
font-weight: 600;
.data-title span {
margin: 0 15px;
span {
margin: 0 15px;
}
}
.data-title-left,
......@@ -1373,68 +1402,20 @@
top: 8px;
}
.data-box1 {
border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.topL {
width: 20px;
height: 20px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
top: -2px;
left: -2px;
@include border-corner-style(top, left);
}
.topR {
width: 20px;
height: 20px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
top: -2px;
right: -2px;
@include border-corner-style(top, right);
}
.bottomL {
width: 20px;
height: 20px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
bottom: -2px;
left: -2px;
@include border-corner-style(bottom, left);
}
.bottomR {
width: 20px;
height: 20px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
bottom: -2px;
right: -2px;
@include border-corner-style(bottom, right);
}
.mktitle {
......@@ -1444,25 +1425,20 @@
font-weight: 600;
height: 35px;
position: relative;
overflow: hidden
}
overflow: hidden;
.mktitle img {
height: 15px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
img {
height: 15px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
}
.mkbody {
width: 100%;
height: calc(100% - 35px);
}
.padding5 {
padding: 5px;
}
.main_body {
......@@ -1470,7 +1446,6 @@
width: 100%;
display: flex;
.main_body_left {
width: 31%;
height: 100%;
......@@ -1478,19 +1453,16 @@
.main_body_left_c1 {
height: 30%;
width: 100%;
}
.main_body_left_c2 {
height: 30%;
width: 100%;
}
.main_body_left_c3 {
height: 40%;
width: 100%;
}
}
......@@ -1498,17 +1470,14 @@
width: 38%;
height: 100%;
.main_body_center_c1 {
height: 55%;
width: 100%;
}
.main_body_center_c2 {
height: 45%;
width: 100%;
}
}
......@@ -1519,25 +1488,21 @@
.main_body_right_c1 {
height: 15%;
width: 100%;
}
.main_body_right_c2 {
height: 28.333%;
width: 100%;
}
.main_body_right_c3 {
height: 28.333%;
width: 100%;
}
.main_body_right_c4 {
height: 28.333%;
width: 100%;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment