fix page style

src/App.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
-import { NConfigProvider, NDropdown } from 'naive-ui'
+import { NConfigProvider, NDropdown } from "naive-ui";
-const { locale } = useI18n()
+const { locale } = useI18n();
-const primaryColor = ref('#8B59F7')
+const primaryColor = ref("#ff7bac");
 const themeOverrides = ref({
   common: {
     primaryColorPressed: primaryColor,
@@ -15,7 +15,7 @@ const themeOverrides = ref({
     primaryColor: primaryColor,
     primaryColorHover: primaryColor,
   },
-})
+});
 </script>
 
 <template>

src/components/customHeader/size1440/index.vue

@@ -6,7 +6,7 @@
   >
     <div class="header-container">
       <div class="logo" @click="handleToHome">
-        <NImage width="100" height="100" :src="FiEELogo" preview-disabled />
+        <NImage width="140" height="140" :src="FiEELogo" preview-disabled />
       </div>
       <div class="header-menu">
         <NConfigProvider :theme-overrides="themeOverrides">

src/components/customHeader/size1920/index.vue

@@ -6,7 +6,7 @@
   >
     <div class="header-container">
       <div class="logo" @click="handleToHome">
-        <NImage width="90" height="90" :src="FiEELogo" preview-disabled />
+        <NImage width="140" height="140" :src="FiEELogo" preview-disabled />
       </div>
       <div class="header-menu">
         <NConfigProvider :theme-overrides="themeOverrides">

src/components/customHeader/size375/index.vue

@@ -7,7 +7,7 @@
     <div class="header-container">
       <div class="logo" @click="handleToHome">
         <NImage
-          style="width: 120px; height: 30px; max-width: 100%"
+          style="width: 100px; max-width: 100%"
           :src="FiEELogo"
           preview-disabled
         />
@@ -28,15 +28,17 @@
   </NLayoutHeader>
   <transition name="fade-slide">
     <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
-      <NMenu
+      <NConfigProvider :theme-overrides="themeOverrides">
-        mode="vertical"
+        <NMenu
-        :options="menuOptions"
+          mode="vertical"
-        :inverted="isScrolled"
+          :options="menuOptions"
-        class="mobile-menu"
+          :inverted="isScrolled"
-        accordion
+          class="mobile-menu"
-        v-model:value="selectedKey"
+          accordion
-        @update:value="handleMenuSelect"
+          v-model:value="selectedKey"
-      />
+          @update:value="handleMenuSelect"
+        />
+      </NConfigProvider>
     </div>
   </transition>
 </template>
@@ -44,12 +46,21 @@
 <script setup>
 import FiEELogo from "@/assets/image/header/logo.png";
 import { ref, onMounted, onUnmounted } from "vue";
-import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
+import { NMenu, NLayoutHeader, NImage, NIcon, NConfigProvider } from "naive-ui";
 import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
-
+const themeOverrides = {
+  Menu: {
+    itemTextColorHover: "#ff7bac",
+    itemTextColorActive: "#ff7bac",
+    itemTextColorActiveHover: "#ff7bac",
+    itemColorHover: "#fff8fb",
+    itemColorActive: "#fff8fb",
+    itemColorActiveHover: "#fff8fb",
+  },
+};
 const { t } = useI18n();
 const router = useRouter();
 
@@ -190,15 +201,37 @@ const handleToHome = () => {
   top: 320px;
   left: 0;
   width: 100vw;
-  background: rgba(220, 207, 248, 0.95);
+  background: #fddfea;
   z-index: 1100;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   padding: 40px 0 80px 0;
   max-height: 1500px;
   overflow-y: auto;
+
+  // 设置CSS变量，只影响当前组件的菜单
+  // --n-item-text-color-child-active: #ff7bac;
+
   :deep(.n-menu-item) {
     font-weight: 600;
   }
+
+  // // 强制覆盖子菜单激活状态的文字颜色
+  // :deep(
+  //     .n-menu
+  //       .n-menu-item-content.n-menu-item-content--child-active
+  //       .n-menu-item-content-header
+  //   ) {
+  //   color: #ff7bac !important;
+  // }
+
+  // // 强制覆盖所有子菜单相关的激活状态
+  // :deep(.n-menu-item-content--child-active) {
+  //   color: #ff7bac !important;
+
+  //   .n-menu-item-content-header {
+  //     color: #ff7bac !important;
+  //   }
+  // }
 }
 
 .fade-slide-enter-active,

src/views/BusinessServices/size1440/index.vue

@@ -239,7 +239,7 @@ const solutions = computed(() => [
   display: flex;
   gap: 1rem;
   padding: 1rem 0;
-  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+  border-bottom: 1px solid #fdc8dc;
 }
 
 .point-icon {

src/views/BusinessServices/size1920/index.vue

@@ -239,7 +239,7 @@ const solutions = computed(() => [
   display: flex;
   gap: 1rem;
   padding: 1rem 0;
-  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+  border-bottom: 1px solid #fdc8dc;
 }
 
 .point-icon {

src/views/BusinessServices/size375/index.vue

@@ -169,7 +169,7 @@ const solutions = computed(() => [
   background: #fff8fb;
   border-radius: 16px;
   padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
@@ -191,7 +191,7 @@ const solutions = computed(() => [
 
 .solution-card:hover {
   transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+  box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
 }
 
 .card-header {
@@ -221,7 +221,7 @@ const solutions = computed(() => [
   display: flex;
   gap: 1rem;
   padding: 1rem 0;
-  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+  border-bottom: 1px solid #fdc8dc;
 }
 
 .content-point:last-child {

src/views/BusinessServices/size768/index.vue

@@ -170,7 +170,7 @@ const solutions = computed(() => [
   background: #fff8fb;
   border-radius: 16px;
   padding: 2.5rem;
-  box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
+  box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
@@ -192,7 +192,7 @@ const solutions = computed(() => [
 
 .solution-card:hover {
   transform: translateY(-8px);
-  box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
+  box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
 }
 
 .card-header {
@@ -222,7 +222,7 @@ const solutions = computed(() => [
   display: flex;
   gap: 1rem;
   padding: 1rem 0;
-  border-bottom: 1px solid rgba(137, 91, 255, 0.1);
+  border-bottom: 1px solid #fdc8dc;
 }
 
 .content-point:last-child {

src/views/CommitteeAppointment/size1440/index.vue

@@ -179,7 +179,7 @@ const getCommitteeRole = (name, committee) => {
   --primary: #895bff;
   --primary-light: #a07cff;
   --primary-dark: #6a11cb;
-  --primary-transparent: rgba(137, 91, 255, 0.1);
+  --primary-transparent: rgba(255, 123, 172, 0.1);
 }
 
 .committees-page {
@@ -223,7 +223,7 @@ const getCommitteeRole = (name, committee) => {
   background: white;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
+  box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
 }
 
 .table-header,
@@ -317,7 +317,7 @@ const getCommitteeRole = (name, committee) => {
 .table-row:hover {
   background: #fdfcff;
   transform: translateY(-1px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
 }
 
 /* 响应式设计 */

src/views/CommitteeAppointment/size1920/index.vue

@@ -157,7 +157,7 @@ const getCommitteeRole = (name, committee) => {
   --primary: #895bff;
   --primary-light: #a07cff;
   --primary-dark: #6a11cb;
-  --primary-transparent: rgba(137, 91, 255, 0.1);
+  --primary-transparent: rgba(255, 123, 172, 0.1);
 }
 
 .committees-page {
@@ -220,7 +220,7 @@ const getCommitteeRole = (name, committee) => {
   background: white;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
+  box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
 }
 
 .table-header,
@@ -314,7 +314,7 @@ const getCommitteeRole = (name, committee) => {
 .table-row:hover {
   background: #fdfcff;
   transform: translateY(-1px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
 }
 
 /* 响应式设计 */

src/views/CommitteeAppointment/size375/index.vue

@@ -238,7 +238,7 @@ const getInitials = (name) => {
   background: white;
   border-radius: var(--border-radius);
   margin-bottom: 1.5rem;
-  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
+  box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
   overflow: hidden;
   transform: translateY(20px);
   opacity: 0;
@@ -316,13 +316,13 @@ const getInitials = (name) => {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  background: rgba(137, 91, 255, 0.08);
+  background: rgba(255, 123, 172, 0.08);
   color: var(--primary);
 }
 
 .role-badge.chair {
-  background-color: #e6f2ff;
+  background-color: #fcecf2;
-  color: #00baff;
+  color: #ff7bac;
 }
 
 .committee-name {

src/views/CommitteeAppointment/size768/index.vue

@@ -162,8 +162,8 @@ const getInitials = (name) => {
 }
 
 .role-badge.chair {
-  background-color: #e6f2ff;
+  background-color: #fcecf2;
-  color: #00baff;
+  color: #ff7bac;
 }
 
 .role-badge.member {
@@ -243,7 +243,7 @@ const getInitials = (name) => {
   background: white;
   border-radius: var(--border-radius);
   margin-bottom: 1.5rem;
-  box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
+  box-shadow: 0 5px 20px rgba(255, 123, 172, 0.08);
   overflow: hidden;
   transform: translateY(20px);
   opacity: 0;
@@ -321,7 +321,7 @@ const getInitials = (name) => {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  background: rgba(137, 91, 255, 0.08);
+  background: rgba(255, 123, 172, 0.08);
   color: var(--primary);
 }
 

src/views/calculator/size1440/index.vue

@@ -1,22 +1,28 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
+import {
+  NCard,
+  NRadioGroup,
+  NRadio,
+  NInput,
+  NDatePicker,
+  NButton,
+} from "naive-ui";
 
-const investmentType = ref('amount')
+const investmentType = ref("amount");
-const amount = ref(10000)
+const amount = ref(10000);
-const dividendType = ref('notReinvested')
+const dividendType = ref("notReinvested");
-const investmentDate = ref(null)
+const investmentDate = ref(null);
 
-const handleSubmit = () => {
+const handleSubmit = () => {};
-}
 </script>
 
 <template>
   <div class="flex-center min-h-[70vh] animate-bg-move">
     <n-card
       class="w-[700px] glass-card animate-bounce-in shadow-xl border-none"
-      :content-style="{padding: '32px 32px'}"
+      :content-style="{ padding: '32px 32px' }"
-      :header-style="{background: 'transparent'}"
+      :header-style="{ background: 'transparent' }"
     >
       <div class="flex justify-between gap-6">
         <!-- 投资类型 -->
@@ -30,7 +36,13 @@ const handleSubmit = () => {
         <!-- 金额与分红 -->
         <div class="flex-1">
           <div class="text-lg font-bold mb-3">Amount to Calculate</div>
-          <n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
+          <n-input
+            v-model:value="amount"
+            type="number"
+            class="mb-2"
+            size="medium"
+            placeholder="Enter amount"
+          />
           <n-radio-group v-model:value="dividendType" name="dividendType">
             <n-radio value="reinvested">Dividends reinvested</n-radio>
             <n-radio value="notReinvested">Dividends not reinvested</n-radio>
@@ -39,11 +51,22 @@ const handleSubmit = () => {
         <!-- 投资日期 -->
         <div class="flex-1">
           <div class="text-lg font-bold mb-3">Investment Date</div>
-          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
+          <n-date-picker
+            v-model:value="investmentDate"
+            type="date"
+            class="w-full"
+            size="medium"
+            placeholder="Select date"
+          />
         </div>
       </div>
       <div class="flex justify-end mt-8">
-        <n-button type="primary" size="medium" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
+        <n-button
+          type="primary"
+          size="medium"
+          class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg"
+          @click="handleSubmit"
+        >
           Submit
         </n-button>
       </div>
@@ -53,11 +76,10 @@ const handleSubmit = () => {
 
 <style scoped>
 .glass-card {
-  background: rgba(255,255,255,0.18);
+  background: rgba(255, 255, 255, 0.18);
-  box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
+  box-shadow: 0 6px 24px 0 rgba(255, 123, 172, 0.25);
   backdrop-filter: blur(10px);
   border-radius: 24px;
-  border: 1px solid rgba(255,255,255,0.18);
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 </style>
-

src/views/calculator/size1920/index.vue

@@ -1,23 +1,28 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
+import {
+  NCard,
+  NRadioGroup,
+  NRadio,
+  NInput,
+  NDatePicker,
+  NButton,
+} from "naive-ui";
 
-const investmentType = ref('amount')
+const investmentType = ref("amount");
-const amount = ref(10000)
+const amount = ref(10000);
-const dividendType = ref('notReinvested')
+const dividendType = ref("notReinvested");
-const investmentDate = ref(null)
+const investmentDate = ref(null);
 
-
+const handleSubmit = () => {};
-const handleSubmit = () => {
-}
 </script>
 
 <template>
-  <div class="flex-center min-h-[80vh]  animate-bg-move">
+  <div class="flex-center min-h-[80vh] animate-bg-move">
     <n-card
       class="w-[900px] glass-card animate-bounce-in shadow-2xl border-none"
-      :content-style="{padding: '48px 56px'}"
+      :content-style="{ padding: '48px 56px' }"
-      :header-style="{background: 'transparent'}"
+      :header-style="{ background: 'transparent' }"
     >
       <div class="flex justify-between gap-10">
         <!-- 投资类型 -->
@@ -31,7 +36,13 @@ const handleSubmit = () => {
         <!-- 金额与分红 -->
         <div class="flex-1">
           <div class="text-xl font-bold mb-4">Amount to Calculate</div>
-          <n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
+          <n-input
+            v-model:value="amount"
+            type="number"
+            class="mb-3"
+            size="large"
+            placeholder="Enter amount"
+          />
           <n-radio-group v-model:value="dividendType" name="dividendType">
             <n-radio value="reinvested">Dividends reinvested</n-radio>
             <n-radio value="notReinvested">Dividends not reinvested</n-radio>
@@ -40,11 +51,22 @@ const handleSubmit = () => {
         <!-- 投资日期 -->
         <div class="flex-1">
           <div class="text-xl font-bold mb-4">Investment Date</div>
-          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
+          <n-date-picker
+            v-model:value="investmentDate"
+            type="date"
+            class="w-full"
+            size="large"
+            placeholder="Select date"
+          />
         </div>
       </div>
       <div class="flex justify-end mt-10">
-        <n-button type="primary" size="large" class="px-10 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
+        <n-button
+          type="primary"
+          size="large"
+          class="px-10 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg"
+          @click="handleSubmit"
+        >
           Submit
         </n-button>
       </div>
@@ -54,10 +76,10 @@ const handleSubmit = () => {
 
 <style scoped>
 .glass-card {
-  background: rgba(255,255,255,0.18);
+  background: rgba(255, 255, 255, 0.18);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.37);
   backdrop-filter: blur(12px);
   border-radius: 32px;
-  border: 1px solid rgba(255,255,255,0.18);
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
-</style>
+</style>

src/views/calculator/size375/index.vue

@@ -1,22 +1,28 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
+import {
+  NCard,
+  NRadioGroup,
+  NRadio,
+  NInput,
+  NDatePicker,
+  NButton,
+} from "naive-ui";
 
-const investmentType = ref('amount')
+const investmentType = ref("amount");
-const amount = ref(10000)
+const amount = ref(10000);
-const dividendType = ref('notReinvested')
+const dividendType = ref("notReinvested");
-const investmentDate = ref(null)
+const investmentDate = ref(null);
 
-const handleSubmit = () => {
+const handleSubmit = () => {};
-}
 </script>
 
 <template>
-  <div class="flex-center h-60vh  px-2 py-4 animate-bg-move">
+  <div class="flex-center h-60vh px-2 py-4 animate-bg-move">
     <n-card
       class="w-full max-w-90vw glass-card animate-bounce-in shadow-lg border-none"
-      :content-style="{padding: '20px 10px'}"
+      :content-style="{ padding: '20px 10px' }"
-      :header-style="{background: 'transparent'}"
+      :header-style="{ background: 'transparent' }"
     >
       <div class="flex flex-col gap-6">
         <!-- 投资类型 -->
@@ -30,7 +36,13 @@ const handleSubmit = () => {
         <!-- 金额与分红 -->
         <div>
           <div class="text-base font-bold mb-2">Amount to Calculate</div>
-          <n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
+          <n-input
+            v-model:value="amount"
+            type="number"
+            class="mb-2"
+            size="medium"
+            placeholder="Enter amount"
+          />
           <n-radio-group v-model:value="dividendType" name="dividendType">
             <n-radio value="reinvested">Dividends reinvested</n-radio>
             <n-radio value="notReinvested">Dividends not reinvested</n-radio>
@@ -39,11 +51,22 @@ const handleSubmit = () => {
         <!-- 投资日期 -->
         <div>
           <div class="text-base font-bold mb-2">Investment Date</div>
-          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
+          <n-date-picker
+            v-model:value="investmentDate"
+            type="date"
+            class="w-full"
+            size="medium"
+            placeholder="Select date"
+          />
         </div>
       </div>
       <div class="flex justify-end mt-6">
-        <n-button type="primary" size="medium" class="px-6 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
+        <n-button
+          type="primary"
+          size="medium"
+          class="px-6 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow"
+          @click="handleSubmit"
+        >
           Submit
         </n-button>
       </div>
@@ -53,11 +76,10 @@ const handleSubmit = () => {
 
 <style scoped>
 .glass-card {
-  background: rgba(255,255,255,0.18);
+  background: rgba(255, 255, 255, 0.18);
-  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.18);
+  box-shadow: 0 4px 16px 0 rgba(255, 123, 172, 0.18);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.18);
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 </style>
-

src/views/calculator/size768/index.vue

@@ -1,22 +1,28 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
+import {
+  NCard,
+  NRadioGroup,
+  NRadio,
+  NInput,
+  NDatePicker,
+  NButton,
+} from "naive-ui";
 
-const investmentType = ref('amount')
+const investmentType = ref("amount");
-const amount = ref(10000)
+const amount = ref(10000);
-const dividendType = ref('notReinvested')
+const dividendType = ref("notReinvested");
-const investmentDate = ref(null)
+const investmentDate = ref(null);
 
-const handleSubmit = () => {
+const handleSubmit = () => {};
-}
 </script>
 
 <template>
   <div class="flex-center h-70vh px-4 py-8 animate-bg-move">
     <n-card
       class="w-full max-w-[900px] glass-card animate-bounce-in shadow-xl border-none"
-      :content-style="{padding: '32px 24px'}"
+      :content-style="{ padding: '32px 24px' }"
-      :header-style="{background: 'transparent'}"
+      :header-style="{ background: 'transparent' }"
     >
       <div class="flex flex-col gap-8">
         <!-- 投资类型 -->
@@ -30,7 +36,13 @@ const handleSubmit = () => {
         <!-- 金额与分红 -->
         <div>
           <div class="text-lg font-bold mb-3">Amount to Calculate</div>
-          <n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
+          <n-input
+            v-model:value="amount"
+            type="number"
+            class="mb-3"
+            size="large"
+            placeholder="Enter amount"
+          />
           <n-radio-group v-model:value="dividendType" name="dividendType">
             <n-radio value="reinvested">Dividends reinvested</n-radio>
             <n-radio value="notReinvested">Dividends not reinvested</n-radio>
@@ -39,11 +51,22 @@ const handleSubmit = () => {
         <!-- 投资日期 -->
         <div>
           <div class="text-lg font-bold mb-3">Investment Date</div>
-          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
+          <n-date-picker
+            v-model:value="investmentDate"
+            type="date"
+            class="w-full"
+            size="large"
+            placeholder="Select date"
+          />
         </div>
       </div>
       <div class="flex justify-end mt-8">
-        <n-button type="primary" size="large" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
+        <n-button
+          type="primary"
+          size="large"
+          class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow"
+          @click="handleSubmit"
+        >
           Submit
         </n-button>
       </div>
@@ -53,11 +76,10 @@ const handleSubmit = () => {
 
 <style scoped>
 .glass-card {
-  background: rgba(255,255,255,0.18);
+  background: rgba(255, 255, 255, 0.18);
-  box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
+  box-shadow: 0 6px 24px 0 rgba(255, 123, 172, 0.25);
   backdrop-filter: blur(10px);
   border-radius: 24px;
-  border: 1px solid rgba(255,255,255,0.18);
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 </style>
-

src/views/events-calendar/size1920/index.vue

@@ -74,5 +74,9 @@ const handleSearch = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/events-calendar/size375/index.vue

@@ -80,5 +80,9 @@ const handleSearch = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/financialinformation/quarterlyreports/size1440/index.vue

@@ -400,7 +400,8 @@ const downloadPdf = async (pdfResource, filename = "") => {
 
 .search-button {
   padding: 8px 16px;
-  background-color: #f0f0f0;
+  color: #fff;
+  background-color: #ff7bac;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;

src/views/financialinformation/quarterlyreports/size1920/index.vue

@@ -400,7 +400,8 @@ const downloadPdf = async (pdfResource, filename = "") => {
 
 .search-button {
   padding: 8px 16px;
-  background-color: #f0f0f0;
+  color: #fff;
+  background-color: #ff7bac;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;

src/views/financialinformation/quarterlyreports/size375/index.vue

@@ -434,7 +434,7 @@ const downloadPdf = (url) => {
 .search-button {
   width: 100%;
   padding: 10px 0;
-  background: #2979ff;
+  background: #ff7bac;
   color: white;
   border: none;
   border-radius: 4px;
@@ -444,7 +444,7 @@ const downloadPdf = (url) => {
 }
 
 .search-button:hover {
-  background: #1e6de8;
+  background: #ff7bac;
 }
 
 .results-list {

src/views/financialinformation/quarterlyreports/size768/index.vue

@@ -434,7 +434,7 @@ const downloadPdf = (url) => {
 .search-button {
   width: 100%;
   padding: 10px 0;
-  background: #2979ff;
+  background: #ff7bac;
   color: white;
   border: none;
   border-radius: 4px;
@@ -444,7 +444,7 @@ const downloadPdf = (url) => {
 }
 
 .search-button:hover {
-  background: #1e6de8;
+  background: #ff7bac;
 }
 
 .results-list {

src/views/financialinformation/secfilings/size1440/index.vue

@@ -574,4 +574,7 @@ const handleViewDocument = (val, type) => {
     font-size: 16px;
   }
 }
+:deep(.n-base-loading__icon) {
+  color: #ff7bac;
+}
 </style>

src/views/financialinformation/secfilings/size1920/index.vue

@@ -575,4 +575,7 @@ const handleViewDocument = (val, type) => {
     font-size: 14px;
   }
 }
+:deep(.n-base-loading__icon) {
+  color: #ff7bac;
+}
 </style>

src/views/financialinformation/secfilings/size375/index.vue

@@ -575,4 +575,7 @@ const handleViewDocument = (val, type) => {
     font-size: 72px;
   }
 }
+:deep(.n-base-loading__icon) {
+  color: #ff7bac;
+}
 </style>

src/views/financialinformation/secfilings/size768/index.vue

@@ -577,4 +577,7 @@ const handleViewDocument = (val, type) => {
     font-size: 40px;
   }
 }
+:deep(.n-base-loading__icon) {
+  color: #ff7bac;
+}
 </style>

src/views/footerLinks/siteMap/size1440/index.vue

@@ -134,7 +134,7 @@ const router = useRouter();
   cursor: pointer;
   transition: color 0.3s ease;
   text-decoration: underline;
-  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-decoration-color: rgba(255, 123, 172, 0.5);
   text-underline-offset: 4px;
 }
 

src/views/footerLinks/siteMap/size1920/index.vue

@@ -135,7 +135,7 @@ const router = useRouter();
   cursor: pointer;
   transition: color 0.3s ease;
   text-decoration: underline;
-  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-decoration-color: rgba(255, 123, 172, 0.5);
   text-underline-offset: 4px;
 }
 

src/views/footerLinks/siteMap/size375/index.vue

@@ -135,7 +135,7 @@ const router = useRouter();
   cursor: pointer;
   transition: color 0.3s ease;
   text-decoration: underline;
-  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-decoration-color: rgba(255, 123, 172, 0.5);
   text-underline-offset: 4px;
 }
 

src/views/footerLinks/siteMap/size768/index.vue

@@ -134,7 +134,7 @@ const router = useRouter();
   cursor: pointer;
   transition: color 0.3s ease;
   text-decoration: underline;
-  text-decoration-color: rgba(137, 91, 255, 0.5);
+  text-decoration-color: rgba(255, 123, 172, 0.5);
   text-underline-offset: 4px;
 }
 

src/views/govern/size1440/index.vue

@@ -236,7 +236,7 @@ const handleViewDocument = (item) => {
 
 .governance-card:hover .governance-icon {
   animation: float 2s ease-in-out infinite;
-  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+  box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
 }
 
 /* 卡片背景渐变效果 */
@@ -249,7 +249,7 @@ const handleViewDocument = (item) => {
   height: 100%;
   background: linear-gradient(
     135deg,
-    rgba(137, 91, 255, 0.1) 0%,
+    rgba(255, 123, 172, 0.1) 0%,
     rgba(0, 0, 0, 0) 50%
   );
   opacity: 0;

src/views/govern/size1920/index.vue

@@ -236,7 +236,7 @@ const handleViewDocument = (item) => {
 
 .governance-card:hover .governance-icon {
   animation: float 2s ease-in-out infinite;
-  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+  box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
 }
 
 /* 卡片背景渐变效果 */
@@ -249,7 +249,7 @@ const handleViewDocument = (item) => {
   height: 100%;
   background: linear-gradient(
     135deg,
-    rgba(137, 91, 255, 0.1) 0%,
+    rgba(255, 123, 172, 0.1) 0%,
     rgba(0, 0, 0, 0) 50%
   );
   opacity: 0;

src/views/govern/size375/index.vue

@@ -229,10 +229,9 @@ const handleViewDocument = (item) => {
 .governance-icon {
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
-
 .governance-card:hover .governance-icon {
   animation: float 2s ease-in-out infinite;
-  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+  box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
 }
 
 /* 卡片背景渐变效果 */
@@ -245,7 +244,7 @@ const handleViewDocument = (item) => {
   height: 100%;
   background: linear-gradient(
     135deg,
-    rgba(137, 91, 255, 0.1) 0%,
+    rgba(255, 123, 172, 0.1) 0%,
     rgba(0, 0, 0, 0) 50%
   );
   opacity: 0;

src/views/govern/size768/index.vue

@@ -232,7 +232,7 @@ const handleViewDocument = (item) => {
 
 .governance-card:hover .governance-icon {
   animation: float 2s ease-in-out infinite;
-  box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
+  box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
 }
 
 /* 卡片背景渐变效果 */
@@ -245,7 +245,7 @@ const handleViewDocument = (item) => {
   height: 100%;
   background: linear-gradient(
     135deg,
-    rgba(137, 91, 255, 0.1) 0%,
+    rgba(255, 123, 172, 0.1) 0%,
     rgba(0, 0, 0, 0) 50%
   );
   opacity: 0;

src/views/manage/size1440/index.vue

@@ -201,7 +201,7 @@ const getInitials = (name) => {
   position: absolute;
   width: 20px;
   height: 20px;
-  background: rgba(255, 255, 255, 0.2);
+  background: #ffbfd7;
   border-radius: 50%;
   top: -10px;
   right: -10px;
@@ -217,7 +217,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.8rem;
   font-weight: bold;
-  color: #ffbfd7;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size1920/index.vue

@@ -201,7 +201,7 @@ const getInitials = (name) => {
   position: absolute;
   width: 20px;
   height: 20px;
-  background: rgba(255, 255, 255, 0.2);
+  background: #ffbfd7;
   border-radius: 50%;
   top: -10px;
   right: -10px;
@@ -217,7 +217,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.8rem;
   font-weight: bold;
-  color: #ffbfd7;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size375/index.vue

@@ -190,7 +190,7 @@ const getInitials = (name) => {
   position: absolute;
   width: 16px;
   height: 16px;
-  background: rgba(255, 255, 255, 0.2);
+  background: #ffbfd7;
   border-radius: 50%;
   top: -8px;
   right: -8px;
@@ -206,7 +206,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.5rem;
   font-weight: bold;
-  color: #ffbfd7;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size768/index.vue

@@ -196,7 +196,7 @@ const getInitials = (name) => {
   position: absolute;
   width: 16px;
   height: 16px;
-  background: rgba(255, 255, 255, 0.2);
+  background: #ffbfd7;
   border-radius: 50%;
   top: -8px;
   right: -8px;
@@ -212,7 +212,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.5rem;
   font-weight: bold;
-  color: #ffbfd7;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/myHome/size1440/index.vue

@@ -155,9 +155,16 @@
               <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
-              <span style="font-size: 18px" class="data-value positive">{{
+              <span
-                stockQuote.change || "--"
+                style="font-size: 18px"
-              }}</span>
+                class="data-value"
+                :class="
+                  stockQuote.change?.includes('-')
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
+              >
             </div>
             <div class="data-row">
               <span style="font-size: 18px" class="data-label">{{
@@ -622,7 +629,7 @@ const handleLink = (item) => {
 
 .event-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
 }
 
 /* 新闻模块样式 */

src/views/myHome/size1920/index.vue

@@ -151,9 +151,16 @@
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
-              <span class="data-value positive">{{
+
-                stockQuote.change || "--"
+              <span
-              }}</span>
+                class="data-value"
+                :class="
+                  stockQuote.change?.includes('-')
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
+              >
             </div>
             <div class="data-row">
               <span class="data-label">{{
@@ -613,7 +620,7 @@ const handleLink = (item) => {
 
 .event-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
 }
 
 /* 新闻模块样式 */

src/views/myHome/size375/index.vue

@@ -155,9 +155,17 @@
               <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
-              <span style="font-size: 18px" class="data-value positive">{{
+
-                stockQuote.change || "--"
+              <span
-              }}</span>
+                style="font-size: 18px"
+                class="data-value"
+                :class="
+                  stockQuote.change?.includes('-')
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
+              >
             </div>
             <div class="data-row">
               <span style="font-size: 18px" class="data-label">{{
@@ -620,7 +628,7 @@ const handleLink = (item) => {
 
 .event-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
 }
 
 /* 新闻模块样式 */

src/views/myHome/size768/index.vue

@@ -155,9 +155,17 @@
               <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
-              <span style="font-size: 18px" class="data-value positive">{{
+
-                stockQuote.change || "--"
+              <span
-              }}</span>
+                style="font-size: 18px"
+                class="data-value"
+                :class="
+                  stockQuote.change?.includes('-')
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
+              >
             </div>
             <div class="data-row">
               <span style="font-size: 18px" class="data-label">{{
@@ -623,7 +631,7 @@ const handleLink = (item) => {
 
 .event-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
+  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.3);
 }
 
 /* 新闻模块样式 */

src/views/press-releases/size1440/index.vue

@@ -320,5 +320,9 @@ const doLoadMore = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/press-releases/size1920/index.vue

@@ -320,5 +320,9 @@ const doLoadMore = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/press-releases/size375/index.vue

@@ -353,5 +353,9 @@ const doLoadMore = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/press-releases/size768/index.vue

@@ -320,5 +320,9 @@ const doLoadMore = () => {
 .search-button {
   background: #ff7bac;
   color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
 }
 </style>

src/views/stock-quote/size1440/index.vue

@@ -71,7 +71,7 @@ getStockQuate();
   backdrop-filter: blur(16px);
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
 }
 .info-card {
   @apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;

src/views/stock-quote/size1920/index.vue

@@ -72,7 +72,7 @@ getStockQuate();
   backdrop-filter: blur(16px);
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(255, 123, 172, 0.18);
 }
 .info-card {
   @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1  hover:scale-105 transition-transform duration-300;

src/views/stock-quote/size375/index.vue

@@ -67,12 +67,12 @@ getStockQuate();
   backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(200, 200, 255, 0.18);
-  box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.08);
+  box-shadow: 0 2px 8px 0 rgba(255, 123, 172, 0.08);
 }
 .info-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 16px;
-  box-shadow: 0 1px 4px 0 rgba(31, 38, 135, 0.06);
+  box-shadow: 0 1px 4px 0 rgba(255, 123, 172, 0.06);
   padding: 12px 10px;
   display: flex;
   flex-direction: column;

src/views/stock-quote/size768/index.vue

@@ -72,12 +72,12 @@ getStockQuate();
   backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(200, 200, 255, 0.18);
-  box-shadow: 0 3px 12px 0 rgba(31, 38, 135, 0.08);
+  box-shadow: 0 3px 12px 0 rgba(255, 123, 172, 0.08);
 }
 .info-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 16px;
-  box-shadow: 0 2px 6px 0 rgba(31, 38, 135, 0.06);
+  box-shadow: 0 2px 6px 0 rgba(255, 123, 172, 0.06);
   padding: 16px 14px;
   display: flex;
   flex-direction: column;