三、开发第二个页面-AppCube成长地图页

1、创建页面

（1）点击Page后面的加号，添加标准页面

（2）输入页面“标签”和“名称”，点击”添加“按钮

（3）创建完成后进入页面编辑界面

2、素材准备

这里用到的素材在第二步上传图片素材时已经传过，不再重复上传。

3、最外层容器布局

（1）拖放一个”分栏组件“到界面上，按如下截图设置对应的PC端属性和Phone端属性。

（2）设置”分栏组件“内联样式

:root{    max-width: 1280px;    margin-left: auto;    margin-right: auto;}

4、左侧菜单部分界面布局

（1）按如下布局拖放对应组件到界面

（2）设置”栏：col_0“的样式

属性修改：设置移动端配置-底边框不显示：

（3）设置”图片：image_0“的样式

属性修改：选择图片地址：

属性修改：设置图片宽高为30px*30px：

内联样式：

:root{    position: absolute;    width: 51px;    height: 50px;    padding: 10px;    border-right: 1px solid #e4e6f3;}

样式类ivu-image-display：

@media (min-width: 992px) {  .ivu-image-display{    display: none;  }}@media (max-width: 735px) {  .ivu-image-display{    display: inline-block;  }}

（4）设置”容器：container_4“的样式

属性修改：设置水平对齐方式为”中“，

内联样式：

:root{    width:100%;    height: 50px;}

样式类ivu-image-display：与”图片：image_0“共用样式ivu-image-display。

（5）设置”标签：label_0“的样式

属性修改：设置文本内容为”应用魔方 AppCube“。

内联样式：

:root{    display: inline-block;    font-size: 16px;    color: #3b516a;    line-height: 50px;}

（6）设置”图片：image_1“的样式

属性修改：设置图片地址（选择对应的下箭头图标），设置图片宽高为12px*12px。

内联样式：

:root{    display: inline-block;    width: 12px;    height: 12px;    margin-top: 5px;    margin-left: 5px;}

（7）设置”分栏：row_1“的样式

属性修改：设置PC端和Phone端的分栏个数都是1个：

内联样式：

:root{    border-bottom: 1px solid #e4e6f3;    padding-top:0;    padding-bottom:0;    background-color: #F2F5FC;}

样式类ivu-menu-display：

@media (min-width: 992px) {  .ivu-menu-display{    display: block;  }}@media (max-width: 735px) {  .ivu-menu-display{    background-color: white;    position: absolute;    width: 100%;    display: none;  }}

（8）设置”标签：label_1“的样式

属性修改：设置文本内容为”全部文档“

内联样式：

:root{	font-size: 14px;    color: #3d3f43;    line-height: 54px;    padding-left: 20px;	font-weight:700;}

（9）设置”图片：image_2“的样式

属性修改：选择图片地址，修改图片宽高为25px*25px。

内联样式：

:root{    position: absolute;    top: 14px;    right: 20px;}

（10）设置”分栏：row_2“的样式

属性修改：设置PC端和Phone端的分栏个数都是1个：

内联样式：

:root{    border-bottom: 1px solid #e4e6f3;    background-color: #F2F5FC;}

样式类ivu-menu-display：与”分栏：row_1”共用样式ivu-menu-display。

（11）设置“栏：col_4”的样式

内联样式：

:root{	padding-top:10px;}

（12）设置”标签：label_2“的样式

属性修改：设置文本内容为”应用魔方 AppCube“

内联样式：

:root{	font-size: 18px;    color: #3d3f43;    line-height: 20px;    padding-left: 20px;	font-weight:700;}

（13）设置”容器：container_1“的样式

内联样式：

:root{    padding: 0px;    margin: 0 20px;    background-color: transparent;}

（14）设置”输入框：input_0“的样式

属性修改：设置占位符的值为“搜索本产品帮助文档”，设置图标为“search”，图标位置“居右”，最大宽度“100%”

样式类ivu-search-input：

.ivu-search-input{  width: 100%;  height: 40px;}

（15）设置”分栏：row_3“的样式

属性修改：设置PC端和Phone端的分栏个数都是1个：

内联样式：

:root{    padding: 20px;    background-color: #F2F5FC;}

样式类ivu-menu-display：与”分栏：row_1”共用样式ivu-menu-display。

（16）设置”选项树：xtree2_0“的样式

属性修改：设置数据值如下：

[{	"expand": false,	"title": "最新动态"}, {	"expand": false,	"title": "功能总览"}, {	"expand": false,	"title": "产品介绍",	"children": [{		"title": "什么是应用魔方",		"expand": false	}, {		"title": "产品优势",		"expand": false	}, {		"title": "应用场景",		"expand": false	}, {		"title": "应用模板",		"expand": false	}, {		"title": "功能特性",		"expand": false,		"children": [{			"title": "前端开发能力",			"expand": false,			"children": [{				"title": "标准页面",				"expand": false			}, {				"title": "高级页面",				"expand": false			}, {				"title": "业务大屏",				"expand": false			}]		}, {			"title": "后端开发能力",			"expand": false,			"children": [{				"title": "对象模型",				"expand": false			}, {				"title": "服务编排",				"expand": false			}, {				"title": "流程编排",				"expand": false			}, {				"title": "脚本",				"expand": false			}, {				"title": "事件",				"expand": false			}]		}, {			"title": "集成开发能力",			"expand": false,			"children": [{				"title": "连接器",				"expand": false			}, {				"title": "数据接入",				"expand": false			}]		}, {			"title": "调测开发能力",			"expand": false,			"children": [{				"title": "日志跟踪",				"expand": false			}, {				"title": "数据调试",				"expand": false			}, {				"title": "前后端调试能力",				"expand": false			}, {				"title": "自动保存机制",				"expand": false			}]		}, {			"title": "通用管理能力",			"expand": false		}]	}, {		"title": "规格说明",		"expand": false	}]}, {	"expand": false,	"title": "用户指南"}, {	"expand": false,	"title": "最佳实践"}, {	"expand": false,	"title": "API参考"}, {	"expand": false,	"title": "常见问题"}, {	"expand": false,	"title": "产品术语"}, {	"expand": false,	"title": "文档下载"}]

内联样式：

:root{    padding: 5px;    color: #3d3f43;    font-size: 14px;    font-weight:400;    font-family:Arial, "Microsoft YaHei", sans-serif;}

样式类ivu-menu-display：与”分栏：row_1”共用样式ivu-menu-display。

至此左侧菜单部分布局完成，总体效果如下：

PC端：

移动端：

5、右侧内容部分界面布局

5.1、右侧最上部导航

（1）按如下布局拖放对应组件到界面

（2）设置“分栏：row_4”的样式

属性修改：设置PC端和Phone端的分栏个数都是1个：

内联样式：

:root{    padding: 0;}

（3）设置“栏：col_8”的样式

属性修改：设置移动端配置-底边框不显示。

内联样式：

:root{    background-color: #F7F8FF;}

（4）设置“面包屑：breadcrumb_0”的样式

属性修改：设置菜单结构如下，设置分隔符为“>”：

内联样式：

:root{    padding: 10px;    opacity:1;}

至此上部导航条设置完成。

5.2、右侧中间介绍

（1）按如下布局拖放对应组件到界面

（2）设置“分栏：row_5”的样式

属性修改：设置PC端和Phone端的分栏个数都是1个：

（3）设置“容器：container_2”的样式

内联样式：

:root{    background-color: transparent;    width:100%;    margin-top:5px;}

样式类ivu-background-image：

.ivu-background-image {    width: 100%;    margin-top: 5px;    background-image: url("//appcube.cn-north-4.huaweicloud.com/default/0000000000lIxrpH3z2u/assets/object/image/17b580e49c4-189acbf4-640d-4579-a837-bc5efd1e1a9b/1.0.0/1662fb339a3ca60c64acb20ab0d16fb3.png");    background-repeat: no-repeat;}

（4）设置“分栏：row_6”的样式

属性修改：设置行布局，如图：

内联样式：

:root{    background-color: transparent;}

（5）设置“栏：col_12”的样式

属性修改：设置移动端配置-底边框为不显示，设置高度为200px。

（6）设置“容器：container_3”的样式

内联样式：

:root{    background-color: transparent;}

样式类ivu-header-font：

@media (min-width: 992px) {  .ivu-header-font{    font-size: 22px;    color: #ffffff;    line-height: 30px;    margin-left: 20px;  }}@media (max-width: 735px) {  .ivu-header-font{    font-size: 22px;    color: #ffffff;    line-height: 30px;    margin-left: 20px;    margin-top: 20px;  }}

（7）设置“标签：label_3”的样式

属性修改：设置文本内容为“应用魔方 AppCube”。

（8）设置“容器：container_4”的样式

属性修改：

内联样式：

:root{    background-color: transparent;}

样式类ivu-content-font：

@media (min-width: 992px) {  .ivu-content-font{    font-size: 16px;    color: #ffffff;    line-height: 24px;    margin-left: 20px;  }}@media (max-width: 735px) {  .ivu-content-font{    font-size: 14px;    color: #ffffff;    line-height: 22px;    margin-left: 20px;    margin-top: 10px;    margin-bottom: 20px;    margin-right: 20px;  }}

（9）设置“标签：label_4”的样式

属性修改：设置文本内容为“应用魔方 AppCube是华为云为行业客户、合作伙伴、开发者量身打造的低代码应用开发平台，提供全场景可视化开发能力和端到端部署能力，可快速搭建行业和大型企业级应用并沉淀复用行业资产，加速行业数字化。”。

（10）设置“容器：container_5”的样式

内联样式：

:root{    background-color: transparent;    margin-left: 20px;    margin-bottom: 0;}

样式类ivu-btn-container：

@media (min-width: 992px) {  .ivu-btn-container{    margin-bottom: 0;  }}@media (max-width: 735px) {  .ivu-btn-container{    margin-bottom: 20px;  }}

（11）设置“按钮：button_2”的样式

属性修改：设置显示名称为“图说AppCube”，类型为“文字按钮”，大小为“小”

内联样式：

:root{    width: 112px;    height: 38px;    color: #FFFFFF;    font-family:Arial, "Microsoft YaHei", sans-serif;    font-size:14px;    line-height:22px;    padding:0;    border-color:#FFFFFF;    border-width:1px;    border-style:solid;    border-radius:2px;    margin-right:20px;}

样式类ivu-btn-auto-margin：

.ivu-btn-auto-margin{  margin-right: 20px;}

（12）设置“按钮：button_3”的样式

属性修改：设置显示名称为“立即使用”，类型为“文字按钮”，大小为“小”

内联样式：

:root{    width: 112px;    height: 38px;    color: #FFFFFF;    font-family:Arial, "Microsoft YaHei", sans-serif;    font-size:14px;    line-height:22px;    padding:0;    border-color:#C7000B;    border-width:1px;    border-style:solid;    border-radius:2px;    margin-left:0;    background-color: #C7000B;}

样式类ivu-btn-auto-margin：与“按钮：button_2”共用样式ivu-btn-auto-margin。

（13）设置“栏：col_13”的样式

属性修改：设置移动端配置-底边框为不显示。

内联样式：

:root{    padding-top:15px;    padding-right:20px;    padding-left:20px;    padding-bottom:15px;}

（14）设置“图片：image_3”的样式

属性修改：选择图片地址，设置图片宽高为100%*100%。

内联样式：

:root{    max-width: 367px;    height:auto;    width:100%;}

（15）设置按钮鼠标悬浮样式

.ivu-btn:hover{  opacity: 0.8;}

至此中间介绍部分设置完成。

5.3、右侧下方成长地图

（1）按如下布局拖放对应组件到界面

说明：该部分所有组件及结构如下图。

下述使用的标签名均以以上截图为准，实际操作过程中标签名称可能与博主的不一致，请自行修改，结构位置一致即可。

（2）设置”容器：container_6“的样式

属性修改：设置水平对齐方式为“中”。

内联样式：

:root{    background-color: transparent;}

（3）设置”标签：label_5“的样式

属性修改：设置文本内容为”成长地图“。

内联样式：

:root{	display: block;}

样式类ivu-czdt-header-font：

@media (min-width: 992px) {  .ivu-czdt-header-font{    font-size: 20px;    color: #252b3a;    line-height: 26px;    margin-top: 32px;    margin-bottom: 10px;    font-weight:700;  }}@media (max-width: 735px) {  .ivu-czdt-header-font{    font-size: 18px;    color: #252b3a;    line-height: 25px;    margin-top: 32px;    margin-bottom: 10px;    font-weight:700;  }}

（4）设置”标签：label_6“的样式

属性修改：设置文本内容为”由浅入深，带您玩转应用魔方 AppCube“。

内联样式：

:root{    font-size: 16px;    color: #666A75;    letter-spacing: 0;    text-align: center;    line-height: 20px;}

（5）设置"栏：col_14"的样式

属性修改：移动端配置-底边框设置为关闭。

说明："栏：col_15"的样式与”栏：col_14“样式一致。

（6）设置"容器：container_7"的样式

内联样式：

:root{    background-color: transparent;    height:54px;    padding-top:0;    padding-bottom:0;}

样式类ivu-title-background-image：

.ivu-title-background-image {    width: 100%;    background-image: url("//appcube.cn-north-4.huaweicloud.com/default/0000000000lIxrpH3z2u/assets/object/image/17b584b211d-47bc3ad0-dbce-4b6d-b9d8-6c2dde1f39f1/1.0.0/372d3cdad0b6cc67052562c8f7c83247.jpg");    background-repeat: no-repeat;}

”容器：container_9“的样式与"容器：container_7“样式一致。

（7）设置”图片：image_4“的样式

属性修改：设置图片地址（直接通过齿轮选择对应图片），设置图片宽高为47px*22px。

内联样式：

:root{    padding-top:16px;    padding-bottom:16px;    width:47px;    display: inline-block;}

”图片：image_5“的样式与”图片：image_4“样式一致。

（8）设置"标签：label_7"的样式

属性修改：文本内容改成”01“。

内联样式：

:root{    color: #FFFFFF;    font-size: 18px;    line-height: 54px;    display: inline-block;    position: absolute;    width: 47px;    text-align: center;    left: 0;}

（9）设置”标签：label_8“的样式

属性修改：文本内容改成”了解“。

内联样式：

:root{    color: #FFFFFF;    font-size: 20px;    line-height: 54px;    display: inline-block;    position: absolute;    text-align: left;    left: 60px;    width:200px;    font-weight:500;}

（10）设置“容器：container_8”的样式

内联样式：

:root{    padding-left:20px;    padding-right:20px;    margin-bottom:0;    padding-bottom:20px;}

（11）设置“容器：container_11”的样式

内联样式：

:root{    padding-left:0;    margin-bottom:10px;    padding-bottom:0;}

样式类ivu-01-container1：

@media (min-width: 992px) {  .ivu-01-container1{    margin-top: 0;    margin-bottom: 15px;    font-size: 14px;    line-height: 22px;    font-weight:500;  }}@media (max-width: 735px) {  .ivu-01-container1{    margin-top: 15px;    margin-bottom: 15px;    font-size: 14px;    line-height: 21px;  }}

（12）设置”标签：label_9“的样式

属性修改：文本内容改成”应用魔方 AppCube是以应用为中心的开发平台。“。

内联样式：

:root{    color: rgba(61,63,67,1);    font-weight:500;}

（13）设置“容器：container_12”的样式

内联样式：

:root{    padding-top:0;    padding-bottom:0;    margin-bottom:10px;}

样式类ivu-01-container2：

@media (min-width: 992px) {  .ivu-01-container2{    margin-bottom: 0;  }}@media (max-width: 735px) {  .ivu-01-container2{    margin-bottom: 15px;  }}

（14）设置”标签：label_10“的样式

属性修改：文本内容改成”产品介绍“。

内联样式：

:root{    font-size: 16px;    color: rgba(61,63,67,1);    line-height: 20px;    margin-bottom: 0px;    font-weight:bold;}

（15）设置“容器：container_13”的样式

内联样式：

:root{    padding-top:0;    padding-bottom:0;}

（16）设置“分栏：row_8”的样式

内联样式：

:root{    padding-bottom:0;    padding-top:0;}

（17）设置“栏：col_16”的样式

属性修改：设置移动端配置-底边框不显示。

“栏：col_17”、“栏：col_18”、“栏：col_19”、“栏：col_20”、“栏：col_21”的配置与“栏：col_16”配置相同。

（18）设置"标签：label_11”的样式

属性修改：设置文本内容为“•”。

样式类ivu-dot：

.ivu-dot{  font-size: 16px;  color: black;  opacity: 0.9;  font-weight:700;}

"标签：label_12”、"标签：label_13”、"标签：label_14”、"标签：label_15”、"标签：label_16”的文本内容和样式与”标签：label_11“一致，均使用样式类ivu-dot。

（19）设置"链接：link_0”的样式

属性修改：设置文本内容为“什么是应用魔方”。

样式类ivu-link：

.ivu-link{  font-size: 14px;  color: #526ecc;  font-weight:400;  margin-left: 10px;}

"链接：link_1”、"链接：link_2”、"链接：link_3”、"链接：link_4”、"链接：link_5”除文本内容不一致外，其他的样式与"链接：link_0”样式一致，均使用样式类ivu-link，对应的文本内容分别为：

链接：link_1：产品优势链接：link_2：应用场景链接：link_3：应用模板链接：link_4：功能特性链接：link_5：规格说明

（20）设置“分栏：row_9”的样式

内联样式：

:root{    padding-bottom:0;    padding-top:0;    margin-top:0;}

“分栏：row_10”的样式与“分栏：row_9”的样式一致。

（21）设置"标签：label_17"的样式

属性修改：文本内容改成”02“。

内联样式ivu-num-left：

:root{    color: #FFFFFF;    font-size: 18px;    line-height: 54px;    display: inline-block;    position: absolute;    width: 47px;    text-align: center;}

样式类：

@media (min-width: 992px) {  .ivu-num-left{    left: 10px;  }}@media (max-width: 735px) {  .ivu-num-left{    left: 0;  }}

（22）设置”标签：label_18“的样式

属性修改：文本内容改成”免费试用与购买“。

内联样式：

:root{    color: #FFFFFF;    font-size: 20px;    line-height: 54px;    display: inline-block;    position: absolute;    width: 200px;    text-align: left;    font-weight:500;}

样式类ivu-title-left：

@media (min-width: 992px) {  .ivu-title-left{    left: 70px;  }}@media (max-width: 735px) {  .ivu-title-left{    left: 60px;  }}

（23）设置“容器：container_10”的样式

内联样式：

:root{    padding-left:20px;    padding-right:20px;    margin-bottom:0;    padding-bottom:20px;}

（24）设置“容器：container_14”的样式

内联样式：

:root{    padding-left:20px;    padding-right:20px;    margin-bottom:0;    padding-bottom:20px;}

样式类ivu-01-container1：与“容器：container_11”共用样式ivu-01-container1。

（25）设置“标签：label_19”的样式

属性修改：设置文本内容为“您可根据需要选择免费试用或者购买商用租户，选择最优的方式。”。

内联样式：

:root{    color: rgba(61,63,67,1);    font-weight:500;}

（26）设置“容器：container_15”的样式

内联样式：

:root{    padding-top:0;    padding-bottom:0;    margin-bottom:5px;}

（27）设置“链接：link_6”的样式

属性修改：设置文本内容为“免费试用”。

内联样式：

:root{    font-size: 16px;    color: #526ecc;    line-height: 22px;    font-weight:600;}

（28）设置“容器：container_16”的样式

内联样式：

:root{    padding-left:0;    padding-bottom:0;    margin-bottom:10px;    padding-top:0;}

样式类ivu-01-container1：与“容器：container_11”共用样式ivu-01-container1。

（29）设置“标签：label_20”的样式

属性修改：设置文本内容为“0元/月，包含10个用户，免费试用。”。

内联样式：

:root{    color: rgba(61,63,67,1);    font-weight:500;}

（30）设置“容器：container_17”的样式

内联样式：

:root{    padding-top:0;    padding-bottom:0;    margin-bottom:5px;}

（31）设置“链接：link_7”的样式

属性修改：设置文本内容为“购买”。

内联样式：

:root{    font-size: 16px;    color: #526ecc;    line-height: 22px;    font-weight:600;}

（32）设置“容器：container_18”的样式

内联样式：

:root{    padding-left:0;    padding-bottom:0;    margin-bottom:10px;    padding-top:0;}

样式类ivu-01-container1：与“容器：container_11”共用样式ivu-01-container1。

（33）设置“标签：label_21”的样式

属性修改：设置文本内容为“专业版：收取费用（39元/用户/月）。提供更多功能和资源，适用于专业开发者。”。

内联样式：

:root{    color: rgba(61,63,67,1);    font-weight:500;}

（34）设置“容器：container_19”的样式

内联样式：

:root{    padding-left:0;    padding-bottom:0;    margin-bottom:10px;    padding-top:0;}

样式类ivu-01-container1：与“容器：container_11”共用样式ivu-01-container1。

（35）设置“标签：label_19”的样式

属性修改：设置文本内容为“专享版：具有物理隔离的运行环境。购买后，运行环境实例发放到租户虚拟私有云中。”。

内联样式：

:root{    color: rgba(61,63,67,1);    font-weight:500;}

6、AppCube成长地图页完成

至此，AppCube成长地图页界面完成，总体效果如下：

PC端：

移动端：

四、配置页面跳转

1、配置首页跳转到成长地图页

（1）在home页面选中“立即使用”按钮，右侧选择“事件”选项卡，点击加号添加按钮事件：

（2）添加动作中按下图选择“页面跳转”：

（3）根据自己情况选择要跳转的页面，此时会提示“复制代码成功”：

（4）回到代码编辑窗口，粘贴代码

（5）修改动作名称，点击创建，即完成页面跳转配置

2、配置成长地图页跳转到首页

成长地图页跳转到首页与上述配置方法一致，自行参照配置即可。