diff --git a/src/components/detail/detailColor/index.tsx b/src/components/detail/detailColor/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5d2173dc0677b291e5faca1a4ea6848baf81f52c
--- /dev/null
+++ b/src/components/detail/detailColor/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { DetailField, DetailFieldConfig, IDetailField } from '../common'
+
+export interface ColorDetailConfig extends DetailFieldConfig {
+  type: 'color'
+}
+
+export interface IColorProps {
+  value: string
+}
+
+export default class InfoDetail extends DetailField<ColorDetailConfig, IColorProps, string> implements IDetailField<string> {
+  renderComponent = (props: IColorProps) => {
+    return <React.Fragment>
+      您当前使用的UI版本没有实现colorDetail组件。
+    </React.Fragment>
+  }
+
+  getValue = () => {
+    const {
+      value,
+      config: {
+        defaultValue
+      }
+    } = this.props
+
+    if (value === undefined || value === null || value === '') {
+      return defaultValue !== undefined ? defaultValue : ''
+    }
+    return value
+  }
+
+  render = () => {
+    const value = this.getValue()
+    console.log(value, 'color value ')
+
+    return (
+      <React.Fragment>
+        {this.renderComponent({
+          value
+        })}
+      </React.Fragment>
+    )
+  }
+}
diff --git a/src/components/detail/detailInfo/index.tsx b/src/components/detail/detailInfo/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..912c6640d2c13aad5d32aa17360c354cfb765119
--- /dev/null
+++ b/src/components/detail/detailInfo/index.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { DetailField, DetailFieldConfig, DetailFieldError, IDetailField } from '../common'
+import StatementHelper, { StatementConfig } from '../../../util/statement'
+import marked from 'marked'
+
+export interface InfoDetailConfig extends DetailFieldConfig {
+  type: 'detail_info'
+  description?: {
+    descType: 'text' | 'tooltip' | 'modal'
+    label?: StatementConfig
+    mode: 'plain' | 'markdown' | 'html'
+    content?: StatementConfig
+    showIcon: boolean
+  },
+}
+
+export interface IInfoProps {
+  description?: {
+    descType: 'text' | 'tooltip' | 'modal'
+    label: string | undefined
+    content: React.ReactNode
+    showIcon: boolean
+  }
+}
+
+export default class InfoDetail extends DetailField<InfoDetailConfig, IInfoProps, string> implements IDetailField<string> {
+  renderComponent = (props: IInfoProps) => {
+    return <React.Fragment>
+      您当前使用的UI版本没有实现InfoDetail组件。
+    </React.Fragment>
+  }
+
+  render = () => {
+    const props: IInfoProps = {}
+    const {
+      config: {
+        description
+      }
+    } = this.props
+    if(description) {
+      if(description.descType === 'text') {
+        props.description = {
+          descType: 'text',
+          label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }),
+          content: description.content,
+          showIcon: description.showIcon
+        }
+      } else if (description.descType === 'tooltip') {
+        props.description = {
+          descType: 'tooltip',
+          label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }),
+          content: description.content,
+          showIcon: description.showIcon
+        }
+      } else {
+        props.description = {
+          descType: 'modal',
+          label: StatementHelper(description.label, { data: this.props.data, step: this.props.step }),
+          content: description.content,
+          showIcon: description.showIcon
+        }
+      }
+      if(description.content !== undefined) {
+        const descriptionType = description.mode
+        switch (descriptionType) {
+          case 'plain':
+            props.description && (props.description.content = StatementHelper(description.content, { data: this.props.data, step: this.props.step }))
+            break
+          case 'markdown':
+            props.description && (props.description.content = <div dangerouslySetInnerHTML={{ __html: marked(StatementHelper(description.content, { data: this.props.data, step: this.props.step })) }}></div>)
+            break
+          case 'html':
+            props.description && (props.description.content = <div dangerouslySetInnerHTML={{ __html: StatementHelper(description.content, { data: this.props.data, step: this.props.step })}}></div>) 
+            break
+        }
+      }
+    }
+
+    return (
+      <React.Fragment>
+        {this.renderComponent(props)}
+      </React.Fragment>
+    )
+  }
+}
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
index 0d661f1373e0ac14ef5c69fcfdb4f8c65a98e2c2..2631a317081acf14d05719aa9fcf3fbbbea31f7a 100644
--- a/src/components/detail/index.tsx
+++ b/src/components/detail/index.tsx
@@ -5,6 +5,8 @@ import StatementDetail, { StatementDetailConfig } from './statement'
 import CustomDetail, { CustomDetailConfig } from './custom'
 import GroupField, { GroupFieldConfig } from './group'
 import ImportSubformField, { ImportSubformFieldConfig } from './importSubform'
+import InfoDetail, { InfoDetailConfig } from './detailInfo'
+import ColorDetail, { ColorDetailConfig } from './detailColor'
 
 /**
  * 详情步骤内详情项配置文件格式定义 - 枚举
@@ -15,6 +17,7 @@ export type DetailFieldConfigs =
     StatementDetailConfig |
     GroupFieldConfig |
     ImportSubformFieldConfig |
+    InfoDetailConfig |
     CustomDetailConfig
 
 export type componentType =
@@ -23,6 +26,8 @@ export type componentType =
     'detail_enum' |
     'statement' |
     'import_subform' |
+    'detail_info' |
+    'detail_color' |
     'custom'
 
 export default {
@@ -31,5 +36,7 @@ export default {
   import_subform: ImportSubformField,
   detail_enum: EnumDetail,
   statement: StatementDetail,
+  detail_info: InfoDetail,
+  detail_color: ColorDetail,
   custom: CustomDetail
 }
diff --git a/src/index.tsx b/src/index.tsx
index 5e8ec9d484c33000384fbafafe0123fef90dbc5d..4b22927dc9703715554fc731b1ef02a88060fda3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -58,6 +58,8 @@ export { default as DetailEunmField } from './components/detail/enum'
 export { default as DetailStatementField } from './components/detail/statement'
 export { default as DetailTextField } from './components/detail/text'
 export { default as DetailImportSubformField } from './components/detail/importSubform'
+export { default as DetailInfoField } from './components/detail/detailInfo'
+export { default as DetailColorField } from './components/detail/detailColor'
 export { default as CustomDetail } from './components/detail/custom'
 
 export { default as HeaderStep } from './steps/header'