From 1fe240406526b9b6256664559d3d2bec9250135c Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期五, 21 十月 2022 18:38:53 +0800
Subject: [PATCH] 设备管理小样

---
 src/views/equipmentManagement/equipmentList/components/FormList.vue |  743 +++++++++++++++++++++++++++++----------------------------
 1 files changed, 377 insertions(+), 366 deletions(-)

diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.vue b/src/views/equipmentManagement/equipmentList/components/FormList.vue
index f46981c..85fb0fb 100644
--- a/src/views/equipmentManagement/equipmentList/components/FormList.vue
+++ b/src/views/equipmentManagement/equipmentList/components/FormList.vue
@@ -3,6 +3,54 @@
     <div class="search">
       <div class="left">
         <div class="id">
+          <div class="left-txt">璁惧鍚嶇О/ID</div>
+          <el-input class="id-input" v-model="inputText" placeholder="璇疯緭鍏ヨ澶囧悕绉�/ID"></el-input>
+        </div>
+
+        <div class="time">
+          <div class="left-txt">璁惧瀹夎鏃堕棿</div>
+
+          <el-date-picker
+            style="width: 380px"
+            v-model="searchTime"
+            @change="searchingBtn"
+            type="datetimerange"
+            size="small"
+            start-placeholder="寮�濮嬫棩鏈�"
+            end-placeholder="缁撴潫鏃ユ湡"
+            :default-time="['00:00:00', '23:59:59']"
+          ></el-date-picker>
+        </div>
+
+        <div class="cluster">
+          <div class="left-txt">鎵�灞為泦缇�</div>
+          <div class="cluster-select">
+            <el-select style="width: 200px" v-model="cluster" placeholder="璇烽�夋嫨鎵�灞為泦缇�">
+              <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
+        <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="btns">
+      <div class="button add" @click="isShowAdd = true">
+        <img src="@/assets/img/add.png" alt="" />
+        <div class="button-txt">娣诲姞璁惧</div>
+      </div>
+      <div class="button export" @click="exportFile">
+        <div class="iconfont">&#xe614;</div>
+        <div class="button-txt">瀵煎嚭</div>
+      </div>
+    </div>
+
+    <!-- <div class="left">
+        <div class="id">
           璁惧鍚嶇О/ID
           <el-input v-model="inputText" placeholder="璇疯緭鍏�"></el-input>
         </div>
@@ -23,35 +71,28 @@
         <div class="cluster">
           鎵�灞為泦缇�
           <el-select v-model="cluster" placeholder="璇烽�夋嫨">
-            <el-option
-              v-for="item in clusterArr"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+            <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
-      </div>
+      </div> -->
 
-      <div class="right">
-        <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
-        <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
-      </div>
-    </div>
+    <!-- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
+          <template slot-scope="scope">
+            <div v-if="scope.row.firstUseTime.length > 1">
+              <div>{{ scope.row.firstUseTime[0] }}</div>
+              <div>{{ scope.row.firstUseTime[1] }}</div>
+            </div>
+            <div v-else>--</div>
+          </template>
+        </el-table-column> -->
 
-    <div class="btns">
-      <div class="button add" @click="isShowAdd = true">
-        <span>+</span>娣诲姞璁惧
-      </div>
-      <div class="button export" @click="exportFile">
-        <span class="iconfont">&#xe614;</span>瀵煎嚭
-      </div>
-    </div>
-
+    <!-- height="50" 
+        -->
     <div class="table-area">
       <el-table
         id="multipleTable"
+        :header-cell-style="{ height: '50px' }"
         ref="multipleTable"
         tooltip-effect="dark"
         :data="dataList"
@@ -60,27 +101,11 @@
         :stripe="true"
       >
         <el-table-column label="搴忓彿" width="80" class-name="index">
-          <template slot-scope="scope">{{
-            scope.$index + 1 + (page - 1) * size
-          }}</template>
+          <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
         </el-table-column>
-        <el-table-column
-          prop="devId"
-          label="璁惧ID"
-          min-width="140"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          prop="devName"
-          label="璁惧鍚嶇О"
-          min-width="140"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          prop="devIp"
-          label="IP鍦板潃"
-          min-width="150"
-        ></el-table-column>
+        <el-table-column prop="devId" label="璁惧ID" min-width="210" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="devName" label="璁惧鍚嶇О" min-width="140" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="devIp" label="IP鍦板潃" min-width="150"></el-table-column>
         <el-table-column label="瀹夎鏃堕棿" min-width="159">
           <template slot-scope="scope">
             <div v-if="scope.row.installTime.length > 1">
@@ -90,15 +115,6 @@
             <div v-else>--</div>
           </template>
         </el-table-column>
-        <!-- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
-          <template slot-scope="scope">
-            <div v-if="scope.row.firstUseTime.length > 1">
-              <div>{{ scope.row.firstUseTime[0] }}</div>
-              <div>{{ scope.row.firstUseTime[1] }}</div>
-            </div>
-            <div v-else>--</div>
-          </template>
-        </el-table-column> -->
 
         <el-table-column label="鎵�灞為泦缇�" show-overflow-tooltip min-width="154">
           <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
@@ -113,12 +129,7 @@
 
         <el-table-column label="鎿嶄綔" min-width="180">
           <template slot-scope="scope">
-            <!-- 鍔犲叆 -->
-            <el-tooltip
-              content="鍔犲叆闆嗙兢"
-              placement="top"
-              v-if="!scope.row.clusterId"
-            >
+            <el-tooltip content="鍔犲叆闆嗙兢" placement="top" v-if="!scope.row.clusterId">
               <span
                 class="iconfont option"
                 @click="joinCluster(scope.row)"
@@ -126,7 +137,7 @@
                 >&#xe640;</span
               >
             </el-tooltip>
-            <!-- 閫�鍑� -->
+
             <el-tooltip content="閫�鍑洪泦缇�" placement="top" v-else>
               <span
                 class="iconfont option"
@@ -135,7 +146,7 @@
                 >&#xe63c;</span
               >
             </el-tooltip>
-            <!-- 绠楁硶璇︽儏 -->
+
             <el-tooltip content="搴旂敤璇︽儏" placement="top">
               <span
                 class="iconfont option"
@@ -144,7 +155,7 @@
                 >&#xe621;</span
               >
             </el-tooltip>
-            <!-- 璁惧璇︽儏 -->
+
             <el-tooltip content="璁惧璇︽儏" placement="top">
               <span
                 class="iconfont option"
@@ -153,12 +164,9 @@
                 >&#xe619;</span
               >
             </el-tooltip>
-            <!-- 瑙g粦 -->
+
             <el-tooltip content="瑙i櫎缁戝畾" placement="top">
-              <span
-                class="iconfont option"
-                @click="Untying(scope.row)"
-                :class="{ disable: scope.row.isOnline != 1 }"
+              <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
                 >&#xe617;</span
               >
             </el-tooltip>
@@ -166,7 +174,7 @@
         </el-table-column>
       </el-table>
       <div>
-        <el-pagination
+        <!-- <el-pagination
           @current-change="refrash"
           @size-change="handleSizeChange"
           :current-page="page"
@@ -175,62 +183,46 @@
           :page-sizes="[5, 10, 15, 20, 25]"
           :total="total"
           background
-        ></el-pagination>
+        ></el-pagination> -->
       </div>
     </div>
 
     <!-- 瑙g粦寮圭獥 -->
-    <UnbindBox
-      @close="closeUnbindBox"
-      v-if="isShowUnbind"
-      :id="unbindId"
-      @reflash="reflash"
-    ></UnbindBox>
+    <UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox>
 
     <!-- 娣诲姞璁惧寮圭獥 -->
     <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox>
 
     <!-- 閫�鍑洪泦缇ゅ脊绐� -->
-    <QuitClusterBox
-      :equipment="activeEquipment"
-      v-if="showQuit"
-      @close="showQuit = false"
-    ></QuitClusterBox>
+    <QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox>
 
     <!-- 鍔犲叆闆嗙兢寮圭獥 -->
-    <JoinClusterBox
-      :equipment="activeEquipment"
-      v-if="showJoin"
-      @close="showJoin = false"
-    ></JoinClusterBox>
+    <JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox>
   </div>
 </template>
 
 <script>
-import {
-  findDevList,
-  findClustersBySearch,
-  exportDevListExcel,
-} from "@/api/device";
-import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
-import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
-import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
-import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";
-
-import bus from "@/plugin/bus";
-
+import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device"
+import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"
+import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"
+import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"
+import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"
+import add from "@/assets/img/add.png"
+import bus from "@/plugin/bus"
+import "./FormList.scss"
 export default {
   components: {
     AddBox,
     UnbindBox,
     QuitClusterBox,
-    JoinClusterBox,
+    JoinClusterBox
   },
   created() {
-    this.getCluster();
+    this.getCluster()
   },
   data() {
     return {
+      add,
       searchTime: [], //鎼滅储鏃堕棿
       page: 1,
       size: 10, //鍒嗛〉鐩稿叧
@@ -244,8 +236,8 @@
       cluster: null, //閫変腑鐨勯泦缇ょ被鍨�
       showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥
       showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐�
-      activeEquipment: null, //澶勭悊涓殑璁惧
-    };
+      activeEquipment: null //澶勭悊涓殑璁惧
+    }
   },
   methods: {
     async getCluster() {
@@ -253,47 +245,47 @@
         InputText: "",
         Page: 1,
         Size: 10000,
-        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
-      });
+        userId: JSON.parse(sessionStorage.getItem("userInfo")).id
+      })
       if (res && res.success) {
         res.data.list.forEach((item) => {
           this.clusterArr.push({
             label: item.clusterName,
-            value: item.clusterId,
-          });
-        });
+            value: item.clusterId
+          })
+        })
       }
     },
 
     // 璺冲埌璁惧璇︽儏
     checkDetail(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
       this.$router.push({
         path: "/equipmentDetail",
         query: {
-          id: row.devId,
-        },
-      });
+          id: row.devId
+        }
+      })
     },
 
     // 璺冲埌绠楁硶璇︽儏
     algorithmDetail(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
       this.$router.push({
         path: "/algorithmDetail",
         query: {
-          id: row.devId,
-        },
-      });
+          id: row.devId
+        }
+      })
     },
 
     // 鏌ヨ鍒楄〃
     searchingBtn() {
-      let param = {};
+      let param = {}
 
       if (!this.searchTime) {
         param = {
@@ -302,8 +294,8 @@
           startTime: "",
           endTime: "",
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       } else {
         param = {
           page: this.page,
@@ -311,112 +303,109 @@
           startTime: this.searchTime[0],
           endTime: this.searchTime[1],
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       }
 
       findDevList(param)
         .then((res) => {
-          this.dataList = res.data.list;
+          this.dataList = res.data.list
           //鏃堕棿鍒嗚鏄剧ず
           this.dataList.forEach((item) => {
-            item.installTime = item.installTime.split(" ");
-            item.firstUseTime = item.firstUseTime.split(" ");
-          });
-          this.total = res.data.total;
+            item.installTime = item.installTime.split(" ")
+            item.firstUseTime = item.firstUseTime.split(" ")
+          })
+          this.total = res.data.total
           if (res.data.total <= this.size) {
-            this.page = 1;
+            this.page = 1
           }
 
-          bus.$emit("refleshNode", this.dataList);
+          bus.$emit("refleshNode", this.dataList)
         })
         .catch((err) => {
-          console.log(err);
-        });
+          console.log(err)
+        })
     },
 
     //鍒嗛〉鍔熻兘
     handleSizeChange(size) {
-      this.size = size;
-      this.searchingBtn();
+      this.size = size
+      this.searchingBtn()
     },
     //鍒嗛〉鍔熻兘
     refrash(page) {
-      this.page = page;
-      this.searchingBtn();
+      this.page = page
+      this.searchingBtn()
     },
 
     //瑙g粦鎸夐挳
     Untying(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
-      this.unbindId = row.devId;
-      this.isShowUnbind = true;
+      this.unbindId = row.devId
+      this.isShowUnbind = true
     },
 
     //鑾峰緱榛樿鏃堕棿
     getDateInit() {
       // 瑕佹眰 榛樿涓�涓湀
-      const end = new Date();
-      const start = new Date();
-      const nowDate = new Date();
-      nowDate.setHours(0);
-      nowDate.setMinutes(0);
-      nowDate.setSeconds(0);
-      nowDate.setMilliseconds(0);
-      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
-      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
-      return [
-        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
-        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
-      ];
+      const end = new Date()
+      const start = new Date()
+      const nowDate = new Date()
+      nowDate.setHours(0)
+      nowDate.setMinutes(0)
+      nowDate.setSeconds(0)
+      nowDate.setMilliseconds(0)
+      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
+      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
+      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
     },
 
     //鍏抽棴鏂板寮圭獥
     closeAddBox() {
-      this.isShowAdd = false;
-      this.searchingBtn();
+      this.isShowAdd = false
+      this.searchingBtn()
     },
     // 鍏抽棴瑙g粦寮圭獥
     closeUnbindBox() {
-      this.isShowUnbind = false;
+      this.isShowUnbind = false
     },
 
     //瑙g粦鎴愬姛鍥炶皟
     reflash() {
-      this.isShowUnbind = false;
-      this.searchingBtn();
+      this.isShowUnbind = false
+      this.searchingBtn()
     },
 
     clearSearch() {
-      this.searchTime = this.getDateInit();
-      this.inputText = "";
-      this.cluster = "";
-      this.searchingBtn();
+      this.searchTime = this.getDateInit()
+      this.inputText = ""
+      this.cluster = ""
+      this.searchingBtn()
     },
 
     //閫�鍑洪泦缇�
     quitCluster(equipment) {
       if (equipment.isOnline != 1) {
-        return;
+        return
       }
-      this.activeEquipment = equipment;
-      this.showQuit = true;
+      this.activeEquipment = equipment
+      this.showQuit = true
     },
 
     //鍔犲叆闆嗙兢
     joinCluster(equipment) {
       if (equipment.isOnline != 1) {
-        return;
+        return
       }
-      this.activeEquipment = equipment;
-      this.showJoin = true;
+      this.activeEquipment = equipment
+      this.showJoin = true
     },
 
     //瀵煎嚭鍒楄〃鏂囦欢
     async exportFile() {
-      let param = {};
+      let param = {}
 
       if (!this.searchTime) {
         param = {
@@ -425,8 +414,8 @@
           startTime: "",
           endTime: "",
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       } else {
         param = {
           page: this.page,
@@ -434,224 +423,246 @@
           startTime: this.searchTime[0],
           endTime: this.searchTime[1],
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       }
-      const result = await exportDevListExcel(param);
+      const result = await exportDevListExcel(param)
 
       var blob = new Blob([result.body.data], {
-          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
         }),
-        Temp = document.createElement("a");
+        Temp = document.createElement("a")
 
-      Temp.href = window.URL.createObjectURL(blob);
+      Temp.href = window.URL.createObjectURL(blob)
+      Temp.download = window.decodeURI(result.fileName)
 
-      console.log(result);
-      console.log(result.fileName);
+      Temp.setAttribute("download", result.fileName)
 
-      Temp.download = window.decodeURI(result.fileName);
+      document.body.appendChild(Temp)
 
-      Temp.setAttribute("download", result.fileName);
+      Temp.click()
 
-      document.body.appendChild(Temp);
+      document.body.removeChild(Temp)
 
-      Temp.click();
-
-      document.body.removeChild(Temp);
-
-      window.URL.revokeObjectURL(Temp);
-    },
+      window.URL.revokeObjectURL(Temp)
+    }
   },
   mounted() {
-    this.searchingBtn();
-  },
-};
+    this.searchingBtn()
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .FormList {
+  width: 1280px;
+  // padding: 0 24px;
+  // background: #36b24a;
+  background-color: #1f2a3e;
+  border-radius: 18px;
+  // background: #34405a;
   .search {
+    // margin-bottom: ;
     display: flex;
     justify-content: space-between;
-    padding: 60px 0 30px 0;
-    font-size: 14px;
-    border-bottom: 1px solid #e9ebee;
-    background-color: #fff;
-
-    .left,
-    .right,
-    .id,
-    .time,
-    .cluster {
+    padding: 24px;
+    .left {
       display: flex;
       align-items: center;
-    }
+      .left-txt {
+        // height: 20px;
+        white-space: nowrap;
+        font-family: PingFang SC Regular;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        letter-spacing: 0px;
+        color: #ffffff;
+        margin-right: 16px;
+      }
+      .id,
+      .time,
+      .cluster {
+        display: flex;
+        align-items: center;
+        padding-right: 24px;
+      }
+      .id ::v-deep .el-input .el-input__inner {
+        width: 150px;
+        height: 32px;
+        border-radius: 3px;
+        background: rgb(0, 0, 0, 0.2) !important;
+      }
+      .cluster::v-deep .el-input {
+        width: 250px;
+        height: 32px;
+        // margin-left: 10px;
+        // margin-right: 20px;
 
-    .cluster {
-      .el-select {
-        width: 190px;
-        height: 40px;
-        line-height: 40px;
+        input {
+          border-radius: 1px;
+          &::-webkit-input-placeholder {
+            color: #999;
+          }
 
-        ::v-deep input {
-          height: 40px;
+          // &:focus {
+          //   border-color: #0065ff;
+          // }
         }
+      }
+      .cluster {
+        // .cluster-select {
+        //   width: 150px;
+        // }
+        .el-select {
+          width: 150px;
+          .el-input .el-input--suffix {
+            width: 150px !important;
+            // border-radius: 3px;
+          }
+          // height: 32px;
+          // line-height: 32px;
 
-        .el-icon-arrow-up {
-          line-height: 40px;
-        }
-
-        ::v-deep .el-icon-arrow-up {
-          height: 40px;
+          // ::v-deep input {
+          //   height: 32px;
+          // }
+          // el-select__caret el-input__icon el-icon-arrow-up
+          ::v-deep .el-input__icon {
+            line-height: 28px !important;
+          }
         }
       }
     }
-
-    .id .el-input ::v-deep {
-      width: 180px;
-    }
-
-    .cluster::v-deep .el-input {
-      width: 156px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-
-      input {
-        border-radius: 0;
-        &::-webkit-input-placeholder {
-          color: #999;
-        }
-
-        &:focus {
-          border-color: #0065ff;
-        }
+    .right {
+      display: flex;
+      align-items: center;
+      .button {
+        font-family: PingFang SC Regular;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 32px;
+        letter-spacing: 0px;
+        padding: 0 16px;
+        border-radius: 3px;
+        margin: 0 4px;
       }
-    }
-
-    .el-input ::v-deep {
-      width: 270px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-
-      input {
-        border-radius: 0;
-        &::-webkit-input-placeholder {
-          color: #999;
-        }
-
-        &:focus {
-          border-color: #0065ff;
-        }
+      .searchBtn {
+        background: #0082bc;
+        color: #ffffff;
       }
-    }
-
-    .el-date-editor {
-      width: 340px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-      border-radius: 0;
-
-      &::-webkit-input-placeholder {
-        color: #999;
+      .resetBtn {
+        border: 1px solid #0082bc;
+        color: #0082bc;
       }
-
-      &.is-active {
-        border-color: #0065ff;
-      }
-    }
-
-    .searchBtn {
-      width: 110px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      color: #fff;
-      background: #0065ff;
-      margin-right: 20px;
-    }
-
-    .resetBtn {
-      width: 110px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      color: #0065ff;
-      border: 1px solid #0065ff;
     }
   }
-
+  .line {
+    border: 1px solid #ffffff;
+    opacity: 0.2;
+    margin: 0 24px;
+  }
   .btns {
+    padding: 24px 24px;
     display: flex;
-    margin: 30px 0;
-    text-align: center;
-    line-height: 40px;
+    justify-content: flex-start;
+    .button {
+      padding: 0 16px;
+      margin: 0 4px;
 
-    .add {
-      margin-right: 20px;
-      width: 140px;
-      height: 40px;
-      background: #0065ff;
-      color: #fff;
-      span {
-        margin-right: 10px;
-        font-weight: 700;
-        font-size: 18px;
+      border-radius: 3px;
+      font-family: PingFang SC Regular;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 32px;
+      letter-spacing: 0px;
+      display: flex;
+      align-items: center;
+      .button-txt {
+        margin-left: 10px;
+      }
+      .iconfont {
+        // width: 12px;
+        // height: 12px;
+        // line-height: 12px;
+        font-size: 16px;
       }
     }
-
+    .add {
+      background: #0082bc;
+      color: #ffffff;
+    }
     .export {
-      width: 140px;
-      height: 40px;
-      border: 1px solid #0065ff;
-      color: #0065ff;
-
-      span {
-        margin-right: 10px;
-        font-size: 18px;
-      }
+      border: 1px solid #0082bc;
+      color: #0082bc;
     }
   }
 
+  .table-area {
+    // min-height: 600px;
+    padding: 0 24px 24px;
+  }
+  .table-area >>> .el-table__row > td {
+    border: none !important;
+  }
+  .el-table::before {
+    height: 0; //琛ㄦ牸鐨勭嚎
+  }
+  // .el-table,
   .el-table ::v-deep {
-    background-color: rgb(233, 235, 238);
+    // background-color: rgb(233, 235, 238);
     padding: 1px;
+    // .el-table__expanded-cell {
+    //   background-color: transparent !important;
+    // }
+    // .el-table__header {
+    //   background: rgba(255, 255, 255, 0.18) !important;
+    // }
 
-    &::after {
-      display: none;
-    }
+    // .el-table th,
+    // .el-table tr {
+    //   background-color: transparent !important;
+    // }
 
-    td.index .cell {
-      padding-left: 16px;
-      padding-right: 4px;
-    }
+    // .el-table tr
+    // &::after {
+    //   display: none;
+    // }
+
+    // td.index .cell {
+    //   padding-left: 16px;
+    //   padding-right: 4px;
+    // }
 
     .has-gutter tr th {
-      background: #f0f3f5;
+      // background: #f0f3f5;
       font-size: 16px;
-      color: #3d3d3d;
+      color: #ffffff;
       font-weight: 700;
+
+      font-family: PingFangSC-Bold;
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 20px;
+      letter-spacing: 0px;
     }
 
-    td .cell {
-      color: #3d3d3d;
-    }
+    // td .cell {
+    //   color: #3d3d3d;
+    // }
 
     tr:hover > td.el-table__cell {
-      background-color: #fff;
+      background: rgba(255, 255, 255, 0.08) !important;
     }
 
-    .el-table__row--striped .el-table__cell {
-      background-color: #f0f5fa !important;
+    .el-table__row .el-table__cell {
+      background-color: transparent !important;
     }
-    tr:hover > td.el-table__cell {
-      background-color: #fff;
-    }
+    // tr:hover > td.el-table__cell {
+    //   // background-color: #fff;
+    // }
 
     .el-table__row--striped .el-table__cell {
-      background-color: #f0f5fa !important;
+      background-color: transparent !important;
     }
 
     .status {
@@ -665,7 +676,7 @@
     .option {
       margin-right: 10px;
       font-size: 24px;
-      color: rgb(0, 101, 255);
+      color: #0082bc;
       cursor: pointer;
 
       &.disable {
@@ -675,60 +686,60 @@
     }
   }
 
-  .el-pagination ::v-deep {
-    margin-top: 30px;
-    text-align: right;
-    height: 24px;
-    .el-pagination__sizes {
-      margin-right: 0;
-    }
+  // .el-pagination ::v-deep {
+  //   margin-top: 30px;
+  //   text-align: right;
+  //   height: 24px;
+  //   .el-pagination__sizes {
+  //     margin-right: 0;
+  //   }
 
-    button {
-      margin: 0;
-      background-color: #fff;
-      border: 1px solid #c0c5cc;
-      border-radius: 2px;
-    }
+  //   button {
+  //     margin: 0;
+  //     // background-color: #fff;
+  //     border: 1px solid #c0c5cc;
+  //     border-radius: 2px;
+  //   }
 
-    .number {
-      background-color: #fff;
+  //   .number {
+  //     // background-color: #fff;
 
-      &:not(.disabled):hover {
-        color: #0065ff;
-      }
+  //     &:not(.disabled):hover {
+  //       color: #0065ff;
+  //     }
 
-      &:not(.disabled).active {
-        background-color: #0065ff;
-        color: #fff;
-      }
-    }
+  //     &:not(.disabled).active {
+  //       // background-color: #0065ff;
+  //       color: #fff;
+  //     }
+  //   }
 
-    .el-input .el-input__inner {
-      padding-left: 0;
+  //   .el-input .el-input__inner {
+  //     padding-left: 0;
 
-      &:hover,
-      &:focus {
-        border-color: #0065ff;
-      }
-    }
+  //     &:hover,
+  //     &:focus {
+  //       border-color: #0065ff;
+  //     }
+  //   }
 
-    .el-pagination__jump {
-      margin-left: 12px;
-      .el-pagination__editor {
-        width: 37px;
-        input {
-          width: 32px;
-        }
-      }
-    }
-  }
+  //   .el-pagination__jump {
+  //     margin-left: 12px;
+  //     .el-pagination__editor {
+  //       width: 37px;
+  //       input {
+  //         width: 32px;
+  //       }
+  //     }
+  //   }
+  // }
 }
 </style>
 
-<style >
+<style>
 .el-date-table td.start-date span,
 .el-date-table td.end-date span {
-  background-color: #0065ff;
+  /* background-color: #0065ff; */
 }
 
 .el-button--text span {
@@ -740,4 +751,4 @@
   color: #0065ff;
   border-color: #0065ff;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0