diff --git a/src/components/detail/detailColor/index.tsx b/src/components/detail/detailColor/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..662e720a5d0b50da5b225e0536f9f734f66e775f
--- /dev/null
+++ b/src/components/detail/detailColor/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { DetailColorField } from 'ccms'
+import { IColorProps, ColorDetailConfig } from 'ccms/dist/src/components/detail/detailColor'
+
+export const PropsType = (props: ColorDetailConfig) => {}
+
+export default class InfoDetailComponent extends DetailColorField {
+  renderComponent = (props: IColorProps) => {
+    
+    const {
+      value
+    } = props
+
+    return (
+      <div>
+        {(value && <span style={{width: "22px",height: "24px", border: "1px solid #d9d9d9", background: value, float: "left" , marginRight: "10px" }}></span>)}
+        {(value && value )} 
+      </div>
+    )
+  }
+}
diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx
index 04933a6b2d7e0ad415ee4265a1f610bd04754053..3df4864a4cb704dbbb96d219d0a0513f385edc23 100644
--- a/src/components/detail/index.tsx
+++ b/src/components/detail/index.tsx
@@ -4,6 +4,7 @@ import StatementDetail from './statement'
 import EnumDetailComponent from './enum'
 import ImportSubformField from './importSubform'
 import InfoDetail from './detailInfo'
+import ColorDetail from './detailColor'
 import CustomFieldComponent from './custom'
 
 export default {
@@ -13,5 +14,6 @@ export default {
   detail_enum: EnumDetailComponent,
   import_subform: ImportSubformField,
   detail_info: InfoDetail,
+  detail_color: ColorDetail,
   custom: CustomFieldComponent
 }