优化细节

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,53 +1,51 @@
<template>
<div class="cl-chat__wrap">
<div class="cl-chat__icon" @click="open">
<el-badge :value="unCount" :hidden="!unCount">
<div class="cl-chat__icon" @click="open">
<cl-svg name="icon-notice" :size="16" />
</div>
<cl-svg name="icon-notice" :size="16" />
</el-badge>
</div>
<!-- 弹框 -->
<cl-dialog
v-model="visible"
title="聊天窗口"
height="70vh"
width="1200px"
padding="0"
keep-alive
:scrollbar="false"
:close-on-click-modal="false"
close-on-press-escape
:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
<!-- 弹框 -->
<cl-dialog
v-model="visible"
title="聊天窗口"
height="70vh"
width="1200px"
padding="0"
keep-alive
:scrollbar="false"
:close-on-click-modal="false"
close-on-press-escape
:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
>
<div
class="cl-chat"
:class="{
'is-mini': browser.isMini,
'is-expand': isExpand
}"
>
<div
class="cl-chat"
:class="{
'is-mini': browser.isMini,
'is-expand': isExpand
}"
>
<div class="cl-chat__session">
<chat-session />
</div>
<div class="cl-chat__right">
<chat-message />
</div>
<div class="cl-chat__session">
<chat-session />
</div>
<!-- 展开按钮 -->
<template #slot-expand>
<button class="cl-dialog__controls-icon">
<el-icon @click="isExpand = true" v-if="!isExpand">
<notebook />
</el-icon>
<el-icon @click="isExpand = false" v-else>
<arrow-left />
</el-icon>
</button>
</template>
</cl-dialog>
</div>
<div class="cl-chat__right">
<chat-message />
</div>
</div>
<!-- 展开按钮 -->
<template #slot-expand>
<button class="cl-dialog__controls-icon">
<el-icon @click="isExpand = true" v-if="!isExpand">
<notebook />
</el-icon>
<el-icon @click="isExpand = false" v-else>
<arrow-left />
</el-icon>
</button>
</template>
</cl-dialog>
</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);

View File

@ -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;
}
}

View File

@ -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 {

View File

@ -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;
}
}
}

View File

@ -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);