red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式优化

Browse Source
This commit is contained in:
吴思建
2026-05-28 11:10:03 +08:00
parent 4174c424fc
commit 9bd4a44ab6
4 changed files with 20 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/home/components/ChatList.vue
View File

@@ -3,18 +3,10 @@
<div class="chat-divider">今天 15:14</div>
<div v-for="msg in messages" :key="msg.id" class="message-row" :class="{ 'is-user': msg.isUser }">
<div v-if="!msg.isUser" class="avatar-wrap">
<div class="ai-avatar">AI</div>
</div>
<div class="bubble-wrap">
<div class="bubble">{{ msg.content }}</div>
<div class="time">{{ msg.time }}</div>
</div>
<div v-if="msg.isUser" class="avatar-wrap">
<div class="user-avatar">你</div>
</div>
</div>
</div>
</template>
@@ -48,42 +40,6 @@ const messages = ref<Message[]>([
time: '09:31',
isUser: false,
},
{
id: 4,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: true,
},
{
id: 5,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: false,
},
{
id: 6,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: true,
},
{
id: 7,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: false,
},
{
id: 8,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: true,
},
{
id: 9,
content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
time: '09:31',
isUser: false,
},
]);
</script>
@@ -121,49 +77,6 @@ const messages = ref<Message[]>([
}
}
.avatar-wrap {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 4px;
}
.ai-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #1e40af;
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border: 1px solid #93c5fd;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 8px rgba(59, 130, 246, 0.15);
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border: 1px solid #f59e0b;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 8px rgba(245, 158, 11, 0.2);
}
.bubble-wrap {
display: flex;
flex-direction: column;