dedsudiyu месяцев назад: 7
Родитель
Сommit
fabe2d90e8

+ 38 - 0
package-lock.json

@@ -3137,6 +3137,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.nlark.com/base64-js/download/base64-js-1.5.1.tgz?cache=0&sync_timestamp=1624607950711&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbase64-js%2Fdownload%2Fbase64-js-1.5.1.tgz",
@@ -4810,6 +4815,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1635967924209&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -7411,6 +7424,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/download/htmlparser2-6.1.0.tgz?cache=0&sync_timestamp=1636640945377&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-6.1.0.tgz",
@@ -14751,6 +14773,14 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.nlark.com/text-table/download/text-table-0.2.0.tgz",
@@ -15366,6 +15396,14 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/uuid/download/uuid-3.4.0.tgz",

+ 1 - 0
package.json

@@ -52,6 +52,7 @@
     "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "install": "^0.13.0",
     "js-base64": "^3.7.2",
     "js-beautify": "^1.14.9",

+ 11 - 11
src/views/integratedManagement/laboratoryManagement/safetyInfoCategory/safetyInfoCategory.vue

@@ -49,7 +49,7 @@
         >信息牌配置</p>
       </el-form>
       <el-table class="table-box" border v-loading="loading" :data="tableData">
-        <el-table-column label="序" align="left" prop="orderNum" width="75">
+        <el-table-column label="序" align="left" prop="orderNum" width="75">
           <template slot-scope="scope">
             <el-input maxlength="4" type="text" oninput="value=value.replace(/[^0-9.]/g,'')"
                       v-model="scope.row.orderNum" @focus="liveSort(scope.row)"
@@ -109,14 +109,14 @@
     <!-- 添加或修改安全分级对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="closeDialog" :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="类目名称" prop="brandName">
-          <el-input v-model="form.brandName" maxlength="30" placeholder="请输入类目名称" />
-        </el-form-item>
-        <el-form-item label="排序" prop="orderNum">
+        <el-form-item label="序号" prop="orderNum">
           <el-input maxlength="4" type="text" oninput="value=value.replace(/[^0-9.]/g,'')"
-                    v-model="form.orderNum" placeholder="请输入序">
+                    v-model="form.orderNum" placeholder="请输入序号">
           </el-input>
         </el-form-item>
+        <el-form-item label="类目名称" prop="brandName">
+          <el-input v-model="form.brandName" maxlength="30" placeholder="请输入类目名称" />
+        </el-form-item>
         <el-form-item label="内容类型" prop="brandType">
           <el-radio-group v-model="form.brandType">
             <el-radio :label="1">文字</el-radio>
@@ -188,7 +188,7 @@ export default {
           { required: true, message: "请输入类目名称", trigger: "blur" },
         ],
         orderNum: [
-          { required: true, message: "请输入序", trigger: "blur" },
+          { required: true, message: "请输入序", trigger: "blur" },
         ],
         brandType: [
           { required: true, message: "请选择内容类型", trigger: "blur" },
@@ -200,25 +200,25 @@ export default {
           { required: true, message: "请选择颜色", trigger: "blur" }
         ],
       },
-      // 临时保存
+      // 临时保存序
       orderNum: '',
     };
 
 
   },
   methods: {
-      //保存当前
+      //保存当前序
       liveSort(row) {
         let obj = {
           orderNum: row.orderNum
         }
         this.orderNum = JSON.parse(JSON.stringify(obj))
       },
-      //编辑
+      //编辑序
       editSort(row) {
         let self = this
         if (row.orderNum != this.orderNum.orderNum) {
-          self.$confirm('是否确认修改序?', '', {
+          self.$confirm('是否确认修改序?', '', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'

+ 496 - 1
src/views/integratedManagement/laboratoryManagement/subject/index.vue

@@ -142,6 +142,86 @@
       </div>
       <index-right-page ref="indexRightPage"></index-right-page>
     </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>
     <!--准入配置-->
@@ -157,6 +237,7 @@
 
 <script>
   /********************** V3 **********************/
+  import html2canvas from 'html2canvas'
   import importComponent from "@/components/importComponent/importComponent.vue";
   import batchQrCodeDialog from "@/components/batchQrCodeDialog/batchQrCodeDialog.vue";
   import {
@@ -193,6 +274,10 @@
       return {
         //批量二维码
         batchQrCodeDialogData:{},
+        //电子信息牌
+        dialogType:false,
+        dialogData:{},
+        dialogShadeType:false,
         //导入数据
         importConfig:{
           upLoadApi:'/laboratory/subRelInfo/importSubData',                //上传接口地址
@@ -336,13 +421,121 @@
             laboratoryBoardExportBoardInfo({
               labId: row.subId,
             }).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
           default:
             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.编辑
       getSubInfo(row,type){
         laboratorySubRelInfoGetDetailInfo({ infoId: row.infoId }).then(response => {
@@ -566,3 +759,305 @@
     }
   }
 </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>