2.2 页面装修组件

功能说明：

页面装修组件包括基本组件、其他组件。基础组件，包括轮播图、图文导航、标题、魔方、商品列表、富文本。其他组件，包括辅助空白、辅助线。

 

 

2.2.1 轮播图

功能说明：

轮播图可用于装修图片。可编辑尺寸大小、页码样式。

可添加多张轮播图图片以及对应的链接。若配置了链接，可点击轮播图跳转对应的链接。

链接可配置商品、商品分组、商品分类、营销、常用功能、页面、自定义链接。

轮播图操作：

1、在基础组件中，选择“轮播图”组件。

2、可编辑尺寸大小、标记样式、显示样式、切换动画、轮播图。

3、轮播图可编辑轮播图图片、轮播图跳转链接、链接内容。跳转链接，可选择商品、商品分组、商品分类、营销活动、常用功能、页面、自定义链接。

 

 

2.2.2 图文导航

功能说明：

图文导航，可编辑显示样式、排列方式。

显示样式，用于控制导航一行显示的图标数量，分为一行三个、一行四个、一行五个。

排列方式，用于控制图标超出一行时的显示样式，分为多次换行、一行换页、两行换页。

 

多次换行=若图标超出一行显示则在页面中换行显示；

一行换页=若图标超出一行显示，则在页面中只显示一行，可左右滑动查看所有图标；

两行换页=若图标超出两行显示，则在页面中只显示两行，可左右滑动查看所有图标；

 

可修改背景颜色、导航标题的字体颜色；

 

图文导航操作：

1、在基础组件中，选择“图文导航”组件。

2、可编辑模板样式、排列方式、图文导航、背景颜色、文字颜色。

3、图文导航图可编辑图片、链接。

 

 

 

 

多次换行样式：

 

 

一行换页：

 

 

两行换页：

 

 

2.2.3 标题

 

标题模式，控制显示的标题字段，分为简化、丰富（默认为简化模式）；

样式，控制对其方式，分为样式1、样式2、样式3（默认为样式1）；

图片风格，用于控制主标题左侧的图片，分为显示、隐藏、色块（默认为隐藏）；

 

简化标题模式，只显示主标题，可修改编辑样式、主标题输入框、主标题字体颜色；修改编辑其他内容不影响最终的呈现效果；

丰富标题模式，显示主标题、副标题、查看更多。可修改图片风格、主标题输入框、主标题字体颜色、副标题输入框、副标题字体颜色、查看更多按钮链接；修改编辑其他内容不影响最终的呈现效果；

 

标题样式	可编辑内容	不可编辑内容（编辑了也无法查看效果）
简化	样式、图片风格、主标题、主标题颜色	副标题、副标题颜色、查看更多链接
丰富	图片风格、主标题、主标题颜色、副标题、副标题颜色、查看更多链接	样式

标题组件操作：

1、在基础组件中，选择“标题”组件。

2、可编辑标题模式、样式、图片风格、主标题、副标题、链接、主标题颜色、副标题颜色。

 

 

标题模式-简化，样式1，图片风格-隐藏：

 

 

标题模式-简化，样式1，图片风格-显示：

 

 

标题模式-简化，样式1，图片风格-色块：

 

 

标题模式-简化，样式2，图片风格-隐藏：

 

 

标题模式-简化，样式3，图片风格-隐藏：

 

 

标题模式-丰富，图片风格-色块：

 

 

标题模式-丰富，图片风格-显示：

 

 

标题模式-丰富，图片风格-隐藏：

 

 

2.2.4 魔方

功能说明：

魔方，可编辑模板样式。

模板样式，用于控制该组件的页面布局，包括一行两个、一行三个、一行四个、两行两列、一左两右、一上两下。

支持修改魔方图片、链接。选择了样式后，在布局中可查看对应魔方的图片尺寸，需要在布局中点击对应魔方进行编辑。

魔方组件操作：

1、在基础组件中，选择“魔方”组件。

2、可编辑模板样式、布局、魔方编辑内容。魔方可编辑图片、链接、链接内容。

 

 

 

一行两列样式：

 

 

一行三列样式：

 

 

一行四列：

 

 

两行两列：

 

 

一左两右：

 

 

一上两下：

 

 

2.2.5商品列表

功能说明：

商品列表，可添加商品进行展示。可编辑列表样式、商品样式、显示内容、商品来源、显示商品数量、组件背景颜色。

列表样式，用于控制商品列表样式，分为小图两列、详细列表两种样式（默认小图两列）。

商品样式，用于控制商品展示卡片的样式，分为卡片样式1（卡片有圆角）、卡片样式2（卡片为直角）（默认卡片样式1）。

显示内容，可控制商品列表中显示的内容，包括SPU商品名称、商品价格、购物车图标、角标（默认全部都显示）。

商品来源，商品来源分为三种，分别为商品分类、商品分组、手动选择（默认选择商品分类）。

商品数量，可选择4个、6个、8个（默认选择4个）。

组件背景色，可编辑修改。

商品列表组件操作：

1、在基础组件中，选择“商品列表”组件。

2、可编辑列表样式、商品样式、显示内容、商品来源、商品数量、背景颜色。商品来源分为，商品分类、商品分组、手动选择。

 

 

 

列表样式-小图两列，卡片样式2-直角：

 

 

列表样式-详细列表，商品样式-卡片样式1：

 

 

2.2.6 富文本

功能说明：

显示一个富文本，可对该区域进行编辑。

富文本组件操作：

1、在基础组件中，选择“富文本”组件。

2、可编辑背景颜色、富文本编辑区域。

 

 

 

2.2.7 辅助空白

功能说明：

显示一个辅助空白，可对该区域的高度和背景颜色进行编辑。

富文本组件操作：

1、在基础组件中，选择“辅助空白”组件。

2、可编辑背景颜色、辅助空白的区域高度。

 

 

 

2.2.8 辅助线

功能说明：

显示一个辅助空白，可对该区域的高度和背景颜色进行编辑。

富文本组件操作：

1、在基础组件中，选择“辅助空白”组件。

2、可编辑线条样式、线条样式、线条颜色、背景颜色。