|
|
@@ -1,43 +1,4 @@
|
|
|
<template>
|
|
|
- <!-- 全屏遮罩盒子 通关后弹框得奖杯 -->
|
|
|
- <div class="fullscreen-overlay" v-if="showOverlay">
|
|
|
- <div
|
|
|
- class="centered-box"
|
|
|
- :style="{
|
|
|
- backgroundImage: `url(${passConfig.passBackground})`,
|
|
|
- backgroundSize: '110%',
|
|
|
- backgroundPosition: 'center',
|
|
|
- backgroundRepeat: 'no-repeat'
|
|
|
- }">
|
|
|
- <!-- 彩带飘落效果 -->
|
|
|
- <div class="confetti-container" v-if="passConfig.passStar > 0">
|
|
|
- <div v-for="n in 50" :key="n" class="confetti" :class="`confetti-${n % 12 + 1}`"></div>
|
|
|
- </div>
|
|
|
- <!-- 关闭按钮 -->
|
|
|
- <div class="close-button" @click="closeOverlay">×</div>
|
|
|
- <!-- 题目 -->
|
|
|
- <div class="top-box">
|
|
|
- <div class="title-text">{{passConfig.title}}</div>
|
|
|
- </div>
|
|
|
- <!-- 奖杯 -->
|
|
|
- <div class="middle-box">
|
|
|
- <img :src="passConfig.passTrophy" alt="奖杯" class="gold-cup-image" />
|
|
|
- </div>
|
|
|
- <!-- 星星 -->
|
|
|
- <div class="bottom-box">
|
|
|
- <img
|
|
|
- v-for="index in passConfig.starTotal"
|
|
|
- :key="index"
|
|
|
- :src="index <= passConfig.passStar ? star01 : star02"
|
|
|
- alt="星星"
|
|
|
- class="gold-star-image"
|
|
|
- :class="index % 2 === 0 ? 'star-bottom' : 'star-top'"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="title-box">
|
|
|
<!-- 左侧标题部分 -->
|
|
|
<div class="left-container">
|
|
|
@@ -46,6 +7,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+<!-- 中间地图组件部分-->
|
|
|
<div class="content">
|
|
|
<!-- 地图显示区域 -->
|
|
|
<div class="map-section">
|
|
|
@@ -112,10 +74,6 @@
|
|
|
|
|
|
<!-- Blockly工作区 -->
|
|
|
<div class="blockly-section">
|
|
|
- <div class="toolbox-section" style="display: none;">
|
|
|
- <h2>工具箱</h2>
|
|
|
- <div id="toolbox"></div>
|
|
|
- </div>
|
|
|
|
|
|
<div class="workspace-section">
|
|
|
<div class="controls">
|
|
|
@@ -125,11 +83,52 @@
|
|
|
<button @click="clearWorkspace">清空工作区</button>
|
|
|
</div>
|
|
|
|
|
|
+<!-- 工具箱-->
|
|
|
+ <div id="toolbox"></div>
|
|
|
+<!-- 工作区-->
|
|
|
<div id="blocklyDiv"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
+ <!-- 全屏遮罩盒子 通关后弹框得奖杯 -->
|
|
|
+ <div class="fullscreen-overlay" v-if="showOverlay">
|
|
|
+ <div
|
|
|
+ class="centered-box"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${passConfig.passBackground})`,
|
|
|
+ backgroundSize: '110%',
|
|
|
+ backgroundPosition: 'center',
|
|
|
+ backgroundRepeat: 'no-repeat'
|
|
|
+ }">
|
|
|
+ <!-- 彩带飘落效果 -->
|
|
|
+ <div class="confetti-container" v-if="passConfig.passStar > 0">
|
|
|
+ <div v-for="n in 50" :key="n" class="confetti" :class="`confetti-${n % 12 + 1}`"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="close-button" @click="closeOverlay">×</div>
|
|
|
+ <!-- 题目 -->
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="title-text">{{passConfig.title}}</div>
|
|
|
+ </div>
|
|
|
+ <!-- 奖杯 -->
|
|
|
+ <div class="middle-box">
|
|
|
+ <img :src="passConfig.passTrophy" alt="奖杯" class="gold-cup-image" />
|
|
|
+ </div>
|
|
|
+ <!-- 星星 -->
|
|
|
+ <div class="bottom-box">
|
|
|
+ <img
|
|
|
+ v-for="index in passConfig.starTotal"
|
|
|
+ :key="index"
|
|
|
+ :src="index <= passConfig.passStar ? star01 : star02"
|
|
|
+ alt="星星"
|
|
|
+ class="gold-star-image"
|
|
|
+ :class="index % 2 === 0 ? 'star-bottom' : 'star-top'"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -2456,14 +2455,14 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
// 合并重复的区块样式
|
|
|
-.map-section, .toolbox-section, .workspace-section {
|
|
|
+.map-section, .workspace-section {
|
|
|
background: rgba(248, 249, 250, 0.82);
|
|
|
padding: 15px;
|
|
|
border-radius: 15px;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.map-section h2, .toolbox-section h2, .workspace-section h2 {
|
|
|
+.map-section h2, .workspace-section h2 {
|
|
|
margin-bottom: 15px;
|
|
|
color: #2c3e50;
|
|
|
border-bottom: 2px solid #3498db;
|
|
|
@@ -2472,7 +2471,6 @@ onUnmounted(() => {
|
|
|
|
|
|
// 合并重复的区块背景样式
|
|
|
.map-section,
|
|
|
-.toolbox-section,
|
|
|
.workspace-section {
|
|
|
background: rgba(248, 249, 250, 0.82);
|
|
|
padding: 15px;
|