全部
常见问题
产品动态
精选推荐

标准版/开源版 移动端自定义主题颜色添加教程

管理 管理 编辑 删除

     前端主题切换功能,用户可以在后台主题设置中自由选择界面主题。这可以帮助不同用户在适合自己视觉和习惯的环境下更好地使用我们的产品。

好看的主题对产品的重要性不限于以下方面:

    1. 提高用户体验。优美简洁的主题设计能给用户带来流畅舒适的使用感受,提升用户粘性。
    2. 彰显品牌格调。主题风格能反映出网站的品牌风格和格调,给用户第一印象。
    3. 吸引新用户。好主题设计能吸引更多新用户好奇心观看,增加网站曝光率。
    4. 帮助内容传达。专业高质的主题设计能更好地展现网站信息和内容的价值,提升传播效果。
    5. 增强用户归属感。个性化的主题可供用户选择,满足差异化需求,提高用户粘性。
    6. 提升运营效率。优化过的主题加载更快,无障碍支持更广泛,有助于网站流量转化。
    7. 建立品牌形象。主题风格代表品牌风格,是网站最直接的品牌传达载体之一。
    8. 帮助推广。优秀主题设计可以吸引更多推广渠道,如设计师交流、招聘网站等。
    9. 提升用户活跃度。简洁舒适的主题能提高用户在网站停留时间和参与度。

     但是由于产品业务的不同,我们内置的主题色彩可能不能完全满足所有用户的需求,今天在这里给大家讲解一下如何添加一套属于自己的主题。

1.后台添加主题可选配置;

0ca80202308281148211309.png

所需要修改文件为:admin/src/pages/setting/themeStyle/index.vue

bb03b202308281150037307.png

添加自己需要的主题名称以及对应的展示效果图片;

2:移动端颜色配置

打开移动端在app.vue文件中,在如下位置添加自己的主题颜色的各项配置;

ca616202308281152285877.png

然后再下方colorChange的接口返回中对主题颜色进行设置生效即可;

50915202308281154083840.png

设置完成测试后,前后台打包发布就可以看到自己心仪的主题啦~

最后希望大家能够设计出自己喜欢的主题搭配,如果您觉得您的搭配非常good,欢迎在回复中进行分享喔~

请登录后查看

徐斗明 最后编辑于2023-09-11 16:16:41

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
排序 默认正序 回复倒序 点赞倒序

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}}

作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
沙发 板凳 地板 {{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
2600
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})

相关推荐

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

微信登录/注册

切换手机号登录

{{ bind_phone ? '绑定手机' : '手机登录'}}

{{codeText}}
切换微信登录/注册
暂不绑定
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 源码下载 CRMEB帮助文档 帮助文档
返回顶部 返回顶部
CRMEB客服