feat(theme): 新增2024毅行主题

src/app.config.ts

@@ -16,7 +16,7 @@ export default {
     "pages/setting/changePassword/index",
     "pages/connect/index",
     "pages/connect/faq/index",
-    "pages/lab/index",
+    "pages/theme/index",
     "pages/freeroom/index",
     "pages/canteenflow/index",
     "pages/announcement/index",

src/components/AppList/AppListItem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="applist-item" @tap="appTaped">
     <view class="icon-wrapper" :style="backgroundColor">
-      <view :class="['iconfont', `icon-${icon}`]" />
+      <view :class="['iconfont', iconClass]" />
     </view>
     <text class="label">
       {{ label }}
@@ -23,6 +23,20 @@ const props = defineProps<{
   require: string,
 }>();
 const { require: requireActive, bg = ref("green"), label, url } = toRefs(props);
+// 主题过渡方案
+const icon = props.icon;
+const themeMode = computed(() => serviceStore.theme.themeMode);
+const iconClass = computed(() => {
+  if (themeMode.value === "walk") {
+    if (icon !== "lessonstable" && icon !== "exam" && icon !== "score") {
+      return "icon-15th-" + icon;
+    } else {
+      return "icon-" + icon;
+    }
+  } else {
+    return "icon-" + icon;
+  }
+});
 
 const isDisabled = ref(false);
 // 之后需要改动，目前zf和oauth的功能是等效的，因此zf和oauth有一个为true即可使用

src/components/Home/index.vue

@@ -34,7 +34,7 @@
       >
         <view
           class="iconfont icon-add"
-          style="font-size: 2rem; font-weight: bolder"
+          style="font-size: 1.3rem; font-weight: bolder"
         />
       </view>
     </view>

src/components/My/index.vue

@@ -81,7 +81,7 @@ const options = computed(() => {
   const data = [
     [
       { title: "绑定", url: "/pages/bind/index", badge: notificationState.my.bind },
-      { title: "主题", url: "/pages/lab/index" }
+      { title: "主题", url: "/pages/theme/index" }
     ],
     [
       { title: "反馈", url: "/pages/connect/index" },

src/components/NavBar/index.vue

@@ -5,7 +5,7 @@
       class="nav-bar-icon-wrapper"
       @tap="nav('home')"
     >
-      <view class="iconfont icon-home" />
+      <view class="iconfont " :class="homeClass" />
       <view class="description">
         首页
       </view>
@@ -18,7 +18,7 @@
       class="nav-bar-icon-wrapper"
       @tap="plusClick"
     >
-      <view class="iconfont icon-applist" />
+      <view class="iconfont " :class="applyClass" />
       <view class="description">
         功能
       </view>
@@ -31,7 +31,7 @@
       class="nav-bar-icon-wrapper"
       @tap="nav('my')"
     >
-      <view class="iconfont icon-user" />
+      <view class="iconfont " :class="personClass" />
       <view class="description">
         我的
       </view>
@@ -76,6 +76,11 @@ const notificationActive = computed(() => {
     my: checkNotification("my", store)
   };
 });
+// 主题过渡方案
+const themeMode = computed(() => serviceStore.theme.themeMode);
+const homeClass = computed(() => themeMode.value === "walk" ? "icon-a-15th-home1" : "icon-home");
+const applyClass = computed(() => themeMode.value === "walk" ? "icon-a-15th-apply1" : "icon-applist");
+const personClass = computed(() => themeMode.value === "walk" ? "icon-a-15th-person1" : "icon-user");
 
 const { pageName } = toRefs(props);
 

src/components/ThemeConfig/index.scss

@@ -37,7 +37,13 @@
 
   background-image: url('~@/assets/photos/background-purple.svg');
 }
-
+// 主题过渡方案
+.theme.walk {
+  --wjh-color-primary-light: var(--wjh-color-red-500);
+  --wjh-color-primary: var(--wjh-color-red-600);
+  --wjh-color-primary-dark: var(--wjh-color-red-700);
+  background-image: url('~@/assets/photos/background-walk.png');
+}
 .background {
   position: fixed;
   display: flex;

src/components/ThemeConfig/index.vue

@@ -2,6 +2,7 @@
   <view
     :class="[themeMode, darkMode]"
     class="background theme"
+    :style="walkStyle"
   >
     <slot />
   </view>
@@ -14,6 +15,18 @@ import { serviceStore } from "@/store";
 import { useDarkMode } from "@/hooks";
 
 const themeMode = computed(() => serviceStore.theme.themeMode);
+// 主题过渡方案
+const walkStyle = computed(() => {
+  if (themeMode.value === "walk" && darkMode.value !== "dark") {
+    return "--wjh-color-background-page: #FAE7D4;background-position: bottom 0 right 120%;  background-size: cover;";
+  } else if (darkMode.value === "dark") {
+    return "--wjh-color-background-page: #121212";
+  } else if (darkMode.value === "light") {
+    return "--wjh-color-background-page: #fefefe; --wjh-color-background-container: #FAFAFAFF";
+  } else {
+    return "";
+  }
+});
 
 const { mode: darkMode } = useDarkMode();
 

src/pages/lab/index.vue → src/pages/theme/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <theme-config class="lab-view background">
+  <theme-config>
     <title-bar title="主题" back-button />
     <scroll-view :scroll-y="true">
       <view class="flex-column">
@@ -57,15 +57,15 @@ import Taro from "@tarojs/taro";
 
 let activeTheme = "";
 const idMap = {};
+// 主题过渡方案
 const nameMap = {
   green: "绿",
   yellow: "黄",
+  walk: "毅行",
   blue: "蓝",
-  purple: "紫",
   pink: "粉"
 };
 const isEmpty = ref(false);
-
 const emptyText = computed(() => {
   return labText.empty;
 });
@@ -74,7 +74,6 @@ const hadThemeList = computed(() => {
 });
 const themeMode = ref(serviceStore.theme.themeMode);
 const currentTab = ref(themeMode);
-
 useRequest(UserService.getUserTheme, {
   manual: false,
   onSuccess: (res) => {

src/style/darkmode/light.scss

@@ -48,7 +48,4 @@
   --wjh-color-purple-700: #{$purple-700};
 
 
-  --wjh-color-pink-500: #{$pink-500};
-  --wjh-color-pink-600: #{$pink-600};
-  --wjh-color-pink-700: #{$pink-700};
 }