From ab60d53b67f802878662aaa5a5b52580cca421b8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 26 九月 2020 08:52:46 +0800
Subject: [PATCH] 2020-09-26
---
src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 53 insertions(+), 7 deletions(-)
diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
index 00b39aa..d382708 100644
--- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
+++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
@@ -1,7 +1,13 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
-import { Icon, Popover, Slider } from 'antd'
+import { Icon, Popover } from 'antd'
import './index.scss'
+
+import demo1 from '@/assets/img/demo1.jpg'
+import demo2 from '@/assets/img/demo2.jpg'
+import demo3 from '@/assets/img/demo3.jpg'
+import demo4 from '@/assets/img/demo4.jpg'
+import demo5 from '@/assets/img/demo5.jpg'
const Card = ({ id, cardIds, card, moveCard, findCard, editCard, delCard }) => {
const originalIndex = findCard(id).index
@@ -33,21 +39,61 @@
if (card.padding) {
_style.padding = card.padding
}
+ if (card.fontSize) {
+ _style.fontSize = card.fontSize + 'px'
+ }
+ if (card.fontWeight) {
+ _style.fontWeight = card.fontWeight
+ }
const getContent = () => {
if (card.eleType === 'text' || card.eleType === 'number') {
- return card.value
+ let val = `${card.prefix}${card.value}${card.postfix}`
+ return val
} else if (card.eleType === 'icon') {
return (<Icon type={card.icon}/>)
} else if (card.eleType === 'slider') {
return (
- <div className="ant-slider">
- <div className="ant-slider-rail"></div>
- <div className="ant-slider-track" style={{width: '30%', backgroundColor: card.color}}></div>
- <div className="ant-slider-handle" style={{left: '30%', borderColor: card.color}}></div>
- <div style={{display: 'none'}}><Slider value={30} tooltipVisible={false} /></div>
+ <div className="ant-mk-slider">
+ <div className="ant-mk-slider-rail"></div>
+ <div className="ant-mk-slider-track" style={{width: '30%', backgroundColor: card.color}}></div>
+ <div className="ant-mk-slider-handle" style={{left: '30%', borderColor: card.color}}></div>
</div>
)
+ } else if (card.eleType === 'picture') {
+ let _imagestyle = {}
+
+ if (card.url) {
+ _imagestyle = {backgroundImage: `url('${card.url}')`}
+ } else {
+ let index = card.uuid.match(/\d{1}/g)
+ index = index[index.length - 1] % 5
+ let demos = [demo1, demo2, demo3, demo4, demo5]
+
+ _imagestyle = {backgroundImage: `url('${demos[index]}')`}
+ }
+
+ if (card.radius === 'true') {
+ _imagestyle.borderRadius = '50%'
+ }
+
+ if (card.lenWidRadio === '16:9') {
+ _imagestyle.paddingTop = '56.25%'
+ } else if (card.lenWidRadio === '3:2') {
+ _imagestyle.paddingTop = '66.67%'
+ } else if (card.lenWidRadio === '4:3') {
+ _imagestyle.paddingTop = '75%'
+ } else {
+ _imagestyle.paddingTop = '100%'
+ }
+
+ return (
+ <div className="ant-mk-picture" style={_imagestyle}></div>
+ )
+ } else if (card.eleType === 'splitline') {
+ return (
+ <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
+ )
}
}
--
Gitblit v1.8.0