Merge pull request #563 from xinnan-tech/web_UserManagement_optimize

优化了“用户管理”，分页还未调整

main/manager-web/src/views/UserManagement.vue

@@ -5,13 +5,13 @@
       <div class="top-area">
         <div class="page-title">用户管理</div>
         <div class="page-search">
-          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
+          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" />
           <el-button class="btn-search" @click="handleSearch">搜索</el-button>
           <!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
           <el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
         </div>
       </div>
-      
+
       <el-card class="user-card" shadow="never">
         <!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
           <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
@@ -19,45 +19,42 @@
           <el-button type="danger" @click="batchDelete">批量删除</el-button>
           <el-button type="danger" @click="batchDisable">批量禁用</el-button>
         </div> -->
-        <el-table :data="userList" style="width: 100%;">
+        <el-table :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
-          <el-table-column label="选择"
+          <el-table-column label="选择" type="selection" width="55"></el-table-column>
-            type="selection"
-            width="55">
-            </el-table-column>
           <el-table-column label="用户Id" prop="user_id"></el-table-column>
           <el-table-column label="手机号码" prop="mobile"></el-table-column>
           <el-table-column label="设备数量" prop="device_count"></el-table-column>
           <el-table-column label="状态" prop="status"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-            <el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
             <el-button size="mini" type="text"
               v-if="scope.row.status === '正常'"
               @click="disableUser(scope.row)">禁用</el-button>
             <el-button size="mini" type="text"
               v-if="scope.row.status === '禁用'"
               @click="restoreUser(scope.row)">恢复</el-button>
-            <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
+            <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
             </template>
           </el-table-column>
         </el-table>
-		  
+
         <div class="table_bottom">
           <div class="ctrl_btn">
-            <el-button size="mini" type="primary">全选</el-button>
+            <el-button size="mini" type="primary" style="width: 72px; background: #5f70f3">全选</el-button>
-            <el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
+            <el-button size="mini" type="success" icon="el-icon-circle-check" style="background: #5bc98c">启用</el-button>
-            <el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
+            <el-button size="mini" type="warning" style="color: black; background: #f6d075"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
-            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
+            <el-button size="mini" type="danger" icon="el-icon-delete" style="background: #fd5b63">删除</el-button>
           </div>
           <div class="pagination-container">
             <el-pagination
               background
-            @current-change="handleCurrentChange"
+              @current-change="handleCurrentChange"
-            :current-page="currentPage"
+              :current-page="currentPage"
-            :page-sizes="[5, 10, 15]"
+              :page-sizes="[5, 10, 15]"
-            :page-size="pageSize"
+              :page-size="pageSize"
-            layout="prev, pager, next"
+              layout="prev, pager, next"
-            :total="total"
+              :total="total"
             />
           </div>
         </div>
@@ -128,11 +125,20 @@ export default {
       this.currentPage = page;
       console.log('当前页码：', page);
     },
+    headerCellClassName({ column, columnIndex }) {
+    if (columnIndex === 0) {
+      return 'custom-selection-header'
+    }
+    return ''
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
+
+$table-bg-color: #ecf1fd;
+
 .main {
   padding: 20px; display: flex; flex-direction: column;
   background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
@@ -141,7 +147,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   .page-title {
     font-size: 20px;
     font-weight: 600;
@@ -187,11 +193,10 @@ export default {
 }
 
 .user-card {
-  background: #fff;
+  background: $table-bg-color;
   border-radius: 12px;
   padding: 20px;
-  opacity: 0.9;
+  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
 .table_bottom {
@@ -210,4 +215,57 @@ export default {
   justify-content: flex-end;
 }
 
+
+.rotated-icon {
+  display: inline-block;
+  transform: rotate(45deg);
+  margin-right: 4px;
+  color: black;
+}
+
+:deep(.el-table) {
+  background: $table-bg-color;
+
+  &.transparent-table {
+    .el-table__header th {
+      background: $table-bg-color !important;
+      color: black;
+    }
+
+    .el-table__body tr {
+      background-color: $table-bg-color;
+    }
+  }
+}
+
+.search-input {
+  width: 300px;
+  margin-right: 10px;
+  :deep(.el-input__inner) {
+    background-color: transparent;
+    &:focus {
+      border-color: #409eff; // 保持聚焦状态下的边框颜色
+    }
+    //文字颜色
+    &::placeholder {
+      color: #606266;
+      opacity: 0.7;
+    }
+  }
+}
+
+:deep(.custom-selection-header) {
+  .el-checkbox {
+    display: none !important;
+  }
+
+  &::after {
+    content: '选择';
+    display: inline-block;
+    color: black;
+    font-weight: bold;
+    padding-bottom: 18px;
+  }
+}
+
 </style>