AIClass/src/views/gamepage/GameIndex.vue

<template>
  <!-- 游戏页面 -->
  <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">
                <span class="mb-2">
                  <img :src="teachingImg" alt="游戏" />
                  游戏列表
                </span>
                <el-menu
                  default-active="1"
                  :class="{ 'el-menu-vertical-demo': true }"
                >
                  <el-menu-item
                    v-for="(title, index) in gameTitles"
                    :key="index + 1"
                    :index="(index + 1).toString()"
                    @click="goToGame(gameData[index])"
                  >
                   {{ title }}
                  </el-menu-item>
                </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>
        <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="typeName"
              :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.gameSort }} {{ item.typeName }}
                </div>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </div>

      <div class="box-2">
        <div
          class="small-box"
          v-for="(game, index) in gameData"
          :key="index"
          @click="goToGame(game)"
        >
          <div
            class="nested-box"
            :style="{
              backgroundImage: `url(${game.gameImage})`,
              backgroundSize: 'cover'
            }"
          ></div>
          <div class="additional-text">
            {{ game.gameSort }} {{ game.typeName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
// Element Plus 组件引入
import { ArrowDown, Search, ArrowLeftBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import teachingImg from '@/assets/icon/teaching.png'
// 引入游戏列表接口
import { GameList } from '@/api/game/game.js'

// 获取当前路由对象
const router = useRouter() 
// 页面标题
const pageTitle = ref('返回虚拟实验室')
// 抽屉显示状态
const drawerVisible = ref(true)
// 游戏数据
const gameData = ref([])

// 获取游戏列表
onMounted(() => {
  GameList().then(res => {
    // 根据接口返回的数据结构
    if (res && res.data) {
      console.log(res);
      // 处理返回的数据
      gameData.value = res.data.list.map(item => {
        let sortNum = item.sort || 0;
        sortNum = sortNum > 9 ? sortNum : "0" + sortNum;
        return {
          id: item.id,
          typeName: item.name,
          gameImage: item.mapBackground,
          gameSort: sortNum
        };
      })
      // 重新渲染搜索组件
      searchKey.value = Date.now()
    }
  }).catch(error => {
    console.error('获取游戏列表失败:', error)
  })
})
// 切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}
// 游戏标题数组
const gameTitles = computed(() => {
  return gameData.value.map(item => {
    return `${item.gameSort} ${item.typeName}`;
  });
})
// 搜索框
const SearchInput = ref('')
// 用于强制重新渲染搜索组件的key
const searchKey = ref(Date.now())
// 搜索建议查询方法
const querySearch = (queryString, cb) => {
  const results = queryString
    ? gameData.value.filter(item => {
        // 游戏标题和序号查询
        return item.typeName.toLowerCase().includes(queryString.toLowerCase()) ||
               item.gameSort.includes(queryString)
      })
    : gameData.value
  cb(results)
}
// 搜索选择处理方法
const handleSearchSelect = item => {
  goToGame(item)
  // 清空输入框
  SearchInput.value = ''
}
// 返回上一页
const goBack = () => {
  router.go(-1)
}
// 跳转到游戏页面
const goToGame = game => {
  router.push({
    path: '/mapGame',
    query: { gameId: game.id, gameName: game.typeName }
  })
}

</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);
}

.mb-2 {
  color: white;
  font-size: rpx(9);
  margin-left: rpx(10);
  white-space: nowrap; /* 防止文字换行 */
}
.mb-2 img {
  width: rpx(15);
  height: rpx(15);
  vertical-align: middle;
  margin-top: rpx(-2);
  margin-left: 0;
}
.el-menu-item {
  width: rpx(115);
  // height: rpx(20);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}

.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 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
}

.drawer-box {
  position: absolute;
  display: flex;
  // align-items: center;
  margin-top: rpx(30);
  height: 100%;
  width: 100%;
}

.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); // 设置图标和文字之间的间距 ;
}

.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>