? ? ? ? 在上節(jié)零基礎(chǔ)入門課程里，從基礎(chǔ)介紹，功能簡(jiǎn)介、項(xiàng)目管理、賬號(hào)管理等方面全面了解了KDPlus平臺(tái)，今天我們從文字和圖片兩個(gè)控件教學(xué)，開(kāi)始2D面板的搭建。

? ? ? ?2D面板是服務(wù)于業(yè)務(wù)的，讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理展現(xiàn)。由于展現(xiàn)的是一個(gè)項(xiàng)目全局的業(yè)務(wù)，一般分為主要指標(biāo)和次要指標(biāo)兩個(gè)層次，主要指標(biāo)反映核心業(yè)務(wù)，次要指標(biāo)用于進(jìn)一步闡述分析。所以在制作時(shí)給予不一樣的側(cè)重。

文字控件教學(xué)

? ? ? ?文字控件教學(xué)共有四個(gè)內(nèi)容，分別是主標(biāo)題文字、副標(biāo)題文字、插入文本和跑馬燈。主標(biāo)題是面板總標(biāo)題，常見(jiàn)的位置是畫布正上方、左上角，一般字體最大；其余文字控件可以按層級(jí)劃分：副標(biāo)題是模塊的標(biāo)題，模塊標(biāo)題下轄多個(gè)小模塊和組件；插入文本則組成模塊或組件的內(nèi)容，面板內(nèi)容十分繁多的情況下可以下設(shè)更多級(jí)別的標(biāo)題。

1、主標(biāo)題編輯

? ? ? ? 首先在工具欄找到文字組件，點(diǎn)擊【主標(biāo)題】在屏幕內(nèi)創(chuàng)建“主標(biāo)題”文本框，點(diǎn)擊【數(shù)據(jù)】，修改文字內(nèi)容，回到樣式界面，可對(duì)文字字體、字號(hào)、顏色，進(jìn)行修改，點(diǎn)擊居中。字體間距根據(jù)需求進(jìn)行調(diào)整，最后確定本文框大小和位置。

2、副標(biāo)題編輯

? ? ? ?在文字組件，點(diǎn)擊【副標(biāo)題】在屏幕內(nèi)創(chuàng)建“副標(biāo)題”文本框，點(diǎn)擊【數(shù)據(jù)】，修改內(nèi)容，教程中根據(jù)場(chǎng)景需求，這里修改為“港口簡(jiǎn)介”，回到樣式界面，對(duì)文字字體、字號(hào)、顏色，進(jìn)行修改，調(diào)整文本框大小，放到合適的位置。最后，同樣重復(fù)上述步驟，再創(chuàng)建一個(gè)“港口概覽”。

3、插入文本編輯

? ? ? 在文字組件，點(diǎn)擊【插入文本】在屏幕內(nèi)創(chuàng)建文本框，點(diǎn)擊【數(shù)據(jù)】，編輯文本內(nèi)容，支持快速?gòu)?fù)制與粘貼，然后再對(duì)文本進(jìn)行字體、字號(hào)、顏色樣式修改，點(diǎn)擊【確定】，回到樣式界面，修改文字對(duì)齊方式，移動(dòng)文本框放置到合適的位置。

4、跑馬燈編輯

? ? ? ?跑馬燈在業(yè)務(wù)側(cè)一般用于緊急告警或事件的通知。在文字組件，點(diǎn)擊【跑馬燈】在屏幕內(nèi)創(chuàng)建跑馬燈文本框，點(diǎn)擊【數(shù)據(jù)】，修改內(nèi)容，再在樣式列表對(duì)文字字體、字號(hào)、顏色、粗細(xì)，間距進(jìn)行修改。

圖片控件教學(xué)

? ? ? 圖片控件教學(xué)內(nèi)包含兩個(gè)內(nèi)容，分別是圖片設(shè)置與輪播圖片設(shè)置。在面板搭建時(shí)，圖片的合理運(yùn)用可有效讓面板看起來(lái)更加生動(dòng)。圖片輪播功能可在首頁(yè)對(duì)多組圖片進(jìn)行輪播展示，通過(guò)簡(jiǎn)單的方式，達(dá)到最大的效果。?

1、本地圖片與外鏈圖片

? ? ? ? 在組件欄找到【多媒體】，點(diǎn)擊【本地圖片】，即可上傳本地圖片，單擊鼠標(biāo)左鍵即可在面板創(chuàng)建圖片，在【樣式】界面可精確設(shè)置圖片大小、位置，或通過(guò)鼠標(biāo)對(duì)其進(jìn)行縮放。在【圖片樣式】可設(shè)置圖片倒影、透明度和混合模式。

? ? ? ? 外鏈圖片效果與本地圖片相同，只需在組件欄找到【多媒體】，點(diǎn)擊【外鏈圖片】，復(fù)制外鏈鏈接即可。

2、本地輪播與外鏈輪播

? ? ? ? 在組件欄找到【多媒體】，點(diǎn)擊【本地輪播】，按住Ctrl即可上傳多組本地圖片，單擊鼠標(biāo)左鍵即可在面板創(chuàng)建圖片，或在【數(shù)據(jù)】點(diǎn)擊【修改】也可添加多組圖片。在【樣式】界面可精確設(shè)置圖片大小、位置，或通過(guò)鼠標(biāo)對(duì)其進(jìn)行縮放。在【圖片樣式】可設(shè)置圖片倒影、透明度和混合模式。

? ? ? ?外鏈輪播效果與本地輪播相同，只需在組件欄找到【多媒體】，點(diǎn)擊【外鏈輪播】，復(fù)制外鏈鏈接即可。