From 897faace21cb6f4eb209ca672dfeec21c09d4a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E6=B1=89?=
 <5725748+qin_and_han_dynasties@user.noreply.gitee.com>
Date: Thu, 23 Apr 2026 22:27:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E6=8C=81=E5=95=86=E5=BA=97=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=85=B6=E4=BB=96=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Build_God_Game/src/views/ShopView.vue | 200 +++++++++++++-------------
 1 file changed, 103 insertions(+), 97 deletions(-)

diff --git a/Build_God_Game/src/views/ShopView.vue b/Build_God_Game/src/views/ShopView.vue
index ea1dcc1..07d7a13 100644
--- a/Build_God_Game/src/views/ShopView.vue
+++ b/Build_God_Game/src/views/ShopView.vue
@@ -6,7 +6,6 @@ import { getShop, buyItem, type Shop, type ShopItemDisplay } from '@/api/shop'
 import { ElMessage } from 'element-plus'
 import StarBorder from '@/components/StarBorder/StarBorder.vue'
 import Particles from '@/components/Particles/Particles.vue'
-import { ArrowLeft } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const characterStore = useCharacterStore()
@@ -115,120 +114,124 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="shop-container">
+  <div class="shop-page">
     <Particles />
     <StarBorder />
 
-    <div class="header">
-      <button class="back-btn" @click="goBack">
-        <span class="back-icon">←</span>
-        <span>返回</span>
-      </button>
-      <h1 class="title">商店</h1>
+    <div class="page-container">
+      <div class="page-header">
+        <span class="back-btn" @click="goBack">← 返回</span>
+        <span class="title">商店</span>
+        <span class="placeholder"></span>
+      </div>
+
+      <div v-if="shop" class="shop-info">
+        <span class="refresh-time">商品刷新时间: {{ formatRefreshTime(shop.lastRefreshTime) }}</span>
+      </div>
+
       <div class="money-display">
         💰 {{ formatNumber(currentMoney) }} 灵石
       </div>
-    </div>
-
-    <div v-if="shop" class="shop-info">
-      <span class="refresh-time">商品刷新时间: {{ formatRefreshTime(shop.lastRefreshTime) }}</span>
-    </div>
 
-    <div v-if="loading" class="loading">
-      加载中...
-    </div>
+      <div v-if="loading" class="loading">
+        加载中...
+      </div>
 
-    <div v-else-if="error" class="error">
-      {{ error }}
-      <button class="retry-btn" @click="fetchShop">重试</button>
-    </div>
+      <div v-else-if="error" class="error">
+        {{ error }}
+        <button class="retry-btn" @click="fetchShop">重试</button>
+      </div>
 
-    <div v-else-if="!shop || shop.items.length === 0" class="empty">
-      商店暂无可购商品，请联系管理员上架商品
-    </div>
+      <div v-else-if="!shop || shop.items.length === 0" class="empty">
+        商店暂无可购商品，请联系管理员上架商品
+      </div>
 
-    <div v-else class="shop-grid">
-      <div 
-        v-for="item in shop.items" 
-        :key="item.shopItemId" 
-        class="shop-item"
-        :class="{ 'cannot-buy': !canBuy(item) }"
-      >
-        <div class="item-icon-wrapper">
-          <img 
-            v-if="getItemIcon(item)" 
-            :src="getItemIcon(item)" 
-            class="item-icon-img"
-            :class="'rarity-' + (item.itemRarity || 1)"
-          />
-          <div v-else class="item-icon">{{ getItemEmoji(item.itemType) }}</div>
-          <div v-if="item.itemRarity" class="rarity-badge" :style="{ color: rarityColorMap[item.itemRarity] }">
-            {{ rarityMap[item.itemRarity] }}
+      <div v-else class="shop-grid">
+        <div 
+          v-for="item in shop.items" 
+          :key="item.shopItemId" 
+          class="shop-item"
+          :class="{ 'cannot-buy': !canBuy(item) }"
+        >
+          <div class="item-icon-wrapper">
+            <img 
+              v-if="getItemIcon(item)" 
+              :src="getItemIcon(item)" 
+              class="item-icon-img"
+              :class="'rarity-' + (item.itemRarity || 1)"
+            />
+            <div v-else class="item-icon">{{ getItemEmoji(item.itemType) }}</div>
+            <div v-if="item.itemRarity" class="rarity-badge" :style="{ color: rarityColorMap[item.itemRarity] }">
+              {{ rarityMap[item.itemRarity] }}
+            </div>
           </div>
+          
+          <div class="item-name">{{ item.itemName }}</div>
+          
+          <div class="item-price">
+            💰 {{ formatNumber(item.price) }}
+          </div>
+          
+          <div class="item-limit" v-if="item.dailyLimit > 0">
+            今日已购: {{ item.purchasedToday }} / {{ item.dailyLimit }}
+          </div>
+          
+          <button 
+            class="buy-btn"
+            :disabled="!canBuy(item) || buying === item.shopItemId"
+            @click="handleBuy(item)"
+          >
+            {{ buying === item.shopItemId ? '购买中...' : getBuyButtonText(item) }}
+          </button>
         </div>
-        
-        <div class="item-name">{{ item.itemName }}</div>
-        
-        <div class="item-price">
-          💰 {{ formatNumber(item.price) }}
-        </div>
-        
-        <div class="item-limit" v-if="item.dailyLimit > 0">
-          今日已购: {{ item.purchasedToday }} / {{ item.dailyLimit }}
-        </div>
-        
-        <button 
-          class="buy-btn"
-          :disabled="!canBuy(item) || buying === item.shopItemId"
-          @click="handleBuy(item)"
-        >
-          {{ buying === item.shopItemId ? '购买中...' : getBuyButtonText(item) }}
-        </button>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="css">
-.shop-container {
+.shop-page {
   min-height: 100vh;
+  background: #000000;
   padding: 20px;
   position: relative;
   overflow-y: auto;
 }
 
-.header {
+.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 16px 0;
   margin-bottom: 20px;
 }
 
+.page-container {
+  max-width: 480px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+}
+
 .back-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  color: #cccccc;
+  color: #666666;
+  font-size: 0.9rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  padding: 8px;
 }
 
 .back-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.back-icon {
-  font-size: 1.2rem;
+  color: #ffffff;
 }
 
 .title {
-  font-size: 1.5rem;
   color: #ffffff;
-  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.placeholder {
+  width: 60px;
 }
 
 .money-display {
@@ -238,12 +241,15 @@ onMounted(async () => {
   border-radius: 8px;
   color: #ffd700;
   font-size: 1rem;
+  text-align: center;
+  margin-bottom: 20px;
 }
 
 .shop-info {
   margin-bottom: 20px;
   color: #888888;
   font-size: 0.9rem;
+  text-align: center;
 }
 
 .refresh-time {
@@ -278,15 +284,15 @@ onMounted(async () => {
 
 .shop-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
 }
 
 .shop-item {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
-  padding: 16px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -305,23 +311,23 @@ onMounted(async () => {
 
 .item-icon-wrapper {
   position: relative;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .item-icon-img {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   object-fit: contain;
   border-radius: 8px;
 }
 
 .item-icon {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 2rem;
+  font-size: 1.5rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
 }
@@ -333,43 +339,43 @@ onMounted(async () => {
 
 .rarity-badge {
   position: absolute;
-  bottom: -8px;
+  bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   font-weight: bold;
   white-space: nowrap;
 }
 
 .item-name {
   color: #ffffff;
-  font-size: 0.95rem;
-  margin-bottom: 8px;
-  min-height: 40px;
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+  min-height: 36px;
   display: flex;
   align-items: center;
 }
 
 .item-price {
   color: #ffd700;
-  font-size: 1rem;
-  margin-bottom: 8px;
+  font-size: 0.9rem;
+  margin-bottom: 6px;
 }
 
 .item-limit {
   color: #888888;
-  font-size: 0.8rem;
-  margin-bottom: 12px;
+  font-size: 0.75rem;
+  margin-bottom: 8px;
 }
 
 .buy-btn {
   width: 100%;
-  padding: 10px 16px;
+  padding: 8px 12px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   color: #ffffff;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.2s ease;
 }