|
|
@@ -0,0 +1,590 @@
|
|
|
+<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) {
|
|
|
+ // 处理返回的数据
|
|
|
+ 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>
|
丸子
