日前调度表格样式

src/views/rqdd/rqdd.vue

@@ -1,81 +1,81 @@
 <template>
-    <div class="app-container">
-        <div class="topBanner">
-            <div class="topLogo1">
-            </div>
-            <div style="position: absolute;right: 19%;top: 8px">
-                <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
-            </div>
-            <div class="topButton1">
-                <div class="textStatus">
-                    <span>离 线 运 行</span>
-                </div>
-            </div>
-
-            <div class="crumb left33">
-                <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
-                    发电端计划监控
-                </div>
-            </div>
-            <div class="partition" style="left: 43.2%"/>
-            <div class="crumb left44">
-                <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
-                    用电端计划监控
-                </div>
-            </div>
-            <div class="partition" style="left: 54.2%"/>
-            <div class="crumb left55">
-                <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
-                    约束条件监控
-                </div>
-            </div>
-            <div class="partition" style="left: 65.2%"/>
-            <div class="crumb left66">
-                <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
-                    数据采集监控
-                </div>
-            </div>
-
-            <img class="userHead" src="../../assets/images/default-user.png">
-            <div class="userName">
-                <div style="font-size: 20px">韩翔宇</div>
-                0000000000
-            </div>
-            <img class="split" src="../../assets/images/line-v-w.png">
-            <div class="userDept">某某某部门</div>
-
-        </div>
-        <div class="zs1">
-            <div class="littleHeadWord">
-                <span>信息总览</span>
-            </div>
-            <LeftTop/>
+  <div class="app-container">
+    <div class="topBanner">
+      <div class="topLogo1">
+      </div>
+      <div style="position: absolute;right: 19%;top: 8px">
+        <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
+      </div>
+      <div class="topButton1">
+        <div class="textStatus">
+          <span>离 线 运 行</span>
         </div>
-        <div class="zs2">
-            <div class="littleHeadWord">
-                <span>告警信息</span>
-            </div>
-            <CenterMiddle3/>
+      </div>
+
+      <div class="crumb left33">
+        <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
+          发电端计划监控
         </div>
-        <div class="ys1">
-            <div class="littleHeadWord">
-                <span>联络线信息</span>
-            </div>
-            <CenterMiddle1/>
+      </div>
+      <div class="partition" style="left: 43.2%"/>
+      <div class="crumb left44">
+        <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
+          用电端计划监控
         </div>
-        <div class="yx1">
-            <div class="littleHeadWord">
-                <span>断面信息</span>
-            </div>
-            <CenterMiddle/>
+      </div>
+      <div class="partition" style="left: 54.2%"/>
+      <div class="crumb left55">
+        <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
+          约束条件监控
         </div>
-        <div class="zx">
-            <div class="littleHeadWord">
-                <span>日前调度计划</span>
-            </div>
-            <CenterMiddle2/>
+      </div>
+      <div class="partition" style="left: 65.2%"/>
+      <div class="crumb left66">
+        <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
+          数据采集监控
         </div>
+      </div>
+
+      <img class="userHead" src="../../assets/images/default-user.png">
+      <div class="userName">
+        <div style="font-size: 20px">韩翔宇</div>
+        0000000000
+      </div>
+      <img class="split" src="../../assets/images/line-v-w.png">
+      <div class="userDept">某某某部门</div>
+
+    </div>
+    <div class="zs1">
+      <div class="littleHeadWord">
+        <span>信息总览</span>
+      </div>
+      <LeftTop/>
+    </div>
+    <div class="zs2">
+      <div class="littleHeadWord">
+        <span>告警信息</span>
+      </div>
+      <CenterMiddle3/>
+    </div>
+    <div class="ys1">
+      <div class="littleHeadWord">
+        <span>联络线信息</span>
+      </div>
+      <CenterMiddle1/>
+    </div>
+    <div class="yx1">
+      <div class="littleHeadWord">
+        <span>断面信息</span>
+      </div>
+      <CenterMiddle/>
+    </div>
+    <div class="zx">
+      <div class="littleHeadWord">
+        <span>日前调度计划</span>
+      </div>
+      <CenterMiddle2/>
     </div>
+  </div>
 </template>
 
 <script>
@@ -86,187 +86,187 @@ import CenterMiddle3 from "@/views/rqdd/rqddgjxx.vue";
 import LeftTop from "@/views/rqdd/rqddxxzl.vue";
 
 export default {
-    name: 'rqdd-name',
-    components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2, CenterMiddle3}
+  name: 'rqdd-name',
+  components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2, CenterMiddle3}
 }
 </script>
 
 <style lang="css" scoped>
 .userHead {
-    position: absolute;
-    right: 15.5%;
-    margin-top: 0.2%;
+  position: absolute;
+  right: 15.5%;
+  margin-top: 0.2%;
 }
 
 .userName {
-    text-align: left;
-    position: absolute;
-    right: 10%;
-    margin-top: 0.2%;
+  text-align: left;
+  position: absolute;
+  right: 10%;
+  margin-top: 0.2%;
 }
 
 .split {
-    position: absolute;
-    right: 9.2%;
-    margin-top: 0.2%;
+  position: absolute;
+  right: 9.2%;
+  margin-top: 0.2%;
 }
 
 .userDept {
-    text-align: left;
-    position: absolute;
-    right: 2%;
-    margin-top: 0.5%;
-    font-size: 22px;
+  text-align: left;
+  position: absolute;
+  right: 2%;
+  margin-top: 0.5%;
+  font-size: 22px;
 }
 
 .topLogo1 {
-    position: absolute;
-    width: 270px;
-    height: 66px;
-    left: 2%;
-    top: 0;
-    background: url(./img/标题.q.png) 8px 0 no-repeat;
-    background-size: 95% 95%;
-    z-index: auto;
+  position: absolute;
+  width: 270px;
+  height: 66px;
+  left: 2%;
+  top: 0;
+  background: url(./img/标题.q.png) 8px 0 no-repeat;
+  background-size: 95% 95%;
+  z-index: auto;
 }
 
 .left33 {
-    left: 33%;
+  left: 33%;
 }
 
 .left44 {
-    left: 44.2%;
+  left: 44.2%;
 }
 
 .left55 {
-    left: 55.2%;
+  left: 55.2%;
 }
 
 .left66 {
-    left: 66.2%;
+  left: 66.2%;
 }
 
 .textCrumb {
-    display: flex;
-    /*align-items: center;*/
-    margin-left: 20%;
-    margin-top: 2.5%;
-    font-size: 18px;
-    font-weight: bold;
+  display: flex;
+  /*align-items: center;*/
+  margin-left: 20%;
+  margin-top: 2.5%;
+  font-size: 18px;
+  font-weight: bold;
 }
 
 .textCrumb1 {
-    display: flex;
-    /*align-items: center;*/
-    margin-left: 16%;
-    margin-top: 2.5%;
-    font-size: 18px;
-    font-weight: bold;
+  display: flex;
+  /*align-items: center;*/
+  margin-left: 16%;
+  margin-top: 2.5%;
+  font-size: 18px;
+  font-weight: bold;
 }
 
 .textStatus {
-    display: flex;
-    align-items: center;
-    margin-left: 24%;
-    font-size: 18px;
-    font-weight: bold;
-    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
+  display: flex;
+  align-items: center;
+  margin-left: 24%;
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
 }
 
 .crumb {
-    position: absolute;
-    top: 5px;
-    width: 182px;
-    height: 42px;
-    display: flex;
-    background-size: 100% 100%;
-    background-image: url('../../assets/images/crumb.png');
+  position: absolute;
+  top: 5px;
+  width: 182px;
+  height: 42px;
+  display: flex;
+  background-size: 100% 100%;
+  background-image: url('../../assets/images/crumb.png');
 }
 
 .partition {
-    position: absolute;
-    top: 7px;
-    width: 17px;
-    height: 35px;
-    display: flex;
-    background-size: 100% 100%;
-    background-image: url('../../assets/images/partition.png');
+  position: absolute;
+  top: 7px;
+  width: 17px;
+  height: 35px;
+  display: flex;
+  background-size: 100% 100%;
+  background-image: url('../../assets/images/partition.png');
 }
 
 .topButton1 {
-    position: absolute;
-    left: 19.5%;
-    width: 179px;
-    height: 42px;
-    display: flex;
-    background-size: 100% 100%;
-    background-image: url('../../assets/images/b-disable.png')
+  position: absolute;
+  left: 19.5%;
+  width: 179px;
+  height: 42px;
+  display: flex;
+  background-size: 100% 100%;
+  background-image: url('../../assets/images/b-disable.png')
 }
 
 
 .zs1 {
-    width: 32%;
-    height: calc(32vh);
-    position: absolute;
-    top: 87px;
-    left: 2px;
-    background: url(./img/1.png) no-repeat;
+  width: 32%;
+  height: calc(32vh);
+  position: absolute;
+  top: 9%;
+  left: 0;
+  background: url(./img/1.png) no-repeat;
 
 
 }
 
 .zs2 {
-    width: 32%;
-    height: calc(32vh);
-    position: absolute;
-    top: 87px;
-    left: 568px;
-    background: url(./img/1.png) no-repeat
+  width: 32%;
+  height: calc(32vh);
+  position: absolute;
+  top: 9%;
+  left: 32%;
+  background: url(./img/1.png) no-repeat
 
 }
 
 .ys1 {
-    width: 36%;
-    height: calc(44vh);
-    position: absolute;
-    top: 87px;
-    left: 1140px;
-    background: url(./img/1.j.png) no-repeat
+  width: 36%;
+  height: calc(45vh);
+  position: absolute;
+  top: 9%;
+  left: 64%;
+  background: url(./img/1.j.png) no-repeat
 
 }
 
 .yx1 {
-    width: 36%;
-    height: calc(44vh);
-    position: absolute;
-    top: 500px;
-    left: 1140px;
-    background: url(./img/1.j.png) no-repeat
+  width: 36%;
+  height: calc(45vh);
+  position: absolute;
+  top: 50%;
+  left: 64%;
+  background: url(./img/1.j.png) no-repeat
 }
 
 
 .zx {
-    width: 63.5%;
-    height: calc(58vh);
-    position: absolute;
-    top: 370px;
-    left: 2px;
-    background: url(./img/2.png) no-repeat
+  width: 63.5%;
+  height: calc(58vh);
+  position: absolute;
+  top: 41%;
+  left: 0;
+  background: url(./img/2.png) no-repeat
 }
 
 .littleHeadWord {
-    text-align: left;
-    position: absolute;
-    left: 70px;
+  text-align: left;
+  position: absolute;
+  left: 70px;
 }
 
 .littleHeadWord span {
-    display: flex;
-    align-items: center;
-    margin-top: 5%;
-    font-size: 18px;
-    font-style: italic;
-    font-weight: bold;
-    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
+  display: flex;
+  align-items: center;
+  margin-top: 5%;
+  font-size: 18px;
+  font-style: italic;
+  font-weight: bold;
+  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
 }
 </style>

src/views/rqdd/rqdddm.vue

@@ -136,6 +136,7 @@ export default {
 
 .table-wrapper {
   width: 90%;
+  height: 99%;
 
   .table-box {
     //min-height: 600px;
@@ -193,21 +194,7 @@ export default {
     width: 15%;
   }
 
-  /deep/ .el-input__inner:nth-child(1) {
-    //width: 176px;
-  }
-
-  /deep/ .el-input__inner:nth-child(2) {
-    //width: 176px;
-  }
 
-  /deep/ .el-input__inner:nth-child(2) {
-    //width: 126px;
-  }
-
-  /deep/ .el-input__inner:nth-child(2) {
-    //width: 175px;
-  }
 
   /deep/ .el-icon-arrow-up {
     transform: rotateZ(0deg);
@@ -233,6 +220,7 @@ export default {
     background-position-x: 30%;
     background-position-y: 30%;
     background-size: 100% 100%;
+    height: 95%;
     //height: 49px;
   }
 
@@ -264,7 +252,7 @@ export default {
   }
 
   /deep/ .el-table, .el-table__expanded-cell {
-    background-color: rgb(1, 40, 81);
+
 
   }
 }

src/views/rqdd/rqddllx.vue

@@ -5,10 +5,9 @@
                     :cell-style="{border:0,color:'#fff'}"
                     :data="tableData"
                     :header-cell-style="{color:'#fff'}"
-                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    :row-style="{background:'none'}"
                     class="mytable"
                     size="mini"
-                    style="background: none;font-size: 15px"
             >
                 <el-table-column align="center" label="名称" prop="name" width="170px"></el-table-column>
                 <el-table-column align="center" label="状态" prop="state">
@@ -162,9 +161,9 @@ export default {
     //font-size: 17px;
   }
 
-  /deep/ .el-table__header {
+/*  /deep/ .el-table__header {
     background: url(../Articles/img/bg1.png);
-  }
+  }*/
 
   ///deep/ .el-table th.el-table__cell.is-leaf {
   //  border-bottom: none;
@@ -236,7 +235,7 @@ export default {
   }
 
   /deep/ .el-table__header tr {
-    background: url(../Articles/img/bg1.png);
+    background: none;
     //height: 49px;
   }
 
@@ -253,8 +252,15 @@ export default {
     text-align: left;
   }
 
-  /deep/ .el-table, .el-table__expanded-cell {
-    background-color: rgb(1, 40, 81);
+
+
+
+  /deep/ .el-table {
+    background: url(../Articles/img/组2460.png) no-repeat;
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+    height: 95%;
   }
 }
 </style>