大屏项目初始化

screen-vue/src/components/Search/proSearch.vue

@@ -66,13 +66,15 @@ const getPlaceHolderCount = () => {
   gap: 15px;
   width: 100%;
   box-sizing: border-box;
-  align-items: center;
+  align-items: stretch;
 }
 
 .search-grid-container :deep(.search-item) {
   margin-bottom: 0 !important;
   width: 100%;
   box-sizing: border-box;
+  display: flex;
+  align-items: center; 
 }
 
 .search-grid-container :deep(.search-input),
@@ -91,9 +93,10 @@ const getPlaceHolderCount = () => {
   display: flex;
   gap: 8px;
   align-items: center;
+  justify-content: center;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
-  justify-content: flex-end;
 }
 
 @media (max-width: 768px) {
@@ -105,7 +108,8 @@ const getPlaceHolderCount = () => {
     display: none;
   }
   .search-btn-group {
-    justify-content: flex-start;
+    justify-content: center;
+    padding: 8px 0;
   }
 }
 </style>

screen-vue/src/components/Table/proTable.vue

@@ -30,21 +30,17 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, reactive, watch } from 'vue'
+import { defineProps, defineEmits } from 'vue'
 
-// 定义接收的属性
 const props = defineProps({
-  // 表格数据
   tableData: {
     type: Array,
     default: () => []
   },
-  // 加载状态
   loading: {
     type: Boolean,
     default: false
   },
-  // 分页参数（支持双向绑定）
   pagination: {
     type: Object,
     default: () => ({
@@ -55,15 +51,12 @@ const props = defineProps({
   }
 })
 
-// 定义触发的事件
 const emit = defineEmits(['size-change', 'current-change'])
 
-// 分页尺寸变化
 const handleSizeChange = (val) => {
   emit('size-change', val)
 }
 
-// 分页页码变化
 const handleCurrentChange = (val) => {
   emit('current-change', val)
 }
@@ -76,6 +69,8 @@ const handleCurrentChange = (val) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  gap: 4px;
+  box-sizing: border-box;
 }
 
 .table-container {
@@ -83,7 +78,7 @@ const handleCurrentChange = (val) => {
   width: 100%;
   height: 100%;
   overflow: hidden !important;
-  padding: 12px;
+  padding: 4px;
   box-sizing: border-box;
 }
 
@@ -91,10 +86,13 @@ const handleCurrentChange = (val) => {
   width: 100%;
   --el-table-header-text-color: #333;
   --el-table-row-hover-bg-color: #f8f9fa;
+  --el-table-border-color: transparent !important;
 }
 
+.data-table :deep(.el-table),
 .data-table :deep(.el-table__header-wrapper),
-.data-table :deep(.el-table__body-wrapper) {
+.data-table :deep(.el-table__body-wrapper),
+.data-table :deep(.el-table__footer-wrapper) {
   border: none !important;
 }
 
@@ -119,28 +117,31 @@ const handleCurrentChange = (val) => {
 .pagination-footer {
   width: 100%;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
-  padding: 8px 0;
+  padding: 4px;
-  border: 1px solid #e5e7eb;
+  margin: 0;
-  border-radius: 6px;
+  border: none !important;
+  border-radius: 0;
+  border-top: 1px solid #e5e7eb !important;
   flex-shrink: 0;
-  background: #fff;
+  background: transparent;
   z-index: 10;
+  box-sizing: border-box;
 }
 
 .table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar {
-  width: 6px;
+  width: 4px;
-  height: 6px;
+  height: 4px;
 }
 
 .table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
   background: #f1f5f9;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
   background: #cbd5e1;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {

screen-vue/src/views/system/user/index.vue

@@ -67,12 +67,16 @@
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="操作" width="180" align="center">
+            <el-table-column label="操作" width="180" align="center" fixed="right">
               <template #default="scope">
+                <!-- 编辑按钮添加 Edit 图标 -->
                 <el-button size="small" type="primary" link @click="handleEdit(scope.row)">
+                  <el-icon><Edit /></el-icon>
                   编辑
                 </el-button>
+                <!-- 删除按钮添加 Delete 图标 -->
                 <el-button size="small" type="danger" link @click="handleDelete(scope.row)">
+                  <el-icon><Delete /></el-icon>
                   删除
                 </el-button>
               </template>
@@ -97,7 +101,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Plus, Download } from '@element-plus/icons-vue'
+import { Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
 import { getHomeUserList } from '@/api/bizUser'
 
 import CSearch from '@/components/Search/proSearch.vue'
@@ -237,7 +241,7 @@ onMounted(() => {
 .data-manage-page {
   width: 100%;
   height: 100%;
-  padding: 16px;
+  padding: 4px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -251,7 +255,9 @@ onMounted(() => {
   min-height: 0;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
-  margin-bottom: 12px;
+  margin: 0 !important;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .main-section {
@@ -270,7 +276,7 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-.search-input, .search-select {
+:deep(.el-button .el-icon) {
-  width: 100%;
+  margin-right: 4px;
 }
 </style>