保持商店的样式和其他界面的样式一致

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,25 +114,25 @@ 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="money-display">
-        💰 {{ formatNumber(currentMoney) }} 灵石
-      </div>
+    <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 v-if="loading" class="loading">
         加载中...
       </div>
@@ -187,48 +186,52 @@ onMounted(async () => {
         </div>
       </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;
 }