企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
1、装修列表用于装修首页的样式,对首页进行diy的装修,首先我们需要新建一个页面,进行页面的装修 ![](https://box.kancloud.cn/45cbd6257b00eb30c1d7029a6e3ede42_1886x923.png) 2、新建了页面,我们就进入到了首页装修的页面 ![](https://box.kancloud.cn/f2385db34186f04a02037122d0cadc84_1920x874.png) 3、接下来就可以开始添加基础的组件了,首先我们添加一个公告,我们可以设置它的边距,还有背景的颜色,以及文字的颜色。在右下角还可以设置它的图标和公共的内容 ![](https://box.kancloud.cn/8bd4c40ba38dbd63b35eef442ec8122a_1913x864.png) 4、添加一个搜索框,搜索框主要用与前端拿来搜索商品,我们可以在右侧的菜单栏设置搜索框的颜色、背景颜色、文字的颜色,可以设置它的边角样式椭圆、圆形、直角。然后就是文字的位置,可以设置居中或者居左。最后就是默认的文字,这个默认的文字就是显示,搜索框的提示内容。 ![](https://box.kancloud.cn/ea7e14dc3ef4928a9ccd89999a3f3969_1920x870.png) 5、添加一个富文本,富文本主要用于添加文字和图片,右侧的菜单栏可以设置富文本的背景颜色,和它的四周边距,可以在右侧的文本框内添加文字,或者图片。 ![](https://box.kancloud.cn/1407137dc29809a03193173bf1990658_1909x812.png) 6、添加一个导航按钮,右侧菜单栏可以设置文字的颜色,和背景颜色,也可以设置按钮的形状如:直角、圆角、圆形。也能设置每行显示的按钮数量,每行可以显示3、4、5个按钮的数量。最后就是设置按钮的文字,图片,以及连接,进入连接选着页面可以旋转自己需要的连接。导航栏的按钮最大个数为10个。 ![](https://box.kancloud.cn/93801153d21f08fd918a982eb6be9e99_1912x966.png) ![](https://box.kancloud.cn/738577204136e9be464aefb6cd02cd29_1915x887.png) 7、添加列表导航,作用是也是用于导航。右侧菜单设置它的样式,可以设置图片和文字,也可以单独只要文字。设置边角样式,直角和圆形。设置它的周围边距,最后添加图片文字,以及连接。 ![](https://box.kancloud.cn/5e85ecfb63dc10cd6af90e999b702666_1913x876.png) ![](https://box.kancloud.cn/94399882c6b529801c78f966908e8de4_1918x834.png) 8、添加图片轮播,右侧菜单设置它的边角样式圆、椭圆、直角、椭圆加下标。设置按钮的形状居左、居中、居右。最后设置轮播的图片和连接,建议图片宽度750,高度200-950,支持jpg、png。要求一组内图片高度必须完全一致。 ![](https://box.kancloud.cn/44d1cef0ceeb5b1e2ae1f1c89736e937_1920x861.png) ![](https://box.kancloud.cn/f6862b32e4512d6524829814dd212e81_1919x877.png) 9、添加单列图片,右侧菜单设置背景的颜色,上下左右的边距,然后添加图片和连接,图片宽度750,高度200-950,支持jpg、png。 ![](https://box.kancloud.cn/5ca6b8399a0da1ad4d783ffe8d53f9f2_1914x878.png) ![](https://box.kancloud.cn/7005e18736d986750360b4ac27f6cc94_1920x875.png) 10、添加商品魔方,右侧的菜单设置魔方的样式,选着自己需要的商品魔方大小,然后设置图片,在设置好图片对应的连接,最后可以调节一下图片的间隙。 ![](https://box.kancloud.cn/062ef80a3a0cd176a2dcdef8201b741a_1908x885.png) 11、介绍辅助组建,首先我们添加一个辅助线,用于在两个组件中间,明显的区分出两个组件,同样在右侧的菜单栏设置辅助线的背景和线的颜色,风格可以设置实线、点状、虚线。可以设置线的高度(粗细),最后设置上下左后的边距。 ![](https://box.kancloud.cn/eb0b9711a39c4ad889ca648d087a169b_1918x831.png) 12、添加辅助空白,也是用于页面的美化和组件的区分,右侧菜单可以设置背景的颜色,和空白的高度。 ![](https://box.kancloud.cn/8fc72ff9335d358f3796b6e21e90071c_1916x878.png) 13、添加标题栏,右侧菜单可以设置标题的主标题和副标题,设置他们的文字和字体颜色。 ![](https://box.kancloud.cn/7fb147839b3d9af6969f1a0ffe115744_1920x880.png) 14、添加音频播放,右侧菜单设置选择音频文件,添加文字,和文字的背景色,还可以选着不同的风格现在有默认的四种风格。 ![](https://box.kancloud.cn/3884788b94ff07962d8c50ddf9a47423_1920x745.png) ![](https://box.kancloud.cn/ddc8711758f1ad632dbb245b20ada805_1915x890.png) 15、添加视频播放,右侧菜单选着视频文件,选着封面的图片,也可以选择视频的连接,可以调整视频的比例,现有16:9和4:3和1:1这三个默认的比例。 ![](https://box.kancloud.cn/54108d78d27a3bd05af3ab02756b6481_1911x881.png) ![](https://box.kancloud.cn/81516a70457c506ce10fb2afb58758cb_1912x777.png) 17、添加弹窗广告,点击会弹出一个弹框,可以设置是否开启广告,广告的图片,图片的连接,关闭按钮和按钮的位置设置。 ![](https://box.kancloud.cn/e24c1568f52147acd8e46631c2c1c337_1917x864.png) 18、介绍商品组件,添加一个商品,右侧菜单可以手动添加商品的连接,可以设置标签的开启或者关闭,上下左右的边距,也能设置商品的风格,现在有默认的5种风格可以选择。 ![](https://box.kancloud.cn/5c51dfeaafdd92b69edf3e60e9b489c0_1916x867.png) ![](https://box.kancloud.cn/ee811cb4b0e084d3dbd11c6e884039a0_1920x817.png) ![](https://box.kancloud.cn/331efc84149d20f84a76db4c65fa1463_1920x977.png) 19、添加一个优惠券,右侧菜单可以添加选择要显示在前端的优惠券,也可以设置上下的边距。 ![](https://box.kancloud.cn/ceae278f85588687bd1e7aea4334e90d_1918x909.png) ![](https://box.kancloud.cn/3e55ce3b5074441691e0fdab2743ee5d_1917x881.png) 20、添加一个拼团,右侧菜单可以选择添加拼团的商品连接,也可以修改风格样式,现有默认两个风格 ![](https://box.kancloud.cn/84f41355300f12b7eb4cacaddc6a5021_1918x878.png) ![](https://box.kancloud.cn/248a6b7a8075dc720fc6d9f8d3d91fbb_1920x887.png) 21、添加一个抽奖,右侧菜单添加抽奖的链接。 ![](https://box.kancloud.cn/75c1fac867a0bcfbef667df345cc70f3_1919x869.png) 22、添加一个秒杀,右侧菜单栏可以设置秒杀的主题,可以选择秒杀商品的连接,现有两种默认的秒杀风格。 ![](https://box.kancloud.cn/de31b96a624b66ad89a1b45fcacf8905_1920x871.png) ![](https://box.kancloud.cn/1e67a9527d067535f71dc2ea0b74aa02_1918x814.png)