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">
            <el-button type="primary">
              {{ selectedGrade
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="dropdown-menu">
                <el-dropdown-item>小学低年级</el-dropdown-item>
                <el-dropdown-item>小学高年级</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写作课'"
            >AI写作课</el-button
          >
          <el-button
            round
            class="top-right-btn"
            :class="{ 'is-active': selectedButton === 'AI艺术课' }"
            @click="selectedButton = 'AI艺术课'"
            >AI艺术课</el-button
          >
        </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"
        :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]})` }"
        >
          <span>能力测评</span>
        </div>
        <div
          class="bottom-sub-box"
          :style="{ backgroundImage: `url(${indexImages[3]})` }"
        >
          <span>个性化学习</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
// 默认选中 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>

<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);
}
.box-1 {
  width: 100%;
  flex: 0.3;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(16); // 默认字体大小
}
.box-2 {
  width: 100%;
  flex: 2;
  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: 75%; // 高度占满容器
  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: 75%; // 高度占满容器
  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: 2;
  position: relative; // 添加相对定位;
}
.top-right-box {
  position: absolute; // 添加绝对定位
  margin-right: rpx(35);
  width: 100%; // 设置盒子宽度，可按需调整
  height: 60px; // 设置盒子高度，可按需调整
  display: flex;
  justify-content: flex-end;
  cursor: pointer; // 添加鼠标指针样式
}
.top-right-btn {
  width: rpx(65); // 使用 rpx 函数设置按钮宽度
  height: rpx(15); // 使用 rpx 函数设置按钮高度
  margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
  background-color: #8587b0;
  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: white; // 点击选中后白色背景色
  color: black;
  border: none; // 移除点击时的边框
  outline: none; // 移除点击时的外边框
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.dropdown-box {
  width: 100%;
  height: 100%;
  display: flex; // 添加 flex 布局;
  flex: 1;
  align-items: center; // 垂直居中;
  padding-left: rpx(25); // 添加右侧内边距;
  margin-top: rpx(25);
}
.dropdown-box .el-button {
  width: rpx(65); // 设置按钮宽度;
  height: rpx(15); // 设置按钮高度;
  background-color: white;
  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(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(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),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:active) {
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
</style>