0904

src/css/app.scss

@@ -9,6 +9,8 @@ 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;

src/layouts/MainLayout.vue

@@ -1,46 +1,90 @@
 <template>
   <q-layout view="hHh lpR fFf">
-    <q-header class="bg-dark text-black">
-      <q-toolbar class="sd-page-padding bg-white">
-        <!-- Logo -->
+    <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: 4%; top: 50%; transform: translateY(-50%); width: 170px; height: 44px;" />
-        <q-btn flat no-caps class="text-black" style="height: 100px;" @click="$router.push('/target-page')">
-          <span>主站</span>
-        </q-btn>
+          style="position: absolute; left: 8%; top: 50%; transform: translateY(-50%); width: 83px; height: 62px;" />
         <div class="row items-center no-wrap">
-          <q-btn-dropdown :transition-duration="0" :menu-offset="[0, -8]" flat no-caps class="text-black"
-            style="height: 100px;" @mouseenter="$refs.gamesDropdown.show()" ref="gamesDropdown">
-            <template v-slot:label>
-              <span class="">游戏游戏</span>
-            </template>
-            <q-list @mouseenter="$refs.gamesDropdown.show()" @mouseleave="$refs.gamesDropdown.hide()">
-              <q-item clickable v-close-popup to="/games">
-                <q-item-section>All Games</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup to="/blog">
-                <q-item-section>Blog</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup to="/help">
-                <q-item-section>Help Center</q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-          <q-btn flat no-caps class="text-black" style="height: 100px;" @click="$router.push('/target-page')">
-            <span>博客</span>
+          <q-btn flat no-caps @click="$router.push('/test')">
+            <div style="position: relative;">
+              <span class="text-subtitle1 text-color-linear">主站</span>
+              <q-icon name="sports_esports" color="text-subtitle1 text-color-linear"
+                style="position: absolute; bottom: -18px; left: 2px; z-index: -1; transform: rotate(-15deg);" />
+            </div>
           </q-btn>
+          <div @mouseenter="showGamesDropdown" @mouseleave="hideGamesDropdown">
+            <q-btn-dropdown :content-class="['no-shadow-menu']" :menu-offset="[50, 22]" flat no-caps class="text-black"
+              ref="gamesDropdown">
+              <template v-slot:label>
+                <span class="text-subtitle1">游戏</span>
+              </template>
+              <q-list @mouseenter="showGamesDropdown" @mouseleave="hideGamesDropdown">
+                <q-item clickable v-close-popup to="/games" class="flex items-center">
+                  <q-item-section side>
+                    <q-icon class="text-grey-7" right size="16px" style="margin-top: 4px;" name="computer" />
+                  </q-item-section>
+                  <q-item-section>PC</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup to="/games" class="flex items-center">
+                  <q-item-section side>
+                    <q-icon class="text-grey-7" right size="16px" style="margin-top: 4px;" name="phone_android" />
+                  </q-item-section>
+                  <q-item-section>Mobile</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup to="/games" class="flex items-center">
+                  <q-item-section side>
+                    <q-icon class="text-grey-7" right size="16px" style="margin-top: 4px;" name="sports_esports" />
+                  </q-item-section>
+                  <q-item-section>Playstation</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup to="/games" class="flex items-center">
+                  <q-item-section side>
+                    <q-icon class="text-grey-7" right size="16px" style="margin-top: 4px;" name="gamepad" />
+                  </q-item-section>
+                  <q-item-section>Xbox</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup to="/games" class="flex items-center">
+                  <q-item-section side>
+                    <q-icon class="text-grey-7" right size="16px" style="margin-top: 4px;" name="videogame_asset" />
+                  </q-item-section>
+                  <q-item-section>Switch</q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
+          <div @mouseenter="showHelpDropdown" @mouseleave="hideHelpDropdown">
+            <q-btn-dropdown :content-class="['no-shadow-menu']" :menu-offset="[20, 22]" flat no-caps class="text-black"
+              ref="helpDropdown">
+              <template v-slot:label>
+                <span class="text-subtitle1">帮助中心</span>
+              </template>
+              <q-list @mouseenter="showHelpDropdown" @mouseleave="hideHelpDropdown">
+                <q-item clickable v-close-popup to="/blog" class="flex items-center">
+                  <q-item-section>FAQ</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup to="/help" class="flex items-center">
+                  <q-item-section>反馈记录</q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
         </div>
         <q-space />
-        <div class="row items-center no-wrap q-gutter-md">
+        <div class="row items-center no-wrap q-gutter-md text-black">
           <!-- Search -->
-          <q-input v-model="searchText" placeholder="搜索游戏..." dense outlined style="width: 300px;"
+          <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>
-            <template v-slot:append>
-              <q-btn flat round dense icon="close" v-if="searchText" @click="searchText = ''" />
-            </template>
           </q-input>
 
           <!-- Cart -->
@@ -51,7 +95,7 @@
 
           <!-- Language/Currency -->
           <q-btn flat @click="showLanguageDialog = true" class="bg-grey-3 rounded-borders text-black q-px-md q-py-sm">
-            $ {{ selectedCurrency }} | {{ selectedLanguage }}
+            $ {{ selectedCurrency }} I {{ selectedLanguage }}
           </q-btn>
 
           <!-- Language Selection Dialog -->
@@ -83,9 +127,12 @@
           </q-dialog>
 
           <!-- User Profile -->
-          <q-avatar class="bg-grey-3 rounded-borders" size="40px">
+          <q-avatar class="bg-grey-3 rounded-borders cursor-pointer" size="40px">
             <q-icon name="account_circle" size="32px" />
           </q-avatar>
+
+          
+
         </div>
       </q-toolbar>
     </q-header>
@@ -137,7 +184,7 @@
         </q-footer>
       </template>
       <template v-else>
-        <CustomScrollContainer height="calc(100vh - 100px)" :top-offset="100">
+        <CustomScrollContainer height="calc(100vh - 80px)" :top-offset="84">
           <router-view v-slot="{ Component }">
             <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
               <component :is="Component" :key="$route.path" />
@@ -162,6 +209,44 @@ const showLanguageDialog = ref(false)
 const selectedLanguage = ref('EN')
 const selectedCurrency = ref('USD')
 
+// 游戏下拉框相关
+const gamesDropdown = ref(null)
+const helpDropdown = ref(null)
+let hideGameTimeout = null
+let hideHelpTimeout = null
+// 显示游戏下拉框
+const showGamesDropdown = () => {
+  if (hideGameTimeout) {
+    clearTimeout(hideGameTimeout)
+    hideGameTimeout = null
+  }
+  gamesDropdown.value?.show()
+}
+
+// 隐藏游戏下拉框（延迟执行）
+const hideGamesDropdown = () => {
+  hideGameTimeout = setTimeout(() => {
+    gamesDropdown.value?.hide()
+  }, 200) // 100ms延迟，给用户时间移动到下拉菜单
+}
+
+
+// 显示游戏下拉框
+const showHelpDropdown = () => {
+  if (hideHelpTimeout) {
+    clearTimeout(hideHelpTimeout)
+    hideHelpTimeout = null
+  }
+  helpDropdown.value?.show()
+}
+
+// 隐藏游戏下拉框（延迟执行）
+const hideHelpDropdown = () => {
+  hideHelpTimeout = setTimeout(() => {
+    helpDropdown.value?.hide()
+  }, 200) // 100ms延迟，给用户时间移动到下拉菜单
+}
+
 // 语言选项
 const languageOptions = [
   { label: 'English', value: 'EN' },
@@ -188,4 +273,16 @@ const confirmSelection = () => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+/* :global(.no-shadow-menu) {
+  box-shadow: none !important;
+  border-radius: 0 0 4px 4px !important;
+} */
+
+.text-color-linear {
+  background: linear-gradient(90deg, var(--q-primary) 0%, var(--q-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+</style>

src/pages/index/ProductList.vue

@@ -62,7 +62,7 @@
                 </div>
                 <!-- 商品信息 -->
                 <div class="col flex column justify-center">
-                  <span class="text-h6 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
+                  <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>
                   <!-- 评分区域 -->