style: theme

src/assets/css/base.css

@@ -105,7 +105,6 @@ section {
 
 body {
   line-height: 1;
-  background-color: #f1f1f1;
   font-family: Arial;
 }
 
@@ -133,12 +132,12 @@ table {
 }
 
 a {
-  color: #000;
+  color: var(--black-text-color);
   text-decoration: none;
 }
 
 a:hover {
-  color: #000;
+  color: var(--van-primary-color);
   text-decoration: none;
 }
 

src/components/Breadcrumb/index.vue

@@ -1,61 +1,65 @@
-<template>
-  <div
-    class="breadcrumb"
-    data-aria-viewport-area
-    aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
-  >
-    <span
-      tabindex="0"
-      aria-description="Your Position"
-      style="color: var(--van-primary-color)"
-      >Your Position:&nbsp;</span
-    >
-
-    <RouterLink
-      replace
-      :to="{ name: 'Home' }"
-      tabindex="0"
-      aria-description="Home"
-    >
-      Home>
-    </RouterLink>
-    <RouterLink
-      v-for="item in parents"
-      :key="item.label"
-      replace
-      tabindex="0"
-      :to="item.routeParams"
-      :aria-description="item.label"
-    >
-      {{ item.label }}>
-    </RouterLink>
-    <span tabindex="0" :aria-description="curRoute?.name">
-      {{ curRoute?.name }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { BreadcrumbParent } from "./constants";
-
-defineProps<{
-  parents: BreadcrumbParent[];
-
-  curRoute?: {
-    name: string;
-    [attr: string]: any;
-  };
-}>();
-</script>
-
-<style lang="scss" scoped>
-.breadcrumb {
-  max-width: 1180px;
-  height: 28px;
-  line-height: 28px;
-  font-size: 12px;
-  margin: 0 auto;
-  padding: 10px 0;
-  box-sizing: content-box;
-}
-</style>
+<template>
+  <div
+    class="breadcrumb"
+    data-aria-viewport-area
+    aria-description="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
+  >
+    <span
+      tabindex="0"
+      aria-description="Your Position"
+      style="color: var(--van-primary-color)"
+      >Your Position:&nbsp;</span
+    >
+
+    <RouterLink
+      replace
+      :to="{ name: 'Home' }"
+      tabindex="0"
+      aria-description="Home"
+    >
+      Home>
+    </RouterLink>
+    <RouterLink
+      v-for="item in parents"
+      :key="item.label"
+      replace
+      tabindex="0"
+      :to="item.routeParams"
+      :aria-description="item.label"
+    >
+      {{ item.label }}>
+    </RouterLink>
+    <span tabindex="0" :aria-description="curRoute?.name">
+      {{ curRoute?.name }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { BreadcrumbParent } from "./constants";
+
+defineProps<{
+  parents: BreadcrumbParent[];
+
+  curRoute?: {
+    name: string;
+    [attr: string]: any;
+  };
+}>();
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  max-width: 1180px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+  margin: 0 auto;
+  padding: 10px 0;
+  box-sizing: content-box;
+
+  span {
+    color: var(--black-text-color);
+  }
+}
+</style>

src/components/Layout/index.vue

@@ -249,52 +249,64 @@ const handleSearch = (txt: string) => {
   --topnav-bg-color: rgba(0, 0, 0, 0.8);
   --primary-hover-bg: rgba(204, 0, 3, 0.8);
   --black-text-color: black;
+  --black2-text-color: #101010;
   --gray-text-color: #666;
   --gray2-text-color: #a6a6a6;
   --white-bg: white;
   --white-text-color: white;
+  --page-bg-color: #f1f1f1;
+
   font-family: "SourceHanSans-Regular";
   min-width: 1200px;
+  background-color: var(--page-bg-color);
 
   &.white {
     --topnav-bg-color: white;
     --van-white: black;
     --primary-hover-bg: white;
     --black-text-color: black;
+    --black2-text-color: black;
     --gray-text-color: #666;
     --gray2-text-color: #a6a6a6;
     --white-bg: white;
     --white-text-color: black;
+    --page-bg-color: white;
   }
   &.blue {
     --topnav-bg-color: #00f;
     --van-white: #ff0;
     --primary-hover-bg: #00f;
     --black-text-color: #ff0;
+    --black2-text-color: #ff0;
     --gray-text-color: #ff0;
     --gray2-text-color: #ff0;
     --white-bg: #00f;
     --white-text-color: #ff0;
+    --page-bg-color: #00f;
   }
   &.yellow {
     --topnav-bg-color: #ff0;
     --van-white: black;
     --primary-hover-bg: #ff0;
     --black-text-color: black;
+    --black2-text-color: black;
     --gray-text-color: black;
     --gray2-text-color: black;
     --white-bg: #ff0;
     --white-text-color: black;
+    --page-bg-color: #ff0;
   }
   &.black {
     --topnav-bg-color: black;
     --van-white: #ff0;
     --primary-hover-bg: black;
     --black-text-color: #ff0;
+    --black2-text-color: #ff0;
     --gray-text-color: #ff0;
     --gray2-text-color: #ff0;
     --white-bg: black;
     --white-text-color: #ff0;
+    --page-bg-color: black;
   }
   &-main {
     position: relative;

src/components/PageNav/index.vue

@@ -1,90 +1,90 @@
-<template>
-  <div
-    class="page-nav"
-    data-aria-viewport-area
-    aria-description="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
-  >
-    <ul>
-      <li
-        v-for="(item, index) in list"
-        :key="index"
-        :class="{
-          active: isActive(index, item.name),
-        }"
-        @click="$router.push(item.routeParams)"
-        @keydown.enter.passive="$router.push(item.routeParams)"
-        tabindex="0"
-        aria-label="Link"
-        :aria-description="item.name"
-      >
-        <img :src="item.img" alt="" />
-        <p>
-          {{ item.name }}
-        </p>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { isNumber } from "lodash-unified";
-import type { PageNavListItemType } from "./types";
-
-const props = defineProps<{
-  /**
-   * 导航列表
-   */
-  list: PageNavListItemType[];
-  /**
-   * 当前所在路由名称
-   */
-  curRouteName?: string;
-  /**
-   * 当前所在导航索引，默认通过路由名称判断
-   */
-  activeIndex?: number;
-}>();
-
-const isActive = (idx: number, name: string) => {
-  if (isNumber(props.activeIndex)) {
-    return props.activeIndex === idx;
-  }
-
-  return props.curRouteName === name;
-};
-</script>
-
-<style lang="scss" scoped>
-.page-nav {
-  width: 100%;
-  padding-bottom: 8px;
-  background: url("@/assets/images/Visit/bg_3.png") left bottom repeat-x #f1f1f1;
-  overflow: hidden;
-
-  ul {
-    margin: 0 auto;
-    display: flex;
-    width: 1180px;
-
-    li {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 168px;
-      height: 108px;
-      cursor: pointer;
-
-      &.active {
-        background: url("@/assets/images/Visit/bg_1.jpg") center top no-repeat
-          #f1f1f1;
-      }
-      p {
-        margin-top: 5px;
-        font-size: 14px;
-        line-height: 18px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="page-nav"
+    data-aria-viewport-area
+    aria-description="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
+  >
+    <ul>
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{
+          active: isActive(index, item.name),
+        }"
+        @click="$router.push(item.routeParams)"
+        @keydown.enter.passive="$router.push(item.routeParams)"
+        tabindex="0"
+        aria-label="Link"
+        :aria-description="item.name"
+      >
+        <img :src="item.img" alt="" />
+        <p>
+          {{ item.name }}
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isNumber } from "lodash-unified";
+import type { PageNavListItemType } from "./types";
+
+const props = defineProps<{
+  /**
+   * 导航列表
+   */
+  list: PageNavListItemType[];
+  /**
+   * 当前所在路由名称
+   */
+  curRouteName?: string;
+  /**
+   * 当前所在导航索引，默认通过路由名称判断
+   */
+  activeIndex?: number;
+}>();
+
+const isActive = (idx: number, name: string) => {
+  if (isNumber(props.activeIndex)) {
+    return props.activeIndex === idx;
+  }
+
+  return props.curRouteName === name;
+};
+</script>
+
+<style lang="scss" scoped>
+.page-nav {
+  width: 100%;
+  margin-bottom: 8px;
+  overflow: hidden;
+  box-shadow: 0px 1px 10px var(--gray2-text-color);
+
+  ul {
+    margin: 0 auto;
+    display: flex;
+    width: 1180px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 168px;
+      height: 108px;
+      cursor: pointer;
+
+      &.active {
+        box-shadow: inset 0 5px 10px var(--gray2-text-color);
+      }
+      p {
+        margin-top: 5px;
+        font-size: 14px;
+        line-height: 18px;
+        color: var(--black-text-color);
+      }
+    }
+  }
+}
+</style>

src/views/Events/detail.scss

@@ -17,7 +17,7 @@
   }
   &-hd {
     display: flex;
-    background-color: #f4f4f4;
+    background-color: var(--page-bg-color);
 
     &__info {
       flex: 1;

src/views/Exhibitions/Detail/components/Overview.vue

@@ -145,7 +145,7 @@ defineExpose({
         margin-top: 24px;
         font-size: 18px;
         line-height: 26px;
-        color: #1f1d1d;
+        color: var(--black2-text-color);
       }
     }
     &-hd {
@@ -188,7 +188,10 @@ defineExpose({
         content: "";
         display: block;
         height: 50px;
-        background-image: linear-gradient(hsla(0, 0%, 100%, 0.4), #fff);
+        background-image: linear-gradient(
+          hsla(0, 0%, 100%, 0.4),
+          var(--white-bg)
+        );
       }
       div {
         cursor: pointer;

src/views/Exhibitions/Detail/index.scss

@@ -7,9 +7,8 @@
     object-fit: cover;
   }
   &-breadcrumb {
-    padding-bottom: 8px;
-    background: url("@/assets/images/Visit/bg_3.png") left bottom repeat-x
-      #f1f1f1;
+    margin-bottom: 8px;
+    box-shadow: 0px 1px 10px var(--gray2-text-color);
   }
   .container {
     margin-top: 35px;
@@ -51,6 +50,7 @@
     line-height: 38px;
     text-align: center;
     font-weight: bold;
+    background: var(--page-bg-color);
     cursor: pointer;
   }
 }

src/views/JoinSupport/Volunteer/detail.vue

@@ -32,7 +32,7 @@ const detail = JoinSupport.Volunteer.find(
 <style lang="scss" scoped>
 .volunteer-detail {
   padding-bottom: 100px;
-  color: #333;
+  color: var(--black2-text-color);
 
   h1 {
     padding-top: 20px;

src/views/JoinSupport/index.scss

@@ -1,11 +1,7 @@
 .join-support {
-  background: white;
+  background: var(--white-bg);
   overflow: hidden;
 
-  .page-nav {
-    background-color: white;
-  }
-
   &-banner {
     margin-top: -60px;
     display: block;

src/views/LearnEngage/Detail/index.scss

@@ -52,7 +52,7 @@
       :deep(p) {
         margin-bottom: 10px;
         line-height: 20px;
-        color: #1f1d1d;
+        color: var(--black2-text-color);
         font-size: 14px;
       }
     }

src/views/Use/index.scss

@@ -65,7 +65,7 @@
     width: 160px;
     height: 38px;
     font-size: 16px;
-    background: #f1f1f1;
+    background: var(--page-bg-color);
     font-weight: bold;
     color: var(--black-text-color);
     border: 1px solid var(--black-text-color);

src/views/Visit/Accessibility/index.scss

@@ -1,6 +1,5 @@
 .Visit5 {
   .conten {
-    color: #000;
     width: 1200px;
     font-size: 18px;
     line-height: 26px;

src/views/Visit/AppointmentGuide/index.scss

@@ -5,7 +5,7 @@
     justify-content: space-between;
     margin-bottom: 40px;
     height: 459px;
-    background: #ffffff;
+    background: var(--white-bg);
     box-shadow: 0px 3px 31px 0px rgba(0, 0, 0, 0.1);
     border-radius: 9px;
 
@@ -23,7 +23,7 @@
         margin-bottom: 40px;
         padding-left: 105px;
         font-size: 23px;
-        color: #101010;
+        color: var(--black2-text-color);
         white-space: nowrap;
         font-family: "SourceHanSans-Heavy";
 
@@ -34,7 +34,7 @@
         }
       }
       p {
-        color: #101010;
+        color: var(--black2-text-color);
         font-size: 19px;
         line-height: 33px;
       }

src/views/Visit/Guide/index.scss

@@ -1,6 +1,5 @@
 .Visit4 {
   .conten {
-    color: black;
     width: 1200px;
     font-size: 18px;
     line-height: 26px;

src/views/Visit/Shop/index.scss

@@ -1,6 +1,5 @@
 .Visit6 {
   .conten {
-    color: #000;
     width: 1200px;
     font-size: 18px;
     line-height: 26px;