0902

src/layouts/MainLayout.vue

@@ -1,35 +1,90 @@
 <template>
   <q-layout view="hHh lpR fFf">
-    <q-header class="bg-dark text-white">
-      <q-toolbar class="sd-page-padding" style="max-width: 1920px; margin: 0 auto; height: 100%;">
+    <q-header class="bg-dark text-black">
+      <q-toolbar class="sd-page-padding bg-white">
+        <!-- Logo -->
+        <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>
         <div class="row items-center no-wrap">
-          <!-- Logo -->
-          <!-- <img src="~assets/images/logo.png" alt="logo" style="width: 170px; height: 44px;" /> -->
-          <!-- Navigation -->
-          <q-tabs class="" shrink>
-            <q-route-tab to="/" label="Home" class="text-weight-bold" />
-            <q-route-tab to="/games" label="Games" />
-            <q-route-tab to="/blog" label="Blog" />
-            <q-route-tab to="/help" label="Help Center" />
-          </q-tabs>
+          <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>
         </div>
         <q-space />
-        <div class="row items-center no-wrap q-gutter-x-md">
+        <div class="row items-center no-wrap q-gutter-md">
           <!-- Search -->
-          <q-btn flat round icon="search" />
+          <q-input v-model="searchText" placeholder="搜索游戏..." dense outlined 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 -->
-          <q-btn flat round>
+          <q-btn flat round class="bg-grey-3 rounded-borders">
             <q-icon name="shopping_cart" />
             <q-badge color="red" floating>1</q-badge>
           </q-btn>
 
           <!-- Language/Currency -->
-          <span>$USD l EN</span>
+          <q-btn flat @click="showLanguageDialog = true" class="bg-grey-3 rounded-borders text-black q-px-md q-py-sm">
+            $ {{ selectedCurrency }} | {{ selectedLanguage }}
+          </q-btn>
+
+          <!-- Language Selection Dialog -->
+          <q-dialog v-model="showLanguageDialog">
+            <q-card style="min-width: 300px;">
+              <q-card-section>
+                <div class="text-h6">选择语言和货币</div>
+              </q-card-section>
+
+              <q-card-section>
+                <div class="q-mb-md">
+                  <div class="text-subtitle2 q-mb-sm">语言</div>
+                  <q-select v-model="selectedLanguage" :options="languageOptions" emit-value map-options outlined
+                    dense />
+                </div>
+
+                <div>
+                  <div class="text-subtitle2 q-mb-sm">货币</div>
+                  <q-select v-model="selectedCurrency" :options="currencyOptions" emit-value map-options outlined
+                    dense />
+                </div>
+              </q-card-section>
+
+              <q-card-actions align="right">
+                <q-btn flat label="取消" color="grey" @click="showLanguageDialog = false" />
+                <q-btn flat label="确定" color="primary" @click="confirmSelection" />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
 
           <!-- User Profile -->
-          <q-avatar>
-            <q-icon name="account_circle" size="48px" />
+          <q-avatar class="bg-grey-3 rounded-borders" size="40px">
+            <q-icon name="account_circle" size="32px" />
           </q-avatar>
         </div>
       </q-toolbar>
@@ -82,7 +137,7 @@
         </q-footer>
       </template>
       <template v-else>
-        <CustomScrollContainer height="calc(100vh - 50px)" :top-offset="50">
+        <CustomScrollContainer height="calc(100vh - 100px)" :top-offset="100">
           <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" />
@@ -96,38 +151,41 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'
-</script>
 
-<style scoped>
-.animated {
-  animation-duration: 0.5s;
-  animation-fill-mode: both;
-}
+// 搜索文本
+const searchText = ref('')
 
-.fadeIn {
-  animation-name: fadeIn;
-}
+// 语言选择相关
+const showLanguageDialog = ref(false)
+const selectedLanguage = ref('EN')
+const selectedCurrency = ref('USD')
 
-.fadeOut {
-  animation-name: fadeOut;
-}
+// 语言选项
+const languageOptions = [
+  { label: 'English', value: 'EN' },
+  { label: '中文', value: 'CN' },
+  { label: '日本語', value: 'JP' },
+  { label: '한국어', value: 'KR' }
+]
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+// 货币选项
+const currencyOptions = [
+  { label: 'USD - 美元', value: 'USD' },
+  { label: 'CNY - 人民币', value: 'CNY' },
+  { label: 'JPY - 日元', value: 'JPY' },
+  { label: 'KRW - 韩元', value: 'KRW' },
+  { label: 'EUR - 欧元', value: 'EUR' }
+]
 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+// 确认选择
+const confirmSelection = () => {
+  showLanguageDialog.value = false
+  // 这里可以添加保存用户选择的逻辑，比如保存到本地存储或发送到服务器
+  console.log('Selected Language:', selectedLanguage.value)
+  console.log('Selected Currency:', selectedCurrency.value)
 }
-</style>
+</script>
+
+<style scoped></style>