Bläddra i källkod

1.系统日志样式优化 2.用户管理新增查询结果与样式优化

wangjiahui 2 veckor sedan
förälder
incheckning
000bece6fa

+ 11 - 6
src/components/FloatComponents/SystemSetting/RiZhi/RizhiSetting.vue

@@ -126,15 +126,16 @@ export default {
 
     //查询用户
     chaxun() {
-      if (this.tname === "1") {
-        // 如果是1,手动添加用户数据
+      if (this.tname === "1" || this.tname === "2" || this.tname === "3" || this.tname === "4" || this.tname === "5") {
+        // 根据输入的数字,手动添加相应的用户数据
         const newUser = {
-          name: "用户1",  // 用户名
-          power: "管理员", // 权限
-          caozuo: "查看",   // 操作
-          time: "2025-01-20" // 时间
+          name: `用户${this.tname}`,  // 用户名
+          power: "管理员",  // 权限
+          caozuo: "查看",  // 操作
+          time: "2025-01-20"  // 时间
         };
 
+
         // 将新用户添加到表格数据中
         this.tableData = [newUser];
       }
@@ -153,6 +154,10 @@ export default {
 </script>
 
 <style scoped>
+.grid-content {
+  background-color: #000;
+}
+
 .HHCustomDialogClass {
   position: absolute;
   top: 50px;

+ 357 - 355
src/components/FloatComponents/SystemSetting/YongHuGuanLi/UserSetting.vue

@@ -1,118 +1,89 @@
 <template>
   <div class="HHCustomDialogClass" v-if="UserSettingShow">
     <el-container>
-    <!-- 头部 -->
-  <div id="header-1"><el-header class="header"></el-header>
-    <div id="header-2">用户管理</div>
-    <div id="header-3" class="el-icon-close" title="关闭面板" @click="closePannle"></div>
-    </div>
-    <!-- 主体 -->
-  <el-main class="main">
-    <div class="table1">
-        <el-row >
-          <el-col :span="12">
-            <div class="grid-content bg-purple" style="padding: 0px 10px">
-              <span style="color: #ebeef5; font-size: 16px">名称:</span>
-              <el-input
-                clearable
-                class="HHinput"
-                style="width: 180px;"
-                type="text"
-                v-model="tname"
-                placeholder="请输入用户名称"
-              ></el-input>
-              <el-button
-                class="HHbutton"
-                icon="icon iconfont icon-chaxun4"
-                @click="chaxun"
-                >查询</el-button
-              >
-              <el-button class="HHbutton el-icon-refresh" 
-              @click="shuaxin"
-                >刷新</el-button
-              >
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div
-              class="grid-content bg-purple-light"
-              style="float: right; padding: 0px 10px"
-            >
-              <el-button
-                class="HHbutton"
-                icon="icon iconfont icon-add_file"
-                @click="adduser"
-                >新增用户</el-button
-              >
-              <!-- <el-button
+      <!-- 头部 -->
+      <div id="header-1"><el-header class="header"></el-header>
+        <div id="header-2">用户管理</div>
+        <div id="header-3" class="el-icon-close" title="关闭面板" @click="closePannle"></div>
+      </div>
+      <!-- 主体 -->
+      <el-main class="main">
+        <div class="table1">
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple" style="padding: 0px 10px">
+                <span style="color: #ebeef5; font-size: 16px">名称:</span>
+                <el-input clearable class="HHinput" style="width: 180px;" type="text" v-model="tname"
+                  placeholder="请输入用户名称"></el-input>
+                <el-button class="HHbutton" icon="icon iconfont icon-chaxun4" @click="chaxun">查询</el-button>
+                <el-button class="HHbutton el-icon-refresh" @click="shuaxin">刷新</el-button>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="grid-content bg-purple-light" style="float: right; padding: 0px 10px">
+                <el-button class="HHbutton" icon="icon iconfont icon-add_file" @click="adduser">新增用户</el-button>
+                <!-- <el-button
                 class="HHbutton"
                 icon="icon iconfont icon-shuxing"
                 >系统日志</el-button
               > -->
-            </div>
-          </el-col>
-        </el-row>
-   </div>
-   <div class="table2" >
-    <el-table  :data="tableData"  style="background-color: transpatent; padding: 1% 0%" :header-cell-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                fontWeight: '600',
-                border: 'none',
-              }" :cell-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                border: 'none',
-              }" :row-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                border: 'none',
-              }">
-       <el-table-column prop="name" label="用户名" width="245">
-       </el-table-column>
-       <el-table-column prop="password" label="密码" width="245">
-       </el-table-column>
-       <el-table-column prop="power" label="权限" width="245">
-       </el-table-column>
-       <el-table-column label="操作" width="245">
-        <template slot-scope="scope">
-         <el-button class="edit" icon="el-icon-edit" @click="edituser(scope.row)"></el-button>
-         <el-button class="delete" icon="el-icon-delete" @click="deleteuser(scope.row)"></el-button>
-        </template>
-       </el-table-column>
-      </el-table>
-   </div>
-  </el-main>
-     <!-- 尾部 -->
-  <el-footer class="footer">
-    <div style="height: 100%; width: " class="bottom">
-            <div class="page">
-              <el-pagination
-                class="pagination"
-                :page-size="8"
-                @current-change="handleCurrentChange"
-                @prev-click="handleCurrentChange"
-                @next-click="handleCurrentChange"
-                :current-page="currentPage"
-                layout="prev, pager, next, jumper"
-                :total="zongshu"
-              ></el-pagination>
-            </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="table2">
+          <el-table :data="tableData" style="background-color: transpatent; padding: 1% 0%" :header-cell-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            fontWeight: '600',
+            border: 'none',
+          }" :cell-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            border: 'none',
+          }" :row-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            border: 'none',
+          }">
+            <el-table-column prop="name" label="用户名" width="245">
+            </el-table-column>
+            <el-table-column prop="password" label="密码" width="245">
+            </el-table-column>
+            <el-table-column prop="power" label="权限" width="245">
+            </el-table-column>
+            <el-table-column label="操作" width="245">
+              <template slot-scope="scope">
+                <el-button class="edit" icon="el-icon-edit" @click="edituser(scope.row)"></el-button>
+                <el-button class="delete" icon="el-icon-delete" @click="deleteuser(scope.row)"></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-main>
+      <!-- 尾部 -->
+      <el-footer class="footer">
+        <div style="height: 100%; width: " class="bottom">
+          <div class="page">
+            <el-pagination class="pagination" :page-size="8" @current-change="handleCurrentChange"
+              @prev-click="handleCurrentChange" @next-click="handleCurrentChange" :current-page="currentPage"
+              layout="prev, pager, next, jumper" :total="zongshu"></el-pagination>
           </div>
-  </el-footer>
-  <!-- 新增用户 -->
-  <div  v-if="addUserPage">
-    <AddUserVue></AddUserVue>
-  </div>
-  <!-- 编辑用户 -->
-  <div  v-if="EditUserPage">
-    <EditUserVue></EditUserVue>
-  </div>
-  <!-- 确认删除 -->
-  <div  v-if="CancelPage">
-    <CancelVue></CancelVue>
-  </div>
-</el-container>
+        </div>
+      </el-footer>
+      <!-- 新增用户 -->
+      <div v-if="addUserPage">
+        <AddUserVue></AddUserVue>
+      </div>
+      <!-- 编辑用户 -->
+      <div v-if="EditUserPage">
+        <EditUserVue></EditUserVue>
+      </div>
+      <!-- 确认删除 -->
+      <div v-if="CancelPage">
+        <CancelVue></CancelVue>
+      </div>
+    </el-container>
   </div>
 </template>
 
@@ -121,99 +92,99 @@ import AddUserVue from './AddUser.vue'
 import EditUserVue from './EditUser.vue'
 import CancelVue from './cancel.vue'
 export default {
-    data() {
-        return {
-          dailyShow: false,
-            addUserPage: false,
-            EditUserPage:false,
-            CancelPage:false,
-            tableName: "t_user",
-            UserSettingShow: true,
-            currentPage: 1,
-            panduan:false,
-            deleteid: [],
-            removeid: "",
-            tname:"",
-            newData:[],
-            tableData: [],
-            tableData1:[],
-            zongshu:0
-            // Guanli:true
-        };
-    },
-    props: [""],
-    created() {
-     
-    },
-    mounted() {
-      this.$bus.on('shujuzhi',tableData1 =>{
-        this.zongshu = this.tableData1.length
-        var quzheng =  Math.ceil(this.zongshu/8)
-        this.tableData1=tableData1
-        // console.log(this.tableData1);
-        this.tableData = this.tableData1.slice((quzheng - 1) * 8, quzheng * 8)
-        this.currentPage=quzheng
-        })
-      this.$bus.on("querenshanchu", tableData1 => {
-        this.tableData1=tableData1
-        this.tableData = this.tableData1.slice((this.currentPage - 1) * 8, this.currentPage * 8)
-        this.zongshu = this.tableData1.length
-        // console.log(this.tableData1);
-      });
- 
-        this.utilFun();
-        this.getAllTable();
-      this.$bus.on("gengxinzhi", params =>{
-        this.tableData.some(pra=>{
-          if(pra.name==params.Fname && pra.password==params.Fpassword) {
-            pra.name=params.yonghu
-            pra.password=params.password
-            pra.power=params.quanxian
-          }
-        })
-      });
-    },
-    components: {
-        AddUserVue,
-        EditUserVue,
-        CancelVue
-    },
-    methods: {
-        
-        //杂项
+  data() {
+    return {
+      dailyShow: false,
+      addUserPage: false,
+      EditUserPage: false,
+      CancelPage: false,
+      tableName: "t_user",
+      UserSettingShow: true,
+      currentPage: 1,
+      panduan: false,
+      deleteid: [],
+      removeid: "",
+      tname: "",
+      newData: [],
+      tableData: [],
+      tableData1: [],
+      zongshu: 0
+      // Guanli:true
+    };
+  },
+  props: [""],
+  created() {
+
+  },
+  mounted() {
+    this.$bus.on('shujuzhi', tableData1 => {
+      this.zongshu = this.tableData1.length
+      var quzheng = Math.ceil(this.zongshu / 8)
+      this.tableData1 = tableData1
+      // console.log(this.tableData1);
+      this.tableData = this.tableData1.slice((quzheng - 1) * 8, quzheng * 8)
+      this.currentPage = quzheng
+    })
+    this.$bus.on("querenshanchu", tableData1 => {
+      this.tableData1 = tableData1
+      this.tableData = this.tableData1.slice((this.currentPage - 1) * 8, this.currentPage * 8)
+      this.zongshu = this.tableData1.length
+      // console.log(this.tableData1);
+    });
+
+    this.utilFun();
+    this.getAllTable();
+    this.$bus.on("gengxinzhi", params => {
+      this.tableData.some(pra => {
+        if (pra.name == params.Fname && pra.password == params.Fpassword) {
+          pra.name = params.yonghu
+          pra.password = params.password
+          pra.power = params.quanxian
+        }
+      })
+    });
+  },
+  components: {
+    AddUserVue,
+    EditUserVue,
+    CancelVue
+  },
+  methods: {
+
+    //杂项
     utilFun() {
-        //关闭页面
-        this.$bus.on("CloseAddUser", bool => {
+      //关闭页面
+      this.$bus.on("CloseAddUser", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseAddUser1", bool => {
+      });
+      this.$bus.on("CloseAddUser1", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseAddUser2", bool => {
+      });
+      this.$bus.on("CloseAddUser2", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseEditUser", bool => {
+      });
+      this.$bus.on("CloseEditUser", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseEditUser1", bool => {
+      });
+      this.$bus.on("CloseEditUser1", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseEditUser2", bool => {
+      });
+      this.$bus.on("CloseEditUser2", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseCancel", bool => {
+      });
+      this.$bus.on("CloseCancel", bool => {
         this.reChangeEditState(bool);
-        });
-        this.$bus.on("CloseCancel1", bool => {
+      });
+      this.$bus.on("CloseCancel1", bool => {
         this.reChangeEditState(bool);
-        });
-        },
-      reChangeEditState(bool) {
-            this.addUserPage = bool;
-            this.EditUserPage = bool;
-            this.CancelVue = bool;
-            this.CancelPage=bool
-        },
+      });
+    },
+    reChangeEditState(bool) {
+      this.addUserPage = bool;
+      this.EditUserPage = bool;
+      this.CancelVue = bool;
+      this.CancelPage = bool
+    },
 
 
     //显示新增用户界面
@@ -225,202 +196,224 @@ export default {
     /* 关闭面板 */
     closePannle() {
       var panduan2 = this.panduan
-        // this.Guanli=false
-        // console.log(this.Guanli);
-        // this.$bus.emit("GuanLi",Guanli);
-        this.UserSettingShow=false;
-        this.$bus.emit("guanbi1",panduan2)
+      // this.Guanli=false
+      // console.log(this.Guanli);
+      // this.$bus.emit("GuanLi",Guanli);
+      this.UserSettingShow = false;
+      this.$bus.emit("guanbi1", panduan2)
     },
     //分页
-    
+
     handleCurrentChange(val) {
       // console.log(`当前页: ${val}`)
       this.currentPage = val; //当前是val页
-      this.tableData=this.tableData1.slice((val - 1) * 8, val * 8);
+      this.tableData = this.tableData1.slice((val - 1) * 8, val * 8);
     },
-    cerated:function() {
+    cerated: function () {
       this.getAllTable()
     },
     //获取数据
     getAllTable() {
       this.$axiosInstance.usersetting().then((data) => {
-          // console.log(data);
-          let newData = data.data
-          newData.forEach(item=>{
-            if (item.power==null) {
-              item.power='暂无'
-            }
-          })
-          this.tableData1 = newData
-          this.tableData = this.tableData1.slice(0,8)
-          this.zongshu = this.tableData1.length
-        });
+        // console.log(data);
+        let newData = data.data
+        newData.forEach(item => {
+          if (item.power == null) {
+            item.power = '暂无'
+          }
+        })
+        this.tableData1 = newData
+        this.tableData = this.tableData1.slice(0, 8)
+        this.zongshu = this.tableData1.length
+      });
     },
     //查询用户
-    chaxun(){
-      if(this.tname=="") {
+    chaxun() {
+      if (this.tname === "1" || this.tname === "2" || this.tname === "3" || this.tname === "4" || this.tname === "5") {
+        // 根据输入的数字,手动添加相应的用户数据
+        const newUser = {
+          name: `用户${this.tname}`,  // 用户名
+          power: "管理员",  // 权限
+          caozuo: "查看",  // 操作
+          time: "2025-01-20"  // 时间
+        }
+        this.tableData = [newUser];
+      };
+
+      if (this.tname == "") {
         this.$message.error('输入用户名为空!')
       } else {
-      let params = {chaxunname:this.tname}
-      // console.log(this.tname);
-      this.$axiosInstance.userchaxun(params).then((data) => {
-        // console.log(data);
-        let newData = data.data
-        // console.log(newData[0]);
-        if(newData[0]==undefined) {
-          this.$message.error('查询失败:用户不存在!')
-        } else{
-          newData.forEach(item=>{
-            if (item.power==null) {
-              item.power='暂无'
-            }
-          })
-        this.tableData=[]
-        this.tableData=data.data
-        // console.log(this.tableData);
-        // this.$message.success('查询成功!')
-      }});
-      
-    }
+        let params = { chaxunname: this.tname }
+        // console.log(this.tname);
+        this.$axiosInstance.userchaxun(params).then((data) => {
+          // console.log(data);
+          let newData = data.data
+          // console.log(newData[0]);
+          if (newData[0] == undefined) {
+            this.$message.error('查询失败:用户不存在!')
+          } else {
+            newData.forEach(item => {
+              if (item.power == null) {
+                item.power = '暂无'
+              }
+            })
+            this.tableData = []
+            this.tableData = data.data
+            // console.log(this.tableData);
+            // this.$message.success('查询成功!')
+          }
+        });
+
+      }
     },
 
     //刷新
-    shuaxin(){
-      this.tableData=[]
-      this.tname=""
+    shuaxin() {
+      this.tableData = []
+      this.tname = ""
       this.$axiosInstance.usersetting().then((data) => {
-          // console.log(data);
-          let newData = data.data
-          newData.forEach(item=>{
-            if (item.power==null) {
-              item.power='暂无'
-            }
-          })
-          this.tableData1 = newData
-          this.tableData = this.tableData1.slice(0,8)
-          this.zongshu = this.tableData1.length
-        });
-        // this.$message.success('刷新成功!')
-        this.currentPage=1
+        // console.log(data);
+        let newData = data.data
+        newData.forEach(item => {
+          if (item.power == null) {
+            item.power = '暂无'
+          }
+        })
+        this.tableData1 = newData
+        this.tableData = this.tableData1.slice(0, 8)
+        this.zongshu = this.tableData1.length
+      });
+      // this.$message.success('刷新成功!')
+      this.currentPage = 1
     },
 
 
     //删除
     deleteuser(row) {
-      this.CancelPage=true
-      setTimeout(()=>{
-      this.$bus.emit("shanchuchuanzhi", this.tableData)
-    //   this.tableData=[]
-    //   // console.log(row);
-      
-      let params = {
-        tablename: row.name,
-        password: row.password,
-        // power: row.power,
-    };
-    this.$bus.emit("shanchuchuanzhi1", params)
-  },100);
-    // this.$axiosInstance.deluser(params)
-    // setTimeout(()=>{
-    //   this.$axiosInstance.usersetting().then((data) => {
-    //       console.log(data);
-    //       let newData = data.data
-    //       newData.forEach(item=>{
-    //         if (item.power==null) {
-    //           item.power='暂无'
-    //         }
-    //       })
-    //       this.tableData1 = newData
-    //       this.tableData = this.tableData1.slice(0,8)
-    //     });
-    //     this.$message.success('删除成功!')
-    // },100)
-    
+      this.CancelPage = true
+      setTimeout(() => {
+        this.$bus.emit("shanchuchuanzhi", this.tableData)
+        //   this.tableData=[]
+        //   // console.log(row);
+
+        let params = {
+          tablename: row.name,
+          password: row.password,
+          // power: row.power,
+        };
+        this.$bus.emit("shanchuchuanzhi1", params)
+      }, 100);
+      // this.$axiosInstance.deluser(params)
+      // setTimeout(()=>{
+      //   this.$axiosInstance.usersetting().then((data) => {
+      //       console.log(data);
+      //       let newData = data.data
+      //       newData.forEach(item=>{
+      //         if (item.power==null) {
+      //           item.power='暂无'
+      //         }
+      //       })
+      //       this.tableData1 = newData
+      //       this.tableData = this.tableData1.slice(0,8)
+      //     });
+      //     this.$message.success('删除成功!')
+      // },100)
+
     },
 
     //编辑
-    edituser(row){
+    edituser(row) {
       this.EditUserPage = true
-      setTimeout(()=>{
-      this.$bus.emit("yonghuxinxi", row);
+      setTimeout(() => {
+        this.$bus.emit("yonghuxinxi", row);
       })
     }
-    },
+  },
 }
 </script>
 
 <style scoped>
-.HHCustomDialogClass{
-    position:absolute;
-    top:50px;
-    right:400px;
-    height: 720px;
-    width: 982px;
+.grid-content {
+  background-color: #000;
+}
+
+.HHCustomDialogClass {
+  position: absolute;
+  top: 50px;
+  right: 400px;
+  height: 720px;
+  width: 982px;
 }
 
-.el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    text-align: center;
-    height: 40px !important;
-    line-height: 60px;
+.el-header,
+.el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  height: 40px !important;
+  line-height: 60px;
 }
 
 .el-main {
-    background-color: #E9EEF3;
-    color: #333;
-    text-align: center;
-    line-height: 48px;
-}
-body > .el-container {
-    margin-bottom: 40px;
-  }
-.header,.footer{
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.75);
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
-}
-.main{
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.6);
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 48px;
+}
+
+body>.el-container {
+  margin-bottom: 40px;
+}
+
+.header,
+.footer {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.75);
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
+}
+
+.main {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
 }
 
 #header-1 {
-    position: relative;
+  position: relative;
 }
 
 #header-2 {
-    left: 20px;
+  left: 20px;
 }
 
 #header-3 {
-    right: 20px;
+  right: 20px;
 }
 
 #header-3:hover {
-    color: aqua;
-    background-color: rgba(0, 0, 0, 0.2);
-    cursor:pointer;
+  color: aqua;
+  background-color: rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
-#header-2,#header-3{
-    position: absolute;
-    top: 10px;
-    font-size: 18px;
-    line-height: 20px;
+#header-2,
+#header-3 {
+  position: absolute;
+  top: 10px;
+  font-size: 18px;
+  line-height: 20px;
 }
 
-.table1{
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
-    height: 48px;
+.table1 {
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
+  height: 48px;
 }
 
-.HHinput >>> .el-input__inner{
-    height: 28px ;
+.HHinput>>>.el-input__inner {
+  height: 28px;
 }
 
 .HHinput {
@@ -432,6 +425,7 @@ body > .el-container {
   padding-left: 2%;
   height: 98%;
 }
+
 .el-pagination {
   text-align: center;
   color: #303133;
@@ -440,7 +434,7 @@ body > .el-container {
   padding-top: 0.6%;
 }
 
-.pagination >>> .el-pagination__total {
+.pagination>>>.el-pagination__total {
   color: #fbfcff;
   padding: 0.2% 0.5%;
   font-weight: 700;
@@ -448,11 +442,13 @@ body > .el-container {
   height: 100%;
   line-height: 200%;
 }
-.pagination >>> .el-pagination__jump {
+
+.pagination>>>.el-pagination__jump {
   color: #fbfcff;
   margin-left: 2%;
 }
-.pagination >>> .el-pagination__editor {
+
+.pagination>>>.el-pagination__editor {
   line-height: 100%;
   padding: 0 1%;
   height: 100%;
@@ -462,59 +458,65 @@ body > .el-container {
   font-size: 1.5vh;
 }
 
-.bottom >>> .el-input__inner {
+.bottom>>>.el-input__inner {
   background: transparent;
   color: #fff;
 }
-.bottom >>> .btn-prev,
-.bottom >>> .btn-next {
+
+.bottom>>>.btn-prev,
+.bottom>>>.btn-next {
   background: transparent;
 }
-.bottom >>> .el-icon {
+
+.bottom>>>.el-icon {
   color: #fff;
 }
-.bottom >>> .el-pager li {
+
+.bottom>>>.el-pager li {
   background: transparent !important;
 }
-.bottom >>> .number {
+
+.bottom>>>.number {
   background: transparent;
   color: #fff;
 }
-.bottom >>> .el-pager li:hover {
+
+.bottom>>>.el-pager li:hover {
   color: #409eff;
 }
-.bottom >>> .el-pager li.active {
+
+.bottom>>>.el-pager li.active {
   color: #409eff;
 }
 
-.table2>>> .el-table {
- background-color: transparent;
- color: #fff;
+.table2>>>.el-table {
+  background-color: transparent;
+  color: #fff;
 }
-.table2 >>> .el-table tr {
- background-color: transparent !important;
- border-bottom-color: #dcdfe6;
- color: #fff;
- font-weight: 400;
+
+.table2>>>.el-table tr {
+  background-color: transparent !important;
+  border-bottom-color: #dcdfe6;
+  color: #fff;
+  font-weight: 400;
 }
 
 .el-button {
-  border:none;
+  border: none;
   width: 48px;
   height: 38px;
   /* padding-right:5px; */
   /* background: rgba(0, 0, 0, 0.3); */
   background-color: transparent;
-  color:white
-  
+  color: white
 }
 
 .el-table::before {
-  height: 0px !important; 
+  height: 0px !important;
   border: solid rgb(79, 79, 79) 1px;
 }
 
-.table2 >>> .el-table tr:hover > td{
-  background-color:rgba(95, 111, 156, 0.2) !important;
+.table2>>>.el-table tr:hover>td {
+  background-color: rgba(95, 111, 156, 0.2) !important;
 }
 </style>