主题一键换色

一、后台设置：（view/admin）

![](/uploads/pro/crmebprov2/20220512/b9d03a5a7cd6e6441b7ad6022bd20c3e.png)

文件路径：\src\pages\setting\themeStyle

![](/uploads/pro/crmebprov2/20220512/a8814effd8ffcf20a537119fdd92090b.png)

例如：添加一个青色主题色调的、增加如下代码

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

对应下面显示的效果图你可以在前台截取，在data里面提前定义，如图：

![](/uploads/pro/crmebprov2/20220512/6a0efbf6d85e4263c66de8665e304694.png)

对应的切换效果定义（将你data里面新定义的添加进去）：

changeColor(e){
        switch(e){
            case 1:
                this.picList = this.picListBule;
                break;
            case 2:
                this.picList = this.picListGreen;
                break;
            case 3:
                this.picList = this.picListRed;
                break;
            case 4:
                this.picList = this.picListPink;
                break;
            case 5:
                this.picList = this.picListOrange;
                break;
            default:
                break
        }
    }

数据配置（后台crmeb1.5\src\pages\system\group）、个人中心也是类似方法（后台crmeb1.5\src\pages\setting\devise）
注意：view/admin 需要重新打包，放入public/admin目录中

二、移动端设置 （view/uni-app）

文件路径：App.vue

定义你的主题色调：

![](/uploads/pro/crmebprov2/20220512/00f5597b1f523f54e5445558bd4d8d13.png)

添加主色调：

![](/uploads/pro/crmebprov2/20220512/41352e3f100d84ce16851bb5694b9f24.png)

说明：
--view-theme：主题色；--view-priceColor：价格色；--view-minorColor和--view-minorColorT：辅助色；--view-bntColor：按钮色；

注：
首先主题色与价格色调定义好，--view-minorColorT色值为主题色的0.1的透明度；
--view-minorColor色值也是在主题色的基础上淡化，--view-bntColor主要用于有左右按钮的，一般右边为主题色，左边按钮为此颜色；

关于砍价列表和砍价详情图片（由于此图片没办法用代码写，需自行添加）：
路径：crmebPro1.5/pages/activity/goods_bargain/index.vue
      crmebPro1.5/pages/activity/goods_bargain_details/index.vue

要是想要用现有的图片也是可以的，目前除了现有的五套对应的图片，在不没有对应图片的前提下，默认的是热情红，你也可以进行修改

例如：

默认（热情红）：
default:
	this.picUrl = picList[2]
	Break

修改（天空蓝）：
default:
	this.picUrl = picList[0]
	break

要是想要修改成最新添加的主题色调，一下为主要做法：
注：我这里面图片是在本地存储，由于图片过大小程序没办法识别，请自行转化为base64或是你也可以储存在服务器，调用线上图片

添加方法：

onLoad里面定义：

![](/uploads/pro/crmebprov2/20220512/6836436976878b44de45a77ce4067a9b.png)

添加定义图片

![](/uploads/pro/crmebprov2/20220512/199c557edeb82ed23d599132d9b8d47f.png)

本页目录