diff --git a/README.md b/README.md
index a5b607a..bbd1779 100644
--- a/README.md
+++ b/README.md
@@ -149,7 +149,7 @@ LILISHOP 是基于 Spring Boot / Spring Cloud / Vue / Uniapp 开发的 Java 开
 - ✅ 二级分销
 - ✅ 定时任务管理
 - ✅ 服务商品
-- 🔜 主题色管理
+- ✅ 主题色管理
 - 🔜 店铺结算汇总
 - 🔜 支付方式汇总
 - 🔜 结算台账
diff --git a/components/m-buy/goods.vue b/components/m-buy/goods.vue
index 2cb9679..1f2f677 100644
--- a/components/m-buy/goods.vue
+++ b/components/m-buy/goods.vue
@@ -465,12 +465,12 @@ defineExpose({
 }
 
 .buy {
-	background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
+	background-image: linear-gradient(135deg, $main-color, $light-color);
 	box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
 }
 
 .card {
-	background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
+	background-image: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
 	box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
 }
 
diff --git a/pages/cart/coupon/couponDetail.vue b/pages/cart/coupon/couponDetail.vue
index aea60ff..81e89fa 100644
--- a/pages/cart/coupon/couponDetail.vue
+++ b/pages/cart/coupon/couponDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="content">
+  <view :style="themeStyle" class="content">
     <view class="body">
       <view class="top-view">
         <view class="title">{{ coupon.title }}</view>
@@ -28,9 +28,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const coupon = ref<Record<string, any>>({})
 
diff --git a/pages/cart/payment/payOrder.vue b/pages/cart/payment/payOrder.vue
index f244b23..4187744 100644
--- a/pages/cart/payment/payOrder.vue
+++ b/pages/cart/payment/payOrder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div :style="themeStyle" class="wrapper">
     <div class="box">
       <div class="block block-1">
         <image class="img" src="@/pages/cart/static/pay.png" />
@@ -67,14 +67,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, getCurrentInstance, onMounted } from 'vue'
+import { ref, getCurrentInstance, onMounted, computed } from 'vue'
 import { onLoad, onBackPress } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import * as API_Trade from '@/api/trade'
 import { payCallback } from '@/api/members'
-import { unitPrice } from '@/utils/filters.js'
+import { unitPrice } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 
 const routerVal = ref<Record<string, string>>({})
diff --git a/pages/cart/payment/shareOrderGoods.vue b/pages/cart/payment/shareOrderGoods.vue
index e81702b..0aa91a0 100644
--- a/pages/cart/payment/shareOrderGoods.vue
+++ b/pages/cart/payment/shareOrderGoods.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="wrapper" v-if="flag">
+  <view :style="themeStyle" class="wrapper" v-if="flag">
     <div class='goods' v-if="selectedGoods">
       <image class="goods-image" :src="selectedGoods.thumbnail" alt="" />
       <p class="goodsName">{{selectedGoods.goodsName}}</p>
@@ -96,8 +96,10 @@ import shares from '@/components/m-share/index'
 import storage from '@/utils/storage.js'
 import popupGoods from '@/components/m-buy/goods'
 import { unitPrice } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const popupGoodsRef = ref<any>(null)
 const flag = ref(false)
diff --git a/pages/cart/payment/success.vue b/pages/cart/payment/success.vue
index 9b5722b..9d070d1 100644
--- a/pages/cart/payment/success.vue
+++ b/pages/cart/payment/success.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div :style="themeStyle" class="wrapper">
     <div class="pay-wrapper">
       <div class="pay-money">
         ￥{{unitPrice(Number(payPrice)) }}
@@ -25,10 +25,14 @@
 
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import goodsRecommend from '@/components/m-goods-recommend'
-import { unitPrice } from '@/utils/filters.js'
+import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const paymentMethod = ref('')
 const from = ref('')
@@ -110,7 +114,7 @@ function navigateTo(url: string, type?: string) {
   display: flex;
   justify-content: space-between;
   font-size: 24rpx;
-  color: rgba($color: $main-color, $alpha: 0.8);
+  color: var(--theme-primary-70, rgba(255, 60, 42, 0.7));
 }
 
 .pay-box {
@@ -122,7 +126,7 @@ function navigateTo(url: string, type?: string) {
   margin: 80rpx auto 40rpx auto;
   padding: 20rpx;
   border-radius: 20rpx;
-  background: rgba($color: $main-color, $alpha: 0.2);
+  background: var(--theme-primary-20, rgba(255, 60, 42, 0.2));
 
   >h2 {
     margin-top: 20rpx;
@@ -132,7 +136,7 @@ function navigateTo(url: string, type?: string) {
 }
 
 .pay-wrapper {
-  background-image: linear-gradient(90deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
+  background-image: linear-gradient(90deg, $main-color, $light-color, $aider-light-color);
   height: 480rpx;
   position: relative;
   display: flex;
diff --git a/pages/mine/address/add.vue b/pages/mine/address/add.vue
index 326df8b..91293af 100644
--- a/pages/mine/address/add.vue
+++ b/pages/mine/address/add.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="add-address">
+  <view :style="themeStyle" class="add-address">
     <up-form
       :model="form"
       ref="uForm"
@@ -92,8 +92,10 @@ import { addAddress as addAddressApi, editAddress, getAddressDetail } from '@/ap
 import MCity from '@/components/m-city/m-city.vue'
 import uniMap from '@/components/uniMap'
 import permision from '@/js_sdk/wa-permission/permission.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 
 const lightColor = computed(() => store.getters.lightColor)
diff --git a/pages/mine/deposit/index.vue b/pages/mine/deposit/index.vue
index c16cf66..f2902f0 100644
--- a/pages/mine/deposit/index.vue
+++ b/pages/mine/deposit/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="wap">
+  <view :style="themeStyle" class="wap">
     <u-navbar
       title="预存款列表"
       :fixed="true"
@@ -53,9 +53,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { getWalletLog, getUserWallet } from '@/api/members'
-import { unitPrice } from '@/utils/filters.js'
+import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const walletNum = ref(0)
 const swiperCurrent = ref(0)
diff --git a/pages/mine/deposit/operation.vue b/pages/mine/deposit/operation.vue
index cc3b72c..c8e3fbc 100644
--- a/pages/mine/deposit/operation.vue
+++ b/pages/mine/deposit/operation.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="page">
+  <view :style="themeStyle" class="page">
     <u-navbar
       title="余额"
       :auto-back="false"
@@ -39,10 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { getUserWallet } from '@/api/members'
 import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const walletNum = ref(0)
 
diff --git a/pages/mine/deposit/recharge.vue b/pages/mine/deposit/recharge.vue
index a422d62..4495b60 100644
--- a/pages/mine/deposit/recharge.vue
+++ b/pages/mine/deposit/recharge.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="page">
+  <view :style="themeStyle" class="page">
     <view class="form-card">
       <view class="title">充值金额</view>
       <view class="amount-row">
@@ -20,8 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { recharge } from '@/api/members'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const price = ref('')
 const flag = ref(true)
diff --git a/pages/mine/deposit/withdrawApply.vue b/pages/mine/deposit/withdrawApply.vue
index aac633a..e94493b 100644
--- a/pages/mine/deposit/withdrawApply.vue
+++ b/pages/mine/deposit/withdrawApply.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="wap">
+  <view :style="themeStyle" class="wap">
     <u-navbar
       title="提现记录"
       :fixed="true"
@@ -26,10 +26,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { getWithdrawApplyPage, getWithdrawApplyWechatTransferInfo } from '@/api/members'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const loaded = ref(false)
 const params = ref({
diff --git a/pages/mine/deposit/withdrawal.vue b/pages/mine/deposit/withdrawal.vue
index 5907120..0c8dc3e 100644
--- a/pages/mine/deposit/withdrawal.vue
+++ b/pages/mine/deposit/withdrawal.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="page">
+  <view :style="themeStyle" class="page">
     <view class="form-card">
       <view class="field-label">提现类型</view>
       <view class="readonly-value">{{ typeLabel }}</view>
@@ -62,6 +62,10 @@
 import { ref, computed, getCurrentInstance, onMounted } from 'vue'
 import { getUserWallet, withdrawalApply, withdrawalSettingVO } from '@/api/members'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const { proxy } = getCurrentInstance()!
 
diff --git a/pages/mine/distribution/history.vue b/pages/mine/distribution/history.vue
index d91dbec..c1cd720 100644
--- a/pages/mine/distribution/history.vue
+++ b/pages/mine/distribution/history.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="log-list">
+  <view :style="themeStyle" class="log-list">
     <view
       class="log-way"
       v-if="withdrawLogList.length != 0"
@@ -53,14 +53,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { cashLog, getDistributionOrders } from '@/api/distribution'
 import { unitPrice } from '@/utils/filters.js'
 import { assertActiveDistributor } from '@/utils/distributionStatus'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const withdrawLogList = ref<any[]>([])
 const achievementList = ref<any[]>([])
diff --git a/pages/mine/im/index.vue b/pages/mine/im/index.vue
index c865f9f..9bbad17 100644
--- a/pages/mine/im/index.vue
+++ b/pages/mine/im/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="wrapper">
+  <view :style="themeStyle" class="wrapper">
     <u-navbar
       class="my-title"
       title-size="32"
@@ -197,7 +197,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, getCurrentInstance } from 'vue'
+import { ref, nextTick, getCurrentInstance, computed } from 'vue'
 import {
   onLoad,
   onHide,
@@ -215,6 +215,10 @@ import storage from '@/utils/storage.js'
 import { beautifyTime, unitPrice } from '@/utils/filters.js'
 import config from '@/config/config.js'
 import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 // rpx和px的比率
 let l: number
diff --git a/pages/mine/myTracks.vue b/pages/mine/myTracks.vue
index 7c0ad54..0415b9c 100644
--- a/pages/mine/myTracks.vue
+++ b/pages/mine/myTracks.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="myTracks">
+	<view :style="themeStyle" class="myTracks">
 		<u-navbar
 			title="我的足迹"
 			:fixed="true"
@@ -62,8 +62,10 @@ import { useStore } from '@/store'
 import { unitPrice } from '@/utils/filters.js'
 import { myTrackList, deleteHistoryListId } from '@/api/members.js'
 import { getStoreBaseInfo } from '@/api/store.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const isEdit = ref(false)
diff --git a/pages/mine/point/myPoint.vue b/pages/mine/point/myPoint.vue
index d92ce3a..fd9c28a 100644
--- a/pages/mine/point/myPoint.vue
+++ b/pages/mine/point/myPoint.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="content">
+  <view :style="themeStyle" class="content">
     <view class="portrait-box">
       <image src="/static/pointTrade/point_bg_1.png" mode=""></image>
       <image class="point-img" src="/static/pointTrade/tradehall.png" />
@@ -36,12 +36,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { getPointsData, getMemberPointSum } from '@/api/members.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const loadStatus = ref('more')
 const pointList = ref<any[]>([])
diff --git a/pages/mine/set/feedBack.vue b/pages/mine/set/feedBack.vue
index d48ea9a..d5126ad 100644
--- a/pages/mine/set/feedBack.vue
+++ b/pages/mine/set/feedBack.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="feedBack">
+  <view class="feedBack" :style="themeStyle">
     <view class="feedBack-box">
       <view class="box-title">猜你想问</view>
       <view
@@ -54,11 +54,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
 import { feedBack as submitFeedBackApi } from '@/api/members.js'
 import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
 
 const { proxy } = getCurrentInstance()!
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const feedbackForm = reactive({
 	type: 'FUNCTION',
diff --git a/pages/mine/set/personMsg.vue b/pages/mine/set/personMsg.vue
index 0dfa321..f7f85fc 100644
--- a/pages/mine/set/personMsg.vue
+++ b/pages/mine/set/personMsg.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="person-msg">
+  <view :style="themeStyle" class="person-msg">
     <view class="head" @click="changeFace">
       <image :src="form.face || '/static/missing-face.png'" mode="aspectFill"></image>
       <view>点击修改头像</view>
@@ -87,6 +87,7 @@ import { saveUserInfo } from '@/api/members.js'
 import { upload } from '@/api/common.js'
 import storage from '@/utils/storage.js'
 import MCity from '@/components/m-city/m-city.vue'
+import { getThemeStyle } from '@/utils/theme'
 
 function parseBirthdayTimestamp(str?: string) {
 	if (!str) return Date.now()
@@ -103,6 +104,7 @@ function formatBirthday(timestamp: number) {
 }
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const userInfo = storage.getUserInfo() || {}
diff --git a/pages/mine/set/securityCenter/bindMobile.vue b/pages/mine/set/securityCenter/bindMobile.vue
index 48e860a..d11f830 100644
--- a/pages/mine/set/securityCenter/bindMobile.vue
+++ b/pages/mine/set/securityCenter/bindMobile.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="box">
+	<view :style="themeStyle" class="box">
 		<view class="box-tips">
 			<h2 class="h2">绑定手机号码</h2>
 			<view class="verification"></view>
@@ -44,15 +44,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { ref, reactive, watch, getCurrentInstance, computed } from 'vue'
 import { onLoad, onReady } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { sendMobile, bindMobile } from '@/api/login'
 import { getUserInfo } from '@/api/members.js'
 import storage from '@/utils/storage.js'
 import MyVerification from '@/components/verification/verification.vue'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 
 const phoneVerified = ref(false)
diff --git a/pages/mine/set/securityCenter/editLoginPassword.vue b/pages/mine/set/securityCenter/editLoginPassword.vue
index 25e6d37..b8c3414 100644
--- a/pages/mine/set/securityCenter/editLoginPassword.vue
+++ b/pages/mine/set/securityCenter/editLoginPassword.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="box">
+	<view :style="themeStyle" class="box">
 		<view class="box-tips">
 			<h2 class="h2">{{ verificationTitle.title }}</h2>
 			<view class="verification">{{ verificationTitle.desc }}</view>
@@ -30,9 +30,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { modifyPass } from '@/api/login'
 import { md5 } from '@/utils/md5.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const verificationTitle = {
 	title: '修改密码',
diff --git a/pages/mine/set/securityCenter/editPassword.vue b/pages/mine/set/securityCenter/editPassword.vue
index b668d6e..15a8bc3 100644
--- a/pages/mine/set/securityCenter/editPassword.vue
+++ b/pages/mine/set/securityCenter/editPassword.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="box">
+	<view :style="themeStyle" class="box">
 		<view class="box-tips">
 			<h2 class="h2">{{ verificationTitle[phoneVerified ? 1 : 0].title }}</h2>
 			<view class="verification">{{ verificationTitle[step].desc }}</view>
@@ -55,15 +55,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { ref, reactive, watch, getCurrentInstance, computed } from 'vue'
 import { onReady } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { isLogin } from '@/utils/filters.js'
 import { sendMobile, resetByMobile, resetPassword } from '@/api/login'
 import { md5 } from '@/utils/md5.js'
-import MyVerification from '@/components/verification/verification.vue'
+import MyVerification from '@/components/verification/verification.vue'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 
 const phoneVerified = ref(false)
diff --git a/pages/mine/set/setUp.vue b/pages/mine/set/setUp.vue
index b54915d..eedc7e5 100644
--- a/pages/mine/set/setUp.vue
+++ b/pages/mine/set/setUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="set-up">
+  <view :style="themeStyle" class="set-up">
     <view class="person" @click="checkUserInfo()">
       <u-image
         width="140rpx"
@@ -39,10 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import config from '@/config/config'
-import { isLogin, tipsToLogin, quiteLoginOut, logoff } from '@/utils/filters.js'
+import { isLogin, tipsToLogin, quiteLoginOut, logoff } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const userImage = config.defaultUserPhoto
 const userInfo = ref<Record<string, any>>({})
diff --git a/pages/mine/signIn.vue b/pages/mine/signIn.vue
index fd034bb..22111eb 100644
--- a/pages/mine/signIn.vue
+++ b/pages/mine/signIn.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="sign-in">
+  <view :style="themeStyle" class="sign-in">
     <view class="date-card">
       <div class="box">
         <div class="circle-box">
@@ -65,9 +65,11 @@
 import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
-import { sign, signTime } from '@/api/point.js'
+import { sign, signTime } from '@/api/point.js'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
 const signAnimating = ref(false)
@@ -226,7 +228,7 @@ page {
   height: 200rpx;
   border-radius: 50%;
   background: $aider-light-color;
-  box-shadow: 0 4rpx 24rpx 0 rgba($color: $aider-light-color, $alpha: 1);
+  box-shadow: 0 4rpx 24rpx 0 $aider-light-color;
   display: flex;
   justify-content: center; //这个是X轴居中
   align-items: center; //这个是 Y轴居中
diff --git a/pages/navigation/search/search.scss b/pages/navigation/search/search.scss
index 268cce0..2562241 100644
--- a/pages/navigation/search/search.scss
+++ b/pages/navigation/search/search.scss
@@ -98,7 +98,7 @@ page {
   }
   > .sort-btn-confim {
     color: #fff;
-    background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
+    background-image: linear-gradient(90deg, $main-color, $light-color, $aider-light-color);
   }
 }
 .uinput {
@@ -328,7 +328,7 @@ page {
   flex-shrink: 0;
   font-size: 28rpx;
   color: #fff;
-  background: linear-gradient(to right, #ff9801, #ff570a);
+  background: linear-gradient(to right, $main-color, $aider-light-color);
   border-radius: 60rpx;
 }
 
diff --git a/pages/navigation/search/searchPage.vue b/pages/navigation/search/searchPage.vue
index 9a9ddf3..979c62e 100644
--- a/pages/navigation/search/searchPage.vue
+++ b/pages/navigation/search/searchPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="content" :class="{ 'content--goods': isShowSeachGoods }">
+	<view class="content" :class="{ 'content--goods': isShowSeachGoods }" :style="themeStyle">
 		<u-navbar
 			:bg-color="navObj.background"
 			:auto-back="false"
@@ -260,9 +260,13 @@ import goodsList from '@/components/m-goods-list/list.vue'
 import { getHotKeywords } from '@/api/home.js'
 import mSearch from '@/components/m-search-revision/m-search-revision.vue'
 import storage from '@/utils/storage'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
 
+// 注入主题色 CSS 变量，商品价格、排序选中态、标签等随之联动
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
 const mSearchRef = ref<any>(null)
 
 const empty = ref(false)
diff --git a/pages/order/afterSales/afterSales.vue b/pages/order/afterSales/afterSales.vue
index 69232f8..d408765 100644
--- a/pages/order/afterSales/afterSales.vue
+++ b/pages/order/afterSales/afterSales.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="content">
+  <view :style="themeStyle" class="content">
     <view class="u-tabs-box">
       <u-tabs
         :list="list"
@@ -204,8 +204,10 @@ import { isECouponOrder } from '@/utils/goodsType.js'
 import { getAfterSaleList, cancelAfterSale } from '@/api/after-sale.js'
 import { getOrderList } from '@/api/order.js'
 import storage from '@/utils/storage'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const list = [
diff --git a/pages/order/afterSales/afterSalesDetail.vue b/pages/order/afterSales/afterSalesDetail.vue
index 7050abc..814879c 100644
--- a/pages/order/afterSales/afterSalesDetail.vue
+++ b/pages/order/afterSales/afterSalesDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="page-wrap">
+  <view :style="themeStyle" class="page-wrap">
     <scroll-view scroll-y class="page-scroll">
       <up-form
         :model="form"
@@ -173,8 +173,10 @@ import { isAppointmentOrder } from '@/utils/goodsType.js'
 import { computePartialRefundPrice } from '@/utils/appointmentGoods.js'
 import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
 import storage from '@/utils/storage.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 const $u = proxy!.$u
 
diff --git a/pages/order/afterSales/afterSalesDetailExpress.vue b/pages/order/afterSales/afterSalesDetailExpress.vue
index 9f02683..e313f81 100644
--- a/pages/order/afterSales/afterSalesDetailExpress.vue
+++ b/pages/order/afterSales/afterSalesDetailExpress.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="mp-iphonex-bottom content">
+  <view :style="themeStyle" class="mp-iphonex-bottom content">
     <up-form
       :model="form"
       ref="uForm"
@@ -81,8 +81,10 @@ import { unitPrice } from '@/utils/filters.js'
 import { getLogistics } from '@/api/address.js'
 import { fillShipInfo } from '@/api/after-sale.js'
 import storage from '@/utils/storage'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const companySelectShow = ref(false)
diff --git a/pages/order/afterSales/afterSalesSelect.vue b/pages/order/afterSales/afterSalesSelect.vue
index b9a7d1c..fcdb9f3 100644
--- a/pages/order/afterSales/afterSalesSelect.vue
+++ b/pages/order/afterSales/afterSalesSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <view class="after-sales-goods-detail-view">
       <view class="header">
         <view>
@@ -58,13 +58,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
 import { getAfterSaleInfo } from '@/api/after-sale'
 import storage from '@/utils/storage'
 // 深链进入时拦截 E_COUPON，后端 apply/save 亦会拒绝
 import { isECouponOrder } from '@/utils/goodsType.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const sn = ref('')
 const sku = ref<any>({})
diff --git a/pages/order/afterSales/applyDetail.vue b/pages/order/afterSales/applyDetail.vue
index 57dd9b7..fe9ed4e 100644
--- a/pages/order/afterSales/applyDetail.vue
+++ b/pages/order/afterSales/applyDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <view v-if="serviceDetail">
+  <view :style="themeStyle" v-if="serviceDetail">
     <view class="after-sales-goods-detail-view">
       <view class="header">
         <view>
@@ -185,7 +185,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import {
@@ -201,8 +201,10 @@ import {
   getAfterSaleLog,
   getAfterSaleReason,
 } from '@/api/after-sale.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const reason = ref('')
 const serviceTypeList: Record<string, string> = {
diff --git a/pages/order/afterSales/applySuccess.vue b/pages/order/afterSales/applySuccess.vue
index 6d55443..d4345a1 100644
--- a/pages/order/afterSales/applySuccess.vue
+++ b/pages/order/afterSales/applySuccess.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <view class="header">
       <u-icon name='checkmark' size="150" color="#ff6b35"></u-icon>
       <view class="success-text">售后申请提交成功</view>
@@ -21,7 +21,12 @@
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">import { computed } from 'vue'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+
 function navigateToAfterSales() {
   uni.redirectTo({
     url: '/pages/order/afterSales/afterSales',
diff --git a/pages/order/cardKey/cardKeyDetail.vue b/pages/order/cardKey/cardKeyDetail.vue
index 4f9a6c6..f5ce879 100644
--- a/pages/order/cardKey/cardKeyDetail.vue
+++ b/pages/order/cardKey/cardKeyDetail.vue
@@ -3,7 +3,7 @@
   @Date 2026-08-03
 -->
 <template>
-  <view class="card-key-page">
+  <view :style="themeStyle" class="card-key-page">
     <view v-if="loading" class="card-key-page__loading">加载中...</view>
     <view v-else-if="errorMessage" class="card-key-page__empty">{{ errorMessage }}</view>
     <view v-else-if="!cardKeyRows.length" class="card-key-page__empty">
@@ -64,6 +64,10 @@ import {
   resolveCardKeyFulfillMessage,
   CARD_KEY_FULFILL_STATUS,
 } from '@/utils/goodsType.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const orderSn = ref('')
 const loading = ref(true)
diff --git a/pages/order/complain/complain.vue b/pages/order/complain/complain.vue
index 9b7caf4..32248e2 100644
--- a/pages/order/complain/complain.vue
+++ b/pages/order/complain/complain.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <!-- 商品模块 -->
     <view class="seller-view">
       <view class="seller-info u-flex u-row-between">
@@ -58,15 +58,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { getOrderDetail } from '@/api/order.js'
 import { getComplainReason, addComplain } from '@/api/after-sale.js'
 import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
-import { unitPrice } from '@/utils/filters.js'
+import { unitPrice } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const orderStatusMap: Record<string, string> = {
   UNDELIVERED: '待发货',
diff --git a/pages/order/complain/complainInfo.vue b/pages/order/complain/complainInfo.vue
index 72cd809..113c129 100644
--- a/pages/order/complain/complainInfo.vue
+++ b/pages/order/complain/complainInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="wrapper">
+  <view :style="themeStyle" class="wrapper">
     <view class="tips">我的投诉信息</view>
     <u-cell-group>
       <u-cell :isLink="false" :value="complainDetail.goodsName" title="投诉商品"></u-cell>
@@ -52,12 +52,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
-import { getComplainDetail, communication } from '@/api/after-sale'
+import { getComplainDetail, communication } from '@/api/after-sale'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const complainId = ref('')
 const complainValue = ref('')
diff --git a/pages/order/complain/complainList.vue b/pages/order/complain/complainList.vue
index 35aeeb9..1c1bd27 100644
--- a/pages/order/complain/complainList.vue
+++ b/pages/order/complain/complainList.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <view class="seller-view" v-for="(item, index) in complaionData" :key="index">
       <view class="seller-info u-flex u-row-between">
         <view class="seller-name">
@@ -41,13 +41,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { unitPrice } from '@/utils/filters.js'
 import { getComplain, clearComplain } from '@/api/after-sale'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const statusData: Record<string, string> = {
   NEW: '新投诉',
diff --git a/pages/order/evaluate/myEvaluate.vue b/pages/order/evaluate/myEvaluate.vue
index 18b7565..8dae4fc 100644
--- a/pages/order/evaluate/myEvaluate.vue
+++ b/pages/order/evaluate/myEvaluate.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <view class="wrap">
       <view class="u-tabs-box">
         <u-tabs
@@ -85,8 +85,10 @@ import { onShow } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { getOrderList } from '@/api/order.js'
 import { getComments } from '@/api/members.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const list = [
diff --git a/pages/order/evaluate/releaseEvaluate.vue b/pages/order/evaluate/releaseEvaluate.vue
index 63e4e02..a958b20 100644
--- a/pages/order/evaluate/releaseEvaluate.vue
+++ b/pages/order/evaluate/releaseEvaluate.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <!-- 遍历出评价商品 -->
     <view>
       <view class="after-sales-goods-detail-view">
@@ -87,13 +87,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { commentsMemberOrder } from '@/api/members.js'
 import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const type = 'textarea'
 const border = false
diff --git a/pages/order/invoice/invoiceDetail.vue b/pages/order/invoice/invoiceDetail.vue
index 7253908..9e28b99 100644
--- a/pages/order/invoice/invoiceDetail.vue
+++ b/pages/order/invoice/invoiceDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="invoice-detail">
+  <view :style="themeStyle" class="invoice-detail">
     <view class="block-item flex-center">
       <view>
         <view>
@@ -75,10 +75,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getReceiptDetail } from '@/api/order.js'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const order = ref<Record<string, any>>({})
 const title_type = ref('')
diff --git a/pages/order/invoice/setInvoice.vue b/pages/order/invoice/setInvoice.vue
index c03ee47..4ca70c6 100644
--- a/pages/order/invoice/setInvoice.vue
+++ b/pages/order/invoice/setInvoice.vue
@@ -1,5 +1,5 @@
 <template>
-  <u-popup closeable border-radius="28" @close="onPopupClose" mode="bottom" height="80%" v-model:show="show">
+  <u-popup :style="themeStyle" closeable border-radius="28" @close="onPopupClose" mode="bottom" height="80%" v-model:show="show">
 
     <div class="wrapper">
       <!-- 发票类型 -->
@@ -94,6 +94,10 @@
 </template>
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 interface InvoiceOption {
   title: string
@@ -481,7 +485,7 @@ function submitInvoice() {
   font-weight: bold;
   color: $main-color;
   border: 2rpx solid $main-color;
-  background: rgba($color: $main-color, $alpha: 0.1);
+  background: var(--theme-primary-10, rgba(255, 60, 42, 0.1));
 }
 .disabled {
   color: #b5b5b6;
diff --git a/pages/order/myOrder.vue b/pages/order/myOrder.vue
index 9c2d0ef..7f926ab 100644
--- a/pages/order/myOrder.vue
+++ b/pages/order/myOrder.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="content">
+	<view class="content" :style="themeStyle">
 		<scroll-view class="navbar" scroll-x :show-scrollbar="false">
 			<view class="navbar-inner">
 				<view v-for="(item, index) in navList" :key="index" class="nav-item"
@@ -138,6 +138,7 @@
 import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
 import { onLoad, onShow, onPullDownRefresh, onBackPress } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
 import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
 import { getOrderList, cancelOrder, confirmReceipt } from '@/api/order.js'
 import { getClearReason, getAfterSaleList } from '@/api/after-sale.js'
@@ -154,6 +155,7 @@ import { appointmentOrderStatusText, getAppointmentAllowOperation } from '@/util
 
 const store = useStore()
 const { proxy } = getCurrentInstance()!
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 const mainColor = computed(() => store.getters.mainColor)
 
diff --git a/pages/passport/login.vue b/pages/passport/login.vue
index e22ca5f..7f50403 100644
--- a/pages/passport/login.vue
+++ b/pages/passport/login.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="wrapper">
+	<div :style="themeStyle" class="wrapper">
 		<div v-if="!wechatLogin" class="login-body">
 			<u-navbar :auto-back="false" :border="false" :fixed="true" :placeholder="true" @leftClick="back"></u-navbar>
 			<div class="login-header">
@@ -145,6 +145,7 @@ import storage from '@/utils/storage.js'
 import wechatH5Login from './wechatH5Login.vue'
 import { md5 } from '@/utils/md5.js'
 import { secrecyMobile } from '@/utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
 
 interface LoginListItem {
 	icon: string
@@ -155,6 +156,7 @@ interface LoginListItem {
 }
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const { proxy } = getCurrentInstance()!
 
 const lightColor = computed(() => store.getters.lightColor)
diff --git a/pages/passport/scannerCodeLoginConfirm.vue b/pages/passport/scannerCodeLoginConfirm.vue
index 684fec6..a27ea1f 100644
--- a/pages/passport/scannerCodeLoginConfirm.vue
+++ b/pages/passport/scannerCodeLoginConfirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view :style="themeStyle" class="container">
     <u-navbar
       title="扫码登录授权"
       :fixed="true"
@@ -32,10 +32,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { forceLogin } from '@/utils/filters.js'
 import { scannerCodeLogin, scannerCodeLoginConfirm } from '@/api/login'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const errorMsg = ref('')
 const token = ref('')
diff --git a/pages/passport/wechatH5Login.vue b/pages/passport/wechatH5Login.vue
index f68258c..abc2499 100644
--- a/pages/passport/wechatH5Login.vue
+++ b/pages/passport/wechatH5Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view :style="themeStyle" class="container">
     <u-navbar :auto-back="false" @leftClick="back" title="公众网页登录"></u-navbar>
     <view class="wx-auth-container">
       <div class="box">
@@ -20,10 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { whetherNavigate } from '@/utils/Foundation'
 import config from '@/config/config'
 import api from '@/config/api.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const projectName = ref(config.name)
 
diff --git a/pages/passport/wechatMPLogin.vue b/pages/passport/wechatMPLogin.vue
index aedf154..d6426be 100644
--- a/pages/passport/wechatMPLogin.vue
+++ b/pages/passport/wechatMPLogin.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="container">
+	<view :style="themeStyle" class="container">
 		<u-navbar :auto-back="false" :fixed="true" :placeholder="true" @leftClick="back" title="小程序登录"></u-navbar>
 		<u-modal v-model:show="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'"
 			:show-confirm-button="false">
@@ -54,8 +54,10 @@ import { whetherNavigate } from '@/utils/Foundation'
 import { getUserInfo } from '@/api/members'
 import storage from '@/utils/storage.js'
 import config from '@/config/config'
+import { getThemeStyle } from '@/utils/theme'
 
 const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const lightColor = computed(() => store.getters.lightColor)
 
 const checked = ref(false)
diff --git a/pages/product/comment.vue b/pages/product/comment.vue
index 8f7518b..32cb6c4 100644
--- a/pages/product/comment.vue
+++ b/pages/product/comment.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="comment">
+  <view :style="themeStyle" class="comment">
     <u-navbar
       title="商品评价"
       :fixed="true"
@@ -83,11 +83,15 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import * as membersApi from '@/api/members.js'
 import configs from '@/config/config'
-import { noPassByName } from '@/utils/filters.js'
+import { noPassByName } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const status = ref('loadmore')
 const userImage = configs.defaultUserPhoto
diff --git a/pages/product/product/popup/address.vue b/pages/product/product/popup/address.vue
index e8f6b5e..9692ea1 100644
--- a/pages/product/product/popup/address.vue
+++ b/pages/product/product/popup/address.vue
@@ -104,10 +104,9 @@ function clickAddress(val: any) {
 <style lang="scss" scoped>
 .light {
   background-image: linear-gradient(
-    135deg,
-    #ffba0d,
-    #ffc30d 69%,
-    #ffcf0d
+    91deg,
+    $light-color 1%,
+    $aider-light-color 99%
   ) !important;
   box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
 }
diff --git a/pages/product/product/promotion/-promotion-coupon.vue b/pages/product/product/promotion/-promotion-coupon.vue
index f53ab06..e239424 100644
--- a/pages/product/product/promotion/-promotion-coupon.vue
+++ b/pages/product/product/promotion/-promotion-coupon.vue
@@ -102,7 +102,7 @@ function getCoupon(item: any, index: number) {
 		display: flex;
 		flex-direction: column;
 		min-height: 230rpx;
-		background: #e9ebfb;
+		background: var(--theme-primary-10, #ffe8e5);
 		margin: 30rpx 0;
 		padding: 10rpx 30rpx;
 		border-radius: 12rpx;
@@ -152,7 +152,7 @@ function getCoupon(item: any, index: number) {
 		.price {
 			width: 33%;
 			justify-content: center;
-			color: #6772e5;
+			color: $price-color;
 			font-size: 40rpx;
 			display: flex;
 			height: 100%;
@@ -196,7 +196,7 @@ function getCoupon(item: any, index: number) {
 				text-align: center;
 				line-height: 56rpx;
 				color: #fff;
-				background: #6772e5;
+				background: $price-color;
 				border-radius: 28rpx;
 				font-size: 24rpx;
 				box-sizing: border-box;
diff --git a/pages/product/product/promotion/group.scss b/pages/product/product/promotion/group.scss
index 9ac74a4..11a4614 100644
--- a/pages/product/product/promotion/group.scss
+++ b/pages/product/product/promotion/group.scss
@@ -89,7 +89,7 @@
 
 .countdown-day {
 	font-size: 22rpx;
-	color: #f71471;
+	color: $price-color;
 	margin-right: 4rpx;
 }
 
@@ -99,13 +99,13 @@
 	padding: 0 4rpx;
 	font-size: 25rpx;
 	color: #fff;
-	background-color: #f71471;
+	background-color: $price-color;
 	border-radius: 4rpx;
 	text-align: center;
 }
 
 .countdown-colon {
 	font-size: 25rpx;
-	color: #f71471;
+	color: $price-color;
 	margin: 0 2rpx;
 }
diff --git a/pages/product/product/style.scss b/pages/product/product/style.scss
index ed623fd..6c849cc 100644
--- a/pages/product/product/style.scss
+++ b/pages/product/product/style.scss
@@ -44,14 +44,14 @@ page {
     display: flex;
     align-items: center;
     > .to-buy {
-        background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
+        background-image: linear-gradient(135deg, $main-color, $light-color);
     }
     > .to-buy-theme {
         background-image: none;
         background: var(--theme-primary, #ff3c2a);
     }
     > .to-store-car {
-        background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
+        background-image: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
     }
     > .to-store-btn {
         flex: 1;
@@ -426,7 +426,7 @@ page {
 .showBox {
     width: 100%;
     height: 90rpx;
-    background: #ff6262;
+    background: $main-color;
     color: #fff;
     padding: 0 20rpx;
 
diff --git a/pages/product/shopList.vue b/pages/product/shopList.vue
index 20088ae..6fd0b69 100644
--- a/pages/product/shopList.vue
+++ b/pages/product/shopList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :style="themeStyle">
     <u-navbar
       :border="false"
       :fixed="true"
@@ -43,10 +43,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import { onReachBottom } from '@dcloudio/uni-app'
 import { getStoreList } from '@/api/store'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const params = reactive({
   pageNumber: 1,
diff --git a/pages/product/shopPage.vue b/pages/product/shopPage.vue
index bbfaaea..6399ecb 100644
--- a/pages/product/shopPage.vue
+++ b/pages/product/shopPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <!-- 楼层装修店铺信息 -->
     <div>
       <!-- 基础店铺：返回 + 搜索；楼层装修无顶部搜索时：仅返回 -->
@@ -243,9 +243,11 @@ import {
   talkIm,
   unitPrice,
 } from '@/utils/filters.js'
-import storage from '@/utils/storage.js'
+import storage from '@/utils/storage.js'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const mainColor = computed(() => store.getters.mainColor)
 
 const pageData = ref<{ list: any[] }>({ list: [] })
@@ -753,7 +755,7 @@ onMounted(() => {
 
     .money {
       width: 45%;
-      color: #fd6466;
+      color: $price-color;
       font-weight: 500;
       text-align: center;
 
@@ -808,34 +810,52 @@ onMounted(() => {
   }
 }
 
+.category {
+  padding: 0 20rpx;
+}
+
 .category-item {
   background: #fff;
-  padding: 22rpx;
-  margin: 20rpx 10rpx;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  margin: 20rpx 0;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
   > .flex {
-    color: #666;
+    color: #333;
+    font-size: 28rpx;
+    font-weight: 500;
+    height: 88rpx;
+    align-items: center;
     justify-content: space-between;
   }
 
   > .child-list {
     display: flex;
-    margin: 20rpx 0;
     flex-wrap: wrap;
+    padding-bottom: 8rpx;
 
     > .child {
-      justify-content: center;
-      margin: 1% 0;
-      display: flex;
-      width: 48%;
+      width: 32%;
+      margin-right: 2%;
+      margin-bottom: 16rpx;
+      height: 64rpx;
+      line-height: 64rpx;
+      padding: 0 12rpx;
       font-size: 24rpx;
-      color: #999;
-      margin-right: 1%;
-      border: 1rpx solid #ededed;
+      color: #666;
+      background: #f7f8fa;
+      border: none;
+      border-radius: 8rpx;
       box-sizing: border-box;
-      height: 70rpx;
       text-align: center;
-      line-height: 70rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
     }
   }
 }
diff --git a/pages/promotion/bargain/list.vue b/pages/promotion/bargain/list.vue
index 3055ff7..0245a14 100644
--- a/pages/promotion/bargain/list.vue
+++ b/pages/promotion/bargain/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div :style="themeStyle" class="page">
     <u-navbar :auto-back="false" @leftClick="back" left-icon-color="#fff" :bg-color="background.backgroundColor" :border="false" >
     </u-navbar>
     <div class="wrapper">
@@ -16,10 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow, onReachBottom } from '@dcloudio/uni-app'
 import { getBargainList } from '@/api/promotions'
 import goodsTemplate from '@/components/m-goods-list/promotion'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const background = ref({
   backgroundColor: 'transparent',
diff --git a/pages/promotion/bargain/log.vue b/pages/promotion/bargain/log.vue
index cf0b42a..3762d2b 100644
--- a/pages/promotion/bargain/log.vue
+++ b/pages/promotion/bargain/log.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="box">
+  <view :style="themeStyle" class="box">
     <view v-if="bargainLog.length != 0" class="list">
       <view v-for="(item,index) in bargainLog" class="card" :key="index">
         <view class="goods-img">
@@ -28,10 +28,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow, onReachBottom } from '@dcloudio/uni-app'
 import { getMineBargainLog } from '@/api/promotions'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const params = ref({
   pageNumber: 1,
diff --git a/pages/promotion/point/pointList.vue b/pages/promotion/point/pointList.vue
index 63ec3f6..3259f4f 100644
--- a/pages/promotion/point/pointList.vue
+++ b/pages/promotion/point/pointList.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="index">
+  <view :style="themeStyle" class="index">
     <user-point />
     <view class="index-head">
       <!-- #ifdef H5 -->
@@ -100,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import {
   onLoad,
   onShow,
@@ -110,7 +110,11 @@ import {
 } from '@dcloudio/uni-app'
 import { getPointsCategory, getPointsGoods } from '@/api/promotions.js'
 import userPoint from './user.vue'
-import { unitPrice } from '@/utils/filters.js'
+import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 interface CategoryTab {
   categoryId: number | string
diff --git a/pages/promotion/seckill.vue b/pages/promotion/seckill.vue
index f42b5e5..6f5b62d 100644
--- a/pages/promotion/seckill.vue
+++ b/pages/promotion/seckill.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="sale">
+	<view :style="themeStyle" class="sale">
 		<u-navbar
 			title="限时抢购"
 			:fixed="true"
@@ -39,11 +39,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow, onUnload } from '@dcloudio/uni-app'
 import { getSeckillTimeLine, getSeckillTimeGoods } from '@/api/promotions.js'
 import Foundation from '@/utils/Foundation.js'
-import goodsTemplate from '@/components/m-goods-list/promotion.vue'
+import goodsTemplate from '@/components/m-goods-list/promotion.vue'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const nav = ref(0)
 const timeLine = ref<any[]>([])
diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue
index b667829..08582a9 100644
--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -961,7 +961,7 @@ page {
 .promotions-list {
   margin-left: 20rpx;
   > .promotions-item-seckill {
-    background: rgba($color: $main-color, $alpha: 0.1);
+    background: var(--theme-primary-10, rgba(255, 60, 42, 0.1));
     font-size: 24rpx;
     color: $main-color;
     display: inline;
diff --git a/pages/tabbar/home/title.vue b/pages/tabbar/home/title.vue
index cd7915d..dcc5c84 100644
--- a/pages/tabbar/home/title.vue
+++ b/pages/tabbar/home/title.vue
@@ -1,6 +1,6 @@
 <template>
-	<view>
-		<view>
+	<view class="msg-page" :style="themeStyle">
+		<view class="msg-tabs">
 			<u-tabs
 				:list="list"
 				:scrollable="false"
@@ -10,186 +10,240 @@
 				:activeStyle="{ color: lightColor }"
 				@change="change"
 			></u-tabs>
-			<view v-if="showLoading" style="width:500rpx;margin:0 auto;text-align: center;height:800rpx;line-height: 800rpx;">
-				<u-loading-icon mode="flower" ></u-loading-icon>
-				<text>正在加载中</text>
-			</view>
-			<u-cell-group v-if="current == 0">
-				<view v-for="(item,index) in lists" :key="index">
-					<u-cell :isLink="false" v-if="item.status =='UN_READY'" style="position: relative;"
-						@click="linkMsgDetail(item)">
-						<template #label>
-							<view style="display: inline-block;
-                width: 100%;
-                height: auto;
-                font-family: Gibson;
-                font-size: 25rpx;
-                word-break: break-all;
-                text-overflow: ellipsis;
-                word-wrap: break-word;
-                white-space: pre-wrap;">
-								<view style="color:black;font-size:30rpx;font-weight:500;">{{item.title}}</view>
-								<view>{{item.content}}</view>
-								<view style="width:400rpx;padding: 10rpx 0;">{{item.createTime}}</view>
-							</view>
-						</template>
-						<!-- <button  style="width:100rpx;height:60rpx;float:right;font-size:20rpx;line-height:60rpx;background:#000000;color:white;">未读</button> -->
-					</u-cell>
-				</view>
-
-			</u-cell-group>
-			<u-cell-group v-if="current == 1">
-				<view v-for="(item,index) in lists" :key="index">
-					<u-cell :isLink="false" v-if="item.status == 'ALREADY_READY'" style="position: relative;"
-						@click="linkMsgDetail(item)">
-						<template #label>
-							<view style="display: inline-block;
-							  width: 100%;
-							  height: auto;
-							  font-family: Gibson;
-							  font-size: 25rpx;
-							  word-break: break-all;
-							  text-overflow: ellipsis;
-							  word-wrap: break-word;
-							  
-							  white-space: pre-wrap;">
-							  <view style="color:black;font-size:30rpx;font-weight:500;">{{item.title}}</view>
-							  <view>{{item.content}}</view>
-							  <view style="width:400rpx;padding: 10rpx 0;">{{item.createTime}}</view>
-							</view>
-						</template>
-						<!-- <button  style="width:100rpx;height:60rpx;float:right;font-size:20rpx;line-height:60rpx;background:#F3F3FA;color:black;">已读</button> -->
-					</u-cell>
-				</view>
-			</u-cell-group>
 		</view>
-
+		<view v-if="showLoading" class="loading-box">
+			<u-loading-icon mode="flower"></u-loading-icon>
+			<text>正在加载中</text>
+		</view>
+		<template v-else>
+			<view class="msg-list" v-if="current == 0">
+				<template v-for="(item, index) in lists" :key="index">
+					<view class="msg-card" v-if="item.status == 'UN_READY'" @click="linkMsgDetail(item)">
+						<view class="msg-card-head">
+							<view class="msg-title">{{item.title}}</view>
+							<view class="msg-dot"></view>
+						</view>
+						<view class="msg-content">{{item.content}}</view>
+						<view class="msg-time">{{item.createTime}}</view>
+					</view>
+				</template>
+				<u-empty marginTop="160" v-if="!lists.length" text="暂无未读消息"></u-empty>
+			</view>
+			<view class="msg-list" v-if="current == 1">
+				<template v-for="(item, index) in lists" :key="index">
+					<view class="msg-card read" v-if="item.status == 'ALREADY_READY'" @click="linkMsgDetail(item)">
+						<view class="msg-card-head">
+							<view class="msg-title">{{item.title}}</view>
+						</view>
+						<view class="msg-content">{{item.content}}</view>
+						<view class="msg-time">{{item.createTime}}</view>
+					</view>
+				</template>
+				<u-empty marginTop="160" v-if="!lists.length" text="暂无已读消息"></u-empty>
+			</view>
+		</template>
 	</view>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import { onShow, onReachBottom } from '@dcloudio/uni-app'
-import { messages, editMessages } from '@/api/message.js'
-import { useStore } from '@/store'
-import { isLogin } from '@/utils/filters.js'
+	import { ref, reactive, computed } from 'vue'
+	import { onShow, onReachBottom } from '@dcloudio/uni-app'
+	import { messages, editMessages } from '@/api/message.js'
+	import { useStore } from '@/store'
+	import { getThemeStyle } from '@/utils/theme'
+	import { isLogin } from '@/utils/filters.js'
 
-const store = useStore()
-const lightColor = computed(() => store.getters.lightColor)
-const mainColor = computed(() => store.getters.mainColor)
-const aiderLightColor = computed(() => store.getters.aiderLightColor)
+	const store = useStore()
+	const themeStyle = computed(() => getThemeStyle(store.state.theme))
+	const lightColor = computed(() => store.getters.lightColor)
+	const mainColor = computed(() => store.getters.mainColor)
+	const aiderLightColor = computed(() => store.getters.aiderLightColor)
 
-const showLoading = ref(true)
-const params = reactive({
-	pageSize: 20,
-	pageNumber: 1,
-	memberId: '',
-	messageId: '',
-	status: 'UN_READY'
-})
-const loadText = {
-	loadmore: '轻轻上拉',
-	loading: '努力加载中',
-	nomore: '实在没有了'
-}
-const list = [
-	{ name: '未读' },
-	{ name: '已读' }
-]
-const current = ref(0)
-const lists = ref<any[]>([])
-const status = ref('loadmore')
+	const showLoading = ref(true)
+	const params = reactive({
+		pageSize: 20,
+		pageNumber: 1,
+		memberId: '',
+		messageId: '',
+		status: 'UN_READY'
+	})
+	const loadText = {
+		loadmore: '轻轻上拉',
+		loading: '努力加载中',
+		nomore: '实在没有了'
+	}
+	const list = [
+		{ name: '未读' },
+		{ name: '已读' }
+	]
+	const current = ref(0)
+	const lists = ref<any[]>([])
+	const status = ref('loadmore')
 
-onShow(() => {
-	getMessage()
-})
+	onShow(() => {
+		getMessage()
+	})
 
-onReachBottom(() => {
-	params.pageNumber++
-	status.value = 'loading'
-	getMessage()
-})
+	onReachBottom(() => {
+		params.pageNumber++
+		status.value = 'loading'
+		getMessage()
+	})
 
-function linkMsgDetail(v: any) {
-	if (v.status == 'UN_READY') {
-		const editParams: any = {}
-		editParams.messageId = v.memberId
-		editMessages(v.id, editParams).then((res: any) => {
+	function linkMsgDetail(v: any) {
+		if (v.status == 'UN_READY') {
+			const editParams: any = {}
+			editParams.messageId = v.memberId
+			editMessages(v.id, editParams).then((res: any) => {
+				if (res.data.success) {
+					lists.value.forEach((item: any, index: number) => {
+						if (item.id == v.id) {
+							lists.value.splice(index, 1)
+						}
+					})
+				}
+			})
+		}
+	}
+
+	/**
+	 * 返回
+	 */
+	function back() {
+		if (getCurrentPages().length == 1) {
+			uni.switchTab({
+				url: '/pages/tabbar/home/index'
+			})
+		} else {
+			uni.navigateBack()
+		}
+	}
+
+	function change(e: any) {
+		const index = typeof e === 'object' && e != null ? e.index : e
+		showLoading.value = true
+		current.value = index
+		if (index == 0) {
+			params.status = 'UN_READY'
+			params.pageNumber = 1
+		} else if (index == 1) {
+			params.status = 'ALREADY_READY'
+			params.pageNumber = 1
+		}
+		lists.value = []
+		getMessage()
+	}
+
+	function getMessage() {
+		params.memberId = isLogin().id
+
+		messages(params).then((res: any) => {
 			if (res.data.success) {
-				console.log(lists.value)
-				lists.value.forEach((item: any, index: number) => {
-					console.log(item)
-					if (item.id == v.id) {
-						lists.value.splice(index, 1)
-					}
+				showLoading.value = false
+				if (res.data.result.records == '') {
+					status.value = 'nomore'
+				}
+				res.data.result.records.forEach((item: any) => {
+					lists.value.push(item)
+					let obj: Record<string, any> = {}
+					lists.value = lists.value.reduce(
+						(cur: any[], next: any) => {
+							// 对象去重
+							if (next.id != undefined) {
+								!obj[next.id] && (obj[next.id] = true) && cur.push(next)
+							}
+							return cur
+						},
+						[]
+					)
 				})
 			}
 		})
 	}
-}
-
-/**
- * 返回
- */
-function back() {
-	if (getCurrentPages().length == 1) {
-		uni.switchTab({
-			url: '/pages/tabbar/home/index'
-		})
-	} else {
-		uni.navigateBack()
-	}
-}
-
-function change(e: any) {
-	const index = typeof e === 'object' && e != null ? e.index : e
-	showLoading.value = true
-	current.value = index
-	if (index == 0) {
-		params.status = 'UN_READY'
-		params.pageNumber = 1
-	} else if (index == 1) {
-		params.status = 'ALREADY_READY'
-		params.pageNumber = 1
-	}
-	lists.value = []
-	getMessage()
-}
-
-function getMessage() {
-	params.memberId = isLogin().id
-
-	messages(params).then((res: any) => {
-		console.log(res)
-		if (res.data.success) {
-			showLoading.value = false
-			if (res.data.result.records == '') {
-				console.log(11111)
-				status.value = 'nomore'
-			}
-			res.data.result.records.forEach((item: any) => {
-				lists.value.push(item)
-				let obj: Record<string, any> = {}
-				lists.value = lists.value.reduce(
-					(cur: any[], next: any) => {
-						// 对象去重
-						if (next.id != undefined) {
-							!obj[next.id] && (obj[next.id] = true) && cur.push(next)
-						}
-						console.log(cur)
-						return cur
-					},
-					[]
-				)
-			})
-		}
-	})
-}
 </script>
+
 <style lang="scss" scoped>
-	.foot {
-		position: fixed;
-		bottom: 0;
+	.msg-page {
+		min-height: 100vh;
+		background: #f7f8fa;
+	}
+
+	.msg-tabs {
+		background: #fff;
+	}
+
+	.loading-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 16rpx;
+		height: 600rpx;
+		color: #999;
+		font-size: 26rpx;
+	}
+
+	.msg-list {
+		padding: 20rpx 24rpx;
+	}
+
+	.msg-card {
+		background: #fff;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		margin-bottom: 20rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+
+		&.read {
+			.msg-title {
+				color: #999;
+				font-weight: 500;
+			}
+
+			.msg-content {
+				color: #aaa;
+			}
+		}
+	}
+
+	.msg-card-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.msg-title {
+		flex: 1;
+		min-width: 0;
+		font-size: 30rpx;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.msg-dot {
+		flex-shrink: 0;
+		width: 16rpx;
+		height: 16rpx;
+		margin-left: 16rpx;
+		border-radius: 50%;
+		background: $main-color;
+	}
+
+	.msg-content {
+		margin-top: 12rpx;
+		font-size: 26rpx;
+		color: #888;
+		line-height: 1.5;
+		word-break: break-all;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.msg-time {
+		margin-top: 16rpx;
+		font-size: 24rpx;
+		color: #bbb;
 	}
 
 	:deep(.u-tabs),
diff --git a/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper.vue b/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper.vue
index b1e2722..978cf82 100644
--- a/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper.vue
+++ b/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper.vue
@@ -222,7 +222,7 @@
 			setData: function (obj) {
 				let that = this;
 				Object.keys(obj).forEach(function (key) {
-					that.$set(that.$data, key, obj[key])
+					that[key] = obj[key]
 				});
 			},
 			getImage: function () {