优化细节

src/modules/chat/components/index.vue

@@ -1,10 +1,9 @@
 <template>
-	<div class="cl-chat__wrap">
-		<el-badge :value="unCount" :hidden="!unCount">
 	<div class="cl-chat__icon" @click="open">
+		<el-badge :value="unCount" :hidden="!unCount">
 			<cl-svg name="icon-notice" :size="16" />
-			</div>
 		</el-badge>
+	</div>
 
 	<!-- 弹框 -->
 	<cl-dialog
@@ -47,7 +46,6 @@
 			</button>
 		</template>
 	</cl-dialog>
-	</div>
 </template>
 
 <script lang="ts" name="cl-chat" setup>
@@ -207,8 +205,10 @@ defineExpose({
 	height: 100%;
 
 	&__icon {
-		padding: 0 5px;
-		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 45px;
 
 		&:hover {
 			color: var(--color-primary);

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

@@ -7,7 +7,7 @@
 			</div>
 
 			<div class="card__container">
-				<el-progress :percentage="value" :stroke-width="8" />
+				<el-progress :percentage="value" :stroke-width="10" :show-text="false" />
 			</div>
 
 			<div class="card__footer">
@@ -48,7 +48,7 @@ import { BottomRight, TopRight } from "@element-plus/icons-vue";
 const value = ref(0);
 
 setTimeout(() => {
-	value.value = 50;
+	value.value = Math.random() * 30 + 30;
 }, 0);
 </script>
 
@@ -64,7 +64,6 @@ setTimeout(() => {
 			display: flex;
 			list-style: none;
 			flex: 1;
-			color: #d8d8d8;
 
 			.fall,
 			.rise {
@@ -85,7 +84,6 @@ setTimeout(() => {
 
 	.card__container {
 		padding-top: 15px;
-		padding-right: 10px;
 		box-sizing: border-box;
 	}
 }

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

@@ -58,7 +58,7 @@ import { BottomRight, TopRight } from "@element-plus/icons-vue";
 			display: flex;
 			list-style: none;
 			flex: 1;
-			color: #d8d8d8;
+			color: var(--el-color-info);
 
 			.fall,
 			.rise {

src/modules/demo/views/home/components/sales-rank.vue

@@ -122,7 +122,7 @@ function changeDate(value: string) {
 				list-style: none;
 				font-size: 14px;
 				cursor: pointer;
-				color: #d8d8d8;
+				color: var(--el-color-info);
 				white-space: nowrap;
 				margin-right: 10px;
 				flex: 1;
@@ -132,13 +132,17 @@ function changeDate(value: string) {
 				}
 
 				&:not(.active):hover {
-					color: #999;
+					color: #666;
 				}
 			}
 		}
 
 		:deep(.el-date-editor) {
 			width: 150px;
+
+			.el-input__inner {
+				color: #333;
+			}
 		}
 	}
 

src/plugins/view/components/group.vue

@@ -521,9 +521,10 @@ defineExpose({
 
 				.el-icon {
 					padding: 5px;
-					font-size: 18px;
+					font-size: 16px;
 					margin-left: 5px;
 					cursor: pointer;
+					border-radius: 4px;
 
 					&:hover {
 						background-color: var(--el-fill-color-lighter);