[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化

src/views/system/role/selectUser.vue

@@ -1,38 +1,43 @@
 <template>
   <el-row>
-    <el-dialog v-model="visible" title="选择用户" width="800px" top="5vh" append-to-body>
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item label="用户名称" prop="userName">
-          <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item label="手机号码" prop="phonenumber">
-          <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <el-row>
-        <el-table ref="tableRef" border :data="userList" height="260px" @row-click="clickRow" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55"></el-table-column>
-          <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
-          <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-          <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-          <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-              <span>{{ proxy.parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <pagination v-if="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
-      </el-row>
+    <el-dialog v-model="visible" title="选择用户" width="800px" top="5vh" append-to-body class="select-user-dialog">
+      <div class="page-shell select-user-shell">
+        <el-card shadow="hover" class="search-panel select-user-card">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+            <el-form-item label="用户名称" prop="userName">
+              <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card shadow="hover" class="table-panel select-user-card">
+          <el-table ref="tableRef" border class="data-table" :data="userList" height="260px" @row-click="clickRow" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+            <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+            <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+            <el-table-column label="状态" align="center" prop="status">
+              <template #default="scope">
+                <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+              <template #default="scope">
+                <span>{{ proxy.parseTime(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination v-if="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+        </el-card>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSelectUser">确 定</el-button>
@@ -128,3 +133,17 @@ defineExpose({
   show
 });
 </script>
+
+<style lang="scss" scoped>
+.select-user-shell {
+  gap: 12px;
+}
+
+.select-user-card :deep(.el-card__body) {
+  padding: 14px 16px !important;
+}
+
+.select-user-dialog :deep(.el-dialog__body) {
+  padding-top: 12px;
+}
+</style>