0901-1725

src/components/CustomCarousel.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="custom-carousel">
     <!-- 轮播图容器 -->
-    <q-responsive :ratio="32/9" class="carousel-container">
+    <q-responsive :ratio="36 / 9" class="carousel-container">
       <!-- 骨架屏 -->
       <div v-if="isLoading" class="carousel-skeleton full-width full-height">
-        <q-skeleton type="rect" class="full-width full-height" style="border-radius: 8px;" />
+        <q-skeleton animation="none" type="rect" class="full-width full-height" style="border-radius: 8px;" />
       </div>
-      
+
       <!-- 单个模式 -->
       <div v-else-if="mode === 'single'" class="full-width full-height">
         <q-carousel v-model="currentSlide" animated swipeable infinite :autoplay="autoplay" :arrows="arrows"
@@ -68,7 +68,7 @@
           :style="{ width: progressWidth + '%' }"></div>
       </div>
     </div>
-    
+
     <!-- 骨架屏指示点 -->
     <div v-else class="carousel-indicators q-mt-sm flex justify-center items-center q-gutter-xs">
       <q-skeleton v-for="n in 4" :key="n" type="rect" width="24px" height="4px" style="border-radius: 4px;" />

src/css/app.scss

@@ -1,4 +1,18 @@
 // app global css in SCSS form
+
+// 全局字体设置
+* {
+  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;

src/css/quasar.variables.scss

@@ -12,8 +12,8 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary: #1976d2;
-$secondary: #26a69a;
+$primary: #FF4A4A;
+$secondary: #FF5D2B;
 $accent: #9c27b0;
 
 $dark: #1d1d1d;
@@ -23,3 +23,19 @@ $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
+
+// 全局字体设置
+$typography-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
+
+// 针对不同文本类型的字体设置
+$h1-font-family: $typography-font-family;
+$h2-font-family: $typography-font-family;
+$h3-font-family: $typography-font-family;
+$h4-font-family: $typography-font-family;
+$h5-font-family: $typography-font-family;
+$h6-font-family: $typography-font-family;
+$body-font-family: $typography-font-family;
+$caption-font-family: $typography-font-family;
+$overline-font-family: $typography-font-family;
+$subtitle1-font-family: $typography-font-family;
+$subtitle2-font-family: $typography-font-family;

src/pages/index/ProductList.vue

@@ -1,122 +1,87 @@
 <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-lg">
-      <q-card class="bg-white rounded-borders" flat>
-        <q-card-section class="q-pa-md">
-          <div class="row q-gutter-md items-center">
-            <div class="col">
-              <q-input v-model="searchQuery" outlined placeholder="搜索游戏、礼品卡或商品..." dense class="search-input"
-                @keyup.enter="performSearch">
-                <template v-slot:prepend>
-                  <q-icon name="search" color="grey-6" />
-                </template>
-                <template v-slot:append>
-                  <q-btn v-if="searchQuery" flat round dense icon="clear" color="grey-6" @click="clearSearch" />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-auto">
-              <q-btn color="primary" icon="search" label="搜索" unelevated @click="performSearch"
-                :loading="searchLoading" />
-            </div>
-          </div>
-
-          <!-- 热门搜索标签 -->
-          <div class="q-mt-md" v-if="!searchQuery">
-            <div class="text-caption text-grey-6 q-mb-xs">热门搜索：</div>
-            <div class="row q-gutter-xs">
-              <q-chip v-for="tag in popularSearchTags" :key="tag" clickable size="sm" color="grey-2" text-color="grey-7"
-                @click="searchQuery = tag; performSearch()">
-                {{ tag }}
-              </q-chip>
-            </div>
-          </div>
-        </q-card-section>
-      </q-card>
-    </div>
-
-    <!-- 商品类型选项卡 -->
-    <div class="q-mt-sm 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 type="rect" width="108px" height="108px" class="rounded-borders" />
-              </div>
-              <!-- 商品信息骨架屏 -->
-              <div class="col flex column justify-center">
-                <q-skeleton type="text" width="60%" height="24px" class="q-mb-xs" />
-                <q-skeleton type="text" width="40%" height="16px" class="q-mb-xs" />
-                <q-skeleton type="text" width="50%" height="16px" class="q-mb-sm" />
-                <!-- 评分区域骨架屏 -->
-                <div class="row items-center q-gutter-xs">
-                  <q-skeleton type="rect" width="80px" height="16px" class="q-mr-sm" />
-                  <q-skeleton 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 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-h6 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-h6 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>
 
-    <!-- Figma Gift Card List -->
+    <!-- 礼品卡模块 -->
     <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">
@@ -125,12 +90,12 @@
           <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 height="200px" square />
+              <q-skeleton  animation="none" height="200px" square />
               <q-card-section class="q-pa-md">
-                <q-skeleton type="text" class="text-subtitle1" />
+                <q-skeleton animation="none" type="text" class="text-subtitle1" />
                 <div class="row items-center no-wrap q-mt-sm">
-                  <q-skeleton type="text" width="60px" class="text-h6" />
-                  <q-skeleton type="rect" width="50px" height="20px" class="q-ml-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>
@@ -140,7 +105,8 @@
         <!-- 实际礼品卡内容 -->
         <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)">
+            <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>
@@ -159,7 +125,7 @@
       </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">
@@ -216,7 +182,7 @@
       </div>
     </div>
 
-    <!-- 支付方式和语言选择区块 -->
+    <!-- 支付方式和语言选择模块 -->
     <div class="q-mt-lg">
       <FooterComponent />
     </div>
@@ -229,30 +195,20 @@ import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 import FooterComponent from 'src/components/FooterComponent.vue'
 import CustomCarousel from 'src/components/CustomCarousel.vue'
-
 const $q = useQuasar()
 const router = useRouter()
 
 // 当前激活的选项卡
 const activeTab = ref('recharge')
-
-// 搜索相关状态
-const searchQuery = ref('')
-const searchLoading = ref(false)
-const popularSearchTags = ref(['原神', '王者荣耀', 'Steam', 'PUBG', '礼品卡', 'CDK'])
-
 // 加载状态
 const isLoading = ref(true)
 const carouselLoading = ref(true)
-
 // 根据屏幕宽度计算骨架屏数量
 const skeletonCount = computed(() => {
   return ($q.screen.lg || $q.screen.xl) ? 9 : ($q.screen.md ? 8 : 4)
 })
-
 // 轮播图模式
 const carouselMode = ref('card')
-
 // 轮播图数据
 const carouselItems = ref([
   {
@@ -276,8 +232,6 @@ const carouselItems = ref([
     description: 'Steam礼品卡 - 畅享游戏世界'
   }
 ])
-
-
 const figmaGiftCards = ref([
   {
     id: 1,
@@ -320,8 +274,21 @@ 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
+    price: '$36.80',
+    discount: '8% OFF'
+  },
 ]);
-
 // 不同类型的商品数据
 const productData = {
   recharge: [
@@ -356,52 +323,14 @@ const productData = {
     { id: 15, name: 'PUBG Mobile CDK', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '20k+', reviews: '6,789', rating: 3.9, discount: '-30%' }
   ]
 }
-
 // 当前显示的商品列表
 const currentProducts = computed(() => {
   return productData[activeTab.value] || []
 })
-
 const navigateToProduct = (gameType) => {
   // 跳转到charge页面，传递游戏类型参数
   router.push({ path: '/charge', query: { game: gameType } })
 }
-
-// 搜索相关方法
-const performSearch = () => {
-  if (!searchQuery.value.trim()) {
-    $q.notify({
-      message: '请输入搜索关键词',
-      color: 'warning',
-      position: 'top'
-    })
-    return
-  }
-
-  searchLoading.value = true
-
-  // 模拟搜索API调用
-  setTimeout(() => {
-    searchLoading.value = false
-    $q.notify({
-      message: `正在搜索 "${searchQuery.value}"`,
-      color: 'positive',
-      position: 'top'
-    })
-    // 这里可以添加实际的搜索逻辑
-    // 例如：调用搜索API，更新商品列表等
-  }, 1000)
-}
-
-const clearSearch = () => {
-  searchQuery.value = ''
-  $q.notify({
-    message: '已清除搜索内容',
-    color: 'info',
-    position: 'top'
-  })
-}
-
 // 检查轮播图图片是否加载完成
 const checkCarouselImagesLoaded = () => {
   const imagePromises = carouselItems.value.map(item => {
@@ -422,7 +351,6 @@ const checkCarouselImagesLoaded = () => {
     carouselLoading.value = false
   })
 }
-
 // 模拟数据加载
 onMounted(() => {
   // 开始检查轮播图图片加载
@@ -494,10 +422,10 @@ onMounted(() => {
 /* Custom breakpoint for xl showing 8 cards per row */
 @media (min-width: 1440px) {
   .col-xl-custom-8 {
-    width: 12.5%;
+    width: 16.66%;
     /* 100% / 8 = 12.5% */
-    flex: 0 0 12.5%;
-    max-width: 12.5%;
+    flex: 0 0 16.66%;
+    max-width: 16.66%;
   }
 }
 
@@ -521,7 +449,6 @@ onMounted(() => {
 
 /* sm: 2 cards per row (50%) */
 @media (max-width: 599px) {
-
   .col-6,
   .col-sm-6 {
     width: 50%;
@@ -541,21 +468,4 @@ onMounted(() => {
   justify-content: center;
   flex-shrink: 0;
 }
-
-/* 搜索框样式 */
-.search-input :deep(.q-field__control) {
-  border-radius: 8px;
-}
-
-.search-input :deep(.q-field__native) {
-  font-size: 14px;
-}
-
-.search-input :deep(.q-field__prepend) {
-  padding-right: 8px;
-}
-
-.search-input :deep(.q-field__append) {
-  padding-left: 8px;
-}
 </style>