crmeb单商户pro1.5一键换色

在原有的五套主题色调上增加:

一、后台设置:

crmeb单商户pro1.5一键换色_第1张图片

路径:crmeb1.5\src\pages\setting\themeStyle

crmeb单商户pro1.5一键换色_第2张图片

例如:添加一个青色主题色调的

青色

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

crmeb单商户pro1.5一键换色_第3张图片

对应的切换效果定义(将你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)

二、移动端设置:

路径:crmebPro1.5/App.vue

定义你的主题色调:

crmeb单商户pro1.5一键换色_第4张图片

添加主色调:

crmeb单商户pro1.5一键换色_第5张图片

说明:

--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里面定义:

crmeb单商户pro1.5一键换色_第6张图片

添加定义图片

crmeb单商户pro1.5一键换色_第7张图片

你可能感兴趣的:(vue.js)