AIClass/src/views/virtuallaboratory/index.vue

<template>
  <!-- 虚拟实验室 -->
  <div class="home-container">
    <!-- 展开收起侧边栏 -->
    <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>

    <!-- 侧边栏组件 -->
    <LeftPanel ref="leftPanelRef" v-show="drawerVisible" />

    <!-- 右侧内容区 -->
    <div class="number-people">
      <div class="title-box">
        <div class="box-icon" @click="goBack">
          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
          虚拟实验室
        </div>
      </div>

      <!-- 内容区域 -->
       <div class="content-box">
        <div @click="handleLabClick(item)" v-for="(item, index) in laboratoryList" :key="index" class="small-box">
           <div
             class="nested-box"
             :style="{
               backgroundImage: `url(${item.image})`,
               backgroundSize: 'cover'
             }"
           ></div>
           <div class="additional-text">
             {{item.name}}
           </div>
         </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeftBold } from '@element-plus/icons-vue'
import LeftPanel from '@/components/LeftPanel.vue'
import desklamp from '@/assets/images/desklamp.png'

const leftPanelRef = ref(null)

// 侧边栏始终显示
const drawerVisible = ref(true)

// 切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}

const router = useRouter()

// 返回上一页
const goBack = () => {
  try {
    // 直接使用window.location.href确保页面立即跳转并刷新
    window.location.href = '/home';
  } catch (error) {
    console.error('返回home页面失败:', error);
    // 备用方案
    router.replace('/home');
    window.location.reload();
  }
}
const laboratoryList = ref([
  {
    name: '智能台灯',
    image: desklamp
  },
])

const handleLabClick = (item) => {
if (item.name === '智能台灯') {
    try {
      // 立即修改URL，不经过Vue Router的队列处理
      window.location.href = '/blockly2';
    } catch (error) {
      console.error('直接跳转失败:', error);
      // 备用方案：强制Vue Router进行跳转
      router.replace('/blockly2');
      // 强制刷新页面以确保视图更新
      window.location.reload();
    }
  }
}
</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;
  gap: rpx(0);
  background: linear-gradient(to bottom, #e2ddfc, #f1effd);
}

.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%;
  left: 18%;
  transform: translateY(-50%);
  background-color: #44449c;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 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);
}

// 右侧内容区
.number-people {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #e2ddfc, #f1effd);
}

// 标题样式
.title-box {
  height: rpx(35);
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  color: black;
  padding-left: rpx(15);
  font-size: rpx(10);
  cursor: pointer;
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5);
}

// 内容样式
.content-box {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}
.content-box::-webkit-scrollbar {
  width: rpx(2);
}
.content-box::-webkit-scrollbar-track {
  background: transparent;
  border-radius: rpx(3);
}
.content-box::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, hsl(230, 100%, 21%), #8a78d0);
  border-radius: rpx(3);
}
.content-box::-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);
  cursor: pointer; // 鼠标指针样式
}
.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>