🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
系统后台内置了“手机菜单”功能,添加菜单后,如模板支持,则可展示在手机底部,如图,手机底部菜单支持自定义名称、链接、图标和颜色等,可通过手机端底部菜实现拨打电话、客服会话、打开地图、访问自定义链接地址等功能。当网站模板自行设计添加了手机菜单区块,则请保持系统内置的手机菜单数据为空(即系统内置的手机菜单功能失效)。 ![1691810198424869.png](https://www.ecoxiu.com/images/202308/1691810198424869.png "1691810198424869.png") ## **一、管理入口** 操作路径:网站后台--基础设置--手机菜单; ![1691810272938661.png](https://www.ecoxiu.com/images/202308/1691810272938661.png "1691810272938661.png") ## **二、添加手机菜单** ![1691810375837928.png](https://www.ecoxiu.com/images/202308/1691810375837928.png "1691810375837928.png") 点击添加后,会新增一条按钮配置列,点击后面撤销,可以删除新增的列,直接在新增的列里添加内容,添加完后点击下面保存就行。 ### **2.1 文字** 添加或编辑手机菜单时,可自定义标题,如图 ![1691810728250004.png](https://www.ecoxiu.com/images/202308/1691810728250004.png "1691810728250004.png") 展示效果如图 ![1691810865359469.png](https://www.ecoxiu.com/images/202308/1691810865359469.png "1691810865359469.png") ### **2.2 链接** 添加或编辑手机菜单时,可自定义手机菜单链接地址,链接地址需要包含http或https,留空前台访问点击时则直接打开访问的当前页面 ![1691810914913612.png](https://www.ecoxiu.com/images/202308/1691810914913612.png "1691810914913612.png") ### **2.3 图标** 系统内置了三种类型的图标,可根据自己的需要进行选择,点击图标按钮弹出图标选择弹窗,进入图标库后可选择图标,点击需要选择的图标即可选定图标,如图,留空则网站前台则不显示图标。 ![1691811021785919.png](https://www.ecoxiu.com/images/202308/1691811021785919.png "1691811021785919.png") 显示效果如下图 ![1691811532743463.png](https://www.ecoxiu.com/images/202308/1691811532743463.png "1691811532743463.png") ### **2.4 按钮颜色** 添加或编辑手机菜单时,可自定义按钮背景颜色,如图 ![1691811152847550.png](https://www.ecoxiu.com/images/202308/1691811152847550.png "1691811152847550.png") 背景颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”, 电脑端展示效果如图:按钮背景颜色为:#ffffff 显示为白色; ![1691811363313363.png](https://www.ecoxiu.com/images/202308/1691811363313363.png "1691811363313363.png") ### **2.5 文字颜色** 添加或编辑手机菜单时,可自定义文字颜色,如图 ![1691811403236590.png](https://www.ecoxiu.com/images/202308/1691811403236590.png "1691811403236590.png") 文字颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”, 电脑端展示效果如图:文字颜色为:#6c7075 显示为灰色; ![1691811459431621.png](https://www.ecoxiu.com/images/202308/1691811459431621.png "1691811459431621.png") ### **2.6 启用** 可以设置是否开启,如果不开启,哪这个菜单前台就不显示。 ![1691811554716441.png](https://www.ecoxiu.com/images/202308/1691811554716441.png "1691811554716441.png") ## **三、编辑手机菜单** 直接对手机菜单列表进行编辑,编辑后按保存就可以 ![1691811641928709.png](https://www.ecoxiu.com/images/202308/1691811641928709.png "1691811641928709.png") ## **四、删除手机菜单** 点击对应手机菜单后面的删除就可以删除单个手机菜单,或者选中需要删除的手机菜单,然后点击:删除,批量删除手机菜单; ![1691811774307191.png](https://www.ecoxiu.com/images/202308/1691811774307191.png "1691811774307191.png") ## **五、手机菜单排序** 点击表格每行空白区域上下拖曳后即可改变排序 :-: ![1691811792312906.png](https://www.ecoxiu.com/images/202308/1691811792312906.png "1691811792312906.png")