概述

系统支持多套主题色彩风格的自由切换。管理后台提供可视化主题配置面板，移动端基于 CSS 自定义属性（CSS Variables）实现动态主题注入。

---

管理后台主题配置 (view/admin)

后台主题切换代码位于 src/pages/setting/themeStyle/index.vue。

扩展新增主题色选项

在模板中新增主题单选按钮项：

<Radio :label="6" border class="box cyan">青色<i class="iconfont iconxuanzhong6"></i></Radio>

预览图与效果配置

在页面的 data 及 changeColor 方法中补充对应的主题配色预览与值映射：

changeColor(val) {
    const themeMap = {
        1: this.picListBlue,
        2: this.picListGreen,
        3: this.picListRed,
        4: this.picListPink,
        5: this.picListOrange,
        6: this.picListCyan  // 新增的青色主题
    };
    this.picList = themeMap[val] || this.picListRed;
}

修改完成后，需执行 npm run build 重新打包后台前端。

---

移动端主题变量配置 (view/uniapp)

移动端核心主题 CSS 变量定义于 App.vue 中的根选择器或全局样式中：

/* 示例：全局主题色彩 CSS 变量 */
:root, page {
  --view-theme: #1890ff;        /* 主题色 */
  --view-priceColor: #ff4949;   /* 价格高亮色 */
  --view-minorColor: #e6f7ff;   /* 浅色辅助背景 */
  --view-minorColorT: rgba(24, 144, 255, 0.1); /* 10% 透明度主题辅助色 */
  --view-bntColor: #1890ff;     /* 按钮主色 */
}

CSS 变量命名与用途

变量名	说明	示例场景
--view-theme	主题色	导航栏、主要标签、激活选中态
--view-priceColor	价格强调色	商品售价、租金金额
--view-minorColor	浅色背景/副色	优惠券底色、标签浅色背景
--view-minorColorT	透明副色	选中描边阴影、微弱高亮
--view-bntColor	操作按钮色	立即下单、确认支付主按钮

页面中引用主题变量

在 .vue 页面样式中直接使用 var() 引用：

.submit-btn {
  background-color: var(--view-theme);
  color: #ffffff;
}

.price-text {
  color: var(--view-priceColor);
}