预约记录页面

AppointmentHistory.tsx

import SubordinatePage from '../components/SubordinatePage';
import { Card, Icon, WhiteSpace, Tabs, Badge } from 'antd-mobile';

const appointments = [
  {
    submissionTime: '2021-5-6 15:19',
    status: '可视频',
    lawyer: '律师名',
    lawFirm: '律师事务所',
    appointmentDate: '2021年5月6日',
    party: '当事人',
    caseType: '案件类型',
  },
  {
    submissionTime: '2021-5-6 15:19',
    status: '等待中',
    lawyer: '富琪茹',
    lawFirm: '四川迪扬律师事务所',
    appointmentDate: '2021年5月6日',
    party: '张二康（身份证尾号9876）',
    caseType: '劳动纠纷',
  },
  {
    submissionTime: '2021-5-6 15:19',
    status: '等待中',
    lawyer: '富琪茹',
    lawFirm: '四川迪扬律师事务所',
    appointmentDate: '2021年5月6日',
    party: '张二康（身份证尾号9876）',
    caseType: '劳动纠纷',
  },
];

export default function AppointmentHistory() {
  const tabs = [
    { title: '全部' },
    { title: '可视频' },
    { title: '等待中' },
    { title: '已完成' },
    { title: '过期/取消' },
  ];
  return (
    <SubordinatePage name="预约记录">
      <WhiteSpace style={{ height: '1px' }} />
      <Tabs
        tabBarUnderlineStyle={{ backgroundColor: '#2E63EB' }}
        tabs={tabs}
        initialPage={1}
        tabBarActiveTextColor="#2E63EB"
        tabBarInactiveTextColor="#333333"
        renderTab={(tab) => <span>{tab.title}</span>}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <WhiteSpace />
          {appointments.map((item) => (
            <>
              <Card>
                <Card.Header title={`预约时间：${item.appointmentDate}`} extra={item.status} />
                <Card.Body
                  style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }}
                >
                  <div>
                    {item.lawyer}
                    <span
                      style={{
                        width: '17.07vw',
                        height: '3.33vw',
                        fontSize: '3.47vw',
                        fontFamily: 'PingFang SC',
                        color: '#999999',
                        lineHeight: '5.33vw',
                        margin: '1.6vw',
                        fontWeight: 500,
                      }}
                    >
                      {item.lawFirm}
                    </span>
                  </div>
                  <div className="appointment-card-item">
                    <Icon type="check" size="xs" style={{ color: '#9099A3' }} />
                    <div className='appointment-card-item-name'>&nbsp;{item.appointmentDate}</div>
                  </div>
                  <div className="appointment-card-item-person appointment-card-item">
                    <Icon type="check" size="xs" style={{ color: '#9099A3' }} />
                    <div className='appointment-card-item-name'>&nbsp;{item.party}</div>
                  </div>
                  <div className="appointment-card-item">
                    <Icon type="check" size="xs" style={{ color: '#9099A3' }} />
                    <div className='appointment-card-item-name'>&nbsp;{item.caseType}</div>
                  </div>
                </Card.Body>
              </Card>
              <WhiteSpace />
            </>
          ))}
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '150px',
          }}
        >
          Content of second tab
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '150px',
          }}
        >
          Content of third tab
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '150px',
          }}
        >
          Content of forth tab
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '150px',
          }}
        >
          Content of fifth tab
        </div>
      </Tabs>
    </SubordinatePage>
  );
}

global.less

//预约记录页
.am-card-header-content {
  width: 280px;
  height: 2.8vw;
  font-size: 2.93vw;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}

.am-card {
  width: 93.33vw;
}
.am-card-body {
  padding: 2vw;
}
.am-card-header-extra {
  width: 10.13vw;
  font-size: 3.47vw;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2e63eb;
}

.am-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.am-card-body {
  padding-left: 15px;
  padding-right: auto;
}

.appointment-card-item {
  width: auto;
  height: 7vw;
  font-size: 3.47vw;
  font-family: PingFang SC;
  color: #3a4149;
  line-height: 5.33vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 400;
}

.appointment-card-item-person {
  font-weight: 500;
  color: #3a4149;
}

.appointment-card-item-name {
  color: #3a4149;
}