🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **一、管理入口** 操作路径:网站后台--基础设置--Banner管理; ![1691724413947580.png](https://www.ecoxiu.com/images/202308/1691724413947580.png "1691724413947580.png") 每张Banner的按钮只在当前图片显示。点击对应banner后面的【按钮】可以进入按钮管理页面 ![1691744673827524.png](https://www.ecoxiu.com/images/202308/1691744673827524.png "1691744673827524.png") ## **二、添加Banner按钮** ![1691744873614570.png](https://www.ecoxiu.com/images/202308/1691744873614570.png "1691744873614570.png") 点击添加后,会新增一条按钮配置列,点击后面撤销,可以删除新增的列。 ### **2.1 按钮文字** 添加或编辑Banner按钮时,可自定义按钮标题,如图 ![1691745349872646.png](https://www.ecoxiu.com/images/202308/1691745349872646.png "1691745349872646.png") 展示效果如图 ![1691745427716765.png](https://www.ecoxiu.com/images/202308/1691745427716765.png "1691745427716765.png") ### **2.2 链接** 添加或编辑Banner按钮时,可自定义按钮链接地址,链接地址需要包含http或https,留空前台访问点击时则直接打开访问的当前页面,建议不要给同一张图片同时使用链接地址和按钮链接 ![1691746177697236.png](https://www.ecoxiu.com/images/202308/1691746177697236.png "1691746177697236.png") ### **2.3 打开方式** 添加或编辑Banner按钮时,可自定义按钮链接新窗口打开或原窗口打开 ![1691746252892020.png](https://www.ecoxiu.com/images/202308/1691746252892020.png "1691746252892020.png") ### **2.4 按钮大小** 添加或编辑Banner按钮时,可自定义按钮大小,默认根据按钮文字自适应,编辑单位为px,例:14px; ![1691746383276733.png](https://www.ecoxiu.com/images/202308/1691746383276733.png "1691746383276733.png") ### **2.5 按钮颜色** 添加或编辑Banner按钮时,可自定义按钮背景颜色,默认为模板背景色,如图 ![1691746431906740.png](https://www.ecoxiu.com/images/202308/1691746431906740.png "1691746431906740.png") 背景颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”, 电脑端展示效果如图:背景颜色为:#80CD36 显示为绿色; ![1691746523371016.png](https://www.ecoxiu.com/images/202308/1691746523371016.png "1691746523371016.png") ### **2.6 鼠标经过按钮颜色** 添加或编辑Banner按钮时,可自定义鼠标经过按钮的背景颜色,默认为模板背景色,如图 ![1691746651795672.png](https://www.ecoxiu.com/images/202308/1691746651795672.png "1691746651795672.png") 鼠标经过按钮的背景颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”, 电脑端展示效果如图:背景颜色为:#80CD36 显示为绿色;鼠标经过按钮的背景颜色:#ff6709 显示为橙色; ![1691746723787915.png](https://www.ecoxiu.com/images/202308/1691746723787915.png "1691746723787915.png") ### **2.7 文字大小** 添加或编辑Banner按钮时,可自定义按钮文字大小,字体大小可以自定义输入数字,例如14,则表示字体大小是14px(14像素);一般不需要填写,保持默认就行。 ![1691746812305273.png](https://www.ecoxiu.com/images/202308/1691746812305273.png "1691746812305273.png") ### **2.8 文字颜色** 添加或编辑Banner按钮时,可自定义按钮文字颜色,设置方法同按钮颜色一致,如图 ![1691746896789641.png](https://www.ecoxiu.com/images/202308/1691746896789641.png "1691746896789641.png") 展示效果如图 ![1691747097265226.png](https://www.ecoxiu.com/images/202308/1691747097265226.png "1691747097265226.png") ### **2.9 鼠标经过文字颜色** 添加或编辑Banner按钮时,可自定义按钮文字鼠标经过颜色,设置方法同按钮颜色一致,如图 ![1691747181364083.png](https://www.ecoxiu.com/images/202308/1691747181364083.png "1691747181364083.png") 展示效果如图 ![1691747097265226.png](https://www.ecoxiu.com/images/202308/1691747097265226.png "1691747097265226.png") ### **2.10 显示客户端** 添加或编辑Banner按钮时,可自定义按钮显示客户端 ![1691747242979954.png](https://www.ecoxiu.com/images/202308/1691747242979954.png "1691747242979954.png") **都显示**:电脑、平板和手机端都显示; **电脑端**:电脑和平板端显示; **手机端**:只在手机端显示。 ## **三、编辑Banner** 直接对按钮列表进行编辑,编辑后按保存就可以 ![1691747484119279.png](https://www.ecoxiu.com/images/202308/1691747484119279.png "1691747484119279.png") ## **四、删除Banner按钮** 点击对应banner按钮后面的删除就可以删除单个banner按钮,或者选中需要删除的banner按钮,然后点击:删除; ![1691747309818845.png](https://www.ecoxiu.com/images/202308/1691747309818845.png "1691747309818845.png") ## **五、Banner按钮排序** 点击表格每行空白区域上下拖曳后即可改变排序 ![1691747553109469.png](https://www.ecoxiu.com/images/202308/1691747553109469.png "1691747553109469.png")