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 @@ ...@@ -1222,34 +1222,71 @@
} }
</script> </script>
<style lang="scss" scoped> <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 { .data-box1 {
border: 2px solid #032d60; border: 2px solid #032d60;
-webkit-box-shadow: #07417a 0px 0px 10px; @include box-shadow-style;
-moz-box-shadow: #07417a 0px 0px 10px; /*position: relative;*/
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
} }
.main_title { .main_title {
width: 100%; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #1b4081; background-color: #1b4081;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding-left: 20px;
text-align: left; text-align: left;
position: relative; position: relative;
border: 1px solid #03657c; border: 1px solid #03657c;
}
.main_title:before { &:before {
position: absolute; position: absolute;
left: 2px; left: 2px;
content: ''; content: '';
width: 4px; width: 4px;
height: 35px; height: 35px;
background-color: #2EB976;} background-color: #2EB976;
}
}
.lbbt { .lbbt {
height: 4vh; height: 4vh;
width: 100%; width: 100%;
...@@ -1261,34 +1298,28 @@ ...@@ -1261,34 +1298,28 @@
} }
#aqscts { #aqscts {
// color: # !important;
color: #26c6de !important; color: #26c6de !important;
box-sizing: border-box; box-sizing: border-box;
// cursor: url(../../images/dashboard/pointer.png) 8 3,auto;
font-family: 微软雅黑; font-family: 微软雅黑;
text-shadow: #00d8ff 0 0 20.9455px; text-shadow: #00d8ff 0 0 20.9455px;
width: 100%; width: 100%;
} }
.grid-container { .grid-container {
display: grid; display: grid;
// grid-template-columns: repeat(3, 1fr);
// grid-template-rows: repeat(3, 32%);
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 47%); grid-template-rows: repeat(2, 47%);
gap: 10px; gap: 10px;
height: calc(100% - 66px); height: calc(100% - 66px);
width: 100%; width: 100%;
}
.grid-container>div { > div {
border: 2px solid #26c6f0; border: 2px solid #26c6f0;
border-radius: 7px; border-radius: 7px;
}
} }
.menu { .menu {
// float: left;
width: 128px; width: 128px;
height: 48px; height: 48px;
margin: 5px 6px 0; margin: 5px 6px 0;
...@@ -1302,7 +1333,6 @@ ...@@ -1302,7 +1333,6 @@
height: calc(100vh - 84px); height: calc(100vh - 84px);
width: 100%; width: 100%;
padding-top: 2px; padding-top: 2px;
// background-image: url('./static/data08.png');
background-color: #000e1d; background-color: #000e1d;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
...@@ -1341,8 +1371,7 @@ ...@@ -1341,8 +1371,7 @@
margin: -14px auto 0 auto; margin: -14px auto 0 auto;
color: #83c7e3; color: #83c7e3;
font-size: 14px; font-size: 14px;
// letter-spacing: 2px; font-weight: 600;
font-weight: 600
} }
.data-title { .data-title {
...@@ -1352,11 +1381,11 @@ ...@@ -1352,11 +1381,11 @@
color: #83c7e3; color: #83c7e3;
font-size: 20px; font-size: 20px;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 600 font-weight: 600;
}
.data-title span { span {
margin: 0 15px; margin: 0 15px;
}
} }
.data-title-left, .data-title-left,
...@@ -1373,68 +1402,20 @@ ...@@ -1373,68 +1402,20 @@
top: 8px; 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 { .topL {
width: 20px; @include border-corner-style(top, left);
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;
} }
.topR { .topR {
width: 20px; @include border-corner-style(top, right);
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;
} }
.bottomL { .bottomL {
width: 20px; @include border-corner-style(bottom, left);
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;
} }
.bottomR { .bottomR {
width: 20px; @include border-corner-style(bottom, right);
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;
} }
.mktitle { .mktitle {
...@@ -1444,25 +1425,20 @@ ...@@ -1444,25 +1425,20 @@
font-weight: 600; font-weight: 600;
height: 35px; height: 35px;
position: relative; position: relative;
overflow: hidden overflow: hidden;
}
.mktitle img { img {
height: 15px; height: 15px;
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
}
} }
.mkbody { .mkbody {
width: 100%; width: 100%;
height: calc(100% - 35px); height: calc(100% - 35px);
}
.padding5 {
padding: 5px;
} }
.main_body { .main_body {
...@@ -1470,7 +1446,6 @@ ...@@ -1470,7 +1446,6 @@
width: 100%; width: 100%;
display: flex; display: flex;
.main_body_left { .main_body_left {
width: 31%; width: 31%;
height: 100%; height: 100%;
...@@ -1478,19 +1453,16 @@ ...@@ -1478,19 +1453,16 @@
.main_body_left_c1 { .main_body_left_c1 {
height: 30%; height: 30%;
width: 100%; width: 100%;
} }
.main_body_left_c2 { .main_body_left_c2 {
height: 30%; height: 30%;
width: 100%; width: 100%;
} }
.main_body_left_c3 { .main_body_left_c3 {
height: 40%; height: 40%;
width: 100%; width: 100%;
} }
} }
...@@ -1498,17 +1470,14 @@ ...@@ -1498,17 +1470,14 @@
width: 38%; width: 38%;
height: 100%; height: 100%;
.main_body_center_c1 { .main_body_center_c1 {
height: 55%; height: 55%;
width: 100%; width: 100%;
} }
.main_body_center_c2 { .main_body_center_c2 {
height: 45%; height: 45%;
width: 100%; width: 100%;
} }
} }
...@@ -1519,25 +1488,21 @@ ...@@ -1519,25 +1488,21 @@
.main_body_right_c1 { .main_body_right_c1 {
height: 15%; height: 15%;
width: 100%; width: 100%;
} }
.main_body_right_c2 { .main_body_right_c2 {
height: 28.333%; height: 28.333%;
width: 100%; width: 100%;
} }
.main_body_right_c3 { .main_body_right_c3 {
height: 28.333%; height: 28.333%;
width: 100%; width: 100%;
} }
.main_body_right_c4 { .main_body_right_c4 {
height: 28.333%; height: 28.333%;
width: 100%; 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