|
|
@@ -1,1442 +0,0 @@
|
|
|
-<template>
|
|
|
- <!-- AI发展历程 -->
|
|
|
- <div class="home-container">
|
|
|
- <!-- 添加抽屉 -->
|
|
|
- <div class="drawer-box">
|
|
|
- <el-button
|
|
|
- v-if="!drawerVisible"
|
|
|
- type="primary"
|
|
|
- @click="drawerVisible = true"
|
|
|
- @closed="buttonVisible = false"
|
|
|
- class="toggle-button"
|
|
|
- >
|
|
|
- 课程小节
|
|
|
- </el-button>
|
|
|
- <el-drawer v-model="drawerVisible" direction="ltr" size="20%">
|
|
|
- <el-row class="tac">
|
|
|
- <el-col :span="12">
|
|
|
- <h3 class="mb-2">课程小节</h3>
|
|
|
- <el-menu
|
|
|
- default-active="1"
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- @open="handleOpen"
|
|
|
- @close="handleClose"
|
|
|
- @select="handleSelect"
|
|
|
- :default-openeds="['1']"
|
|
|
- >
|
|
|
- <template v-for="item in menuItems" :key="item.index">
|
|
|
- <el-menu-item v-if="!item.children" :index="item.index">{{
|
|
|
- item.title
|
|
|
- }}</el-menu-item>
|
|
|
- <el-sub-menu v-else :index="item.index">
|
|
|
- <template #title>
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </template>
|
|
|
- <el-menu-item-group v-if="item.children">
|
|
|
- <template v-for="child in item.children" :key="child.index">
|
|
|
- <el-menu-item :index="child.index">{{
|
|
|
- child.title
|
|
|
- }}</el-menu-item>
|
|
|
- </template>
|
|
|
- </el-menu-item-group>
|
|
|
- </el-sub-menu>
|
|
|
- </template>
|
|
|
- </el-menu>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-drawer>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="box-1">
|
|
|
- <div class="inner-box left-box">
|
|
|
- <div class="box-icon" @click="goBack">
|
|
|
- <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
|
|
|
- {{ boxIconTitle }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="inner-box right-box">
|
|
|
- <div class="top-right-box">
|
|
|
- <el-input
|
|
|
- v-model="SearchInput"
|
|
|
- class="search-input"
|
|
|
- placeholder="搜索"
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-2">
|
|
|
- <!-- 课程标题 autoplay自动播放 @ended="playNextVideo"-->
|
|
|
- <div class="small-title">
|
|
|
- <span>{{ smallTitle }}</span>
|
|
|
- </div>
|
|
|
- <div class="box-video">
|
|
|
- <video
|
|
|
- class="full-box-video"
|
|
|
- :src="videoSrc"
|
|
|
- controlsList="nodownload"
|
|
|
- controls
|
|
|
- @timeupdate="handleTimeUpdate"
|
|
|
- ref="videoRef"
|
|
|
- >
|
|
|
- <source :src="videoSrc" type="video/mp4" />
|
|
|
- 您的浏览器不支持视频播放。
|
|
|
- </video>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 添加切换视频 -->
|
|
|
- <div class="video-switch">
|
|
|
- <!-- 上一个视频 -->
|
|
|
- <div class="caret-left" @click="playPreviousVideo">
|
|
|
- <el-button type="warning" round>上一节</el-button>
|
|
|
- </div>
|
|
|
- <!-- 下一个视频 -->
|
|
|
- <div class="caret-right" @click="playNextVideo">
|
|
|
- <el-button type="warning" round>下一节</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 添加试题弹框 -->
|
|
|
- <transition name="fade-scale">
|
|
|
- <div
|
|
|
- v-show="questionDialogVisible"
|
|
|
- class="child-dialog-wrapper"
|
|
|
- @click.self="handleCloseQuestionDialog"
|
|
|
- >
|
|
|
- <div class="child-dialog">
|
|
|
- <div class="question-title">
|
|
|
- <span class="question-icon">?</span>
|
|
|
- {{ currentQuestion.title }}
|
|
|
- </div>
|
|
|
- <!-- 选项区域 -->
|
|
|
- <div
|
|
|
- v-if="currentQuestion.options && currentQuestion.options.length > 0"
|
|
|
- class="options-container"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(option, index) in currentQuestion.options"
|
|
|
- :key="index"
|
|
|
- class="question-option"
|
|
|
- >
|
|
|
- <el-radio v-model="selectedOption" :label="index" :value="option" v-cloak="selectedOption = option">
|
|
|
- <span>{{ option }}</span>
|
|
|
- </el-radio>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="no-options">
|
|
|
-<!-- 暂无选项-->
|
|
|
- </div>
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <div class="dialog-footer">
|
|
|
-<!-- <el-button class="child-button cancel" @click="questionDialogVisible = false; showAIDialog = false">取消</el-button>-->
|
|
|
- <el-button class="child-button confirm" @click="handleSubmitAnswer">确定</el-button>
|
|
|
- </div>
|
|
|
- <!-- 右侧小图标 -->
|
|
|
- <div class="ai-icon-container" @click="handleAIClick">
|
|
|
- <img src="@/assets/images/xiaozhi.png" alt="AI对话" class="ai-icon" />
|
|
|
- <span class="ai-text">AI助手</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
-
|
|
|
- <!-- AI对话弹框 -->
|
|
|
- <div
|
|
|
- v-show="showAIDialog"
|
|
|
- class="ai-dialog-wrapper"
|
|
|
- @click.self="showAIDialog = false"
|
|
|
- >
|
|
|
- <div class="ai-dialog">
|
|
|
- <div class="ai-dialog-header">
|
|
|
- <h3>小智智能助手</h3>
|
|
|
- <el-button @click="showAIDialog = false" class="close-btn"
|
|
|
- >×</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="ai-dialog-content">
|
|
|
- <div class="ai-message-history">
|
|
|
- <div
|
|
|
- v-for="(message, index) in messageHistory"
|
|
|
- :key="index"
|
|
|
- :class="['message', message.type]"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="message.type === 'user'"
|
|
|
- src="@/assets/images/user.png"
|
|
|
- class="avatar user"
|
|
|
- />
|
|
|
- <img v-else src="@/assets/images/xiaozhi.png" class="avatar" />
|
|
|
- <div class="message-content">
|
|
|
- {{ message.content }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- v-model="userMessage"
|
|
|
- placeholder="输入问题..."
|
|
|
- class="user-input"
|
|
|
- @keyup.enter="sendMessage"
|
|
|
- >
|
|
|
- <template #append class="flex flex-wrap items-center mb-4">
|
|
|
- <!-- <el-button @click="sendMessage" class="child-button confirm">发送</el-button>-->
|
|
|
- <el-button @click="sendMessage" size="large" round
|
|
|
- >发送</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import {
|
|
|
- ArrowDown,
|
|
|
- ArrowRightBold,
|
|
|
- CaretRight,
|
|
|
- CaretLeft
|
|
|
-} from '@element-plus/icons-vue'
|
|
|
-import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
|
|
|
-import { valueEquals } from 'element-plus'
|
|
|
-// 引入视频
|
|
|
-import video1 from '@/assets/02video/01video.mp4'
|
|
|
-import video2 from '@/assets/02video/02video.mp4'
|
|
|
-import video3 from '@/assets/02video/03video.mp4'
|
|
|
-import video4 from '@/assets/02video/04video.mp4'
|
|
|
-import video5 from '@/assets/02video/05video.mp4'
|
|
|
-import video6 from '@/assets/02video/06video.mp4'
|
|
|
-import video7 from '@/assets/02video/07video.mp4'
|
|
|
-import video8 from '@/assets/02video/08video.mp4'
|
|
|
-import video9 from '@/assets/02video/09video.mp4'
|
|
|
-import video10 from '@/assets/02video/10video.mp4'
|
|
|
-import video11 from '@/assets/02video/11video.mp4'
|
|
|
-import video12 from '@/assets/02video/12video.mp4'
|
|
|
-import video13 from '@/assets/02video/13video.mp4'
|
|
|
-import video14 from '@/assets/02video/14video.mp4'
|
|
|
-import video15 from '@/assets/02video/15video.mp4'
|
|
|
-
|
|
|
-const router = useRouter() // 获取当前路由对象
|
|
|
-// 搜索框
|
|
|
-const SearchInput = ref('')
|
|
|
-// 添加按钮显示状态
|
|
|
-const buttonVisible = ref(false)
|
|
|
-// 添加抽屉显示状态
|
|
|
-const drawerVisible = ref(false)
|
|
|
-
|
|
|
-// 定义映射
|
|
|
-const videoMap = {
|
|
|
- '1-1': video1,
|
|
|
- '1-2': video2,
|
|
|
- '1-3': video3,
|
|
|
- '1-4': video4,
|
|
|
- '1-5': video5,
|
|
|
- '1-6': video6,
|
|
|
- '1-7': video7,
|
|
|
- '1-8': video8,
|
|
|
- '1-9': video9,
|
|
|
- '1-10': video10,
|
|
|
- '1-11': video11,
|
|
|
- '1-12': video12,
|
|
|
- '1-13': video13,
|
|
|
- '1-14': video14,
|
|
|
- '1-15': video15
|
|
|
-}
|
|
|
-// 定义视频源
|
|
|
-const videoSrc = ref(video1)
|
|
|
-
|
|
|
-// 返回上一页
|
|
|
-const goBack = () => {
|
|
|
- router.go(-1)
|
|
|
-}
|
|
|
-// 渲染页面标题
|
|
|
-const boxIconTitle = ref('')
|
|
|
-onMounted(() => {
|
|
|
- const title = router.currentRoute.value.query.title
|
|
|
- if (title) {
|
|
|
- boxIconTitle.value = String(title)
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// 菜单打开和关闭的处理函数
|
|
|
-const handleOpen = () => {}
|
|
|
-const handleClose = () => {}
|
|
|
-
|
|
|
-// 动态渲染树型结构
|
|
|
-const menuItems = ref([
|
|
|
- { index: '1-1', title: '课前回顾' },
|
|
|
- { index: '1-2', title: '课程引入' },
|
|
|
- {
|
|
|
- index: '1',
|
|
|
- title: '知识讲解',
|
|
|
- children: [
|
|
|
- { index: '1-3', title: '图灵测试' },
|
|
|
- { index: '1-4', title: '课堂提问' },
|
|
|
- { index: '1-5', title: '达特茅斯会议' },
|
|
|
- { index: '1-6', title: '课堂选择' },
|
|
|
- { index: '1-7', title: '聊天机器人' },
|
|
|
- { index: '1-8', title: '专家系统' },
|
|
|
- { index: '1-9', title: '课堂互动' },
|
|
|
- { index: '1-10', title: '互联网快速发展' },
|
|
|
- { index: '1-11', title: '黄金时代' },
|
|
|
- { index: '1-12', title: '课堂提问' },
|
|
|
- { index: '1-13', title: '大模型时代' }
|
|
|
- ]
|
|
|
- },
|
|
|
- { index: '1-14', title: '趣味实操' },
|
|
|
- { index: '1-15', title: '课程总结' }
|
|
|
-])
|
|
|
-
|
|
|
-// 当前播放的索引
|
|
|
-const currentIndex = ref('1-1')
|
|
|
-
|
|
|
-// 渲染课程标题到视频上方
|
|
|
-const smallTitle = ref('课前回顾')
|
|
|
-const handleSelect = index => {
|
|
|
- const findTitle = items => {
|
|
|
- for (const item of items) {
|
|
|
- if (item.index === index) {
|
|
|
- return item.title
|
|
|
- }
|
|
|
- if (item.children) {
|
|
|
- const result = findTitle(item.children)
|
|
|
- if (result) {
|
|
|
- return result
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return null
|
|
|
- }
|
|
|
- const title = findTitle(menuItems.value)
|
|
|
- if (title) {
|
|
|
- smallTitle.value = title
|
|
|
- }
|
|
|
- // 根据索引切换视频
|
|
|
- if (videoMap[index]) {
|
|
|
- videoSrc.value = videoMap[index]
|
|
|
- currentIndex.value = index
|
|
|
- }
|
|
|
- // 选中标题后关闭抽屉
|
|
|
- drawerVisible.value = false
|
|
|
-}
|
|
|
-
|
|
|
-// 展平所有菜单项索引
|
|
|
-const flattenMenuItems = () => {
|
|
|
- const indices = []
|
|
|
- const traverse = items => {
|
|
|
- for (const item of items) {
|
|
|
- if (!item.children) {
|
|
|
- indices.push(item.index)
|
|
|
- } else {
|
|
|
- traverse(item.children)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- traverse(menuItems.value)
|
|
|
- return indices
|
|
|
-}
|
|
|
-
|
|
|
-// 播放下一个视频
|
|
|
-const playNextVideo = () => {
|
|
|
- const allIndices = flattenMenuItems()
|
|
|
- const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
|
- if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
|
|
|
- const nextIndex = allIndices[currentIndexInList + 1]
|
|
|
- handleSelect(nextIndex)
|
|
|
- // 切换视频后自动播放
|
|
|
- if (videoRef.value) {
|
|
|
- videoRef.value.addEventListener('loadedmetadata', tryPlayVideo, {
|
|
|
- once: true
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- // 重置
|
|
|
- pausedIndices = ref([])
|
|
|
- userMessage = ref('')
|
|
|
- messageHistory = ref([])
|
|
|
-}
|
|
|
-// 切换视频
|
|
|
-// 播放上一个视频
|
|
|
-const playPreviousVideo = () => {
|
|
|
- const allIndices = flattenMenuItems()
|
|
|
- const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
|
- if (currentIndexInList > 0) {
|
|
|
- const previousIndex = allIndices[currentIndexInList - 1]
|
|
|
- handleSelect(previousIndex)
|
|
|
- // 切换视频后自动播放
|
|
|
- if (videoRef.value) {
|
|
|
- videoRef.value.addEventListener('loadedmetadata', tryPlayVideo, {
|
|
|
- once: true
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// 尝试播放视频，处理浏览器自动播放限制
|
|
|
-const tryPlayVideo = () => {
|
|
|
- const playPromise = videoRef.value.play()
|
|
|
- if (playPromise !== undefined) {
|
|
|
- playPromise.catch(error => {
|
|
|
- console.error('视频播放失败，可能是浏览器自动播放限制:', error)
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 视频 ref
|
|
|
-const videoRef = ref(null)
|
|
|
-// 记录已经暂停过的时间点索引
|
|
|
-let pausedIndices = ref([])
|
|
|
-// 试题弹框显示状态
|
|
|
-const questionDialogVisible = ref(false)
|
|
|
-// 当前显示的试题
|
|
|
-const currentQuestion = ref({ title: '', options: [] })
|
|
|
-// 用户选择的选项
|
|
|
-const selectedOption = ref(null)
|
|
|
-
|
|
|
-// AI对话弹出框显示状态
|
|
|
-let showAIDialog = ref(false)
|
|
|
-// 用户输入的消息
|
|
|
-let userMessage = ref('')
|
|
|
-// 消息历史记录
|
|
|
-let messageHistory = ref([])
|
|
|
-
|
|
|
-// 定义每个视频对应的暂停时间和问题
|
|
|
-const videoPauseTimes = {
|
|
|
- [video2]: {
|
|
|
- pauseTimes: [30],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '视频当中发生了什么事情呢？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '视频当中发生了什么事情呢',
|
|
|
- aiAnswer: '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video3]: {
|
|
|
- pauseTimes: [49],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '同学们，大家了解图灵测试了吗？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '视频当中发生了什么事情呢',
|
|
|
- aiAnswer: '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video4]: {
|
|
|
- pauseTimes: [2],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '你觉得deepseek、豆包等大模型可以通过图灵测试吗？为什么？',
|
|
|
- aiAnswer: '大模型已缩短与图灵测试的标志距离，尤其在表面对话层面，但因缺乏深层次理解、逻辑一致性与真实认知，仍无法在严格测试中稳定通过。'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video5]: {
|
|
|
- pauseTimes: [49],
|
|
|
- questions: []
|
|
|
- },
|
|
|
- [video6]: {
|
|
|
- pauseTimes: [5],
|
|
|
- },
|
|
|
- [video7]: {
|
|
|
- pauseTimes: [64.5,91],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '如果你是聊天机器人，你会怎么回答用户呢？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '',
|
|
|
- aiAnswer: ''
|
|
|
- },
|
|
|
- {
|
|
|
- title: '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '当我们和聊天机器人对话的内容被人类所查看并回答时，隐私信息是否泄露？',
|
|
|
- aiAnswer: '与聊天机器人的对话被人类查看时，隐私泄露风险客\n' +
|
|
|
- '观存在，尤其是人类介入或安全漏洞场景下。建议优先选择支持本地'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video8]: {
|
|
|
- pauseTimes: [72],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '如果你身体不舒服时找这样的专家检查，那么它开的药你敢喝吗？',
|
|
|
- aiAnswer: '这题没给答案，你自己去查吧！'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video9]: {
|
|
|
- pauseTimes: [2],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '在生活中，有哪些正在使用的专家系统呢？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '在生活中，有哪些正在使用的专家系统呢？',
|
|
|
- aiAnswer: '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助；在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video11]: {
|
|
|
- pauseTimes: [1,90,176],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '怎么会有爆炸声？泡泡怪在这里吗？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '',
|
|
|
- aiAnswer: ''
|
|
|
- },
|
|
|
- {
|
|
|
- title: '同学们喜欢下围棋吗？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '',
|
|
|
- aiAnswer: ''
|
|
|
- },
|
|
|
- {
|
|
|
- title: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
|
|
|
- options: [],
|
|
|
- aiQuestion: '为什么AlphaGo要在围棋上攻克真人冠军呢？',
|
|
|
- aiAnswer: '围棋是人类智力游戏的巅峰，拥有天文数字级的可能性，每颗棋子价值由全局态势动态决定，所以当前一手可能百步之后才显现价值。AlphaGo战胜人类顶尖选手，它证明了Ai不仅能处理规则明确的事物，更能攻克依赖直觉、策略的“人类专属领域”'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- [video12]: {
|
|
|
- pauseTimes: [1],
|
|
|
- },
|
|
|
- [video13]: {
|
|
|
- pauseTimes: [62],
|
|
|
- questions: [
|
|
|
- {
|
|
|
- title: '我们一起来感受一下大模型吧！',
|
|
|
- options: [],
|
|
|
- aiQuestion: '',
|
|
|
- aiAnswer: ''
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// 处理视频时间更新事件
|
|
|
-const handleTimeUpdate = () => {
|
|
|
- if (!videoRef.value) return
|
|
|
-
|
|
|
- const currentTime = videoRef.value.currentTime
|
|
|
- const currentPauseTimes = videoPauseTimes[videoSrc.value]
|
|
|
- if (currentPauseTimes) {
|
|
|
- currentPauseTimes.pauseTimes.forEach((time, index) => {
|
|
|
- // 检查是否到达时间点且还未暂停过
|
|
|
- if (currentTime >= time && !pausedIndices.value.includes(index)) {
|
|
|
- videoRef.value.pause()
|
|
|
- pausedIndices.value.push(index)
|
|
|
- // 显示对应的问题
|
|
|
- if (currentPauseTimes.questions[index]) {
|
|
|
- currentQuestion.value = currentPauseTimes.questions[index]
|
|
|
- questionDialogVisible.value = true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-// 关闭试题弹框
|
|
|
-const handleCloseQuestionDialog = () => {
|
|
|
- questionDialogVisible.value = false
|
|
|
- // 继续播放视频
|
|
|
- videoRef.value.play()
|
|
|
-}
|
|
|
-
|
|
|
-// 提交答案
|
|
|
-const handleSubmitAnswer = () => {
|
|
|
- // 这里可以添加答案验证逻辑
|
|
|
- questionDialogVisible.value = false
|
|
|
- // 继续播放视频
|
|
|
- videoRef.value.play()
|
|
|
- selectedOption.value = null
|
|
|
-}
|
|
|
-
|
|
|
-// 发送消息
|
|
|
-const sendMessage = async () => {
|
|
|
- if (userMessage.value.trim()) {
|
|
|
- // 添加用户消息到历史记录
|
|
|
- messageHistory.value.push({
|
|
|
- type: 'user',
|
|
|
- content: userMessage.value
|
|
|
- })
|
|
|
-
|
|
|
- // 模拟 AI 回复
|
|
|
- const aiResponse = await simulateAIResponse(userMessage.value)
|
|
|
- messageHistory.value.push({
|
|
|
- type: 'ai',
|
|
|
- content: aiResponse
|
|
|
- })
|
|
|
-
|
|
|
- // 清空输入框
|
|
|
- userMessage.value = ''
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 处理 AI 助手点击事件
|
|
|
-const handleAIClick = () => {
|
|
|
- // 清空输入框
|
|
|
- messageHistory = ref([])
|
|
|
- if (currentQuestion.value.aiQuestion) {
|
|
|
- userMessage.value = currentQuestion.value.aiQuestion
|
|
|
- sendMessage()
|
|
|
- userMessage.value = ''
|
|
|
- }
|
|
|
-
|
|
|
- showAIDialog.value = true
|
|
|
-}
|
|
|
-
|
|
|
-// 模拟 AI 回复
|
|
|
-const simulateAIResponse = question => {
|
|
|
- return new Promise(resolve => {
|
|
|
- setTimeout(() => {
|
|
|
- const currentVideoInfo = videoPauseTimes[videoSrc.value]
|
|
|
- if (currentVideoInfo) {
|
|
|
- const currentQuestionObj = currentVideoInfo.questions.find(
|
|
|
- q => q.aiQuestion === question
|
|
|
- )
|
|
|
- if (currentQuestionObj && currentQuestionObj.aiAnswer) {
|
|
|
- resolve(currentQuestionObj.aiAnswer)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- // 若未匹配到自定义回复，给出默认回复
|
|
|
- resolve(`您的问题是：${question}，这是 AI 的回复示例。`)
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭AI对话弹出框
|
|
|
-const handleCloseAIDialog = () => {
|
|
|
- showAIDialog.value = false
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-@use 'sass:math';
|
|
|
-@use 'sass:color'; // 引入 color 模块
|
|
|
-// 定义rpx转换函数
|
|
|
-@function rpx($px) {
|
|
|
- @return math.div($px, 750) * 100vw;
|
|
|
-}
|
|
|
-
|
|
|
-// 定义儿童风格的蓝紫色调
|
|
|
-$primary-color: rgba(106, 90, 205, 0.52); // 主色调：蓝紫色
|
|
|
-$secondary-color: rgba(147, 112, 219, 0.66); // 辅助色：亮蓝紫色
|
|
|
-$accent-color: rgb(133, 89, 220); // 强调色：暗蓝紫色
|
|
|
-$light-color: #e6e6fa; // 浅色背景：淡紫色
|
|
|
-$text-color: #483d8b; // 文本颜色：靛蓝色
|
|
|
-
|
|
|
-.home-container {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: linear-gradient(to bottom, #001169, #b4a8e1);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: rpx(0);
|
|
|
-}
|
|
|
-.tac ::v-deep(.el-menu) {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/* 取消点击后的蓝色字体 el-sub-menu__title*/
|
|
|
-.tac ::v-deep(.el-menu-item.is-active),
|
|
|
-.tac ::v-deep(.el-sub-menu__title.is-active) {
|
|
|
- color: black;
|
|
|
-}
|
|
|
-// 取消鼠标悬浮颜色
|
|
|
-.tac ::v-deep(.el-sub-menu__title) {
|
|
|
- width: rpx(130);
|
|
|
- height: rpx(20);
|
|
|
- margin-bottom: rpx(5);
|
|
|
- border-radius: rpx(6);
|
|
|
-}
|
|
|
-.el-menu ::v-deep(.el-sub-menu__title:hover),
|
|
|
-.el-menu ::v-deep(.el-sub-menu__title:focus),
|
|
|
-.el-menu ::v-deep(.el-sub-menu__title:active) {
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #fee78a,
|
|
|
- #ffce1b
|
|
|
- ); /* 设置悬停、聚焦、点击状态下的背景色 */
|
|
|
- background-color: transparent;
|
|
|
-}
|
|
|
-.drawer-box ::v-deep(.el-drawer__header) {
|
|
|
- margin-bottom: rpx(0);
|
|
|
-}
|
|
|
-.mb-2 {
|
|
|
- color: black;
|
|
|
- margin-top: rpx(1);
|
|
|
-}
|
|
|
-.el-menu-item {
|
|
|
- width: rpx(130);
|
|
|
- height: rpx(20);
|
|
|
- margin-bottom: rpx(5);
|
|
|
- border-radius: rpx(6);
|
|
|
-}
|
|
|
-.el-menu-item span {
|
|
|
- color: black;
|
|
|
- font-size: rpx(8);
|
|
|
-}
|
|
|
-.el-menu ::v-deep(.el-menu-item:hover),
|
|
|
-.el-menu ::v-deep(.el-menu-item:focus),
|
|
|
-.el-menu ::v-deep(.el-menu-item:active) {
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #fee78a,
|
|
|
- #ffce1b
|
|
|
- ); /* 设置悬停、聚焦、点击状态下的背景色 */
|
|
|
-}
|
|
|
-.drawer-box {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.drawer-box .toggle-button {
|
|
|
- width: rpx(10);
|
|
|
- height: rpx(50);
|
|
|
- font-size: rpx(7);
|
|
|
- background-color: rgba(17, 23, 29, 0.2);
|
|
|
- border: none;
|
|
|
- position: relative;
|
|
|
- writing-mode: vertical-lr; // 文字垂直排列，从左到右
|
|
|
- text-orientation: upright; // 文字保持正立
|
|
|
-}
|
|
|
-.toggle-button:hover {
|
|
|
- left: 0;
|
|
|
-}
|
|
|
-// 抽屉滚动条样式
|
|
|
-.drawer-box ::v-deep(.el-drawer.ltr) {
|
|
|
- background-color: rgb(255, 255, 255, 0.7);
|
|
|
- box-shadow: 0 8px 8px rgba(202, 52, 52, 0.1);
|
|
|
-}
|
|
|
-.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar {
|
|
|
- width: rpx(2);
|
|
|
-}
|
|
|
-.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar-thumb {
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 8px;
|
|
|
-}
|
|
|
-.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0.05);
|
|
|
- border-radius: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-button.is-active,
|
|
|
-.toggle-button:active,
|
|
|
-.toggle-button:focus {
|
|
|
- background-color: rgba(165, 209, 247, 0.8);
|
|
|
- color: black;
|
|
|
- border: none; // 移除点击时的边框
|
|
|
- outline: none; // 移除点击时的外边框
|
|
|
-}
|
|
|
-
|
|
|
-.box-1 {
|
|
|
- width: 100%;
|
|
|
- height: rpx(50);
|
|
|
- // margin-top: rpx(10);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: rpx(15); // 默认字体大小
|
|
|
-}
|
|
|
-
|
|
|
-.inner-box {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: rpx(16); // 默认字体大小
|
|
|
-}
|
|
|
-
|
|
|
-.left-box {
|
|
|
- position: relative;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex: 1; // 设置左侧盒子占比为 2
|
|
|
- cursor: pointer; // 添加鼠标指针样式
|
|
|
-}
|
|
|
-.box-icon {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- flex: 1;
|
|
|
- display: flex; // 添加 flex 布局
|
|
|
- align-items: center; // 垂直居中
|
|
|
- color: white; // 设置图标颜色为白色
|
|
|
- padding-left: rpx(15);
|
|
|
- font-size: rpx(10); // 设置图标大小，可按需调整
|
|
|
-}
|
|
|
-.box-icon .left-icon {
|
|
|
- margin-left: rpx(10);
|
|
|
- margin-right: rpx(5); // 设置图标和文字之间的间距 ;
|
|
|
-}
|
|
|
-
|
|
|
-.left-box span {
|
|
|
- position: absolute;
|
|
|
- font-size: rpx(11); // 默认字体大小
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.right-box {
|
|
|
- flex: 1;
|
|
|
- position: relative; // 添加相对定位;
|
|
|
-}
|
|
|
-.top-right-box {
|
|
|
- position: absolute; // 添加绝对定位
|
|
|
- margin-top: rpx(20); // 调整上边距离
|
|
|
- margin-right: rpx(50); // 调整右边距离
|
|
|
- width: 100%; // 设置盒子宽度，可按需调整
|
|
|
- height: 60px; // 设置盒子高度，可按需调整
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
-}
|
|
|
-.top-right-box {
|
|
|
- ::v-deep(.el-input__wrapper) {
|
|
|
- background-color: rgb(255, 255, 255, 0.5);
|
|
|
- border-radius: rpx(12);
|
|
|
- color: white;
|
|
|
- }
|
|
|
- ::v-deep(.el-input__icon) {
|
|
|
- color: white; // 设置输入框图标颜色为白色
|
|
|
- }
|
|
|
- // 添加占位符样式
|
|
|
- ::v-deep(.el-input__inner::placeholder) {
|
|
|
- color: white;
|
|
|
- }
|
|
|
- // 添加输入框文字颜色样式
|
|
|
- ::v-deep(.el-input__inner) {
|
|
|
- color: black;
|
|
|
- }
|
|
|
-}
|
|
|
-// 搜索框
|
|
|
-.search-input {
|
|
|
- width: rpx(100);
|
|
|
- height: rpx(15);
|
|
|
- font-size: rpx(7);
|
|
|
-}
|
|
|
-.box-2 {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- // padding: rpx(-20) rpx(20); // 添加左右内边距
|
|
|
- display: flex; // 确保子元素水平排列
|
|
|
- flex-wrap: wrap; // 允许子元素换行;
|
|
|
- align-content: center; // 顶部对齐;
|
|
|
- cursor: pointer; // 添加鼠标指针样式
|
|
|
-}
|
|
|
-.box-video {
|
|
|
- width: 100%;
|
|
|
- height: rpx(300);
|
|
|
- video.full-box-video {
|
|
|
- // width: 100%;
|
|
|
- height: rpx(280);
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: rpx(12);
|
|
|
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
|
- object-fit: cover;
|
|
|
- // object-fit: contain;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 隐藏 Chrome 视频控件的渐变背景等默认样式 */
|
|
|
-video::-webkit-media-controls-panel {
|
|
|
- background: transparent !important; /* 去掉背景渐变，设为透明 */
|
|
|
-}
|
|
|
-
|
|
|
-.small-title {
|
|
|
- width: 100%;
|
|
|
- margin-top: rpx(-20);
|
|
|
- height: rpx(20);
|
|
|
- color: white;
|
|
|
- font-size: rpx(10);
|
|
|
- justify-content: center; //使子元素水平居中
|
|
|
-}
|
|
|
-.video-switch {
|
|
|
- width: 100%;
|
|
|
- // height: rpx(50);
|
|
|
- display: flex;
|
|
|
- margin-top: rpx(-20);
|
|
|
- // background-color: saddlebrown;
|
|
|
-}
|
|
|
-.caret-right,
|
|
|
-.caret-left {
|
|
|
- width: rpx(50);
|
|
|
- // height: rpx(50);
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- // grid: rpx(4);
|
|
|
- margin-top: rpx(5);
|
|
|
- margin-bottom: rpx(15);
|
|
|
-}
|
|
|
-.caret-left ::v-deep(.el-button.is-round),
|
|
|
-.caret-right ::v-deep(.el-button.is-round) {
|
|
|
- width: rpx(50);
|
|
|
- height: rpx(15);
|
|
|
- color: black;
|
|
|
- border-radius: none;
|
|
|
- border: 1px white solid;
|
|
|
- background-color: rgb(255, 255, 255, 0.5); // 进度条背景颜色，调浅为半透明白色
|
|
|
- box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
|
|
|
-}
|
|
|
-
|
|
|
-// 儿童风格试题弹框样式
|
|
|
-.child-dialog {
|
|
|
- .el-dialog__header {
|
|
|
- display: none; // 隐藏原有的标题栏
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__body {
|
|
|
- padding: rpx(20);
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__footer {
|
|
|
- border-top: none;
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__wrapper {
|
|
|
- // 修改半透明背景色
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog {
|
|
|
- border: none;
|
|
|
- border-radius: rpx(20);
|
|
|
- background: linear-gradient(
|
|
|
- 135deg,
|
|
|
- $light-color,
|
|
|
- #d8bfd8
|
|
|
- ); // 柔和的蓝紫色渐变
|
|
|
- // 添加边框边晕效果
|
|
|
- box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
|
|
|
- 0 0 40px 10px rgba($primary-color, 0.4),
|
|
|
- 0 0 60px 15px rgba($primary-color, 0.2);
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- // 添加装饰元素
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: rpx(10);
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- $primary-color,
|
|
|
- $secondary-color,
|
|
|
- $accent-color
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// AI对话弹出框样式
|
|
|
-.ai-dialog {
|
|
|
- .el-dialog__header {
|
|
|
- background: linear-gradient(90deg, $primary-color, $secondary-color);
|
|
|
- color: white;
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
- border-radius: rpx(10) rpx(10) 0 0;
|
|
|
-
|
|
|
- .el-dialog__title {
|
|
|
- font-size: rpx(12);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__body {
|
|
|
- padding: rpx(15);
|
|
|
- background-color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__footer {
|
|
|
- border-top: none;
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog {
|
|
|
- border-radius: rpx(10);
|
|
|
- // 修改半透明背景色
|
|
|
- background-color: rgba(255, 255, 255, 0.95);
|
|
|
- // 添加边框边晕效果
|
|
|
- box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
|
|
|
- 0 0 40px 10px rgba($primary-color, 0.4),
|
|
|
- 0 0 60px 15px rgba($primary-color, 0.2);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 问题标题样式
|
|
|
-.question-title {
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- rgba($primary-color, 0.2),
|
|
|
- rgba($secondary-color, 0.2)
|
|
|
- );
|
|
|
- padding: rpx(15);
|
|
|
- border-radius: rpx(12);
|
|
|
- margin-bottom: rpx(20);
|
|
|
- color: $accent-color;
|
|
|
- font-weight: bold;
|
|
|
- font-size: rpx(14);
|
|
|
- box-shadow: 0 rpx(3) rpx(10) rgba($primary-color, 0.1);
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .question-icon {
|
|
|
- background-color: $accent-color;
|
|
|
- color: white;
|
|
|
- width: rpx(24);
|
|
|
- height: rpx(24);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: rpx(10);
|
|
|
- font-weight: bold;
|
|
|
- box-shadow: 0 rpx(2) rpx(5) rgba($accent-color, 0.3);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 选项容器样式
|
|
|
-.options-container {
|
|
|
- margin-bottom: rpx(20);
|
|
|
-}
|
|
|
-
|
|
|
-// 问题选项样式
|
|
|
-.question-option {
|
|
|
- margin: rpx(8) 0;
|
|
|
- padding: rpx(10) rpx(15);
|
|
|
- border-radius: rpx(12);
|
|
|
- border: rpx(1) solid rgba($primary-color, 0.3);
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background-color: white;
|
|
|
- box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.05);
|
|
|
-
|
|
|
- ::v-deep(.el-radio__label) {
|
|
|
- color: $text-color;
|
|
|
- margin-left: rpx(8);
|
|
|
- flex: 1;
|
|
|
- text-align: left;
|
|
|
- // 增大字体大小
|
|
|
- font-size: rpx(12);
|
|
|
- }
|
|
|
-
|
|
|
- // 选中时的样式变化
|
|
|
- .el-radio__input.is-checked + .el-radio__label {
|
|
|
- font-weight: bold;
|
|
|
- color: $accent-color;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: rgba($primary-color, 0.05);
|
|
|
- border-color: rgba($primary-color, 0.5);
|
|
|
- transform: translateY(-rpx(1));
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 暂无选项样式
|
|
|
-.no-options {
|
|
|
- color: rgba($text-color, 0.7);
|
|
|
- text-align: center;
|
|
|
- padding: rpx(20);
|
|
|
- font-size: rpx(12);
|
|
|
-}
|
|
|
-
|
|
|
-// 底部按钮样式
|
|
|
-.child-button {
|
|
|
- min-width: rpx(80);
|
|
|
- height: rpx(30);
|
|
|
- border-radius: rpx(15);
|
|
|
- font-size: rpx(12);
|
|
|
- font-weight: 500;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 rpx(2) rpx(8) rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
- &.confirm {
|
|
|
- background: linear-gradient(to right, $primary-color, $secondary-color);
|
|
|
- border: none;
|
|
|
- border-right: 15px;
|
|
|
- color: white;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- color.adjust($primary-color, $lightness: -5%),
|
|
|
- color.adjust($secondary-color, $lightness: -5%)
|
|
|
- );
|
|
|
- box-shadow: 0 rpx(3) rpx(10) rgba($primary-color, 0.4);
|
|
|
- transform: translateY(-rpx(1));
|
|
|
- color: white;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.cancel {
|
|
|
- background: white;
|
|
|
- border: rpx(1) solid rgba($primary-color, 0.3);
|
|
|
- color: $text-color;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba($primary-color, 0.05);
|
|
|
- border-color: rgba($primary-color, 0.5);
|
|
|
- transform: translateY(-rpx(1));
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// AI对话图标样式
|
|
|
-.ai-icon-container {
|
|
|
- position: absolute;
|
|
|
- bottom: rpx(20);
|
|
|
- right: rpx(20);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- transform: translateY(-rpx(2));
|
|
|
- }
|
|
|
-
|
|
|
- .ai-icon {
|
|
|
- width: rpx(30);
|
|
|
- height: rpx(30);
|
|
|
- margin-bottom: rpx(0);
|
|
|
- filter: drop-shadow(0 rpx(2) rpx(4) rgba($primary-color, 0.3));
|
|
|
- // 添加过渡动画
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- // 悬浮时放大效果
|
|
|
- .ai-icon:hover {
|
|
|
- transform: scale(1.5);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-text {
|
|
|
- color: $text-color;
|
|
|
- font-size: rpx(8);
|
|
|
- background-color: rgba(255, 255, 255, 0.7);
|
|
|
- padding: rpx(2) rpx(5);
|
|
|
- border-radius: rpx(5);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// AI对话弹出框样式
|
|
|
-.ai-dialog {
|
|
|
- .el-dialog__header {
|
|
|
- background: linear-gradient(90deg, $primary-color, $secondary-color);
|
|
|
- color: white;
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
- border-radius: rpx(10) rpx(10) 0 0;
|
|
|
-
|
|
|
- .el-dialog__title {
|
|
|
- font-size: rpx(12);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__body {
|
|
|
- padding: rpx(15);
|
|
|
- background-color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__footer {
|
|
|
- border-top: none;
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog {
|
|
|
- border-radius: rpx(10);
|
|
|
- box-shadow: 0 rpx(10) rpx(30) rgba(0, 0, 0, 0.15);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// AI消息样式
|
|
|
-.ai-message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: rpx(15);
|
|
|
-
|
|
|
- .ai-avatar {
|
|
|
- width: rpx(30);
|
|
|
- height: rpx(30);
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: rpx(10);
|
|
|
- background-color: $primary-color;
|
|
|
- padding: rpx(5);
|
|
|
- box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-text-content {
|
|
|
- background-color: $light-color;
|
|
|
- padding: rpx(8) rpx(12);
|
|
|
- border-radius: rpx(10);
|
|
|
- font-size: rpx(10);
|
|
|
- color: $text-color;
|
|
|
- max-width: 80%;
|
|
|
- box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 用户输入框样式
|
|
|
-.user-input {
|
|
|
- ::v-deep(.el-input__wrapper) {
|
|
|
- border-radius: rpx(15);
|
|
|
- border-color: rgba($primary-color, 0.3);
|
|
|
- margin-right: 10px;
|
|
|
-
|
|
|
- &:focus-within {
|
|
|
- box-shadow: 0 0 0 rpx(1) rgba($primary-color, 0.5);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.el-input__inner) {
|
|
|
- font-size: rpx(10);
|
|
|
- color: $text-color;
|
|
|
- text-indent: 1em;
|
|
|
- }
|
|
|
-}
|
|
|
-/* 定义淡入和缩放动画 */
|
|
|
-.fade-scale-enter-active,
|
|
|
-.fade-scale-leave-active {
|
|
|
- transition: all 0.5s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.fade-scale-enter-from,
|
|
|
-.fade-scale-leave-to {
|
|
|
- opacity: 0.1;
|
|
|
- transform: scale(0.9);
|
|
|
-}
|
|
|
-
|
|
|
-// 自定义试题弹框背景
|
|
|
-.child-dialog-wrapper {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.6); // 半透明背景
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
-
|
|
|
-.child-dialog {
|
|
|
- border: none;
|
|
|
- border-radius: rpx(20);
|
|
|
- background: linear-gradient(
|
|
|
- 135deg,
|
|
|
- $light-color,
|
|
|
- #d8bfd8
|
|
|
- ); // 柔和的蓝紫色渐变
|
|
|
- box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
|
|
|
- 0 0 40px 10px rgba($primary-color, 0.4),
|
|
|
- 0 0 60px 15px rgba($primary-color, 0.2);
|
|
|
- overflow: hidden;
|
|
|
- padding: rpx(20);
|
|
|
- width: 60%;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-// AI对话弹框样式
|
|
|
-.ai-dialog-wrapper {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- z-index: 1001;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ai-dialog {
|
|
|
- border: none;
|
|
|
- border-radius: rpx(20);
|
|
|
- background: linear-gradient(135deg, $light-color, #d8bfd8);
|
|
|
- box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
|
|
|
- 0 0 40px 10px rgba($primary-color, 0.4),
|
|
|
- 0 0 60px 15px rgba($primary-color, 0.2);
|
|
|
- overflow: hidden;
|
|
|
- padding: rpx(20);
|
|
|
- width: 30%;
|
|
|
- // 增加高度
|
|
|
- height: 80%;
|
|
|
- margin-right: rpx(50);
|
|
|
- pointer-events: auto;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: rpx(10);
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- $primary-color,
|
|
|
- $secondary-color,
|
|
|
- $accent-color
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ai-dialog-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: rpx(15);
|
|
|
-
|
|
|
- h3 {
|
|
|
- color: $text-color;
|
|
|
- font-size: rpx(12);
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn {
|
|
|
- padding: 0;
|
|
|
- width: rpx(20);
|
|
|
- height: rpx(20);
|
|
|
- font-size: rpx(16);
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ai-dialog-content {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.ai-message-history {
|
|
|
- flex: 1;
|
|
|
- // 当内容超出容器高度时，显示垂直滚动条
|
|
|
- overflow-y: auto;
|
|
|
- margin-bottom: rpx(15);
|
|
|
- // 可以根据实际情况调整最大高度
|
|
|
- max-height: 50vh;
|
|
|
- padding: 5px 10px;
|
|
|
-
|
|
|
- .message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: rpx(10);
|
|
|
-
|
|
|
- &.user {
|
|
|
- flex-direction: row-reverse;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: rpx(30);
|
|
|
- height: rpx(30);
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 rpx(10);
|
|
|
- }
|
|
|
-
|
|
|
- .user {
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .message-content {
|
|
|
- background-color: $light-color;
|
|
|
- padding: rpx(8) rpx(12);
|
|
|
- border-radius: rpx(10);
|
|
|
- font-size: rpx(10);
|
|
|
- color: $text-color;
|
|
|
- max-width: 80%;
|
|
|
- box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
- }
|
|
|
- // 滚动条整体样式
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: rpx(4); // 滚动条宽度
|
|
|
- }
|
|
|
-
|
|
|
- // 滚动条滑块样式
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: $primary-color; // 滑块颜色
|
|
|
- border-radius: rpx(4); // 滑块圆角
|
|
|
- transition: background-color 0.3s ease; // 颜色过渡效果
|
|
|
-
|
|
|
- &:hover {
|
|
|
- //background-color: darken($primary-color, 10%); // 悬停时滑块颜色加深
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 滚动条轨道样式
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background-color: rgba($primary-color, 0.2); // 轨道颜色
|
|
|
- border-radius: rpx(4); // 轨道圆角
|
|
|
- }
|
|
|
-
|
|
|
- .message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: rpx(10);
|
|
|
-
|
|
|
- &.user {
|
|
|
- flex-direction: row-reverse;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: rpx(30);
|
|
|
- height: rpx(30);
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 rpx(10);
|
|
|
- }
|
|
|
-
|
|
|
- .message-content {
|
|
|
- background-color: $light-color;
|
|
|
- padding: rpx(8) rpx(12);
|
|
|
- border-radius: rpx(10);
|
|
|
- font-size: rpx(10);
|
|
|
- color: $text-color;
|
|
|
- max-width: 80%;
|
|
|
- box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 优化发送按钮样式
|
|
|
-.send-button {
|
|
|
- //background: linear-gradient(90deg, $primary-color, $secondary-color);
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- //background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
丸子
