hospital-admin/src/components/prescription.vue

<template>
    <div class="container">
     <img src="../assets/hasuse.png" alt="" srcset="" class="status">
    <div class="header">
        <div class="chufang">普通处方</div>
        <div class="title">
            成都金牛欣欣相照互联网医院
        </div>
        <div class="title titlename">电子处方签</div>
        <div class="sicknum">处方号:<span>{{data.prescription_code}}</span></div>
     </div>
     <div class="table">
        <div class="row">
            <div class="left">
                <div class="name">日期:</div>
                <div class="desc">{{data.doctor_created_time}}</div>
            </div>
            <div class="right">
                <div class="name">科室:</div>
                <div class="desc">内科</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="name">姓名:</div>
                <div class="desc">陈晓丽</div>
            </div>
            <div class="right">
                <div class="name">性别:</div>
                <div class="desc">女</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="name">过敏史:</div>
                <div class="desc">无</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="name">初步判断:</div>
                <div class="desc">急性扁桃体炎</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="name">医生建议:</div>
                <div class="desc">急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急性扁桃体炎急</div>
            </div>
        </div>
        <div class="rp">
            <div class="text">Rp</div>
            <div class="line"></div>
        </div>
     </div>
     <div class="yaofang">
        <div class="row">
            <div class="name">我是电动车颗粒（50mg*11袋）</div>
            <div class="num">x1盒</div>
        </div>
        <div class="row">
            <div class="name">用量：一次100mg 一日两次</div>
        </div>
        <div class="row">
            <div class="name">用法：口服</div>
        </div>
        <div class="squre">
           
        </div>
     </div>
     <div class="signbox">
        <div class="row">
            <div class="left">
                <div class="name">医生签名:</div>
                <div class="desc">xxx</div>
            </div>
            <div class="right">
                <div class="name">药师签名:</div>
                <div class="desc">xxx</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="name">配药人员:</div>
                <div class="desc">xxx</div>
            </div>
            <div class="right">
                <div class="name">复核人员:</div>
                <div class="desc">xxx</div>
            </div>
        </div>
        <div class="tips">注意:处方有效期为3天，经本院审方中心审核通过后具有效力。</div>
     </div>
   </div>
</template>
<script setup>
import {  toRefs} from 'vue';
const props = defineProps({
  // 数组名称
  data: {
    type: Object,
  }
 
});
const {data} = toRefs(props);
</script>
<style scoped>
 .container{
            box-shadow: 0 0 10px 0 #ccc;
            overflow: hidden;
            width:600px; 
            height:auto;
            position: relative;
            border-radius:5px;
            padding:15px;
            background-color: #fff;;
            margin: 10px 0;
        }
        .header{
            position: relative;
            margin:48px 10px 0;
            font-size: 18px;
            text-align: center;
            border-bottom: 1px dashed #000;
            padding-bottom: 10px;
        }
        .status{
            position: absolute;
            width:140px;
            height:140px;
            z-index:9;
            top:20px;
            left:20px;
        }
        .titlename{
            margin-top: 15px;
        }
        .chufang{
            left:10px;
            position: absolute;
            top:-30px;
            width: 40px;
            font-size:20px;
        }
        .sicknum{
            text-align: right;
           font-size: 14px;
           margin:0 10px;
           display: flex;
           align-items: center;
           justify-content: flex-end;
        }
        .sicknum span{
            font-size: 13px;
            font-weight: bold;
        }
        .table{
            margin:0 10px;
        }
        .table .row{
           margin: 8px 0;
            display: flex;
            font-size: 14px;
        }
        .row .left,.row .right{
         flex:1;
          display: flex;
        }
        .row .left .name,.row .right .name{
            white-space:nowrap;
        }
        .desc{
          flex:1;
          font-weight: bold;
          margin-left: 12px;
        }
        .rp{
            display: flex;
            align-items: center;
        }
        .text{
            margin-right: 8px;
        }
        .line{
            flex:1;
            height:1px;
            background:#000;
        }
        .yaofang{
            margin:15px 10px 0;
        }
        .yaofang .row{
            font-size: 14px;
            display: flex;
            margin:5px 0px;
            justify-content: space-between;
        }
        .squre{
            margin-top: -20px;
            position: relative;
            width: 100%;
            height:0;
            padding-bottom: 50%;
            background:red;
            border-bottom:1px solid #000;
            background:linear-gradient(to bottom right,rgba(0,0,0,0) 0%,rgba(0,0,0,0)calc(50% - 1px),rgba(0,0,0,1)50%,rgba(0,0,0,0)calc(50% + 1px),rgba(0,0,0,0)100%)
        }
        .signbox{
            margin-top: 10px;
        }
        .signbox  .row{
            font-size: 14px;
            margin:5px 10px;
            display: flex;
        }
        .tips{
            margin:15px 10px;
            text-align: center;
            font-size: 12px;
        }
        .yaofang .row{
            line-height: 22px;
        }
</style>