|
@@ -4,41 +4,42 @@ import vip from '../../../../public//vip.png';
|
|
import top from '../../../../public//top-r1.png';
|
|
import top from '../../../../public//top-r1.png';
|
|
import { createStyles } from "antd-style";
|
|
import { createStyles } from "antd-style";
|
|
|
|
|
|
-const useStyles = (isVip: any) => createStyles((props) => {
|
|
|
|
- let { token } = props
|
|
|
|
- return {
|
|
|
|
- cardBox: {
|
|
|
|
- position: 'relative'
|
|
|
|
- },
|
|
|
|
- isOne: {
|
|
|
|
- backgroundImage: isVip ? "linear-gradient(180deg, #fff1dc 60%, #fffdfa 100%)" : 'linear-gradient(180deg, #ffeced 60%, #fffafa 100%)',
|
|
|
|
- },
|
|
|
|
- topRight: {
|
|
|
|
- lineHeight: '20px',
|
|
|
|
- background: isVip ? "#ffd89d" : "#ff2441",
|
|
|
|
- position: 'absolute',
|
|
|
|
- top: 0,
|
|
|
|
- right: 0,
|
|
|
|
- fontSize: 12,
|
|
|
|
- borderRadius: isVip ? '0 8px 0 8px' : "8px 8px 0 8px",
|
|
|
|
- padding: isVip ? '0 5px' : 0,
|
|
|
|
- },
|
|
|
|
- topRightSpan1: { display: 'inline-block', background: `url(${top}) no-repeat`, minWidth: 40, height: 20, padding: "0 10px 0 6px", backgroundSize: "100% 100%", color: "#fff" },
|
|
|
|
- topRightSpan2: { color: "#fff", display: 'inline-block', transform: 'translateX(-4px)' },
|
|
|
|
- del:{ fontSize: 14, textDecoration: 'line-through',marginLeft:7,color:token.colorTextTertiary,fontWeight:"500" }
|
|
|
|
- }
|
|
|
|
-});
|
|
|
|
|
|
|
|
export function Template(params: { list: any[], isVip: boolean }) {
|
|
export function Template(params: { list: any[], isVip: boolean }) {
|
|
let { list, isVip } = params
|
|
let { list, isVip } = params
|
|
- let { styles } = useStyles(isVip)()
|
|
|
|
|
|
+ const useStyles = createStyles((props) => {
|
|
|
|
+ let { token } = props
|
|
|
|
+ return {
|
|
|
|
+ cardBox: {
|
|
|
|
+ position: 'relative'
|
|
|
|
+ },
|
|
|
|
+ isOne: {
|
|
|
|
+ backgroundImage: isVip ? "linear-gradient(180deg, #fff1dc 60%, #fffdfa 100%)" : 'linear-gradient(180deg, #ffeced 60%, #fffafa 100%)',
|
|
|
|
+ },
|
|
|
|
+ topRight: {
|
|
|
|
+ lineHeight: '20px',
|
|
|
|
+ background: isVip ? "#ffd89d" : "#ff2441",
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ top: 0,
|
|
|
|
+ right: 0,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ borderRadius: isVip ? '0 8px 0 8px' : "8px 8px 0 8px",
|
|
|
|
+ padding: isVip ? '0 5px' : 0,
|
|
|
|
+ },
|
|
|
|
+ topRightSpan1: { display: 'inline-block', background: `url(${top}) no-repeat`, minWidth: 40, height: 20, padding: "0 10px 0 6px", backgroundSize: "100% 100%", color: "#fff" },
|
|
|
|
+ topRightSpan2: { color: "#fff", display: 'inline-block', transform: 'translateX(-4px)' },
|
|
|
|
+ del: { fontSize: 14, textDecoration: 'line-through', marginLeft: 7, color: token.colorTextTertiary, fontWeight: "500" }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ let { styles } = useStyles(isVip)
|
|
|
|
+
|
|
return <Card bordered={false} style={{ width: 420 }}>
|
|
return <Card bordered={false} style={{ width: 420 }}>
|
|
<Row gutter={[0, 15]}>
|
|
<Row gutter={[0, 15]}>
|
|
{
|
|
{
|
|
list?.map((item, index) => {
|
|
list?.map((item, index) => {
|
|
let isOne = index === 0
|
|
let isOne = index === 0
|
|
return <Col key={index} span={11} offset={index % 2 === 0 ? 0 : 1} >
|
|
return <Col key={index} span={11} offset={index % 2 === 0 ? 0 : 1} >
|
|
- <Card className={`${styles.cardBox} ${isOne ? styles.isOne : ""}`} styles={{ body:{maxHeight: 90, padding: '20px 15px'} }}>
|
|
|
|
|
|
+ <Card className={`${styles.cardBox} ${isOne ? styles.isOne : ""}`} styles={{ body: { maxHeight: 90, padding: '20px 15px' } }}>
|
|
<div className={styles.topRight}>
|
|
<div className={styles.topRight}>
|
|
{
|
|
{
|
|
isVip ? <> <span>{item.description}</span></> : <>
|
|
isVip ? <> <span>{item.description}</span></> : <>
|