Sfoglia il codice sorgente

refactor: update search form styles and improve layout

- Comment out padding in search form styles for a cleaner look
- Adjust width of select and input elements in search forms for consistency across camera and user views
yb 3 settimane fa
parent
commit
15a130afd8
3 ha cambiato i file con 25 aggiunte e 7 eliminazioni
  1. 1 1
      src/assets/styles/index.scss
  2. 15 3
      src/views/camera/index.vue
  3. 9 3
      src/views/user/index.vue

+ 1 - 1
src/assets/styles/index.scss

@@ -81,7 +81,7 @@ ol {
 // 搜索表单
 .search-form {
   margin-bottom: 20px;
-  padding: 20px;
+  //padding: 20px;
   background-color: #fff;
   border-radius: 4px;
 }

+ 15 - 3
src/views/camera/index.vue

@@ -4,7 +4,13 @@
     <div class="search-form">
       <el-form :model="queryParams" inline>
         <el-form-item label="机器">
-          <el-select v-model="queryParams.machineId" placeholder="请选择机器" clearable @change="handleQuery">
+          <el-select
+            v-model="queryParams.machineId"
+            placeholder="请选择机器"
+            style="width: 120px"
+            clearable
+            @change="handleQuery"
+          >
             <el-option
               v-for="machine in machineList"
               :key="machine.machineId"
@@ -14,7 +20,13 @@
           </el-select>
         </el-form-item>
         <el-form-item label="状态">
-          <el-select v-model="queryParams.status" placeholder="请选择" clearable @change="handleQuery">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择"
+            style="width: 120px"
+            clearable
+            @change="handleQuery"
+          >
             <el-option label="在线" value="ONLINE" />
             <el-option label="离线" value="OFFLINE" />
           </el-select>
@@ -409,7 +421,7 @@ onMounted(() => {
 
 .search-form {
   margin-bottom: 20px;
-  padding: 20px;
+  //padding: 20px;
   background-color: #fff;
   border-radius: 4px;
 }

+ 9 - 3
src/views/user/index.vue

@@ -4,10 +4,16 @@
     <div class="search-form">
       <el-form :model="queryParams" inline>
         <el-form-item label="搜索">
-          <el-input v-model="queryParams.search" placeholder="请输入用户名" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="queryParams.search"
+            placeholder="请输入用户名"
+            style="width: 120px"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
         <el-form-item label="角色">
-          <el-select v-model="queryParams.role" placeholder="请选择角色" clearable>
+          <el-select v-model="queryParams.role" placeholder="请选择角色" style="width: 120px" clearable>
             <el-option label="管理员" value="admin" />
             <el-option label="操作员" value="operator" />
             <el-option label="观察者" value="viewer" />
@@ -333,7 +339,7 @@ onMounted(() => {
 
 .search-form {
   margin-bottom: 20px;
-  padding: 20px;
+  //padding: 20px;
   background-color: #fff;
   border-radius: 4px;
 }