hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

公告、对话、发现、获取次数的弹窗跳转、点击漂浮文字询问问题

dong
donghaolin 4 months ago
parent
5f987688d8
commit
80e414f7e3
3 changed files with 613 additions and 428 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 281
      src/views/AIchat.vue
  2. 40
      src/views/Announcement.vue
  3. 720
      src/views/homePage.vue

281
src/views/AIchat.vue
View File

@ -1,201 +1,226 @@
<script setup> <script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { ElDialog } from 'element-plus'
import { getReplyStreamAPI } from '../api/AIxiaocaishen'
import { ref, onMounted, watch, nextTick } from "vue";
import { ElDialog } from "element-plus";
import { getReplyStreamAPI } from "../api/AIxiaocaishen";
// 随机GIF // 随机GIF
const currentGif = ref('')
const currentGif = ref("");
// 新闻飘屏数据 // 新闻飘屏数据
const newsList = ref(Array(10).fill().map((_, i) => ({
title: `引导提出问题 ${i + 1}`,
content: `新闻 ${i + 1} 的详细内容...`
})))
const newsList = ref(
Array(10)
.fill()
.map((_, i) => ({
title: `引导提出问题 ${i + 1}`,
content: `新闻 ${i + 1} 的详细内容...`,
}))
);
// 定义自定义事件
const emit = defineEmits(["updateMessage", "sendMessage"]);
// 弹窗控制 // 弹窗控制
const dialogVisible = ref(false)
const currentNews = ref('')
const dialogVisible = ref(false);
const currentNews = ref("");
const showNews = (news) => { const showNews = (news) => {
currentNews.value = news
dialogVisible.value = true
}
currentNews.value = news;
dialogVisible.value = true;
// 触发自定义事件
emit("updateMessage", news.title);
emit("sendMessage");
};
// 获取消息 // 获取消息
const props = defineProps({ const props = defineProps({
messages: Array,
})
messages: Array,
});
watch(() => props.messages, async (newVal, oldVal) => {
console.log('消息列表已更新，最新消息:', newVal[newVal.length - 1])
watch(
() => props.messages,
async (newVal, oldVal) => {
console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]);
// 在此处添加需要执行的逻辑 // 在此处添加需要执行的逻辑
const response = await getReplyStreamAPI({ const response = await getReplyStreamAPI({
"workflow_id": "7480464341100494863",
"parameters": {
"input": newVal[newVal.length - 1].content
}
workflow_id: "7480464341100494863",
parameters: {
input: newVal[newVal.length - 1].content,
},
}); });
const reader = response.body.getReader(); const reader = response.body.getReader();
console.log(response, 'response')
console.log(reader, 'reader')
}, { deep: true, immediate: true })
console.log(response, "response");
console.log(reader, "reader");
},
{ deep: true, immediate: true }
);
// 初始化随机GIF // 初始化随机GIF
onMounted(() => { onMounted(() => {
const random = Math.floor(Math.random() * 4) + 1
console.log(random, 'random')
currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif`
})
const random = Math.floor(Math.random() * 4) + 1;
console.log(random, "random");
currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif`;
});
</script> </script>
<template> <template>
<div class="chat-container">
<!-- GIF区域 -->
<div class="gif-area">
<img :src="currentGif" alt="AI动画">
<div class="marquee-container">
<div class="marquee-row top">
<div v-for="(news, index) in newsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
@click="showNews(news)">
{{ news.title }}
</div>
</div>
<div class="marquee-row bottom">
<div v-for="(news, index) in newsList.slice(5, 10)" :key="'bottom' + index" class="marquee-item"
@click="showNews(news)">
{{ news.title }}
</div>
</div>
</div>
<div class="chat-container">
<!-- GIF区域 -->
<div class="gif-area">
<img :src="currentGif" alt="AI动画" />
<div class="marquee-container">
<div class="marquee-row top">
<div
v-for="(news, index) in newsList.slice(0, 5)"
:key="'top' + index"
class="marquee-item"
@click="showNews(news)"
>
{{ news.title }}
</div>
</div> </div>
<!-- 消息区域 -->
<div class="message-area">
<div v-for="(msg, index) in messages" :key="index" :class="['message-bubble', msg.sender]">
{{ msg.content }}
</div>
<div class="marquee-row bottom">
<div
v-for="(news, index) in newsList.slice(5, 10)"
:key="'bottom' + index"
class="marquee-item"
@click="showNews(news)"
>
{{ news.title }}
</div>
</div> </div>
</div>
</div>
<!-- 新闻弹窗 -->
<el-dialog v-model="dialogVisible" title="新闻详情" width="60%">
<p>{{ currentNews.content }}</p>
</el-dialog>
<!-- 消息区域 -->
<div class="message-area">
<div
v-for="(msg, index) in messages"
:key="index"
:class="['message-bubble', msg.sender]"
>
{{ msg.content }}
</div>
</div> </div>
<!-- 新闻弹窗 -->
<el-dialog v-model="dialogVisible" title="新闻详情" width="60%">
<p>{{ currentNews.content }}</p>
</el-dialog>
</div>
</template> </template>
<style scoped> <style scoped>
.chat-container { .chat-container {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
} }
.gif-area { .gif-area {
/* position: relative; */
height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* position: relative; */
height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
.gif-area img { .gif-area img {
width: 30%;
/* 改为百分比单位 */
min-width: 200px;
/* 最小尺寸 */
max-width: 400px;
/* 最大尺寸 */
height: auto;
left: 50%;
transition: all 0.3s;
/* 添加过渡效果 */
width: 30%;
/* 改为百分比单位 */
min-width: 200px;
/* 最小尺寸 */
max-width: 400px;
/* 最大尺寸 */
height: auto;
left: 50%;
transition: all 0.3s;
/* 添加过渡效果 */
} }
.marquee-container { .marquee-container {
/* position: absolute; */
bottom: 0;
width: 100%;
/* position: absolute; */
bottom: 0;
width: 100%;
} }
.marquee-row { .marquee-row {
white-space: nowrap;
overflow: visible;
padding: 8px 0;
width: 100%;
white-space: nowrap;
overflow: visible;
padding: 8px 0;
width: 100%;
} }
.marquee-item { .marquee-item {
display: inline-block;
margin: 0 15px;
padding: 8px 20px;
background: rgba(255, 255, 255, 0.9);
/* 白色背景 */
border-radius: 10px;
/* 圆角矩形 */
color: #333;
/* 文字颜色改为深色 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* 添加阴影 */
transition: all 0.3s;
transition: color 0.3s;
display: inline-block;
margin: 0 15px;
padding: 8px 20px;
background: rgba(255, 255, 255, 0.9);
/* 白色背景 */
border-radius: 10px;
/* 圆角矩形 */
color: #333;
/* 文字颜色改为深色 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* 添加阴影 */
transition: all 0.3s;
transition: color 0.3s;
} }
.top { .top {
animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
} }
.bottom { .bottom {
animation: marquee 15s linear infinite reverse;
animation: marquee 15s linear infinite reverse;
} }
@keyframes marquee { @keyframes marquee {
0% {
transform: translateX(100%);
}
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-150%);
}
100% {
transform: translateX(-150%);
}
} }
.message-area { .message-area {
flex: 1;
overflow: auto;
padding: 20px;
flex: 1;
overflow: auto;
padding: 20px;
} }
.message-bubble { .message-bubble {
max-width: 70%;
margin: 10px 20px;
padding: 15px 25px;
border-radius: 10px;
position: relative;
max-width: 70%;
margin: 10px 20px;
padding: 15px 25px;
border-radius: 10px;
position: relative;
} }
.message-bubble.user { .message-bubble.user {
background: #8263f0;
color: white;
margin-left: auto;
/* border-bottom-right-radius: 5px; */
background: #8263f0;
color: white;
margin-left: auto;
/* border-bottom-right-radius: 5px; */
} }
.message-bubble.ai { .message-bubble.ai {
background: #f0f0f0;
color: #333;
margin-right: auto;
border-bottom-left-radius: 5px;
background: #f0f0f0;
color: #333;
margin-right: auto;
border-bottom-left-radius: 5px;
} }
.message-area { .message-area {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
} }
</style>
</style>

40
src/views/Announcement.vue
View File

@ -0,0 +1,40 @@
<script setup></script>
<template>
<el-main class="homepage-body">
<div class="main-wrapper">
<img
src="src\assets\img\AIchat\AIgif1.gif"
alt="图片加载失败"
class="logo1"
/>
<!-- 一段文字，水平居中，宽度为500px -->
<div style="width: 500px; margin: 0 auto; text-align: center">
<p>
欢迎使用AI智能问答系统，本系统基于OpenAI的GPT-3.5模型，为您提供智能问答服务。
</p>
<p>这个是公告部分</p>
</div>
</div>
</el-main>
</template>
<style scoped>
.homepage-body {
padding: 0px;
height: calc(100% - 70px);
/* 根据底部高度调整 */
}
.main-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.logo1 {
/* 居中显示 30%大小 不要拉伸*/
display: block;
width: 30%;
height: auto;
/* 水平居中 */
margin: 0 auto;
}
</style>

720
src/views/homePage.vue
View File

@ -1,427 +1,549 @@
<script setup> <script setup>
// 导入 // 导入
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { setHeight } from '../utils/setHeight'
import { getReplyAPI } from '../api/AIxiaocaishen'
import AIchat from '../views/AIchat.vue'
import AIfind from '../views/AIfind.vue'
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { setHeight } from "../utils/setHeight";
import { getReplyAPI } from "../api/AIxiaocaishen";
import AIchat from "../views/AIchat.vue";
import AIfind from "../views/AIfind.vue";
// 变量 // 变量
// 将默认值改为从 sessionStorage 中获取，如果没有则使用默认值 'aifindCow'为第一个默认tab // 将默认值改为从 sessionStorage 中获取，如果没有则使用默认值 'aifindCow'为第一个默认tab
const activeTab = ref(sessionStorage.getItem('activeTabAI') || 'AIchat')
const activeIndex = ref(parseInt(sessionStorage.getItem('activeIndexAI') || '0'))
const activeTab = ref(sessionStorage.getItem("activeTabAI") || "AIchat");
const activeIndex = ref(
parseInt(sessionStorage.getItem("activeIndexAI") || "0")
);
const tabs = computed(() => [ const tabs = computed(() => [
{
name: 'AIchat',
label: 'AI对话'
},
{
name: 'AIfind',
label: '发现'
}
])
const setActiveTab = (tab, index) => {
activeTab.value = tab
activeIndex.value = index // 给索引值
// 存储当前选中的 tab 和 index 到 sessionStorage
sessionStorage.setItem('activeTabAI', tab)
sessionStorage.setItem('activeIndexAI', index.toString())
setHeight(document.getElementById('testId')) // 给父组件发送窗口高度
}
// 跳转
{
name: "AIchat",
label: "AI对话",
},
{
name: "AIfind",
label: "发现",
},
]);
// 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
const setActiveTab = (tab, index, forceAIchat = false) => {
isAnnouncementVisible.value = false;
if (forceAIchat && activeTab.value !== "AIchat") {
activeTab.value = "AIchat";
activeIndex.value = 0;
sessionStorage.setItem("activeTabAI", "AIchat");
sessionStorage.setItem("activeIndexAI", "0");
} else {
activeTab.value = tab;
activeIndex.value = index;
sessionStorage.setItem("activeTabAI", tab);
sessionStorage.setItem("activeIndexAI", index.toString());
}
setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
};
// 修改 activeComponent 的计算逻辑
const activeComponent = computed(() => { const activeComponent = computed(() => {
return activeTab.value === 'AIchat' ? AIchat : AIfind
})
if (isAnnouncementVisible.value) {
return Announcement;
}
return activeTab.value === "AIchat" ? AIchat : AIfind;
});
// 新增一个方法，调用时先判断是否处于 AIchat，若不在则跳转到 AIchat
const ensureAIchat = () => {
setActiveTab("AIchat", 0, true);
};
// 获取次数 // 获取次数
const getCount = () => { const getCount = () => {
console.log('获取次数')
}
console.log("获取次数");
};
// 深度思考 // 深度思考
const isThinking = ref(false)
const isThinking = ref(false);
const toggleThink = () => { const toggleThink = () => {
isThinking.value = !isThinking.value
}
isThinking.value = !isThinking.value;
};
// 发送消息 // 发送消息
const message = ref('');
const message = ref("");
// 传输对象 // 传输对象
const messages = ref([])
const messages = ref([]);
// 信息加载状态 // 信息加载状态
const isLoading = ref(false)
const isLoading = ref(false);
// 在 sendMessage 方法中添加触发逻辑 // 在 sendMessage 方法中添加触发逻辑
const triggerFetch = ref(false)
const triggerFetch = ref(false);
// 添加用户消息
const updateMessage = (title) => {
message.value = title;
console.log("updateMessage 的值:", title);
};
const sendMessage = async () => { const sendMessage = async () => {
if (!message.value) return
if (isLoading.value) return
// 调用 ensureAIchat 确保跳转到 AIchat 页面
ensureAIchat();
// 添加用户消息
messages.value.push({
sender: 'user',
content: message.value,
timestamp: new Date().toISOString()
})
if (!message.value) return;
if (isLoading.value) return;
// 重置消息输入框
message.value = ''
const sendMessage = () => {
// 处理发送消息的逻辑
}
console.log("sendMessage 的值:", message.value);
messages.value.push({ content: message.value, sender: "user" });
};
messages.value.push({
sender: "user",
content: message.value,
timestamp: new Date().toISOString(),
});
// 重置消息输入框
message.value = "";
};
// 公告 // 公告
// 引入公告组件
import Announcement from "./Announcement.vue";
// 新增一个变量来控制是否显示公告页面
const isAnnouncementVisible = ref(false);
const showAnnouncement = () => { const showAnnouncement = () => {
console.log('打开公告')
}
console.log("打开公告");
isAnnouncementVisible.value = true; // 显示公告页面
};
// 点击剩余次数会弹出的弹窗
// 新增一个 ref 来控制弹窗的显示与隐藏
const dialogVisible = ref(false);
// 获取次数 // 获取次数
const showCount = () => { const showCount = () => {
console.log('显示剩余次数')
}
console.log("显示剩余次数");
// 显示弹窗
dialogVisible.value = true;
console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认
};
// 保证发送消息时，滚动屏在底部 // 保证发送消息时，滚动屏在底部
const tabContent = ref(null)
watch(messages, async () => {
await nextTick()
const tabContent = ref(null);
watch(
messages,
async () => {
await nextTick();
if (tabContent.value) { if (tabContent.value) {
tabContent.value.scrollTop = tabContent.value.scrollHeight
tabContent.value.scrollTop = tabContent.value.scrollHeight;
} }
}, { deep: true, immediate: true })
},
{ deep: true, immediate: true }
);
onMounted(() => { onMounted(() => {
setHeight(document.getElementById('testId')) // 给父组件发送窗口高度
})
setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
});
</script> </script>
<template> <template>
<div class="homepage" id="testId">
<el-container>
<!-- AI小财神头部： logo 次数 公告 -->
<el-header class="homepage-head">
<!-- logo -->
<div class="homepage-logo">
<img src="src\assets\img\homePage\logo.png" alt="图片加载失败" class="logo1">
<img src="src\assets\img\homePage\madeInHL.png" alt="图片加载失败" class="logo2">
</div>
<div class="homepage-right-group">
<div class="count-badge" @click="showCount">
<img src="src\assets\img\homePage\get-count-all.png" class="action-btn">
<div class="count-number">1000次</div>
</div>
<img src="src\assets\img\homePage\announcement.png" class="announcement-btn action-btn"
@click="showAnnouncement">
</div>
</el-header>
<!-- 主体部分：小人 问题轮询图 对话内容 -->
<el-main class="homepage-body">
<div class="main-wrapper">
<section class="tab-section">
<div class="tab-container">
<div v-for="(tab, index) in tabs" :key="tab.name" @click="setActiveTab(tab.name, index)"
:class="['tab-item', { active: activeIndex === index }]">
<span>{{ tab.label }}</span>
</div>
</div>
</section>
<div class="tab-content" ref="tabContent">
<component :is="activeComponent" :messages="messages" />
</div>
</div>
</el-main>
<!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
<el-footer class="homepage-footer">
<!-- 第一行按钮 -->
<div class="footer-first-line">
<div class="left-group">
<img v-if="isThinking" src="src\assets\img\homePage\tail\think-active.png" @click="toggleThink"
class="action-btn">
<img v-else src="src\assets\img\homePage\tail\think-no-active.png" @click="toggleThink"
class="action-btn">
<img src="src\assets\img\homePage\tail\language.png" @click="changeLanguage" class="action-btn">
<img src="src\assets\img\homePage\tail\voice.png" @click="toggleVoice" class="action-btn">
</div>
<img src="src\assets\img\homePage\tail\send.png" @click="sendMessage" class="action-btn send-btn">
</div>
<!-- 第二行输入框 -->
<div class="footer-second-line">
<img src="src\assets\img\homePage\tail\msg.png" class="msg-icon">
<el-input type="textarea" v-model="message" :autosize="{ minRows: 1, maxRows: 4 }"
placeholder="给AI小财神发消息..." class="msg-input"
@keydown.enter.exact.prevent="isLoading ? null : sendMessage()" resize="none">
</el-input>
</div>
</el-footer>
</el-container>
</div>
<div class="homepage" id="testId">
<el-container>
<!-- AI小财神头部： logo 次数 公告 -->
<el-header class="homepage-head">
<!-- logo -->
<div class="homepage-logo">
<img
src="src\assets\img\homePage\logo.png"
alt="图片加载失败"
class="logo1"
/>
<img
src="src\assets\img\homePage\madeInHL.png"
alt="图片加载失败"
class="logo2"
/>
</div>
<div class="homepage-right-group">
<div class="count-badge" @click="showCount">
<img
src="src\assets\img\homePage\get-count-all.png"
class="action-btn"
/>
<div class="count-number">1000次</div>
</div>
<img
src="src\assets\img\homePage\announcement.png"
class="announcement-btn action-btn"
@click="showAnnouncement"
/>
</div>
</el-header>
<!-- 主体部分：小人 问题轮询图 对话内容 -->
<el-main class="homepage-body">
<div class="main-wrapper">
<section class="tab-section">
<div class="tab-container">
<div
v-for="(tab, index) in tabs"
:key="tab.name"
@click="setActiveTab(tab.name, index)"
:class="['tab-item', { active: activeIndex === index }]"
>
<span>{{ tab.label }}</span>
</div>
</div>
</section>
<div class="tab-content" ref="tabContent">
<component
:is="activeComponent"
:messages="messages"
@updateMessage="updateMessage"
@sendMessage="sendMessage"
/>
</div>
</div>
</el-main>
<!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
<el-footer class="homepage-footer">
<!-- 第一行按钮 -->
<div class="footer-first-line">
<div class="left-group">
<img
v-if="isThinking"
src="src\assets\img\homePage\tail\think-active.png"
@click="toggleThink"
class="action-btn"
/>
<img
v-else
src="src\assets\img\homePage\tail\think-no-active.png"
@click="toggleThink"
class="action-btn"
/>
<img
src="src\assets\img\homePage\tail\language.png"
@click="changeLanguage"
class="action-btn"
/>
<img
src="src\assets\img\homePage\tail\voice.png"
@click="toggleVoice"
class="action-btn"
/>
</div>
<img
src="src\assets\img\homePage\tail\send.png"
@click="sendMessage"
class="action-btn send-btn"
/>
</div>
<!-- 第二行输入框 -->
<div class="footer-second-line">
<img src="src\assets\img\homePage\tail\msg.png" class="msg-icon" />
<el-input
type="textarea"
v-model="message"
:autosize="{ minRows: 1, maxRows: 4 }"
placeholder="给AI小财神发消息..."
class="msg-input"
@keydown.enter.exact.prevent="isLoading ? null : sendMessage()"
resize="none"
>
</el-input>
</div>
</el-footer>
</el-container>
<!-- 弹窗 -->
<!-- 新增弹窗组件 -->
<el-dialog v-model="dialogVisible" width="500">
<!-- 自定义标题插槽，实现居中显示 -->
<template #header>
<div style="text-align: center">
<span>活动规则</span>
</div>
</template>
<!-- 中间内容部分 -->
<p>
活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
</p>
<template #footer>
<!-- 添加一个div来包裹按钮，并设置样式使其居中 -->
<div style="text-align: center">
<el-button
style="background-color: orange; color: white; border: none"
@click="dialogVisible = false"
>
去充值
</el-button>
</div>
</template>
</el-dialog>
</div>
</template> </template>
<style scoped> <style scoped>
/* 标签栏 */ /* 标签栏 */
.tab-container { .tab-container {
display: flex;
gap: 30px;
margin-bottom: 10px;
padding: 0 20px;
justify-content: flex-end;
/* 新增右对齐 */
display: flex;
gap: 30px;
margin-bottom: 10px;
padding: 0 20px;
justify-content: flex-end;
/* 新增右对齐 */
} }
.tab-item { .tab-item {
cursor: pointer;
padding: 8px 12px;
font-size: clamp(18px, 3vw, 20px);
color: #999;
transition: all 0.3s;
border-bottom: 2px solid transparent;
font-weight: bold;
cursor: pointer;
padding: 8px 12px;
font-size: clamp(18px, 3vw, 20px);
color: #999;
transition: all 0.3s;
border-bottom: 2px solid transparent;
font-weight: bold;
} }
.tab-item.active { .tab-item.active {
color: #000;
border-color: #000;
color: #000;
border-color: #000;
} }
.tab-item:not(.active):hover { .tab-item:not(.active):hover {
color: #666;
color: #666;
} }
.tab-content { .tab-content {
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth; /* 添加平滑滚动效果 */
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth; /* 添加平滑滚动效果 */
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.tab-container {
gap: 15px;
padding: 0 10px;
}
.tab-container {
gap: 15px;
padding: 0 10px;
}
.tab-item {
font-size: clamp(14px, 3vw, 16px);
padding: 6px 10px;
}
.tab-item {
font-size: clamp(14px, 3vw, 16px);
padding: 6px 10px;
}
} }
</style> </style>
<style scoped> <style scoped>
.homepage { .homepage {
height: 100vh;
margin: 0 auto;
background-image: url(src/assets/img/homePage/bk.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
display: flex;
height: 100vh;
margin: 0 auto;
background-image: url(src/assets/img/homePage/bk.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
display: flex;
} }
.homepage .el-container { .homepage .el-container {
height: 100%;
flex-direction: column;
/* 明确纵向排列 */
display: flex;
overflow: hidden;
height: 100%;
flex-direction: column;
/* 明确纵向排列 */
display: flex;
overflow: hidden;
} }
.el-container .el-header { .el-container .el-header {
height: 10%;
/* 设置头部高度 */
margin-top: 5px;
height: 10%;
/* 设置头部高度 */
margin-top: 5px;
} }
.el-container .el-main { .el-container .el-main {
overflow-y: hidden;
overflow-x: hidden;
/* 新增滚动条 */
flex: 1 1 0%;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: #888 transparent;
overflow-y: hidden;
overflow-x: hidden;
/* 新增滚动条 */
flex: 1 1 0%;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: #888 transparent;
} }
.el-container .el-footer { .el-container .el-footer {
/* height: 11%; */
height: auto;
min-height: 70px;
gap: 5px;
margin-top: 0;
/* height: 11%; */
height: auto;
min-height: 70px;
gap: 5px;
margin-top: 0;
} }
.homepage-head { .homepage-head {
padding: 0px;
/* 启用 flex 布局 */
display: flex;
position: relative;
/* 左右分开布局 */
justify-content: space-between;
padding: 0px;
/* 启用 flex 布局 */
display: flex;
position: relative;
/* 左右分开布局 */
justify-content: space-between;
} }
.homepage-right-group { .homepage-right-group {
display: flex;
gap: 8px;
align-items: center;
margin-left: auto;
margin-right: 20px;
display: flex;
gap: 8px;
align-items: center;
margin-left: auto;
margin-right: 20px;
} }
.homepage-right-group .action-btn { .homepage-right-group .action-btn {
height: 40px;
height: 40px;
} }
.homepage-right-group .count-badge { .homepage-right-group .count-badge {
position: relative;
cursor: pointer;
position: relative;
cursor: pointer;
} }
.homepage-right-group .count-badge .count-number { .homepage-right-group .count-badge .count-number {
position: absolute;
top: 6px;
right: 29px;
color: #573dfc;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 6px;
right: 29px;
color: #573dfc;
font-size: 12px;
font-weight: bold;
} }
.homepage-right-group .announcement-btn { .homepage-right-group .announcement-btn {
cursor: pointer;
transition: transform 0.2s;
cursor: pointer;
transition: transform 0.2s;
} }
.homepage-right-group .announcement-btn:hover { .homepage-right-group .announcement-btn:hover {
transform: scale(1.05);
transform: scale(1.05);
} }
.homepage-body { .homepage-body {
padding: 0px;
height: calc(100% - 70px);
/* 根据底部高度调整 */
padding: 0px;
height: calc(100% - 70px);
/* 根据底部高度调整 */
} }
.main-wrapper { .main-wrapper {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
} }
.tab-section { .tab-section {
flex-shrink: 0;
/* 禁止伸缩 */
flex-shrink: 0;
/* 禁止伸缩 */
} }
.tab-content { .tab-content {
flex: 1;
overflow-y: auto;
min-height: 0;
/* 关键：允许内容收缩 */
flex: 1;
overflow-y: auto;
min-height: 0;
/* 关键：允许内容收缩 */
} }
.homepage-logo { .homepage-logo {
height: 100%;
/* 改为根据内容自适应 */
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 固定左间距 */
margin-left: 20px;
margin-right: auto;
/* 新增相对定位 */
position: relative;
height: 100%;
/* 改为根据内容自适应 */
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 固定左间距 */
margin-left: 20px;
margin-right: auto;
/* 新增相对定位 */
position: relative;
} }
/* 新增媒体查询适配小屏幕 */ /* 新增媒体查询适配小屏幕 */
@media (max-width: 768px) { @media (max-width: 768px) {
.homepage-logo {
margin-left: 10px;
left: 0;
}
.homepage-logo {
margin-left: 10px;
left: 0;
}
} }
.logo1 { .logo1 {
width: 120px;
/* 固定 logo1 尺寸 */
height: auto;
margin-bottom: 8px;
/* 添加间距 */
width: 120px;
/* 固定 logo1 尺寸 */
height: auto;
margin-bottom: 8px;
/* 添加间距 */
} }
.logo2 { .logo2 {
width: 80px;
/* 缩小 logo2 尺寸 */
height: auto;
width: 80px;
/* 缩小 logo2 尺寸 */
height: auto;
} }
/* 尾部 */ /* 尾部 */
.homepage-footer { .homepage-footer {
display: flex;
flex-direction: column;
gap: 5px;
/* margin-top: auto; */
margin-bottom: 20px;
flex-shrink: 0;
height: auto;
display: flex;
flex-direction: column;
gap: 5px;
/* margin-top: auto; */
margin-bottom: 20px;
flex-shrink: 0;
height: auto;
} }
.footer-first-line { .footer-first-line {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: auto;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: auto;
flex-shrink: 0;
} }
.left-group { .left-group {
display: flex;
gap: 15px;
display: flex;
gap: 15px;
} }
.action-btn { .action-btn {
cursor: pointer;
transition: transform 0.2s;
height: 28px;
cursor: pointer;
transition: transform 0.2s;
height: 28px;
} }
.action-btn:hover { .action-btn:hover {
transform: scale(1.05);
transform: scale(1.05);
} }
.send-btn { .send-btn {
margin-left: auto;
margin-right: 5px;
margin-left: auto;
margin-right: 5px;
} }
.footer-second-line { .footer-second-line {
position: relative;
display: flex;
height: auto;
align-items: flex-end;
flex: 1;
margin-top: auto;
min-height: 34px;
position: relative;
display: flex;
height: auto;
align-items: flex-end;
flex: 1;
margin-top: auto;
min-height: 34px;
} }
.msg-icon { .msg-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 1;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 1;
} }
.msg-input:deep(.el-textarea__inner) { .msg-input:deep(.el-textarea__inner) {
border: none !important;
box-shadow: none !important;
overflow-y: auto !important;
/* 强制显示滚动条 */
transition: all 0.2s ease-out;
/* 添加过渡效果 */
border: none !important;
box-shadow: none !important;
overflow-y: auto !important;
/* 强制显示滚动条 */
transition: all 0.2s ease-out;
/* 添加过渡效果 */
} }
/* .msg-input:deep(.el-textarea__inner:focus) { /* .msg-input:deep(.el-textarea__inner:focus) {
@ -429,40 +551,38 @@ onMounted(() => {
box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3) !important; box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3) !important;
} */ } */
.msg-input { .msg-input {
min-height: 34px;
max-height: 120px;
width: calc(100% - 65px);
min-height: 34px;
max-height: 120px;
width: calc(100% - 65px);
border-radius: 20px;
padding: 0px 20px 0 45px;
font-size: 16px;
transition: height 0.2s ease-out;
/* 添加高度过渡效果 */
overflow-y: hidden;
/* 隐藏垂直滚动条 */
box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3);
background: #fff;
border-radius: 20px;
padding: 0px 20px 0 45px;
font-size: 16px;
transition: height 0.2s ease-out;
/* 添加高度过渡效果 */
overflow-y: hidden;
/* 隐藏垂直滚动条 */
box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3);
background: #fff;
} }
.msg-input:focus { .msg-input:focus {
outline: none;
outline: none;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.action-btn {
height: 28px;
}
.action-btn {
height: 28px;
}
.footer-second-line {
height: 50px;
}
.footer-second-line {
height: 50px;
}
.msg-input {
font-size: 16px;
}
.msg-input {
font-size: 16px;
}
} }
</style>
</style>
Write Preview
Loading…
Cancel
Save