數據門戶樣式

適用場景：安裝了「數據門戶」插件的使用者，可參考本文了解數據門戶的相關功能。

1.1 版本

1.2 功能簡介

本文將介紹編輯數據門戶時，可對頁面和組件進行的樣式設定。

2.1 頁面設定

管理者登入FineBI系統，點選「管理系統>數據門戶>門戶管理」，點選「建立門戶」，建立一張數據門戶看板，如下圖所示：

數據門戶採用網格佈局，組件按照網格細粒度調整寬高。
在數據門戶編輯介面，未選中任何組件的情況下，可在右側設定「頁面設定」，如下圖所示：

頁面背景支援兩種形式：

2.2 組件樣式

在數據門戶編輯介面，選中一個組件，可在右側設定「組件樣式」。如下圖所示：

樣式設定支援選擇「跟隨主題」和「自訂」

• 跟隨主題

V1.2及之後版本，資料門戶插件內建了四套門戶樣式。
選擇「跟隨主題」，則組件樣式跟隨門戶樣式，詳情請參見本文第四章。
注：正文組件和圖片組件不支援跟隨主題。

• 自訂

自訂組件樣式包括組件標題、標題正文、標題背景、組件背景、組件圖示。

組件樣式	支援的組件範圍	說明	範例
組件標題 標題正文	正文組件不支援 圖片組件不支援	支援設定是否顯示組件標題 支援設定組件標題內容 支援設定標題字體和字號 支援設定標題文字樣式：粗體、斜體、底線、顔色、對齊位置 V1.4及之後版本插件，組件標題支援輸入公式，請參見下文。
標題背景	正文組件不支援 圖片組件不支援	支援設定組件標題的背景顔色 支援設定組件標題前的圖示 支援設定組件標題圖示和文字的間距 包括預定義和自訂樣式 1）預定義 包括簡約、商務、清新三種樣式 2）自訂 支援設定標題的背景顔色和透明度
組件背景	全部支援	支援設定組件的背景顔色和透明度 支援設定組件的圓角尺寸 支援設定組件的邊框線條顔色和粗細
組件圖示	僅支援公告欄組件-全部公告	V1.2及之後版本插件，內建了五種圖示樣式，可自行選擇
列表配色	僅支持公告欄組件-全部公告	V1.2及之後版本插件，當公告欄組件展示全部公告時，支援設定列表配色

注1：標題背景、組件背景等顔色設定中，可拖動捲軸或手動輸入數值，來調整透明度，如下圖所示：

注2：V1.2及之後版本插件，內建了四個標題圖片以適配不同主題的門戶樣式。
正文組件的組件背景，支援選擇「內建圖片」。如下圖所示：
注3：V1.4及之後版本插件，組件標題中支援輸入公式。支援的公式包括：

2.3 門戶主題

V1.2及之後版本插件，支援一鍵切換資料門戶看板主題。
插件內建了四套樣式，改寫看板頁面背景、組件標題樣式、組件背景、組件圖示、快捷入口圖示、公告欄列表配色。
若頁面設定/組件樣式選擇「跟隨主題」，如下圖所示：

那麼即可點選「門戶樣式」按鈕，一鍵切換看板主題樣式。如下圖所示：

注：V1.9及之後插件版本，支援行動端數據門戶。

3.1 頁面設定

管理者登入 FineBI 系統，點選「管理系統>數據門戶>門戶管理」，點選「建立門戶」。

在彈出的頁面中輸入「門戶名稱」，設定展示終端為「行動端」，選擇「門戶佈局」後，點選「確定」，如下圖所示：

數據門戶採用網格佈局，組件按照網格細粒度調整寬高。

在數據門戶編輯介面，未選中任何組件的情況下，可在右側設定「頁面設定」，如下圖所示：

頁面背景支援兩種形式：

設定項說明如下：

頂部導航設定效果如下圖所示：

3.2 組件樣式

數據門戶插件內建了六套行動端門戶樣式。

行動端組件樣式完全跟隨「門戶主題」樣式，詳情請參見本文 3.3 節。

3.3 門戶主題

注：已新增到數據門戶內的橫幅不支援一鍵切換跟隨主題，新增的橫幅樣式自動跟隨當前主題。

支援一鍵切換行動端數據門戶看板主題。

插件內建了六套樣式，改寫看板頁面背景、組件背景、報表動態圖示及按鈕、公告欄配色。

點選「門戶樣式」按鈕，一鍵切換看板主題樣式。如下圖所示：