diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11dac7afda36e517c30682808e264eff80110bfa..c11b8655359a05b94cf2c3bc4e980ee4b3c336dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ### Change
 
 - 日历模式日期选择公共组件新增支持单个日期选择
+- 多数据列表、数据视图支持字体、背景色数据项
 
 ## [0.0.37] - 2024-11-30
 
diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss
index 054ff40fda46c34083ee47edf9c37dfd9bdcf360..6a1ade0cc4c243c72c3b6084407484e4ea893c2f 100644
--- a/src/control/data-view/data-view.scss
+++ b/src/control/data-view/data-view.scss
@@ -9,7 +9,19 @@ $control-dataview: (text-color: getCssVar(color, text, 0),
 @include b(control-dataview-item) {
   padding: getCssVar(control-dataview, item-padding);
   // 主题缺失，后续补充
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12)
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  background-color: getCssVar(control-dataview, item-bg-color);
+  color: getCssVar(control-dataview, item-font-color);
+  &:hover {
+    background-color: getCssVar(control-dataview,
+      item-hover-color
+    );
+  }
+  @include when(active) {
+    background-color: getCssVar(control-dataview,
+      item-active-color
+    );
+  }
 }
 
 @include b(control-dataview) {
diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx
index ec64ab637a2b6c247230c4c65ad067f4fe54ff8f..2cfb94a955660b0be8ab162dc04b803d971b888b 100644
--- a/src/control/data-view/data-view.tsx
+++ b/src/control/data-view/data-view.tsx
@@ -144,6 +144,15 @@ export const DataViewControl = defineComponent({
           height: `${model.cardHeight}px`,
         });
       }
+      Object.assign(
+        cardStyle,
+        ns.cssVarBlock({
+          'item-bg-color': `${item.bgcolor || ''}`,
+          'item-font-color': `${item.fontcolor || ''}`,
+          'item-hover-color': `${item.hovercolor || ''}`,
+          'item-active-color': `${item.activecolor || ''}`,
+        }),
+      );
       return (
         <div
           class={cardClass}
diff --git a/src/control/list/list-render-util.tsx b/src/control/list/list-render-util.tsx
index fbc4f4732f50c97219a85793c069065c81771933..6f1af58970d0d9b40096484ff65a1efa1883ee62 100644
--- a/src/control/list/list-render-util.tsx
+++ b/src/control/list/list-render-util.tsx
@@ -40,6 +40,20 @@ export function useListRender(
     return itemClass;
   };
 
+  const calcItemStyle = (row: IData) => {
+    const cardStyle = {};
+    Object.assign(
+      cardStyle,
+      ns.cssVarBlock({
+        'item-bg-color': `${row.bgcolor || ''}`,
+        'item-font-color': `${row.fontcolor || ''}`,
+        'item-hover-color': `${row.hovercolor || ''}`,
+        'item-active-color': `${row.activecolor || ''}`,
+      }),
+    );
+    return cardStyle;
+  };
+
   const renderRightSlot = (row: IData) => {
     const select = isSelect(row);
     return <van-checkbox class={ns.bm('item', 'right')} checked={select} />;
@@ -52,6 +66,7 @@ export function useListRender(
   // 绘制项内容
   const renderItemContent = (row: IData): VNode => {
     const itemClass = calcItemClass(row);
+    const itemStyle = calcItemStyle(row);
     const slotOption = {};
     if (Object.prototype.hasOwnProperty.call(row, 'image')) {
       Object.assign(slotOption, { icon: renderIcon(row) });
@@ -62,6 +77,7 @@ export function useListRender(
     return (
       <van-cell
         class={itemClass}
+        style={itemStyle}
         is-link
         title={row.srfmajortext || ''}
         onClick={(event: MouseEvent) => c.onRowClick(row, event)}
@@ -75,11 +91,13 @@ export function useListRender(
   const renderPanelItem = (item: IData, modelData: ILayoutPanel): VNode => {
     const { context, params } = c;
     const itemClass = calcItemClass(item);
+    const itemStyle = calcItemStyle(item);
 
     const content = (
       <iBizControlShell
         data={item}
         class={itemClass}
+        style={itemStyle}
         modelData={modelData}
         context={context}
         params={params}
diff --git a/src/control/list/md-ctrl/md-ctrl.scss b/src/control/list/md-ctrl/md-ctrl.scss
index d691408b925917f765b0bef9e054ed9ba4357d48..ccfeeab57c4796859d29cd3aae8a7fd4cd3d10a8 100644
--- a/src/control/list/md-ctrl/md-ctrl.scss
+++ b/src/control/list/md-ctrl/md-ctrl.scss
@@ -100,9 +100,17 @@ $panel:(
 
 @include b(control-mobmdctrl-item) {
   @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl);
-
+  background-color: getCssVar(control-mobmdctrl, item-bg-color);
+  color: getCssVar(control-mobmdctrl, item-font-color);
+  &:hover {
+    background-color: getCssVar(control-mobmdctrl,
+      item-hover-color
+    );
+  }
   @include when(active) {
-    // background-color: getCssVar(control-mobmdctrl, active-bg-color);
+    background-color: getCssVar(control-mobmdctrl,
+      item-active-color
+    );
   }
 
   @include m(right) {