66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import './HeadCouponModal.css'
|
||
|
|
import { Button } from 'antd'
|
||
|
|
// import nouseImg from '../../static/coupon/nouse.png'
|
||
|
|
export default function HeadCouponModal() {
|
||
|
|
const [title, setTitle] = useState('未使用')
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className='headModal-top'>
|
||
|
|
<div className={title == '未使用' ? 'top-active' : 'top-title'}
|
||
|
|
onClick={() => {
|
||
|
|
setTitle('未使用')
|
||
|
|
}}
|
||
|
|
>未使用</div>
|
||
|
|
<div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
|
||
|
|
onClick={() => {
|
||
|
|
setTitle('已使用')
|
||
|
|
}}
|
||
|
|
>已使用</div>
|
||
|
|
<div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
|
||
|
|
onClick={() => {
|
||
|
|
setTitle('已过期')
|
||
|
|
}}
|
||
|
|
>已过期</div>
|
||
|
|
</div>
|
||
|
|
<div className='headModal-bot'>
|
||
|
|
<div style={{ display: title == '未使用' ? 'block' : 'none' }}>
|
||
|
|
<div className='couponList'>
|
||
|
|
<div className='nouse'>
|
||
|
|
<div className='nouse-left'>
|
||
|
|
{/* <img src={nouseImg} width={'100%'} height={'100%'} alt="" /> */}
|
||
|
|
<div className='nouse-left-num'>
|
||
|
|
<div
|
||
|
|
style={{ marginTop: -10 }}
|
||
|
|
>
|
||
|
|
<span style={{ fontSize: 30 }}>￥</span>
|
||
|
|
<span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
|
||
|
|
</div>
|
||
|
|
{/* <div >
|
||
|
|
满100可用
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className='nouse-right'>
|
||
|
|
<div>
|
||
|
|
可购买平台内任意软著时使用
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
2024.08.09 12:15:04
|
||
|
|
</div>
|
||
|
|
<Button>去使用</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: title == '已使用' ? 'block' : 'none' }}>
|
||
|
|
已使用
|
||
|
|
</div>
|
||
|
|
<div style={{ display: title == '已过期' ? 'block' : 'none' }}>
|
||
|
|
已过期
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|