提交

src/components/HomePage.vue

@@ -42,22 +42,34 @@
             @click="selectedButton = 'AI艺术课'"
             >AI艺术课</el-button
           >
-          
         </div>
       </div>
     </div>
     <div class="box-2">
-      <div class="left-box-in-box2" @click="goToAIGeneralCourse">
+      <div
+        class="left-box-in-box2"
+        @click="goToAIGeneralCourse('AI智能课')"
+        :style="{ backgroundImage: `url(${indexImages[0]})` }"
+      >
         <span>智能课</span>
       </div>
-      <div class="center-box-in-box2">
+      <div
+        class="center-box-in-box2"
+        :style="{ backgroundImage: `url(${indexImages[1]})` }"
+      >
         <span>AI实验室</span>
       </div>
       <div class="right-box-in-box2">
-        <div class="top-sub-box">
+        <div
+          class="top-sub-box"
+          :style="{ backgroundImage: `url(${indexImages[2]})` }"
+        >
           <span>能力测评</span>
         </div>
-        <div class="bottom-sub-box">
+        <div
+          class="bottom-sub-box"
+          :style="{ backgroundImage: `url(${indexImages[3]})` }"
+        >
           <span>个性化学习</span>
         </div>
       </div>
@@ -67,17 +79,28 @@
 
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
 import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
-const selectedButton = ref('AI通识课') // 默认选中 AI 通识课
-const router = useRouter(); // 获取当前路由对象
-const goToAIGeneralCourse = () => {
-  router.push('/ai-general-course'); // 跳转到 智能课 页面
+// 默认选中 AI 通识课
+const selectedButton = ref('AI通识课') 
+// 获取当前路由对象
+const router = useRouter() 
+
+// 添加图片路径
+const indexImages = ref([
+  './src/assets/images/intelligence.png',
+  './src/assets/images/room.png',
+  './src/assets/images/test.png',
+  './src/assets/images/study.png'
+])
+const goToAIGeneralCourse = (title) => {
+  router.push({ path: '/ai-general-course', query: { title } });
 };
 
 // 添加下拉菜单选中项
 const selectedGrade = ref('小学低年级')
+// 下拉菜单切换高低年级界面
 
 </script>
 
@@ -87,7 +110,6 @@ const selectedGrade = ref('小学低年级')
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
-
 .home-container {
   position: fixed;
   top: 0;
@@ -99,7 +121,6 @@ const selectedGrade = ref('小学低年级')
   flex-direction: column;
   gap: rpx(0);
 }
-
 .box-1 {
   width: 100%;
   flex: 0.3;
@@ -109,7 +130,6 @@ const selectedGrade = ref('小学低年级')
   box-sizing: border-box;
   font-size: rpx(16); // 默认字体大小
 }
-
 .box-2 {
   width: 100%;
   flex: 2;
@@ -119,11 +139,12 @@ const selectedGrade = ref('小学低年级')
   box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
   box-sizing: border-box;
   padding: 0 rpx(20); // 添加左右内边距
+  cursor: pointer; // 添加鼠标指针样式
 }
 .box-2 span {
   // 添加 padding，使文字距上边和左边留有间距
   padding: rpx(10) 0 0 rpx(10);
-  font-size: rpx(8); // 默认字体大小
+  font-size: rpx(12); // 默认字体大小
   color: white;
 }
 .left-box-in-box2,
@@ -137,10 +158,17 @@ const selectedGrade = ref('小学低年级')
   justify-content: flex-start;
   align-items: flex-start;
 }
-.left-box-in-box2:hover, .left-box-in-box2:active, 
-.center-box-in-box2:hover, .center-box-in-box2:active {
+.left-box-in-box2:hover,
+.left-box-in-box2:active,
+.center-box-in-box2:hover,
+.center-box-in-box2:active {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
+.left-box-in-box2, .center-box-in-box2, .top-sub-box, .bottom-sub-box {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 .right-box-in-box2 {
   flex: 1; // 让三个盒子平均分配空间
   margin: 0 rpx(10); // 添加左右间距
@@ -160,8 +188,10 @@ const selectedGrade = ref('小学低年级')
   border-radius: rpx(20);
   width: 100%; // 宽度占满容器;
 }
-.top-sub-box:hover, .top-sub-box:active, 
-.bottom-sub-box:hover, .bottom-sub-box:active {
+.top-sub-box:hover,
+.top-sub-box:active,
+.bottom-sub-box:hover,
+.bottom-sub-box:active {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 .inner-box {
@@ -182,8 +212,8 @@ const selectedGrade = ref('小学低年级')
 
 .left-box span {
   position: absolute;
-  margin-top: rpx(20); // 调整上边距离 
-  margin-left: rpx(25); 
+  margin-top: rpx(20); // 调整上边距离
+  margin-left: rpx(25);
   font-size: rpx(11); // 默认字体大小
   color: white;
 }
@@ -194,11 +224,12 @@ const selectedGrade = ref('小学低年级')
 }
 .top-right-box {
   position: absolute; // 添加绝对定位
-  margin-right: rpx(35); 
+  margin-right: rpx(35);
   width: 100%; // 设置盒子宽度，可按需调整
   height: 60px; // 设置盒子高度，可按需调整
   display: flex;
   justify-content: flex-end;
+  cursor: pointer; // 添加鼠标指针样式
 }
 .top-right-btn {
   width: rpx(65); // 使用 rpx 函数设置按钮宽度
@@ -217,6 +248,7 @@ const selectedGrade = ref('小学低年级')
   color: black;
   border: none; // 移除点击时的边框
   outline: none; // 移除点击时的外边框
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 .dropdown-box {
   width: 100%;
@@ -243,18 +275,21 @@ const selectedGrade = ref('小学低年级')
 }
 .dropdown-menu {
   width: rpx(100);
-  height: rpx(65);
+  height: rpx(50);
   border-radius: rpx(6);
   background-color: rgba(165, 209, 247, 0.5);
   box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
 }
+// .el-dropdown__popper.el-popper
+
 .dropdown-menu ::v-deep(.el-dropdown-menu__item) {
   font-size: rpx(8);
   color: black;
   border-radius: rpx(6);
-  width: rpx(75);
-  height: rpx(25);
+  width: rpx(78);
+  height: rpx(15);
   margin-left: rpx(4);
+  margin-bottom: rpx(8);
 }
 .dropdown-menu ::v-deep(.el-dropdown-menu__item:hover),
 .dropdown-menu ::v-deep(.el-dropdown-menu__item:focus),

src/router/index.js

@@ -8,13 +8,18 @@ const routes = [
   {
     path: '/ai-general-course',
     component: () => import('../views/AIGeneralCourse.vue')
+  },
+  {
+    path: '/ai-initial-experience',
+    component: () => import('../views/AIInitialExperience.vue')
+  },
+  {
+    path: '/senior-grade',
+    component: () => import('../views/SeniorGrade.vue')
   }
-  // 可按需添加更多路由
 ]
-
 const router = createRouter({
   history: createWebHistory(),
   routes
 })
-
 export default router

src/style.css

@@ -1,12 +1,18 @@
+/* 添加字体声明 */
+@font-face {
+  font-family: 'SourceHanSansCN-Regular';
+  src: url('../assets/typeface/SourceHanSansCN-Regular_0.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'SourceHanSansCN-Regular';
+  /* font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; */
   line-height: 1.5;
-  font-weight: 400;
-
+  font-weight: normal;
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

src/views/AIGeneralCourse.vue

@@ -14,10 +14,10 @@
         教材大纲
         <!-- <el-icon><ArrowRightBold /></el-icon> -->
       </el-button>
-      <el-drawer v-model="drawerVisible" direction="ltr" size="20%">
+      <el-drawer v-model="drawerVisible" direction="ltr" size="19%">
         <el-row class="tac">
           <el-col :span="12">
-            <h2 class="mb-2">教材大纲</h2>
+            <h3 class="mb-2">教材大纲</h3>
             <el-menu
             default-active="1"
               class="el-menu-vertical-demo"
@@ -28,6 +28,7 @@
                 v-for="(title, index) in courseTitles"
                 :key="index + 1"
                 :index="(index + 1).toString()"
+                @click="goToAIExperience(index + 1)"
               >
                 <!-- <el-icon><icon-menu /></el-icon> -->
                 <span>0{{ index + 1 }} AI{{ title }}</span>
@@ -41,7 +42,7 @@
       <div class="inner-box left-box">
         <div class="box-icon" @click="goBack">
           <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-          AI智能课
+          {{pageTitle}}
         </div>
         <div class="dropdown-box">
           <!-- 下拉菜单 -->
@@ -63,7 +64,7 @@
         <div class="top-right-box">
           <el-input
             v-model="SearchInput"
-            style="width: 200px; height: 40px"
+            class="search-input"
             placeholder="搜索"
           >
             <template #prefix>
@@ -78,7 +79,7 @@
         class="small-box"
         v-for="(image, index) in courseImages"
         :key="index"
-        v-if="selectedGrade === '小学低年级'"
+        @click="goToAIExperience(index + 1)"
       >
         <div
           class="nested-box"
@@ -93,7 +94,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+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'
@@ -112,7 +113,20 @@ const selectedGrade = ref('小学低年级')
 const goBack = () => {
   router.go(-1) // 返回上一页
 }
-
+// 添加跳转课程页面的函数
+const goToAIExperience = (index) => {
+  const routes = [
+    '/ai-initial-experience',
+    // '/ai-development-history',
+  ];
+  const title = `0${index} AI${getCourseTitle(index)}`; // 定义 title 变量
+  if (index >= 1 && index <= routes.length) {
+    router.push({
+      path: routes[index - 1],
+      query:{title:title}
+    });
+  }
+}
 // 添加获取课程标题
 const getCourseTitle = index => {
   const titles = [
@@ -141,6 +155,14 @@ const courseImages = ref([
   './src/assets/images/seven.png',
   './src/assets/images/eight.png'
 ])
+// 首页点击渲染后的页面title
+const pageTitle = ref('')
+onMounted(()=>{
+  const title = router.currentRoute.value.query.title
+  if (title) {
+    pageTitle.value = title
+  }
+})
 </script>
 
 <style scoped lang="scss">
@@ -149,7 +171,6 @@ const courseImages = ref([
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
-
 .home-container {
   position: fixed;
   top: 0;
@@ -171,13 +192,13 @@ const courseImages = ref([
 }
 .el-menu-item{
   width: rpx(130);
-  height: rpx(25);
+  height: rpx(20);
   margin-bottom: rpx(10);
   border-radius: rpx(6);
 }
 .el-menu-item span{
   color: black;
-  font-size: rpx(8);
+  font-size: rpx(7);
 }
 .el-menu ::v-deep(.el-menu-item:hover),
 .el-menu ::v-deep(.el-menu-item:focus),
@@ -210,6 +231,21 @@ const courseImages = ref([
   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__header){
+  margin-bottom: rpx(0);
+}
+.drawer-box ::v-deep(.el-drawer__body)::-webkit-scrollbar {
+  width: rpx(4);
+}
+.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 {
@@ -218,7 +254,6 @@ const courseImages = ref([
   border: none; // 移除点击时的边框
   outline: none; // 移除点击时的外边框
 }
-
 .box-1 {
   width: 100%;
   flex: 0.3;
@@ -228,7 +263,6 @@ const courseImages = ref([
   box-sizing: border-box;
   font-size: rpx(16); // 默认字体大小
 }
-
 .inner-box {
   height: 100%;
   display: flex;
@@ -236,7 +270,6 @@ const courseImages = ref([
   align-items: center;
   font-size: rpx(16); // 默认字体大小
 }
-
 .left-box {
   position: relative;
   justify-content: flex-start;
@@ -246,12 +279,13 @@ const courseImages = ref([
 .box-icon {
   width: 100%;
   height: 100%;
-  flex: 0.5;
+  flex: 0.6;
   display: flex; // 添加 flex 布局
   align-items: center; // 垂直居中
   color: white; // 设置图标颜色为白色
   padding-left: rpx(15);
   font-size: rpx(10); // 设置图标大小，可按需调整
+  cursor: pointer; // 添加鼠标指针样式
 }
 .box-icon .left-icon {
   margin-left: rpx(10);
@@ -266,7 +300,7 @@ const courseImages = ref([
   color: white;
 }
 .dropdown-box {
-  width: 100%;
+  width: 50%;
   height: 100%;
   display: flex; // 添加 flex 布局;
   flex: 1;
@@ -289,7 +323,7 @@ const courseImages = ref([
 }
 .dropdown-menu {
   width: rpx(100);
-  height: rpx(65);
+  height: rpx(50);
   border-radius: rpx(6);
   background-color: rgba(165, 209, 247, 0.5);
   box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
@@ -298,9 +332,10 @@ const courseImages = ref([
   font-size: rpx(8);
   color: black;
   border-radius: rpx(6);
-  width: rpx(75);
-  height: rpx(25);
+  width: rpx(78);
+  height: rpx(15);
   margin-left: rpx(4);
+  margin-bottom: rpx(8);
 }
 .dropdown-menu ::v-deep(.el-dropdown-menu__item:hover),
 .dropdown-menu ::v-deep(.el-dropdown-menu__item:focus),
@@ -342,6 +377,11 @@ const courseImages = ref([
     color: white;
   }
 }
+.search-input{
+  width: rpx(100);
+  height: rpx(15);
+  font-size: rpx(7);
+}
 .box-2 {
   width: 100%;
   flex: 2;
@@ -351,6 +391,7 @@ const courseImages = ref([
   display: flex; // 确保子元素水平排列
   flex-wrap: wrap; // 允许子元素换行;
   align-content: center; // 顶部对齐;
+  cursor: pointer; // 添加鼠标指针样式
 }
 .small-box {
   flex: 0 0 calc(33.333% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
@@ -368,6 +409,7 @@ const courseImages = ref([
   height: rpx(80);
   border-radius: rpx(10);
   display: flex;
+  border: 1px solid white; // 添加边框;
   justify-content: center;
   align-items: center;
 }

src/views/AIInitialExperience.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="home-container">
+    <!-- 添加抽屉 -->
+    <!--   @mouseenter="buttonVisible = true" 
+        @mouseleave="buttonVisible = false"  -->
+    <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>

src/views/SeniorGrade.vue

@@ -0,0 +1,13 @@
+<template>
+  高年级界面
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vite.config.js

@@ -6,10 +6,5 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
-  // resolve: {
-  //   alias: {
-  //     '@': fileURLToPath(new URL('./src', import.meta.url))
-  //   }
-  // },
   base: './',
 })