优化细节

This commit is contained in:
神仙 2024-08-01 00:43:12 +08:00
parent 851dcc912f
commit 47d0582089
5 changed files with 56 additions and 53 deletions

View File

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

View File

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

View File

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

View File

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

View File

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