AppointmentSuccess.tsx

import SubordinatePage from '../components/SubordinatePage';
import { Button, WhiteSpace } from 'antd-mobile';

export default function AppointmentSuccess() {
  return (
    <SubordinatePage name="预约结果">
      <div style={{ height: '100vh' }}>
        <WhiteSpace style={{ height: '1px' }} />
        <div
          style={{
            height: '100%',
            backgroundColor: 'white',
          }}
        >
          <div style={{ height: '5.51vh' }}></div>
          <div style={{ height: '26.6vw' }}>
            <div
              style={{
                width: '26.6vw',
                height: '26.6vw',
                left: '36.7vw',
                background: 'linear-gradient(140deg, #6D94FA, #4474EE)',
                opacity: '0.1',
                borderRadius: '50%',
                position: 'absolute',
                verticalAlign: 'middle',
              }}
            ></div>
            <div
              style={{
                width: '20vw',
                height: '20vw',
                left: '40vw',
                top: '3.3vw',
                background: 'linear-gradient(140deg, #6D94FA, #4474EE)',
                opacity: '0.3',
                borderRadius: '50%',
                position: 'relative',
                verticalAlign: 'middle',
              }}
            ></div>
            <div
              style={{
                width: '13.3vw',
                height: '13.3vw',
                left: '43.3vw',
                top: '-13.3vw',
                background: 'linear-gradient(140deg, #6D94FA, #4474EE)',
                borderRadius: '50%',
                position: 'relative',
                verticalAlign: 'middle',
              }}
            ></div>
            <div
              style={{ width: '26px', height: '26px', background: '#FFFFFF', opacity: '0.85', borderRadius: '5px' }}
            ></div>
          </div>
          <div style={{ height: '2.48vh' }}></div>
          <div
            style={{
              height: '2.20vh',
              fontSize: '17px',
              fontFamily: 'PingFang SC',
              fontWeight: 'bold',
              color: '#333333',
              textAlign: 'center',
              // lineHeight: '40px',
            }}
          >
            预约成功
          </div>
          <div style={{ height: '5.10vh' }}></div>
          <div
            style={{
              height: '1.93vh',
              width: '84.67vw',
              marginLeft: '7.67vw',
              background: '#E2E6EF',
              borderRadius: '12px',
            }}
          ></div>
          <div
            style={{
              height: '48vw',
              width: '80vw',
              marginLeft: '10vw',
              background: '#FFFFFF',
              boxShadow: '0px 12px 14px 0px rgba(0, 0, 0, 0.1)',
              opacity: '0.8',
              borderRadius: '4px 4px 12px 12px',
              marginTop: '-0.965vh',
            }}
          >
            <div style={{ height: '6.26vw' }}></div>
            <div
              style={{
                width: '30vw',
                height: '4.13vw',
                fontSize: '4.27vw',
                fontFamily: 'PingFang SC',
                fontWeight: 'bold',
                color: '#3A4149',
                lineHeight: '4.13vw',
                paddingLeft: '6.27vw',
              }}
            >
              预约信息
            </div>
            <div style={{ height: '3.87vw' }}></div>
            <div style={{ width: '80vw', height: '1px', top: '', background: '#E5E5E5' }}></div>
            <div
              style={{ height: '33.72vw', width: '100%', display: 'flex', flexDirection: 'column', margin: '3.45vw' }}
            >
              <div
                style={{
                  width: '206px',
                  height: '3.73vw',
                  fontSize: '4vw',
                  fontFamily: 'PingFang SC',
                  color: '#3A4149',
                  lineHeight: '3.73vw',
                  margin: '2.67vw',
                }}
              >
                当事人 ：刘爽
              </div>
              <div
                style={{
                  width: '206px',
                  height: '3.73vw',
                  fontSize: '4vw',
                  fontFamily: 'PingFang SC',
                  color: '#3A4149',
                  lineHeight: '3.73vw',
                  margin: '2.67vw',
                }}
              >
                预约律师：黄凯
              </div>
              <div
                style={{
                  width: '206px',
                  height: '3.73vw',
                  fontSize: '4vw',
                  fontFamily: 'PingFang SC',
                  color: '#3A4149',
                  lineHeight: '3.73vw',
                  margin: '2.67vw',
                }}
              >
                预约时间：2021年4月28日
              </div>
            </div>
          </div>
          <div style={{ height: '12.27vw' }}></div>
          <Button
            style={{
              width: '84.67vw',
              height: '10vw',
              left: '7.67vw',
              background: '#2E63EB',
              borderRadius: '12px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onClick={() => alert('你妹')}
          >
            <div
              style={{
                marginTop: '-1vh',
                width: '22.13vw',
                height: '3.6vw',
                fontSize: '3.6vw',
                fontFamily: 'PingFang SC',
                color: '#FFFFFF',
                lineHeight: '5.33vw',
              }}
            >
              查看预约记录
            </div>
          </Button>
          <div style={{ height: '3.05vw' }}></div>
          <div
            style={{
              width: '40vw',
              height: '2.93vw',
              fontSize: '2.93vw',
              fontFamily: 'PingFang SC',
              marginLeft: '30vw',
              color: '#999999',
              lineHeight: '5.33vw',
            }}
          >
            可到我的-预约记录查看详情
          </div>
        </div>
      </div>
    </SubordinatePage>
  );
}