|
|
@@ -0,0 +1,226 @@
|
|
|
+<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 = () => {
|
|
|
+ router.push('/home')
|
|
|
+}
|
|
|
+const laboratoryList = ref([
|
|
|
+ {
|
|
|
+ name: '智能台灯',
|
|
|
+ image: desklamp
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const handleLabClick = (item) => {
|
|
|
+ if (item.name === '智能台灯') {
|
|
|
+ router.push('/blockly')
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
丸子
