<template> <div class="content"> <div class="containerQuali"> <div class="left"> <div class="title">缁撲笟璇佷功</div> <div class="headphoto"><image :src="trainCertificateInfo.url" /></div> <div class="infolist"> <div class="infolistul"> <span class="infolistspan info4"><span class="infostrong">璇佷功缂栧彿</span><span class="infoem">{{trainCertificateInfo.number || ""}}</span></span> </div> </div> </div> <div class="right"> <div class="nr1" style="margin-bottom: 10px;margin-left: 0;"><span class="nrname" style="margin-left: 0;">{{trainCertificateInfo.name}}</span>:</div> <div class="nr2" style="span-indent: 20px"> 浜� 骞� 鏈� 鏃ヨ嚦 骞� 鏈� 鏃ワ紝鍙傚姞</div> <div style="height: 25px;" /> <div class="nr4" style="span-indent: 20px">淇濆畨鍛樻妧鑳藉煿璁紝瀹屾垚鍩硅璁″垝瑙勫畾鐨勬墍鏈夎绋嬶紝鎴愮哗鍚堟牸锛屽噯浜堢粨涓氥€�</div> <div class="nr5"><span class="nrfztitle">棰佸彂鏃ユ湡锛�</span><span class="nrfzDate">{{trainCertificateInfo.createdTime || ""}}</span></div> </div> </div> <image @tap="showTraingCertificate = false" style="width: 40px; height: 40px" src="/static/images/work/close icon@2x.png" mode=""></image> </div> </template> <script> export default { name: 'Certificate', data() { return { showTraingCertificate: true, trainCertificateInfo: {} }; }, computed: {}, mounted() { this.init(); }, methods: { init() { } } } </script> <style scoped> .content {} .containerQuali{margin:0 auto;font-size: 22px;font-family:'STSongti-SC-Regular','STSongti-SC';font-weight: 400;color: #000000;line-height: 30px;width: 690px; height: 509px;background: url(https://bcxin-saas-prod.obs.cn-north-1.myhuaweicloud.com:443/upload%2F2021-05-29%2F1622274317112085838.png) no-repeat 0 0;background-size:100% 100%;} .containerQuali .title { text-align: center; margin-bottom: 16px; font-size: 16px; font-weight: bold; } .containerQuali .left{display: inline;float: left;width: 300px;margin-left:25px;padding-top: 57px;} .containerQuali .headphoto{width: 107px;height: 138px;margin: 0 auto;} .containerQuali .headphoto uni-image{width: 107px;height: 138px;border: 1px solid #000000;} .containerQuali .infolist{margin-top:34px;} .containerQuali .infolist .infolistul{width: 100%;display: block;padding: 0;} .containerQuali .infolist .infolistul .infolistspan{ display: inline-block;width: 100%;height:28px;line-height: 28px;font-weight: 400;font-size: 20px;} .containerQuali .infolist .infolistul .infolistspan .infostrong{display: inline;float: left;width: 100px;position: relative;} .containerQuali .infolist .infolistul .infolistspan .infostrong::after{ position: absolute; left: 80%; content: "\FF1A"; } .containerQuali .infolist .infolistul .infolistspan .infoem{display: inline;float: left;width: 200px;} .containerQuali .infolist .infolistul .infolistspan.info3{height: 84px;} .containerQuali .infolist .infolistul .infolistspan.info3 .infoem{height: 84px;} .containerQuali .info4{margin-top: 39px;} .containerQuali .info4 .infoem{font-size: 22px;letter-spacing: 0px;height: 30px;line-height: 30px;} .containerQuali .right{display: inline; float: right;width:296px;margin-right: 25px;margin-top: 52px;height:28px;line-height: 28px;font-size: 22px;font-weight: 400;} .containerQuali .nr1{height:30px;line-height: 30px;margin-bottom: 11px;} .containerQuali .nr1 .nrname{border-bottom: 1px solid #000000;width: 181px;display: inline-block;text-align: center;margin-left:44px;} .containerQuali .nr2{height:30px;line-height: 30px;margin-bottom: 6px;} .containerQuali .nr3{} .containerQuali .nr4{width:100%;height: 172px;} .containerQuali .nr5{margin-bottom: 74px;font-size: 20px;height:28px;line-height: 28px;} .containerQuali .nr6{font-size: 20px;height:28px;line-height: 28px;} </style>