|
@@ -142,6 +142,86 @@
|
|
|
</div>
|
|
</div>
|
|
|
<index-right-page ref="indexRightPage"></index-right-page>
|
|
<index-right-page ref="indexRightPage"></index-right-page>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!--电子信息牌导出-->
|
|
|
|
|
+ <el-dialog class="subject-dialog" title='' width="1354px" append-to-body
|
|
|
|
|
+ :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
|
|
|
|
|
+ :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
|
|
+ <div class="subject-dialog-button-box">
|
|
|
|
|
+ <p @click="dialogOff">取消</p>
|
|
|
|
|
+ <p @click="downloadImg">下载</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="subject-dialog-print-box" ref="canvasImg">
|
|
|
|
|
+ <div class="subject-dialog-print-big-box">
|
|
|
|
|
+ <!--信息栏-->
|
|
|
|
|
+ <div class="subject-dialog-print-top-box">
|
|
|
|
|
+ <div class="subject-dialog-print-top-left-box">
|
|
|
|
|
+ <div class="subject-dialog-print-top-left-top-box">
|
|
|
|
|
+ <!--实验室名称-->
|
|
|
|
|
+ <div class="subject-dialog-name-box">
|
|
|
|
|
+ <div class="title-box-1">
|
|
|
|
|
+ <div class="title-box-2" :style="'background-color:'+dialogData.filedColor+';'">
|
|
|
|
|
+ <div class="title-box-3">
|
|
|
|
|
+ <p :style="'background-color:'+dialogData.filedColor+';'">{{dialogData.levelName}}丨{{dialogData.typeName}}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="title-p">实验室安全信息牌</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!--实验室信息-->
|
|
|
|
|
+ <div class="subject-dialog-info-box">
|
|
|
|
|
+ <div class="subject-dialog-info-left-box">
|
|
|
|
|
+ <p>实验室名称：{{dialogData.subjectName}} - {{dialogData.room}}</p>
|
|
|
|
|
+ <p>责 任 单 位：{{dialogData.deptName}}</p>
|
|
|
|
|
+ <p>实验室负责人：{{dialogData.adminName}}｜{{dialogData.adminPhone}}</p>
|
|
|
|
|
+ <p>安全责任人：<span v-for="(item,index) in dialogData.safeUserVoList" :key="index">{{item.safeUserName}}｜{{item.safeUserPhone}}{{index==0?' 、':''}}</span></p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="subject-dialog-info-right-box">
|
|
|
|
|
+ <img :src="dialogData.qrCodeUrl">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="subject-dialog-print-top-left-bottom-box">
|
|
|
|
|
+ <!--1号右侧信息栏-->
|
|
|
|
|
+ <div class="subject-dialog-print-top-left-bottom-left-box" v-if="dialogData.dataOne">
|
|
|
|
|
+ <p class="data-title" :style="'background-color:'+dialogData.dataOne.showColour+';'">{{dialogData.dataOne.classifyName}}</p>
|
|
|
|
|
+ <div class="data-for-text" v-if="dialogData.dataOne.classifyType == 1">
|
|
|
|
|
+ <p v-for="(item,index) in dialogData.dataOne.classifyList" :key="index">{{index+1}}、{{item}}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="data-for-img" v-if="dialogData.dataOne.classifyType == 2">
|
|
|
|
|
+ <img v-for="(item,index) in dialogData.dataOne.classifyList" :key="index" :src="item">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!--2号右侧信息栏-->
|
|
|
|
|
+ <div class="subject-dialog-print-top-left-bottom-right-box" v-if="dialogData.dataTwo">
|
|
|
|
|
+ <p class="data-title" :style="'background-color:'+dialogData.dataTwo.showColour+';'">{{dialogData.dataTwo.classifyName}}</p>
|
|
|
|
|
+ <div class="data-for-text" v-if="dialogData.dataTwo.classifyType == 1">
|
|
|
|
|
+ <p v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index">{{index+1}}、{{item}}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="data-for-img" v-if="dialogData.dataTwo.classifyType == 2">
|
|
|
|
|
+ <img v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index" :src="item">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!--3号右侧信息栏-->
|
|
|
|
|
+ <div class="subject-dialog-print-top-right-box" v-if="dialogData.dataThree">
|
|
|
|
|
+ <p class="data-title" :style="'background-color:'+dialogData.dataThree.showColour+';'">{{dialogData.dataThree.classifyName}}</p>
|
|
|
|
|
+ <div class="data-for-text" v-if="dialogData.dataThree.classifyType == 1">
|
|
|
|
|
+ <p v-for="(item,index) in dialogData.dataThree.classifyList" :key="index">{{index+1}}、{{item}}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="data-for-img" v-if="dialogData.dataThree.classifyType == 2">
|
|
|
|
|
+ <img v-for="(item,index) in dialogData.dataThree.classifyList" :key="index" :src="item">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!--特殊类目-->
|
|
|
|
|
+ <div class="subject-dialog-print-button-box" :style="'background:'+dialogData.specialBrandInfo.showColour+';'">
|
|
|
|
|
+ <span v-for="(item,index) in dialogData.specialBrandInfo.classifyList" :key="index">{{item}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="subject-dialog-shade" v-if="dialogShadeType"></div>
|
|
|
|
|
+ </el-dialog>
|
|
|
<!--新增/编辑-->
|
|
<!--新增/编辑-->
|
|
|
<add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
|
|
<add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
|
|
|
<!--准入配置-->
|
|
<!--准入配置-->
|
|
@@ -157,6 +237,7 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
/********************** V3 **********************/
|
|
/********************** V3 **********************/
|
|
|
|
|
+ import html2canvas from 'html2canvas'
|
|
|
import importComponent from "@/components/importComponent/importComponent.vue";
|
|
import importComponent from "@/components/importComponent/importComponent.vue";
|
|
|
import batchQrCodeDialog from "@/components/batchQrCodeDialog/batchQrCodeDialog.vue";
|
|
import batchQrCodeDialog from "@/components/batchQrCodeDialog/batchQrCodeDialog.vue";
|
|
|
import {
|
|
import {
|
|
@@ -193,6 +274,10 @@
|
|
|
return {
|
|
return {
|
|
|
//批量二维码
|
|
//批量二维码
|
|
|
batchQrCodeDialogData:{},
|
|
batchQrCodeDialogData:{},
|
|
|
|
|
+ //电子信息牌
|
|
|
|
|
+ dialogType:false,
|
|
|
|
|
+ dialogData:{},
|
|
|
|
|
+ dialogShadeType:false,
|
|
|
//导入数据
|
|
//导入数据
|
|
|
importConfig:{
|
|
importConfig:{
|
|
|
upLoadApi:'/laboratory/subRelInfo/importSubData', //上传接口地址
|
|
upLoadApi:'/laboratory/subRelInfo/importSubData', //上传接口地址
|
|
@@ -336,13 +421,121 @@
|
|
|
laboratoryBoardExportBoardInfo({
|
|
laboratoryBoardExportBoardInfo({
|
|
|
labId: row.subId,
|
|
labId: row.subId,
|
|
|
}).then(response => {
|
|
}).then(response => {
|
|
|
-
|
|
|
|
|
|
|
+ let textLength = 0;
|
|
|
|
|
+ let textIndex = null;
|
|
|
|
|
+ for(let i=0;i<response.data.nonspecialBrandList.length;i++){
|
|
|
|
|
+ if(response.data.nonspecialBrandList[i].classifyType == 1){
|
|
|
|
|
+ response.data.nonspecialBrandList[i].length = 0;
|
|
|
|
|
+ for(let o=0;o<response.data.nonspecialBrandList[i].classifyList.length;o++){
|
|
|
|
|
+ response.data.nonspecialBrandList[i].length = response.data.nonspecialBrandList[i].length + response.data.nonspecialBrandList[i].classifyList[o].length;
|
|
|
|
|
+ }
|
|
|
|
|
+ if(response.data.nonspecialBrandList[i].length>textLength){
|
|
|
|
|
+ textLength = response.data.nonspecialBrandList[i].length
|
|
|
|
|
+ textIndex = i
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if(textIndex != null){
|
|
|
|
|
+ for(let i=0;i<response.data.nonspecialBrandList.length;i++){
|
|
|
|
|
+ if(textIndex == i){
|
|
|
|
|
+ response.data.dataThree = response.data.nonspecialBrandList[i]
|
|
|
|
|
+ }else{
|
|
|
|
|
+ if(!response.data.dataOne){
|
|
|
|
|
+ response.data.dataOne = response.data.nonspecialBrandList[i]
|
|
|
|
|
+ }else if(!response.data.dataTwo){
|
|
|
|
|
+ response.data.dataTwo = response.data.nonspecialBrandList[i]
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }else{
|
|
|
|
|
+ if (response.data.nonspecialBrandList[0]){
|
|
|
|
|
+ response.data.dataOne = response.data.nonspecialBrandList[0];
|
|
|
|
|
+ }
|
|
|
|
|
+ if (response.data.nonspecialBrandList[1]){
|
|
|
|
|
+ response.data.dataTwo = response.data.nonspecialBrandList[1];
|
|
|
|
|
+ }
|
|
|
|
|
+ if (response.data.nonspecialBrandList[2]){
|
|
|
|
|
+ response.data.dataThree = response.data.nonspecialBrandList[2];
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.$set(this,'dialogData',response.data);
|
|
|
|
|
+ this.$set(this,'dialogType',true);
|
|
|
|
|
+ this.$set(this,'dialogShadeType',false);
|
|
|
|
|
+ })
|
|
|
})
|
|
})
|
|
|
break
|
|
break
|
|
|
default:
|
|
default:
|
|
|
break
|
|
break
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ //电子信息牌导出关闭按钮
|
|
|
|
|
+ dialogOff(){
|
|
|
|
|
+ this.$set(this,'dialogType',false);
|
|
|
|
|
+ this.$set(this,'dialogData',{});
|
|
|
|
|
+ },
|
|
|
|
|
+ downloadImg(){
|
|
|
|
|
+ if(!this.dialogShadeType){
|
|
|
|
|
+ this.$set(this,'dialogShadeType',true);
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.createImage();
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ //下载电子信息牌
|
|
|
|
|
+ async createImage() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const canvas = await html2canvas(this.$refs.canvasImg) // 在这里，将需要转换成图片的部分作为参数传入html2canvas
|
|
|
|
|
+ const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
|
|
|
|
|
+ console.log(image) // 可以将image自行存储
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.downloadQrCode(image);
|
|
|
|
|
+ })
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ throw new Error(e)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ //下载BASE64图片
|
|
|
|
|
+ downloadQrCode(image) {
|
|
|
|
|
+ const blob = this.base64ToBlob(image, 'image/png')
|
|
|
|
|
+ const url = URL.createObjectURL(blob)
|
|
|
|
|
+
|
|
|
|
|
+ const link = document.createElement('a')
|
|
|
|
|
+ link.href = url
|
|
|
|
|
+ link.download = this.dialogData.subjectName+' - '+this.dialogData.room
|
|
|
|
|
+ document.body.appendChild(link)
|
|
|
|
|
+ link.click()
|
|
|
|
|
+ // 清理
|
|
|
|
|
+ document.body.removeChild(link)
|
|
|
|
|
+ URL.revokeObjectURL(url)
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.msgSuccess('下载成功')
|
|
|
|
|
+ this.$set(this,'dialogType',false);
|
|
|
|
|
+ this.$set(this,'dialogData',{});
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ base64ToBlob(base64Str, contentType, sliceSize) {
|
|
|
|
|
+ contentType = contentType || ''
|
|
|
|
|
+ sliceSize = sliceSize || 512
|
|
|
|
|
+
|
|
|
|
|
+ const byteCharacters = atob(base64Str.split(',')[1])
|
|
|
|
|
+ const byteArrays = []
|
|
|
|
|
+
|
|
|
|
|
+ for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
|
|
|
|
+ const slice = byteCharacters.slice(offset, offset + sliceSize)
|
|
|
|
|
+
|
|
|
|
|
+ const byteNumbers = new Array(slice.length)
|
|
|
|
|
+ for (let i = 0; i < slice.length; i++) {
|
|
|
|
|
+ byteNumbers[i] = slice.charCodeAt(i)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const byteArray = new Uint8Array(byteNumbers)
|
|
|
|
|
+ byteArrays.push(byteArray)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const blob = new Blob(byteArrays, { type: contentType })
|
|
|
|
|
+ return blob
|
|
|
|
|
+ },
|
|
|
//获取实验室详情 type:1.详情 2.编辑
|
|
//获取实验室详情 type:1.详情 2.编辑
|
|
|
getSubInfo(row,type){
|
|
getSubInfo(row,type){
|
|
|
laboratorySubRelInfoGetDetailInfo({ infoId: row.infoId }).then(response => {
|
|
laboratorySubRelInfoGetDetailInfo({ infoId: row.infoId }).then(response => {
|
|
@@ -566,3 +759,305 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ .subject-dialog{
|
|
|
|
|
+ .el-dialog__header{
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-dialog__body{
|
|
|
|
|
+ height:839px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ padding:0;
|
|
|
|
|
+ margin:0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-button-box{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right:67px;
|
|
|
|
|
+ top:50px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ p{
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ width: 70px;
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ font-size:14px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height:30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ p:nth-child(1){
|
|
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
|
|
+ margin-right:9px;
|
|
|
|
|
+ }
|
|
|
|
|
+ p:nth-child(2){
|
|
|
|
|
+ background: #0045AF;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ #subject-dialog-print-box{
|
|
|
|
|
+ width:1268px;
|
|
|
|
|
+ height:739px;
|
|
|
|
|
+ /*background-color: red;*/
|
|
|
|
|
+ margin:98px 43px 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-print-big-box{
|
|
|
|
|
+ z-index:5;
|
|
|
|
|
+ width:1228px;
|
|
|
|
|
+ height:699px;
|
|
|
|
|
+ margin:20px;
|
|
|
|
|
+ /*background-color: blue;*/
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-print-top-box{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-print-top-left-box{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-print-top-left-top-box{
|
|
|
|
|
+ .subject-dialog-name-box{
|
|
|
|
|
+ height:60px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background-color: #0045AF;
|
|
|
|
|
+ border-top-right-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .title-box-1{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left:0;
|
|
|
|
|
+ top:-10px;
|
|
|
|
|
+ width:174px;
|
|
|
|
|
+ height:80px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ border-top-right-radius: 100px;
|
|
|
|
|
+ border-bottom-right-radius: 100px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .title-box-2{
|
|
|
|
|
+ margin-top:10px;
|
|
|
|
|
+ width:170px;
|
|
|
|
|
+ height:60px;
|
|
|
|
|
+ border-radius: 100px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .title-box-3{
|
|
|
|
|
+ margin:3px;
|
|
|
|
|
+ width: 164px;
|
|
|
|
|
+ height: 54px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ border-radius: 100px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ p{
|
|
|
|
|
+ margin:3px;
|
|
|
|
|
+ width: 158px;
|
|
|
|
|
+ height: 48px;
|
|
|
|
|
+ line-height:48px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border-radius: 100px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ font-size:20px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .title-p{
|
|
|
|
|
+ margin-left:204px;
|
|
|
|
|
+ line-height: 60px;
|
|
|
|
|
+ font-size:30px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-info-box{
|
|
|
|
|
+ margin-top:12px;
|
|
|
|
|
+ height: 159px;
|
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-info-left-box{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ padding-top:9px;
|
|
|
|
|
+ p{
|
|
|
|
|
+ color:#333;
|
|
|
|
|
+ margin:7px 29px 11px 29px;
|
|
|
|
|
+ height:24px;
|
|
|
|
|
+ line-height:24px;
|
|
|
|
|
+ font-size:18px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-info-right-box{
|
|
|
|
|
+ height:110px;
|
|
|
|
|
+ width:110px;
|
|
|
|
|
+ margin:24px 18px 0 0;
|
|
|
|
|
+ img{
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height:110px;
|
|
|
|
|
+ width:110px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-print-top-left-bottom-box{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .subject-dialog-print-top-left-bottom-left-box{
|
|
|
|
|
+ margin-top:17px;
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .data-title{
|
|
|
|
|
+ height:60px;
|
|
|
|
|
+ line-height:60px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size:24px;
|
|
|
|
|
+ border-top-left-radius: 10px;
|
|
|
|
|
+ border-top-right-radius: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-text{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ padding:12px 14px;
|
|
|
|
|
+ p{
|
|
|
|
|
+ font-size:12px;
|
|
|
|
|
+ color:#3D3D3D;
|
|
|
|
|
+ line-height:18px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-img{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ img{
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ height:80px;
|
|
|
|
|
+ width:80px;
|
|
|
|
|
+ margin:10px 0 0 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-print-top-left-bottom-right-box{
|
|
|
|
|
+ margin-left:20px;
|
|
|
|
|
+ margin-top:17px;
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .data-title{
|
|
|
|
|
+ height:60px;
|
|
|
|
|
+ line-height:60px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size:24px;
|
|
|
|
|
+ border-top-left-radius: 10px;
|
|
|
|
|
+ border-top-right-radius: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-text{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ padding:12px 14px;
|
|
|
|
|
+ p{
|
|
|
|
|
+ font-size:12px;
|
|
|
|
|
+ color:#3D3D3D;
|
|
|
|
|
+ line-height:18px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-img{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ img{
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ height:80px;
|
|
|
|
|
+ width:80px;
|
|
|
|
|
+ margin:10px 0 0 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-print-top-right-box{
|
|
|
|
|
+ margin-left:20px;
|
|
|
|
|
+ width:308px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .data-title{
|
|
|
|
|
+ height:60px;
|
|
|
|
|
+ line-height:60px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size:24px;
|
|
|
|
|
+ border-top-left-radius: 10px;
|
|
|
|
|
+ border-top-right-radius: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-text{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ padding:12px 14px;
|
|
|
|
|
+ p{
|
|
|
|
|
+ font-size:12px;
|
|
|
|
|
+ color:#3D3D3D;
|
|
|
|
|
+ line-height:18px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .data-for-img{
|
|
|
|
|
+ flex:1;
|
|
|
|
|
+ border: 2px solid #E0E0E0;
|
|
|
|
|
+ border-top:none;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
|
|
+ img{
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ height:80px;
|
|
|
|
|
+ width:80px;
|
|
|
|
|
+ margin:16px 0 0 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .subject-dialog-print-button-box{
|
|
|
|
|
+ margin-top:20px;
|
|
|
|
|
+ width: 1228px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
|
|
+ padding:0 28px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ span{
|
|
|
|
|
+ font-size:18px;
|
|
|
|
|
+ line-height:50px;
|
|
|
|
|
+ margin-right:10px;
|
|
|
|
|
+ color:#fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
dedsudiyu