欧轩智能场馆知识库

本文档介绍小程序首页的自定义设计和规范，包括操作路径、组件添加、背景设置、轮播图样式、内容布局、会员卡/教练卡设计、底部导航及案例参考。

为了提高界面的影响速度，强烈建议使用webp格式，该格式支持透明背景、动图等，且高清图片情况下素材是其他1/5左右。

1. 小程序自定义装饰DIY设计

操作路径：【后台】→【场馆管理】→【小程序主题设置】。
可以对小程序首页、门票列表、会员中心、订单中心、进场码和卡票券聚合页和首页弹窗进行设计或修改。
选中【选中首页装饰】，可以添加横幅、公告、快捷入口、卡片和门店信息等不同组件，实现不同的界面效果。

2.小程序首页设计规范

一、首页背景

鼠标点击顶部tabbar，支持设置页面基础颜色和底部导航背景色和文字色。

背景支持定义颜色或者背景图。但不支持从顶部标题栏到内容区域的背景图。

顶部的文字颜色支持白色/黑色选择。

二、轮播图样式

轮播图我们支持五种样式，有尺寸。设计师根据整体自行把握。

样式1：

正常平铺，尺寸：750*336

样式2：

下方元素会压到轮播图上一点点，尺寸：750*496

样式3：

轮播图会压到顶部一点且是圆角左边两边留间隙，尺寸：698*340

样式4：

轮播图会铺满到顶部和下方元素会压到轮播图上一点点，尺寸：750*672

样式5：

轮播图会铺满到顶部和下方元素会压到轮播图上一点点，尺寸：750*672

四、中间栏内容

我们的框架支持一行1列，一行2列，一行3列，一行四列，一行五列，以及公告组件等。

多列内放置图片（支持git动效）。同一行限制宽度，但不限制高度，高度随宽度自适应。多列等分。

1、横幅

一行一列宽度：702px，高度自动匹配

2、公告

可设置文字公告。

3、快捷入口

设置快捷入口支持在图标下开启设置文字。默认不开启，一般可在图片上写上文字。

支持以下尺寸：

一行多列的：

一行两列宽度：340px
一行三列宽度：226px
一行四列：图标形式，44*44px
一行五列：图标形式，30*30px

左右不对称的：

框架支持左一右三、左一右二、左三右一、左二右一的图片

左一右一尺寸：340*396
左三右三尺寸：340*118
左二右二尺寸：340*188

五、会员卡卡片类

1、会员卡的卡片类整个区域背景颜色、线框颜色；具体卡片背景颜色、线框颜色都是可以自定义的；商品名称、商品价格、商品划线价、按钮文字的颜色自定义；按钮颜色的自定义。

2、如有区域背景图的，尺寸为：686*378

3、如有卡片背景图的尺寸为240*274

六、教练卡片类

1、教练的卡片类整个区域背景颜色、线框颜色；具体卡片背景颜色、线框颜色都是可以自定义的；教练名称、教练价格颜色自定义；教练等级按钮颜色文字颜色自定义；标签按钮颜色文字颜色自定义。