refactor(theme): 统一主题色变量的使用和设置方式

- 重构主题色设置逻辑，改为响应式计算和监听变量
- 替换手动设置主题色为 CSS 变量 '--them-color' 的统一使用
- 调整景区门票、个人中心、充电服务等页面中主题色相关样式
- 优化自定义样式背景色，改为使用线性渐变和 CSS 变量
- 移除多余的硬编码背景色和相关样式，改用响应式颜色变量
- 保持兼容 H5 平台通过条件编译动态应用主题色

src/App.vue

@@ -8,16 +8,14 @@ onLaunch(() => { })
 // 动态设置主题色 CSS 变量
 // #ifdef H5
 useSysStore().getThirdPartyThemeColor()
-const manualThemeStore = useManualThemeStore()
-watch(
-  () => manualThemeStore.themeVars.colorTheme,
-  (color) => {
-    const themeColor = color || '#9ED605'
-    document.documentElement.style.setProperty('--them-color', themeColor)
-  },
-  { immediate: true },
-)
 // #endif
+const { themeVars } = storeToRefs(useManualThemeStore())
+const themeColor = computed(() => themeVars.value.colorTheme || '#9ED605')
+watch(themeColor, (val) => {
+  // #ifdef H5
+  document.documentElement.style.setProperty('--them-color', val)
+  // #endif
+}, { immediate: true })
 </script>
 
 <style lang="scss">

src/pages/my/index.vue

@@ -46,7 +46,7 @@ function handleGo(item: { name: string, status: string }) {
       title="个人中心" custom-style="background-color: transparent !important;" :bordered="false"
       safe-area-inset-top fixed :z-index="99"
     />
-    <view class="header relative h-408rpx rounded-[18px]">
+    <view class="relative h-408rpx rounded-[18px]" :style="{ background: `linear-gradient( 180deg, var(--them-color) 0%, rgba(255,255,255,0) 100%)` }">
       <view class="absolute bottom-100rpx left-0 box-border w-full flex items-center justify-between pl-48rpx pr-58rpx">
         <template v-if="!token">
           <image :src="`${StaticUrl}/9.png`" alt="" class="h-100rpx w-100rpx" />
@@ -153,10 +153,6 @@ function handleGo(item: { name: string, status: string }) {
 </template>
 
 <style lang="scss" scoped>
-.header {
- background: linear-gradient( 113deg, #F7FFDC 0%, #E0FF8E 25%, #F2FFCE 51%, #E3FF98 83%, #F6FFD6 100%);
-}
-
 .page-class {
   height: calc(100vh - var(--window-top) - 150rpx);
   :deep() {

src/subPack-attractions/attractionsDetail/attractionsDetail.vue

@@ -126,7 +126,7 @@ async function handleMonthChange(e: { year: number, month: number }) {
   <view class="min-h-screen bg-#F5F5F5">
     <wd-navbar
       title="景区门票"
-      :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`"
+      :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, opcity)};`"
       :bordered="false"
       :z-index="9999"
       safe-area-inset-top
@@ -250,7 +250,7 @@ async function handleMonthChange(e: { year: number, month: number }) {
         </view>
       </view>
       <view
-        class="h80rpx w-400rpx flex items-center justify-center rounded-40rpx bg-#9ED605 px80rpx text-28rpx text-#FFF font-semibold"
+        class="h80rpx w-400rpx flex items-center justify-center rounded-40rpx bg-[var(--them-color)] px80rpx text-28rpx text-#FFF font-semibold"
         @click="handleBook"
       >
         立即预定

src/subPack-attractions/commonTab/components/homeList.vue

@@ -53,7 +53,7 @@ function handleClear() {
   <view class="attractions-home-page">
     <wd-navbar
       title="景区门票"
-      :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`"
+      :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, opcity)};`"
       :bordered="false"
       :z-index="9999"
       safe-area-inset-top
@@ -119,7 +119,7 @@ function handleClear() {
             </view>
           </wd-skeleton>
         </scroll-view>
-        <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
+        <wd-loadmore :state="state" :loading-props="{ color: useManualThemeStore().themeVars.colorTheme, size: 20 }" @reload="reload" />
       </view>
     </view>
   </view>

src/subPack-charge/index/index.vue

@@ -24,7 +24,7 @@ const filterOptions = [
   { key: 2, label: '空闲最多', widthClass: '' },
   { key: 3, label: '电费最低', widthClass: '' },
 ]
-
+const { themeVars } = storeToRefs(useManualThemeStore())
 /**
  * 获取充电站列表
  */
@@ -127,9 +127,9 @@ function refund() {
 </script>
 
 <template>
-  <view class="min-h-screen" :style="{ backgroundImage: `linear-gradient(to bottom, ${useManualThemeStore().themeVars.colorTheme || '#9ED605'}, ${hexToRgba(useManualThemeStore().themeVars.colorTheme || '#9ED605', 0)})` }">
+  <view class="min-h-screen" :style="{ backgroundImage: `linear-gradient(to bottom, ${themeVars.colorTheme}, ${hexToRgba(themeVars.colorTheme as string, 0)})` }">
     <wd-navbar
-      title="" :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, opcity)};`" :bordered="false"
+      title="" :custom-style="`background-color: ${hexToRgba(themeVars.colorTheme as string, opcity)};`" :bordered="false"
       :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
     >
       <template #left>
@@ -154,10 +154,10 @@ function refund() {
               <view class="text-32rpx text-#2B303A font-bold">
                 {{ userInfo?.nickName || '暂未登录' }}
               </view>
-              <view v-if="!token" class="text-24rpx text-#9ED605" @click="router.replace({ name: 'smqjh-login' })">
+              <view v-if="!token" class="text-24rpx" @click="router.replace({ name: 'smqjh-login' })">
                 授权登录
               </view>
-              <view v-else class="rounded-8rpx bg-#E9FFAC px12rpx py4rpx text-24rpx text-#9ED605">
+              <view v-else class="rounded-8rpx bg-[var(--them-color)] px12rpx py4rpx text-24rpx text-#fff">
                 {{ userInfo.channelName }}
               </view>
             </view>
@@ -177,7 +177,7 @@ function refund() {
               </view>
             </view>
             <view
-              class="absolute right-[-24rpx] h-44rpx w-120rpx rounded-[22rpx_0_0_22rpx] bg-#9ED605 text-center text-28rpx text-#FFF line-height-[44rpx]"
+              class="absolute right-[-24rpx] h-44rpx w-120rpx rounded-[22rpx_0_0_22rpx] bg-[var(--them-color)] text-center text-28rpx text-#FFF line-height-[44rpx]"
               @click="refund"
             >
               退还
@@ -188,16 +188,16 @@ function refund() {
               <view class="text-28rpx">
                 企业积分
               </view>
-              <view class="mt-16rpx text-40rpx text-#9ED605 font-bold">
+              <view class="mt-16rpx text-40rpx text-[var(--them-color)] font-bold">
                 {{ userAccountInfo?.availablePoints || '0.00' }}
               </view>
             </view>
-            <view class="h-92rpx w-2rpx bg-#9ED605" />
+            <view class="h-92rpx w-2rpx bg-[var(--them-color)]" />
             <view class="text-center">
               <view class="text-28rpx">
                 平台券
               </view>
-              <view class="mt-16rpx text-40rpx text-#9ED605 font-bold">
+              <view class="mt-16rpx text-40rpx text-[var(--them-color)] font-bold">
                 <text class="text-24rpx">
                   ￥
                 </text>{{ userAccountInfo?.couponBalance || '0.00' }}
@@ -267,7 +267,7 @@ function refund() {
         </view>
         <!-- 有车辆时显示车牌和管理入口 -->
         <view
-          v-else class="flex items-center gap-50rpx text-26rpx text-#9ED605"
+          v-else class="flex items-center gap-50rpx text-26rpx text-[var(--them-color)]"
           @click="router.push({ name: 'charge-plate-list' })"
         >
           <view>{{ defaultVehicle.licensePlate }}</view>
@@ -382,7 +382,7 @@ function refund() {
 }
 
 .select-item-active {
-  background: #9ED605;
+  background: var(--them-color);
   box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100, 255, 218, 0.26);
   border-radius: 0rpx 16rpx 0rpx 16rpx;
   font-weight: bold;

src/subPack-xsb/commonTab/components/my.vue

@@ -21,12 +21,12 @@ function handleGo(item: { name: string, status: string }) {
 </script>
 
 <template>
-  <view class="page-xsb page-class bg-#F9F9F9 dark:bg-[var(--wot-dark-background)]">
+  <view class="page-class page-xsb bg-#F9F9F9 dark:bg-[var(--wot-dark-background)]">
     <wd-navbar
       title="个人中心" custom-style="background-color: transparent !important;" :bordered="false"
       safe-area-inset-top fixed :z-index="99"
     />
-    <view class="header relative h-408rpx rounded-18px">
+    <view class="relative h-408rpx rounded-18px" :style="{ background: `linear-gradient( 180deg, var(--them-color) 0%, rgba(255,255,255,0) 100%)` }">
       <view class="absolute bottom-100rpx left-0 box-border w-full flex items-center justify-between pl48rpx pr58rpx">
         <template v-if="!token">
           <image :src="`${StaticUrl}/9.png`" alt="" class="h100rpx w100rpx" />
@@ -133,7 +133,5 @@ function handleGo(item: { name: string, status: string }) {
 </template>
 
 <style lang="scss" scoped>
-.header {
- background: linear-gradient( 113deg, #F7FFDC 0%, #E0FF8E 25%, #F2FFCE 51%, #E3FF98 83%, #F6FFD6 100%);
-}
+
 </style>