0905-1

quasar.config.js

@@ -12,7 +12,7 @@ export default defineConfig((ctx) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['i18n', 'axios'],
+    boot: ['i18n', 'axios', 'breakpoint'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: ['app.scss'],

src/boot/breakpoint.js

@@ -0,0 +1,14 @@
+import { defineBoot } from '#q-app/wrappers'
+
+export default defineBoot(({ app }) => {
+  // 全局设置自定义断点
+  // 这里设置的是最小宽度断点，xs是隐含的（0-479px）
+  const customBreakpoints = {
+    sm: 480,  // 480px及以上为sm
+    md: 768,  // 768px及以上为md
+    lg: 1024, // 1024px及以上为lg
+    xl: 1280, // 1280px及以上为xl
+  }
+  // 在应用启动时设置自定义断点
+  app.config.globalProperties.$q.screen.setSizes(customBreakpoints)
+})

src/css/app.scss

@@ -4,32 +4,54 @@
 * {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
-
+// 全局字体设置
 body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
-
-
-
 // Quasar组件字体覆盖
 .q-btn, .q-input, .q-card, .q-toolbar, .q-tab, .q-chip, .q-item {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif !important;
 }
-.sd-page-padding{
-    padding: 0 16%;
-    box-sizing: border-box;
+
+// CSS 自定义属性（CSS变量）- 可在任何地方使用
+:root {
+  --breakpoint-xs-max: #{$breakpoint-xs-max};
+  --breakpoint-sm-min: #{$breakpoint-sm-min};
+  --breakpoint-sm-max: #{$breakpoint-sm-max};
+  --breakpoint-md-min: #{$breakpoint-md-min};
+  --breakpoint-md-max: #{$breakpoint-md-max};
+  --breakpoint-lg-min: #{$breakpoint-lg-min};
+  --breakpoint-lg-max: #{$breakpoint-lg-max};
+  --breakpoint-xl-min: #{$breakpoint-xl-min};
 }
 
-@media screen and (max-width: 600px) {
-  .sd-page-padding {
-    padding: 0 16px;
-    box-sizing: border-box;
+// 页面动态padding
+.sd-page-padding {
+  padding: 0 12%;
+  box-sizing: border-box;
+
+  @media screen and (max-width: $breakpoint-xs-max) {
+    padding: 0 18px;
+  }
+
+  @media screen and (min-width: $breakpoint-sm-min) {
+    padding: 0 18px;
+  }
+
+  @media screen and (min-width: $breakpoint-md-min) {
+    padding: 0 40px;
   }
 }
+// 页面动态宽度
+.sd-page-width {
+  width: 100%;
+  margin: 0 auto;
 
-@media screen and (min-width: 601px) and (max-width: 990px) {
-  .sd-page-padding {
-    padding: 0 4%;
-    box-sizing: border-box;
+  @media screen and (min-width: $breakpoint-lg-min) {
+    max-width: 945px;
   }
-}
+
+  @media screen and (min-width: $breakpoint-xl-min) {
+    max-width: 1200px;
+  }
+}

src/css/quasar.variables.scss

@@ -12,6 +12,14 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
+// 覆盖 Quasar 默认断点 - 必须在其他变量之前定义
+// 这些变量会影响栅格系统（col-sm-*, col-md-* 等）的行为
+$breakpoint-xs: 479px !default;   // xs: 0-479px (最大宽度)
+$breakpoint-sm: 767px !default;   // sm: 480-767px (最大宽度)
+$breakpoint-md: 1023px !default;  // md: 768-1023px (最大宽度)
+$breakpoint-lg: 1279px !default;  // lg: 1024-1279px (最大宽度)
+// xl: 1280px+ (无最大宽度限制)
+
 $primary: #FF4A4A;
 $secondary: #FF5D2B;
 $accent: #9c27b0;

src/layouts/MainLayout.vue

@@ -1,10 +1,10 @@
 <template>
-  <q-layout view="hHh lpR fFf">
+  <q-layout view="lHr lpr lfr">
     <q-header elevated>
-      <q-toolbar class="sd-page-padding bg-white" style="height: 80px;">
-        <img src="~assets/images/logo.png" alt="logo"
-          style="position: absolute; left: 8%; top: 50%; transform: translateY(-50%); width: 83px; height: 62px;" />
+      <q-toolbar class="bg-white" style="height: 80px;padding: 0 40px;box-sizing: border-box;">
         <div class="row items-center no-wrap">
+          <q-btn dense flat round icon="menu" style="color: black;" @click="toggleLeftDrawer" />
+          <img src="~assets/images/logo.png" alt="logo" style="width: 83px; height: 62px;margin-right: 60px;" />
           <q-btn flat no-caps @click="$router.push('/test')">
             <div style="position: relative;">
               <span class="text-subtitle1 text-color-linear">主站</span>
@@ -72,16 +72,8 @@
         <q-space />
         <div class="row items-center no-wrap q-gutter-md text-black">
           <!-- Search -->
-          <q-input 
-            borderless
-            v-model="searchText" 
-            clearable 
-            placeholder="搜索游戏..." 
-            dense 
-            outlined 
-            rounded
-            style="width: 300px;"
-            class="rounded-borders">
+          <q-input borderless v-model="searchText" clearable placeholder="搜索游戏..." dense outlined rounded
+            style="width: 300px;" class="rounded-borders">
             <template v-slot:prepend>
               <q-icon name="search" />
             </template>
@@ -131,12 +123,16 @@
             <q-icon name="account_circle" size="32px" />
           </q-avatar>
 
-          
-
         </div>
       </q-toolbar>
     </q-header>
 
+    <q-drawer :v-model="leftDrawerOpen" side="left" bordered>
+      <q-btn color="primary" label="index" @click="goToPage('/')" />
+      <q-btn color="primary" label="test" @click="goToPage('/test')" />
+      <q-btn color="primary" label="reg" @click="goToPage('/reg')" />
+    </q-drawer>
+
     <q-page-container>
       <template v-if="$q.platform.is.mobile">
         <router-view v-slot="{ Component }">
@@ -201,6 +197,12 @@
 import { ref } from 'vue'
 import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'
 
+const leftDrawerOpen = ref(false)
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+  console.log(leftDrawerOpen.value)
+}
+
 // 搜索文本
 const searchText = ref('')
 

src/pages/index/ProductList.vue

@@ -1,190 +1,192 @@
 <template>
   <q-page class="col bg-grey-2 sd-page-padding">
-    <!-- 自定义轮播图组件 -->
-    <div class="q-pt-lg">
-      <CustomCarousel :items="carouselItems" :mode="carouselMode" :height="320" :autoplay="5000" :arrows="true"
-        :is-loading="carouselLoading" />
-    </div>
-
-    <!-- 热门商品模块 -->
-    <div class="q-mt-sm">
-      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">热门商品</div>
-      <div class="q-mb-sm bg-white rounded-borders">
-        <q-tabs v-model="activeTab" dense class="text-grey-7" active-color="primary" indicator-color="primary"
-          align="left">
-          <q-tab name="recharge" icon="account_balance_wallet" label="游戏直充" class="q-px-lg tab-with-icon" />
-          <q-tab name="coins" icon="monetization_on" label="游戏币" class="q-px-lg tab-with-icon" />
-          <q-tab name="items" icon="inventory" label="游戏道具" class="q-px-lg tab-with-icon" />
-          <q-tab name="giftcards" icon="card_giftcard" label="礼品卡" class="q-px-lg tab-with-icon" />
-          <q-tab name="cdk" icon="confirmation_number" label="CDK" class="q-px-lg tab-with-icon" />
-        </q-tabs>
+    <div class="sd-page-width">
+      <!-- 自定义轮播图组件 -->
+      <div class="q-pt-lg">
+        <CustomCarousel :items="carouselItems" :mode="carouselMode" :height="320" :autoplay="5000" :arrows="true"
+          :is-loading="carouselLoading" />
       </div>
-      <!-- 商品网格布局 -->
-      <div class="row q-col-gutter-sm">
-        <!-- 骨架屏 -->
-        <template v-if="isLoading">
-          <div v-for="n in skeletonCount" :key="`skeleton-${n}`" class="col-12 col-md-6 col-lg-4">
-            <q-card class="product-card q-pa-md" flat>
-              <div class="row no-wrap items-center" style="height: 100%;">
-                <!-- 商品图片骨架屏 -->
-                <div class="q-mr-md" style="width: 108px; height: 108px;">
-                  <q-skeleton animation="none" type="rect" width="108px" height="108px" class="rounded-borders" />
-                </div>
-                <!-- 商品信息骨架屏 -->
-                <div class="col flex column justify-center">
-                  <q-skeleton animation="none" type="text" width="60%" height="24px" class="q-mb-xs" />
-                  <q-skeleton animation="none" type="text" width="40%" height="16px" class="q-mb-xs" />
-                  <q-skeleton animation="none" type="text" width="50%" height="16px" class="q-mb-sm" />
-                  <!-- 评分区域骨架屏 -->
-                  <div class="row items-center q-gutter-xs">
-                    <q-skeleton animation="none" type="rect" width="80px" height="16px" class="q-mr-sm" />
-                    <q-skeleton animation="none" type="text" width="20px" height="16px" />
+
+      <!-- 热门商品模块 -->
+      <div class="q-mt-sm">
+        <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">热门商品</div>
+        <div class="q-mb-sm bg-white rounded-borders">
+          <q-tabs v-model="activeTab" dense class="text-grey-7" active-color="primary" indicator-color="primary"
+            align="left">
+            <q-tab name="recharge" icon="account_balance_wallet" label="游戏直充" class="q-px-lg tab-with-icon" />
+            <q-tab name="coins" icon="monetization_on" label="游戏币" class="q-px-lg tab-with-icon" />
+            <q-tab name="items" icon="inventory" label="游戏道具" class="q-px-lg tab-with-icon" />
+            <q-tab name="giftcards" icon="card_giftcard" label="礼品卡" class="q-px-lg tab-with-icon" />
+            <q-tab name="cdk" icon="confirmation_number" label="CDK" class="q-px-lg tab-with-icon" />
+          </q-tabs>
+        </div>
+        <!-- 商品网格布局 -->
+        <div class="row q-col-gutter-sm">
+          <!-- 骨架屏 -->
+          <template v-if="isLoading">
+            <div v-for="n in skeletonCount" :key="`skeleton-${n}`" class="col-12 col-md-6 col-lg-4">
+              <q-card class="product-card q-pa-md" flat>
+                <div class="row no-wrap items-center" style="height: 100%;">
+                  <!-- 商品图片骨架屏 -->
+                  <div class="q-mr-md" style="width: 108px; height: 108px;">
+                    <q-skeleton animation="none" type="rect" width="108px" height="108px" class="rounded-borders" />
+                  </div>
+                  <!-- 商品信息骨架屏 -->
+                  <div class="col flex column justify-center">
+                    <q-skeleton animation="none" type="text" width="60%" height="24px" class="q-mb-xs" />
+                    <q-skeleton animation="none" type="text" width="40%" height="16px" class="q-mb-xs" />
+                    <q-skeleton animation="none" type="text" width="50%" height="16px" class="q-mb-sm" />
+                    <!-- 评分区域骨架屏 -->
+                    <div class="row items-center q-gutter-xs">
+                      <q-skeleton animation="none" type="rect" width="80px" height="16px" class="q-mr-sm" />
+                      <q-skeleton animation="none" type="text" width="20px" height="16px" />
+                    </div>
                   </div>
                 </div>
-              </div>
-              <!-- 折扣标签骨架屏 -->
-              <q-skeleton animation="none" type="rect" width="40px" height="20px" class="absolute-top-right q-ma-sm"
-                style="border-radius: 4px;" />
-            </q-card>
-          </div>
-        </template>
+                <!-- 折扣标签骨架屏 -->
+                <q-skeleton animation="none" type="rect" width="40px" height="20px" class="absolute-top-right q-ma-sm"
+                  style="border-radius: 4px;" />
+              </q-card>
+            </div>
+          </template>
 
-        <!-- 动态商品卡片 -->
-        <template v-else>
-          <div v-for="product in currentProducts" :key="product.id" class="col-12 col-md-6 col-lg-4">
-            <q-card class="product-card card-lift q-pa-md cursor-pointer transition-generic" flat
-              @click="navigateToProduct(product.name)">
-              <div class="row no-wrap items-center" style="height: 100%;">
-                <!-- 商品图片 -->
-                <div class="q-mr-md flex items-center image-zoom-container" style="width: 108px; height: 108px;">
-                  <q-img :src="product.image" :alt="product.name" class="rounded-borders image-zoom" fit="cover"
-                    style="width: 100%; height: 100%;" />
-                </div>
-                <!-- 商品信息 -->
-                <div class="col flex column justify-center">
-                  <span class="text-subtitle1 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
-                  <p class="text-body2 text-grey-6 q-mb-xs">Sales Volume: {{ product.sales }}</p>
-                  <p class="text-body2 text-grey-6 q-mb-sm">User Reviews: {{ product.reviews }}</p>
-                  <!-- 评分区域 -->
-                  <div class="row items-center q-gutter-xs">
-                    <q-rating :model-value="product.rating" readonly size="sm" color="orange" class="q-mr-sm" />
-                    <span class="text-body2 text-weight-medium text-orange">{{ product.rating }}</span>
+          <!-- 动态商品卡片 -->
+          <template v-else>
+            <div v-for="product in currentProducts" :key="product.id" class="col-12 col-md-6 col-lg-4">
+              <q-card class="product-card card-lift q-pa-md cursor-pointer transition-generic" flat
+                @click="navigateToProduct(product.name)">
+                <div class="row no-wrap items-center" style="height: 100%;">
+                  <!-- 商品图片 -->
+                  <div class="q-mr-md flex items-center image-zoom-container" style="width: 108px; height: 108px;">
+                    <q-img :src="product.image" :alt="product.name" class="rounded-borders image-zoom" fit="cover"
+                      style="width: 100%; height: 100%;" />
+                  </div>
+                  <!-- 商品信息 -->
+                  <div class="col flex column justify-center">
+                    <span class="text-subtitle1 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
+                    <p class="text-body2 text-grey-6 q-mb-xs">Sales Volume: {{ product.sales }}</p>
+                    <p class="text-body2 text-grey-6 q-mb-sm">User Reviews: {{ product.reviews }}</p>
+                    <!-- 评分区域 -->
+                    <div class="row items-center q-gutter-xs">
+                      <q-rating :model-value="product.rating" readonly size="sm" color="orange" class="q-mr-sm" />
+                      <span class="text-body2 text-weight-medium text-orange">{{ product.rating }}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <!-- 折扣标签 -->
-              <q-badge style="border-radius: 4px;" class="absolute-top-right q-ma-sm" color="red-1" text-color="red"
-                :label="product.discount" />
-            </q-card>
-          </div>
-        </template>
+                <!-- 折扣标签 -->
+                <q-badge style="border-radius: 4px;" class="absolute-top-right q-ma-sm" color="red-1" text-color="red"
+                  :label="product.discount" />
+              </q-card>
+            </div>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <!-- 礼品卡模块 -->
-    <div class="q-mt-lg">
-      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">熱銷禮品卡</div>
-      <div class="row q-col-gutter-md">
-        <!-- 礼品卡骨架屏 -->
-        <template v-if="isLoading">
-          <div v-for="n in skeletonCount" :key="`gift-skeleton-${n}`"
-            class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
-            <q-card class="figma-gift-card bg-white" flat>
-              <q-skeleton  animation="none" height="200px" square />
-              <q-card-section class="q-pa-md">
-                <q-skeleton animation="none" type="text" class="text-subtitle1" />
-                <div class="row items-center no-wrap q-mt-sm">
-                  <q-skeleton animation="none" type="text" width="60px" class="text-h6" />
-                  <q-skeleton animation="none" type="rect" width="50px" height="20px" class="q-ml-sm" />
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
-        </template>
+      <!-- 礼品卡模块 -->
+      <div class="q-mt-lg">
+        <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">熱銷禮品卡</div>
+        <div class="row q-col-gutter-md">
+          <!-- 礼品卡骨架屏 -->
+          <template v-if="isLoading">
+            <div v-for="n in skeletonCount" :key="`gift-skeleton-${n}`"
+              class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
+              <q-card class="figma-gift-card bg-white" flat>
+                <q-skeleton animation="none" height="200px" square />
+                <q-card-section class="q-pa-md">
+                  <q-skeleton animation="none" type="text" class="text-subtitle1" />
+                  <div class="row items-center no-wrap q-mt-sm">
+                    <q-skeleton animation="none" type="text" width="60px" class="text-h6" />
+                    <q-skeleton animation="none" type="rect" width="50px" height="20px" class="q-ml-sm" />
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
 
-        <!-- 实际礼品卡内容 -->
-        <template v-else>
-          <div v-for="card in figmaGiftCards" :key="card.id" class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
-            <q-card class="figma-gift-card card-lift bg-white cursor-pointer" flat
-              @click="navigateToProduct(card.name)">
-              <div class="image-zoom-container">
-                <q-img :src="card.image" :ratio="1" class="image-zoom" />
-              </div>
-              <q-card-section class="q-pa-md">
-                <div class="text-subtitle1 text-weight-medium text-grey-9 ellipsis">{{ card.name }}</div>
-                <div class="row items-center no-wrap q-mt-sm">
-                  <div class="text-h6 text-weight-medium text-red">{{ card.price }}</div>
-                  <q-badge class="q-ml-sm q-pa-xs text-weight-medium text-red bg-red-1 figma-gift-card-badge">
-                    {{ card.discount }}
-                  </q-badge>
+          <!-- 实际礼品卡内容 -->
+          <template v-else>
+            <div v-for="card in figmaGiftCards" :key="card.id" class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
+              <q-card class="figma-gift-card card-lift bg-white cursor-pointer" flat
+                @click="navigateToProduct(card.name)">
+                <div class="image-zoom-container">
+                  <q-img :src="card.image" :ratio="1" class="image-zoom" />
                 </div>
-              </q-card-section>
-            </q-card>
-          </div>
-        </template>
+                <q-card-section class="q-pa-md">
+                  <div class="text-subtitle1 text-weight-medium text-grey-9 ellipsis">{{ card.name }}</div>
+                  <div class="row items-center no-wrap q-mt-sm">
+                    <div class="text-h6 text-weight-medium text-red">{{ card.price }}</div>
+                    <q-badge class="q-ml-sm q-pa-xs text-weight-medium text-red bg-red-1 figma-gift-card-badge">
+                      {{ card.discount }}
+                    </q-badge>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <!-- 服务特色模块 -->
-    <div class="q-mt-lg">
-      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">為什麼選擇我們？</div>
-      <div class="row bg-white q-pa-md rounded-borders">
-        <!-- 100% Safe Transaction -->
-        <div class="col-12 col-md">
-          <div class="row items-start q-gutter-md">
-            <div class="service-icon-container">
-              <q-icon name="verified_user" size="24px" color="grey-8" />
-            </div>
-            <div class="col">
-              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">100% Safe Transaction</span>
-              <p class="text-body2 text-grey-6 q-ma-none">
-                LootBar provides you with competitive product prices and efficient delivery to your account.
-                If the goods are not delivered or cannot be used after delivery, the platform promises to
-                refund 100% and provide 100% financial security guarantee.
-              </p>
+      <!-- 服务特色模块 -->
+      <div class="q-mt-lg">
+        <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">為什麼選擇我們？</div>
+        <div class="row bg-white q-pa-md rounded-borders">
+          <!-- 100% Safe Transaction -->
+          <div class="col-12 col-md">
+            <div class="row items-start q-gutter-md">
+              <div class="service-icon-container">
+                <q-icon name="verified_user" size="24px" color="grey-8" />
+              </div>
+              <div class="col">
+                <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">100% Safe Transaction</span>
+                <p class="text-body2 text-grey-6 q-ma-none">
+                  LootBar provides you with competitive product prices and efficient delivery to your account.
+                  If the goods are not delivered or cannot be used after delivery, the platform promises to
+                  refund 100% and provide 100% financial security guarantee.
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- Full Refund Guarantee -->
-        <div class="col-12 col-md">
-          <div class="row items-start q-gutter-md">
-            <div class="service-icon-container">
-              <q-icon name="account_balance_wallet" size="24px" color="grey-8" />
-            </div>
-            <div class="col">
-              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">Full Refund Guarantee</span>
-              <p class="text-body2 text-grey-6 q-ma-none">
-                LootBar provides you with competitive product prices and efficient delivery to your account.
-                If the goods are not delivered or cannot be used after delivery, the platform promises to
-                refund 100% and provide 100% financial security guarantee.
-              </p>
+          <!-- Full Refund Guarantee -->
+          <div class="col-12 col-md">
+            <div class="row items-start q-gutter-md">
+              <div class="service-icon-container">
+                <q-icon name="account_balance_wallet" size="24px" color="grey-8" />
+              </div>
+              <div class="col">
+                <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">Full Refund Guarantee</span>
+                <p class="text-body2 text-grey-6 q-ma-none">
+                  LootBar provides you with competitive product prices and efficient delivery to your account.
+                  If the goods are not delivered or cannot be used after delivery, the platform promises to
+                  refund 100% and provide 100% financial security guarantee.
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 24/7 Support -->
-        <div class="col-12 col-md">
-          <div class="row items-start q-gutter-md">
-            <div class="service-icon-container">
-              <q-icon name="support_agent" size="24px" color="grey-8" />
-            </div>
-            <div class="col">
-              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">24/7 Support</span>
-              <p class="text-body2 text-grey-6 q-ma-none">
-                We have a strong customer team and multiple ways to access consultations, quickly and
-                conveniently answering any questions you have during the transaction process, including
-                any support needed before, during, and after the sale.
-              </p>
+          <!-- 24/7 Support -->
+          <div class="col-12 col-md">
+            <div class="row items-start q-gutter-md">
+              <div class="service-icon-container">
+                <q-icon name="support_agent" size="24px" color="grey-8" />
+              </div>
+              <div class="col">
+                <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">24/7 Support</span>
+                <p class="text-body2 text-grey-6 q-ma-none">
+                  We have a strong customer team and multiple ways to access consultations, quickly and
+                  conveniently answering any questions you have during the transaction process, including
+                  any support needed before, during, and after the sale.
+                </p>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 支付方式和语言选择模块 -->
-    <div class="q-mt-lg">
-      <FooterComponent />
+      <!-- 支付方式和语言选择模块 -->
+      <div class="q-mt-lg">
+        <FooterComponent />
+      </div>
     </div>
   </q-page>
 </template>
@@ -274,14 +276,14 @@ const figmaGiftCards = ref([
     price: '$36.80',
     discount: '8% OFF'
   },
-    {
+  {
     id: 7,
     name: 'EA Sports FC 24',
     image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
     price: '$36.80',
     discount: '8% OFF'
   },
-    {
+  {
     id: 8,
     name: 'EA Sports FC 24',
     image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
@@ -292,8 +294,8 @@ const figmaGiftCards = ref([
 // 不同类型的商品数据
 const productData = {
   recharge: [
-    { id: 1, name: 'Genshin Impact', image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', sales: '100k+', reviews: '32,926', rating: 3.5, discount: '-20%' },
-    { id: 2, name: 'Honor of Kings', image: 'https://static.ezbuygame.com/uploads/20250822/987ec15ac7334f55806663f63752d1e0.png', sales: '80k+', reviews: '25,432', rating: 4.2, discount: '-15%' },
+    { id: 1, name: '原神', image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', sales: '100k+', reviews: '32,926', rating: 3.5, discount: '-20%' },
+    { id: 2, name: '崩壞：星穹鐵道', image: 'https://static.ezbuygame.com/uploads/20250822/987ec15ac7334f55806663f63752d1e0.png', sales: '80k+', reviews: '25,432', rating: 4.2, discount: '-15%' },
     { id: 3, name: 'PUBG Mobile', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '60k+', reviews: '18,765', rating: 4.0, discount: '-10%' },
     { id: 177, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250803/466ebe5d237e41808e733c06ccdcde9d.jpg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
     { id: 187, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250809/f645e5984b444894b6b5c77106ba156e.jpeg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
@@ -449,6 +451,7 @@ onMounted(() => {
 
 /* sm: 2 cards per row (50%) */
 @media (max-width: 599px) {
+
   .col-6,
   .col-sm-6 {
     width: 50%;