update 样式

package.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.6",
     "@vue/cli-service": "^4.4.6",
-    "element-theme-chalk": "^2.15.7",
+    "element-theme-chalk": "^2.15.12",
     "natives": "^1.1.6",
     "vue-template-compiler": "^2.6.11"
   },

src/components/BaseListTable.vue

@@ -1,7 +1,19 @@
 <!-- 这里单纯的配置表格就好了-->
 <template>
 	<div class="base-list-table w-full">
-		<el-table :data="tableData" v-bind="tableConfig" ref="base-list-table">
+		<el-table
+			:data="tableData"
+			v-bind="tableConfig"
+			ref="base-list-table"
+			:cell-style="{ padding: 0 }"
+			:header-cell-style="/** 重写表格样式 **/ {
+				padding: '8px 0',
+			}"
+			:header-row-style="/** 重写表格样式 **/ {
+				color: 'red',
+				background: 'black',
+			}"
+		>
 			<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
 			<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
 			<!-- 表格头定义 -->
@@ -22,7 +34,8 @@
 							  }
 							: null
 					"
-					v-bind="head.more"></el-table-column>
+					v-bind="head.more"
+				></el-table-column>
 				<!-- 普通的表头 -->
 				<el-table-column
 					v-else
@@ -36,7 +49,8 @@
 					:tooltip-effect="head.tooltipEffect || 'light'"
 					filter-placement="top"
 					:align="head.align || null"
-					v-bind="head.more">
+					v-bind="head.more"
+				>
 					<!-- 子组件 -->
 					<template v-if="head.prop" slot-scope="scope">
 						<component
@@ -44,9 +58,12 @@
 							:is="head.subcomponent"
 							:key="idx + 'sub'"
 							:inject-data="{ ...scope.row, head }"
-							@emit-data="handleSubEmitData" />
+							@emit-data="handleSubEmitData"
+						/>
 						<!-- 直接展示数据或应用过滤器 -->
-						<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
+						<span v-else>{{
+							scope.row[head.prop] | commonFilter(head.filter)
+						}}</span>
 					</template>
 
 					<!-- 多级表头 -->
@@ -54,7 +71,8 @@
 						<TableHead
 							v-for="(subhead, subindex) in head.children"
 							:key="'subhead-' + idx + '-subindex-' + subindex"
-							:opt="subhead" />
+							:opt="subhead"
+						/>
 					</template>
 				</el-table-column>
 			</template>
@@ -63,13 +81,13 @@
 </template>
 
 <script>
-import TableHead from './TableHead.vue';
+import TableHead from "./TableHead.vue";
 // 1. 表格拖拽开启/关闭
 // 2. 表格的样式'
 // 3. more...
 
 export default {
-	name: 'BaseListTable',
+	name: "BaseListTable",
 	components: { TableHead },
 	filters: {
 		commonFilter: (source, filterType = (a) => a) => {
@@ -88,14 +106,14 @@ export default {
 		tableData: {
 			type: Array,
 			default: () => [],
-		}
+		},
 	},
-	inject: ['urls'],
+	inject: ["urls"],
 	data() {
 		return {
 			page: 1,
 			size: 20, // 默认20
-			dataList: []
+			dataList: [],
 		};
 	},
 	watch: {
@@ -108,8 +126,8 @@ export default {
 	},
 	methods: {
 		handleSubEmitData(payload) {
-			console.log('[component] BaseListTable handleSubEmitData(): ', payload);
+			console.log("[component] BaseListTable handleSubEmitData(): ", payload);
-			this.$emit('operate-event', payload);
+			this.$emit("operate-event", payload);
 		},
 	},
 };

src/components/BaseSearchForm.vue

@@ -1,5 +1,6 @@
 <template>
-	<el-row class="base-search-form rounded">
+	<el-row class="base-search-form">
+		<div class="brand-color-line"></div>
 		<el-form :inline="true" :model="searchForm" :rules="headConfig.rules">
 			<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
 			<el-form-item
@@ -40,7 +41,10 @@
 					<el-button type="primary">上传文件</el-button>
 				</el-upload>
 				<el-button
-					v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
+					v-if="
+						opt.button &&
+							(!opt.button.permission || $hasPermission(opt.button.permission))
+					"
 					:key="'button' + Math.random().toString()"
 					:type="opt.button.type"
 					@click="handleBtnClick(opt.button.name)"
@@ -164,4 +168,21 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.base-search-form {
+	display: flex;
+	/* align-items: center; */
+	/* position: relative; */
+}
+
+.brand-color-line {
+	display: inline-block;
+	height: 20px;
+	width: 6px;
+	margin-right: 8px;
+	margin-top: 10px;
+	border-radius: 2px;
+	background: #0b58ff;
+	/* position: absolute; */
+}
+</style>

src/components/DialogWithMenu.vue

@@ -6,7 +6,7 @@
 		:distory-on-close="true"
 	>
 		<!-- title  -->
-		<div slot="title" class="">
+		<div slot="title" class="dialog-title">
 			<h1 class="">编辑</h1>
 		</div>
 		<!-- menu  -->
@@ -430,4 +430,9 @@ export default {
 .el-select {
 	width: 100% !important;
 }
+
+.dialog-with-menu >>> .el-dialog__header {
+	padding: 10px 20px 10px;
+	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white);
+}
 </style>

src/components/noTemplateComponents/operationComponent.js

@@ -72,7 +72,7 @@ export default {
             h('el-button',
               {
                 props: { type: 'text' },
-                style: { color: this.colors[opt.name] || '#409EFF' },
+                style: { color: this.colors[opt.name] || '#0b58ff' },
                 on: { click: this.emit.bind(null, opt) }
               },
               this.text[opt.name]
@@ -85,7 +85,7 @@ export default {
           h('el-button',
             {
               props: { type: 'text' },
-              style: { color: this.colors[opt] || '#409EFF' },
+              style: { color: this.colors[opt] || '#0b58ff' },
               on: { click: this.emit.bind(null, opt) }
             },
             this.text[opt]

src/components/noTemplateComponents/statusComponent.js

@@ -40,7 +40,7 @@ export default {
     return h('el-tag',
       {
         props:
-          { type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
+          { size: 'small', type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
       },
       this.isEnabled ? this.statusText[0] : this.statusText[1])
   }

src/views/atomViews/ListViewWithHead.vue

@@ -1,6 +1,8 @@
 <!-- 表格页加上搜索条件 -->
 <template>
-	<div class="bg-white rounded-lg shadow-lg w-full h-full p-5">
+	<div
+		class="list-view-with-head"
+	>
 		<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
 		<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
 
@@ -226,4 +228,13 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.list-view-with-head {
+	background: white;
+	/* height: 100%; */
+	min-height: inherit;
+	border-radius: 6px;
+	padding: 16px;
+	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.125);
+}
+</style>