|
|
@@ -0,0 +1,312 @@
|
|
|
+<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-icon><ArrowRightBold /></el-icon> -->
|
|
|
+ </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"
|
|
|
+ >
|
|
|
+ <el-menu-item
|
|
|
+ v-for="(title, index) in classTitles"
|
|
|
+ :key="index + 1"
|
|
|
+ :index="(index + 1).toString()"
|
|
|
+ >
|
|
|
+ <!-- <el-icon><icon-menu /></el-icon> -->
|
|
|
+ <span>{{ title }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </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">
|
|
|
+ <video class="full-box-video" controls>
|
|
|
+ <source src="" type="video/mp4">
|
|
|
+ 您的浏览器不支持视频播放。
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref,onMounted } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
|
|
|
+import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
|
|
|
+import { valueEquals } from 'element-plus'
|
|
|
+const router = useRouter() // 获取当前路由对象
|
|
|
+// 搜索框
|
|
|
+const SearchInput = ref('')
|
|
|
+// 添加按钮显示状态
|
|
|
+const buttonVisible = ref(false)
|
|
|
+// 添加抽屉显示状态
|
|
|
+const drawerVisible = ref(false)
|
|
|
+// 返回上一页
|
|
|
+const goBack = () => {
|
|
|
+ router.go(-1)
|
|
|
+}
|
|
|
+// 渲染标题
|
|
|
+const boxIconTitle = ref('')
|
|
|
+onMounted(() => {
|
|
|
+ const title = router.currentRoute.value.query.title
|
|
|
+ if(title){
|
|
|
+ boxIconTitle.value = String(title)
|
|
|
+ }
|
|
|
+})
|
|
|
+// 添加获取抽屉课节标题
|
|
|
+const classTitles = [
|
|
|
+ '课前回顾',
|
|
|
+ '课程引入',
|
|
|
+ '图灵测试',
|
|
|
+ '课堂提问',
|
|
|
+ '达特茅斯会议',
|
|
|
+ '课堂选择',
|
|
|
+ '聊天机器人',
|
|
|
+ '专家系统',
|
|
|
+ '课堂互动',
|
|
|
+ '互联网快速发展',
|
|
|
+ '黄金时代',
|
|
|
+ '课堂提问',
|
|
|
+ '大模型时代',
|
|
|
+ '趣味实操',
|
|
|
+ '课程总结'
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@use 'sass:math';
|
|
|
+// 定义rpx转换函数
|
|
|
+@function rpx($px) {
|
|
|
+ @return math.div($px, 750) * 100vw;
|
|
|
+}
|
|
|
+.home-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(to bottom, #08105e, #8271c8);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: rpx(0);
|
|
|
+}
|
|
|
+.tac .el-menu {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.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(7);
|
|
|
+}
|
|
|
+.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);
|
|
|
+ background-color: rgba(165, 209, 247, 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%;
|
|
|
+ flex: 0.3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: rpx(16); // 默认字体大小
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ font-size: rpx(11); // 默认字体大小
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.right-box {
|
|
|
+ flex: 2;
|
|
|
+ position: relative; // 添加相对定位;
|
|
|
+}
|
|
|
+.top-right-box {
|
|
|
+ position: absolute; // 添加绝对定位
|
|
|
+ margin-top: rpx(10); // 调整上边距离
|
|
|
+ margin-right: rpx(50); // 调整右边距离
|
|
|
+ width: 100%; // 设置盒子宽度，可按需调整
|
|
|
+ height: 60px; // 设置盒子高度，可按需调整
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.top-right-box {
|
|
|
+ ::v-deep(.el-input__wrapper) {
|
|
|
+ background-color: transparent;
|
|
|
+ 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: white;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 搜索框
|
|
|
+.search-input{
|
|
|
+ width: rpx(100);
|
|
|
+ height: rpx(15);
|
|
|
+ font-size: rpx(7);
|
|
|
+}
|
|
|
+.box-2 {
|
|
|
+ width: 100%;
|
|
|
+ flex: 2;
|
|
|
+ box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 rpx(30); // 添加左右内边距
|
|
|
+ display: flex; // 确保子元素水平排列
|
|
|
+ flex-wrap: wrap; // 允许子元素换行;
|
|
|
+ align-content: center; // 顶部对齐;
|
|
|
+ cursor: pointer; // 添加鼠标指针样式
|
|
|
+ video.full-box-video {
|
|
|
+ width: 90%;
|
|
|
+ height: 90%;
|
|
|
+ margin: auto;
|
|
|
+ border-radius: rpx(12);
|
|
|
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
|
+ object-fit: cover;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
