使用AppCube应用魔方创建AppCube官网页面（PC端+移动端）- 详细开发过程（二）

三、开发第二个页面-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、配置成长地图页跳转到首页

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

容器 应用魔方 AppCube

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。