Revert "2025Quarterly"

This reverts commit 703b83869e.

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,16 +6,18 @@
   >
     <div class="header-container">
       <div class="logo" @click="handleToHome">
-        <NImage width="80" height="80" :src="FiEELogo" preview-disabled />
+        <NImage width="140" height="140" :src="FiEELogo" preview-disabled />
       </div>
       <div class="header-menu">
-        <NMenu
+        <NConfigProvider :theme-overrides="themeOverrides">
-          mode="horizontal"
+          <NMenu
-          :options="menuOptions"
+            mode="horizontal"
-          :inverted="isScrolled"
+            :options="menuOptions"
-          v-model:value="selectedKey"
+            :inverted="isScrolled"
-          @update:value="handleMenuSelect"
+            v-model:value="selectedKey"
-        />
+            @update:value="handleMenuSelect"
+          />
+        </NConfigProvider>
       </div>
     </div>
   </NLayoutHeader>
@@ -24,11 +26,31 @@
 <script setup>
 import FiEELogo from "@/assets/image/header/logo.png";
 import { ref, onMounted, onUnmounted } from "vue";
-import { NMenu, NLayoutHeader, NImage } from "naive-ui";
+import { NMenu, NLayoutHeader, NImage, NConfigProvider } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
 
+const themeOverrides = {
+  Menu: {
+    // itemTextColor: "#ff7bac", // 默认文本颜色
+    // 水平模式专用文本颜色（这些才会在水平模式下生效）
+    // itemTextColorHorizontal: "#ff7bac", // 水平模式默认文本颜色
+    itemTextColorHoverHorizontal: "#ff7bac", // 水平模式悬停文本颜色
+    itemTextColorActiveHorizontal: "#ff7bac", // 水平模式激活文本颜色
+    itemTextColorActiveHoverHorizontal: "#ff7bac", // 水平模式激活悬停文本颜色
+
+    itemColorHover: "#ff7bac",
+    itemColorHoverInverted: "#ff7bac",
+  },
+
+  // 关键：子菜单的悬停背景色在这里配置！
+  Dropdown: {
+    optionColorHover: "#fddfea", // 子菜单悬停背景色
+    optionColorHoverInverted: "#fddfea", // 反转主题下的子菜单悬停背景色
+  },
+};
+
 const { t } = useI18n();
 const router = useRouter();
 
@@ -122,6 +144,12 @@ const handleToHome = () => {
 .header-menu {
   display: block;
   flex: 1;
+  // :deep(
+  //     .n-menu-item-content:not(.n-menu-item-content--disabled):hover
+  //       .n-menu-item-content-header
+  //   ) {
+  //   color: #ff7bac;
+  // }
 
   :deep(.n-menu) {
     background: transparent;
@@ -145,7 +173,7 @@ const handleToHome = () => {
       left: 50%;
       width: 0;
       height: 2px;
-      background: var(--primary-color);
+      background: #ff7bac;
       transition: all 0.3s ease;
       transform: translateX(-50%);
       opacity: 0;

src/components/customHeader/size1920/index.vue

@@ -6,16 +6,18 @@
   >
     <div class="header-container">
       <div class="logo" @click="handleToHome">
-        <NImage width="80" height="80" :src="FiEELogo" preview-disabled />
+        <NImage width="140" height="140" :src="FiEELogo" preview-disabled />
       </div>
       <div class="header-menu">
-        <NMenu
+        <NConfigProvider :theme-overrides="themeOverrides">
-          mode="horizontal"
+          <NMenu
-          :options="menuOptions"
+            mode="horizontal"
-          :inverted="isScrolled"
+            :options="menuOptions"
-          v-model:value="selectedKey"
+            :inverted="isScrolled"
-          @update:value="handleMenuSelect"
+            v-model:value="selectedKey"
-        />
+            @update:value="handleMenuSelect"
+          />
+        </NConfigProvider>
       </div>
     </div>
   </NLayoutHeader>
@@ -24,11 +26,30 @@
 <script setup>
 import FiEELogo from "@/assets/image/header/logo.png";
 import { ref, onMounted, onUnmounted } from "vue";
-import { NMenu, NLayoutHeader, NImage } from "naive-ui";
+import { NMenu, NLayoutHeader, NImage, NConfigProvider } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
 
+const themeOverrides = {
+  Menu: {
+    // itemTextColor: "#ff7bac", // 默认文本颜色
+    // 水平模式专用文本颜色（这些才会在水平模式下生效）
+    // itemTextColorHorizontal: "#ff7bac", // 水平模式默认文本颜色
+    itemTextColorHoverHorizontal: "#ff7bac", // 水平模式悬停文本颜色
+    itemTextColorActiveHorizontal: "#ff7bac", // 水平模式激活文本颜色
+    itemTextColorActiveHoverHorizontal: "#ff7bac", // 水平模式激活悬停文本颜色
+
+    itemColorHover: "#ff7bac",
+    itemColorHoverInverted: "#ff7bac",
+  },
+
+  // 关键：子菜单的悬停背景色在这里配置！
+  Dropdown: {
+    optionColorHover: "#fddfea", // 子菜单悬停背景色
+    optionColorHoverInverted: "#fddfea", // 反转主题下的子菜单悬停背景色
+  },
+};
 const { t } = useI18n();
 const router = useRouter();
 
@@ -145,7 +166,7 @@ const handleToHome = () => {
       left: 50%;
       width: 0;
       height: 2px;
-      background: var(--primary-color);
+      background: #ff7bac;
       transition: all 0.3s ease;
       transform: translateX(-50%);
       opacity: 0;

src/components/customHeader/size375/index.vue

@@ -7,7 +7,7 @@
     <div class="header-container">
       <div class="logo" @click="handleToHome">
         <NImage
-          style="width: 60px; height: 60px; 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

@@ -123,7 +123,6 @@ const solutions = computed(() => [
   );
 }
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -177,7 +176,6 @@ const solutions = computed(() => [
 /* 移动端布局（<768px） */
 @media (max-width: 767px) {
   .home-page {
-    background-image: url("@/assets/image/bg-mobile.png");
   }
 
   .hero-title {
@@ -211,8 +209,8 @@ const solutions = computed(() => [
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
-  border: 1px solid rgba(137, 91, 255, 0.2);
+  border: 1px solid #fdc8dd;
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+  background: #fff8fb;
 }
 
 .card-header {
@@ -233,7 +231,7 @@ const solutions = computed(() => [
 
 .card-title {
   font-size: 1.3rem;
-  color: #2c0850;
+  color: #e53073;
   font-weight: 600;
 }
 
@@ -241,17 +239,17 @@ 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 {
-  color: #4a3a6b;
+  color: #e53073;
   font-size: 1.2rem;
   flex-shrink: 0;
 }
 
 .point-text {
-  color: #4a3a6b;
+  color: #e53073;
   line-height: 1.6;
   font-size: 18px;
 }

src/views/BusinessServices/size1920/index.vue

@@ -123,7 +123,6 @@ const solutions = computed(() => [
   );
 }
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -177,7 +176,6 @@ const solutions = computed(() => [
 /* 移动端布局（<768px） */
 @media (max-width: 767px) {
   .home-page {
-    background-image: url("@/assets/image/bg-mobile.png");
   }
 
   .hero-title {
@@ -211,8 +209,8 @@ const solutions = computed(() => [
   transform: translateY(20px);
   opacity: 0;
   animation: cardEnter 0.6s ease forwards;
-  border: 1px solid rgba(137, 91, 255, 0.2);
+  border: 1px solid #fdc8dd;
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+  background: #fff8fb;
 }
 
 .card-header {
@@ -233,7 +231,7 @@ const solutions = computed(() => [
 
 .card-title {
   font-size: 1.3rem;
-  color: #2c0850;
+  color: #e53073;
   font-weight: 600;
 }
 
@@ -241,17 +239,17 @@ 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 {
-  color: #4a3a6b;
+  color: #e53073;
   font-size: 1.2rem;
   flex-shrink: 0;
 }
 
 .point-text {
-  color: #4a3a6b;
+  color: #e53073;
   line-height: 1.6;
   font-size: 18px;
 }

src/views/BusinessServices/size375/index.vue

@@ -137,7 +137,6 @@ const solutions = computed(() => [
 }
 
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -167,16 +166,16 @@ const solutions = computed(() => [
 
 /* 卡片样式 */
 .solution-card {
-  background: white;
+  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;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(137, 91, 255, 0.2);
+  border: 1px solid #fdc8dd;
   transition: all 0.3s ease;
 }
 
@@ -192,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 {
@@ -214,7 +213,7 @@ const solutions = computed(() => [
 
 .card-title {
   font-size: 1.3rem;
-  color: #2c0850;
+  color: #e53073;
   font-weight: 600;
 }
 
@@ -222,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 {
@@ -230,13 +229,13 @@ const solutions = computed(() => [
 }
 
 .point-icon {
-  color: #4a3a6b;
+  color: #e53073;
   font-size: 1.2rem;
   flex-shrink: 0;
 }
 
 .point-text {
-  color: #4a3a6b;
+  color: #e53073;
   line-height: 1.6;
   font-size: 1rem;
 }

src/views/BusinessServices/size768/index.vue

@@ -138,7 +138,6 @@ const solutions = computed(() => [
 }
 
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -168,16 +167,16 @@ const solutions = computed(() => [
 
 /* 卡片样式 */
 .solution-card {
-  background: white;
+  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;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(137, 91, 255, 0.2);
+  border: 1px solid #fdc8dd;
   transition: all 0.3s ease;
 }
 
@@ -193,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 {
@@ -215,7 +214,7 @@ const solutions = computed(() => [
 
 .card-title {
   font-size: 1.3rem;
-  color: #2c0850;
+  color: #e53073;
   font-weight: 600;
 }
 
@@ -223,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 {
@@ -231,13 +230,13 @@ const solutions = computed(() => [
 }
 
 .point-icon {
-  color: #4a3a6b;
+  color: #e53073;
   font-size: 1.2rem;
   flex-shrink: 0;
 }
 
 .point-text {
-  color: #4a3a6b;
+  color: #e53073;
   line-height: 1.6;
   font-size: 1rem;
 }

src/views/CommitteeAppointment/size1440/index.vue

@@ -152,7 +152,7 @@ const getCommitteeRole = (name, committee) => {
 
 <style scoped>
 .role-badge.chair {
-  color: orange;
+  color: #00baff;
 }
 .title h1 {
   position: relative;
@@ -165,7 +165,7 @@ const getCommitteeRole = (name, committee) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -179,11 +179,10 @@ 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 {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -224,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,
@@ -235,7 +234,7 @@ const getCommitteeRole = (name, committee) => {
 }
 
 .table-header {
-  background: #f9f6ff;
+  background: #fff0f6;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -318,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);
 }
 
 /* 响应式设计 */
@@ -359,7 +358,7 @@ const getCommitteeRole = (name, committee) => {
   }
 }
 .director-link {
-  color: #895bff;
+  color: #ff7bac;
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;

src/views/CommitteeAppointment/size1920/index.vue

@@ -151,17 +151,16 @@ const getCommitteeRole = (name, committee) => {
 <style scoped>
 /* 紫色主题变量 */
 .role-badge.chair {
-  color: orange;
+  color: #00baff;
 }
 :root {
   --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 {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -178,7 +177,7 @@ const getCommitteeRole = (name, committee) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -221,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,
@@ -232,7 +231,7 @@ const getCommitteeRole = (name, committee) => {
 }
 
 .table-header {
-  background: #f9f6ff;
+  background: #fff0f6;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -315,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);
 }
 
 /* 响应式设计 */
@@ -356,7 +355,7 @@ const getCommitteeRole = (name, committee) => {
   }
 }
 .director-link {
-  color: #895bff;
+  color: #ff7bac;
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;

src/views/CommitteeAppointment/size375/index.vue

@@ -161,11 +161,6 @@ const getInitials = (name) => {
   align-items: center;
 }
 
-.role-badge.chair {
-  background-color: #e6f2ff;
-  color: #0066cc;
-}
-
 .role-badge.member {
   background-color: #f0f0f0;
   color: #555;
@@ -181,7 +176,7 @@ const getInitials = (name) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -203,7 +198,6 @@ const getInitials = (name) => {
 
 /* 页面样式 */
 .board-members-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -244,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;
@@ -260,6 +254,7 @@ const getInitials = (name) => {
 }
 
 .card-header {
+  color: #ff7bac;
   padding: 1.25rem;
   background: var(--bg-light);
   border-bottom: 1px solid #f0f0f0;
@@ -321,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: rgba(137, 91, 255, 0.15);
+  background-color: #fcecf2;
-  color: var(--primary-dark);
+  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: #0066cc;
+  color: #ff7bac;
 }
 
 .role-badge.member {
@@ -181,7 +181,7 @@ const getInitials = (name) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -203,7 +203,6 @@ const getInitials = (name) => {
 
 /* 页面样式 */
 .board-members-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -244,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;
@@ -260,6 +259,7 @@ const getInitials = (name) => {
 }
 
 .card-header {
+  color: #ff7bac;
   padding: 1.25rem;
   background: var(--bg-light);
   border-bottom: 1px solid #f0f0f0;
@@ -321,15 +321,10 @@ 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: rgba(137, 91, 255, 0.15);
-  color: var(--primary-dark);
-}
-
 .committee-name {
   font-size: 0.75rem;
   opacity: 0.8;

src/views/boarddirectors/size1440/index.vue

@@ -62,7 +62,6 @@ const otherDirectors = [
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

src/views/boarddirectors/size1920/index.vue

@@ -58,7 +58,6 @@ const otherDirectors = [
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

src/views/boarddirectors/size375/index.vue

@@ -66,7 +66,6 @@ const otherDirectors = [
 }
 
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/views/boarddirectors/size768/index.vue

@@ -62,7 +62,6 @@ const otherDirectors = [
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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/companyoverview/size1440/index.vue

@@ -25,8 +25,6 @@
         </h1>
         <div class="mission-cards">
           <n-card hoverable class="mission-card" v-motion-pop>
-            
-
             <n-p style="font-size: 18px" class="card-content">{{
               $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
             }}</n-p>
@@ -188,7 +186,6 @@ const stats = ref([
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -241,7 +238,7 @@ const stats = ref([
   left: 0;
   width: 60px;
   height: 4px;
-  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  background: linear-gradient(to right, #00ffff, #ff7bac);
   border-radius: 2px;
 }
 
@@ -301,7 +298,7 @@ const stats = ref([
   left: 20px;
   height: 100%;
   width: 4px;
-  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
 }
 
 .timeline-item {
@@ -316,13 +313,13 @@ const stats = ref([
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #895bff;
+  background: #ff7bac;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {

src/views/companyoverview/size1920/index.vue

@@ -188,7 +188,6 @@ const stats = ref([
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -241,7 +240,7 @@ const stats = ref([
   left: 0;
   width: 60px;
   height: 4px;
-  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  background: linear-gradient(to right, #00ffff, #ff7bac);
   border-radius: 2px;
 }
 
@@ -301,7 +300,7 @@ const stats = ref([
   left: 20px;
   height: 100%;
   width: 4px;
-  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
 }
 
 .timeline-item {
@@ -316,13 +315,13 @@ const stats = ref([
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #895bff;
+  background: #ff7bac;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {

src/views/companyoverview/size375/index.vue

@@ -189,7 +189,6 @@ const stats = ref([
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -241,7 +240,7 @@ const stats = ref([
   left: 0;
   width: 60px;
   height: 4px;
-  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  background: linear-gradient(to right, #00ffff, #ff7bac);
   border-radius: 2px;
 }
 
@@ -301,7 +300,7 @@ const stats = ref([
   left: 20px;
   height: 100%;
   width: 4px;
-  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
 }
 
 .timeline-item {
@@ -316,13 +315,13 @@ const stats = ref([
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #895bff;
+  background: #ff7bac;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {

src/views/companyoverview/size768/index.vue

@@ -187,14 +187,13 @@ const stats = ref([
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 .company-overview {
+  max-width: 1200px;
   margin: 0 auto;
-  /* padding: 0 20px; */
 }
 
 /* 顶部大图区域 */
@@ -239,7 +238,7 @@ const stats = ref([
   left: 0;
   width: 60px;
   height: 4px;
-  background: linear-gradient(to right, #1a2a6c, #fdbb2d);
+  background: linear-gradient(to right, #00ffff, #ff7bac);
   border-radius: 2px;
 }
 
@@ -299,7 +298,7 @@ const stats = ref([
   left: 20px;
   height: 100%;
   width: 4px;
-  background: linear-gradient(to bottom, #895bff, #fdbb2d);
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
 }
 
 .timeline-item {
@@ -314,13 +313,13 @@ const stats = ref([
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: #895bff;
+  background: #ff7bac;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {

src/views/contacts/size1440/index.vue

@@ -3,20 +3,38 @@ import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 
 function copyEmail() {
-  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+  navigator.clipboard.writeText("fiee@dlkadvisory.com");
 }
 </script>
 
 <template>
-
+  <main
-  <main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')] rounded-3xl to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]" >
+    ref="main"
+    class="flex-center min-h-80vh rounded-3xl to-accent w-100vw animate-fade-in"
+  >
     <div class="w-full flex flex-col items-center gap-5 py-12 px-6">
-      <h1 class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <h1
-      <div class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+        class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      <div class="text-xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      >
-      <div class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
+        Investor Contacts
+      </h1>
+      <div
+        class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
+      >
+        FiEE Inc.
+      </div>
+      <div class="text-xl text-#ff7bac animate-fade-in-down animate-delay-400">
+        Investor Relations
+      </div>
+      <div
+        class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
+      >
         <span>Email:</span>
-        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+        <span
+          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
+          @click="copyEmail"
+          >fiee@dlkadvisory.com</span
+        >
       </div>
     </div>
   </main>
@@ -37,9 +55,16 @@ function copyEmail() {
 .animate-fade-in-down {
   animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
 }
-.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-0 {
-.animate-delay-200 { animation-delay: 0.2s; }
+  animation-delay: 0s;
-.animate-delay-400 { animation-delay: 0.4s; }
+}
-.animate-delay-600 { animation-delay: 0.6s; }
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+.animate-delay-400 {
+  animation-delay: 0.4s;
+}
+.animate-delay-600 {
+  animation-delay: 0.6s;
+}
 </style>
-

src/views/contacts/size1920/index.vue

@@ -3,28 +3,43 @@ import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 
 function copyEmail() {
-  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+  navigator.clipboard.writeText("fiee@dlkadvisory.com");
 }
 </script>
 
 <template>
-  <header className="header">
+  <header className="header"></header>
-  
+  <main
-  </header>
+    ref="main"
-  <main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')]  rounded-3xl  to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]">
+    class="flex-center min-h-80vh rounded-3xl to-accent w-100vw animate-fade-in"
+  >
     <div class="w-full flex flex-col items-center gap-6 py-16 px-8">
-      <h1 class="text-5xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <h1
-      <div class="text-3xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+        class="text-5xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      <div class="text-2xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      >
-      <div class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
+        Investor Contacts
+      </h1>
+      <div
+        class="text-3xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
+      >
+        FiEE Inc.
+      </div>
+      <div class="text-2xl text-#ff7bac animate-fade-in-down animate-delay-400">
+        Investor Relations
+      </div>
+      <div
+        class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
+      >
         <span>Email:</span>
-        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+        <span
+          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
+          @click="copyEmail"
+          >fiee@dlkadvisory.com</span
+        >
       </div>
     </div>
   </main>
-  <footer>
+  <footer></footer>
-
-  </footer>
 </template>
 
 <style scoped lang="scss">
@@ -42,9 +57,16 @@ function copyEmail() {
 .animate-fade-in-down {
   animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
 }
-.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-0 {
-.animate-delay-200 { animation-delay: 0.2s; }
+  animation-delay: 0s;
-.animate-delay-400 { animation-delay: 0.4s; }
+}
-.animate-delay-600 { animation-delay: 0.6s; }
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+.animate-delay-400 {
+  animation-delay: 0.4s;
+}
+.animate-delay-600 {
+  animation-delay: 0.6s;
+}
 </style>
-

src/views/contacts/size375/index.vue

@@ -1,24 +1,43 @@
 <script setup>
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 function copyEmail() {
-  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+  navigator.clipboard.writeText("fiee@dlkadvisory.com");
 }
 </script>
 
 <template>
-
+  <main
-  <main ref="main" class="flex flex-col items-center      from-primary to-accent  w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px">
+    ref="main"
+    class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px"
+  >
     <div class="w-full flex flex-col items-center gap-4 px-2">
-      <h1 class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <h1
-      <div class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+        class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      <div class="text-base text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      >
-      <div class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600">
+        Investor Contacts
+      </h1>
+      <div
+        class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
+      >
+        FiEE Inc.
+      </div>
+      <div
+        class="text-base text-#ff7bac animate-fade-in-down animate-delay-400"
+      >
+        Investor Relations
+      </div>
+      <div
+        class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600"
+      >
         <span>Email:</span>
-        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+        <span
+          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
+          @click="copyEmail"
+          >fiee@dlkadvisory.com</span
+        >
       </div>
     </div>
   </main>
-
 </template>
 
 <style scoped lang="scss">
@@ -35,11 +54,20 @@ function copyEmail() {
 .animate-fade-in-down {
   animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
 }
-.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-0 {
-.animate-delay-200 { animation-delay: 0.2s; }
+  animation-delay: 0s;
-.animate-delay-400 { animation-delay: 0.4s; }
+}
-.animate-delay-600 { animation-delay: 0.6s; }
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+.animate-delay-400 {
+  animation-delay: 0.4s;
+}
+.animate-delay-600 {
+  animation-delay: 0.6s;
+}
 
-.max-w-343px { max-width: 343px; }
+.max-w-343px {
+  max-width: 343px;
+}
 </style>
-

src/views/contacts/size768/index.vue

@@ -1,19 +1,38 @@
 <script setup>
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 function copyEmail() {
-  navigator.clipboard.writeText('fiee@dlkadvisory.com');
+  navigator.clipboard.writeText("fiee@dlkadvisory.com");
 }
 </script>
 
 <template>
-  <main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px">
+  <main
+    ref="main"
+    class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px"
+  >
     <div class="w-full flex flex-col items-center gap-5 px-4">
-      <h1 class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
+      <h1
-      <div class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
+        class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0"
-      <div class="text-lg text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
+      >
-      <div class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
+        Investor Contacts
+      </h1>
+      <div
+        class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
+      >
+        FiEE Inc.
+      </div>
+      <div class="text-lg text-#ff7bac animate-fade-in-down animate-delay-400">
+        Investor Relations
+      </div>
+      <div
+        class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
+      >
         <span>Email:</span>
-        <span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
+        <span
+          class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
+          @click="copyEmail"
+          >fiee@dlkadvisory.com</span
+        >
       </div>
     </div>
   </main>
@@ -33,9 +52,16 @@ function copyEmail() {
 .animate-fade-in-down {
   animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
 }
-.animate-delay-0 { animation-delay: 0s; }
+.animate-delay-0 {
-.animate-delay-200 { animation-delay: 0.2s; }
+  animation-delay: 0s;
-.animate-delay-400 { animation-delay: 0.4s; }
+}
-.animate-delay-600 { animation-delay: 0.6s; }
+.animate-delay-200 {
+  animation-delay: 0.2s;
+}
+.animate-delay-400 {
+  animation-delay: 0.4s;
+}
+.animate-delay-600 {
+  animation-delay: 0.6s;
+}
 </style>
-

src/views/email-alerts/size1440/index.vue

@@ -1,76 +1,138 @@
 <script setup>
 import { ref } from "vue";
-import axios from 'axios'
+import axios from "axios";
 const form = ref({
   firstName: "",
   lastName: "",
   email: "",
   company: "",
   phone: "",
-  alertType: "all"
+  alertType: "all",
 });
 const submitted = ref(false);
 
 async function handleSubmit(e) {
   e.preventDefault();
-  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  const res = await axios.post(
-  if(res.data.status === 0){
+    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
+    form.value
+  );
+  if (res.data.status === 0) {
     submitted.value = true;
-  }else{
+  } else {
- 
   }
-
 }
 </script>
 
 <template>
-
+  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
-  <main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
     <!-- 粒子背景 -->
     <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
     <!-- 表单卡片/提交成功卡片 -->
-    <div class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in">
+    <div
+      class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in"
+    >
       <template v-if="!submitted">
-        <h2 class="text-2xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
+        <h2 class="text-2xl font-bold text-#ff7bac mb-2 tracking-wide">
+          E-Mail Alerts
+        </h2>
         <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
         <form class="space-y-3" @submit="handleSubmit">
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* First Name</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* First Name</label
+            >
+            <input
+              v-model="form.firstName"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.lastName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Last Name</label
+            >
+            <input
+              v-model="form.lastName"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Email</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.email" type="email" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Email</label
+            >
+            <input
+              v-model="form.email"
+              type="email"
+              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Company</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.company" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Company</label
+            >
+            <input
+              v-model="form.company"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
             <label class="block text-gray-700 font-semibold mb-1">Phone</label>
-            <input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+            <input
+              v-model="form.phone"
+              type="tel"
+              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
-          <button type="submit" class="w-full py-2.5 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
+          <button
+            type="submit"
+            class="w-full py-2.5 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
+          >
             Submit
           </button>
         </form>
       </template>
       <template v-else>
-        <div class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in">
+        <div
-          <span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
+          class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in"
-          <h2 class="text-xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
+        >
-          <div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
+          <span
-          <div class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm">
+            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
-            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+          ></span>
-            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+          <h2 class="text-xl font-bold text-#ff7bac mb-2">
-            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            Submitted successfully!
-            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+          </h2>
-            <div><span class="font-semibold">Phone：</span>{{ form.phone || 'Not filled in' }}</div>
+          <div class="text-gray-700 text-sm mb-3">
-            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+            The information you submitted is as follows:
+          </div>
+          <div
+            class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm"
+          >
+            <div>
+              <span class="font-semibold">First Name：</span
+              >{{ form.firstName }}
+            </div>
+            <div>
+              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
+            </div>
+            <div>
+              <span class="font-semibold">Email：</span>{{ form.email }}
+            </div>
+            <div>
+              <span class="font-semibold">Company：</span>{{ form.company }}
+            </div>
+            <div>
+              <span class="font-semibold">Phone：</span
+              >{{ form.phone || "Not filled in" }}
+            </div>
+            <div>
+              <span class="font-semibold">Alert Type：</span
+              >{{
+                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
+              }}
+            </div>
           </div>
         </div>
       </template>
@@ -80,5 +142,7 @@ async function handleSubmit(e) {
 
 <style scoped lang="scss">
 /* 可选：自定义粒子或渐变动画背景 */
+.submit-btn {
+  background: linear-gradient(to right, #ff7bac, #00ffff);
+}
 </style>
-

src/views/email-alerts/size1920/index.vue

@@ -1,87 +1,151 @@
 <script setup>
 import { ref } from "vue";
 
-import axios from 'axios'
+import axios from "axios";
 const form = ref({
   firstName: "",
   lastName: "",
   email: "",
   company: "",
   phone: "",
-alertType: "all"
+  alertType: "all",
 });
 const submitted = ref(false);
 
 async function handleSubmit(e) {
   e.preventDefault();
-  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  const res = await axios.post(
-  if(res.data.status === 0){
+    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
+    form.value
+  );
+  if (res.data.status === 0) {
     submitted.value = true;
-  }else{
+  } else {
- 
   }
-
 }
 </script>
 
 <template>
-  <header class="header">
+  <header class="header"></header>
-  </header>
+  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
-  <main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')]  overflow-hidden">
     <!-- 粒子背景 -->
     <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
     <!-- 表单卡片/提交成功卡片 -->
-    <div class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in">
+    <div
+      class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in"
+    >
       <template v-if="!submitted">
-        <h2 class="text-3xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
+        <h2 class="text-3xl font-bold text-#ff7bac mb-2 tracking-wide">
+          E-Mail Alerts
+        </h2>
         <p class="text-sm text-gray-500 mb-6">* Required Fields</p>
         <form class="space-y-4" @submit="handleSubmit">
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* First Name</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.firstName" type="text"  class="w-full px-4 py-2 rounded-lg border border-gray-300  ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* First Name</label
+            >
+            <input
+              v-model="form.firstName"
+              type="text"
+              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.lastName" type="text"  class="w-full px-4 py-2 rounded-lg border border-gray-300  ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Last Name</label
+            >
+            <input
+              v-model="form.lastName"
+              type="text"
+              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Email</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.email" type="email"  class="w-full px-4 py-2 rounded-lg border border-gray-300  ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Email</label
+            >
+            <input
+              v-model="form.email"
+              type="email"
+              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1">* Company</label>
+            <label class="block text-gray-700 font-semibold mb-1"
-            <input v-model="form.company" type="text"  class="w-full px-4 py-2 rounded-lg border border-gray-300  ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+              >* Company</label
+            >
+            <input
+              v-model="form.company"
+              type="text"
+              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
             <label class="block text-gray-700 font-semibold mb-1">Phone</label>
-            <input v-model="form.phone" type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300  ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
+            <input
+              v-model="form.phone"
+              type="tel"
+              class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
-          <button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-lg  active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
+          <button
+            type="submit"
+            class="w-full py-3 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
+          >
             Submit
           </button>
         </form>
       </template>
       <template v-else>
-        <div class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in">
+        <div
-          <span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
+          class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in"
-          <h2 class="text-2xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
+        >
-          <div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
+          <span
-          <div class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800">
+            class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"
-            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+          ></span>
-            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+          <h2 class="text-2xl font-bold text-#ff7bac mb-2">
-            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            Submitted successfully!
-            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+          </h2>
-            <div><span class="font-semibold">Phone：</span>{{ form.phone || 'Not filled in' }}</div>
+          <div class="text-gray-700 text-base mb-4">
-            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+            The information you submitted is as follows:
+          </div>
+          <div
+            class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800"
+          >
+            <div>
+              <span class="font-semibold">First Name：</span
+              >{{ form.firstName }}
+            </div>
+            <div>
+              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
+            </div>
+            <div>
+              <span class="font-semibold">Email：</span>{{ form.email }}
+            </div>
+            <div>
+              <span class="font-semibold">Company：</span>{{ form.company }}
+            </div>
+            <div>
+              <span class="font-semibold">Phone：</span
+              >{{ form.phone || "Not filled in" }}
+            </div>
+            <div>
+              <span class="font-semibold">Alert Type：</span
+              >{{
+                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
+              }}
+            </div>
           </div>
         </div>
       </template>
     </div>
   </main>
-  <footer>
+  <footer></footer>
-  </footer>
 </template>
 
 <style scoped lang="scss">
 /* 可选：自定义粒子或渐变动画背景 */
-</style>
+.submit-btn {
+  background: linear-gradient(to right, #ff7bac, #00ffff);
+}
+</style>

src/views/email-alerts/size375/index.vue

@@ -1,73 +1,142 @@
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
-import axios from 'axios'
+import axios from "axios";
 const form = ref({
-  firstName: '',
+  firstName: "",
-  lastName: '',
+  lastName: "",
-  email: '',
+  email: "",
-  company: '',
+  company: "",
-  phone: '',
+  phone: "",
-  alertType: 'all',
+  alertType: "all",
 });
 const submitted = ref(false);
 
 async function handleSubmit(e) {
   e.preventDefault();
-  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  const res = await axios.post(
-  if(res.data.status === 0){
+    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
+    form.value
+  );
+  if (res.data.status === 0) {
     submitted.value = true;
-  }else{
+  } else {
- 
   }
-
 }
 </script>
 
 <template>
-  <main class="min-h-60vh flex flex-col items-center justify-center  relative px-4 py-8">
+  <main
+    class="min-h-60vh flex flex-col items-center justify-center relative px-4 py-8"
+  >
     <!-- Card -->
-    <div class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
+    <div
+      class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
+    >
       <template v-if="!submitted">
-        <h2 class="text-xl font-bold text-#8A5AFB mb-2 text-center tracking-wide">E-Mail Alerts</h2>
+        <h2
+          class="text-xl font-bold text-#ff7bac mb-2 text-center tracking-wide"
+        >
+          E-Mail Alerts
+        </h2>
         <p class="text-xs text-gray-500 mb-4 text-center">* Required Fields</p>
         <form class="flex flex-col gap-3" @submit="handleSubmit">
           <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm">* First Name</label>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-            <input v-model="form.firstName" type="text"  class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+              >* First Name</label
+            >
+            <input
+              v-model="form.firstName"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Last Name</label>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-            <input v-model="form.lastName" type="text"  class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+              >* Last Name</label
+            >
+            <input
+              v-model="form.lastName"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Email</label>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-            <input v-model="form.email" type="email"  class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+              >* Email</label
+            >
+            <input
+              v-model="form.email"
+              type="email"
+              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm">* Company</label>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-            <input v-model="form.company" type="text"  class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+              >* Company</label
+            >
+            <input
+              v-model="form.company"
+              type="text"
+              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
           <div>
-            <label class="block text-gray-700 font-semibold mb-1 text-sm">Phone</label>
+            <label class="block text-gray-700 font-semibold mb-1 text-sm"
-            <input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
+              >Phone</label
+            >
+            <input
+              v-model="form.phone"
+              type="tel"
+              class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+            />
           </div>
-          <button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2">
+          <button
+            type="submit"
+            class="w-full py-3 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2 submit-btn"
+          >
             Submit
           </button>
         </form>
       </template>
       <template v-else>
-        <div class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in">
+        <div
-          <span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
+          class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in"
-          <h2 class="text-lg font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
+        >
-          <div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
+          <span
-          <div class="w-full bg-white/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm">
+            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
-            <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+          ></span>
-            <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+          <h2 class="text-lg font-bold text-#ff7bac mb-2">
-            <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+            Submitted successfully!
-            <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+          </h2>
-            <div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
+          <div class="text-gray-700 text-sm mb-3">
-            <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+            The information you submitted is as follows:
+          </div>
+          <div
+            class="w-full bg-white/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm"
+          >
+            <div>
+              <span class="font-semibold">First Name：</span
+              >{{ form.firstName }}
+            </div>
+            <div>
+              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
+            </div>
+            <div>
+              <span class="font-semibold">Email：</span>{{ form.email }}
+            </div>
+            <div>
+              <span class="font-semibold">Company：</span>{{ form.company }}
+            </div>
+            <div>
+              <span class="font-semibold">Phone：</span
+              >{{ form.phone || "(Not filled)" }}
+            </div>
+            <div>
+              <span class="font-semibold">Alert Type：</span
+              >{{
+                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
+              }}
+            </div>
           </div>
         </div>
       </template>
@@ -77,5 +146,7 @@ async function handleSubmit(e) {
 
 <style scoped lang="scss">
 /* Keep mobile background simple */
+.submit-btn {
+  background: linear-gradient(to right, #ff7bac, #00ffff);
+}
 </style>
-

src/views/email-alerts/size768/index.vue

@@ -1,85 +1,157 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-import axios from 'axios'
+import axios from "axios";
 const form = ref({
-  firstName: '',
+  firstName: "",
-  lastName: '',
+  lastName: "",
-  email: '',
+  email: "",
-  company: '',
+  company: "",
-  phone: '',
+  phone: "",
-  alertType: 'all',
+  alertType: "all",
 });
 const submitted = ref(false);
 
 async function handleSubmit(e) {
   e.preventDefault();
-  const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
+  const res = await axios.post(
-  if(res.data.status === 0){
+    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
+    form.value
+  );
+  if (res.data.status === 0) {
     submitted.value = true;
-  }else{
+  } else {
- 
   }
-
 }
 </script>
 
 <template>
- 
   <main ref="main">
-    <main class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10">
+    <main
-      <div class="w-[640px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
+      class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10"
+    >
+      <div
+        class="w-[840px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
+      >
         <template v-if="!submitted">
-          <h2 class="text-2xl font-bold text-#8A5AFB mb-3 text-center tracking-wide">E-Mail Alerts</h2>
+          <h2
-          <p class="text-sm text-gray-500 mb-5 text-center">* Required Fields</p>
+            class="text-2xl font-bold text-#ff7bac mb-3 text-center tracking-wide"
+          >
+            E-Mail Alerts
+          </h2>
+          <p class="text-sm text-gray-500 mb-5 text-center">
+            * Required Fields
+          </p>
           <form class="flex flex-col gap-4" @submit="handleSubmit">
             <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* First Name</label>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-              <input v-model="form.firstName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+                >* First Name</label
+              >
+              <input
+                v-model="form.firstName"
+                type="text"
+                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              />
             </div>
             <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Last Name</label>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-              <input v-model="form.lastName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+                >* Last Name</label
+              >
+              <input
+                v-model="form.lastName"
+                type="text"
+                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              />
             </div>
             <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Email</label>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-              <input v-model="form.email" type="email" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+                >* Email</label
+              >
+              <input
+                v-model="form.email"
+                type="email"
+                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              />
             </div>
             <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Company</label>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-              <input v-model="form.company" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+                >* Company</label
+              >
+              <input
+                v-model="form.company"
+                type="text"
+                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              />
             </div>
             <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base">Phone</label>
+              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-              <input v-model="form.phone" type="tel" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
+                >Phone</label
+              >
+              <input
+                v-model="form.phone"
+                type="tel"
+                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
+              />
             </div>
-            <button type="submit" class="w-full py-3.5 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3">
+            <button
+              type="submit"
+              class="w-full py-3.5 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3 submit-btn"
+            >
               Submit
             </button>
           </form>
         </template>
         <template v-else>
-          <div class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in">
+          <div
-            <span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
+            class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in"
-            <h2 class="text-xl font-bold text-#8A5AFB mb-3">Submitted successfully!</h2>
+          >
-            <div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
+            <span
-            <div class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base">
+              class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"
-              <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
+            ></span>
-              <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
+            <h2 class="text-xl font-bold text-#ff7bac mb-3">
-              <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
+              Submitted successfully!
-              <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
+            </h2>
-              <div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
+            <div class="text-gray-700 text-base mb-4">
-              <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
+              The information you submitted is as follows:
+            </div>
+            <div
+              class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base"
+            >
+              <div>
+                <span class="font-semibold">First Name：</span
+                >{{ form.firstName }}
+              </div>
+              <div>
+                <span class="font-semibold">Last Name：</span
+                >{{ form.lastName }}
+              </div>
+              <div>
+                <span class="font-semibold">Email：</span>{{ form.email }}
+              </div>
+              <div>
+                <span class="font-semibold">Company：</span>{{ form.company }}
+              </div>
+              <div>
+                <span class="font-semibold">Phone：</span
+                >{{ form.phone || "(Not filled)" }}
+              </div>
+              <div>
+                <span class="font-semibold">Alert Type：</span
+                >{{
+                  form.alertType === "all" ? "All Alerts" : "Customize Alerts"
+                }}
+              </div>
             </div>
           </div>
         </template>
       </div>
     </main>
   </main>
-
 </template>
 
 <style scoped lang="scss">
 /* Keep tablet background simple */
+.submit-btn {
+  background: linear-gradient(to right, #ff7bac, #00ffff);
+}
 </style>
-

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

@@ -4,7 +4,7 @@
       <template #content>
         <main class="p-[35px] max-w-[1200px] mx-auto">
           <div class="title mb-[20px]">
-            {{ t('events_calendar.title') }}
+            {{ t("events_calendar.title") }}
           </div>
           <div class="search-container">
             <n-date-picker
@@ -12,12 +12,8 @@
               type="date"
               class="search-date-picker"
             ></n-date-picker>
-            <n-button
+            <n-button @click="handleSearch" class="search-button">
-              type="primary"
+              {{ t("events_calendar.search.button") }}
-              @click="handleSearch"
-              class="search-button"
-            >
-              {{ t('events_calendar.search.button') }}
             </n-button>
           </div>
         </main>
@@ -27,21 +23,21 @@
 </template>
 
 <script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive } from 'vue'
+import { reactive } from "vue";
-import { NDatePicker, NButton } from 'naive-ui'
+import { NDatePicker, NButton } from "naive-ui";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const state = reactive({
   selectedDateValue: null, //选中值
-})
+});
 
 const handleSearch = () => {
   // 搜索处理逻辑
   // console.log('搜索:', state.selectedDateValue)
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -75,4 +71,12 @@ const handleSearch = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -4,7 +4,7 @@
       <template #content>
         <main class="p-[35px] max-w-[1800px] mx-auto">
           <div class="title mb-[20px]">
-            {{ t('events_calendar.title') }}
+            {{ t("events_calendar.title") }}
           </div>
           <div class="search-container">
             <n-date-picker
@@ -12,12 +12,8 @@
               type="date"
               class="search-date-picker"
             ></n-date-picker>
-            <n-button
+            <n-button @click="handleSearch" class="search-button">
-              type="primary"
+              {{ t("events_calendar.search.button") }}
-              @click="handleSearch"
-              class="search-button"
-            >
-              {{ t('events_calendar.search.button') }}
             </n-button>
           </div>
         </main>
@@ -27,21 +23,21 @@
 </template>
 
 <script setup>
-import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import { reactive } from 'vue'
+import { reactive } from "vue";
-import { NDatePicker, NButton } from 'naive-ui'
+import { NDatePicker, NButton } from "naive-ui";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const state = reactive({
   selectedDateValue: null, //选中值
-})
+});
 
 const handleSearch = () => {
   // 搜索处理逻辑
   // console.log('搜索:', state.selectedDateValue)
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -81,4 +77,12 @@ const handleSearch = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -167,7 +167,6 @@ const annualReports = ref([
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -167,7 +167,6 @@ const annualReports = ref([
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -168,7 +168,6 @@ const annualReports = ref([
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -167,7 +167,6 @@ const annualReports = ref([
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -472,7 +472,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -575,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

@@ -473,7 +473,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -576,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

@@ -473,7 +473,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -576,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

@@ -474,7 +474,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -578,4 +577,7 @@ const handleViewDocument = (val, type) => {
     font-size: 40px;
   }
 }
+:deep(.n-base-loading__icon) {
+  color: #ff7bac;
+}
 </style>

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

@@ -164,7 +164,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -164,7 +164,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -164,7 +164,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -164,7 +164,6 @@ const handleViewDocument = (val, type) => {
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,100 +1,114 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="privacy-policy">
-    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Privacy Policy</h1>
       <div class="content-block">
         <p>
           <strong>
             We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
-            maintaining the privacy and security of visitors to our website. Through
+            maintaining the privacy and security of visitors to our website.
-            this privacy policy, FiEE wants to assure you of our commitment to
+            Through this privacy policy, FiEE wants to assure you of our
-            privacy and security.
+            commitment to privacy and security.
           </strong>
         </p>
         <p>
           Our privacy philosophy is based on the concept of fair information
-          practices. This means we provide visitors to our website with notice of
+          practices. This means we provide visitors to our website with notice
-          how we manage information so that they can have a more informed
+          of how we manage information so that they can have a more informed
           understanding of how we operate.
         </p>
       </div>
     </section>
 
-    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-notice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Notice</h3>
       <div class="content-block">
         <p>
-          If we collect information about you, we will tell you what information is
+          If we collect information about you, we will tell you what information
-          being collected, how, by whom and for what purposes.
+          is being collected, how, by whom and for what purposes.
         </p>
         <p>
-          Through this statement and our web pages, we let you know what types of
+          Through this statement and our web pages, we let you know what types
-          information we collect from and about you, the types and intended uses of
+          of information we collect from and about you, the types and intended
-          such information, and the types of third parties to whom the information
+          uses of such information, and the types of third parties to whom the
-          may be disclosed. If we collect information from you, we clearly identify
+          information may be disclosed. If we collect information from you, we
-          the information that is necessary to fulfill your request and the optional
+          clearly identify the information that is necessary to fulfill your
-          information that is used to deliver tailored information to you.
+          request and the optional information that is used to deliver tailored
+          information to you.
         </p>
         <p>
-          When you visit our site, we may collect information about your use of our
+          When you visit our site, we may collect information about your use of
-          site through "cookies". Cookies are small bits of information transferred
+          our site through "cookies". Cookies are small bits of information
-          to your computer's hard drive that allow us to know how often someone
+          transferred to your computer's hard drive that allow us to know how
-          visits our site and the activities they conduct while on the site. The
+          often someone visits our site and the activities they conduct while on
-          information collected by cookies allows us to monitor how our customers
+          the site. The information collected by cookies allows us to monitor
-          are using our web site. If you simply want to browse, you do not have to
+          how our customers are using our web site. If you simply want to
-          accept cookies from us. However, if you wish to take advantage of specific
+          browse, you do not have to accept cookies from us. However, if you
-          services offered online, we may require you to accept cookies placed by a
+          wish to take advantage of specific services offered online, we may
-          third party supporting this activity on our behalf. We also capture the
+          require you to accept cookies placed by a third party supporting this
-          paths taken as you move from page to page (i.e., your "click stream"
+          activity on our behalf. We also capture the paths taken as you move
-          activity).
+          from page to page (i.e., your "click stream" activity).
         </p>
         <p>
-          Information we collect on fiee.com may be used to enhance your use of this
+          Information we collect on fiee.com may be used to enhance your use of
-          web site in ways like these:
+          this web site in ways like these:
         </p>
         <ul>
           <li>Arrange the web site in the most user-friendly way</li>
           <li>Customize your browsing experience of this web site</li>
           <li>Respond to your questions or suggestions</li>
           <li>
-            Disclosure of personal information for legal purposes and protection of
+            Disclosure of personal information for legal purposes and protection
-            fiee.com and others:
+            of fiee.com and others:
           </li>
         </ul>
         <p>
-          We reserve the right to share your personal information with third parties
+          We reserve the right to share your personal information with third
-          if required to do so by law or if we believe such action is necessary in
+          parties if required to do so by law or if we believe such action is
-          order to: (a) conform with the requirements of the law or to comply with
+          necessary in order to: (a) conform with the requirements of the law or
-          legal process served upon us; (b) protect or defend our legal rights or
+          to comply with legal process served upon us; (b) protect or defend our
-          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          legal rights or property, fiee.com, or our users; or (c) investigate,
-          action regarding illegal activities, suspected fraud, situations involving
+          prevent, or take action regarding illegal activities, suspected fraud,
-          potential threats to the physical safety of any person, or violations of
+          situations involving potential threats to the physical safety of any
-          the terms and conditions of using fiee.com.
+          person, or violations of the terms and conditions of using fiee.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking to Other Sites</h3>
       <div class="content-block">
         <p>
-          Please remember that when you use a link to go from fiee.com to another
+          Please remember that when you use a link to go from fiee.com to
-          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          another web site, the fiee.com Terms &amp; Conditions and this Privacy
-          no longer in effect. Your browsing and interaction on any other web site,
+          Policy are no longer in effect. Your browsing and interaction on any
-          including any site that has a link on fiee.com, is subject to the rules
+          other web site, including any site that has a link on fiee.com, is
-          and policies of that site. We encourage you to read the rules and policies
+          subject to the rules and policies of that site. We encourage you to
-          of the sites you visit to further understand their procedures for
+          read the rules and policies of the sites you visit to further
-          collecting, using, and disclosing personal information.
+          understand their procedures for collecting, using, and disclosing
+          personal information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-choice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Choice</h3>
       <div class="content-block">
         <p>
@@ -102,89 +116,106 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
           provide us may be used.
         </p>
         <p>
-          Before we use your personal information for any purpose, we will give you
+          Before we use your personal information for any purpose, we will give
-          choices about whether or not to allow us to engage in that use. We will
+          you choices about whether or not to allow us to engage in that use. We
-          give you the opportunity to keep us from using or sharing the personal
+          will give you the opportunity to keep us from using or sharing the
-          information that you have provided to us for purposes other than to
+          personal information that you have provided to us for purposes other
-          fulfill your request. To exercise this choice, we will allow you to notify
+          than to fulfill your request. To exercise this choice, we will allow
-          us of your preferences during the information collection process.
+          you to notify us of your preferences during the information collection
+          process.
         </p>
         <p>
-          If there are third parties that process FiEE data, we will require them to
+          If there are third parties that process FiEE data, we will require
-          hold all personally-identifiable information confidential, and to use our
+          them to hold all personally-identifiable information confidential, and
-          customer information only for the purpose of fulfilling their business
+          to use our customer information only for the purpose of fulfilling
-          obligation. We do not sell personally identifiable information to third
+          their business obligation. We do not sell personally identifiable
-          party marketers.
+          information to third party marketers.
         </p>
       </div>
     </section>
 
-    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-security"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Security</h3>
       <div class="content-block">
         <p>
-          We use recognized industry safeguards to protect personally identifiable
+          We use recognized industry safeguards to protect personally
-          information from unauthorized access or use.
+          identifiable information from unauthorized access or use.
         </p>
         <p>
           We will employ industry recognized security safeguards to protect the
           personally identifiable information that you have provided to us from
-          loss, misuse and unauthorized alteration. If you are required to transmit
+          loss, misuse and unauthorized alteration. If you are required to
-          sensitive information (such as social security and/or credit information)
+          transmit sensitive information (such as social security and/or credit
-          to us through our Web site, we will provide you access to our secure
+          information) to us through our Web site, we will provide you access to
-          server that allows encryption of your data as it is transmitted to us.
+          our secure server that allows encryption of your data as it is
+          transmitted to us.
         </p>
         <p>
-          We will protect personally identifiable information stored on the site's
+          We will protect personally identifiable information stored on the
-          servers from unauthorized access using commercially available computer
+          site's servers from unauthorized access using commercially available
-          security products (e.g., firewalls), as well as carefully developed
+          computer security products (e.g., firewalls), as well as carefully
-          security procedures and practices.
+          developed security procedures and practices.
         </p>
       </div>
     </section>
 
-    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-access"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Access</h3>
       <div class="content-block">
         <p>
-          We will let you update your personal information that you have provided to
+          We will let you update your personal information that you have
-          us. We will also take steps to make sure that any updates that you provide
+          provided to us. We will also take steps to make sure that any updates
-          are processed in a timely and complete manner.
+          that you provide are processed in a timely and complete manner.
         </p>
         <p>
-          If we collect personal information through our sites, we will maintain the
+          If we collect personal information through our sites, we will maintain
-          information and allow you to update it at any time. We will continue to
+          the information and allow you to update it at any time. We will
-          work on better methods of accessing your information to increase your
+          continue to work on better methods of accessing your information to
-          access to it for update purposes. Note that our site may contain links to
+          increase your access to it for update purposes. Note that our site may
-          other sites that are beyond our control, and that you may want to read
+          contain links to other sites that are beyond our control, and that you
-          that sites' privacy policy before entering information.
+          may want to read that sites' privacy policy before entering
+          information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-contact"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Customer Service &amp; Recourse</h3>
       <div class="content-block">
         <p>
-          We will tell you how you can contact us regarding our privacy statement
+          We will tell you how you can contact us regarding our privacy
-          and practices.
+          statement and practices.
         </p>
         <p>
-          If you have any questions about this privacy statement, our information
+          If you have any questions about this privacy statement, our
-          handling practices, or any other aspects of your privacy and the security
+          information handling practices, or any other aspects of your privacy
-          of information, please send an e-mail to fiee@dlkadvisory.com.
+          and the security of information, please send an e-mail to
+          fiee@dlkadvisory.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-updates"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Updates</h3>
       <div class="content-block">
         <p>
-          FiEE may periodically update this policy to describe how new Web features
+          FiEE may periodically update this policy to describe how new Web
-          may affect our use of your information and to let you know of new controls
+          features may affect our use of your information and to let you know of
-          and features that we may provide you. FiEE will NOT apply changes to this
+          new controls and features that we may provide you. FiEE will NOT apply
-          policy retroactively to information FiEE has previously collected.
+          changes to this policy retroactively to information FiEE has
+          previously collected.
         </p>
       </div>
     </section>
@@ -193,7 +224,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped lang="scss">
 .privacy-policy {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,100 +1,114 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="privacy-policy">
-    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Privacy Policy</h1>
       <div class="content-block">
         <p>
           <strong>
             We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
-            maintaining the privacy and security of visitors to our website. Through
+            maintaining the privacy and security of visitors to our website.
-            this privacy policy, FiEE wants to assure you of our commitment to
+            Through this privacy policy, FiEE wants to assure you of our
-            privacy and security.
+            commitment to privacy and security.
           </strong>
         </p>
         <p>
           Our privacy philosophy is based on the concept of fair information
-          practices. This means we provide visitors to our website with notice of
+          practices. This means we provide visitors to our website with notice
-          how we manage information so that they can have a more informed
+          of how we manage information so that they can have a more informed
           understanding of how we operate.
         </p>
       </div>
     </section>
 
-    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-notice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Notice</h3>
       <div class="content-block">
         <p>
-          If we collect information about you, we will tell you what information is
+          If we collect information about you, we will tell you what information
-          being collected, how, by whom and for what purposes.
+          is being collected, how, by whom and for what purposes.
         </p>
         <p>
-          Through this statement and our web pages, we let you know what types of
+          Through this statement and our web pages, we let you know what types
-          information we collect from and about you, the types and intended uses of
+          of information we collect from and about you, the types and intended
-          such information, and the types of third parties to whom the information
+          uses of such information, and the types of third parties to whom the
-          may be disclosed. If we collect information from you, we clearly identify
+          information may be disclosed. If we collect information from you, we
-          the information that is necessary to fulfill your request and the optional
+          clearly identify the information that is necessary to fulfill your
-          information that is used to deliver tailored information to you.
+          request and the optional information that is used to deliver tailored
+          information to you.
         </p>
         <p>
-          When you visit our site, we may collect information about your use of our
+          When you visit our site, we may collect information about your use of
-          site through "cookies". Cookies are small bits of information transferred
+          our site through "cookies". Cookies are small bits of information
-          to your computer's hard drive that allow us to know how often someone
+          transferred to your computer's hard drive that allow us to know how
-          visits our site and the activities they conduct while on the site. The
+          often someone visits our site and the activities they conduct while on
-          information collected by cookies allows us to monitor how our customers
+          the site. The information collected by cookies allows us to monitor
-          are using our web site. If you simply want to browse, you do not have to
+          how our customers are using our web site. If you simply want to
-          accept cookies from us. However, if you wish to take advantage of specific
+          browse, you do not have to accept cookies from us. However, if you
-          services offered online, we may require you to accept cookies placed by a
+          wish to take advantage of specific services offered online, we may
-          third party supporting this activity on our behalf. We also capture the
+          require you to accept cookies placed by a third party supporting this
-          paths taken as you move from page to page (i.e., your "click stream"
+          activity on our behalf. We also capture the paths taken as you move
-          activity).
+          from page to page (i.e., your "click stream" activity).
         </p>
         <p>
-          Information we collect on fiee.com may be used to enhance your use of this
+          Information we collect on fiee.com may be used to enhance your use of
-          web site in ways like these:
+          this web site in ways like these:
         </p>
         <ul>
           <li>Arrange the web site in the most user-friendly way</li>
           <li>Customize your browsing experience of this web site</li>
           <li>Respond to your questions or suggestions</li>
           <li>
-            Disclosure of personal information for legal purposes and protection of
+            Disclosure of personal information for legal purposes and protection
-            fiee.com and others:
+            of fiee.com and others:
           </li>
         </ul>
         <p>
-          We reserve the right to share your personal information with third parties
+          We reserve the right to share your personal information with third
-          if required to do so by law or if we believe such action is necessary in
+          parties if required to do so by law or if we believe such action is
-          order to: (a) conform with the requirements of the law or to comply with
+          necessary in order to: (a) conform with the requirements of the law or
-          legal process served upon us; (b) protect or defend our legal rights or
+          to comply with legal process served upon us; (b) protect or defend our
-          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          legal rights or property, fiee.com, or our users; or (c) investigate,
-          action regarding illegal activities, suspected fraud, situations involving
+          prevent, or take action regarding illegal activities, suspected fraud,
-          potential threats to the physical safety of any person, or violations of
+          situations involving potential threats to the physical safety of any
-          the terms and conditions of using fiee.com.
+          person, or violations of the terms and conditions of using fiee.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking to Other Sites</h3>
       <div class="content-block">
         <p>
-          Please remember that when you use a link to go from fiee.com to another
+          Please remember that when you use a link to go from fiee.com to
-          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          another web site, the fiee.com Terms &amp; Conditions and this Privacy
-          no longer in effect. Your browsing and interaction on any other web site,
+          Policy are no longer in effect. Your browsing and interaction on any
-          including any site that has a link on fiee.com, is subject to the rules
+          other web site, including any site that has a link on fiee.com, is
-          and policies of that site. We encourage you to read the rules and policies
+          subject to the rules and policies of that site. We encourage you to
-          of the sites you visit to further understand their procedures for
+          read the rules and policies of the sites you visit to further
-          collecting, using, and disclosing personal information.
+          understand their procedures for collecting, using, and disclosing
+          personal information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-choice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Choice</h3>
       <div class="content-block">
         <p>
@@ -102,89 +116,106 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
           provide us may be used.
         </p>
         <p>
-          Before we use your personal information for any purpose, we will give you
+          Before we use your personal information for any purpose, we will give
-          choices about whether or not to allow us to engage in that use. We will
+          you choices about whether or not to allow us to engage in that use. We
-          give you the opportunity to keep us from using or sharing the personal
+          will give you the opportunity to keep us from using or sharing the
-          information that you have provided to us for purposes other than to
+          personal information that you have provided to us for purposes other
-          fulfill your request. To exercise this choice, we will allow you to notify
+          than to fulfill your request. To exercise this choice, we will allow
-          us of your preferences during the information collection process.
+          you to notify us of your preferences during the information collection
+          process.
         </p>
         <p>
-          If there are third parties that process FiEE data, we will require them to
+          If there are third parties that process FiEE data, we will require
-          hold all personally-identifiable information confidential, and to use our
+          them to hold all personally-identifiable information confidential, and
-          customer information only for the purpose of fulfilling their business
+          to use our customer information only for the purpose of fulfilling
-          obligation. We do not sell personally identifiable information to third
+          their business obligation. We do not sell personally identifiable
-          party marketers.
+          information to third party marketers.
         </p>
       </div>
     </section>
 
-    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-security"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Security</h3>
       <div class="content-block">
         <p>
-          We use recognized industry safeguards to protect personally identifiable
+          We use recognized industry safeguards to protect personally
-          information from unauthorized access or use.
+          identifiable information from unauthorized access or use.
         </p>
         <p>
           We will employ industry recognized security safeguards to protect the
           personally identifiable information that you have provided to us from
-          loss, misuse and unauthorized alteration. If you are required to transmit
+          loss, misuse and unauthorized alteration. If you are required to
-          sensitive information (such as social security and/or credit information)
+          transmit sensitive information (such as social security and/or credit
-          to us through our Web site, we will provide you access to our secure
+          information) to us through our Web site, we will provide you access to
-          server that allows encryption of your data as it is transmitted to us.
+          our secure server that allows encryption of your data as it is
+          transmitted to us.
         </p>
         <p>
-          We will protect personally identifiable information stored on the site's
+          We will protect personally identifiable information stored on the
-          servers from unauthorized access using commercially available computer
+          site's servers from unauthorized access using commercially available
-          security products (e.g., firewalls), as well as carefully developed
+          computer security products (e.g., firewalls), as well as carefully
-          security procedures and practices.
+          developed security procedures and practices.
         </p>
       </div>
     </section>
 
-    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-access"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Access</h3>
       <div class="content-block">
         <p>
-          We will let you update your personal information that you have provided to
+          We will let you update your personal information that you have
-          us. We will also take steps to make sure that any updates that you provide
+          provided to us. We will also take steps to make sure that any updates
-          are processed in a timely and complete manner.
+          that you provide are processed in a timely and complete manner.
         </p>
         <p>
-          If we collect personal information through our sites, we will maintain the
+          If we collect personal information through our sites, we will maintain
-          information and allow you to update it at any time. We will continue to
+          the information and allow you to update it at any time. We will
-          work on better methods of accessing your information to increase your
+          continue to work on better methods of accessing your information to
-          access to it for update purposes. Note that our site may contain links to
+          increase your access to it for update purposes. Note that our site may
-          other sites that are beyond our control, and that you may want to read
+          contain links to other sites that are beyond our control, and that you
-          that sites' privacy policy before entering information.
+          may want to read that sites' privacy policy before entering
+          information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-contact"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Customer Service &amp; Recourse</h3>
       <div class="content-block">
         <p>
-          We will tell you how you can contact us regarding our privacy statement
+          We will tell you how you can contact us regarding our privacy
-          and practices.
+          statement and practices.
         </p>
         <p>
-          If you have any questions about this privacy statement, our information
+          If you have any questions about this privacy statement, our
-          handling practices, or any other aspects of your privacy and the security
+          information handling practices, or any other aspects of your privacy
-          of information, please send an e-mail to fiee@dlkadvisory.com.
+          and the security of information, please send an e-mail to
+          fiee@dlkadvisory.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-updates"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Updates</h3>
       <div class="content-block">
         <p>
-          FiEE may periodically update this policy to describe how new Web features
+          FiEE may periodically update this policy to describe how new Web
-          may affect our use of your information and to let you know of new controls
+          features may affect our use of your information and to let you know of
-          and features that we may provide you. FiEE will NOT apply changes to this
+          new controls and features that we may provide you. FiEE will NOT apply
-          policy retroactively to information FiEE has previously collected.
+          changes to this policy retroactively to information FiEE has
+          previously collected.
         </p>
       </div>
     </section>
@@ -193,7 +224,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped lang="scss">
 .privacy-policy {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,100 +1,114 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="privacy-policy">
-    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Privacy Policy</h1>
       <div class="content-block">
         <p>
           <strong>
             We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
-            maintaining the privacy and security of visitors to our website. Through
+            maintaining the privacy and security of visitors to our website.
-            this privacy policy, FiEE wants to assure you of our commitment to
+            Through this privacy policy, FiEE wants to assure you of our
-            privacy and security.
+            commitment to privacy and security.
           </strong>
         </p>
         <p>
           Our privacy philosophy is based on the concept of fair information
-          practices. This means we provide visitors to our website with notice of
+          practices. This means we provide visitors to our website with notice
-          how we manage information so that they can have a more informed
+          of how we manage information so that they can have a more informed
           understanding of how we operate.
         </p>
       </div>
     </section>
 
-    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-notice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Notice</h3>
       <div class="content-block">
         <p>
-          If we collect information about you, we will tell you what information is
+          If we collect information about you, we will tell you what information
-          being collected, how, by whom and for what purposes.
+          is being collected, how, by whom and for what purposes.
         </p>
         <p>
-          Through this statement and our web pages, we let you know what types of
+          Through this statement and our web pages, we let you know what types
-          information we collect from and about you, the types and intended uses of
+          of information we collect from and about you, the types and intended
-          such information, and the types of third parties to whom the information
+          uses of such information, and the types of third parties to whom the
-          may be disclosed. If we collect information from you, we clearly identify
+          information may be disclosed. If we collect information from you, we
-          the information that is necessary to fulfill your request and the optional
+          clearly identify the information that is necessary to fulfill your
-          information that is used to deliver tailored information to you.
+          request and the optional information that is used to deliver tailored
+          information to you.
         </p>
         <p>
-          When you visit our site, we may collect information about your use of our
+          When you visit our site, we may collect information about your use of
-          site through "cookies". Cookies are small bits of information transferred
+          our site through "cookies". Cookies are small bits of information
-          to your computer's hard drive that allow us to know how often someone
+          transferred to your computer's hard drive that allow us to know how
-          visits our site and the activities they conduct while on the site. The
+          often someone visits our site and the activities they conduct while on
-          information collected by cookies allows us to monitor how our customers
+          the site. The information collected by cookies allows us to monitor
-          are using our web site. If you simply want to browse, you do not have to
+          how our customers are using our web site. If you simply want to
-          accept cookies from us. However, if you wish to take advantage of specific
+          browse, you do not have to accept cookies from us. However, if you
-          services offered online, we may require you to accept cookies placed by a
+          wish to take advantage of specific services offered online, we may
-          third party supporting this activity on our behalf. We also capture the
+          require you to accept cookies placed by a third party supporting this
-          paths taken as you move from page to page (i.e., your "click stream"
+          activity on our behalf. We also capture the paths taken as you move
-          activity).
+          from page to page (i.e., your "click stream" activity).
         </p>
         <p>
-          Information we collect on fiee.com may be used to enhance your use of this
+          Information we collect on fiee.com may be used to enhance your use of
-          web site in ways like these:
+          this web site in ways like these:
         </p>
         <ul>
           <li>Arrange the web site in the most user-friendly way</li>
           <li>Customize your browsing experience of this web site</li>
           <li>Respond to your questions or suggestions</li>
           <li>
-            Disclosure of personal information for legal purposes and protection of
+            Disclosure of personal information for legal purposes and protection
-            fiee.com and others:
+            of fiee.com and others:
           </li>
         </ul>
         <p>
-          We reserve the right to share your personal information with third parties
+          We reserve the right to share your personal information with third
-          if required to do so by law or if we believe such action is necessary in
+          parties if required to do so by law or if we believe such action is
-          order to: (a) conform with the requirements of the law or to comply with
+          necessary in order to: (a) conform with the requirements of the law or
-          legal process served upon us; (b) protect or defend our legal rights or
+          to comply with legal process served upon us; (b) protect or defend our
-          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          legal rights or property, fiee.com, or our users; or (c) investigate,
-          action regarding illegal activities, suspected fraud, situations involving
+          prevent, or take action regarding illegal activities, suspected fraud,
-          potential threats to the physical safety of any person, or violations of
+          situations involving potential threats to the physical safety of any
-          the terms and conditions of using fiee.com.
+          person, or violations of the terms and conditions of using fiee.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking to Other Sites</h3>
       <div class="content-block">
         <p>
-          Please remember that when you use a link to go from fiee.com to another
+          Please remember that when you use a link to go from fiee.com to
-          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          another web site, the fiee.com Terms &amp; Conditions and this Privacy
-          no longer in effect. Your browsing and interaction on any other web site,
+          Policy are no longer in effect. Your browsing and interaction on any
-          including any site that has a link on fiee.com, is subject to the rules
+          other web site, including any site that has a link on fiee.com, is
-          and policies of that site. We encourage you to read the rules and policies
+          subject to the rules and policies of that site. We encourage you to
-          of the sites you visit to further understand their procedures for
+          read the rules and policies of the sites you visit to further
-          collecting, using, and disclosing personal information.
+          understand their procedures for collecting, using, and disclosing
+          personal information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-choice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Choice</h3>
       <div class="content-block">
         <p>
@@ -102,89 +116,106 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
           provide us may be used.
         </p>
         <p>
-          Before we use your personal information for any purpose, we will give you
+          Before we use your personal information for any purpose, we will give
-          choices about whether or not to allow us to engage in that use. We will
+          you choices about whether or not to allow us to engage in that use. We
-          give you the opportunity to keep us from using or sharing the personal
+          will give you the opportunity to keep us from using or sharing the
-          information that you have provided to us for purposes other than to
+          personal information that you have provided to us for purposes other
-          fulfill your request. To exercise this choice, we will allow you to notify
+          than to fulfill your request. To exercise this choice, we will allow
-          us of your preferences during the information collection process.
+          you to notify us of your preferences during the information collection
+          process.
         </p>
         <p>
-          If there are third parties that process FiEE data, we will require them to
+          If there are third parties that process FiEE data, we will require
-          hold all personally-identifiable information confidential, and to use our
+          them to hold all personally-identifiable information confidential, and
-          customer information only for the purpose of fulfilling their business
+          to use our customer information only for the purpose of fulfilling
-          obligation. We do not sell personally identifiable information to third
+          their business obligation. We do not sell personally identifiable
-          party marketers.
+          information to third party marketers.
         </p>
       </div>
     </section>
 
-    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-security"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Security</h3>
       <div class="content-block">
         <p>
-          We use recognized industry safeguards to protect personally identifiable
+          We use recognized industry safeguards to protect personally
-          information from unauthorized access or use.
+          identifiable information from unauthorized access or use.
         </p>
         <p>
           We will employ industry recognized security safeguards to protect the
           personally identifiable information that you have provided to us from
-          loss, misuse and unauthorized alteration. If you are required to transmit
+          loss, misuse and unauthorized alteration. If you are required to
-          sensitive information (such as social security and/or credit information)
+          transmit sensitive information (such as social security and/or credit
-          to us through our Web site, we will provide you access to our secure
+          information) to us through our Web site, we will provide you access to
-          server that allows encryption of your data as it is transmitted to us.
+          our secure server that allows encryption of your data as it is
+          transmitted to us.
         </p>
         <p>
-          We will protect personally identifiable information stored on the site's
+          We will protect personally identifiable information stored on the
-          servers from unauthorized access using commercially available computer
+          site's servers from unauthorized access using commercially available
-          security products (e.g., firewalls), as well as carefully developed
+          computer security products (e.g., firewalls), as well as carefully
-          security procedures and practices.
+          developed security procedures and practices.
         </p>
       </div>
     </section>
 
-    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-access"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Access</h3>
       <div class="content-block">
         <p>
-          We will let you update your personal information that you have provided to
+          We will let you update your personal information that you have
-          us. We will also take steps to make sure that any updates that you provide
+          provided to us. We will also take steps to make sure that any updates
-          are processed in a timely and complete manner.
+          that you provide are processed in a timely and complete manner.
         </p>
         <p>
-          If we collect personal information through our sites, we will maintain the
+          If we collect personal information through our sites, we will maintain
-          information and allow you to update it at any time. We will continue to
+          the information and allow you to update it at any time. We will
-          work on better methods of accessing your information to increase your
+          continue to work on better methods of accessing your information to
-          access to it for update purposes. Note that our site may contain links to
+          increase your access to it for update purposes. Note that our site may
-          other sites that are beyond our control, and that you may want to read
+          contain links to other sites that are beyond our control, and that you
-          that sites' privacy policy before entering information.
+          may want to read that sites' privacy policy before entering
+          information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-contact"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Customer Service &amp; Recourse</h3>
       <div class="content-block">
         <p>
-          We will tell you how you can contact us regarding our privacy statement
+          We will tell you how you can contact us regarding our privacy
-          and practices.
+          statement and practices.
         </p>
         <p>
-          If you have any questions about this privacy statement, our information
+          If you have any questions about this privacy statement, our
-          handling practices, or any other aspects of your privacy and the security
+          information handling practices, or any other aspects of your privacy
-          of information, please send an e-mail to fiee@dlkadvisory.com.
+          and the security of information, please send an e-mail to
+          fiee@dlkadvisory.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-updates"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Updates</h3>
       <div class="content-block">
         <p>
-          FiEE may periodically update this policy to describe how new Web features
+          FiEE may periodically update this policy to describe how new Web
-          may affect our use of your information and to let you know of new controls
+          features may affect our use of your information and to let you know of
-          and features that we may provide you. FiEE will NOT apply changes to this
+          new controls and features that we may provide you. FiEE will NOT apply
-          policy retroactively to information FiEE has previously collected.
+          changes to this policy retroactively to information FiEE has
+          previously collected.
         </p>
       </div>
     </section>
@@ -193,7 +224,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped lang="scss">
 .privacy-policy {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,100 +1,114 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="privacy-policy">
-    <section class="privacy-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Privacy Policy</h1>
       <div class="content-block">
         <p>
           <strong>
             We at FiEE, Inc. and its subsidiaries ("FiEE") are committed to
-            maintaining the privacy and security of visitors to our website. Through
+            maintaining the privacy and security of visitors to our website.
-            this privacy policy, FiEE wants to assure you of our commitment to
+            Through this privacy policy, FiEE wants to assure you of our
-            privacy and security.
+            commitment to privacy and security.
           </strong>
         </p>
         <p>
           Our privacy philosophy is based on the concept of fair information
-          practices. This means we provide visitors to our website with notice of
+          practices. This means we provide visitors to our website with notice
-          how we manage information so that they can have a more informed
+          of how we manage information so that they can have a more informed
           understanding of how we operate.
         </p>
       </div>
     </section>
 
-    <section class="privacy-notice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-notice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Notice</h3>
       <div class="content-block">
         <p>
-          If we collect information about you, we will tell you what information is
+          If we collect information about you, we will tell you what information
-          being collected, how, by whom and for what purposes.
+          is being collected, how, by whom and for what purposes.
         </p>
         <p>
-          Through this statement and our web pages, we let you know what types of
+          Through this statement and our web pages, we let you know what types
-          information we collect from and about you, the types and intended uses of
+          of information we collect from and about you, the types and intended
-          such information, and the types of third parties to whom the information
+          uses of such information, and the types of third parties to whom the
-          may be disclosed. If we collect information from you, we clearly identify
+          information may be disclosed. If we collect information from you, we
-          the information that is necessary to fulfill your request and the optional
+          clearly identify the information that is necessary to fulfill your
-          information that is used to deliver tailored information to you.
+          request and the optional information that is used to deliver tailored
+          information to you.
         </p>
         <p>
-          When you visit our site, we may collect information about your use of our
+          When you visit our site, we may collect information about your use of
-          site through "cookies". Cookies are small bits of information transferred
+          our site through "cookies". Cookies are small bits of information
-          to your computer's hard drive that allow us to know how often someone
+          transferred to your computer's hard drive that allow us to know how
-          visits our site and the activities they conduct while on the site. The
+          often someone visits our site and the activities they conduct while on
-          information collected by cookies allows us to monitor how our customers
+          the site. The information collected by cookies allows us to monitor
-          are using our web site. If you simply want to browse, you do not have to
+          how our customers are using our web site. If you simply want to
-          accept cookies from us. However, if you wish to take advantage of specific
+          browse, you do not have to accept cookies from us. However, if you
-          services offered online, we may require you to accept cookies placed by a
+          wish to take advantage of specific services offered online, we may
-          third party supporting this activity on our behalf. We also capture the
+          require you to accept cookies placed by a third party supporting this
-          paths taken as you move from page to page (i.e., your "click stream"
+          activity on our behalf. We also capture the paths taken as you move
-          activity).
+          from page to page (i.e., your "click stream" activity).
         </p>
         <p>
-          Information we collect on fiee.com may be used to enhance your use of this
+          Information we collect on fiee.com may be used to enhance your use of
-          web site in ways like these:
+          this web site in ways like these:
         </p>
         <ul>
           <li>Arrange the web site in the most user-friendly way</li>
           <li>Customize your browsing experience of this web site</li>
           <li>Respond to your questions or suggestions</li>
           <li>
-            Disclosure of personal information for legal purposes and protection of
+            Disclosure of personal information for legal purposes and protection
-            fiee.com and others:
+            of fiee.com and others:
           </li>
         </ul>
         <p>
-          We reserve the right to share your personal information with third parties
+          We reserve the right to share your personal information with third
-          if required to do so by law or if we believe such action is necessary in
+          parties if required to do so by law or if we believe such action is
-          order to: (a) conform with the requirements of the law or to comply with
+          necessary in order to: (a) conform with the requirements of the law or
-          legal process served upon us; (b) protect or defend our legal rights or
+          to comply with legal process served upon us; (b) protect or defend our
-          property, fiee.com, or our users; or (c) investigate, prevent, or take
+          legal rights or property, fiee.com, or our users; or (c) investigate,
-          action regarding illegal activities, suspected fraud, situations involving
+          prevent, or take action regarding illegal activities, suspected fraud,
-          potential threats to the physical safety of any person, or violations of
+          situations involving potential threats to the physical safety of any
-          the terms and conditions of using fiee.com.
+          person, or violations of the terms and conditions of using fiee.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking to Other Sites</h3>
       <div class="content-block">
         <p>
-          Please remember that when you use a link to go from fiee.com to another
+          Please remember that when you use a link to go from fiee.com to
-          web site, the fiee.com Terms &amp; Conditions and this Privacy Policy are
+          another web site, the fiee.com Terms &amp; Conditions and this Privacy
-          no longer in effect. Your browsing and interaction on any other web site,
+          Policy are no longer in effect. Your browsing and interaction on any
-          including any site that has a link on fiee.com, is subject to the rules
+          other web site, including any site that has a link on fiee.com, is
-          and policies of that site. We encourage you to read the rules and policies
+          subject to the rules and policies of that site. We encourage you to
-          of the sites you visit to further understand their procedures for
+          read the rules and policies of the sites you visit to further
-          collecting, using, and disclosing personal information.
+          understand their procedures for collecting, using, and disclosing
+          personal information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-choice" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-choice"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Choice</h3>
       <div class="content-block">
         <p>
@@ -102,89 +116,106 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
           provide us may be used.
         </p>
         <p>
-          Before we use your personal information for any purpose, we will give you
+          Before we use your personal information for any purpose, we will give
-          choices about whether or not to allow us to engage in that use. We will
+          you choices about whether or not to allow us to engage in that use. We
-          give you the opportunity to keep us from using or sharing the personal
+          will give you the opportunity to keep us from using or sharing the
-          information that you have provided to us for purposes other than to
+          personal information that you have provided to us for purposes other
-          fulfill your request. To exercise this choice, we will allow you to notify
+          than to fulfill your request. To exercise this choice, we will allow
-          us of your preferences during the information collection process.
+          you to notify us of your preferences during the information collection
+          process.
         </p>
         <p>
-          If there are third parties that process FiEE data, we will require them to
+          If there are third parties that process FiEE data, we will require
-          hold all personally-identifiable information confidential, and to use our
+          them to hold all personally-identifiable information confidential, and
-          customer information only for the purpose of fulfilling their business
+          to use our customer information only for the purpose of fulfilling
-          obligation. We do not sell personally identifiable information to third
+          their business obligation. We do not sell personally identifiable
-          party marketers.
+          information to third party marketers.
         </p>
       </div>
     </section>
 
-    <section class="privacy-security" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-security"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Security</h3>
       <div class="content-block">
         <p>
-          We use recognized industry safeguards to protect personally identifiable
+          We use recognized industry safeguards to protect personally
-          information from unauthorized access or use.
+          identifiable information from unauthorized access or use.
         </p>
         <p>
           We will employ industry recognized security safeguards to protect the
           personally identifiable information that you have provided to us from
-          loss, misuse and unauthorized alteration. If you are required to transmit
+          loss, misuse and unauthorized alteration. If you are required to
-          sensitive information (such as social security and/or credit information)
+          transmit sensitive information (such as social security and/or credit
-          to us through our Web site, we will provide you access to our secure
+          information) to us through our Web site, we will provide you access to
-          server that allows encryption of your data as it is transmitted to us.
+          our secure server that allows encryption of your data as it is
+          transmitted to us.
         </p>
         <p>
-          We will protect personally identifiable information stored on the site's
+          We will protect personally identifiable information stored on the
-          servers from unauthorized access using commercially available computer
+          site's servers from unauthorized access using commercially available
-          security products (e.g., firewalls), as well as carefully developed
+          computer security products (e.g., firewalls), as well as carefully
-          security procedures and practices.
+          developed security procedures and practices.
         </p>
       </div>
     </section>
 
-    <section class="privacy-access" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-access"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Access</h3>
       <div class="content-block">
         <p>
-          We will let you update your personal information that you have provided to
+          We will let you update your personal information that you have
-          us. We will also take steps to make sure that any updates that you provide
+          provided to us. We will also take steps to make sure that any updates
-          are processed in a timely and complete manner.
+          that you provide are processed in a timely and complete manner.
         </p>
         <p>
-          If we collect personal information through our sites, we will maintain the
+          If we collect personal information through our sites, we will maintain
-          information and allow you to update it at any time. We will continue to
+          the information and allow you to update it at any time. We will
-          work on better methods of accessing your information to increase your
+          continue to work on better methods of accessing your information to
-          access to it for update purposes. Note that our site may contain links to
+          increase your access to it for update purposes. Note that our site may
-          other sites that are beyond our control, and that you may want to read
+          contain links to other sites that are beyond our control, and that you
-          that sites' privacy policy before entering information.
+          may want to read that sites' privacy policy before entering
+          information.
         </p>
       </div>
     </section>
 
-    <section class="privacy-contact" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-contact"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Customer Service &amp; Recourse</h3>
       <div class="content-block">
         <p>
-          We will tell you how you can contact us regarding our privacy statement
+          We will tell you how you can contact us regarding our privacy
-          and practices.
+          statement and practices.
         </p>
         <p>
-          If you have any questions about this privacy statement, our information
+          If you have any questions about this privacy statement, our
-          handling practices, or any other aspects of your privacy and the security
+          information handling practices, or any other aspects of your privacy
-          of information, please send an e-mail to fiee@dlkadvisory.com.
+          and the security of information, please send an e-mail to
+          fiee@dlkadvisory.com.
         </p>
       </div>
     </section>
 
-    <section class="privacy-updates" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="privacy-updates"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Updates</h3>
       <div class="content-block">
         <p>
-          FiEE may periodically update this policy to describe how new Web features
+          FiEE may periodically update this policy to describe how new Web
-          may affect our use of your information and to let you know of new controls
+          features may affect our use of your information and to let you know of
-          and features that we may provide you. FiEE will NOT apply changes to this
+          new controls and features that we may provide you. FiEE will NOT apply
-          policy retroactively to information FiEE has previously collected.
+          changes to this policy retroactively to information FiEE has
+          previously collected.
         </p>
       </div>
     </section>
@@ -193,7 +224,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped lang="scss">
 .privacy-policy {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,147 +1,168 @@
 <template>
-    <div class="site-map">
+  <div class="site-map">
-      <section class="site-map-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
-        <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
+      class="site-map-intro"
-        <div class="content-block">
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-          <p class="intro-text">
+    >
-            Browse the links below for pages that make up the FiEE, Inc. website.
+      <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
-          </p>
+      <div class="content-block">
-        </div>
+        <p class="intro-text">
-      </section>
+          Browse the links below for pages that make up the FiEE, Inc. website.
-  
+        </p>
-      <section class="site-map-corporate" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      </div>
-        <h3 class="section-title">Corporate Information</h3>
+    </section>
-        <div class="content-block">
+
-          <ul class="link-list">
+    <section
-            <li @click="router.push('/companyoverview')">Company Overview</li>
+      class="site-map-corporate"
-            <li @click="router.push('/businessservices')">Business Introduction</li>
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-            <li @click="router.push('/manage')">Management</li>
+    >
-            <li @click="router.push('/boarddirectors')">Board of Directors</li>
+      <h3 class="section-title">Corporate Information</h3>
-            <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+      <div class="content-block">
-            <li @click="router.push('/govern')">Governance</li>
+        <ul class="link-list">
-          </ul>
+          <li @click="router.push('/companyoverview')">Company Overview</li>
-        </div>
+          <li @click="router.push('/businessservices')">
-      </section>
+            Business Introduction
-  
+          </li>
-      <section class="site-map-financial" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+          <li @click="router.push('/manage')">Management</li>
-        <h3 class="section-title">Financial Information</h3>
+          <li @click="router.push('/boarddirectors')">Board of Directors</li>
-        <div class="content-block">
+          <li @click="router.push('/committeeappointment')">
-          <ul class="link-list">
+            Committee Appointments
-            <li @click="router.push('/secfilings')">SEC Filings</li>
+          </li>
-            <li @click="router.push('/annualreports')">Annual Reports</li>
+          <li @click="router.push('/govern')">Governance</li>
-            <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
+        </ul>
-          </ul>
+      </div>
-        </div>
+    </section>
-      </section>
+
-  
+    <section
-      <section class="site-map-stock" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      class="site-map-financial"
-        <h3 class="section-title">Stock Information</h3>
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-        <div class="content-block">
+    >
-          <ul class="link-list">
+      <h3 class="section-title">Financial Information</h3>
-            <li @click="router.push('/stock-quote')">Stock Quote</li>
+      <div class="content-block">
-            <li @click="router.push('/historic-stock')">Historic Stock Price</li>
+        <ul class="link-list">
-          </ul>
+          <li @click="router.push('/secfilings')">SEC Filings</li>
-        </div>
+          <li @click="router.push('/annualreports')">Annual Reports</li>
-      </section>
+          <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
-  
+        </ul>
-      <section class="site-map-news" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+      </div>
-        <h3 class="section-title">News Releases</h3>
+    </section>
-        <div class="content-block">
+
-          <ul class="link-list">
+    <section
-            <li @click="router.push('/press-releases')">Press Releases</li>
+      class="site-map-stock"
-            <li @click="router.push('/events-calendar')">Events Calendar</li>
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-          </ul>
+    >
-        </div>
+      <h3 class="section-title">Stock Information</h3>
-      </section>
+      <div class="content-block">
-  
+        <ul class="link-list">
-      <section class="site-map-investor" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+          <li @click="router.push('/stock-quote')">Stock Quote</li>
-        <h3 class="section-title">Investor Resources</h3>
+          <li @click="router.push('/historic-stock')">Historic Stock Price</li>
-        <div class="content-block">
+        </ul>
-          <ul class="link-list">
+      </div>
-            <li @click="router.push('/contacts')">IR Contacts</li>
+    </section>
-            <li @click="router.push('/email-alerts')">Email Alerts</li>
+
-          </ul>
+    <section
-        </div>
+      class="site-map-news"
-      </section>
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    </div>
+    >
-  </template>
+      <h3 class="section-title">News Releases</h3>
-  
+      <div class="content-block">
-  <script setup>
+        <ul class="link-list">
-  import { onMounted, ref, onUnmounted } from "vue";
+          <li @click="router.push('/press-releases')">Press Releases</li>
-  import { useRouter } from "vue-router";
+          <li @click="router.push('/events-calendar')">Events Calendar</li>
-  const router = useRouter();
+        </ul>
-  </script>
+      </div>
-  
+    </section>
-  <style scoped>
+
-  .site-map {
+    <section
-    background-image: url("@/assets/image/bg-mobile.png");
+      class="site-map-investor"
-    background-size: 100% 100%;
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    background-position: center;
+    >
-    background-repeat: no-repeat;
+      <h3 class="section-title">Investor Resources</h3>
+      <div class="content-block">
+        <ul class="link-list">
+          <li @click="router.push('/contacts')">IR Contacts</li>
+          <li @click="router.push('/email-alerts')">Email Alerts</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped>
+.site-map {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.section-titles {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  color: #895bff;
+}
+
+.content-block {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
+.intro-text {
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 123, 172, 0.5);
+  text-underline-offset: 4px;
+}
+
+.link-list li:hover {
+  color: #895bff;
+  text-decoration-color: #895bff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: 1fr;
   }
-  
+
   .section-titles {
-    font-size: 2.5rem;
+    font-size: 2rem;
-    margin-bottom: 30px;
-    color: black;
   }
-  
+
   .section-title {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
-    margin-bottom: 30px;
-    color: #895bff;
   }
-  
+
   .content-block {
-    font-size: 1.1rem;
+    font-size: 1rem;
-    line-height: 1.8;
   }
-  
+
   .intro-text {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
-    margin-bottom: 20px;
   }
-  
+}
-  .link-list {
+</style>
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  
-  .link-list li {
-    margin-bottom: 12px;
-    cursor: pointer;
-    transition: color 0.3s ease;
-    text-decoration: underline;
-    text-decoration-color: rgba(137, 91, 255, 0.5);
-    text-underline-offset: 4px;
-  }
-  
-  .link-list li:hover {
-    color: #895bff;
-    text-decoration-color: #895bff;
-  }
-  
-  /* 响应式设计 */
-  @media (max-width: 768px) {
-    .grid-container {
-      grid-template-columns: 1fr;
-    }
-  
-    .section-titles {
-      font-size: 2rem;
-    }
-  
-    .section-title {
-      font-size: 1.3rem;
-    }
-  
-    .content-block {
-      font-size: 1rem;
-    }
-  
-    .intro-text {
-      font-size: 1.1rem;
-    }
-  }
-  </style>

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

@@ -1,13 +1,16 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 </script>
 
 <template>
   <div class="site-map">
-    <section class="site-map-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
       <div class="content-block">
         <p class="intro-text">
@@ -16,21 +19,31 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-corporate" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-corporate"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Corporate Information</h3>
       <div class="content-block">
         <ul class="link-list">
           <li @click="router.push('/companyoverview')">Company Overview</li>
-          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/businessservices')">
+            Business Introduction
+          </li>
           <li @click="router.push('/manage')">Management</li>
           <li @click="router.push('/boarddirectors')">Board of Directors</li>
-          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/committeeappointment')">
+            Committee Appointments
+          </li>
           <li @click="router.push('/govern')">Governance</li>
         </ul>
       </div>
     </section>
 
-    <section class="site-map-financial" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-financial"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Financial Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -41,7 +54,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-stock" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-stock"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Stock Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -51,7 +67,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-news" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-news"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">News Releases</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -61,7 +80,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-investor" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="site-map-investor"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Investor Resources</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -75,7 +97,6 @@ const router = useRouter();
 
 <style scoped>
 .site-map {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -114,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

@@ -1,13 +1,16 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 </script>
 
 <template>
   <div class="site-map">
-    <section class="site-map-intro" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-intro"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
       <div class="content-block">
         <p class="intro-text">
@@ -16,21 +19,31 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-corporate" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-corporate"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Corporate Information</h3>
       <div class="content-block">
         <ul class="link-list">
           <li @click="router.push('/companyoverview')">Company Overview</li>
-          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/businessservices')">
+            Business Introduction
+          </li>
           <li @click="router.push('/manage')">Management</li>
           <li @click="router.push('/boarddirectors')">Board of Directors</li>
-          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/committeeappointment')">
+            Committee Appointments
+          </li>
           <li @click="router.push('/govern')">Governance</li>
         </ul>
       </div>
     </section>
 
-    <section class="site-map-financial" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-financial"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Financial Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -41,7 +54,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-stock" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-stock"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Stock Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -51,7 +67,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-news" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-news"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">News Releases</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -61,7 +80,10 @@ const router = useRouter();
       </div>
     </section>
 
-    <section class="site-map-investor" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="site-map-investor"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Investor Resources</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -75,7 +97,6 @@ const router = useRouter();
 
 <style scoped>
 .site-map {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -114,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

@@ -1,6 +1,9 @@
 <template>
   <div class="site-map">
-    <section class="site-map-intro" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-intro"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
       <div class="content-block">
         <p class="intro-text">
@@ -9,21 +12,31 @@
       </div>
     </section>
 
-    <section class="site-map-corporate" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-corporate"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Corporate Information</h3>
       <div class="content-block">
         <ul class="link-list">
           <li @click="router.push('/companyoverview')">Company Overview</li>
-          <li @click="router.push('/businessservices')">Business Introduction</li>
+          <li @click="router.push('/businessservices')">
+            Business Introduction
+          </li>
           <li @click="router.push('/manage')">Management</li>
           <li @click="router.push('/boarddirectors')">Board of Directors</li>
-          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
+          <li @click="router.push('/committeeappointment')">
+            Committee Appointments
+          </li>
           <li @click="router.push('/govern')">Governance</li>
         </ul>
       </div>
     </section>
 
-    <section class="site-map-financial" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-financial"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Financial Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -34,7 +47,10 @@
       </div>
     </section>
 
-    <section class="site-map-stock" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-stock"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Stock Information</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -44,7 +60,10 @@
       </div>
     </section>
 
-    <section class="site-map-news" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-news"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">News Releases</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -54,7 +73,10 @@
       </div>
     </section>
 
-    <section class="site-map-investor" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="site-map-investor"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Investor Resources</h3>
       <div class="content-block">
         <ul class="link-list">
@@ -74,7 +96,6 @@ const router = useRouter();
 
 <style scoped>
 .site-map {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -113,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;
 }
 
@@ -144,4 +165,4 @@ const router = useRouter();
     font-size: 1rem;
   }
 }
-</style> 
+</style>

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

@@ -1,138 +1,164 @@
 <template>
   <div class="terms-of-use">
-    <section class="terms-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Terms &amp; Conditions</h1>
       <div class="content-block">
         <p>
-          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          FiEE, Inc. and its subsidiaries (collectively and individually
-          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          referred to herein as "FiEE") maintain the fiee.com web site (the
-          to the Internet community. All site references to "FiEE", "our", "we",
+          "Site") as a service to the Internet community. All site references to
-          "company" and other words of like connotation are intended to refer to
+          "FiEE", "our", "we", "company" and other words of like connotation are
-          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          intended to refer to FiEE, Inc. and its subsidiaries, collectively
-          document outlines the Terms and Conditions relating to your use of the
+          and/or individually. This document outlines the Terms and Conditions
-          Site. These Terms and Conditions are applicable to your use of this site
+          relating to your use of the Site. These Terms and Conditions are
-          regardless of how you accessed it. If you do not wish to be bound by these
+          applicable to your use of this site regardless of how you accessed it.
-          Terms and Conditions, please discontinue using and accessing this site
+          If you do not wish to be bound by these Terms and Conditions, please
-          immediately.
+          discontinue using and accessing this site immediately.
         </p>
       </div>
     </section>
 
-    <section class="terms-usage" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-usage"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Your Use of This Site</h3>
       <div class="content-block">
         <p>
-          You may not use this site to engage in any illegal activity. You may not
+          You may not use this site to engage in any illegal activity. You may
-          use this site to engage in conduct which is defamatory, libelous,
+          not use this site to engage in conduct which is defamatory, libelous,
-          threatening or harassing or that infringes on a third party's intellectual
+          threatening or harassing or that infringes on a third party's
-          property or other proprietary rights. You agree that any information you
+          intellectual property or other proprietary rights. You agree that any
-          provide through this site will be truthful and accurate.
+          information you provide through this site will be truthful and
+          accurate.
         </p>
       </div>
     </section>
 
-    <section class="terms-ip" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-ip"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Intellectual Property</h3>
       <div class="content-block">
         <p>
           The information on this site, including without limitation all design,
-          text, images, press releases, and other information, is protected under
+          text, images, press releases, and other information, is protected
-          United States and other copyright laws and is owned by FiEE or used under
+          under United States and other copyright laws and is owned by FiEE or
-          license from the copyright owner. The information may not, except under
+          used under license from the copyright owner. The information may not,
-          written license, be copied, reproduced, transmitted, displayed, performed,
+          except under written license, be copied, reproduced, transmitted,
-          distributed, rented, sublicensed, altered, stored for subsequent use or
+          displayed, performed, distributed, rented, sublicensed, altered,
-          otherwise used in whole or in part in any manner without FiEE's prior
+          stored for subsequent use or otherwise used in whole or in part in any
-          written consent, except to the extent that such use is authorized under
+          manner without FiEE's prior written consent, except to the extent that
-          the United States copyright laws. FiEE's trademarks, logos, images, and
+          such use is authorized under the United States copyright laws. FiEE's
-          service marks used on this site are the property of FiEE and may not be
+          trademarks, logos, images, and service marks used on this site are the
-          used without permission from FiEE and then only with proper
+          property of FiEE and may not be used without permission from FiEE and
-          acknowledgment. In addition, the information on this Web site is provided
+          then only with proper acknowledgment. In addition, the information on
-          "as is" and "as available" by FiEE and/or its subsidiaries without
+          this Web site is provided "as is" and "as available" by FiEE and/or
-          warranty of any kind, either implied or expressed, to its accuracy and
+          its subsidiaries without warranty of any kind, either implied or
-          completeness.
+          expressed, to its accuracy and completeness.
         </p>
       </div>
     </section>
 
-    <section class="terms-forward" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-forward"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Forward-looking Statements</h3>
       <div class="content-block">
         <p>
-          FiEE is including the following cautionary statement to make applicable
+          FiEE is including the following cautionary statement to make
-          and take advantage of the safe harbor provisions of the Private Securities
+          applicable and take advantage of the safe harbor provisions of the
-          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          Private Securities Litigation Reform Act of 1995 for any
-          or on behalf of FiEE. With the exception of historical matters, any
+          forward-looking statements made by, or on behalf of FiEE. With the
-          matters discussed are forward-looking statements (as defined in Section
+          exception of historical matters, any matters discussed are
-          21E of the Securities Exchange Act of 1934) that involve risks and
+          forward-looking statements (as defined in Section 21E of the
-          uncertainties that could cause actual results to differ materially from
+          Securities Exchange Act of 1934) that involve risks and uncertainties
-          projected results. These risks, uncertainties and contingencies include,
+          that could cause actual results to differ materially from projected
-          but are not limited to, the following: the success or failure of FiEE's
+          results. These risks, uncertainties and contingencies include, but are
-          efforts to implement its business strategy; the effects of market demand
+          not limited to, the following: the success or failure of FiEE's
-          and price on performance; our liquidity, results of operations and
+          efforts to implement its business strategy; the effects of market
-          financial condition; changes in laws and regulations; results of
+          demand and price on performance; our liquidity, results of operations
+          and financial condition; changes in laws and regulations; results of
           litigation; the effects of government regulation; the risk of work
-          stoppages; and management's ability to correctly estimate and accrue for
+          stoppages; and management's ability to correctly estimate and accrue
-          contingent liabilities. FiEE assumes no obligation to update information
+          for contingent liabilities. FiEE assumes no obligation to update
-          contained in this site.
+          information contained in this site.
         </p>
       </div>
     </section>
 
-    <section class="terms-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking</h3>
       <div class="content-block">
         <p>
-          As a convenience, this site may contain links to other sites that are not
+          As a convenience, this site may contain links to other sites that are
-          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          not controlled by, or affiliated or associated with, FiEE.
-          does not make any representations concerning the privacy practices or
+          Accordingly, FiEE does not make any representations concerning the
-          terms of use of such sites, nor does FiEE control or guarantee the
+          privacy practices or terms of use of such sites, nor does FiEE control
-          accuracy, integrity, or quality of the information, data, text, software,
+          or guarantee the accuracy, integrity, or quality of the information,
-          music, sound, photographs, graphics, video, messages or other materials
+          data, text, software, music, sound, photographs, graphics, video,
-          available on such sites. The inclusion or exclusion does not imply any
+          messages or other materials available on such sites. The inclusion or
-          endorsement by FiEE of the site, the site's provider, or the information
+          exclusion does not imply any endorsement by FiEE of the site, the
-          on the site. FiEE is not responsible for the content of any linked site or
+          site's provider, or the information on the site. FiEE is not
-          any link contained in a linked site. FiEE reserves the right to terminate
+          responsible for the content of any linked site or any link contained
-          any link or linking program at any time. FiEE does not endorse companies
+          in a linked site. FiEE reserves the right to terminate any link or
-          or products to which it links and reserves the right to note as such on
+          linking program at any time. FiEE does not endorse companies or
-          its web pages. If you decide to access any of the third party sites linked
+          products to which it links and reserves the right to note as such on
-          to this site, you do this entirely at your own risk.
+          its web pages. If you decide to access any of the third party sites
+          linked to this site, you do this entirely at your own risk.
         </p>
       </div>
     </section>
 
-    <section class="terms-violations" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-violations"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
       <div class="content-block">
         <p>
           FiEE reserves the right to seek all remedies available at law and in
-          equity for violations of these Terms and Conditions, including the right
+          equity for violations of these Terms and Conditions, including the
-          to block access from a particular Internet address to the Site. YOU AGREE
+          right to block access from a particular Internet address to the Site.
-          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          YOU AGREE TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY
-          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          LIABILITY, LOSS, CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED
-          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          TO YOUR VIOLATION OF THESE TERMS AND CONDITIONS OR YOUR USE OF THE
-          PROVIDED AT THE SITE.
+          SERVICES AND INFORMATION PROVIDED AT THE SITE.
         </p>
       </div>
     </section>
 
-    <section class="terms-liability" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-liability"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Limitation of Liability</h3>
       <div class="content-block">
         <p>
           NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
-          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT
-          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          OF OR IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED
-          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          HERETO, INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL
-          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          OR CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR
-          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          DAMAGE TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON
-          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE. BECAUSE SOME
-          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF
-          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+          LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY
+          NOT APPLY.
         </p>
         <p>
-          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          FiEE may revise these Terms and Conditions at any time. Revisions will
-          posted on this "Terms and Conditions" page and users are responsible for
+          be posted on this "Terms and Conditions" page and users are
-          reviewing the page from time to time to ensure compliance.
+          responsible for reviewing the page from time to time to ensure
+          compliance.
         </p>
       </div>
     </section>
@@ -145,7 +171,6 @@ import { onMounted, ref, onUnmounted } from "vue";
 
 <style scoped>
 .terms-of-use {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -190,4 +215,4 @@ import { onMounted, ref, onUnmounted } from "vue";
     font-size: 1rem;
   }
 }
-</style> 
+</style>

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

@@ -1,143 +1,169 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="terms-of-use">
-    <section class="terms-intro" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-intro"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h1 class="section-titles">Terms &amp; Conditions</h1>
       <div class="content-block">
         <p>
-          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          FiEE, Inc. and its subsidiaries (collectively and individually
-          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          referred to herein as "FiEE") maintain the fiee.com web site (the
-          to the Internet community. All site references to "FiEE", "our", "we",
+          "Site") as a service to the Internet community. All site references to
-          "company" and other words of like connotation are intended to refer to
+          "FiEE", "our", "we", "company" and other words of like connotation are
-          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          intended to refer to FiEE, Inc. and its subsidiaries, collectively
-          document outlines the Terms and Conditions relating to your use of the
+          and/or individually. This document outlines the Terms and Conditions
-          Site. These Terms and Conditions are applicable to your use of this site
+          relating to your use of the Site. These Terms and Conditions are
-          regardless of how you accessed it. If you do not wish to be bound by these
+          applicable to your use of this site regardless of how you accessed it.
-          Terms and Conditions, please discontinue using and accessing this site
+          If you do not wish to be bound by these Terms and Conditions, please
-          immediately.
+          discontinue using and accessing this site immediately.
         </p>
       </div>
     </section>
 
-    <section class="terms-usage" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-usage"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Your Use of This Site</h3>
       <div class="content-block">
         <p>
-          You may not use this site to engage in any illegal activity. You may not
+          You may not use this site to engage in any illegal activity. You may
-          use this site to engage in conduct which is defamatory, libelous,
+          not use this site to engage in conduct which is defamatory, libelous,
-          threatening or harassing or that infringes on a third party's intellectual
+          threatening or harassing or that infringes on a third party's
-          property or other proprietary rights. You agree that any information you
+          intellectual property or other proprietary rights. You agree that any
-          provide through this site will be truthful and accurate.
+          information you provide through this site will be truthful and
+          accurate.
         </p>
       </div>
     </section>
 
-    <section class="terms-ip" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-ip"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Intellectual Property</h3>
       <div class="content-block">
         <p>
           The information on this site, including without limitation all design,
-          text, images, press releases, and other information, is protected under
+          text, images, press releases, and other information, is protected
-          United States and other copyright laws and is owned by FiEE or used under
+          under United States and other copyright laws and is owned by FiEE or
-          license from the copyright owner. The information may not, except under
+          used under license from the copyright owner. The information may not,
-          written license, be copied, reproduced, transmitted, displayed, performed,
+          except under written license, be copied, reproduced, transmitted,
-          distributed, rented, sublicensed, altered, stored for subsequent use or
+          displayed, performed, distributed, rented, sublicensed, altered,
-          otherwise used in whole or in part in any manner without FiEE's prior
+          stored for subsequent use or otherwise used in whole or in part in any
-          written consent, except to the extent that such use is authorized under
+          manner without FiEE's prior written consent, except to the extent that
-          the United States copyright laws. FiEE's trademarks, logos, images, and
+          such use is authorized under the United States copyright laws. FiEE's
-          service marks used on this site are the property of FiEE and may not be
+          trademarks, logos, images, and service marks used on this site are the
-          used without permission from FiEE and then only with proper
+          property of FiEE and may not be used without permission from FiEE and
-          acknowledgment. In addition, the information on this Web site is provided
+          then only with proper acknowledgment. In addition, the information on
-          "as is" and "as available" by FiEE and/or its subsidiaries without
+          this Web site is provided "as is" and "as available" by FiEE and/or
-          warranty of any kind, either implied or expressed, to its accuracy and
+          its subsidiaries without warranty of any kind, either implied or
-          completeness.
+          expressed, to its accuracy and completeness.
         </p>
       </div>
     </section>
 
-    <section class="terms-forward" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-forward"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Forward-looking Statements</h3>
       <div class="content-block">
         <p>
-          FiEE is including the following cautionary statement to make applicable
+          FiEE is including the following cautionary statement to make
-          and take advantage of the safe harbor provisions of the Private Securities
+          applicable and take advantage of the safe harbor provisions of the
-          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          Private Securities Litigation Reform Act of 1995 for any
-          or on behalf of FiEE. With the exception of historical matters, any
+          forward-looking statements made by, or on behalf of FiEE. With the
-          matters discussed are forward-looking statements (as defined in Section
+          exception of historical matters, any matters discussed are
-          21E of the Securities Exchange Act of 1934) that involve risks and
+          forward-looking statements (as defined in Section 21E of the
-          uncertainties that could cause actual results to differ materially from
+          Securities Exchange Act of 1934) that involve risks and uncertainties
-          projected results. These risks, uncertainties and contingencies include,
+          that could cause actual results to differ materially from projected
-          but are not limited to, the following: the success or failure of FiEE's
+          results. These risks, uncertainties and contingencies include, but are
-          efforts to implement its business strategy; the effects of market demand
+          not limited to, the following: the success or failure of FiEE's
-          and price on performance; our liquidity, results of operations and
+          efforts to implement its business strategy; the effects of market
-          financial condition; changes in laws and regulations; results of
+          demand and price on performance; our liquidity, results of operations
+          and financial condition; changes in laws and regulations; results of
           litigation; the effects of government regulation; the risk of work
-          stoppages; and management's ability to correctly estimate and accrue for
+          stoppages; and management's ability to correctly estimate and accrue
-          contingent liabilities. FiEE assumes no obligation to update information
+          for contingent liabilities. FiEE assumes no obligation to update
-          contained in this site.
+          information contained in this site.
         </p>
       </div>
     </section>
 
-    <section class="terms-linking" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-linking"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Linking</h3>
       <div class="content-block">
         <p>
-          As a convenience, this site may contain links to other sites that are not
+          As a convenience, this site may contain links to other sites that are
-          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          not controlled by, or affiliated or associated with, FiEE.
-          does not make any representations concerning the privacy practices or
+          Accordingly, FiEE does not make any representations concerning the
-          terms of use of such sites, nor does FiEE control or guarantee the
+          privacy practices or terms of use of such sites, nor does FiEE control
-          accuracy, integrity, or quality of the information, data, text, software,
+          or guarantee the accuracy, integrity, or quality of the information,
-          music, sound, photographs, graphics, video, messages or other materials
+          data, text, software, music, sound, photographs, graphics, video,
-          available on such sites. The inclusion or exclusion does not imply any
+          messages or other materials available on such sites. The inclusion or
-          endorsement by FiEE of the site, the site's provider, or the information
+          exclusion does not imply any endorsement by FiEE of the site, the
-          on the site. FiEE is not responsible for the content of any linked site or
+          site's provider, or the information on the site. FiEE is not
-          any link contained in a linked site. FiEE reserves the right to terminate
+          responsible for the content of any linked site or any link contained
-          any link or linking program at any time. FiEE does not endorse companies
+          in a linked site. FiEE reserves the right to terminate any link or
-          or products to which it links and reserves the right to note as such on
+          linking program at any time. FiEE does not endorse companies or
-          its web pages. If you decide to access any of the third party sites linked
+          products to which it links and reserves the right to note as such on
-          to this site, you do this entirely at your own risk.
+          its web pages. If you decide to access any of the third party sites
+          linked to this site, you do this entirely at your own risk.
         </p>
       </div>
     </section>
 
-    <section class="terms-violations" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-violations"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
       <div class="content-block">
         <p>
           FiEE reserves the right to seek all remedies available at law and in
-          equity for violations of these Terms and Conditions, including the right
+          equity for violations of these Terms and Conditions, including the
-          to block access from a particular Internet address to the Site. YOU AGREE
+          right to block access from a particular Internet address to the Site.
-          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          YOU AGREE TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY
-          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          LIABILITY, LOSS, CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED
-          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          TO YOUR VIOLATION OF THESE TERMS AND CONDITIONS OR YOUR USE OF THE
-          PROVIDED AT THE SITE.
+          SERVICES AND INFORMATION PROVIDED AT THE SITE.
         </p>
       </div>
     </section>
 
-    <section class="terms-liability" style="max-width: 1200px; margin: 60px auto; padding: 0 40px">
+    <section
+      class="terms-liability"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+    >
       <h3 class="section-title">Limitation of Liability</h3>
       <div class="content-block">
         <p>
           NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
-          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT
-          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          OF OR IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED
-          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          HERETO, INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL
-          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          OR CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR
-          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          DAMAGE TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON
-          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE. BECAUSE SOME
-          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF
-          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+          LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY
+          NOT APPLY.
         </p>
         <p>
-          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          FiEE may revise these Terms and Conditions at any time. Revisions will
-          posted on this "Terms and Conditions" page and users are responsible for
+          be posted on this "Terms and Conditions" page and users are
-          reviewing the page from time to time to ensure compliance.
+          responsible for reviewing the page from time to time to ensure
+          compliance.
         </p>
       </div>
     </section>
@@ -146,7 +172,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped>
 .terms-of-use {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,143 +1,169 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+import { onUnmounted, ref, watch, onMounted, computed } from "vue";
 </script>
 
 <template>
   <div class="terms-of-use">
-    <section class="terms-intro" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-intro"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h1 class="section-titles">Terms &amp; Conditions</h1>
       <div class="content-block">
         <p>
-          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          FiEE, Inc. and its subsidiaries (collectively and individually
-          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          referred to herein as "FiEE") maintain the fiee.com web site (the
-          to the Internet community. All site references to "FiEE", "our", "we",
+          "Site") as a service to the Internet community. All site references to
-          "company" and other words of like connotation are intended to refer to
+          "FiEE", "our", "we", "company" and other words of like connotation are
-          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          intended to refer to FiEE, Inc. and its subsidiaries, collectively
-          document outlines the Terms and Conditions relating to your use of the
+          and/or individually. This document outlines the Terms and Conditions
-          Site. These Terms and Conditions are applicable to your use of this site
+          relating to your use of the Site. These Terms and Conditions are
-          regardless of how you accessed it. If you do not wish to be bound by these
+          applicable to your use of this site regardless of how you accessed it.
-          Terms and Conditions, please discontinue using and accessing this site
+          If you do not wish to be bound by these Terms and Conditions, please
-          immediately.
+          discontinue using and accessing this site immediately.
         </p>
       </div>
     </section>
 
-    <section class="terms-usage" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-usage"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Your Use of This Site</h3>
       <div class="content-block">
         <p>
-          You may not use this site to engage in any illegal activity. You may not
+          You may not use this site to engage in any illegal activity. You may
-          use this site to engage in conduct which is defamatory, libelous,
+          not use this site to engage in conduct which is defamatory, libelous,
-          threatening or harassing or that infringes on a third party's intellectual
+          threatening or harassing or that infringes on a third party's
-          property or other proprietary rights. You agree that any information you
+          intellectual property or other proprietary rights. You agree that any
-          provide through this site will be truthful and accurate.
+          information you provide through this site will be truthful and
+          accurate.
         </p>
       </div>
     </section>
 
-    <section class="terms-ip" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-ip"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Intellectual Property</h3>
       <div class="content-block">
         <p>
           The information on this site, including without limitation all design,
-          text, images, press releases, and other information, is protected under
+          text, images, press releases, and other information, is protected
-          United States and other copyright laws and is owned by FiEE or used under
+          under United States and other copyright laws and is owned by FiEE or
-          license from the copyright owner. The information may not, except under
+          used under license from the copyright owner. The information may not,
-          written license, be copied, reproduced, transmitted, displayed, performed,
+          except under written license, be copied, reproduced, transmitted,
-          distributed, rented, sublicensed, altered, stored for subsequent use or
+          displayed, performed, distributed, rented, sublicensed, altered,
-          otherwise used in whole or in part in any manner without FiEE's prior
+          stored for subsequent use or otherwise used in whole or in part in any
-          written consent, except to the extent that such use is authorized under
+          manner without FiEE's prior written consent, except to the extent that
-          the United States copyright laws. FiEE's trademarks, logos, images, and
+          such use is authorized under the United States copyright laws. FiEE's
-          service marks used on this site are the property of FiEE and may not be
+          trademarks, logos, images, and service marks used on this site are the
-          used without permission from FiEE and then only with proper
+          property of FiEE and may not be used without permission from FiEE and
-          acknowledgment. In addition, the information on this Web site is provided
+          then only with proper acknowledgment. In addition, the information on
-          "as is" and "as available" by FiEE and/or its subsidiaries without
+          this Web site is provided "as is" and "as available" by FiEE and/or
-          warranty of any kind, either implied or expressed, to its accuracy and
+          its subsidiaries without warranty of any kind, either implied or
-          completeness.
+          expressed, to its accuracy and completeness.
         </p>
       </div>
     </section>
 
-    <section class="terms-forward" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-forward"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Forward-looking Statements</h3>
       <div class="content-block">
         <p>
-          FiEE is including the following cautionary statement to make applicable
+          FiEE is including the following cautionary statement to make
-          and take advantage of the safe harbor provisions of the Private Securities
+          applicable and take advantage of the safe harbor provisions of the
-          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          Private Securities Litigation Reform Act of 1995 for any
-          or on behalf of FiEE. With the exception of historical matters, any
+          forward-looking statements made by, or on behalf of FiEE. With the
-          matters discussed are forward-looking statements (as defined in Section
+          exception of historical matters, any matters discussed are
-          21E of the Securities Exchange Act of 1934) that involve risks and
+          forward-looking statements (as defined in Section 21E of the
-          uncertainties that could cause actual results to differ materially from
+          Securities Exchange Act of 1934) that involve risks and uncertainties
-          projected results. These risks, uncertainties and contingencies include,
+          that could cause actual results to differ materially from projected
-          but are not limited to, the following: the success or failure of FiEE's
+          results. These risks, uncertainties and contingencies include, but are
-          efforts to implement its business strategy; the effects of market demand
+          not limited to, the following: the success or failure of FiEE's
-          and price on performance; our liquidity, results of operations and
+          efforts to implement its business strategy; the effects of market
-          financial condition; changes in laws and regulations; results of
+          demand and price on performance; our liquidity, results of operations
+          and financial condition; changes in laws and regulations; results of
           litigation; the effects of government regulation; the risk of work
-          stoppages; and management's ability to correctly estimate and accrue for
+          stoppages; and management's ability to correctly estimate and accrue
-          contingent liabilities. FiEE assumes no obligation to update information
+          for contingent liabilities. FiEE assumes no obligation to update
-          contained in this site.
+          information contained in this site.
         </p>
       </div>
     </section>
 
-    <section class="terms-linking" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-linking"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Linking</h3>
       <div class="content-block">
         <p>
-          As a convenience, this site may contain links to other sites that are not
+          As a convenience, this site may contain links to other sites that are
-          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          not controlled by, or affiliated or associated with, FiEE.
-          does not make any representations concerning the privacy practices or
+          Accordingly, FiEE does not make any representations concerning the
-          terms of use of such sites, nor does FiEE control or guarantee the
+          privacy practices or terms of use of such sites, nor does FiEE control
-          accuracy, integrity, or quality of the information, data, text, software,
+          or guarantee the accuracy, integrity, or quality of the information,
-          music, sound, photographs, graphics, video, messages or other materials
+          data, text, software, music, sound, photographs, graphics, video,
-          available on such sites. The inclusion or exclusion does not imply any
+          messages or other materials available on such sites. The inclusion or
-          endorsement by FiEE of the site, the site's provider, or the information
+          exclusion does not imply any endorsement by FiEE of the site, the
-          on the site. FiEE is not responsible for the content of any linked site or
+          site's provider, or the information on the site. FiEE is not
-          any link contained in a linked site. FiEE reserves the right to terminate
+          responsible for the content of any linked site or any link contained
-          any link or linking program at any time. FiEE does not endorse companies
+          in a linked site. FiEE reserves the right to terminate any link or
-          or products to which it links and reserves the right to note as such on
+          linking program at any time. FiEE does not endorse companies or
-          its web pages. If you decide to access any of the third party sites linked
+          products to which it links and reserves the right to note as such on
-          to this site, you do this entirely at your own risk.
+          its web pages. If you decide to access any of the third party sites
+          linked to this site, you do this entirely at your own risk.
         </p>
       </div>
     </section>
 
-    <section class="terms-violations" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-violations"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
       <div class="content-block">
         <p>
           FiEE reserves the right to seek all remedies available at law and in
-          equity for violations of these Terms and Conditions, including the right
+          equity for violations of these Terms and Conditions, including the
-          to block access from a particular Internet address to the Site. YOU AGREE
+          right to block access from a particular Internet address to the Site.
-          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          YOU AGREE TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY
-          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          LIABILITY, LOSS, CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED
-          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          TO YOUR VIOLATION OF THESE TERMS AND CONDITIONS OR YOUR USE OF THE
-          PROVIDED AT THE SITE.
+          SERVICES AND INFORMATION PROVIDED AT THE SITE.
         </p>
       </div>
     </section>
 
-    <section class="terms-liability" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
+    <section
+      class="terms-liability"
+      style="max-width: 1200px; margin: 30px auto; padding: 0 15px"
+    >
       <h3 class="section-title">Limitation of Liability</h3>
       <div class="content-block">
         <p>
           NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
-          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT
-          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          OF OR IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED
-          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          HERETO, INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL
-          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          OR CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR
-          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          DAMAGE TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON
-          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE. BECAUSE SOME
-          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF
-          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+          LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY
+          NOT APPLY.
         </p>
         <p>
-          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          FiEE may revise these Terms and Conditions at any time. Revisions will
-          posted on this "Terms and Conditions" page and users are responsible for
+          be posted on this "Terms and Conditions" page and users are
-          reviewing the page from time to time to ensure compliance.
+          responsible for reviewing the page from time to time to ensure
+          compliance.
         </p>
       </div>
     </section>
@@ -146,7 +172,6 @@ import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 
 <style scoped>
 .terms-of-use {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,138 +1,164 @@
 <template>
   <div class="terms-of-use">
-    <section class="terms-intro" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-intro"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h1 class="section-titles">Terms &amp; Conditions</h1>
       <div class="content-block">
         <p>
-          FiEE, Inc. and its subsidiaries (collectively and individually referred to
+          FiEE, Inc. and its subsidiaries (collectively and individually
-          herein as "FiEE") maintain the fiee.com web site (the "Site") as a service
+          referred to herein as "FiEE") maintain the fiee.com web site (the
-          to the Internet community. All site references to "FiEE", "our", "we",
+          "Site") as a service to the Internet community. All site references to
-          "company" and other words of like connotation are intended to refer to
+          "FiEE", "our", "we", "company" and other words of like connotation are
-          FiEE, Inc. and its subsidiaries, collectively and/or individually. This
+          intended to refer to FiEE, Inc. and its subsidiaries, collectively
-          document outlines the Terms and Conditions relating to your use of the
+          and/or individually. This document outlines the Terms and Conditions
-          Site. These Terms and Conditions are applicable to your use of this site
+          relating to your use of the Site. These Terms and Conditions are
-          regardless of how you accessed it. If you do not wish to be bound by these
+          applicable to your use of this site regardless of how you accessed it.
-          Terms and Conditions, please discontinue using and accessing this site
+          If you do not wish to be bound by these Terms and Conditions, please
-          immediately.
+          discontinue using and accessing this site immediately.
         </p>
       </div>
     </section>
 
-    <section class="terms-usage" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-usage"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Your Use of This Site</h3>
       <div class="content-block">
         <p>
-          You may not use this site to engage in any illegal activity. You may not
+          You may not use this site to engage in any illegal activity. You may
-          use this site to engage in conduct which is defamatory, libelous,
+          not use this site to engage in conduct which is defamatory, libelous,
-          threatening or harassing or that infringes on a third party's intellectual
+          threatening or harassing or that infringes on a third party's
-          property or other proprietary rights. You agree that any information you
+          intellectual property or other proprietary rights. You agree that any
-          provide through this site will be truthful and accurate.
+          information you provide through this site will be truthful and
+          accurate.
         </p>
       </div>
     </section>
 
-    <section class="terms-ip" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-ip"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Intellectual Property</h3>
       <div class="content-block">
         <p>
           The information on this site, including without limitation all design,
-          text, images, press releases, and other information, is protected under
+          text, images, press releases, and other information, is protected
-          United States and other copyright laws and is owned by FiEE or used under
+          under United States and other copyright laws and is owned by FiEE or
-          license from the copyright owner. The information may not, except under
+          used under license from the copyright owner. The information may not,
-          written license, be copied, reproduced, transmitted, displayed, performed,
+          except under written license, be copied, reproduced, transmitted,
-          distributed, rented, sublicensed, altered, stored for subsequent use or
+          displayed, performed, distributed, rented, sublicensed, altered,
-          otherwise used in whole or in part in any manner without FiEE's prior
+          stored for subsequent use or otherwise used in whole or in part in any
-          written consent, except to the extent that such use is authorized under
+          manner without FiEE's prior written consent, except to the extent that
-          the United States copyright laws. FiEE's trademarks, logos, images, and
+          such use is authorized under the United States copyright laws. FiEE's
-          service marks used on this site are the property of FiEE and may not be
+          trademarks, logos, images, and service marks used on this site are the
-          used without permission from FiEE and then only with proper
+          property of FiEE and may not be used without permission from FiEE and
-          acknowledgment. In addition, the information on this Web site is provided
+          then only with proper acknowledgment. In addition, the information on
-          "as is" and "as available" by FiEE and/or its subsidiaries without
+          this Web site is provided "as is" and "as available" by FiEE and/or
-          warranty of any kind, either implied or expressed, to its accuracy and
+          its subsidiaries without warranty of any kind, either implied or
-          completeness.
+          expressed, to its accuracy and completeness.
         </p>
       </div>
     </section>
 
-    <section class="terms-forward" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-forward"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Forward-looking Statements</h3>
       <div class="content-block">
         <p>
-          FiEE is including the following cautionary statement to make applicable
+          FiEE is including the following cautionary statement to make
-          and take advantage of the safe harbor provisions of the Private Securities
+          applicable and take advantage of the safe harbor provisions of the
-          Litigation Reform Act of 1995 for any forward-looking statements made by,
+          Private Securities Litigation Reform Act of 1995 for any
-          or on behalf of FiEE. With the exception of historical matters, any
+          forward-looking statements made by, or on behalf of FiEE. With the
-          matters discussed are forward-looking statements (as defined in Section
+          exception of historical matters, any matters discussed are
-          21E of the Securities Exchange Act of 1934) that involve risks and
+          forward-looking statements (as defined in Section 21E of the
-          uncertainties that could cause actual results to differ materially from
+          Securities Exchange Act of 1934) that involve risks and uncertainties
-          projected results. These risks, uncertainties and contingencies include,
+          that could cause actual results to differ materially from projected
-          but are not limited to, the following: the success or failure of FiEE's
+          results. These risks, uncertainties and contingencies include, but are
-          efforts to implement its business strategy; the effects of market demand
+          not limited to, the following: the success or failure of FiEE's
-          and price on performance; our liquidity, results of operations and
+          efforts to implement its business strategy; the effects of market
-          financial condition; changes in laws and regulations; results of
+          demand and price on performance; our liquidity, results of operations
+          and financial condition; changes in laws and regulations; results of
           litigation; the effects of government regulation; the risk of work
-          stoppages; and management's ability to correctly estimate and accrue for
+          stoppages; and management's ability to correctly estimate and accrue
-          contingent liabilities. FiEE assumes no obligation to update information
+          for contingent liabilities. FiEE assumes no obligation to update
-          contained in this site.
+          information contained in this site.
         </p>
       </div>
     </section>
 
-    <section class="terms-linking" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-linking"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Linking</h3>
       <div class="content-block">
         <p>
-          As a convenience, this site may contain links to other sites that are not
+          As a convenience, this site may contain links to other sites that are
-          controlled by, or affiliated or associated with, FiEE. Accordingly, FiEE
+          not controlled by, or affiliated or associated with, FiEE.
-          does not make any representations concerning the privacy practices or
+          Accordingly, FiEE does not make any representations concerning the
-          terms of use of such sites, nor does FiEE control or guarantee the
+          privacy practices or terms of use of such sites, nor does FiEE control
-          accuracy, integrity, or quality of the information, data, text, software,
+          or guarantee the accuracy, integrity, or quality of the information,
-          music, sound, photographs, graphics, video, messages or other materials
+          data, text, software, music, sound, photographs, graphics, video,
-          available on such sites. The inclusion or exclusion does not imply any
+          messages or other materials available on such sites. The inclusion or
-          endorsement by FiEE of the site, the site's provider, or the information
+          exclusion does not imply any endorsement by FiEE of the site, the
-          on the site. FiEE is not responsible for the content of any linked site or
+          site's provider, or the information on the site. FiEE is not
-          any link contained in a linked site. FiEE reserves the right to terminate
+          responsible for the content of any linked site or any link contained
-          any link or linking program at any time. FiEE does not endorse companies
+          in a linked site. FiEE reserves the right to terminate any link or
-          or products to which it links and reserves the right to note as such on
+          linking program at any time. FiEE does not endorse companies or
-          its web pages. If you decide to access any of the third party sites linked
+          products to which it links and reserves the right to note as such on
-          to this site, you do this entirely at your own risk.
+          its web pages. If you decide to access any of the third party sites
+          linked to this site, you do this entirely at your own risk.
         </p>
       </div>
     </section>
 
-    <section class="terms-violations" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-violations"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Violations of Terms &amp; Conditions</h3>
       <div class="content-block">
         <p>
           FiEE reserves the right to seek all remedies available at law and in
-          equity for violations of these Terms and Conditions, including the right
+          equity for violations of these Terms and Conditions, including the
-          to block access from a particular Internet address to the Site. YOU AGREE
+          right to block access from a particular Internet address to the Site.
-          TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY LIABILITY, LOSS,
+          YOU AGREE TO INDEMNIFY, DEFEND AND HOLD HARMLESS FIEE FROM ANY
-          CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED TO YOUR VIOLATION OF
+          LIABILITY, LOSS, CLAIM AND EXPENSE, INCLUDING ATTORNEY'S FEES, RELATED
-          THESE TERMS AND CONDITIONS OR YOUR USE OF THE SERVICES AND INFORMATION
+          TO YOUR VIOLATION OF THESE TERMS AND CONDITIONS OR YOUR USE OF THE
-          PROVIDED AT THE SITE.
+          SERVICES AND INFORMATION PROVIDED AT THE SITE.
         </p>
       </div>
     </section>
 
-    <section class="terms-liability" style="max-width: 1200px; margin: 40px auto; padding: 0 20px">
+    <section
+      class="terms-liability"
+      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
+    >
       <h3 class="section-title">Limitation of Liability</h3>
       <div class="content-block">
         <p>
           NEITHER FIEE NOR ITS DIRECTORS, MANAGERS, OFFICERS, EMPLOYEES,
-          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT OF OR
+          REPRESENTATIVES OR AFFILIATES WILL BE LIABLE FOR DAMAGES ARISING OUT
-          IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED HERETO,
+          OF OR IN CONNECTION WITH THE USE OF THIS SITE OR ANY SITE LINKED
-          INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL OR
+          HERETO, INCLUDING, WITHOUT LIMITATION, INDIRECT, PUNITIVE, INCIDENTAL
-          CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR DAMAGE
+          OR CONSEQUENTIAL DAMAGES, LOSS OF DATA, INCOME OR PROFIT, LOSS OF OR
-          TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON CONTRACT, TORT,
+          DAMAGE TO PROPERTY AND CLAIMS OF THIRD PARTIES, WHETHER BASED ON
-          STRICT LIABILITY OR OTHERWISE. BECAUSE SOME STATES/JURISDICTIONS DO NOT
+          CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE. BECAUSE SOME
-          ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR INCIDENTAL OR
+          STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF
-          CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY NOT APPLY.
+          LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES, SUCH LIMITATION MAY
+          NOT APPLY.
         </p>
         <p>
-          FiEE may revise these Terms and Conditions at any time. Revisions will be
+          FiEE may revise these Terms and Conditions at any time. Revisions will
-          posted on this "Terms and Conditions" page and users are responsible for
+          be posted on this "Terms and Conditions" page and users are
-          reviewing the page from time to time to ensure compliance.
+          responsible for reviewing the page from time to time to ensure
+          compliance.
         </p>
       </div>
     </section>
@@ -145,7 +171,6 @@ import { onMounted, ref, onUnmounted } from "vue";
 
 <style scoped>
 .terms-of-use {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -190,4 +215,4 @@ import { onMounted, ref, onUnmounted } from "vue";
     font-size: 0.9rem;
   }
 }
-</style> 
+</style>

src/views/govern/size1440/index.vue

@@ -15,10 +15,10 @@
       <div
         class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
       ></div>
-      <div class="relative p-8 flex flex-col h-full">
+      <div class="relative p-8 flex flex-col h-full back-line">
         <div class="flex items-center mb-6 max-h-[3.5rem]">
           <div
-            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -36,10 +36,14 @@
             </svg>
           </div>
           <div>
-            <n-tooltip trigger="hover" :disabled="!item.showTooltip" width="trigger">
+            <n-tooltip
+              trigger="hover"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
               <template #trigger>
                 <h1
-                  :ref="el => setTitleRef(el, index)"
+                  :ref="(el) => setTitleRef(el, index)"
                   style="
                     font-size: 18px;
                     word-break: break-word;
@@ -63,9 +67,9 @@
         </div>
         <div class="mt-auto">
           <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="font-size: 16px; cursor: pointer;"
+            style="font-size: 16px; cursor: pointer"
             @click="handleViewDocument(item)"
           >
             View Document
@@ -91,16 +95,16 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref, nextTick, watch } from 'vue'
+import { reactive, onMounted, ref, nextTick, watch } from "vue";
-import axios from 'axios'
+import axios from "axios";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 
-import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [
@@ -133,57 +137,62 @@ const state = reactive({
     //   date: 'May 30, 2025',
     // },
   ],
-})
+});
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.list.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
-  getGovernanceDisplay()
+  getGovernanceDisplay();
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.list, () => {
+watch(
-  nextTick(() => {
+  () => state.list,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 //获取官网展示文档
 const getGovernanceDisplay = () => {
   // let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
-  let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
+  let url = "https://erpapi.fiee.com/api/fiee/governance/display";
-  let params = {}
+  let params = {};
   axios
     .get(url, { params })
     .then((res) => {
       // console.log(res)
       if (res.status === 200) {
         if (res.data.status === 0) {
-          state.list = res.data.data.data || []
+          state.list = res.data.data.data || [];
         }
       }
     })
     .catch((err) => {
       // console.log(err)
-    })
+    });
-}
+};
 
 // 查看文档
 const handleViewDocument = (item) => {
@@ -192,9 +201,9 @@ const handleViewDocument = (item) => {
     `${import.meta.env.VITE_PAGE_URL}/office?url=${
       item.attachment
     }&attachmentName=${item.attachmentName}`,
-    '_blank',
+    "_blank"
-  )
+  );
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -210,7 +219,7 @@ const handleViewDocument = (item) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -227,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;
 }
 
 /* 卡片背景渐变效果 */
@@ -240,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;
@@ -263,4 +272,7 @@ const handleViewDocument = (item) => {
     transform: translateY(0px) rotate(0deg);
   }
 }
+.back-line {
+  background: linear-gradient(to right, #fff0f6, #ffffff);
+}
 </style>

src/views/govern/size1920/index.vue

@@ -15,10 +15,10 @@
       <div
         class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
       ></div>
-      <div class="relative p-8 flex flex-col h-full">
+      <div class="relative p-8 flex flex-col h-full back-line">
         <div class="flex items-center mb-6 max-h-[3.5rem]">
           <div
-            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -36,10 +36,14 @@
             </svg>
           </div>
           <div>
-            <n-tooltip trigger="hover" :disabled="!item.showTooltip" width="trigger">
+            <n-tooltip
+              trigger="hover"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
               <template #trigger>
                 <h1
-                  :ref="el => setTitleRef(el, index)"
+                  :ref="(el) => setTitleRef(el, index)"
                   style="
                     font-size: 18px;
                     word-break: break-word;
@@ -63,9 +67,9 @@
         </div>
         <div class="mt-auto">
           <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="font-size: 16px; cursor: pointer;"
+            style="font-size: 16px; cursor: pointer"
             @click="handleViewDocument(item)"
           >
             View Document
@@ -91,16 +95,16 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref, nextTick, watch } from 'vue'
+import { reactive, onMounted, ref, nextTick, watch } from "vue";
-import axios from 'axios'
+import axios from "axios";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 
-import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [
@@ -133,57 +137,62 @@ const state = reactive({
     //   date: 'May 30, 2025',
     // },
   ],
-})
+});
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.list.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
-  getGovernanceDisplay()
+  getGovernanceDisplay();
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.list, () => {
+watch(
-  nextTick(() => {
+  () => state.list,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 //获取官网展示文档
 const getGovernanceDisplay = () => {
   // let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
-  let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
+  let url = "https://erpapi.fiee.com/api/fiee/governance/display";
-  let params = {}
+  let params = {};
   axios
     .get(url, { params })
     .then((res) => {
       // console.log(res)
       if (res.status === 200) {
         if (res.data.status === 0) {
-          state.list = res.data.data.data || []
+          state.list = res.data.data.data || [];
         }
       }
     })
     .catch((err) => {
       // console.log(err)
-    })
+    });
-}
+};
 
 // 查看文档
 const handleViewDocument = (item) => {
@@ -192,9 +201,9 @@ const handleViewDocument = (item) => {
     `${import.meta.env.VITE_PAGE_URL}/office?url=${
       item.attachment
     }&attachmentName=${item.attachmentName}`,
-    '_blank',
+    "_blank"
-  )
+  );
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -210,7 +219,7 @@ const handleViewDocument = (item) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -227,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;
 }
 
 /* 卡片背景渐变效果 */
@@ -240,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;
@@ -263,4 +272,7 @@ const handleViewDocument = (item) => {
     transform: translateY(0px) rotate(0deg);
   }
 }
+.back-line {
+  background: linear-gradient(to right, #fff0f6, #ffffff);
+}
 </style>

src/views/govern/size375/index.vue

@@ -12,10 +12,10 @@
       <div
         class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
       ></div>
-      <div class="relative p-8 flex flex-col h-full">
+      <div class="relative p-8 flex flex-col h-full back-line">
         <div class="flex items-center mb-6 max-h-[3.5rem]">
           <div
-            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +33,11 @@
             </svg>
           </div>
           <div>
-            <n-tooltip trigger="click" :disabled="!item.showTooltip" width="trigger">
+            <n-tooltip
+              trigger="click"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
               <template #trigger>
                 <h1
                   :ref="(el) => setTitleRef(el, index)"
@@ -59,9 +63,9 @@
         </div>
         <div class="mt-auto">
           <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="cursor: pointer;"
+            style="cursor: pointer"
             @click="handleViewDocument(item)"
           >
             View Document
@@ -87,16 +91,16 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref, nextTick, watch } from 'vue'
+import { reactive, onMounted, ref, nextTick, watch } from "vue";
-import axios from 'axios'
+import axios from "axios";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 
-import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [
@@ -129,57 +133,62 @@ const state = reactive({
     //   date: 'May 30, 2025',
     // },
   ],
-})
+});
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.list.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
-  getGovernanceDisplay()
+  getGovernanceDisplay();
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.list, () => {
+watch(
-  nextTick(() => {
+  () => state.list,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 //获取官网展示文档
 const getGovernanceDisplay = () => {
   // let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
-  let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
+  let url = "https://erpapi.fiee.com/api/fiee/governance/display";
-  let params = {}
+  let params = {};
   axios
     .get(url, { params })
     .then((res) => {
       // console.log(res)
       if (res.status === 200) {
         if (res.data.status === 0) {
-          state.list = res.data.data.data || []
+          state.list = res.data.data.data || [];
         }
       }
     })
     .catch((err) => {
       // console.log(err)
-    })
+    });
-}
+};
 
 // 查看文档
 const handleViewDocument = (item) => {
@@ -188,9 +197,9 @@ const handleViewDocument = (item) => {
     `${import.meta.env.VITE_PAGE_URL}/office?url=${
       item.attachment
     }&attachmentName=${item.attachmentName}`,
-    '_blank',
+    "_blank"
-  )
+  );
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -206,7 +215,7 @@ const handleViewDocument = (item) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -220,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;
 }
 
 /* 卡片背景渐变效果 */
@@ -236,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;
@@ -259,4 +267,7 @@ const handleViewDocument = (item) => {
     transform: translateY(0px) rotate(0deg);
   }
 }
+.back-line {
+  background: linear-gradient(to right, #fff0f6, #ffffff);
+}
 </style>

src/views/govern/size768/index.vue

@@ -12,10 +12,10 @@
       <div
         class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
       ></div>
-      <div class="relative p-8 flex flex-col h-full">
+      <div class="relative p-8 flex flex-col h-full back-line">
         <div class="flex items-center mb-6 max-h-[3.5rem]">
           <div
-            class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
+            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +33,11 @@
             </svg>
           </div>
           <div>
-            <n-tooltip trigger="click" :disabled="!item.showTooltip" width="trigger">
+            <n-tooltip
+              trigger="click"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
               <template #trigger>
                 <h1
                   :ref="(el) => setTitleRef(el, index)"
@@ -59,9 +63,9 @@
         </div>
         <div class="mt-auto">
           <a
-            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
+            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
             target="_blank"
-            style="cursor: pointer;"
+            style="cursor: pointer"
             @click="handleViewDocument(item)"
           >
             View Document
@@ -87,16 +91,16 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, ref, nextTick, watch } from 'vue'
+import { reactive, onMounted, ref, nextTick, watch } from "vue";
-import axios from 'axios'
+import axios from "axios";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 
-import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
+import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
-import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
+import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
 
-import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
+import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
 
-import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
+import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
 
 const state = reactive({
   list: [
@@ -129,57 +133,62 @@ const state = reactive({
     //   date: 'May 30, 2025',
     // },
   ],
-})
+});
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.list.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
-  getGovernanceDisplay()
+  getGovernanceDisplay();
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.list, () => {
+watch(
-  nextTick(() => {
+  () => state.list,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 //获取官网展示文档
 const getGovernanceDisplay = () => {
   // let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
-  let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
+  let url = "https://erpapi.fiee.com/api/fiee/governance/display";
-  let params = {}
+  let params = {};
   axios
     .get(url, { params })
     .then((res) => {
       // console.log(res)
       if (res.status === 200) {
         if (res.data.status === 0) {
-          state.list = res.data.data.data || []
+          state.list = res.data.data.data || [];
         }
       }
     })
     .catch((err) => {
       // console.log(err)
-    })
+    });
-}
+};
 
 // 查看文档
 const handleViewDocument = (item) => {
@@ -188,9 +197,9 @@ const handleViewDocument = (item) => {
     `${import.meta.env.VITE_PAGE_URL}/office?url=${
       item.attachment
     }&attachmentName=${item.attachmentName}`,
-    '_blank',
+    "_blank"
-  )
+  );
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -206,7 +215,7 @@ const handleViewDocument = (item) => {
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
-    background: #895bff;
+    background: #ff7bac;
     border-radius: 3px;
     transition: width 0.3s ease;
   }
@@ -223,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;
 }
 
 /* 卡片背景渐变效果 */
@@ -236,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;
@@ -259,4 +268,7 @@ const handleViewDocument = (item) => {
     transform: translateY(0px) rotate(0deg);
   }
 }
+.back-line {
+  background: linear-gradient(to right, #fff0f6, #ffffff);
+}
 </style>

src/views/index/size1920/index.vue

@@ -1,13 +1,15 @@
 <script setup>
-import customHeader from '@/components/customHeader/index.vue'
+import customHeader from "@/components/customHeader/index.vue";
-import customFooter from '@/components/customFooter/index.vue'
+import customFooter from "@/components/customFooter/index.vue";
-import { NScrollbar } from 'naive-ui'
+import { NScrollbar } from "naive-ui";
 </script>
 
 <template>
   <div class="flex flex-col h-screen">
     <customHeader></customHeader>
-    <n-scrollbar class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1">
+    <n-scrollbar
+      class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1"
+    >
       <div>
         <router-view />
       </div>

src/views/index/size375/index.vue

@@ -1,7 +1,7 @@
 <script setup>
-import customHeader from '@/components/customHeader/index.vue'
+import customHeader from "@/components/customHeader/index.vue";
-import customFooter from '@/components/customFooter/index.vue'
+import customFooter from "@/components/customFooter/index.vue";
-import { NScrollbar } from 'naive-ui'
+import { NScrollbar } from "naive-ui";
 </script>
 
 <template>

src/views/manage/size1440/index.vue

@@ -85,7 +85,6 @@ const getInitials = (name) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -99,7 +98,7 @@ const getInitials = (name) => {
 
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -182,11 +181,12 @@ const getInitials = (name) => {
 /* 个人资料区 */
 .card-profile {
   padding: 2rem;
-  background: linear-gradient(
+  /* background: linear-gradient(
     135deg,
     #7a4dff 0%,
     #895bff 100%
-  ); /* 主色调接近 #895bff */
+  ); */
+  background: #ff7bac;
   position: relative;
 }
 
@@ -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: #895bff;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size1920/index.vue

@@ -85,7 +85,6 @@ const getInitials = (name) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -99,7 +98,7 @@ const getInitials = (name) => {
 
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -182,11 +181,12 @@ const getInitials = (name) => {
 /* 个人资料区 */
 .card-profile {
   padding: 2rem;
-  background: linear-gradient(
+  /* background: linear-gradient(
     135deg,
     #7a4dff 0%,
     #895bff 100%
-  ); /* 主色调接近 #895bff */
+  ); */
+  background: #ff7bac;
   position: relative;
 }
 
@@ -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: #895bff;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size375/index.vue

@@ -86,7 +86,6 @@ const getInitials = (name) => {
 }
 
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -101,7 +100,7 @@ const getInitials = (name) => {
 
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -171,7 +170,12 @@ const getInitials = (name) => {
 /* 个人资料区 */
 .card-profile {
   padding: 1.5rem;
-  background: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
+  /* background: linear-gradient(
+    135deg,
+    #7a4dff 0%,
+    #895bff 100%
+  ); */
+  background: #ff7bac;
   position: relative;
 }
 
@@ -186,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;
@@ -202,7 +206,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.5rem;
   font-weight: bold;
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/manage/size768/index.vue

@@ -90,7 +90,6 @@ const getInitials = (name) => {
 }
 
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -105,7 +104,7 @@ const getInitials = (name) => {
 
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -173,10 +172,16 @@ const getInitials = (name) => {
   transform: translateY(-5px);
 }
 
+/* 个人资料区 */
 /* 个人资料区 */
 .card-profile {
   padding: 1.5rem;
-  background: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
+  /* background: linear-gradient(
+    135deg,
+    #7a4dff 0%,
+    #895bff 100%
+  ); */
+  background: #ff7bac;
   position: relative;
 }
 
@@ -191,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;
@@ -207,7 +212,7 @@ const getInitials = (name) => {
   justify-content: center;
   font-size: 1.5rem;
   font-weight: bold;
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .profile-info {

src/views/myHome/size1440/index.vue

@@ -102,7 +102,7 @@
             </div>
 
             <div
-              style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.6rem;"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
               class="cursor-pointer"
               @click="handleLink(item)"
             >
@@ -115,11 +115,14 @@
             </div>
           </div>
         </div>
-        <div v-if="newList.length === 0" class="flex justify-center items-center">
+        <div
+          v-if="newList.length === 0"
+          class="flex justify-center items-center"
+        >
           <img
             src="@/assets/image/icon/default-empty.png"
             alt="empty"
-            style="width: 109px; height: 60px;"
+            style="width: 109px; height: 60px"
           />
         </div>
       </div>
@@ -152,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">{{
@@ -231,10 +241,10 @@
 
 <script setup>
 import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
-import axios from 'axios'
+import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
 getStockQuate();
@@ -258,29 +268,29 @@ const newList = ref([
 
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'long',
+            month: "long",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
-        newList.value = res.data.data?.data || []
+        newList.value = res.data.data?.data || [];
       }
     }
-  })
+  });
-}
+};
 
 onMounted(() => {
   if (contentRef.value && "IntersectionObserver" in window) {
@@ -306,35 +316,40 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   newList.value.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
-watch(() => newList.value, () => {
+watch(
-  nextTick(() => {
+  () => newList.value,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 onUnmounted(() => {
   if (observer) {
@@ -355,7 +370,6 @@ const handleLink = (item) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -368,7 +382,7 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -419,7 +433,7 @@ const handleLink = (item) => {
 .section-title {
   font-size: 1.5rem; /* 18px */
   margin-bottom: 30px;
-  color: #895bff;
+  color: #ff7bac;
 }
 .section-titles {
   font-size: 2.5rem;
@@ -525,7 +539,7 @@ const handleLink = (item) => {
 
 /* 股票信息卡片样式 */
 .stock-card {
-  border-top: 4px solid #895bff;
+  border-top: 4px solid #ff7bac;
 }
 
 .stock-data {
@@ -551,7 +565,7 @@ const handleLink = (item) => {
 }
 
 .positive {
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .stock-chart-placeholder {
@@ -575,7 +589,7 @@ const handleLink = (item) => {
 
 /* 活动预告卡片样式 */
 .events-card {
-  border-top: 4px solid #10b981;
+  border-top: 4px solid #00ffff;
 }
 
 .event-item {
@@ -615,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);
 }
 
 /* 新闻模块样式 */
@@ -628,7 +642,7 @@ const handleLink = (item) => {
   border-radius: 12px;
   padding: 30px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #895bff;
+  border-left: 4px solid #ff7bac;
 }
 
 .news-date {

src/views/myHome/size1920/index.vue

@@ -102,7 +102,7 @@
             </div>
 
             <div
-              style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.6rem;"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
               class="cursor-pointer"
               @click="handleLink(item)"
             >
@@ -115,11 +115,14 @@
             </div>
           </div>
         </div>
-        <div v-if="newList.length === 0" class="flex justify-center items-center">
+        <div
+          v-if="newList.length === 0"
+          class="flex justify-center items-center"
+        >
           <img
             src="@/assets/image/icon/default-empty.png"
             alt="empty"
-            style="width: 109px; height: 60px;"
+            style="width: 109px; height: 60px"
           />
         </div>
       </div>
@@ -148,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">{{
@@ -221,10 +231,10 @@
 
 <script setup>
 import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
-import axios from 'axios'
+import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 // 示例数据
@@ -245,29 +255,29 @@ const newList = ref([
 
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'long',
+            month: "long",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
-        newList.value = res.data.data?.data || []
+        newList.value = res.data.data?.data || [];
       }
     }
-  })
+  });
-}
+};
 
 const { t: $t } = useI18n();
 const contentRef = ref(null);
@@ -297,35 +307,40 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
-  
+
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   newList.value.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
-watch(() => newList.value, () => {
+watch(
-  nextTick(() => {
+  () => newList.value,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 onUnmounted(() => {
   if (observer) {
@@ -346,7 +361,6 @@ const handleLink = (item) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -359,7 +373,7 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -410,7 +424,7 @@ const handleLink = (item) => {
 .section-title {
   font-size: 1.5rem; /* 18px */
   margin-bottom: 30px;
-  color: #895bff;
+  color: #ff7bac;
 }
 .section-titles {
   font-size: 2.5rem;
@@ -516,7 +530,7 @@ const handleLink = (item) => {
 
 /* 股票信息卡片样式 */
 .stock-card {
-  border-top: 4px solid #895bff;
+  border-top: 4px solid #ff7bac;
 }
 
 .stock-data {
@@ -542,7 +556,7 @@ const handleLink = (item) => {
 }
 
 .positive {
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .stock-chart-placeholder {
@@ -566,7 +580,7 @@ const handleLink = (item) => {
 
 /* 活动预告卡片样式 */
 .events-card {
-  border-top: 4px solid #10b981;
+  border-top: 4px solid #00ffff;
 }
 
 .event-item {
@@ -606,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);
 }
 
 /* 新闻模块样式 */
@@ -619,7 +633,7 @@ const handleLink = (item) => {
   border-radius: 12px;
   padding: 30px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #895bff;
+  border-left: 4px solid #ff7bac;
 }
 
 .news-date {

src/views/myHome/size375/index.vue

@@ -102,7 +102,7 @@
             </div>
 
             <div
-              style="font-size: 18px;flex-shrink: 0;margin: 0 0 0 0.6rem;"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
               class="cursor-pointer"
               @click="handleLink(item)"
             >
@@ -115,11 +115,14 @@
             </div>
           </div>
         </div>
-        <div v-if="newList.length === 0" class="flex justify-center items-center">
+        <div
+          v-if="newList.length === 0"
+          class="flex justify-center items-center"
+        >
           <img
             src="@/assets/image/icon/default-empty.png"
             alt="empty"
-            style="width: 109px; height: 60px;"
+            style="width: 109px; height: 60px"
           />
         </div>
       </div>
@@ -152,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">{{
@@ -231,10 +242,10 @@
 
 <script setup>
 import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
-import axios from 'axios'
+import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 const { t: $t } = useI18n();
@@ -256,29 +267,29 @@ const newList = ref([
 
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'long',
+            month: "long",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
-        newList.value = res.data.data?.data || []
+        newList.value = res.data.data?.data || [];
       }
     }
-  })
+  });
-}
+};
 
 onMounted(() => {
   if (contentRef.value && "IntersectionObserver" in window) {
@@ -304,35 +315,40 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   newList.value.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
-watch(() => newList.value, () => {
+watch(
-  nextTick(() => {
+  () => newList.value,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 onUnmounted(() => {
   if (observer) {
@@ -353,7 +369,6 @@ const handleLink = (item) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -366,7 +381,7 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -417,7 +432,7 @@ const handleLink = (item) => {
 .section-title {
   font-size: 1.5rem; /* 18px */
   margin-bottom: 30px;
-  color: #895bff;
+  color: #ff7bac;
 }
 .section-titles {
   font-size: 2.5rem;
@@ -523,7 +538,7 @@ const handleLink = (item) => {
 
 /* 股票信息卡片样式 */
 .stock-card {
-  border-top: 4px solid #895bff;
+  border-top: 4px solid #ff7bac;
 }
 
 .stock-data {
@@ -549,7 +564,7 @@ const handleLink = (item) => {
 }
 
 .positive {
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .stock-chart-placeholder {
@@ -573,7 +588,7 @@ const handleLink = (item) => {
 
 /* 活动预告卡片样式 */
 .events-card {
-  border-top: 4px solid #10b981;
+  border-top: 4px solid #00ffff;
 }
 
 .event-item {
@@ -613,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);
 }
 
 /* 新闻模块样式 */
@@ -626,7 +641,7 @@ const handleLink = (item) => {
   border-radius: 12px;
   padding: 30px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #895bff;
+  border-left: 4px solid #ff7bac;
 }
 
 .news-date {

src/views/myHome/size768/index.vue

@@ -102,7 +102,7 @@
             </div>
 
             <div
-              style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.9rem;"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.9rem"
               class="cursor-pointer"
               @click="handleLink(item)"
             >
@@ -115,11 +115,14 @@
             </div>
           </div>
         </div>
-        <div v-if="newList.length === 0" class="flex justify-center items-center">
+        <div
+          v-if="newList.length === 0"
+          class="flex justify-center items-center"
+        >
           <img
             src="@/assets/image/icon/default-empty.png"
             alt="empty"
-            style="width: 109px; height: 60px;"
+            style="width: 109px; height: 60px"
           />
         </div>
       </div>
@@ -152,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">{{
@@ -231,10 +242,10 @@
 
 <script setup>
 import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
-import { NTooltip } from 'naive-ui'
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
-import axios from 'axios'
+import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
 getStockQuate();
@@ -281,61 +292,66 @@ onMounted(() => {
     // 回退方案：如果不支持IntersectionObserver则直接显示
     isInView.value = true;
   }
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   newList.value.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
-watch(() => newList.value, () => {
+watch(
-  nextTick(() => {
+  () => newList.value,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'long',
+            month: "long",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
-        newList.value = res.data.data?.data || []
+        newList.value = res.data.data?.data || [];
       }
     }
-  })
+  });
-}
+};
 
 onUnmounted(() => {
   if (observer) {
@@ -356,7 +372,6 @@ const handleLink = (item) => {
 
 <style scoped>
 .home-page {
-  background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -369,7 +384,7 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
+  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   color: white;
@@ -420,7 +435,7 @@ const handleLink = (item) => {
 .section-title {
   font-size: 1.5rem; /* 18px */
   margin-bottom: 30px;
-  color: #895bff;
+  color: #ff7bac;
 }
 .section-titles {
   font-size: 2.5rem;
@@ -526,7 +541,7 @@ const handleLink = (item) => {
 
 /* 股票信息卡片样式 */
 .stock-card {
-  border-top: 4px solid #895bff;
+  border-top: 4px solid #ff7bac;
 }
 
 .stock-data {
@@ -552,7 +567,7 @@ const handleLink = (item) => {
 }
 
 .positive {
-  color: #895bff;
+  color: #ff7bac;
 }
 
 .stock-chart-placeholder {
@@ -576,7 +591,7 @@ const handleLink = (item) => {
 
 /* 活动预告卡片样式 */
 .events-card {
-  border-top: 4px solid #10b981;
+  border-top: 4px solid #00ffff;
 }
 
 .event-item {
@@ -616,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);
 }
 
 /* 新闻模块样式 */
@@ -629,7 +644,7 @@ const handleLink = (item) => {
   border-radius: 12px;
   padding: 30px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #895bff;
+  border-left: 4px solid #ff7bac;
 }
 
 .news-date {

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

@@ -3,7 +3,7 @@
     <n-infinite-scroll :distance="0" @load="doLoadMore">
       <main class="p-[35px] max-w-[1200px] mx-auto">
         <div class="title mb-[20px]">
-          {{ t('press_releases.title') }}
+          {{ t("press_releases.title") }}
         </div>
         <div class="search-container">
           <n-select
@@ -17,12 +17,8 @@
             :placeholder="t('press_releases.search.placeholder')"
             class="search-input"
           />
-          <n-button
+          <n-button @click="handleSearch" class="search-button w-[80px]">
-            type="primary"
+            {{ t("press_releases.search.button") }}
-            @click="handleSearch"
-            class="search-button w-[80px]"
-          >
-            {{ t('press_releases.search.button') }}
           </n-button>
         </div>
         <div v-for="(item, idx) in state.filterNewsData" :key="idx">
@@ -30,7 +26,14 @@
             <div class="news-item-date">{{ item.date }}</div>
             <div
               class="news-item-title text-[#0078d7] cursor-pointer"
-              style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
+              style="
+                word-break: break-word;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
               @click="handleNewClick(item)"
             >
               {{ item.title }}
@@ -53,11 +56,11 @@
                     text-overflow: ellipsis;
                   "
                 >
-                {{item.summary}}
+                  {{ item.summary }}
                 </div>
               </template>
               <div slot="content">
-                {{item.summary}}
+                {{ item.summary }}
               </div>
             </n-tooltip>
           </div>
@@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch, nextTick, ref } from "vue";
 import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
-import axios from 'axios'
+import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -117,80 +120,85 @@ const state = reactive({
   currentPage: 1, //当前页码
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.filterNewsData.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
   // state.filterNewsData = state.newsData;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.filterNewsData, () => {
+watch(
-  nextTick(() => {
+  () => state.filterNewsData,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
     pageSize: 10,
     timeStart: state.selectedValue
-      ? state.selectedValue === 'all_years'
+      ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
         if (state.currentPage === 1) {
-          state.filterNewsData = res.data.data?.data || []
+          state.filterNewsData = res.data.data?.data || [];
         } else {
           state.filterNewsData = [
             ...state.filterNewsData,
             ...(res.data.data?.data || []),
-          ]
+          ];
         }
         if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true
+          state.hasMore = true;
         } else {
-          state.hasMore = false
+          state.hasMore = false;
         }
       }
     }
-  })
+  });
-}
+};
 
 const handleFilter = () => {
   // 筛选逻辑
@@ -227,16 +235,16 @@ watch(
   () => [state.selectedValue, state.inputValue],
   () => {
     // handleFilter();
-    state.currentPage = 1
+    state.currentPage = 1;
-    getPressReleasesDisplay()
+    getPressReleasesDisplay();
   }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
   // handleFilter();
-  state.currentPage = 1
+  state.currentPage = 1;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -252,15 +260,15 @@ const handleNewClick = (item) => {
 //加载更多数据
 const doLoadMore = () => {
   if (!state.hasMore || state.loading) {
-    return
+    return;
   }
   // console.log('触底了')
-  state.loading = true
+  state.loading = true;
-  state.currentPage++
+  state.currentPage++;
   getPressReleasesDisplay().finally(() => {
-    state.loading = false
+    state.loading = false;
-  })
+  });
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -309,4 +317,12 @@ const doLoadMore = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -3,7 +3,7 @@
     <n-infinite-scroll :distance="0" @load="doLoadMore">
       <main class="p-[35px] max-w-[1200px] mx-auto">
         <div class="title mb-[20px]">
-          {{ t('press_releases.title') }}
+          {{ t("press_releases.title") }}
         </div>
         <div class="search-container">
           <n-select
@@ -17,12 +17,8 @@
             :placeholder="t('press_releases.search.placeholder')"
             class="search-input"
           />
-          <n-button
+          <n-button @click="handleSearch" class="search-button w-[60px]">
-            type="primary"
+            {{ t("press_releases.search.button") }}
-            @click="handleSearch"
-            class="search-button w-[60px]"
-          >
-            {{ t('press_releases.search.button') }}
           </n-button>
         </div>
         <div v-for="(item, idx) in state.filterNewsData" :key="idx">
@@ -30,7 +26,14 @@
             <div class="news-item-date">{{ item.date }}</div>
             <div
               class="news-item-title text-[#0078d7] cursor-pointer"
-              style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
+              style="
+                word-break: break-word;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
               @click="handleNewClick(item)"
             >
               {{ item.title }}
@@ -53,11 +56,11 @@
                     text-overflow: ellipsis;
                   "
                 >
-                  {{item.summary}}
+                  {{ item.summary }}
                 </div>
               </template>
               <div slot="content">
-                {{item.summary}}
+                {{ item.summary }}
               </div>
             </n-tooltip>
           </div>
@@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch, nextTick, ref } from "vue";
 import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
-import axios from 'axios'
+import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -117,80 +120,85 @@ const state = reactive({
   currentPage: 1, //当前页码
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.filterNewsData.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
   // state.filterNewsData = state.newsData;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.filterNewsData, () => {
+watch(
-  nextTick(() => {
+  () => state.filterNewsData,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
     pageSize: 10,
     timeStart: state.selectedValue
-      ? state.selectedValue === 'all_years'
+      ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
         if (state.currentPage === 1) {
-          state.filterNewsData = res.data.data?.data || []
+          state.filterNewsData = res.data.data?.data || [];
         } else {
           state.filterNewsData = [
             ...state.filterNewsData,
             ...(res.data.data?.data || []),
-          ]
+          ];
         }
         if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true
+          state.hasMore = true;
         } else {
-          state.hasMore = false
+          state.hasMore = false;
         }
       }
     }
-  })
+  });
-}
+};
 
 const handleFilter = () => {
   // 筛选逻辑
@@ -227,16 +235,16 @@ watch(
   () => [state.selectedValue, state.inputValue],
   () => {
     // handleFilter();
-    state.currentPage = 1
+    state.currentPage = 1;
-    getPressReleasesDisplay()
+    getPressReleasesDisplay();
   }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
   // handleFilter();
-  state.currentPage = 1
+  state.currentPage = 1;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -252,15 +260,15 @@ const handleNewClick = (item) => {
 //加载更多数据
 const doLoadMore = () => {
   if (!state.hasMore || state.loading) {
-    return
+    return;
   }
   // console.log('触底了')
-  state.loading = true
+  state.loading = true;
-  state.currentPage++
+  state.currentPage++;
   getPressReleasesDisplay().finally(() => {
-    state.loading = false
+    state.loading = false;
-  })
+  });
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -309,4 +317,12 @@ const doLoadMore = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -1,12 +1,9 @@
 <template>
   <div class="press-releases-page">
     <n-infinite-scroll :distance="0" @load="doLoadMore">
-      <main
+      <main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 285px">
-        class="p-[80px] mx-auto"
-        style="max-width: 100vw; min-width: 285px;"
-      >
         <div class="title mb-[24px]">
-          {{ t('press_releases.title') }}
+          {{ t("press_releases.title") }}
         </div>
         <div class="search-container">
           <n-select
@@ -23,13 +20,8 @@
             clearable
             :font-size="72"
           />
-          <n-button
+          <n-button @click="handleSearch" class="search-button" :font-size="72">
-            type="primary"
+            {{ t("press_releases.search.button") }}
-            @click="handleSearch"
-            class="search-button"
-            :font-size="72"
-          >
-            {{ t('press_releases.search.button') }}
           </n-button>
         </div>
         <div v-for="(item, idx) in state.filterNewsData" :key="idx">
@@ -37,7 +29,14 @@
             <div class="news-item-date">{{ item.date }}</div>
             <div
               class="news-item-title text-[#0078d7] cursor-pointer"
-              style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
+              style="
+                word-break: break-word;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
               @click="handleNewClick(item)"
             >
               {{ item.title }}
@@ -60,11 +59,11 @@
                     text-overflow: ellipsis;
                   "
                 >
-                  {{item.summary}}
+                  {{ item.summary }}
                 </div>
               </template>
               <div slot="content">
-              {{item.summary}}
+                {{ item.summary }}
               </div>
             </n-tooltip>
           </div>
@@ -79,7 +78,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch, nextTick, ref } from "vue";
 import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
-import axios from 'axios'
+import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -124,80 +123,85 @@ const state = reactive({
   currentPage: 1, //当前页码
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.filterNewsData.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
   // state.filterNewsData = state.newsData;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.filterNewsData, () => {
+watch(
-  nextTick(() => {
+  () => state.filterNewsData,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
     pageSize: 10,
     timeStart: state.selectedValue
-      ? state.selectedValue === 'all_years'
+      ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
         if (state.currentPage === 1) {
-          state.filterNewsData = res.data.data?.data || []
+          state.filterNewsData = res.data.data?.data || [];
         } else {
           state.filterNewsData = [
             ...state.filterNewsData,
             ...(res.data.data?.data || []),
-          ]
+          ];
         }
         if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true
+          state.hasMore = true;
         } else {
-          state.hasMore = false
+          state.hasMore = false;
         }
       }
     }
-  })
+  });
-}
+};
 
 const handleFilter = () => {
   // 筛选逻辑
@@ -234,16 +238,16 @@ watch(
   () => [state.selectedValue, state.inputValue],
   () => {
     // handleFilter();
-    state.currentPage = 1
+    state.currentPage = 1;
-    getPressReleasesDisplay()
+    getPressReleasesDisplay();
   }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
   // handleFilter();
-  state.currentPage = 1
+  state.currentPage = 1;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -259,15 +263,15 @@ const handleNewClick = (item) => {
 //加载更多数据
 const doLoadMore = () => {
   if (!state.hasMore || state.loading) {
-    return
+    return;
   }
   // console.log('触底了')
-  state.loading = true
+  state.loading = true;
-  state.currentPage++
+  state.currentPage++;
   getPressReleasesDisplay().finally(() => {
-    state.loading = false
+    state.loading = false;
-  })
+  });
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -346,4 +350,12 @@ const doLoadMore = () => {
   color: #333;
   line-height: 1.6;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="press-releases-page">
     <n-infinite-scroll :distance="0" @load="doLoadMore">
-      <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px);">
+      <main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
         <div class="title mb-[20px]">
-          {{ t('press_releases.title') }}
+          {{ t("press_releases.title") }}
         </div>
         <div class="search-container">
           <n-select
@@ -17,12 +17,8 @@
             :placeholder="t('press_releases.search.placeholder')"
             class="search-input"
           />
-          <n-button
+          <n-button @click="handleSearch" class="search-button w-[120px]">
-            type="primary"
+            {{ t("press_releases.search.button") }}
-            @click="handleSearch"
-            class="search-button w-[120px]"
-          >
-            {{ t('press_releases.search.button') }}
           </n-button>
         </div>
         <div v-for="(item, idx) in state.filterNewsData" :key="idx">
@@ -30,7 +26,14 @@
             <div class="news-item-date">{{ item.date }}</div>
             <div
               class="news-item-title text-[#0078d7] cursor-pointer"
-              style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
+              style="
+                word-break: break-word;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
               @click="handleNewClick(item)"
             >
               {{ item.title }}
@@ -53,11 +56,11 @@
                     text-overflow: ellipsis;
                   "
                 >
-                {{item.summary}}
+                  {{ item.summary }}
                 </div>
               </template>
               <div slot="content">
-                {{item.summary}}
+                {{ item.summary }}
               </div>
             </n-tooltip>
           </div>
@@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
 import { reactive, onMounted, watch, nextTick, ref } from "vue";
 import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
-import axios from 'axios'
+import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -117,80 +120,85 @@ const state = reactive({
   currentPage: 1, //当前页码
 });
 
-const titleRefs = ref([])
+const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
-  if (el) titleRefs.value[idx] = el
+  if (el) titleRefs.value[idx] = el;
-}
+};
 
 const checkAllTitleOverflow = () => {
   state.filterNewsData.forEach((item, idx) => {
-    const el = titleRefs.value[idx]
+    const el = titleRefs.value[idx];
     if (!el) {
-      item.showTooltip = false
+      item.showTooltip = false;
-      return
+      return;
     }
-    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
+    item.showTooltip =
-  })
+      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-}
+  });
+};
 
 onMounted(() => {
   // state.filterNewsData = state.newsData;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
 
   nextTick(() => {
-    checkAllTitleOverflow()
+    checkAllTitleOverflow();
-  })
+  });
-})
+});
 
-watch(() => state.filterNewsData, () => {
+watch(
-  nextTick(() => {
+  () => state.filterNewsData,
-    checkAllTitleOverflow()
+  () => {
-  })
+    nextTick(() => {
-}, { deep: true })
+      checkAllTitleOverflow();
+    });
+  },
+  { deep: true }
+);
 
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
   let params = {
     query: state.inputValue,
     page: state.currentPage,
     pageSize: 10,
     timeStart: state.selectedValue
-      ? state.selectedValue === 'all_years'
+      ? state.selectedValue === "all_years"
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
-  }
+  };
   // console.log(params)
   axios.post(url, params).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
+          item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
-            month: 'short',
+            month: "short",
-            day: 'numeric',
+            day: "numeric",
-            year: 'numeric',
+            year: "numeric",
-          })
+          });
-        })
+        });
         if (state.currentPage === 1) {
-          state.filterNewsData = res.data.data?.data || []
+          state.filterNewsData = res.data.data?.data || [];
         } else {
           state.filterNewsData = [
             ...state.filterNewsData,
             ...(res.data.data?.data || []),
-          ]
+          ];
         }
         if (state.filterNewsData.length < (res.data.data?.total || 0)) {
-          state.hasMore = true
+          state.hasMore = true;
         } else {
-          state.hasMore = false
+          state.hasMore = false;
         }
       }
     }
-  })
+  });
-}
+};
 
 const handleFilter = () => {
   // 筛选逻辑
@@ -227,16 +235,16 @@ watch(
   () => [state.selectedValue, state.inputValue],
   () => {
     // handleFilter();
-    state.currentPage = 1
+    state.currentPage = 1;
-    getPressReleasesDisplay()
+    getPressReleasesDisplay();
   }
 );
 
 const handleSearch = () => {
   // 手动触发筛选（保留这个函数以保持兼容性）
   // handleFilter();
-  state.currentPage = 1
+  state.currentPage = 1;
-  getPressReleasesDisplay()
+  getPressReleasesDisplay();
   // console.log("筛选结果:", state.filterNewsData);
 };
 
@@ -252,15 +260,15 @@ const handleNewClick = (item) => {
 //加载更多数据
 const doLoadMore = () => {
   if (!state.hasMore || state.loading) {
-    return
+    return;
   }
   // console.log('触底了')
-  state.loading = true
+  state.loading = true;
-  state.currentPage++
+  state.currentPage++;
   getPressReleasesDisplay().finally(() => {
-    state.loading = false
+    state.loading = false;
-  })
+  });
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -309,4 +317,12 @@ const doLoadMore = () => {
   padding: 20px 16px;
   border-radius: 4px;
 }
+.search-button {
+  background: #ff7bac;
+  color: #fff;
+  &:hover {
+    background: #ff7bac;
+    color: #fff;
+  }
+}
 </style>

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

@@ -1,19 +1,31 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-import {useStockQuote} from '@/store/stock-quote/index.js'
+import { useStockQuote } from "@/store/stock-quote/index.js";
-const {getStockQuate,stockQuote,formatted}=useStockQuote()
+const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
-getStockQuate()
+getStockQuate();
 </script>
 
 <template>
-
+  <main
-  <main ref="main" class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl">
+    ref="main"
+    class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl"
+  >
     <!-- 左侧大号价格 -->
-    <section class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl">
+    <section
-      <div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl"
-      <div class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px">NASDAQ: <span class="text-black">FIEE</span></div>
+    >
+      <div
+        class="text-8xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
+      >
+        ${{ stockQuote.price }}
+      </div>
+      <div
+        class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px"
+      >
+        NASDAQ: <span class="text-black">FIEE</span>
+      </div>
       <div class="text-gray-500">{{ formatted }}</div>
     </section>
     <!-- 右侧信息卡片 -->
@@ -24,9 +36,14 @@ getStockQuate()
       </div>
       <div class="info-card">
         <div class="text-base text-gray-400">% Change</div>
-        <div class="text-3xl font-bold" 
+        <div
-        :class="stockQuote.change?.includes('-') ? 'text-green-500' :  'text-red-500'">
+          class="text-3xl font-bold"
-          {{ stockQuote.change }}</div>
+          :class="
+            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
+          "
+        >
+          {{ stockQuote.change }}
+        </div>
       </div>
       <div class="info-card">
         <div class="text-base text-gray-400">Day's Range</div>
@@ -46,19 +63,17 @@ getStockQuate()
       </div>
     </section>
   </main>
-
 </template>
 
 <style scoped lang="scss">
 /* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
 .glass-card {
   backdrop-filter: blur(16px);
-  background: rgba(255,255,255,0.6);
+  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255,255,255,0.3);
+  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;
 }
 </style>
-

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

@@ -1,19 +1,29 @@
 <script setup>
-import {useStockQuote} from '@/store/stock-quote/index.js'
+import { useStockQuote } from "@/store/stock-quote/index.js";
-const {getStockQuate,stockQuote,formatted}=useStockQuote()
+const { getStockQuate, stockQuote, formatted } = useStockQuote();
 
-getStockQuate()
+getStockQuate();
 </script>
 
 <template>
   <main
     ref="main"
-    class="flex pt-100px flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
+    class="flex pt-100px flex-col md:flex-row justify-center items-center gap-32 rounded-3xl"
   >
     <!-- 左侧大号价格 -->
-    <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
+    <section
-      <div class="text-9xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl"
-      <div class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px">NASDAQ: <span class="text-black">FIEE</span></div>
+    >
+      <div
+        class="text-9xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
+      >
+        ${{ stockQuote.price }}
+      </div>
+      <div
+        class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px"
+      >
+        NASDAQ: <span class="text-black">FIEE</span>
+      </div>
       <div class="text-gray-500">{{ formatted }}</div>
     </section>
     <!-- 右侧信息卡片 -->
@@ -27,9 +37,14 @@ getStockQuate()
         <!-- <div class="text-3xl font-bold" 
         :class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
           {{ stockQuote.change?.join('') }}</div> -->
-          <div class="text-3xl font-bold" 
+        <div
-          :class="stockQuote.change?.includes('-') ? 'text-green-500' :  'text-red-500'">
+          class="text-3xl font-bold"
-          {{ stockQuote.change }}</div>
+          :class="
+            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
+          "
+        >
+          {{ stockQuote.change }}
+        </div>
       </div>
       <div class="info-card">
         <div class="text-lg text-gray-400">Day's Range</div>
@@ -55,11 +70,11 @@ getStockQuate()
 /* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
 .glass-card {
   backdrop-filter: blur(16px);
-  background: rgba(255,255,255,0.6);
+  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255,255,255,0.3);
+  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;
 }
-</style>
+</style>

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

@@ -1,15 +1,27 @@
 <script setup>
-import { useStockQuote } from '@/store/stock-quote/index.js';
+import { useStockQuote } from "@/store/stock-quote/index.js";
-const { getStockQuate, stockQuote ,formatted} = useStockQuote();
+const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 </script>
 
 <template>
-  <main class="min-h-60vh flex flex-col items-center justify-start  px-2 py-5 pt-500px">
+  <main
+    class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px"
+  >
     <!-- 价格卡片 -->
-    <section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
+    <section
-      <div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5"
-      <div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">FIEE</span></div>
+    >
+      <div
+        class="text-4xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
+      >
+        ${{ stockQuote.price }}
+      </div>
+      <div
+        class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px"
+      >
+        NASDAQ: <span class="text-black">FIEE</span>
+      </div>
       <div class="text-gray-500 text-60px">{{ formatted }}</div>
     </section>
     <!-- 信息卡片列表 -->
@@ -21,9 +33,14 @@ getStockQuate();
       <div class="info-card">
         <div class="text-xs text-gray-400">% Change</div>
 
-        <div class="text-lg font-bold" 
+        <div
-        :class="stockQuote.change?.includes('-') ? 'text-green-500' :  'text-red-500'">
+          class="text-lg font-bold"
-          {{ stockQuote.change }}</div>
+          :class="
+            stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
+          "
+        >
+          {{ stockQuote.change }}
+        </div>
       </div>
       <div class="info-card">
         <div class="text-xs text-gray-400">Day's Range</div>
@@ -48,14 +65,14 @@ getStockQuate();
 <style scoped>
 .glass-card {
   backdrop-filter: blur(10px);
-  background: rgba(255,255,255,0.92);
+  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(200,200,255,0.18);
+  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);
+  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

@@ -1,19 +1,30 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-import { useStockQuote } from '@/store/stock-quote/index.js';
+import { useStockQuote } from "@/store/stock-quote/index.js";
-const { getStockQuate, stockQuote ,formatted} = useStockQuote();
+const { getStockQuate, stockQuote, formatted } = useStockQuote();
 getStockQuate();
 </script>
 
 <template>
-
   <main ref="main">
-    <main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
+    <main
+      class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px"
+    >
       <!-- 价格卡片 -->
-      <section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
+      <section
-        <div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+        class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6"
-        <div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">FIEE</span></div>
+      >
+        <div
+          class="text-5xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
+        >
+          ${{ stockQuote.price }}
+        </div>
+        <div
+          class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px"
+        >
+          NASDAQ: <span class="text-black">FIEE</span>
+        </div>
         <div class="text-gray-500 text-70px">{{ formatted }}</div>
       </section>
       <!-- 信息卡片列表 -->
@@ -24,9 +35,16 @@ getStockQuate();
         </div>
         <div class="info-card">
           <div class="text-sm text-gray-400">% Change</div>
-          <div class="text-xl font-bold" 
+          <div
-          :class="stockQuote.change?.includes('-') ? 'text-green-500' :  'text-red-500'">
+            class="text-xl font-bold"
-          {{ stockQuote.change }}</div>
+            :class="
+              stockQuote.change?.includes('-')
+                ? 'text-green-500'
+                : 'text-red-500'
+            "
+          >
+            {{ stockQuote.change }}
+          </div>
         </div>
         <div class="info-card">
           <div class="text-sm text-gray-400">Day's Range</div>
@@ -52,14 +70,14 @@ getStockQuate();
 <style scoped lang="scss">
 .glass-card {
   backdrop-filter: blur(10px);
-  background: rgba(255,255,255,0.92);
+  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(200,200,255,0.18);
+  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);
+  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;
@@ -67,4 +85,3 @@ getStockQuate();
   gap: 4px;
 }
 </style>
-