<template>
  <div class="reciped">
    <div class="flex-vertical-center-l btns">
      <div class="flex-center" @click="$router.back()">返回</div>
      <div class="flex-center bg-yellow">打印预览处方</div>
      <div class="flex-center bg-red">预览病历</div>
    </div>
    <div class="title">病历信息</div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="flex-plane-center-l item">
        <div class="name">就诊日期：</div>
        <div>2021-05-21</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>姓名：</div>
        <div>马达</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>性别：</div>
        <div>男</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>年龄：</div>
        <div>32岁</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>身份证：</div>
        <div>12323782782361273872</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="flex-plane-center-l item">
        <div class="name">科室：</div>
        <div>内科</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>是否代煎：</div>
        <div>否</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>是否膏剂：</div>
        <div>否</div>
      </div>
    </div>

    <div class="flex-vertical-center-l flex-wrap">
      <div class="flex-plane-center-l item">
        <div class="name">地址：</div>
        <div>杭州市拱墅区</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>收货人：</div>
        <div>马达</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>手机号：</div>
        <div>17630909807</div>
      </div>
      <div class="flex-plane-center-l item">
        <div class>收货地址：</div>
        <div>杭州市拱墅区</div>
      </div>
    </div>

    <div class="title mr-t20">药方信息</div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="flex-plane-center-l item">
        <div>药方名称</div>
        <div>内科一室</div>
      </div>
    </div>
    <div class="title mr-t20">费用明细</div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-plane-center-l">
        <div class="name">处方类型：</div>
        <div>中药处方</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">处方金额：</div>
        <div>16.00</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">代煎费：</div>
        <div>16.00</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">制膏费：</div>
        <div>16.00</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-plane-center-l">
        <div class="name">配送费：</div>
        <div>16.00</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">治疗费：</div>
        <div>16.00</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">调配费：</div>
        <div>16.00</div>
      </div>
      <div class="item flex-plane-center-l">
        <div class="name">总金额：</div>
        <div>16.00</div>
      </div>
    </div>

    <div class="title mr-t20">病历详情</div>
    <div class="item flex-plane-center-l">
      <div class="name">主诉：</div>
      <div>失眠三周</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">现病史：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">既往史：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">中医四诊：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">体格检查：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">辅助检查：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">诊断：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">治法：</div>
      <div>失眠</div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">治疗意见：</div>
      <div>
        <p>1.本处方当日有效</p>
        <p>2.取药时请您当面核对药品名称</p>
      </div>
    </div>
    <div class="item flex-plane-center-l">
      <div class="name">嘱托：</div>
      <div>失眠</div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.reciped {
  padding: 33px 46px;
  background: #ffffff;
  border-radius: 5px;

  .btns {
    margin-bottom: 34px;

    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 19px;
      cursor: pointer;
    }

    .bg-yellow {
      width: 125px;
      background: #ffae45;
    }

    .bg-red {
      background: #ff6245;
    }
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #5386f6;
    margin-bottom: 15px;
  }

  .item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    margin-right: 20px;

    .name {
      width: 85px;
      text-align-last: justify;
    }
  }
}
</style>