表格页面调整

src/views/Articles/index.vue

@@ -1,144 +1,148 @@
 <template>
   <div class="table-wrapper">
-<div class="table-box">
-  <div class="title">风电</div>
+    <div class="table-box">
+      <div class="title"
+           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;margin-left: 90px;padding-top: 3px;margin-bottom: 20px">
+        风电
+      </div>
       <el-row :gutter="20">
         <el-form>
-          <el-col :span="5">
+          <el-col >
             <el-form-item
-              label="场站名称:"
-              style="font-weight: 700"
-              label-width="75px"
+                label="场站名称:"
+                style="font-weight: 700"
+                label-width="100px"
             >
               <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="5">
+          <el-col >
             <el-form-item
-              label="装机容量(MVA):"
-              style="font-weight: 700"
-              label-width="120px"
+                label="装机容量(MVA):"
+                style="font-weight: 700"
+                label-width="150px"
             >
               <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="4">
+          <el-col>
             <el-form-item
-              label="是否受控:"
-              style="font-weight: 700"
-              label-width="75px"
-              >
+                label="是否受控:"
+                style="font-weight: 700"
+                label-width="100px"
+            >
               <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="4">
+          <el-col >
             <el-form-item
-              label="下发状态:"
-              style="font-weight: 700"
-              label-width="75px"
+                label="下发状态:"
+                style="font-weight: 700"
+                label-width="100px"
             >
               <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="5">
+          <el-col >
             <el-form-item
-              label="日期:"
-              style="font-weight: 700"
-              label-width="45px"
+                label="日期:"
+                style="font-weight: 700"
+                label-width="60px"
             >
               <el-date-picker
-                v-model="form.date"
-                type="date"
-                size="mini"
-                placeholder="选择日期">
+                  v-model="form.date"
+                  type="date"
+                  size="mini"
+                  placeholder="选择日期">
               </el-date-picker>
             </el-form-item>
           </el-col>
         </el-form>
       </el-row>
       <el-table
-      :data="tableData"
-      size="mini"
-      style="width: 100%"
-      :header-cell-style="{backgroundColor:'rgba(0, 96, 170)',color:'#fff'}"
-      :cell-style="{backgroundColor:'rgba(2, 66, 120)',color:'#fff'}"
+          :data="tableData"
+          size="mini"
+          style="width: 1429px;font-size: 17px"
+          :header-cell-style="{color:'#fff'}"
+          :row-style="{background:'none'}"
+          :cell-style="{background:'none',border:0,color:'#fff'}"
       >
-      <el-table-column
-        prop="date"
-        label="场站名称"
-        align="center"
-       >
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="是否受控"
-        align="center"
+        <el-table-column
+            prop="date"
+            label="场站名称"
+            align="center"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="是否受控"
+            align="center"
         >
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="装机容量(MVA)"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="虚拟电厂计划值"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="现货系统计划值"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="计划时刻"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="执行时刻"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="下发状态"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="下发时间"
-        align="center">
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="装机容量(MVA)"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="虚拟电厂计划值"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="现货系统计划值"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="计划时刻"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="执行时刻"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="下发状态"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="下发时间"
+            align="center">
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
@@ -147,7 +151,7 @@
 
 export default {
   name: 'Article-Index',
-  data () {
+  data() {
     return {
       form: {
         taskNumber: '',
@@ -190,47 +194,118 @@ export default {
       }]
     }
   },
-  methods: {
-
-  },
-  mounted () {
+  methods: {},
+  mounted() {
 
   }
 }
 </script>
 
 <style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("./font/AlimamaDaoLiTi.ttf")
+}
+
+
+
 .table-wrapper {
-  width: 100%;
+  width: 1483px;
   padding: 0 20px;
-background: url(./img/bigbgc.png);
-background-size: cover;
+  background: url(./img/bigbgc.png);
+  background-size: cover;
+
   .table-box {
     background: url(./img/bgc.png);
     min-height: 600px;
     background-size: cover;
   }
+
   .title {
     margin-bottom: 20px;
     margin-left: 60px;
     font-size: 18px;
     color: #fff;
   }
+
   /deep/ .el-form-item__label {
     color: #fff;
+    font-size: 17px;
   }
+
   /deep/ .el-input__inner {
-    background-color: rgba(0, 0, 255, 0.2);
-    border: 1px solid blue;
-  }
- /deep/ .el-table thead {
-  background-color:rgba(0, 0, 255);
- }
- /deep/ .el-table__body{
-  -webkit-border-vertical-spacing: 13px;  // 垂直间距
-}
-/deep/ .el-table, .el-table__expanded-cell {
-   background-color: rgb(1,40,81);
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+  /deep/ .el-table__header{
+    background: url(./img/bg1.png);
+  }
+
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+   background-color: rgb(103,118,49) !important
+   }
+
+  /deep/ .el-col{
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  /deep/ .el-col:nth-child(1){
+    width: 19%;
+  }
+  /deep/ .el-col:nth-child(2){
+    width: 22%;
+  }
+  /deep/ .el-col:nth-child(3){
+    width: 19%;
+  }
+  /deep/ .el-col:nth-child(4){
+    width: 19%;
+  }
+  /deep/ .el-col:nth-child(5){
+    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-table__header tr {
+    background: url(./img/bg1.png);
+    height: 49px;
+
 }
+
+  /deep/ .el-table th.el-table__cell{
+    background:none ;
+  }
+
+  /deep/ .el-table__body {
+    -webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+  /deep/ .el-form-item__content{
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+  }
 }
 </style>