使用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("http://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("http://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小時內刪除侵權內容。