|
|
|
|
@ -2,12 +2,7 @@
|
|
|
|
|
<view class="debate-component">
|
|
|
|
|
<!-- 动态背景元素 -->
|
|
|
|
|
<view class="animated-bg">
|
|
|
|
|
<view
|
|
|
|
|
v-for="i in 6"
|
|
|
|
|
:key="i"
|
|
|
|
|
class="bg-circle"
|
|
|
|
|
:style="getRandomCircleStyle()"
|
|
|
|
|
></view>
|
|
|
|
|
<view v-for="i in 6" :key="i" class="bg-circle" :style="getRandomCircleStyle()"></view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 顶部卡片 - 可收缩 -->
|
|
|
|
|
@ -15,27 +10,18 @@
|
|
|
|
|
<view class="card-header" @click="toggleCard">
|
|
|
|
|
<view class="card-icon-wrapper">
|
|
|
|
|
<view class="card-icon">
|
|
|
|
|
<image
|
|
|
|
|
src="/static/icons/robot-2-line.png"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
></image>
|
|
|
|
|
<image src="/static/icons/robot-2-line.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card-text">
|
|
|
|
|
<view class="card-title">模拟辩论</view>
|
|
|
|
|
<view class="card-content" v-if="!isCardCollapsed"
|
|
|
|
|
>与AI进行实时辩论对练，提升应变能力</view
|
|
|
|
|
>
|
|
|
|
|
<view class="card-content" v-if="!isCardCollapsed">与AI进行实时辩论对练，提升应变能力</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="collapse-icon">
|
|
|
|
|
<image
|
|
|
|
|
:src="
|
|
|
|
|
isCardCollapsed
|
|
|
|
|
<image :src="isCardCollapsed
|
|
|
|
|
? '/static/icons/arrow-down-s-line.png'
|
|
|
|
|
: '/static/icons/arrow-up-s-line.png'
|
|
|
|
|
"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
></image>
|
|
|
|
|
" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -43,32 +29,17 @@
|
|
|
|
|
<!-- 辩论主题选择器 -->
|
|
|
|
|
<view class="topic-selector" v-if="!isCardCollapsed">
|
|
|
|
|
<scroll-view scroll-x class="topic-scroll" show-scrollbar="false">
|
|
|
|
|
<view
|
|
|
|
|
v-for="(topic, idx) in debateTopics"
|
|
|
|
|
:key="idx"
|
|
|
|
|
:class="['topic-pill', { active: selectedTopic === idx }]"
|
|
|
|
|
@click="selectTopic(idx)"
|
|
|
|
|
>
|
|
|
|
|
<view v-for="(topic, idx) in debateTopics" :key="idx" :class="['topic-pill', { active: selectedTopic === idx }]"
|
|
|
|
|
@click="selectTopic(idx)">
|
|
|
|
|
{{ topic }}
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 聊天展示区 -->
|
|
|
|
|
<scroll-view
|
|
|
|
|
class="chat-area"
|
|
|
|
|
scroll-y
|
|
|
|
|
:scroll-into-view="scrollToView"
|
|
|
|
|
scroll-with-animation
|
|
|
|
|
>
|
|
|
|
|
<view
|
|
|
|
|
v-for="(msg, index) in messages"
|
|
|
|
|
:key="index"
|
|
|
|
|
:id="'msg' + index"
|
|
|
|
|
class="chat-message"
|
|
|
|
|
:class="msg.role === 'user' ? 'from-user' : 'from-ai'"
|
|
|
|
|
@longpress="onLongPress()"
|
|
|
|
|
>
|
|
|
|
|
<scroll-view class="chat-area" scroll-y :scroll-into-view="scrollToView" scroll-with-animation>
|
|
|
|
|
<view v-for="(msg, index) in messages" :key="index" :id="'msg' + index" class="chat-message"
|
|
|
|
|
:class="msg.role === 'user' ? 'from-user' : 'from-ai'" @longpress="onLongPress()">
|
|
|
|
|
<view class="avatar" v-if="msg.role === 'ai'">AI</view>
|
|
|
|
|
<view class="bubble">
|
|
|
|
|
<block v-if="msg.loading">
|
|
|
|
|
@ -86,22 +57,37 @@
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
<!-- 轮数选择与进度条区域 -->
|
|
|
|
|
<view class="rounds-control" :class="{ 'rounds-selected': debateRounds > 0 }">
|
|
|
|
|
<!-- 未选择轮数时，显示选择按钮 -->
|
|
|
|
|
<view v-if="roundsSelected === false" class="select-rounds-btn" @click="showRoundsPopup = true">
|
|
|
|
|
<image src="/static/icons/repeat-line.png" mode="aspectFit"></image>
|
|
|
|
|
<text>选择辩论轮数</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 已选择轮数时，显示进度条 -->
|
|
|
|
|
<view v-else class="rounds-selected-container">
|
|
|
|
|
<view class="rounds-label" @click="showRoundsPopup = true">
|
|
|
|
|
<image src="/static/icons/repeat-line.png" mode="aspectFit"></image>
|
|
|
|
|
<text>{{ debateRounds }}回合</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="progress-container">
|
|
|
|
|
<view class="progress-bar">
|
|
|
|
|
<view class="progress-inner" :style="{ width: progressPercentage + '%' }"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="rounds-counter">{{ currentRound }}/{{ debateRounds }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 输入框与发送按钮 -->
|
|
|
|
|
<view class="chat-input">
|
|
|
|
|
<view class="input-group">
|
|
|
|
|
<view class="textarea-container">
|
|
|
|
|
<textarea
|
|
|
|
|
class="textarea-box"
|
|
|
|
|
v-model="content"
|
|
|
|
|
placeholder="输入你的辩论观点，与AI进行思辨交锋"
|
|
|
|
|
auto-height
|
|
|
|
|
maxlength="1000"
|
|
|
|
|
/>
|
|
|
|
|
<textarea class="textarea-box" v-model="content" placeholder="输入你的辩论观点，与AI进行思辨交锋" auto-height
|
|
|
|
|
maxlength="1000" />
|
|
|
|
|
<button class="send-button-embedded" @click="sendMessage()">
|
|
|
|
|
<image
|
|
|
|
|
src="/static/icons/send-plane-fill.png"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
></image>
|
|
|
|
|
<image src="/static/icons/send-plane-fill.png" mode="aspectFit"></image>
|
|
|
|
|
</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -110,13 +96,40 @@
|
|
|
|
|
<!-- 底部安全区域 -->
|
|
|
|
|
<view class="safe-area-bottom"></view>
|
|
|
|
|
|
|
|
|
|
<Popup
|
|
|
|
|
:visible="showSheet"
|
|
|
|
|
buttonText="开始复盘"
|
|
|
|
|
buttonIcon="🧠"
|
|
|
|
|
@close="showSheet = false"
|
|
|
|
|
@click="handleSheetClick"
|
|
|
|
|
/>
|
|
|
|
|
<Popup :visible="showSheet" buttonText="开始复盘" buttonIcon="🧠" @close="showSheet = false"
|
|
|
|
|
@click="handleSheetClick" />
|
|
|
|
|
|
|
|
|
|
<!-- 轮数选择弹窗 -->
|
|
|
|
|
<view v-if="showRoundsPopup" class="rounds-popup-mask" @click="showRoundsPopup = false">
|
|
|
|
|
<view class="rounds-popup" @click.stop>
|
|
|
|
|
<view class="popup-header">
|
|
|
|
|
<view class="popup-title">选择辩论轮数</view>
|
|
|
|
|
<view class="close-icon" @click="showRoundsPopup = false">
|
|
|
|
|
<image src="/static/icons/close-line.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="rounds-options">
|
|
|
|
|
<view class="round-option" :class="{ selected: selectedOption === 1 }" @click="selectRounds(1)">
|
|
|
|
|
<view class="option-icon">⚡</view>
|
|
|
|
|
<view class="option-text">
|
|
|
|
|
<view class="option-title">快速交锋</view>
|
|
|
|
|
<view class="option-desc">10回合 · 适合快速练习</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="round-option" :class="{ selected: selectedOption === 2 }" @click="selectRounds(2)">
|
|
|
|
|
<view class="option-icon">🔍</view>
|
|
|
|
|
<view class="option-text">
|
|
|
|
|
<view class="option-title">深度辩论</view>
|
|
|
|
|
<view class="option-desc">20回合 · 深入探讨话题</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<button class="confirm-button" @click="confirmRounds">开始辩论</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -136,7 +149,14 @@ export default {
|
|
|
|
|
mounted() {
|
|
|
|
|
const pinia = this.$pinia;
|
|
|
|
|
const store = useArgumentStore(pinia);
|
|
|
|
|
if (store.selectedArgument && store.selectedArgument.content) {
|
|
|
|
|
this.content = store.selectedArgument.content;
|
|
|
|
|
} else {
|
|
|
|
|
this.content = "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面加载时显示轮数选择弹窗
|
|
|
|
|
this.showRoundsPopup = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
@ -151,6 +171,14 @@ export default {
|
|
|
|
|
"在这里你可以和我进行辩论，现在，辩论开始！请选择一个话题或提出你想讨论的观点。",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
// 新增辩论轮数相关数据
|
|
|
|
|
showRoundsPopup: false, // 控制弹窗显示
|
|
|
|
|
roundsSelected: false, // 是否已选择轮数
|
|
|
|
|
debateRounds: 0, // 辩论轮数
|
|
|
|
|
currentRound: 0, // 当前轮数
|
|
|
|
|
selectedOption: 0, // 选中的轮数选项
|
|
|
|
|
|
|
|
|
|
scrollToView: "",
|
|
|
|
|
content: "",
|
|
|
|
|
debateTopics: [
|
|
|
|
|
@ -165,6 +193,14 @@ export default {
|
|
|
|
|
isCardCollapsed: false, // 控制卡片是否收缩
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// 计算进度条的百分比
|
|
|
|
|
progressPercentage() {
|
|
|
|
|
if (this.debateRounds === 0) return 0;
|
|
|
|
|
return (this.currentRound / this.debateRounds) * 100;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
handleSheetClick() {
|
|
|
|
|
const pinia = this.$pinia;
|
|
|
|
|
@ -244,7 +280,28 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async sendMessage() {
|
|
|
|
|
if (!this.content.trim()) return;
|
|
|
|
|
// 检查是否选择轮数
|
|
|
|
|
if (!this.roundsSelected) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: "请选择辩论轮数",
|
|
|
|
|
icon: "none",
|
|
|
|
|
duration: 2000,
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 检查是否达到最大轮数
|
|
|
|
|
if (this.currentRound >= this.debateRounds) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: "辩论轮数已达上限",
|
|
|
|
|
icon: "none",
|
|
|
|
|
duration: 2000,
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新判断条件，增加轮数限制
|
|
|
|
|
if (!this.content.trim() || this.currentRound >= this.debateRounds) return;
|
|
|
|
|
|
|
|
|
|
// 添加用户消息
|
|
|
|
|
this.messages.push({
|
|
|
|
|
@ -279,6 +336,20 @@ export default {
|
|
|
|
|
// 替换 loading 消息为真实 AI 回答
|
|
|
|
|
this.messages.splice(aiIndex, 1, { role: "ai", content: reply });
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
|
|
|
|
|
//-----------辩论轮数设置-----------
|
|
|
|
|
// 增加当前轮数
|
|
|
|
|
this.currentRound++;
|
|
|
|
|
|
|
|
|
|
// 检查是否到达最大轮数
|
|
|
|
|
if (this.currentRound >= this.debateRounds) {
|
|
|
|
|
this.messages.push({
|
|
|
|
|
role: "ai",
|
|
|
|
|
content: `本轮辩论已完成（${this.debateRounds}回合）。您可以点击消息进行复盘分析。`,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async callAI(history, content) {
|
|
|
|
|
@ -320,6 +391,50 @@ export default {
|
|
|
|
|
this.scrollToView = "msg" + (this.messages.length - 1);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 选择轮数类型
|
|
|
|
|
selectRounds(type) {
|
|
|
|
|
this.selectedOption = type;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 确定轮数选择
|
|
|
|
|
confirmRounds() {
|
|
|
|
|
if (this.selectedOption === 0) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请选择轮数',
|
|
|
|
|
icon: 'none',
|
|
|
|
|
duration: 2000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 已选择轮数
|
|
|
|
|
if (this.roundsSelected) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '已选择轮数',
|
|
|
|
|
icon: 'none',
|
|
|
|
|
duration: 2000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//设置轮数
|
|
|
|
|
if (this.selectedOption === 1) {
|
|
|
|
|
this.debateRounds = 10;
|
|
|
|
|
} else if (this.selectedOption === 2) {
|
|
|
|
|
this.debateRounds = 20;
|
|
|
|
|
}
|
|
|
|
|
this.currentRound = 0;
|
|
|
|
|
this.roundsSelected = true;
|
|
|
|
|
this.showRoundsPopup = false;
|
|
|
|
|
|
|
|
|
|
// 更新系统信息
|
|
|
|
|
this.message = [{
|
|
|
|
|
role: 'ai',
|
|
|
|
|
content: `已选择 ${this.debateRounds} 回合辩论！请分享你的观点，我们开始吧！`
|
|
|
|
|
}];
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -334,7 +449,8 @@ export default {
|
|
|
|
|
background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
|
|
|
|
|
padding-bottom: 180rpx;
|
|
|
|
|
/* 为底部TabBar留出空间 */
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -352,11 +468,9 @@ export default {
|
|
|
|
|
.bg-circle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
135deg,
|
|
|
|
|
background: linear-gradient(135deg,
|
|
|
|
|
rgba(255, 255, 255, 0.05),
|
|
|
|
|
rgba(255, 255, 255, 0.02)
|
|
|
|
|
);
|
|
|
|
|
rgba(255, 255, 255, 0.02));
|
|
|
|
|
animation: float 20s infinite ease-in-out;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
/* 添加过渡效果 */
|
|
|
|
|
@ -364,16 +478,20 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes float {
|
|
|
|
|
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
transform: translate(0, 0) scale(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
25% {
|
|
|
|
|
transform: translate(5%, 10%) scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
transform: translate(10%, 5%) scale(0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
75% {
|
|
|
|
|
transform: translate(5%, 15%) scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
@ -426,6 +544,7 @@ export default {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(-30rpx);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
@ -462,12 +581,10 @@ export default {
|
|
|
|
|
left: -50%;
|
|
|
|
|
width: 200%;
|
|
|
|
|
height: 200%;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
to bottom right,
|
|
|
|
|
background: linear-gradient(to bottom right,
|
|
|
|
|
rgba(255, 255, 255, 0) 0%,
|
|
|
|
|
rgba(255, 255, 255, 0.1) 50%,
|
|
|
|
|
rgba(255, 255, 255, 0) 100%
|
|
|
|
|
);
|
|
|
|
|
rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
animation: shine 3s infinite;
|
|
|
|
|
}
|
|
|
|
|
@ -476,6 +593,7 @@ export default {
|
|
|
|
|
0% {
|
|
|
|
|
transform: translateX(-100%) rotate(45deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
20%,
|
|
|
|
|
100% {
|
|
|
|
|
transform: translateX(100%) rotate(45deg);
|
|
|
|
|
@ -582,6 +700,7 @@ export default {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(20rpx);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
@ -628,7 +747,8 @@ export default {
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: all 0.3s ease; /* 添加过渡效果 */
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
/* 添加过渡效果 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.from-user .bubble {
|
|
|
|
|
@ -647,7 +767,8 @@ export default {
|
|
|
|
|
height: 0;
|
|
|
|
|
border-left: 16rpx solid #f59e0b;
|
|
|
|
|
border-top: 16rpx solid transparent;
|
|
|
|
|
transition: all 0.3s ease; /* 添加过渡效果 */
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
/* 添加过渡效果 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.from-ai .bubble {
|
|
|
|
|
@ -666,7 +787,8 @@ export default {
|
|
|
|
|
height: 0;
|
|
|
|
|
border-right: 16rpx solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
border-top: 16rpx solid transparent;
|
|
|
|
|
transition: all 0.3s ease; /* 添加过渡效果 */
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
/* 添加过渡效果 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 加载动画 */
|
|
|
|
|
@ -695,16 +817,143 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes bounce {
|
|
|
|
|
|
|
|
|
|
0%,
|
|
|
|
|
80%,
|
|
|
|
|
100% {
|
|
|
|
|
transform: scale(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
40% {
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 轮数控制区域 ------------------------*/
|
|
|
|
|
.rounds-control {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 20rpx 30rpx;
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
margin: 0 auto 20rpx;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
animation: slideUp 0.4s ease-out;
|
|
|
|
|
width: 70%;
|
|
|
|
|
transition: all 0.5s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes slideUp {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(30rpx);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 选择轮数按钮样式 */
|
|
|
|
|
.select-rounds-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
background: rgba(104, 57, 224, 0.3);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-rounds-btn image {
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
height: 30rpx;
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
filter: brightness(0) invert(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-selected-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-label {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 10rpx 20rpx;
|
|
|
|
|
background: rgba(104, 57, 224, 0.3);
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
min-width: 140rpx;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-label image {
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
height: 30rpx;
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
filter: brightness(0) invert(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress-container {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress-bar {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 16rpx;
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 进度条动画 */
|
|
|
|
|
.progress-inner {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, #f59e0b, #fcd34d);
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
transition: width 0.5s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 进度条加载动画 */
|
|
|
|
|
@keyframes progress-grow {
|
|
|
|
|
from {
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
width: v-bind('progressPercentage + "%"');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress-inner {
|
|
|
|
|
animation: progress-grow 0.8s ease-out forwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-counter {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: white;
|
|
|
|
|
min-width: 80rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 输入区域 */
|
|
|
|
|
.chat-input {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -721,13 +970,15 @@ export default {
|
|
|
|
|
.textarea-box {
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距为发送按钮留出空间 */
|
|
|
|
|
padding: 16rpx 20rpx 16rpx 90rpx;
|
|
|
|
|
/* 增加左侧内边距为发送按钮留出空间 */
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
min-height: 70rpx;
|
|
|
|
|
max-height: 180rpx; /* 限制最大高度 */
|
|
|
|
|
max-height: 180rpx;
|
|
|
|
|
/* 限制最大高度 */
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
@ -797,14 +1048,154 @@ export default {
|
|
|
|
|
.send-button-embedded image {
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg)
|
|
|
|
|
brightness(101%) contrast(96%);
|
|
|
|
|
filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg) brightness(101%) contrast(96%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 底部安全区域 */
|
|
|
|
|
.safe-area-bottom {
|
|
|
|
|
height: 20rpx;
|
|
|
|
|
height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
|
|
|
|
|
height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
|
|
|
|
|
height: calc(20rpx + constant(safe-area-inset-bottom));
|
|
|
|
|
/* iOS 11.0-11.2 */
|
|
|
|
|
height: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
|
|
/* iOS 11.2+ */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 轮数选择弹窗样式 */
|
|
|
|
|
.rounds-popup-mask {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
animation: fadeIn 0.3s ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-popup {
|
|
|
|
|
width: 80%;
|
|
|
|
|
max-width: 600rpx;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 28rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
|
|
|
|
|
animation: scaleIn 0.3s ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes scaleIn {
|
|
|
|
|
from {
|
|
|
|
|
transform: scale(0.9);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
background: #7C3AED;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-title {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close-icon {
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close-icon image {
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
height: 30rpx;
|
|
|
|
|
filter: brightness(0) invert(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounds-options {
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.round-option {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
background: #f8f9ff;
|
|
|
|
|
border: 2rpx solid #e6e6ff;
|
|
|
|
|
margin-bottom: 25rpx;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.round-option.selected {
|
|
|
|
|
background: #6839E0;
|
|
|
|
|
border-color: #6839E0;
|
|
|
|
|
transform: translateY(-5rpx);
|
|
|
|
|
box-shadow: 0 8rpx 20rpx rgba(104, 57, 224, 0.3);
|
|
|
|
|
width: auto;
|
|
|
|
|
margin: 0 30rpx 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-icon {
|
|
|
|
|
font-size: 50rpx;
|
|
|
|
|
margin-right: 25rpx;
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.round-option.selected .option-icon {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-title {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-bottom: 8rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-desc {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.round-option.selected .option-title,
|
|
|
|
|
.round-option.selected .option-desc {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.confirm-button {
|
|
|
|
|
background: #6839E0;
|
|
|
|
|
color: white;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
line-height: 100rpx;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
