GoCo/OL-LearnPlatform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：即刻对话区域，和顶部logo切换，home页面的80改到50百分之，

Browse Source
This commit is contained in:
小张 2025-09-11 01:12:07 +08:00
parent ec1a19d005
commit 7fb049d31d
3 changed files with 161 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/logo/logo1.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线学习平台</title> <title>在线学习平台</title>
<meta name="description" content="专业的在线学习平台，提供优质的编程和技术课程"> <meta name="description" content="专业的在线学习平台，提供优质的编程和技术课程">

280
src/components/InstantMessage.vue
View File

@ -3,11 +3,7 @@
<!-- 对话列表 --> <!-- 对话列表 -->
<div class="conversation-list"> <div class="conversation-list">
<div class="conversation-header"> <div class="conversation-header">
<h3>对话</h3> <h3>全部消息</h3>
<div class="search-box">
<input type="text" placeholder="搜索对话" v-model="searchKeyword" />
<img src="/images/profile/message.png" alt="搜索" class="search-icon" />
</div>
</div> </div>
<div class="conversation-items"> <div class="conversation-items">
@ -19,7 +15,7 @@
> >
<div class="avatar-container"> <div class="avatar-container">
<img :src="conversation.avatar" :alt="conversation.name" class="conversation-avatar" /> <img :src="conversation.avatar" :alt="conversation.name" class="conversation-avatar" />
<div v-if="conversation.unreadCount > 0" class="unread-badge">{{ conversation.unreadCount }}</div>
</div> </div>
<div class="conversation-info"> <div class="conversation-info">
<div class="conversation-name">{{ conversation.name }}</div> <div class="conversation-name">{{ conversation.name }}</div>
@ -43,24 +39,7 @@
<div v-else class="chat-container"> <div v-else class="chat-container">
<!-- 聊天头部 --> <!-- 聊天头部 -->
<div class="chat-header"> <div class="chat-header">
<div class="chat-user-info"> <div class="chat-title">{{ selectedConversation.name }}</div>
<img :src="selectedConversation.avatar" :alt="selectedConversation.name" class="chat-avatar" />
<div class="chat-user-details">
<div class="chat-user-name">{{ selectedConversation.name }}</div>
<div class="chat-user-status">{{ selectedConversation.isOnline ? '在线' : '离线' }}</div>
</div>
</div>
<div class="chat-actions">
<button class="chat-action-btn">
<img src="/images/profile/message.png" alt="视频通话" />
</button>
<button class="chat-action-btn">
<img src="/images/profile/message.png" alt="语音通话" />
</button>
<button class="chat-action-btn">
<img src="/images/profile/message.png" alt="更多" />
</button>
</div>
</div> </div>
<!-- 消息列表 --> <!-- 消息列表 -->
@ -83,7 +62,7 @@
</div> </div>
<div class="message-time">{{ message.time }}</div> <div class="message-time">{{ message.time }}</div>
</div> </div>
<div v-if="message.isSelf" class="message-avatar"> <div v-if="message.isSelf" class="message-avatar message-avatar-right">
<img src="/images/profile/profile.png" alt="我" /> <img src="/images/profile/profile.png" alt="我" />
</div> </div>
</div> </div>
@ -91,29 +70,34 @@
<!-- 输入区域 --> <!-- 输入区域 -->
<div class="input-area"> <div class="input-area">
<div class="input-toolbar">
<button class="toolbar-btn" @click="showEmojiPicker = !showEmojiPicker">
<img src="/images/profile/message.png" alt="表情" />
</button>
<button class="toolbar-btn" @click="selectFile">
<img src="/images/profile/message.png" alt="附件" />
</button>
<button class="toolbar-btn">
<img src="/images/profile/message.png" alt="图片" />
</button>
</div>
<div class="input-container"> <div class="input-container">
<textarea <textarea
v-model="messageInput" v-model="messageInput"
placeholder="输入消息..." placeholder="这里输入…"
@keydown.enter.prevent="sendMessage" @keydown.enter.prevent="sendMessage"
@input="adjustTextareaHeight" @input="adjustTextareaHeight"
ref="messageTextarea" ref="messageTextarea"
rows="1" rows="3"
></textarea> ></textarea>
<button class="send-btn" @click="sendMessage" :disabled="!messageInput.trim()"> <div class="input-bottom">
发送 <div class="input-toolbar">
</button> <button class="toolbar-btn" @click="showEmojiPicker = !showEmojiPicker">
<img src="/images/courses/expression.png" alt="表情" class="toolbar-icon" />
</button>
<button class="toolbar-btn" @click="selectFile">
<img src="/images/courses/@.png" alt="@用户" class="toolbar-icon" />
</button>
<button class="toolbar-btn">
<img src="/images/courses/Image.png" alt="图片" class="toolbar-icon" />
</button>
</div>
<div class="send-area">
<span class="char-count">{{ messageInput.length }}/500</span>
<button class="send-btn" @click="sendMessage" :disabled="!messageInput.trim()">
发布
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -288,9 +272,10 @@ onMounted(() => {
<style scoped> <style scoped>
.instant-message-container { .instant-message-container {
display: flex; display: flex;
height: 600px; width: 1183px;
height: 700px;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-radius: 8px; border-radius: 0;
overflow: hidden; overflow: hidden;
} }
@ -304,13 +289,32 @@ onMounted(() => {
.conversation-header { .conversation-header {
padding: 16px; padding: 16px;
border-bottom: 1px solid #e6e6e6; position: relative;
}
.conversation-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
background-color: #e6e6e6;
} }
.conversation-header h3 { .conversation-header h3 {
margin: 0 0 12px 0; margin: 0;
width: 64px;
height: 22px;
font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 16px; font-size: 16px;
font-weight: 600; color: #3F3F44;
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
} }
.search-box { .search-box {
@ -321,7 +325,7 @@ onMounted(() => {
width: 100%; width: 100%;
padding: 8px 32px 8px 12px; padding: 8px 32px 8px 12px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-radius: 6px; border-radius: 0;
font-size: 14px; font-size: 14px;
} }
@ -346,6 +350,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s; transition: background-color 0.2s;
border-radius: 0;
} }
.conversation-item:hover { .conversation-item:hover {
@ -372,13 +377,21 @@ onMounted(() => {
position: absolute; position: absolute;
top: -4px; top: -4px;
right: -4px; right: -4px;
background: #ff4d4f; width: 22px;
color: white; height: 16px;
font-size: 12px; background: #E2F5FF;
padding: 2px 6px; border-radius: 8px;
border-radius: 10px; display: flex;
min-width: 16px; align-items: center;
justify-content: center;
font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 10px;
color: #0088D1;
line-height: 14px;
text-align: center; text-align: center;
font-style: normal;
text-transform: none;
} }
.conversation-info { .conversation-info {
@ -446,67 +459,47 @@ onMounted(() => {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
.chat-header { .chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid #e6e6e6;
}
.chat-user-info {
display: flex;
align-items: center;
gap: 12px;
}
.chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.chat-user-name {
font-size: 16px;
font-weight: 500;
}
.chat-user-status {
font-size: 12px;
color: #52c41a;
}
.chat-actions {
display: flex;
gap: 8px;
}
.chat-action-btn {
width: 32px;
height: 32px;
border: none;
background: none;
cursor: pointer;
border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 16px;
background: #F5F8FB;
position: relative;
} }
.chat-action-btn:hover { .chat-header::after {
background-color: #f5f5f5; content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background-color: #e6e6e6;
} }
.chat-action-btn img { .chat-title {
width: 20px; width: 160px;
height: 20px; height: 20px;
font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
font-size: 16px;
color: #3F3F44;
line-height: 20px;
text-align: center;
font-style: normal;
text-transform: none;
} }
.messages-container { .messages-container {
flex: 1; flex: 1;
background: #F5F8FB;
overflow-y: auto; overflow-y: auto;
padding: 16px; padding: 16px;
display: flex; display: flex;
@ -520,7 +513,7 @@ onMounted(() => {
} }
.message-item.message-self { .message-item.message-self {
flex-direction: row-reverse; justify-content: flex-end;
} }
.message-avatar img { .message-avatar img {
@ -530,6 +523,11 @@ onMounted(() => {
object-fit: cover; object-fit: cover;
} }
.message-avatar-right {
order: 2;
margin-left: 8px;
}
.message-content { .message-content {
max-width: 60%; max-width: 60%;
} }
@ -538,23 +536,29 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
order: 1;
} }
.message-bubble { .message-bubble {
max-width: 224px;
min-height: 40px;
background: #FFFFFF;
border-radius: 0px 8px 8px 8px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 12px;
word-wrap: break-word; word-wrap: break-word;
display: inline-block;
width: auto;
} }
.message-other .message-bubble { .message-other .message-bubble {
background-color: #f0f0f0; background-color: #f0f0f0;
border-bottom-left-radius: 4px; border-radius: 0px 8px 8px 8px;
} }
.message-self .message-bubble { .message-self .message-bubble {
background-color: #1890ff; background: #E2F5FF;
color: white; border-radius: 8px 0px 8px 8px;
border-bottom-right-radius: 4px; color: #333;
} }
.message-text { .message-text {
@ -584,23 +588,22 @@ onMounted(() => {
} }
.input-area { .input-area {
border-top: 1px solid #e6e6e6; height: 128px;
background: #FFFFFF;
border-radius: 0px 0px 2px 0px;
flex-shrink: 0;
padding: 16px; padding: 16px;
} }
.input-toolbar {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.toolbar-btn { .toolbar-btn {
width: 32px; width: 24px;
height: 32px; height: 20px;
border: none; border-radius: 2px;
border: 1px solid #E6E6E6;
background: none; background: none;
cursor: pointer; cursor: pointer;
border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -610,28 +613,30 @@ onMounted(() => {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.toolbar-btn img { .toolbar-btn img,
width: 20px; .toolbar-icon {
height: 20px; width: 12px;
height: 12px;
object-fit: contain;
} }
.input-container { .input-container {
display: flex; display: flex;
gap: 8px; flex-direction: column;
align-items: flex-end; height: 100%;
} }
.input-container textarea { .input-container textarea {
flex: 1; flex: 1;
padding: 8px 12px; padding: 12px;
border: 1px solid #d9d9d9; border: none;
border-radius: 6px; border-radius: 0;
resize: none; resize: none;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: 1.4;
min-height: 36px; background: transparent;
max-height: 120px; outline: none;
} }
.send-btn { .send-btn {
@ -639,7 +644,7 @@ onMounted(() => {
background-color: #1890ff; background-color: #1890ff;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 0;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
height: 36px; height: 36px;
@ -653,4 +658,27 @@ onMounted(() => {
.send-btn:not(:disabled):hover { .send-btn:not(:disabled):hover {
background-color: #40a9ff; background-color: #40a9ff;
} }
.input-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.input-toolbar {
display: flex;
gap: 8px;
}
.send-area {
display: flex;
align-items: center;
gap: 12px;
}
.char-count {
font-size: 12px;
color: #999;
}
</style> </style>

6
src/views/Home.vue
View File

@ -701,12 +701,12 @@ const handleScroll = () => {
documentHeight, documentHeight,
scrollableHeight, scrollableHeight,
scrollPercentage: scrollPercentage.toFixed(2) + '%', scrollPercentage: scrollPercentage.toFixed(2) + '%',
shouldShow: scrollPercentage >= 80, shouldShow: scrollPercentage >= 50,
currentShow: showFixedButtons.value currentShow: showFixedButtons.value
}) })
// 当滚动超过80%时显示固定按钮组 // 当滚动超过50%时显示固定按钮组
const shouldShow = scrollPercentage >= 80 const shouldShow = scrollPercentage >= 50
if (shouldShow !== showFixedButtons.value) { if (shouldShow !== showFixedButtons.value) {
showFixedButtons.value = shouldShow showFixedButtons.value = shouldShow
console.log(shouldShow ? '🟢 显示固定按钮组' : '🔴 隐藏固定按钮组') console.log(shouldShow ? '🟢 显示固定按钮组' : '🔴 隐藏固定按钮组')