<template>
  <div class="prescription-container">
    <div class="header">
      <div class="row">
        <div class="company">绍兴市同源健康管理有限公司越城</div>
        <div class="prescription-type">
          <div>普通</div>
          <div>处方</div>
        </div>
      </div>
      <div class="hospital">震元堂中医院互联网医院处方笺</div>
      <div class="sub-header">
        <span class="no">NO:ZJ1740977117298</span>
      </div>
    </div>
    <div class="patient-info">
      <div class="info-row">
        <div class="info-item" style="width: 28%">姓名：章海泉</div>
        <div class="info-item" style="width: 20%">性别：男</div>
        <div class="info-item" style="width: 28%">费别：</div>
        <div class="info-item" style="width: 24%">年龄：70岁</div>
      </div>
      <div class="info-row">
        <div class="info-item" style="width: 60%">门诊病历号：TW250303109</div>
        <div class="info-item" style="width: 40%">科别：中医内科</div>
      </div>
      <div class="info-row">
        <div class="info-item full-width">地址：道墟街道庙桥村竺家29号</div>
      </div>
      <div class="info-row">
        <div class="info-item full-width">电话号：13819571318</div>
      </div>
    </div>
    <!-- 诊断信息 -->
    <div class="diagnosis-section">
      <div class="diagnosis-header">
        <span>诊断：</span>
        <span class="date">开方日期：2025-03-03 12:54:40</span>
      </div>
      <div class="diagnosis-items">
        <div>1. 高血压</div>
        <div>2. 高脂血症</div>
      </div>
    </div>
    <!-- 药品处方区域 -->
    <div class="medicine-section">
      <div class="rp-symbol">Rp</div>
      <div class="medicine-list">
        <div class="medicine-item">
          <div class="medicine-name">阿托伐他汀钙片</div>
          <div class="medicine-spec">20mg*28s</div>
          <div class="medicine-usage">用法：每次1片 一天1次 口服</div>
        </div>
        <div class="medicine-item">
          <div class="medicine-name">厄贝沙坦片</div>
          <div class="medicine-spec">150mg*30s</div>
          <div class="medicine-usage">用法：每次1片 一天1次 口服</div>
        </div>
      </div>
    </div>
    <!-- 底部签章区域 -->
    <div class="footer">
      <div class="stamp-area">
        <div class="signatures">
          <div class="signature-item" style="width: 33%">
            <div>医生：</div>
            <div class="stamp">业务专用章</div>
          </div>
          <div class="signature-item" style="width: 33%">
            <div>审方：</div>
            <div>发药：</div>
          </div>
          <div class="signature-item" style="width: 34%">
            <div>收费盖章：</div>
            <div>配方：</div>
            <div>复核：</div>
          </div>
        </div>
      </div>
      <div class="notice">注意：请勿丢失，处方当日有效，因特殊情况，该处方有效为天（签名：）</div>
    </div>
  </div>
</template>
  
  <style scoped>
.prescription-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 15px;
  font-family: "SimSun", serif;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
}

/* 头部样式 */
.header {
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.company {
  font-size: 15px;
  font-weight: bold;
}
.prescription-type {
  font-size: 14px;
  color: #666;
  border: 1px solid #333;
  width: 40px;
  text-align: center;
}
.hospital {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 8px 0;
}
.sub-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
}

/* 患者信息表格 */
.patient-info {
  margin: 12px 0;
}
.info-row {
  display: flex;
  padding: 6px 4px;
}
.info-row:last-child {
  border-bottom: none;
}
.info-item {
  padding: 0 4px;
  white-space: nowrap;
}
.full-width {
  width: 100% !important;
}

/* 诊断区域 */
.diagnosis-section {
  margin: 15px 0;
}
.diagnosis-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.date {
  font-size: 13px;
  color: #666;
}

/* 药品处方 */
.medicine-section {
  position: relative;
  padding-left: 30px;
  margin: 18px 0;
}
.rp-symbol {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}
.medicine-item {
  margin-bottom: 15px;
}
.medicine-name {
  font-weight: bold;
}
.medicine-spec {
  color: #666;
  margin: 3px 0;
}

/* 底部签章 */
.footer {
  border-top: 1px dashed #999;
  padding-top: 15px;
  margin-top: 20px;
}
.stamp-area {
  margin-bottom: 15px;
}
.signatures {
  display: flex;
  margin-top: 15px;
}
.signature-item {
  padding: 0 8px;
}
.stamp {
  color: red;
  font-weight: bold;
  margin-top: 25px;
}
.notice {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 15px;
}
/* 移动端适配 */
@media (max-width: 480px) {
  .prescription-container {
    padding: 12px;
    font-size: 13px;
  }
  .hospital {
    font-size: 16px;
  }
  .info-item {
    white-space: normal;
  }
  .sub-header {
    flex-direction: column;
  }
  .no {
    margin-top: 5px;
  }
}
</style>