|
| 1 | +import { QRCode } from "antd"; |
| 2 | +import dayjs from 'dayjs' |
| 3 | +import HighText from "../../components/HighText"; |
| 4 | +import { useOutletContext } from "react-router-dom"; |
| 5 | +import { RefObject } from "react"; |
| 6 | +import BaseCard from "../../components/BaseCard"; |
| 7 | +export default function AlittleTea() { |
| 8 | + const [highLight, ref]:[highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext(); |
| 9 | + |
| 10 | + return ( |
| 11 | + <div> |
| 12 | + <BaseCard ref={ref}> |
| 13 | + <div bg='white' className='w-70 z-0 relative px-6 py-4 rounded-5 ' > |
| 14 | + {/* LOGO */} |
| 15 | + <img src="/images/alittle-tea.png" alt="logo" absolute w-10 h-auto right-4 top-4 op80 /> |
| 16 | + |
| 17 | + {/* 基础信息区域 */} |
| 18 | + <div text='xs' className='z-10'> |
| 19 | + <HighText show={highLight} text='数量' eg='1/1' /> |
| 20 | + </div> |
| 21 | + |
| 22 | + {/* 点单来源 */} |
| 23 | + <div flex='~ items-center'> |
| 24 | + <div mt-1 text='xl' style={{marginRight: '10px'}}> |
| 25 | + <HighText show={highLight} text='点单来源' eg='饿了么' /> |
| 26 | + </div> |
| 27 | + <div font='bold' mt-1 text='xl' > |
| 28 | + <HighText show={highLight} text='编号' eg='B860' /></div> |
| 29 | + </div> |
| 30 | + |
| 31 | + {/* 杯子大小,冷热度,糖度什么的 */} |
| 32 | + <div flex='~ items-center' className=''> |
| 33 | + <div text='md'> |
| 34 | + <HighText show={highLight} text='杯子大小' eg='大杯' /> |
| 35 | + ( |
| 36 | + <HighText show={highLight} text='冷热度' eg='少冰'/> |
| 37 | + / |
| 38 | + <HighText show={highLight} text='糖度' eg='三分糖' /> |
| 39 | + ) |
| 40 | + </div> |
| 41 | + </div> |
| 42 | + |
| 43 | + {/* 产品名称区域 */} |
| 44 | + <div text='xl' font='bold' > |
| 45 | + <HighText show={highLight} text='产品名称' eg='叙拉古人的愤怒' /> |
| 46 | + </div> |
| 47 | + |
| 48 | + {/* 自定义区域 */} |
| 49 | + <div flex='~ items-center' > |
| 50 | + <div text='md'> |
| 51 | + <HighText show={highLight} text='加料1' eg='仙草' /> |
| 52 | + <HighText show={highLight} text='加料2' eg='/改牛乳' /> |
| 53 | + <HighText show={highLight} text='加料3' eg='/冰糖' /> |
| 54 | + </div> |
| 55 | + </div> |
| 56 | + |
| 57 | + {/* 价格区域 */} |
| 58 | + <div flex='~ items-center' className='mt-1'> |
| 59 | + <div text='xl'> |
| 60 | + ¥ |
| 61 | + <HighText show={highLight} text='价格' eg='12' /> |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + |
| 65 | + {/* 时间区域 */} |
| 66 | + <div text='sm'> |
| 67 | + <HighText show={highLight} text='日期时间' eg={dayjs().format('YYYY-MM-DD HH:mm:ss')} /> |
| 68 | + </div> |
| 69 | + |
| 70 | + {/* 店铺信息区域 */} |
| 71 | + <div flex='~ items-center' className='mt-1'> |
| 72 | + <div text='xs' style={{marginRight: '25px'}}> |
| 73 | + <HighText show={highLight} text='店铺名称' eg='漕河泾印象城店' /> |
| 74 | + </div> |
| 75 | + <div text='xs' style={{marginTop: '0.5px'}}> |
| 76 | + <HighText show={highLight} text='店铺号码' eg='3284856' /> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + |
| 80 | + {/* 建议区域 */} |
| 81 | + <div flex='~ items-center' className='mt-1 ' style={{fontSize: 14, fontWeight: 300, letterSpacing: '1px'}}> |
| 82 | + 建议1小时内饮用完毕,口感最佳 |
| 83 | + </div> |
| 84 | + |
| 85 | + {/* 特别信息 */} |
| 86 | + <div text='sm balck' font='bold' mt-2 tracking-widest style={{marginTop: '30px'}}> |
| 87 | + <HighText show={highLight} text='特别信息' eg='入会享88折,趣开1点点订制专属您的饮品' /> |
| 88 | + </div> |
| 89 | + <div mt-1 flex='~ justify-between'> |
| 90 | + <div> |
| 91 | + |
| 92 | + |
| 93 | + <div > |
| 94 | + <img src="/images/a_little_tea_sticker.png" alt="logo" style={{marginLeft: '-5px', width: '130px', height: '55px'}} /> |
| 95 | + </div> |
| 96 | + |
| 97 | + </div> |
| 98 | + <QRCode value={'https://sticker.hsott.cn'} style={{marginTop: '-30px'}} bordered={false} className="-m-3 mt-[-10px] " size={100} color='black' type={'svg'} /> |
| 99 | + </div> |
| 100 | + </div> |
| 101 | + </BaseCard> |
| 102 | + </div> |
| 103 | + ) |
| 104 | +} |
0 commit comments