添加游戏简介内容

src/views/block/MapGame.vue

@@ -6,11 +6,23 @@
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         {{ gameTitle }}
       </div>
+      <!-- 游戏编号 -->
+      <div class="game-badge">{{ gameSort }}</div>
     </div>
 
     <div class="content">
       <!-- 地图显示区域 -->
       <div class="map-section">
+        <!-- 内容简介提示 -->
+        <div class="info-message-container">
+          <div class="message-item">
+            <div class="avatar">
+              <img src="@/assets/images/xiaozhi2.png" alt="头像" class="avatar-image" />
+            </div>
+            <p v-html="currentGameData?.info"></p>
+          </div>
+        </div>
+        
         <div class="map-container">
           <!-- 地图背景 -->
           <div class="map-background">
@@ -113,6 +125,7 @@ import { getMapGameById } from '@/api/blockly/game.js';
 const router = useRouter();
 const route = useRoute();
 const gameTitle = ref('地图游戏编程'); // 默认标题
+const gameSort = ref('Game1'); // 默认排序
 const currentGameData = ref(null);
 //人物初始朝向
 const playerInitialDirection = ref(0);
@@ -144,16 +157,27 @@ const fetchGameData = async () => {
   try {
     const gameId = route.query.gameId;
     const nameFromRoute = route.query.gameName;
+    const sortFromRoute = route.query.gameSort;
 
     if (nameFromRoute) {
       gameTitle.value = nameFromRoute;
     }
+    
+    // 优先使用路由参数中的排序信息
+    if (sortFromRoute) {
+      gameSort.value = sortFromRoute;
+    }
 
     let mapGameData = await getMapGameById(gameId);
     if (mapGameData.code === 0) {
-
       currentGameData.value = mapGameData?.data;
-      await updateGameStateFromData(currentGameData.value);
+      
+      // 如果从接口返回的数据中有排序信息，使用接口数据
+      if (currentGameData.value && currentGameData.value.sort) {
+        let sortNum = currentGameData.value.sort;
+        gameSort.value = sortNum > 9 ? `Game${sortNum}` : `Game${sortNum}`;
+      }
+       updateGameStateFromData(currentGameData.value);
     }
   } catch (error) {
     console.error('获取游戏数据失败:', error);
@@ -854,10 +878,55 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @use "sass:math";
-
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
+/* 信息提示框样式 */
+.info-message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.message-item {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: rpx(5);
+}
+/* 头像样式 */
+.avatar {
+  margin-right: rpx(4);
+  flex-shrink: 0;
+}
+.avatar-image {
+  width: rpx(30);
+  height: rpx(30);
+  object-fit: cover;
+}
+/* 消息内容样式 */
+.message-item {
+  flex: 1;
+}
+.message-item p {
+  margin: rpx(4) 0;
+  line-height: 1.6;
+  font-size: rpx(7);
+  text-align: left;
+  color: black;
+  background-color: #e6faff;
+  opacity: 0.8;
+  border-radius: rpx(4);
+  padding: rpx(6);
+  max-width: 100%;
+}
+.message-item p:first-child {
+  margin-top: 0;
+  font-weight: 500;
+}
+.message-item p:last-child {
+  margin-bottom: 0;
+}
+
 
 //将tileSize属性绑定到CSS变量上
 :root {
@@ -895,10 +964,27 @@ onUnmounted(() => {
 
 .title-box {
   position: relative;
-  top: 10px;
+  top: rpx(5);
   padding-left: 15px;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
   z-index: 10;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 右侧两个角为圆角的长方形格子样式 */
+.game-badge {
+  width: rpx(80);
+  height: rpx(20);
+  margin-left: rpx(10);
+  background-color: #5fb5dc;
+  color: #fff;
+  border-radius: 0 rpx(20) rpx(20) 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: rpx(15);
+  font-weight: bold;
 }
 
 .box-icon {

src/views/gamepage/GameIndex.vue

@@ -165,7 +165,7 @@ const goBack = () => {
 const goToGame = game => {
   router.push({
     path: '/mapGame',
-    query: { gameId: game.id, gameName: game.typeName }
+    query: { gameId: game.id, gameName: game.typeName, gameSort: game.gameSort }
   })
 }