AIClass/src/views/AIPage/AIGeneralCourse.vue

<template>
  <!-- AI智能课 -->
  <div class="home-container">
    <!-- 展开收起侧边栏 -->
    <div class="sidebar-container">
      <div class="sidebar-layout">
        <div
          class="icon-expand"
          :style="{
            backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
            left: drawerVisible ? '18%' : '0'
          }"
          @click="toggleDrawer"
        >
          <span
            class="vertical-lines"
            :style="{
              color: drawerVisible ? '#8a78d0' : 'white'
            }"
            >||</span
          >
        </div>
      </div>

      <transition name="drawer-slide">
        <div class="main-content" v-if="drawerVisible">
          <!-- 菜单栏 -->
          <div class="drawer-box">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu
                  :default-active="currentActiveIndex"
                  :default-openeds="[currentOpenedMenu]"
                  :class="{ 'el-menu-vertical-demo': true }"
                  unique-opened
                >
                  <!-- 课程菜单 -->
                  <el-sub-menu 
                    v-for="menu in menuList" 
                    :key="menu.id"
                    :index="menu.id"
                    @click="showPracticalCourse = menu.isPractical; showAICourse = menu.isAICourse; currentOpenedMenu = menu.id"
                  >
                    <template #title>
                      <span>{{ menu.title }}</span>
                    </template>
                    <el-menu-item
                      v-for="(item, index) in menu.data"
                      :key="menu.id + '-' + index"
                      :index="menu.id + '-' + (index + 1).toString()"
                      @click="goToAIExperience(item)"
                    >
                      {{ item.ctTypeSort }} {{ item.ctType }}
                    </el-menu-item>
                  </el-sub-menu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </div>
      </transition>
    </div>

    <div class="content-box">
      <div class="box-1">
        <div class="inner-box left-box">
          <div class="box-icon" @click="goBack">
            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
            {{ pageTitle }}
          </div>
          <div class="dropdown-box">
            <!-- 下拉菜单 -->
            <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" @visible-change="handleVisibleChange">
              <el-button type="primary">
                {{ selectedGrade }}
                <!-- 根据下拉框状态显示不同的箭头图标 -->
                <el-icon class="el-icon--right" v-if="!dropdownVisible"><ArrowDownBold /></el-icon>
                <el-icon class="el-icon--right" v-else><ArrowUpBold /></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-autocomplete
              v-model="SearchInput"
              :fetch-suggestions="querySearch"
              placeholder="搜索"
              @select="handleSearchSelect"
              class="search-input"
              value-key="ctType"
              :trigger-on-focus="false"
              :key="searchKey"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <!-- 下拉项模板 -->
              <template #default="{ item }">
                <div class="scrollbar">
                  <!-- 序号和标题 -->
                  {{ item.ctTypeSort }} {{ item.ctType }}
                </div>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </div>

      <div class="box-2">
        <div
          class="small-box"
          v-for="(outlineData, index) in currentCourseData"
          :key="index"
          @click="goToAIExperience(outlineData)"
        >
          <div
            class="nested-box"
            :style="{
              backgroundImage: `url(${outlineData.ctTypeImage})`,
              backgroundSize: 'cover'
            }"
          ></div>
          <div class="additional-text">
            {{ outlineData.ctTypeSort }} {{ outlineData.ctType }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'

import { ClassList, ClassOutline } from '@/api/class.js'
//  Element Plus 组件引入
import {
  ArrowUpBold,
  ArrowDownBold,
  ArrowRightBold,
  Expand,
  Reading,
  Fold,
  Tickets
} from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
import { ElAutocomplete } from 'element-plus' // 导入ElAutocomplete组件
import { Message } from '@/utils/message/Message.js'
import { useRouter } from 'vue-router'
import teachingImg from '@/assets/icon/teaching.png'

const router = useRouter() // 获取当前路由对象
// 下拉菜单选中项
const selectedGrade = ref('')
// 抽屉显示状态
const drawerVisible = ref(true)
// 下拉框可见性状态
const dropdownVisible = ref(false)
// 处理下拉框显示/隐藏事件
const handleVisibleChange = (visible) => {
  dropdownVisible.value = visible
}
// 通识课
const classOutlineData = ref([])
// 实操课
const practicalCourseData = ref([])
// AI生成课
const aiGeneratedCourseData = ref([])
// 状态变量，跟踪当前显示的是通识课、实操课还是AI生成课
const showPracticalCourse = ref(false)
// 状态变量，跟踪当前显示的是实操课还是AI生成课
const showAICourse = ref(false)
// 当前选中的菜单索引
const currentActiveIndex = ref('general-1')
// 当前打开的菜单
const currentOpenedMenu = ref('general')
// 存储选中状态的键名
const activeMenuKey = 'aiGeneralCourseActiveMenu'
const activeIndexKey = 'aiGeneralCourseActiveIndex'

// 菜单列表计算属性
const menuList = computed(() => [
  {
    id: 'general',
    title: '通识课',
    data: classOutlineData.value,
    isPractical: false,
    isAICourse: false
  },
  {
    id: 'practical',
    title: '实操课',
    data: practicalCourseData.value,
    isPractical: true,
    isAICourse: false
  },
  {
    id: 'ai',
    title: 'AI生成课',
    data: aiGeneratedCourseData.value,
    isPractical: false,
    isAICourse: true
  }
])

// 处理课程数据，添加序号
const processCourseData = (data) => {
  return data.map((item, index) => {
    item.ctTypeSort = index + 1
    item.ctTypeSort = item.ctTypeSort > 9 ? item.ctTypeSort : "0" + item.ctTypeSort
    return item
  })
}

// 保存当前选中状态
const saveActiveState = (menuId, index) => {
  localStorage.setItem(activeMenuKey, menuId)
  localStorage.setItem(activeIndexKey, index)
}

// 统一函数来获取课程大纲数据 通识课/实操课/AI生成课
const fetchClassOutline = async (classId) => {
  try {
    // 课程类型配置
    const courseTypes = [
      { type: "1", dataRef: classOutlineData },
      { type: "2", dataRef: practicalCourseData },
      { type: "3", dataRef: aiGeneratedCourseData }
    ]
    // 并行获取所有课程类型数据
    await Promise.all(courseTypes.map(async (courseType) => {
      const res = await ClassOutline(classId, courseType.type)
      console.log(res)
      if (res.code === 0) {
        courseType.dataRef.value = processCourseData(res.data)
      }
    }))
  } catch (error) {
    console.error('获取课程大纲数据失败:', error)
  }
}

// 处理下拉菜单选择
const handleGradeSelect = command => {
  selectedGrade.value = command
  // 保存选中值到localStorage
  localStorage.setItem('selectedGrade', command)
  // 年级切换时重新加载数据的逻辑
  const selectedItem = classData.value.find(item => item.ctType === command)
  // 清空搜索框内容
  SearchInput.value = ''
  // 存储年级id
  if (selectedItem) {
    localStorage.setItem('selectedGradeId', selectedItem.id)
    // 获取课程大纲
    fetchClassOutline(selectedItem.id).then(() => {
      // 检查是否当前显示的是实操课但没有实操课数据
      // if (showPracticalCourse.value && ClassOutlineScData.value.length === 0) {
      //   // 切换回通识课
      //   showPracticalCourse.value = false
      //   // 显示提示
      //   Message().notifyWarning('此版本未开放，敬请期待！', true)
      //   // 更新localStorage中的状态
      //   localStorage.setItem('showPracticalCourse', 'false')
      // }
    })
  }
}
// 切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}
// 获取年级
const classData = ref([])


const fetchCtTypes = async () => {
  try {
    const response = await ClassList()
    if (response.code === 0) {
      classData.value = response.data
      // 获取到数据，优先从localStorage读取选中值
      const savedGrade = localStorage.getItem('selectedGrade')
      selectedGrade.value =
        savedGrade ||
        (classData.value.length > 0 ? classData.value[0].ctType : '')
      // 初始化时获取课程大纲数据
      const selectedItem =
        classData.value.find(item => item.ctType === selectedGrade.value) ||
        classData.value[0]
      if (selectedItem) {
        // 使用新函数获取课程大纲
        fetchClassOutline(selectedItem.id)
      }
    }
  } catch (error) {
    console.error('获取 ctType 数据失败:', error)
  }
}

// 获取课程标题
const getCourseTitle = index => {
  if (
    classOutlineData.value.length > 0 &&
    index > 0 &&
    index <= classOutlineData.value.length
  ) {
    return classOutlineData.value[index - 1].ctType
  }
  return ''
}

// 首页点击渲染后的页面title
const pageTitle = ref('返回首页')
onMounted(() => {
  fetchCtTypes()
  // 读取之前保存的选中状态
  const savedMenu = localStorage.getItem(activeMenuKey)
  const savedIndex = localStorage.getItem(activeIndexKey)
  
  if (savedMenu && savedIndex) {
    currentOpenedMenu.value = savedMenu
    currentActiveIndex.value = savedIndex
    
    // 根据保存的菜单类型设置对应的显示状态
    showPracticalCourse.value = savedMenu === 'practical'
    showAICourse.value = savedMenu === 'ai'
  }
  
  // const title = history.state?.title
  // if (title) {
  //   pageTitle.value = title
  // }
})


// 搜索框
const SearchInput = ref('')
// 用于强制重新渲染搜索组件的key
const searchKey = ref(Date.now())
// 当前显示的课程数据
const currentCourseData = computed(() => {
  if (showAICourse.value) return aiGeneratedCourseData.value
  if (showPracticalCourse.value) return practicalCourseData.value
  return classOutlineData.value
})

// 搜索建议查询方法
const querySearch = (queryString, cb) => {
  const data = currentCourseData.value
  const results = queryString
    ? data.filter(item => {
        // 课程标题和序号查询
        return item.ctType.toLowerCase().includes(queryString.toLowerCase()) ||
               item.ctTypeSort.includes(queryString)
      })
    : data
  cb(results)
}

// 搜索选择处理方法
const handleSearchSelect = item => {
  goToAIExperience(item)
  // 清空输入框
  SearchInput.value = '';
}

// 修改过滤逻辑，直接使用currentCourseData
const filteredTitles = computed(() => {
  const data = currentCourseData.value
  if (!SearchInput.value) {
    return data
  }
  return data.filter(title =>
    title.ctType.toLowerCase().includes(SearchInput.value.toLowerCase()) ||
    title.ctTypeSort.includes(SearchInput.value)
  )
})



// 添加按钮显示状态
const buttonVisible = ref(false)

const goBack = () => {
  router.push('/home') // 跳转到HomePage
}

const goToAIExperience = outlineData => {
  // 确定当前课程所属的菜单类型
  let menuId = 'general'
  if (showPracticalCourse.value) {
    menuId = 'practical'
  } else if (showAICourse.value) {
    menuId = 'ai'
  }
  
  // 找到当前课程在对应菜单中的索引
  const currentData = showPracticalCourse.value ? practicalCourseData.value : 
                     showAICourse.value ? aiGeneratedCourseData.value : classOutlineData.value
  const index = currentData.findIndex(item => item.id === outlineData.id)
  
  if (index !== -1) {
    const menuIndex = menuId + '-' + (index + 1)
    // 保存选中状态
    saveActiveState(menuId, menuIndex)
  }
  
  // 课程跳转逻辑
  router.push({
    path: '/ai-develop', // 跳转视频页面
    state: { typeId: outlineData.id, typeName: outlineData.ctType, typeSort: outlineData.ctTypeSort }
  })
}
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

/* 添加过渡样式 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.3s ease;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  gap: rpx(0);
}
.sidebar-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.icon-wrapper {
  width: 40px; /* 根据实际需要调整宽度 */
  flex-shrink: 0;
  background-color: saddlebrown;
}
.main-content {
  width: rpx(135);
  height: 100%;
  flex-grow: 1;
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);  position: relative;
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: 100%; /* 设置最大高度 */
  transition: all 0.3s ease;
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: rpx(0); // 滚动条宽度
  }
  &::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1); // 滚动条轨道背景色
    border-radius: rpx(2); // 滚动条轨道圆角
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); // 滚动条滑块颜色
    border-radius: rpx(2); // 滚动条滑块圆角
    transition: background-color 0.3s ease; // 滑块颜色过渡效果
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); // 鼠标悬停时的滑块颜色
  }
}
.icon-expand {
  width: rpx(8);
  height: rpx(35);
  border-top-right-radius: rpx(5);
  border-bottom-right-radius: rpx(5);
  z-index: 9999;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer; // 鼠标指针样式
  // 修改裁剪路径使右侧边缘垂直无缝贴合
  clip-path: polygon(0 0, 100% 15%, 100% 90%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  // 统一过渡时间与菜单保持同步
  transition: all 0.3s ease;
}
.icon-expand .vertical-lines {
  color: #8a78d0;
  font-size: rpx(10);
}
.content-box {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子元素上下排列 */
  background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.tac .el-menu {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-left: rpx(10);
  margin-top: rpx(10);
}
.el-sub-menu ::v-deep(.el-menu){
  background-color: transparent;
}
.el-menu-item {
  width: rpx(115);
  height: rpx(25);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}

.el-sub-menu ::v-deep(.el-sub-menu__title) {
  width: rpx(115);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(9);
  font-weight: bold;
  padding-left: rpx(10) !important;
  height: rpx(25);
  line-height: rpx(30);
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  // flex布局使标题和图标两端对齐
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-sub-menu ::v-deep(.el-sub-menu__title:hover) {
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  );
  color: black;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
}

.el-sub-menu.is-opened ::v-deep(.el-sub-menu__title) {
    background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  );
    color: black;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
}

.el-sub-menu ::v-deep(.el-icon) {
  font-size: rpx(12);
  color: white;
}

// 添加折叠图标样式
.el-sub-menu ::v-deep(.el-sub-menu__icon-arrow) {
  color: white;
  font-size: rpx(10);
  margin-left: auto; // 将图标推到右侧
  margin-top: rpx(-5);
  display: block;
  width: rpx(16); // 确保有明确宽度
}

.el-sub-menu.is-opened ::v-deep(.el-icon) {
  color: black;
}

.el-sub-menu ::v-deep(.el-sub-menu__title:hover .el-icon) {
  color: black;
}

.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,
    #ffefb0,
    #ffcc00
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
  color: black;
}

.drawer-box {
  position: absolute;
  display: flex;
  // align-items: center;
  margin-top: rpx(10);
  height: 100%;
  width: 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__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 {
  background-color: rgba(165, 209, 247, 0.8);
  color: black;
  border: none; // 移除点击时的边框
  outline: none; // 移除点击时的外边框
}
.box-1 {
  width: 100%;
  height: rpx(50);
  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: left;
  flex: 1;
  display: flex;
  align-items: center;
  gap: rpx(5); // 间距控制
}

.box-icon {
  height: 100%;
  display: flex;
  align-items: center; // 垂直居中
  color: black; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
  cursor: pointer; // 鼠标指针样式
  z-index: 999;
}
// .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;
}
.dropdown-box {
  height: 100%;
  display: flex; // flex 布局;
  align-items: center; // 垂直居中;
}
.dropdown-box .el-button {
  width: rpx(60); // 设置按钮宽度;
  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: none;
  margin-left: rpx(10);
  border-radius: rpx(12);
  font-size: rpx(8); // 设置字体大小;
}
.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);
  border-radius: rpx(5);
  border: 1px white solid;
  background-color: rgb(255, 255, 255, 0.5);
  backdrop-filter: blur(rpx(5));
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  margin-left: rpx(40);
}
.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
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.right-box {
  flex: 1;
  position: relative; // 添加相对定位;
  // background-color: #fff;
  display: flex;
  justify-content: right;
  align-items: center;
}
.top-right-box {
   width: rpx(130);
  display: flex;
  justify-content: flex;
}
.top-right-box {
  ::v-deep(.el-input__wrapper) {
    height: rpx(15);
    font-size: rpx(6);
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: rpx(12);
    border: white 1px solid;
    color: #aaa5c5;
  }
  ::v-deep(.el-input__icon) {
    color: #aaa5c5; // 设置输入框图标颜色为白色
  }
  // 添加占位符样式
  ::v-deep(.el-input__inner::placeholder) {
    color: #aaa5c5;
  }
  // 添加输入框文字颜色样式
  ::v-deep(.el-input__inner) {
    color: black;
  }
  ::v-deep(.el-input--prefix){
    width: rpx(100);
    text-align: right;
  }
}
// 搜索
.search-input {
  width: rpx(200); // 增加搜索框宽度
  height: rpx(30); // 增加搜索框高度
  font-size: rpx(9);
  border-radius: rpx(8); // 添加圆角
  border: 1px solid #dcdfe6; // 添加边框
}
::v-deep(.el-input__inner) {
  color: #333; // 调整文字颜色
}


.box-2 {
  width: 100%;
  // flex: 1;
  box-sizing: border-box;
  display: flex; // 确保子元素水平排列
  flex-wrap: wrap; // 允许子元素换行;
  cursor: pointer; // 添加鼠标指针样式
  // margin: rpx(10) 0; 
  overflow-y: auto;
}
// Chrome、Edge等浏览器的滚动条样式
.box-2::-webkit-scrollbar {
  width: rpx(2);
}
.box-2::-webkit-scrollbar-track {
  background: transparent; // 设置滚动条轨道背景
  border-radius: rpx(3); // 设置滚动条轨道圆角
}
.box-2::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
  border-radius: rpx(3); // 设置滚动条滑块圆角
}
.box-2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
}
.small-box {
  flex: 0 0 calc(33.333% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
  margin-left: rpx(10); // 设置小盒子间距
  margin-top: rpx(3); // 设置小盒子间距
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: black;
  font-size: rpx(8);
}
.nested-box {
  width: rpx(150);
  height: rpx(80);
  border-radius: rpx(10);
  margin-top: rpx(5);
  display: flex;
  border: 1px solid white; // 添加边框;
  justify-content: center;
  align-items: center;
}
.nested-box:hover,
.nested-box:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.additional-text {
  margin-bottom: rpx(4);
  font-size: rpx(8);
}
</style>

<style lang="scss">
/* 消除小三角 */
.el-popper__arrow {
  display: none;
}
.el-popper.is-light,
.el-dropdown__popper.el-popper {
  background: transparent;
  border: none;
  box-shadow: none;
}
.el-dropdown__popper {
  --el-dropdown-menuItem-hover-color: none;
}
</style>

<style lang='scss'>
// 搜索下拉框样式
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
 .el-autocomplete-suggestion .el-scrollbar__wrap{
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid white;
  border-radius: rpx(5);
  backdrop-filter: blur(rpx(5));
}
 .el-autocomplete-suggestion li{
  color: black;
  font-size: rpx(7);
  padding: rpx(5) rpx(8); // 调整下拉项内边距
}
 .el-autocomplete-suggestion li:hover{
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  );
}
</style>