hongxilin
4 months ago
commit
523ef9ce7b
3 changed files with 753 additions and 0 deletions
@ -0,0 +1,201 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, watch, nextTick } from 'vue' |
||||
|
import { ElDialog } from 'element-plus' |
||||
|
import { getReplyStreamAPI } from '../api/AIxiaocaishen' |
||||
|
|
||||
|
// 随机GIF |
||||
|
const currentGif = ref('') |
||||
|
|
||||
|
// 新闻飘屏数据 |
||||
|
const newsList = ref(Array(10).fill().map((_, i) => ({ |
||||
|
title: `引导提出问题 ${i + 1}`, |
||||
|
content: `新闻 ${i + 1} 的详细内容...` |
||||
|
}))) |
||||
|
|
||||
|
|
||||
|
// 弹窗控制 |
||||
|
const dialogVisible = ref(false) |
||||
|
const currentNews = ref('') |
||||
|
const showNews = (news) => { |
||||
|
currentNews.value = news |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
// 获取消息 |
||||
|
const props = defineProps({ |
||||
|
messages: Array, |
||||
|
}) |
||||
|
|
||||
|
watch(() => props.messages, async (newVal, oldVal) => { |
||||
|
console.log('消息列表已更新，最新消息:', newVal[newVal.length - 1]) |
||||
|
// 在此处添加需要执行的逻辑 |
||||
|
const response = await getReplyStreamAPI({ |
||||
|
"workflow_id": "7480464341100494863", |
||||
|
"parameters": { |
||||
|
"input": newVal[newVal.length - 1].content |
||||
|
} |
||||
|
}); |
||||
|
const reader = response.body.getReader(); |
||||
|
|
||||
|
console.log(response, 'response') |
||||
|
console.log(reader, 'reader') |
||||
|
|
||||
|
}, { deep: true, immediate: true }) |
||||
|
|
||||
|
// 初始化随机GIF |
||||
|
onMounted(() => { |
||||
|
const random = Math.floor(Math.random() * 4) + 1 |
||||
|
console.log(random, 'random') |
||||
|
currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif` |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
<!-- 消息区域 --> |
||||
|
<div class="message-area"> |
||||
|
<div v-for="(msg, index) in messages" :key="index" :class="['message-bubble', msg.sender]"> |
||||
|
{{ msg.content }} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 新闻弹窗 --> |
||||
|
<el-dialog v-model="dialogVisible" title="新闻详情" width="60%"> |
||||
|
<p>{{ currentNews.content }}</p> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.chat-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.gif-area { |
||||
|
/* position: relative; */ |
||||
|
height: 30vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.gif-area img { |
||||
|
width: 30%; |
||||
|
/* 改为百分比单位 */ |
||||
|
min-width: 200px; |
||||
|
/* 最小尺寸 */ |
||||
|
max-width: 400px; |
||||
|
/* 最大尺寸 */ |
||||
|
height: auto; |
||||
|
left: 50%; |
||||
|
transition: all 0.3s; |
||||
|
/* 添加过渡效果 */ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.marquee-container { |
||||
|
/* position: absolute; */ |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.marquee-row { |
||||
|
white-space: nowrap; |
||||
|
overflow: visible; |
||||
|
padding: 8px 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.top { |
||||
|
animation: marquee 15s linear infinite; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
animation: marquee 15s linear infinite reverse; |
||||
|
} |
||||
|
|
||||
|
@keyframes marquee { |
||||
|
0% { |
||||
|
transform: translateX(100%); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: translateX(-150%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message-area { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.message-bubble { |
||||
|
max-width: 70%; |
||||
|
margin: 10px 20px; |
||||
|
padding: 15px 25px; |
||||
|
border-radius: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.message-bubble.user { |
||||
|
background: #8263f0; |
||||
|
color: white; |
||||
|
margin-left: auto; |
||||
|
/* border-bottom-right-radius: 5px; */ |
||||
|
} |
||||
|
|
||||
|
.message-bubble.ai { |
||||
|
background: #f0f0f0; |
||||
|
color: #333; |
||||
|
margin-right: auto; |
||||
|
border-bottom-left-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.message-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,84 @@ |
|||||
|
<script setup> |
||||
|
import { ref } from 'vue' |
||||
|
// 新闻飘屏数据 |
||||
|
const newsList = ref(Array(10).fill().map((_, i) => ({ |
||||
|
title: `每日资讯 ${i + 1}`, |
||||
|
content: `资讯 ${i + 1} 的详细内容...` |
||||
|
}))) |
||||
|
|
||||
|
// 弹窗控制 |
||||
|
const dialogVisible = ref(false) |
||||
|
const currentNews = ref('') |
||||
|
const showNews = (news) => { |
||||
|
currentNews.value = news |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="news-container"> |
||||
|
<el-text v-for="(news, index) in newsList" :key="index" class="news-item" @click="showNews(news)"> |
||||
|
{{ news.title }} |
||||
|
</el-text> |
||||
|
|
||||
|
<el-text class="daily-item"> |
||||
|
<span>【</span> |
||||
|
<span class="purple-text">每日复盘</span> |
||||
|
<span>】 即将上线，</span> |
||||
|
<br> |
||||
|
<span>敬请期待！</span> |
||||
|
</el-text> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 新闻弹窗 --> |
||||
|
<el-dialog v-model="dialogVisible" title="每日资讯详情" width="60%" > |
||||
|
<p>{{ currentNews.content }}</p> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.news-container { |
||||
|
height: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
/* 水平居中 */ |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.news-item { |
||||
|
width: 60%; |
||||
|
/* 拉长宽度 */ |
||||
|
padding: 10px; |
||||
|
border: 2px solid #af84e0 !important; |
||||
|
/* 紫色边框 */ |
||||
|
border-radius: 4px; |
||||
|
text-align: center; |
||||
|
/* 文字居中 */ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
/* 响应式调整 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.news-item { |
||||
|
width: 60%; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.purple-text { |
||||
|
color: #7315df !important; |
||||
|
} |
||||
|
|
||||
|
.daily-item { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
line-height: 1.8; |
||||
|
white-space: nowrap; |
||||
|
text-align: center; |
||||
|
/* 保持首行不换行 */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,468 @@ |
|||||
|
<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' |
||||
|
// 变量 |
||||
|
// 将默认值改为从 sessionStorage 中获取，如果没有则使用默认值 'aifindCow'为第一个默认tab |
||||
|
const activeTab = ref(sessionStorage.getItem('activeTabAI') || 'AIchat') |
||||
|
const activeIndex = ref(parseInt(sessionStorage.getItem('activeIndexAI') || '0')) |
||||
|
|
||||
|
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')) // 给父组件发送窗口高度 |
||||
|
} |
||||
|
// 跳转 |
||||
|
const activeComponent = computed(() => { |
||||
|
return activeTab.value === 'AIchat' ? AIchat : AIfind |
||||
|
}) |
||||
|
|
||||
|
// 获取次数 |
||||
|
const getCount = () => { |
||||
|
console.log('获取次数') |
||||
|
} |
||||
|
|
||||
|
// 深度思考 |
||||
|
const isThinking = ref(false) |
||||
|
const toggleThink = () => { |
||||
|
isThinking.value = !isThinking.value |
||||
|
} |
||||
|
|
||||
|
// 发送消息 |
||||
|
const message = ref(''); |
||||
|
// 传输对象 |
||||
|
const messages = ref([]) |
||||
|
// 信息加载状态 |
||||
|
const isLoading = ref(false) |
||||
|
// 在 sendMessage 方法中添加触发逻辑 |
||||
|
const triggerFetch = ref(false) |
||||
|
|
||||
|
const sendMessage = async () => { |
||||
|
if (!message.value) return |
||||
|
if (isLoading.value) return |
||||
|
|
||||
|
// 添加用户消息 |
||||
|
messages.value.push({ |
||||
|
sender: 'user', |
||||
|
content: message.value, |
||||
|
timestamp: new Date().toISOString() |
||||
|
}) |
||||
|
|
||||
|
// 重置消息输入框 |
||||
|
message.value = '' |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 公告 |
||||
|
const showAnnouncement = () => { |
||||
|
console.log('打开公告') |
||||
|
} |
||||
|
// 获取次数 |
||||
|
const showCount = () => { |
||||
|
console.log('显示剩余次数') |
||||
|
} |
||||
|
|
||||
|
// 保证发送消息时，滚动屏在底部 |
||||
|
const tabContent = ref(null) |
||||
|
watch(messages, async () => { |
||||
|
await nextTick() |
||||
|
if (tabContent.value) { |
||||
|
tabContent.value.scrollTop = tabContent.value.scrollHeight |
||||
|
} |
||||
|
}, { deep: true, immediate: true }) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
setHeight(document.getElementById('testId')) // 给父组件发送窗口高度 |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<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> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 标签栏 */ |
||||
|
.tab-container { |
||||
|
display: flex; |
||||
|
gap: 30px; |
||||
|
margin-bottom: 10px; |
||||
|
padding: 0 20px; |
||||
|
justify-content: flex-end; |
||||
|
/* 新增右对齐 */ |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active { |
||||
|
color: #000; |
||||
|
border-color: #000; |
||||
|
} |
||||
|
|
||||
|
.tab-item:not(.active):hover { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.tab-content { |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
scroll-behavior: smooth; /* 添加平滑滚动效果 */ |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.tab-container { |
||||
|
gap: 15px; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
font-size: clamp(14px, 3vw, 16px); |
||||
|
padding: 6px 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.homepage .el-container { |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
/* 明确纵向排列 */ |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.el-container .el-header { |
||||
|
height: 10%; |
||||
|
/* 设置头部高度 */ |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.el-container .el-main { |
||||
|
overflow-y: hidden; |
||||
|
overflow-x: hidden; |
||||
|
/* 新增滚动条 */ |
||||
|
flex: 1 1 0%; |
||||
|
min-height: 0; |
||||
|
scrollbar-width: thin; |
||||
|
scrollbar-color: #888 transparent; |
||||
|
} |
||||
|
|
||||
|
.el-container .el-footer { |
||||
|
/* height: 11%; */ |
||||
|
height: auto; |
||||
|
min-height: 70px; |
||||
|
gap: 5px; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
.homepage-head { |
||||
|
padding: 0px; |
||||
|
/* 启用 flex 布局 */ |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
/* 左右分开布局 */ |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
align-items: center; |
||||
|
margin-left: auto; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group .action-btn { |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group .count-badge { |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group .count-badge .count-number { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
right: 29px; |
||||
|
color: #573dfc; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group .announcement-btn { |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.2s; |
||||
|
} |
||||
|
|
||||
|
.homepage-right-group .announcement-btn:hover { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
.homepage-body { |
||||
|
padding: 0px; |
||||
|
height: calc(100% - 70px); |
||||
|
/* 根据底部高度调整 */ |
||||
|
} |
||||
|
|
||||
|
.main-wrapper { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.tab-section { |
||||
|
flex-shrink: 0; |
||||
|
/* 禁止伸缩 */ |
||||
|
} |
||||
|
|
||||
|
.tab-content { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
min-height: 0; |
||||
|
/* 关键：允许内容收缩 */ |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/* 新增媒体查询适配小屏幕 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.homepage-logo { |
||||
|
margin-left: 10px; |
||||
|
left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.logo1 { |
||||
|
width: 120px; |
||||
|
/* 固定 logo1 尺寸 */ |
||||
|
height: auto; |
||||
|
margin-bottom: 8px; |
||||
|
/* 添加间距 */ |
||||
|
} |
||||
|
|
||||
|
.logo2 { |
||||
|
width: 80px; |
||||
|
/* 缩小 logo2 尺寸 */ |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 尾部 */ |
||||
|
.homepage-footer { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 5px; |
||||
|
/* margin-top: auto; */ |
||||
|
margin-bottom: 20px; |
||||
|
flex-shrink: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.footer-first-line { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: auto; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.left-group { |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.2s; |
||||
|
height: 28px; |
||||
|
} |
||||
|
|
||||
|
.action-btn:hover { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
.send-btn { |
||||
|
margin-left: auto; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.footer-second-line { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
height: auto; |
||||
|
align-items: flex-end; |
||||
|
flex: 1; |
||||
|
margin-top: auto; |
||||
|
min-height: 34px; |
||||
|
} |
||||
|
|
||||
|
.msg-icon { |
||||
|
position: absolute; |
||||
|
left: 12px; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
width: 24px; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.msg-input:deep(.el-textarea__inner) { |
||||
|
border: none !important; |
||||
|
box-shadow: none !important; |
||||
|
overflow-y: auto !important; |
||||
|
/* 强制显示滚动条 */ |
||||
|
transition: all 0.2s ease-out; |
||||
|
/* 添加过渡效果 */ |
||||
|
} |
||||
|
|
||||
|
/* .msg-input:deep(.el-textarea__inner:focus) { |
||||
|
border: none !important; |
||||
|
box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3) !important; |
||||
|
} */ |
||||
|
|
||||
|
|
||||
|
.msg-input { |
||||
|
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; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.msg-input:focus { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.action-btn { |
||||
|
height: 28px; |
||||
|
} |
||||
|
|
||||
|
.footer-second-line { |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.msg-input { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue