【伸手党福利】【第一弹】jeecg-boot前端主要更改位置(网站标题栏图标、logo、登录后的logo、显示的标题文字、用户头像)

51 篇文章 26 订阅

【伸手党请光看标题】

网站标题栏图标

位置
ant-design-vue-jeecg\public\index.html

1、index.html标题在head第9行替换掉,然后复制ico到/public

  <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">

然后将制作好的favicon.ico(一般是1616,最大是3232,否则有浏览器不兼容)放到
\ant-design-vue-jeecg\public
目录下(index.html的同级目录)

在这里插入图片描述
分析:
通过截图可以看到,第9行将logo.png设置为了图标,但是实际上很难刷新到。
这样更改后Chrome浏览器会将第10行优先执行,(第9行删不删都行了)
这个文件是登录前的加载文件,修改ui的时候记得改。
在这里插入图片描述

2、第8行改标题,261行左右,改加载页面。

在这里插入图片描述
在这里插入图片描述

3、src/views/user/Login.vue,51行,手机号登录,109行,更改 其他登陆方式

在这里插入图片描述
在这里插入图片描述


登录页logo

4、复制logo.svg、logo2.svg到\ant-design-vue-jeecg\src\assets文件夹下

5、src\components\layouts\UserLayout.vue第8行、第12行、19行修改

在这里插入图片描述
在这里插入图片描述

另ant-design-vue-jeecg\src\components\layouts\UserLayout.vue:
在这里插入图片描述
对应的图片实际地址:
ant-design-vue-jeecg\src\assets\logo.svg
这个svg的源文件是个png文件(点这里在线png转换成svg
ant-design-vue-jeecg\src\assets\logo.png

这个文件也有登录页的基本内容,改文字需要从这里改。


6、更改src\components\tools\logo.vue第7行

位置:
ant-design-vue-jeecg\src\components\tools\Logo.vue
修改
logo.svg
改为:
logo2.svg
在这里插入图片描述
然后将
\ant-design-vue-jeecg\src\assets下的logo.svg复制为logo2.svg,或者修改svg内容放置再此。

分析:

由于登录logo是透明的,导致大部分logo在蓝色底上很难看,所以重新设定一个logo2.svg,以分别替换。

7、更改第24行,对应登录后左上角,默认最多7个汉字,或14个英文

在这里插入图片描述

8、src/components/page/GlobalHeader.vue更改第20行,对应登录后顶部提示

在这里插入图片描述


另外:
登录后右上角用户头像在
\ant-design-vue-jeecg\src\components\tools\UserMenu.vue
当中,要修改和设定不要去默认的个人中心去,那里的个人设定都只是演示页,没有实际作用。
在这里插入图片描述
在这里插入图片描述

9、src/components/page/GlobalFooter.vue第4行、第14行

在这里插入图片描述


20220928补充:

网页标签后缀修改

/src/components/layouts/TabLayout.vue
168行

在这里插入图片描述

  • 20
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值