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 ? '20%' : '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
                    v-if="menuInitialized"
                    :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="handleMenuClick(menu)"
                  >
                    <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">

        <SpeechRecognition />
        <br/>

        <!-- 自主学习组件，只在AI自主学习时显示 -->
        <SelfDirectedLearning v-if="currentOpenedMenu === menuConfigTemp[3].id"
                              @refreshData="refreshData" />

        <div
            class="small-box"
            v-for="(outlineData, index) in currentCourseData"
            :key="index"
        >
          <div
              class="nested-box"
              :style="{
              backgroundImage: `url(${outlineData.ctTypeImage})`,
              backgroundSize: 'cover'
            }"
              @click="goToAIExperience(outlineData)"
          ></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'
// 导入自主学习组件
import SelfDirectedLearning from '@/components/study/SelfDirectedLearning.vue'
import DialogContent from "@/views/AIPage/aiGenerate/DialogContent.vue";
import {teacherList} from "@/api/teachers.js";
import { CONFIG } from '@/utils/roleUtils.js'


const router = useRouter() // 获取当前路由对象
// 下拉菜单选中项
const selectedGrade = ref('')
// 抽屉显示状态
const drawerVisible = ref(true)
// 下拉框可见性状态
const dropdownVisible = ref(false)
// 处理下拉框显示/隐藏事件
const handleVisibleChange = (visible) => {
  dropdownVisible.value = visible
}


// 课程数据管理 - 拆分成独立的数组
const generalCourseData = ref([])
const practicalCourseData = ref([])
const aiCourseData = ref([])
const selfStudyCourseData = ref([])

// 菜单配置
const menuConfigTemp = [
  { id: '/general', title: 'AI通识课', type: '1', data: generalCourseData },
  { id: '/practical', title: 'AI实操课', type: '2', data: practicalCourseData },
  { id: '/poetry', title: 'AI古诗词', type: '3', data: aiCourseData },
  { id: '/selfstudy', title: 'AI自主学习', type: '4', data: selfStudyCourseData }
]


const menuConfig = computed(() => {
  return menuConfigTemp.filter(item=> {
    return roleRouteMenuSet.value.includes(item.id)
  })

})
// 菜单列表计算属性
const menuList = computed(() => {
  return menuConfig.value.map(menu => ({
    ...menu,
    data: menu.data.value
  }))
})

// 获取角色路由菜单集合
const roleRouteMenuSet = computed(() => {
  try {
    const roleRouteMenuStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_MENU_KEY)
    return roleRouteMenuStr ? JSON.parse(roleRouteMenuStr) : []
  } catch (error) {
    console.error('Error parsing roleRouteMenuSet:', error)
    return []
  }
})
// 当前选中的菜单索引
const currentActiveIndex = ref('/general-1')
// 当前打开的菜单
const currentOpenedMenu = ref('/general')
// 菜单初始化状态
const menuInitialized = ref(false)
// 存储选中状态的键名
const activeMenuKey = 'aiGeneralCourseActiveMenu'
const activeIndexKey = 'aiGeneralCourseActiveIndex'

// 处理课程数据，添加序号
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 refreshData = async () => {

  const res = await ClassOutline(localStorage.getItem('selectedGradeId'), menuConfigTemp[3].type)
  if (res.code === 0) {
    selfStudyCourseData.value = processCourseData(res.data)
  }
}

// 统一函数来获取课程大纲数据 通识课/实操课/AI生成课
const fetchClassOutline = async (classId) => {
  try {
    // 并行获取所有课程类型数据
    await Promise.all(menuConfig.value.map(async (menu) => {
      const res = await ClassOutline(classId, menu.type)
      if (res.code === 0) {
        menu.data.value = processCourseData(res.data)
      }
    }))
  } catch (error) {
    console.error('获取课程大纲数据失败:', error)
  }
}

// 处理菜单点击
const handleMenuClick = (menu) => {
  currentOpenedMenu.value = menu.id
  saveActiveState(menu.id, menu.id)

  // 清空搜索框内容
  SearchInput.value = ''

  // 如果该菜单下有课程数据，设置默认选中第一项
  if (menu.data.value && menu.data.value.length > 0) {
    currentActiveIndex.value = menu.id + '-1'
  }
}

// 处理下拉菜单选择
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(() => {
      // 数据加载完成后，恢复之前的菜单选中状态
      const savedMenu = localStorage.getItem(activeMenuKey)
      const savedIndex = localStorage.getItem(activeIndexKey)
      if (savedMenu && savedIndex) {
        currentOpenedMenu.value = savedMenu
        currentActiveIndex.value = savedIndex
      }
    })
  }
}
// 切换抽屉显示状态的函数
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
  }

  // 标记菜单已初始化，触发el-menu重新渲染
  menuInitialized.value = true



  // const title = history.state?.title
  // if (title) {
  //   pageTitle.value = title
  // }
})


// 搜索框
const SearchInput = ref('')
// 用于强制重新渲染搜索组件的key
const searchKey = ref(Date.now())
// 当前显示的课程数据
const currentCourseData = computed(() => {
  const menu = menuConfig.value.find(m => m.id == currentOpenedMenu.value)
  return (menu && menu.data.value) || generalCourseData.value
})

// 搜索建议查询方法
const querySearch = (queryString, cb) => {
  const data = currentCourseData.value
  const results = queryString
      ? data.filter(item => {
        // 课程标题和序号查询
        return item.ctType.toLowerCase().includes(queryString.toLowerCase()) ||
            // 类型检查，确保ctTypeSort是字符串类型
            (item.ctTypeSort && item.ctTypeSort.toString().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()) ||
      // 类型检查，确保ctTypeSort是字符串类型
      (title.ctTypeSort && title.ctTypeSort.toString().includes(SearchInput.value))
  )
})



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

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

const goToAIExperience = outlineData => {
  // 确定当前课程所属的菜单类型
  const menuId = currentOpenedMenu.value

  // 找到当前课程在对应菜单中的索引
  const menu = menuConfig.value.find(m => m.id === menuId)
  const currentData = menu ? menu.data.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(150);
  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(130);
  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(130);
  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>