From c5b6f6cb5bba7268aaa2496bbf21bf2965277f8b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 01 七月 2022 13:29:03 +0800
Subject: [PATCH] 2022-07-01

---
 src/templates/modalconfig/checkCard/index.jsx |   85 +++++++++++++++++++++++++++---------------
 1 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/templates/modalconfig/checkCard/index.jsx b/src/templates/modalconfig/checkCard/index.jsx
index 0969425..dea9b8a 100644
--- a/src/templates/modalconfig/checkCard/index.jsx
+++ b/src/templates/modalconfig/checkCard/index.jsx
@@ -13,63 +13,88 @@
   state = {}
 
   getCards = () => {
-    const { display, width, options, fields, ratio, picratio, backgroundColor, borderColor } = this.props.config
+    const { display, width, options, fields, ratio, picratio, backgroundColor } = this.props.config
 
-    let _ratio = picratio || ratio
     let _options = []
-    let paddingTop = '100%'
-    if (_ratio === '4:3') {
-      paddingTop = '75%'
-    } else if (_ratio === '3:2') {
-      paddingTop = '66.7%'
-    } else if (_ratio === '16:9') {
-      paddingTop = '56.25%'
-    }
+    let _fields = fields || []
 
     if (options) {
       _options = options.filter(op => !op.Hide)
     }
 
-    let style = {}
-    
-    if (borderColor) {
-      style.borderColor = borderColor
+    let cls = ''
+    if (_options.length * width <= 24) {
+      cls = 'no-margin-bottom'
     }
-
-    if (display !== 'picture') {
-      let _style = backgroundColor ? {backgroundColor} : null
- 
+    if (display === 'picture') {
+      let _ratio = picratio || ratio
+      let paddingTop = '100%'
+      if (_ratio === '4:3') {
+        paddingTop = '75%'
+      } else if (_ratio === '3:2') {
+        paddingTop = '66.7%'
+      } else if (_ratio === '16:9') {
+        paddingTop = '56.25%'
+      }
       if (_options.length === 0) {
         return <Col span={width}>
-          <div className="card-cell" style={style}>
-            <div className="bg-mask" style={_style}></div>
-            {fields ? fields.map(col => {
-              return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{col.field}</span>
-            }) : null}
-            {!fields || fields.length === 0 ? <span style={{color: '#000000', fontSize: '14px', height: '21px'}}>绀轰緥</span> : null}
+          <div className="card-pic-cell no-margin-bottom" style={{paddingTop, background: '#91d5ff'}}>
           </div>
         </Col>
       }
       return _options.map(item => {
         return <Col span={width} key={item.key}>
-          <div className="card-cell" style={style}>
-            <div className="bg-mask" style={_style}></div>
-            {fields.map(col => {
-              return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
+          <div className={'card-pic-cell ' + cls} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
+            <div className="content-wrap">
+              <div className="content-center">
+                {_fields.map(col => {
+                  return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
+                })}
+              </div>
+            </div>
+          </div>
+        </Col>
+      })
+    } else if (display === 'color') {
+      if (_options.length === 0) {
+        return <Col span={width}>
+          <div className="card-color-cell no-margin-bottom" style={{background: '#1890ff'}}>
+          </div>
+        </Col>
+      }
+      return _options.map(item => {
+        return <Col span={width} key={item.key}>
+          <div className={'card-color-cell ' + cls} style={{background: item.$value}}>
+            {_fields.map(col => {
+              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
             })}
           </div>
         </Col>
       })
     } else {
+      let _style = null
+      let style = null
+
+      if (backgroundColor) {
+        _style = {backgroundColor}
+        style = {borderColor: 'transparent'}
+      }
+ 
       if (_options.length === 0) {
         return <Col span={width}>
-          <div className="card-pic-cell" style={{...style, paddingTop, background: '#91d5ff'}}>
+          <div className="card-cell no-margin-bottom" style={style}>
+            <div className="bg-mask" style={_style}></div>
+            <span style={{color: '#000000', fontSize: '14px', height: '21px'}}>绀轰緥</span>
           </div>
         </Col>
       }
       return _options.map(item => {
         return <Col span={width} key={item.key}>
-          <div className="card-pic-cell" style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
+          <div className={'card-cell ' + cls} style={style}>
+            <div className="bg-mask" style={_style}></div>
+            {_fields.map(col => {
+              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
+            })}
           </div>
         </Col>
       })

--
Gitblit v1.8.0