elizebeth/src/xt_pages/outpatientCharges/statementTemplate/printTen.vue

<template>
  <div  id="statement-print" class="statement-print"
       style="position: relative;">
    <div class="print-content">
      <div class="print-title">
        <h1 style="text-align: center;">江西省医疗保障定点机构医疗费用结算单</h1>
      </div>

      <div class="print-tab" style="margin: 0px auto; text-align: center;">
        <div class="hospital" style="margin:0px 112px ;width: 70%;">
          <!-- style="display: inline-block;margin: 10px 80px 10px 0px ;" -->
          <span class="yiliao" style="display: inline-block;margin: 10px 80px 10px 0px ;">
                        <span>医疗机构名称：</span>
                        <span>{{info.fixmedins_name}}</span>
                    </span>
          <span class="yiliao" style="display: inline-block;margin: 10px 80px 10px 0px ;">
                        <span>医疗机构编码：</span>
                        <span>{{info.fixmedins_code}}</span>
                    </span>
          <span class="yiliao" style="display: inline-block;margin: 10px 80px 10px 0px ;">
                        <span>医院等级：</span>
                        <span  v-if="info.hosp_lv == '1'">三级特等</span>
                        <span  v-else-if="info.hosp_lv == '2'">三级甲等</span>
                        <span v-else-if="info.hosp_lv == '3'">三级乙等</span>
                        <span v-else-if="info.hosp_lv == '4'">三级丙等</span>
                        <span v-else-if="info.hosp_lv == '5'">二级甲等</span>
                        <span v-else-if="info.hosp_lv == '6'">二级乙等</span>
                        <span v-else-if="info.hosp_lv == '7'">二级丙等</span>
                        <span  v-else-if="info.hosp_lv == '8'">一级甲等</span>
                        <span v-else-if="info.hosp_lv == '9'">一级乙等</span>
                        <span v-else-if="info.hosp_lv == '10'">一级丙等</span>
                        <span  v-else-if="info.hosp_lv == '11'">无等级</span>
                        <span  v-else></span>
          </span>
        </div>
        <table class="jiesuan" style="border-collapse: collapse;margin: auto;">
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">姓名</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.psn_name}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">性别</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.gend == '1'">男</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.gend == '2'">女</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else></td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">人员类别</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.psn_type == '11'">在职</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1101'">职工在职</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1102'">公务员在职</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1103'">灵活就业人员在职</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1160'">地方其他扩展人员</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '12'">退休人员</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1201'">职工退休</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1202'">公务员退休</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1203'">灵活就业人员退休</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1260'">地方其他扩展人员</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '13'">离休</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1300'">离休人员</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1360'">地方其他扩展人员</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '14'">居民(未成年)</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1401'">新生儿</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1402'">学龄前儿童</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1403'">中小学生</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1404'">大学生</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1405'">未成年(未入学)</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '15'">居民(成年)</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1501'">普通居民(成年)</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '1560'">地方其他扩展身份</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else-if="info.psn_type == '16'">居民(老年)</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-else></td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">身份证号码</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.certno}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">参保险种</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '310'">职工基本医疗保险</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '320'">公务员医疗补助</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '330'">大额医疗费用补助</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '340'">离休人员医疗保障</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '390'">城乡居民基本医疗保险</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '392'">城乡居民大病医疗保险</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.insutype == '510'">生育保险</td>

            <td style="border: 1px solid gray;width: 150px;height: 30px;">医疗类别</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '11'">普通门诊</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '12'">门诊挂号</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '13'">急诊</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '14'">门诊特殊病</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '15'">门诊统筹</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '16'">门诊慢性病</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;" v-if="info.med_type == '21'">普通住院</td>

          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">结算ID</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.setl_id}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">住院号</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.number}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">住院天数</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{getDay(info.begndate,info.enddate)}}</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">科室</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{'血透'}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">床号</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;"></td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">参保区划</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.insu_optins}}</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">入院日期</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.begndate ? info.begndate.split(' ')[0] : ''}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">出院日期</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.enddate ? info.enddate.split(' ')[0] : ''}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">结算日期</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.setl_time ? info.setl_time.split(' ')[0] : ''}}</td>
          </tr>
          <tr>
            <td colspan="6" style="border: 1px solid gray;width: 150px;height: 30px;"> 费用分类情况</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">项目名称</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">总金额</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">符合政策范围</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">先行自付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">超限价</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">自费</td>
          </tr>
          <tr v-if="info.bed_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">床位费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.bed_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.bedInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.bed_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.bed_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.bedSelfTotal}}</td>

          </tr>

          <tr v-if="info.operation_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">手术费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.operation_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.operationInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.operation_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.operation_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.operationSelfTotal}}</td>

          </tr>

          <tr v-if="info.check_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">检查费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.check_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.checkInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.check_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.check_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.checkSelfTotal}}</td>

          </tr>

          <tr v-if="info.treat_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">治疗费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.treat_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.treatInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.treat_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.treat_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.treatSelfTotal}}</td>

          </tr>

          <tr v-if="info.treat_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">化验费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.laboratory_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.laboratoryInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.laboratory_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.laboratory_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.laboratorySelfTotal}}</td>

          </tr>


          <tr v-if="info.western_medicine_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">西药费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.western_medicine_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.westernMedicineInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.western_medicine_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.western_medicine_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.westernMedicineSelfTotal}}</td>

          </tr>

          <tr v-if="info.material_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">材料费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.material_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.materialInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.material_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.material_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.materialSelfTotal}}</td>

          </tr>
          <tr v-if="info.other_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">其他费</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.other_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.otherInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.other_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.other_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.otherSelfTotal}}</td>
          </tr>

          <tr v-if="info.chinese_traditional_medicine_cost_total > 0">
            <td style="border: 1px solid gray;width: 150px;height: 30px;">中成药</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.chinese_traditional_medicine_cost_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.chineseTraditionalInscpTotal}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.chinese_traditional_medicine_cost_part_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.chinese_traditional_medicine_cost_self_total}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.chineseTraditionalSelfTotal}}</td>
          </tr>

          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">金额合计</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{(parseFloat(info.bed_cost_total) +
              parseFloat(info.operation_cost_total) + parseFloat(info.other_cost_total) +
              parseFloat(info.material_cost_total) + parseFloat(info.western_medicine_cost_total) +
              parseFloat(info.chinese_traditional_medicine_cost_total) + parseFloat(info.check_cost_total) +
              parseFloat(info.laboratory_cost_total) + parseFloat(info.treat_cost_total)).toFixed(2) }}
            </td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{(parseFloat(info.bedInscpTotal) +
              parseFloat(info.operationInscpTotal) + parseFloat(info.checkInscpTotal) +
              parseFloat(info.treatInscpTotal) + parseFloat(info.laboratoryInscpTotal) +
              parseFloat(info.westernMedicineInscpTotal) + parseFloat(info.materialInscpTotal) +
              parseFloat(info.otherInscpTotal) + parseFloat(info.chineseTraditionalInscpTotal)).toFixed(2) }}
            </td>

            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{(parseFloat(info.bed_cost_part_self_total) +
              parseFloat(info.operation_cost_part_self_total) + parseFloat(info.other_cost_part_self_total) +
              parseFloat(info.material_cost_part_self_total) + parseFloat(info.western_medicine_cost_part_self_total) +
              parseFloat(info.chinese_traditional_medicine_cost_part_self_total) +
              parseFloat(info.check_cost_part_self_total) + parseFloat(info.laboratory_cost_part_self_total) +
              parseFloat(info.treat_cost_part_self_total)).toFixed(2)}}
            </td>

            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{(parseFloat(info.bed_cost_self_total )+
              parseFloat(info.operation_cost_self_total) + parseFloat(info.other_cost_self_total) +
              parseFloat(info.material_cost_self_total) + parseFloat(info.western_medicine_cost_self_total) +
              parseFloat(info.chinese_traditional_medicine_cost_self_total) + parseFloat(info.check_cost_self_total) +
              parseFloat(info.laboratory_cost_self_total) + parseFloat(info.treat_cost_self_total)).toFixed(2)}}
            </td>

            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{(parseFloat(info.bedSelfTotal) +
              parseFloat(info.operationSelfTotal) + parseFloat(info.checkSelfTotal) +
              parseFloat(info.treatSelfTotal) + parseFloat(info.laboratorySelfTotal) +
              parseFloat(info.westernMedicineSelfTotal) + parseFloat(info.materialSelfTotal) +
              parseFloat(info.otherSelfTotal) + parseFloat(info.chineseTraditionalSelfTotal)).toFixed(2) }}
            </td>

          </tr>

          <tr>
            <td colspan="6" style="border: 1px solid gray;width: 150px;height: 30px;"> 费用结算情况</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">费用总额</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.medfee_sumamt}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">统筹基金支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.hifp_pay}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">大病保险支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.hifmi_pay}}</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">医疗救助支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.maf_pay}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">公务员补充支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.cvlserv_pay}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">离休保健专项</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;"></td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">个人账户支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.acct_pay}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">个人现金支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.psn_cash_pay}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">其他基金支付</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.oth_pay}}</td>
          </tr>
          <tr>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">起付线</td>
            <td colspan="2" style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.act_pay_dedc}}</td>
            <td style="border: 1px solid gray;width: 150px;height: 30px;">医院垫付金额</td>
            <td colspan="2" style="border: 1px solid gray;width: 150px;height: 30px;">{{info.new_order.hosp_part_amt}}</td>
          </tr>
        </table>
        <div style="width: 51%; margin: 5px 100px; text-align: center;">
         <span style="display: inline-block;"> 备注：其它包含军转、财政、慈善、其他商报等支付来源</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { getChargePrint } from '@/api/project/project'
import { uParseTime } from '@/utils/tools'

export default {
data() {
  return {
    list: {},
    prescription: [],
    patient: {},
    orgname: '',

    result: {},
    org_code: '',
    patient_name: '',
    doctor_code: '',
    doctor_name: '',

    name_arr: [],
    spec_arr: [],
    count_arr: [],
    price_arr: [],
    total_arr: []

  }
},
props: {
  paramsObj: Object,
  info: {
    type: Object,
    default: function() {
      return {}
    }
  },
  balanceAccounts: Object
},
methods: {
  getDay(dateString1,dateString2){
    var  startDate = Date.parse(dateString1);
    var  endDate = Date.parse(dateString2);
    if (startDate>endDate){
      return 0;
    }
    if (startDate==endDate){
      return 1;
    }
    var days=(endDate - startDate)/(1*24*60*60*1000);
    return  days;
  },
  getTime(value, temp) {
    if (value != undefined) {
      return uParseTime(value, temp)
    }
    return ''
  }
},
mounted() {


},
watch: {
  paramsObj: {//深度监听，可监听到对象、数组的变化
    handler(val, oldVal) {


    },
    deep: true
  }
}
}
</script>


<style lang="scss" scoped>
.prescription-print {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
margin-bottom: 20px;
padding: 20px 10px;
}

</style>