mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
优化细节
This commit is contained in:
parent
851dcc912f
commit
47d0582089
@ -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);
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user