Elizabeth's proactive approach involves introducing urinal toilet attachment , an ingenious concept that optimizes space and functionality.

printTwo.vue 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. <template>
  2. <div id='prescriptionPrint2'>
  3. <div id='prescription-print' v-if="item.advices.length == 0" class="prescription-print" v-for="(item,index) in advicePrint" :key="index">
  4. <img src="https://kuyi.shengws.com/bailin/bltotle.jpg" style="width:100%" alt="">
  5. <div class="printTitle">治疗单
  6. <span v-if="item.med_type == '1111'" style="margin-left: 50px;border: 1px solid #000;">精一</span>
  7. <span v-if="item.med_type == '1112'" style="margin-left: 50px;border: 1px solid #000;">精二</span>
  8. </div>
  9. <div style="display:flex;">
  10. <div style="width:33%;display:flex;">费别:<span class="under_line">{{ faber && faber.transBody ? getName(faber.transBody.outputlist1) : '自费' }}</span></div>
  11. <div style="width:33%;display:flex;">电脑号:<span class="under_line">{{ faber && faber.transBody ? faber.transBody.aac999 : '' }}</span></div>
  12. <div style="width:33%;display:flex;">处方编号:<span class="under_line">{{ item.prescription_number.substring(item.prescription_number.length-6) }}</span></div>
  13. </div>
  14. <div class="infoTitle">
  15. <div>姓名:{{item.patient.name? item.patient.name.indexOf("(") > -1 ? item.patient.name.substring(0,item.patient.name.indexOf("(")) : item.patient.name :""}}</div>
  16. <div>性别:
  17. <span v-if="item.patient.gender == 1">男</span>
  18. <span v-if="item.patient.gender == 2">女</span>
  19. </div>
  20. <div>年龄:{{getNewAge(item.patient.birthday)?getNewAge(item.patient.birthday):""}}岁</div>
  21. </div>
  22. <div class="infoMain">
  23. <div style="margin-bottom: 10px;display:flex;">门诊号码:<span class="under_line">{{hisPatient.number?hisPatient.number:""}}</span></div>
  24. <div style="margin-bottom: 10px;display:flex;">科别:<span class="under_line">{{item.info?getDepart(item.info.departments):''}}</span></div>
  25. <div style="margin-bottom: 10px;display:flex;">临床诊断:{{getDiagnosis(item.info.diagnosis)}}</div>
  26. <div style="margin-bottom: 10px;display:flex;">自费药品签名:<span class="under_line"></span></div>
  27. <!-- <div style="margin-bottom: 10px;display:flex;">医保卡号:{{item.hisPatient.number?item.hisPatient.number:""}}</div> -->
  28. <div style="margin-bottom: 10px;display:flex;">联系方式:<span class="under_line">{{item.patient.phone}}</span></div>
  29. <div style="margin-bottom: 10px;display:flex;">开具日期:<span class="under_line">{{getTime(item.pre_time) ? getTime(item.pre_time).split(' ')[0] : ''}}</span></div>
  30. <!-- <div>地址:{{item.patient.home_address}}</div> -->
  31. <!-- <div style="display:flex;width:50%;">临床诊断:{{getDiagnosis(item.info.diagnosis)}}</div> -->
  32. </div>
  33. <!-- <div class="prescriptionBox">
  34. <table style="width:100%;text-align:center;line-height:25px;">
  35. <tr>
  36. <td>序号</td>
  37. <td>项目名称</td>
  38. <td>数量</td>
  39. <td>单位</td>
  40. <td>单价</td>
  41. <td>部位</td>
  42. <td>备注</td>
  43. <td>天数</td>
  44. </tr>
  45. <tr v-for="(it,index) in item.project" :key="index">
  46. <td>{{index+1}}</td>
  47. <td>{{it.type == 2 ?getProjectName(it.project_id):it.good_info.good_name}}</td>
  48. <td>{{it.single_dose}}</td>
  49. <td>{{getUnit(it.unit)}}</td>
  50. <td>{{it.price}}</td>
  51. <td></td>
  52. <td>{{it.remark}}</td>
  53. <td>{{it.day}}</td>
  54. </tr>
  55. <tr v-for="(it,index) in item.advices" :key="index">
  56. <td>{{index+1}}</td>
  57. <td>{{it.advice_name?it.advice_name:''}}</td>
  58. <td>{{it.single_dose?it.single_dose:''}}</td>
  59. <td>{{it.single_dose_unit?it.single_dose_unit:''}}</td>
  60. <td>{{it.price}}</td>
  61. <td></td>
  62. <td>{{it.remark}}</td>
  63. <td>{{it.day}}</td>
  64. </tr>
  65. </table>
  66. </div> -->
  67. <div class="prescriptionBox">
  68. <div class="Rp">Rp:</div>
  69. <!-- <div class="drugsBox" v-for="(it,index) in item.advices" :key="index">
  70. <div class="drugsOne"><span style="font-weight:bold;">{{ index+1 + '.' }}</span>{{it.advice_name?it.advice_name:""}}&nbsp;&nbsp;<span v-if="it.drug.min_unit != it.drug.dose_unit">{{it.drug.dose}}{{it.drug.dose_unit}}&nbsp;* &nbsp;</span>{{it.drug.min_number}}{{it.drug.min_unit}}/{{it.drug.max_unit}}&nbsp;×&nbsp; {{it.prescribing_number}}{{it.prescribing_number_unit}}</div>
  71. </div> -->
  72. <div class="drugsBox" v-for="(it,index) in item.project" :key="index">
  73. <div class="drugsOne"><span style="font-weight:bold;">{{ index+1 + '.' }}</span>{{ it.type == 2 ? it.project.project_name : it.good_info.good_name }}&nbsp;&nbsp;×&nbsp; {{it.count}}{{unit}}</div>
  74. </div>
  75. <div style="text-align:center;" >(以下空白)</div>
  76. </div>
  77. <div style="display:flex;">
  78. <div>医&nbsp;&nbsp;&nbsp;&nbsp;师:<span style="width:100px;display:inline-block;">{{item.doctor?item.doctor:""}}</span></div>
  79. <!-- <div>药品金额:{{getTotalOne(item.id).toFixed(2)?getTotalOne(item.id).toFixed(2):''}}</div> -->
  80. </div>
  81. <div style="display:flex;">
  82. <div style="display:flex;">核对护士:</div>
  83. </div>
  84. <div style="display:flex;">
  85. 打印时间:<span style="border-bottom:1px solid #000;">{{getTime(new Date())?getTime(new Date()):""}}</span>
  86. </div>
  87. <img src="https://kuyi.shengws.com/bailin/blend.jpg" style="width:100%" alt="">
  88. <div style="page-break-after:always"></div>
  89. </div>
  90. <!-- <div id='prescriptionPrint'>
  91. <div v-for="(item,index) in advicePrint" :key="index">
  92. <div id='prescription-print' class="prescription-print" style="page-break-after: always;">
  93. <div style="display:flex;justify-content: space-between;font-weight:bold;">
  94. <div style="width:200px;display:flex;justify-content: space-between;font-weight:bold;">
  95. <span>费别</span>
  96. <span>自费</span>
  97. <span>公费</span>
  98. <span>保险</span>
  99. <span>其他</span>
  100. </div>
  101. <div>就诊日期:{{getTime(item.ctime)}}</div>
  102. </div>
  103. <div class="printTitle">血液透析中心</div>
  104. <div class="printTitle">处方、治疗单</div>
  105. <div class="infoTitle">
  106. <div>门诊编号:</div>
  107. <div>电脑号:</div>
  108. </div>
  109. <div class="infoMain">
  110. <div style="margin-bottom: 10px;width:25%">姓名:{{item.patient.name}}</div>
  111. <div style="margin-bottom: 10px;width:25%">性别:
  112. <span v-if="item.patient.gender == 1">男</span>
  113. <span v-if="item.patient.gender == 2">女</span>
  114. </div>
  115. <div style="margin-bottom: 10px;width:25%">年龄:
  116. <span>{{item.patient.age}}</span>
  117. </div>
  118. <div style="margin-bottom: 10px;width:25%">参保类型:</div>
  119. <div style="margin-bottom: 10px;width:50%;">联系电话:{{item.patient.phone}}</div>
  120. <div style="width:50%;">地址:{{item.patient.unit_address}}</div>
  121. <div style="width:100%;">诊断:{{item.patient.diagnose}}</div>
  122. </div>
  123. <div class="prescriptionBox">
  124. <table style="width:100%;text-align:center;line-height:25px;">
  125. <tr>
  126. <td>序号</td>
  127. <td>项目名称</td>
  128. <td>数量</td>
  129. <td>单位</td>
  130. <td>单价</td>
  131. <td>部位</td>
  132. <td>备注</td>
  133. <td>天数</td>
  134. </tr>
  135. <tr v-for="(it,index) in item.project" :key="index">
  136. <td>{{index+1}}</td>
  137. <td>{{getProjectName(it.project_id)}}</td>
  138. <td>{{it.single_dose}}</td>
  139. <td>{{getUnit(it.unit)}}</td>
  140. <td>{{it.price}}</td>
  141. <td></td>
  142. <td>{{it.remark}}</td>
  143. <td>{{it.day}}</td>
  144. </tr>
  145. </table>
  146. </div>
  147. <div class="infoTitle">
  148. <div>开单医生:{{getDoctor(item.doctor)?getDoctor(item.doctor):""}}</div>
  149. <div>签章:</div>
  150. </div>
  151. <div class="actionBar">
  152. <div>执行医生:{{getDoctor(item.doctor)?getDoctor(item.doctor):""}}</div>
  153. <div>费用:</div>
  154. </div>
  155. <table style="width:100%;text-align:center;line-height:25px;border-collapse: collapse;" border="1">
  156. <tr>
  157. <td style="width:16%;">治疗时间</td>
  158. <td style="width:16%;"></td>
  159. <td style="width:16%;"></td>
  160. <td style="width:16%;"></td>
  161. <td style="width:16%;"></td>
  162. <td style="width:16%;"></td>
  163. </tr>
  164. <tr>
  165. <td style="width:16%;">医生签字</td>
  166. <td style="width:16%;"></td>
  167. <td style="width:16%;"></td>
  168. <td style="width:16%;"></td>
  169. <td style="width:16%;"></td>
  170. <td style="width:16%;"></td>
  171. </tr>
  172. <tr>
  173. <td style="width:16px;">患者签字</td>
  174. <td style="width:16px;"></td>
  175. <td style="width:16px;"></td>
  176. <td style="width:16px;"></td>
  177. <td style="width:16px;"></td>
  178. <td style="width:16px;"></td>
  179. </tr>
  180. </table>
  181. </div>
  182. </div>
  183. </div> -->
  184. </div>
  185. </template>
  186. <script>
  187. import { jsGetAge, uParseTime } from '@/utils/tools'
  188. import {getAllDoctorList,getPrescriptionPrint} from "@/api/project/project"
  189. import {getInitData} from "@/api/his/his"
  190. export default {
  191. props:{
  192. patient_id:Number,
  193. record_date:String,
  194. prescription_id:Number,
  195. ids:String
  196. },
  197. data(){
  198. return {
  199. doctorList:[],
  200. advicePrint:{},
  201. patient:{},
  202. tableData:[],
  203. prescriptionInfo:[],
  204. projectList:[],
  205. prescriptions:[],
  206. settlement:
  207. [
  208. {value: 1,label: '医保'},
  209. {value: 2,label: '自费'},
  210. {value: 3,label:'公费'},
  211. {value: 4,label:'农保'},
  212. {value: 5,label:'会员'},
  213. {value: 6,label:'职工'},
  214. {value: 7,label:'合同'}
  215. ],
  216. hisPatient:{},
  217. diagnoses:[],
  218. department:[],
  219. faber:{},
  220. }
  221. },
  222. methods:{
  223. getNewAge(birthday){
  224. // var myDate = new Date(birthday * 1000)
  225. // var month = myDate.getMonth() + 1
  226. // var day = myDate.getDate()
  227. // var age = new Date().getFullYear() - myDate.getFullYear()
  228. // if (month < new Date().getMonth() + 1 || new Date().getMonth() + 1 == month && day <= new Date().getDate()) {
  229. // age++
  230. // }
  231. // return age
  232. var nowTime = new Date().getTime();
  233. //一年毫秒数(365 * 86400000 = 31536000000)
  234. return Math.ceil((nowTime-(birthday * 1000))/31536000000);
  235. },
  236. getAge(patient){
  237. var thisLen = patient.id_card_no.length
  238. var birth = ''
  239. if (thisLen == 15) {
  240. birth = '19' + patient.id_card_no.substr(6, 6)
  241. } else {
  242. birth = patient.id_card_no.substr(6, 8)
  243. }
  244. var births =
  245. birth.substr(0, 4) +
  246. '-' +
  247. birth.substr(4, 2) +
  248. '-' +
  249. birth.substr(6, 2)
  250. return jsGetAge(births, '-')
  251. },
  252. printThisPage() {
  253. var ptime = Math.round(new Date().getTime() / 1000);
  254. this.print_time = uParseTime(ptime, "{y}-{m}-{d} {h}:{i}");
  255. const style =
  256. '@media print {.printTitle{font-size: 22px;text-align: center;font-weight: bold;}.infoTitle{display: flex;margin-top:10px;line-height: 1px;padding:0 10px;}.infoTitle p{width: 200px;}.otherInfo{display: flex;margin-top:10px;padding:0 10px;}.otherInfo span{display:inline-block;}.recordTitle{display: flex;margin-top:10px;line-height: 24px;padding:0 10px;border-bottom: 2px solid #000;}.recordTitle p{width: 200px;}}';
  257. printJS({
  258. printable: "prescription-print",
  259. type: "html",
  260. style: style,
  261. scanStyles: false
  262. });
  263. },
  264. getDepart(id){
  265. var name = ""
  266. for(let i=0;i<this.department.length;i++){
  267. if(id == this.department[i].id){
  268. name = this.department[i].name
  269. }
  270. }
  271. return name
  272. },
  273. getAllDoctorList(){
  274. getAllDoctorList().then(response=>{
  275. if(response.data.state == 1){
  276. var doctor = response.data.data.doctor
  277. this.doctorList = doctor
  278. }
  279. })
  280. },
  281. getDoctor(id){
  282. var name = ""
  283. for(let i=0;i<this.doctorList.length;i++){
  284. if(id == this.doctorList[i].admin_user_id){
  285. name = this.doctorList[i].user_name
  286. }
  287. }
  288. return name
  289. },
  290. getTime(value, temp) {
  291. if (value != undefined) {
  292. return uParseTime(value, temp)
  293. }
  294. return ''
  295. },
  296. getPrescriptionPrint(){
  297. var params = {
  298. patient_id:this.patient_id,
  299. record_date:this.record_date,
  300. prescription_id:this.prescription_id,
  301. ids:this.ids,
  302. p_type:2,
  303. }
  304. console.log("999999",params)
  305. getPrescriptionPrint(params).then(response=>{
  306. if(response.data.state == 1){
  307. var advicePrint = response.data.data.advicePrint
  308. console.log("adviceprint",advicePrint)
  309. this.advicePrint = advicePrint
  310. this.prescriptions = advicePrint
  311. var projectlist = response.data.data.projectlist
  312. console.log("所有项目列表",projectlist)
  313. this.projectList = projectlist
  314. this.hisPatient = response.data.data.hisPatient
  315. let projectPrint = []
  316. let total = 0
  317. this.advicePrint.map(item => {
  318. console.log(item.project.length)
  319. if(item.project.length > 0){
  320. for(var i=item.project.length-1;i>=0;i--){
  321. if(item.project[i].type==2){
  322. if(item.project[i].project.cost_classify == 3){
  323. item.project.splice(i,1);
  324. }
  325. }
  326. }
  327. }
  328. })
  329. let outputlist1Name = JSON.parse(response.data.data.his.patient_info);
  330. this.faber = outputlist1Name
  331. }
  332. })
  333. },
  334. getProjectName(id){
  335. var project_name = ""
  336. for(let i=0;i<this.projectList.length;i++){
  337. if(id == this.projectList[i].id){
  338. project_name = this.projectList[i].project_name
  339. }
  340. }
  341. return project_name
  342. },
  343. getUnit(id){
  344. var unit=""
  345. for(let i=0;i<this.projectList.length;i++){
  346. if(id == this.projectList[i].id){
  347. unit = this.projectList[i].unit
  348. }
  349. }
  350. return unit
  351. },
  352. getTotalOne(id) {
  353. var total = 0
  354. var addtotal = 0
  355. for (let i = 0; i < this.prescriptions.length; i++) {
  356. if(id == this.prescriptions[i].id){
  357. if (this.prescriptions[i].project != null) {
  358. for (let a = 0; a < this.prescriptions[i].project.length; a++) {
  359. total = total + this.prescriptions[i].project[a].price * this.prescriptions[i].project[a].count
  360. }
  361. }
  362. if (this.prescriptions[i].additionalcharge != null) {
  363. for (let a = 0; a < this.prescriptions[i].additionalcharge.length; a++) {
  364. addtotal = addtotal + this.prescriptions[i].additionalcharge[a].price * this.prescriptions[i].additionalcharge[a].count
  365. }
  366. }
  367. addtotal = Math.floor(addtotal * 100) / 100
  368. }
  369. }
  370. for (let i = 0; i < this.prescriptions.length; i++) {
  371. if(id == this.prescriptions[i].id){
  372. if (this.prescriptions[i].advices != null) {
  373. for (let a = 0; a < this.prescriptions[i].advices.length; a++) {
  374. total = total + this.prescriptions[i].advices[a].price * this.prescriptions[i].advices[a].prescribing_number
  375. }
  376. }
  377. if (this.prescriptions[i].additionalcharge != null) {
  378. for (let a = 0; a < this.prescriptions[i].additionalcharge.length; a++) {
  379. addtotal = addtotal + this.prescriptions[i].additionalcharge[a].price * this.prescriptions[i].additionalcharge[a].count
  380. }
  381. }
  382. addtotal = Math.floor(addtotal * 100) / 100
  383. }
  384. }
  385. return total + addtotal
  386. },
  387. getInitData(){
  388. getInitData().then(response=>{
  389. if(response.data.state == 1){
  390. this.department = response.data.data.department
  391. this.diagnoses = response.data.data.diagnose.sort(this.compare('id'))
  392. console.log("争端",this.diagnoses)
  393. }
  394. })
  395. },
  396. getDiagnosis(ids){
  397. let newIds = ids.split(',').sort(function(a,b){
  398. return a-b;
  399. })
  400. var name = ""
  401. let nameArr = []
  402. for(let i=0;i<this.diagnoses.length;i++){
  403. // if(id == this.diagnoses[i].id){
  404. // name = this.diagnoses[i].class_name
  405. // }
  406. if(newIds.indexOf(this.diagnoses[i].id.toString()) > -1){
  407. // name += diagnoses[i].class_name + ' '
  408. nameArr.push(this.diagnoses[i].class_name)
  409. }
  410. }
  411. let newNameArr = []
  412. nameArr.map((item,index) => {
  413. if(item == '尿毒症'){
  414. newNameArr.push(item)
  415. nameArr.splice(index,1,'')
  416. }
  417. })
  418. newNameArr.push(...nameArr)
  419. return newNameArr.join(' ')
  420. },
  421. compare(property) {
  422. return function(a,b){
  423. var value1 = a[property];
  424. var value2 = b[property];
  425. return value1 - value2;//升序排序
  426. }
  427. },
  428. getName(list) {
  429. console.log('list22',list)
  430. let new_list = []
  431. for (let i = 0; i < list.length; i++) {
  432. if (list[i].aac031 == '1') {
  433. new_list.push(list[i])
  434. }
  435. }
  436. switch (new_list[0].bcc334) {
  437. case "A31001":
  438. return "深圳医保1档"
  439. break
  440. case "A31002":
  441. return "深圳医保2档"
  442. break
  443. case "A31003":
  444. return "深圳医保3档"
  445. break
  446. case "A31004":
  447. return "二档(少儿)"
  448. break
  449. case "A31005":
  450. return "学生二档"
  451. break
  452. case "A31006":
  453. return "大学生二档"
  454. break
  455. case "A32001":
  456. return "在职公务员"
  457. break
  458. case "A32002":
  459. return "在职驻深公务员"
  460. break
  461. case "A39301":
  462. return "家属统筹医疗"
  463. break
  464. case "A41001":
  465. return "工伤在职"
  466. break
  467. case "A51001":
  468. return "生育在职"
  469. break
  470. case "A52001":
  471. return "生育医疗一档"
  472. break
  473. case "A52002":
  474. return "生育医疗一档"
  475. break
  476. case "C31001":
  477. return "一档医疗退休"
  478. break
  479. case "C31002":
  480. return "二档医疗退休"
  481. break
  482. }
  483. },
  484. },
  485. created(){
  486. this.getInitData()
  487. this.getAllDoctorList()
  488. this.getPrescriptionPrint()
  489. var xtuser = this.$store.getters.xt_user
  490. this.orgname = xtuser.org.org_name
  491. },
  492. watch:{
  493. patient_id:function(val){
  494. console.log("101000010101010",this.patient_id,this.record_date,this.prescription_id)
  495. // this.getPrescriptionPrint()
  496. },
  497. ids:function(val){
  498. this.ids = val
  499. console.log('this.idsids',this.ids)
  500. this.getPrescriptionPrint()
  501. }
  502. }
  503. }
  504. </script>
  505. <style lang="scss" scoped>
  506. .prescription-print{
  507. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
  508. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  509. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  510. margin-bottom: 20px;
  511. padding:20px 10px;
  512. }
  513. .printTitle{
  514. font-size: 22px;
  515. text-align: center;
  516. font-weight: bold;
  517. margin-bottom: 10px;
  518. }
  519. .infoTitle{
  520. display: flex;
  521. margin-top:10px;
  522. line-height: 24px;
  523. }
  524. .infoTitle div{
  525. width: 200px;
  526. }
  527. .infoMain{
  528. display: flex;
  529. flex-wrap: wrap;
  530. margin-top:10px;
  531. }
  532. .infoMain div{
  533. width: 50%;
  534. line-height: 24px;
  535. }
  536. .prescriptionBox{
  537. padding:0 10px;
  538. min-height:400px;
  539. }
  540. .Rp{
  541. font-size: 22px;
  542. font-weight: bold;
  543. }
  544. .drugsBox{
  545. padding-left: 40px;
  546. margin-bottom: 10px;
  547. }
  548. .drugsBox div{
  549. line-height: 20px;
  550. }
  551. .drugsOne{
  552. line-height: 24px;
  553. }
  554. .drugsOne span{
  555. margin-right: 20px;
  556. }
  557. .doctorBox{
  558. display: flex;
  559. justify-content: space-between;
  560. padding:0 10px;
  561. line-height: 24px;
  562. border-bottom: 2px solid #000;
  563. }
  564. .actionBar{
  565. display: flex;
  566. justify-content: space-between;
  567. line-height: 24px;
  568. padding:0 10px;
  569. }
  570. .actionBar p{
  571. width:150px;
  572. }
  573. .under_line{
  574. display: inline-block;
  575. border-bottom: 1px solid #000;
  576. flex: 1;
  577. }
  578. </style>