优化

src/modules/demo/views/home/components/category-ratio.vue

@@ -23,10 +23,9 @@ const chartOption = reactive({
 		left: "center",
 		data: ["手机", "相机", "耳机", "音箱", "手表"]
 	},
-	color: ["#3AA1FF", "#36CBCB", "#F2637B", "#975FE5", "#FBD437"],
 	series: [
 		{
-			name: "访问来源",
+			name: "销售额类别占比",
 			type: "pie",
 			radius: ["50%", "60%"],
 			center: ["50%", "40%"],

src/modules/demo/views/home/components/count-effect.vue

@@ -16,7 +16,10 @@
 						<span>周同比</span>
 
 						<div class="fall">
-							<i class="el-icon-bottom-right"></i>
+							<el-icon>
+								<bottom-right />
+							</el-icon>
+
 							<span>-4%</span>
 						</div>
 					</li>
@@ -25,7 +28,10 @@
 						<span>日同比</span>
 
 						<div class="rise">
-							<i class="el-icon-top-right"></i>
+							<el-icon>
+								<top-right />
+							</el-icon>
+
 							<span>+7%</span>
 						</div>
 					</li>
@@ -37,6 +43,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import { BottomRight, TopRight } from "@element-plus/icons-vue";
 
 const value = ref(0);
 

src/modules/demo/views/home/components/count-paid.vue

@@ -2,7 +2,7 @@
 	<div class="count-paid">
 		<div class="card">
 			<div class="card__header">
-				<span class="label">支付笔数</span>
+				<span class="label">付款笔数</span>
 				<span class="value">6560</span>
 			</div>
 

src/modules/demo/views/home/components/count-user.vue

@@ -12,7 +12,10 @@
 						<span>周同比</span>
 
 						<div class="fall">
-							<i class="el-icon-bottom-right"></i>
+							<el-icon>
+								<bottom-right />
+							</el-icon>
+
 							<span>-6%</span>
 						</div>
 					</li>
@@ -21,7 +24,10 @@
 						<span>日同比</span>
 
 						<div class="rise">
-							<i class="el-icon-top-right"></i>
+							<el-icon>
+								<top-right />
+							</el-icon>
+
 							<span>+12%</span>
 						</div>
 					</li>
@@ -36,7 +42,9 @@
 	</div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { BottomRight, TopRight } from "@element-plus/icons-vue";
+</script>
 
 <style lang="scss" scoped>
 .count-sales {

src/modules/demo/views/home/components/count-views.vue

@@ -25,12 +25,16 @@ import * as echarts from "echarts";
 const chartOption = reactive({
 	grid: {
 		left: 0,
-		top: 0,
+		top: 1,
 		right: 0,
-		bottom: 0
+		bottom: 1
 	},
 	xAxis: {
 		type: "category",
+		boundaryGap: false,
+		axisLine: {
+			show: false
+		},
 		data: [
 			"00:00",
 			"2:00",
@@ -44,8 +48,7 @@ const chartOption = reactive({
 			"18:00",
 			"20:00",
 			"22:00"
-		],
+		]
-		boundaryGap: false
 	},
 	yAxis: {
 		type: "value",
@@ -64,7 +67,6 @@ const chartOption = reactive({
 	},
 	series: [
 		{
-			name: "总访问量",
 			type: "line",
 			smooth: true,
 			showSymbol: false,

src/modules/demo/views/home/components/hot-search.vue

@@ -42,10 +42,8 @@
 			</el-row>
 
 			<div class="hot-search__table">
-				<cl-crud ref="Crud" padding="0">
+				<cl-crud ref="Crud">
-					<cl-row>
 					<cl-table ref="Table" :border="false" />
-					</cl-row>
 				</cl-crud>
 			</div>
 		</div>
@@ -261,10 +259,7 @@ function chartOption() {
 	}
 
 	&__table {
-		padding: 10px;
 		margin: 0 10px;
-		border-radius: 6px;
-		background-color: var(--el-bg-color);
 	}
 }
 </style>

src/modules/demo/views/home/components/tab-chart.vue

@@ -62,9 +62,6 @@ const chartOption = reactive<any>({
 			show: true,
 			status: "shadow",
 			z: -1,
-			shadowStyle: {
-				color: "#E6F7FF"
-			},
 			type: "shadow"
 		},
 		extraCssText: "width:120px; white-space:pre-wrap"

src/modules/demo/views/home/index.vue

@@ -75,6 +75,7 @@ import HotSearch from "./components/hot-search.vue";
 		font-size: 12px;
 		letter-spacing: 0.5px;
 		color: #000;
+		line-height: 1;
 
 		&__header {
 			display: flex;