亮色

src/components/GHeader.vue

 <script setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
@@ -27,16 +27,19 @@ function navClick(nav) {
 }
 navClick(navList.find(i => i.route === router.currentRoute.value.name))
 
+const isLight = computed(() => locale.value !== 'En')
+
 // function login() {
 //   router.push({ name: 'Login' })
 // }
 </script>
 
 <template>
-  <div class="gc-header">
-    <img class="logo" src="/img/logo.png" alt="">
+  <div class="gc-header" :class="{ light: isLight }">
+    <img v-if="isLight" class="logo" src="/img/logo-color.png" alt="">
+    <img v-else class="logo" src="/img/logo.png" alt="">
     <div class="nav-list">
-      <div v-for="nav in navList" class="btn" :class="{ active: active === nav.route }" @click="navClick(nav, 1)">
+      <div v-for="nav in navList" class="btn g-flex-center" :class="{ active: active === nav.route }" @click="navClick(nav, 1)">
         {{ $t(nav.name) }}
         <Transition>
           <div v-show="active === nav.route" class="line"></div>
@@ -64,15 +67,16 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background: linear-gradient(180deg, rgba(14, 0, 85, 0.71) 0%, rgba(4, 0, 106, 0) 100%);
 }
 
 .gc-header .logo {
-  /* width: 12vw; */
-  width: 228px;
+  height: 60px;
   flex-shrink: 0;
 }
 
 .gc-header .nav-list {
+  height: 100%;
   flex: 1;
   margin: 0 5vw;
   display: flex;
@@ -80,7 +84,8 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
 }
 
 .nav-list .btn {
-  padding: 16px 2px;
+  min-width: 50px;
+  height: 100%;
   margin-right: 5vw;
   font-family: Roboto-Regular;
   font-weight: 400;
@@ -95,6 +100,7 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
 
 .nav-list .btn.active {
   font-family: Roboto-Bold;
+  font-weight: bold;
   color: var(--theme-color);
 }
 
@@ -150,4 +156,28 @@ navClick(navList.find(i => i.route === router.currentRoute.value.name))
   border-color: var(--theme-color);
   color: var(--theme-color);
 }
+
+.gc-header.light {
+  background: #FFFFFF;
+}
+
+.gc-header.light .nav-list .btn {
+  color: #666;
+}
+
+.gc-header.light .nav-list .btn:hover {
+  color: #000000;
+}
+
+.gc-header.light .nav-list .btn.active {
+  color: #000000;
+}
+
+.gc-header.light .nav-list .btn .line {
+  background-color: #503A9E;
+}
+
+.gc-header.light .right .icon-lang {
+  filter: contrast(0.1);
+}
 </style>
\ No newline at end of file

src/style.css

@@ -2,7 +2,7 @@
   color: #FFFFFF;
   background-color: #0F0C29;
   --theme-color: #FF8800;
-  --layout-header-height: 100px;
+  --layout-header-height: 80px;
 }
 
 * {

src/views/index.vue

@@ -21,7 +21,6 @@ import GHeader from '@/components/GHeader.vue'
   right: 0;
   margin: 0 auto;
   height: var(--layout-header-height);
-  background: linear-gradient(180deg, rgba(14, 0, 85, 0.71) 0%, rgba(4, 0, 106, 0) 100%);
   z-index: 2;
 }
 </style>
\ No newline at end of file