pc-admin/src/components/Poster/Preview.jsx

import React, { useMemo } from 'react'
import { Avatar, Row, Col, Empty, Typography } from 'antd'
import Styles from './style.less'

const { Title } = Typography;
const qrStyle = {
  width: '100%',
  height: '100%',
}

export default (props) => {
  const qrCode = useMemo(() => require('@/assets/xiaochengxu.png'), [])
  const avatar = useMemo(() => require('@/assets/touxiang.jpg'), [])

  return (
    <div>
      <div className={Styles.image}>
        {
          props.img ?
            <img src={props.img} alt="" style={{width: '100%', height: '100%'}} /> :
            <div style={{paddingTop: '200px'}}><Empty description="暂无海报图" /></div>
        }
      </div>
      <Row gutter={24} style={{padding: '2em'}}>
        <Col span={6}><Avatar size={78} src={avatar} /></Col>
        <Col span={10}>
          <Title level={4}>新联家</Title>
          <div>长按识别看房</div>
        </Col>
        <Col span={8}><img src={qrCode} alt="" style={qrStyle} /></Col>
      </Row>
    </div>
  )
}