Browse Source

修改样式

yangg 4 months ago
parent
commit
1f1ac879ef
2 changed files with 74 additions and 0 deletions
  1. 6 0
      src/components/table/index.vue
  2. 68 0
      src/theme/element.scss

+ 6 - 0
src/components/table/index.vue

@@ -24,6 +24,12 @@
 					<template v-if="item.type === 'image'">
 						<img :src="scope.row[item.key]" :width="item.width" :height="item.height" />
 					</template>
+					<template v-else-if="item.key === 'status'">
+						<span :class="scope.row[item.key]">{{ scope.row[item.key] }}</span>
+					</template>
+					<template v-else-if="item.key === 'salary'">
+						<span class="salary-column">{{ scope.row[item.key] }}</span>
+					</template>
 					<template v-else>
 						{{ scope.row[item.key] }}
 					</template>

+ 68 - 0
src/theme/element.scss

@@ -343,3 +343,71 @@
 		overflow: auto;
 	}
 }
+
+/* Table 表格样式增强
+------------------------------- */
+.el-table {
+	/* 表头样式 */
+	th.el-table__cell {
+		background-color: #f5f7fa !important;
+		color: #606266;
+		font-weight: bold;
+	}
+	
+	/* 表格行样式 */
+	.el-table__row {
+		td.el-table__cell {
+			padding: 8px 0;
+		}
+	}
+	
+	/* 状态标签样式 */
+	.active {
+		display: inline-block;
+		padding: 2px 10px;
+		border-radius: 12px;
+		background-color: #e6f7ff;
+		color: #1890ff;
+		font-size: 12px;
+	}
+	
+	.pending {
+		display: inline-block;
+		padding: 2px 10px;
+		border-radius: 12px;
+		background-color: #fff7e6;
+		color: #faad14;
+		font-size: 12px;
+	}
+	
+	/* 金额样式 */
+	.salary-column {
+		color: #52c41a;
+		font-weight: 500;
+	}
+}
+
+/* 表格头部和内容对齐 */
+.el-table th.el-table__cell>.cell {
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+.el-table td.el-table__cell>.cell {
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+/* 表格边框和分割线颜色 */
+.el-table--border, .el-table--group {
+	border: 1px solid #f0f0f0;
+}
+
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+	border-bottom: 1px solid #f0f0f0;
+}
+
+/* 表格头部背景色 */
+.el-table__header-wrapper th.el-table__cell {
+	background-color: #fafafa;
+}