AIClass/src/components/HomePage.vue

<template>
  <div class="home-container">
    <div class="box-1">
      <div class="inner-box left-box">
        <span>京华实验学校</span>
        <div class="dropdown-box">
          <!-- 下拉菜单 -->
          <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" popper-class="no-arrow-dropdown">
            <el-button type="primary">
              {{ selectedGrade }}
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="dropdown-menu">
                <el-dropdown-item
                  v-for="item in classData"
                  :key="item.id"
                  :command="item.ctType"
                  >{{ item.ctType }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="inner-box right-box">
        <div class="top-right-box">
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI通识课' }"
            @click="selectedButton = 'AI通识课'"
            >AI通识课</el-button
          >
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI写作课' }"
            @click="
              ;(selectedButton = 'AI通识课'),
                Message().notifyWarning('演示版未开放此功能！！', true)
            "
            >AI写作课</el-button
          >
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI艺术课' }"
            @click="
              ;(selectedButton = 'AI通识课'),
                Message().notifyWarning('演示版未开放此功能！', true)
            "
            >AI艺术课</el-button
          >
          <!-- 退出登录 -->
          <!-- <div class="logout-box"> -->
          <el-button round class="logout-box-btn" @click="LogoutClick()">
            <img :src="logoutIcon" alt="Logout" />
            退出登录
          </el-button>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <div class="box-2">
      <div
        class="left-box-in-box2"
        @click="goToAIGeneralCourse('AI智能课')"
        :style="{ backgroundImage: `url(${indexImages[0]})` }"
      >
        <span>智能课</span>
      </div>
      <div
        class="center-box-in-box2"
        @click="goToAILab()"
        :style="{ backgroundImage: `url(${indexImages[1]})` }"
      >
        <span>AI实验室</span>
      </div>
      <div class="right-box-in-box2">
        <div
          class="top-sub-box"
          :style="{ backgroundImage: `url(${indexImages[2]})` }"
          @click="notOpen()"
        >
          <span>能力测评</span>
        </div>
        <div
          class="bottom-sub-box"
          :style="{ backgroundImage: `url(${indexImages[3]})` }"
          @click="notOpen()"
        >
          <span>个性化学习</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ClassList } from '@/api/class.js'
import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'

// 导入图片
import intelligenceImg from '@/assets/images/intelligence.png'
import roomImg from '@/assets/images/room.png'
import testImg from '@/assets/images/test.png'
import studyImg from '@/assets/images/study.png'

// 退出登录图标
import logoutIcon from '@/assets/icon/logout.png'
import { Message } from '@/utils/message/Message.js'

// 获取当前路由对象
const router = useRouter()
// 退出登录
const LogoutClick = () => {
  // 清空 token 和登录状态
  localStorage.removeItem('token')
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('maxCourseSections')
  router.push({ path: '/login' })
}

// 默认选中 AI 通识课
const selectedButton = ref('AI通识课')

// 添加图片路径
const indexImages = ref([intelligenceImg, roomImg, testImg, studyImg])
// AI初体验
const goToAIGeneralCourse = title => {
  router.push({ path: '/ai-general-course', query: { title } })
}
//AI实验室
const goToAILab = () => {
  router.push({
    path: '/ai-laboratory',
    // 跳转页面携带下拉菜单选中项的值
    query: { grade: selectedGrade.value }
  })
}

// 添加下拉菜单选中项
const selectedGrade = ref(localStorage.getItem('selectedGrade') || '')
// 获取年级
const classData = ref([])
const fetchCtTypes = async () => {
  try {
    const response = await ClassList()
    if (response.code === 0) {
      classData.value = response.data
      // 获取到数据，将第一个选项的值作为默认选中值
      if (classData.value.length > 0 && !selectedGrade.value) {
        selectedGrade.value = classData.value[0].ctType
        localStorage.setItem('selectedGrade', selectedGrade.value)
      }
    }
  } catch (error) {
    console.error('获取 ctType 数据失败:', error)
  }
}

// 监听 selectedGrade 变化，保存到 localStorage
watch(selectedGrade, (newValue) => {
  if (newValue) {
    localStorage.setItem('selectedGrade', newValue)
  }
})

// 处理下拉菜单选择
const handleGradeSelect = (command) => {
  selectedGrade.value = command
}

//AI实验室
const notOpen = () => {
  Message().notifyWarning(
    localStorage.getItem('userName') === 'aiTest'
      ? '您的账号并未开放此功能！'
      : '演示版未开放此功能！',
    true
  )
}

onMounted(() => {
  fetchCtTypes()
})

</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.logout-box {
  width: rpx(100);
  position: fixed;
}
.logout-box-btn {
  width: rpx(65); // 使用 rpx 函数设置按钮宽度
  height: rpx(15); // 使用 rpx 函数设置按钮高度
  margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
  background-color: transparent;
  color: white;
  border: none; // 移除默认边框
  font-size: rpx(7); // 使用 rpx 函数设置字体大小
  outline: none; // 移除默认的外边框
}
.logout-box-btn img {
  width: rpx(10);
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #001169, #8a78d0);
  display: flex;
  flex-direction: column;
  gap: rpx(0);
}
.box-1 {
  width: 100%;
  height: rpx(50);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(16); // 默认字体大小
}
.box-2 {
  width: 90%;
  margin: auto;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  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(12); // 默认字体大小
  color: white;
}
.left-box-in-box2,
.center-box-in-box2 {
  background-color: rgba(133, 135, 176, 0.5);
  border-radius: rpx(20);
  flex: 1; // 让三个盒子平均分配空间
  margin: 0 rpx(10); // 添加左右间距
  height: 85%; // 高度占满容器
  display: flex;
  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 {
  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); // 添加左右间距
  height: 85%; // 高度占满容器
  display: flex;
  // 确保两个子盒子上下排列
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: rpx(10);
}
.top-sub-box,
.bottom-sub-box {
  background-color: rgba(133, 135, 176, 0.5);
  flex: 1; // 让两个子盒子平均分配空间;
  display: flex;
  border-radius: rpx(20);
  width: 100%; // 宽度占满容器;
}
.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 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: rpx(16); // 默认字体大小
}

.left-box {
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1; // 设置左侧盒子占比为 2
  // background-color: #fff;
}

.left-box span {
  position: absolute;
  margin-top: rpx(20); // 调整上边距离
  margin-left: rpx(25);
  font-size: rpx(11); // 默认字体大小
  color: white;
}

.right-box {
  flex: 1;
  position: relative; // 添加相对定位;
  margin-right: rpx(25);
}
.top-right-box {
  position: absolute; // 添加绝对定位
  width: 100%; // 设置盒子宽度，可按需调整
  height: 60px; // 设置盒子高度，可按需调整
  display: flex;
  justify-content: flex-end;
  cursor: pointer; // 添加鼠标指针样式
}
.top-right-btn {
  width: rpx(50); // 使用 rpx 函数设置按钮宽度
  height: rpx(15); // 使用 rpx 函数设置按钮高度
  margin: rpx(10) rpx(5) 0 0; // 使用 rpx 函数设置外边距
  background-color: transparent;
  color: white;
  border: none; // 移除默认边框
  font-size: rpx(7); // 使用 rpx 函数设置字体大小
  outline: none; // 移除默认的外边框
}
.top-right-btn.is-active,
.top-right-btn:active,
.top-right-btn:focus {
  background-color: rgb(255, 255, 255, 0.7);
  border: 1px white solid;
  color: black;
  outline: none; // 移除点击时的外边框
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.dropdown-box {
  width: 100%;
  height: 100%;
  margin-left: rpx(-80);
  flex: 1;
  align-items: center; // 垂直居中;
  margin-top: rpx(22);
}


.dropdown-box .el-button {
  width: rpx(55); // 设置按钮宽度;
  height: rpx(15); // 设置按钮高度;
  background-color: rgb(255, 255, 255, 0.7);
  border: 1px white solid;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.3);
  color: black;
  border-radius: rpx(12);
  font-size: rpx(7); // 设置字体大小;
}
.dropdown-box .el-button:hover,
.dropdown-box .el-button:focus,
.dropdown-box .el-button:active {
  border: none; /* 移除悬停、聚焦、点击状态下的边框 */
  outline: none; /* 移除悬停、聚焦、点击状态下的轮廓线 el-scrollbar__view el-dropdown__list */
}
.dropdown-menu {
  width: rpx(100);
  height: rpx(60);
  border-radius: rpx(5);
  border: 1px white solid;
  background-color: rgba(161, 161, 161, 0.5);
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
}

.el-scrollbar__view .el-dropdown__list{
  background-color: transparent;
}

.dropdown-menu ::v-deep(.el-dropdown-menu__item) {
  font-size: rpx(8);
  color: black;
  border-radius: rpx(5);
  width: rpx(78);
  height: rpx(20);
  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),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:active) {
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  color: black;
}


.el-popper__arrow{
  display: none;
}
.el-popper.is-light,
.el-dropdown__popper.el-popper{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.el-dropdown__popper{
  --el-dropdown-menuItem-hover-color: none;
}

</style>