💄 Z: Style: table style in element is change.

ybf_admin/src/pages/task/bar/index.vue

@@ -47,6 +47,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
+
         <!-- </el-col> -->
 
         <!-- 关键字 -->
@@ -73,8 +74,8 @@
         tooltip-effect="dark"
         style="width: 100%"
         @selection-change="listPick"
-        :header-cell-style="setListsHeadStyle"
       >
+<!--             :header-cell-style="setListsHeadStyle"-->
         <el-table-column type="selection" width="60"></el-table-column>
         <el-table-column prop="taskName" label="任务名" align="center" width="200"></el-table-column>
         <el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column>
@@ -105,17 +106,39 @@
         :total="400"
       ></el-pagination>
     </div>
+    <div class="dialogs">
+      <el-dialog
+        title="创建任务"
+        :visible.sync="cache.status.createDialog"
+        width="60%"
+        :before-close="dialogCreateBeforeClose">
+        <div class="dialogMain">
+          <span>会当凌绝顶，一览众山小。</span>
+
+        </div>
+        <span slot="footer" class="dialog-footer">
+    <el-button size="small" @click="dialogCreateCancel">取 消</el-button>
+    <el-button size="small" type="primary" @click="dialogCreateSubmit">保 存</el-button>
+    <el-button size="small" type="primary" @click="dialogCreateSubmitSend">保存并发布</el-button>
+  </span>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
-import TaskBar from "../bar/index";
-import TaskCom from "../com/index";
-import TaskCount from "../count/index";
+  import TaskBar from "../bar/index";
+  import TaskCom from "../com/index";
+  import TaskCount from "../count/index";
 
-export default {
+  export default {
     components: {},
     data() {
       return {
+        cache: {
+          status: {
+            createDialog: false
+          }
+        },
         list: {
           main: [
             {
@@ -179,32 +202,46 @@ export default {
         }
       };
     },
-  created() {},
+    created() {
+    },
     methods: {
-    listPick() {},
-    testButtonClick() {},
-    pagesSizeChange() {},
-    pagesNowPageChange() {},
-    setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
+      listPick() {
+      },
+      testButtonClick() {
+      },
+      pagesSizeChange() {
+      },
+      pagesNowPageChange() {
+      },
+      setListsHeadStyle({row, column, rowIndex, columnIndex}) {
         if (rowIndex === 0) {
           return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
         } else {
           return "";
         }
+      },
+      dialogCreateBeforeClose() {
+      },
+      dialogCreateCancel() {
+      },
+      dialogCreateSubmit() {
+      },
+      dialogCreateSubmitSend() {
+      },
     }
-  }
-};
+  };
 </script>
 <style lang="scss" scoped>
-.main {
+  .main {
     // border: 2px solid orange;
     height: 100vh;
 
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-}
-.searchs {
+  }
+
+  .searchs {
     // border: 2px solid red;
     height: 40px;
     width: 100%;
@@ -213,8 +250,9 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-}
-.buttons {
+  }
+
+  .buttons {
     // border: 2px solid darkcyan;
     // width: 30%;
     // min-width: 266px;
@@ -222,24 +260,29 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-}
-.buttonlight {
+  }
+
+  .buttonlight {
     background-color: #e8e9fe;
     color: #4e59c7;
     border: 1px solid #4e59c7;
     box-sizing: border-box;
-}
-.buttonlight:hover {
-}
-.buttondark {
+  }
+
+  .buttonlight:hover {
+  }
+
+  .buttondark {
     background-color: #4e59c7;
     color: #ffffff;
     border: 1px solid #4e59c7;
     box-sizing: border-box;
-}
-.buttondark:hover {
-}
-.searchzone {
+  }
+
+  .buttondark:hover {
+  }
+
+  .searchzone {
     // border: 2px solid orange;
     height: 40px;
     width: auto;
@@ -249,23 +292,27 @@ export default {
     // flex-direction: row;
     // justify-content: space-between;
     // align-items: center;
-}
-.lists {
-  // border: 2px solid greenyellow;
+  }
+
+  .lists {
+     /*border: 2px solid greenyellow;*/
     height: auto;
     // min-height: 400px;
     min-height: 70%;
     width: 100%;
     margin-top: 20px;
-}
-.list {
+  }
+
+  .list {
     // border: 1px solid red;
-}
-.listButtonRed {
+  }
+
+  .listButtonRed {
     // border: 2px solid green;
     color: red;
-}
-.pages {
+  }
+
+  .pages {
     // border: 2px solid steelblue;
     height: 40px;
     width: 100%;
@@ -273,5 +320,11 @@ export default {
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
-}
+  }
+</style>
+<style lang="scss" scoped>
+  .dialogMain {
+    border: 2px solid red;
+    height: 100%;
+  }
 </style>