证书样式修改

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-05 14:28:25
+ * @LastEditTime: 2023-09-08 15:59:07
 -->
 <template>
   <div class="szxx">
-    <el-card :class="item.szcs == 0 ? 'box-card':'box-card bg-red'" v-for="(item, index) in tableData" :key="index">
+    <el-card
+      :class="classJudge(item)"
+      v-for="(item, index) in tableData"
+      :key="index"
+    >
       <div slot="header" class="szxx_header">
         <span class="header_type">{{
           item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明"
@@ -17,7 +21,7 @@
           <span>{{ item.qllx }}</span>
         </div>
         <div class="text color_red">
-          <span>{{ item.qlr }}</span>
+          <span>{{ item.qlr }}</span><span class="color_iray">({{ item.qllx }})</span>
         </div>
         <div class="text color_iray">
           <span>{{ item.gyqk }}</span>
@@ -43,15 +47,33 @@
       </div>
       <div class="card_padding" v-if="viewEdit">
         <div class="top_line middle_margin"></div>
-        <div class="text" v-if="item.ysxlh">
-          <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs
-          }})</el-button>
-          <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
+        <div class="text tac" v-if="item.ysxlh">
+          <el-button
+            class="operation_button"
+            type="text"
+            @click="openInvalidDiglog(item)"
+            >再次打印（{{ item.szcs }})</el-button
+          >
+          <el-button
+            class="operation_button"
+            type="text"
+            @click="openRecordPop(item)"
+            >缮证记录</el-button
+          >
         </div>
-        <div class="text" v-else>
-          <el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs
-          }}）</el-button>
-          <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
+        <div class="text tac" v-else>
+          <el-button
+            class="operation_button"
+            type="text"
+            @click="openZsylDialog(item, 2)"
+            >证书打印（{{ item.szcs }}）</el-button
+          >
+          <el-button
+            class="operation_button"
+            type="text"
+            @click="openRecordPop(item)"
+            >缮证记录</el-button
+          >
         </div>
       </div>
     </el-card>
@@ -60,42 +82,42 @@
   </div>
 </template>
 <script>
-  import { mapGetters } from 'vuex'
-  import store from '@/store/index.js'
-  import { getSlsqBdcqzList } from "@/api/bdcqz.js";
-  export default {
+import { mapGetters } from "vuex";
+import store from "@/store/index.js";
+import { getSlsqBdcqzList } from "@/api/bdcqz.js";
+export default {
   props: {},
-    data () {
+  data() {
     return {
       //表单是否可操作
       viewEdit: false,
       dialog: false,
       tableData: [],
       bdcqzlx: 1,
-        bdcqz: {}
-      }
+      bdcqz: {},
+    };
   },
   computed: {
-      ...mapGetters(['workFresh'])
+    ...mapGetters(["workFresh"]),
   },
   watch: {
     workFresh: {
-        handler (newVal, oldVal) {
-          console.log(newVal, 'newVal');
-          if (newVal) this.list()
-        }
-      }
+      handler(newVal, oldVal) {
+        console.log(newVal, "newVal");
+        if (newVal) this.list();
       },
-    created () {
-      this.list()
-      this.viewEdit = this.$parent.currentSelectTab.ableOperation
+    },
+  },
+  created() {
+    this.list();
+    this.viewEdit = this.$parent.currentSelectTab.ableOperation;
   },
   methods: {
     /**
      * @description: 初始化列表
      * @author: renchao
      */
-      list () {
+    list() {
       return new Promise((resolve, reject) => {
         var bsmSlsq = this.$route.query.bsmSlsq;
         getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
@@ -106,8 +128,8 @@
               this.bdcqz = res.result[0];
             }
           }
-          })
-        })
+        });
+      });
     },
     /**
      * @description: 打开证书预览弹窗
@@ -115,13 +137,25 @@
      * @param {*} type
      * @author: renchao
      */
-      openZsylDialog (item, type) {
-        store.dispatch('user/reWorkFresh', false)
+    openZsylDialog(item, type) {
+      store.dispatch("user/reWorkFresh", false);
       if (type == 1) {
         //证书证明预览
-          this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "76%", true);
+        this.$popupDialog(
+          "证书证明预览",
+          "workflow/components/dialog/zsyl",
+          { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq },
+          "76%",
+          true
+        );
       } else {
-          this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
+        this.$popupDialog(
+          "证书证明打印",
+          "workflow/components/dialog/zsdy",
+          { ...item },
+          "76%",
+          true
+        );
       }
     },
     /**
@@ -129,23 +163,52 @@
      * @param {*} item
      * @author: renchao
      */
-      openInvalidDiglog (item) {
-        this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
+    openInvalidDiglog(item) {
+      this.$popupDialog(
+        "证书证明打印",
+        "workflow/components/dialog/zsdy",
+        { ...item },
+        "76%",
+        true
+      );
     },
     /**
      * @description: openRecordPop
      * @param {*} item
      * @author: renchao
      */
-      openRecordPop (item) {
-        this.$popupDialog("缮证记录", "workflow/components/dialog/szRecord", { bsmBdcqz: item.bsmBdcqz }, '60%', true)
+    openRecordPop(item) {
+      this.$popupDialog(
+        "缮证记录",
+        "workflow/components/dialog/szRecord",
+        { bsmBdcqz: item.bsmBdcqz },
+        "60%",
+        true
+      );
+    },
+    /**
+     * @description: classJudge 判断class
+     * @param {*} item
+     * @author: renchao
+     */
+    classJudge(item) {
+      let className = "box-card";
+      if (item.bdcqzlx == 1) {
+        className += " zs-card";
+      }else{
+        className += " zm-card";
       }
+      if (item.szcs == 0) {
+        className += " no-print";
+      }
+      return className;
     },
-  };
+  },
+};
 </script>
-<style scoped lang='scss'>
-  @import "~@/styles/public.scss";
-  .szxx {
+<style scoped lang="scss">
+@import "~@/styles/public.scss";
+.szxx {
   box-sizing: border-box;
   padding-right: 15px;
   width: 100%;
@@ -155,18 +218,72 @@
 
   .box-card {
     float: left;
-      width: 300px;
-      margin-top: 10px;
-      margin-right: 10px;
-      // .szxx_body {
-      //   height: 240px;
-      // }
+    width: 350px;
+    margin: 10px;
+    box-shadow: none;
+    background-image: url("~@/image/zm-bg.png");
+    background-size: 100% 100%;;
+    border: 0;
+    /deep/ .el-card__header {
+      padding: 12px 66px;
+      background-size: auto;
+      border-bottom:0;
+      position: relative;
     }
+    .szxx_header {
+      color: #8B4534;
     }
-
+    .szxx_body {
+      height: 280px;
+    }
+  }
+  .zs-card {
+    border: 1px solid #a6b0be;
+    background-image: none;
+    /deep/ .el-card__header {
+      background-image: url("~@/image/zs-red.png");
+      .szxx_header {
+        color: #ffe47c;
+      }
+    }
+    .top_line {
+      border-top: 1px solid #d3dbe5;
+      width: 330px;
+      margin: 0 auto 10px ;
+    }
+  }
+  .zm-card{
+    /deep/ .el-card__header {
+      &:after{
+        content: "";
+            display: inline-block;
+            width: 330px;
+            height: 1px;
+            background-color: #B28676;
+            position: absolute;
+            left: 10px;
+      }
+    }
+  }
+  .zm-card.no-print {
+    background-image: url("~@/image/zm-gray.png");
+    .szxx_header {
+      color: #6D7278;
+    }
+  }
+  .zs-card.no-print {
+    /deep/ .el-card__header {
+      background-image: url("~@/image/zs-gray.png");
       .szxx_header {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.szxx_header {
   // color: #ffffff;
-    font-weight: bolder;
+  // font-weight: bolder;
   font-size: 16px;
 
   .header_type {
@@ -177,61 +294,45 @@
 
   .header_text {
     text-align: center;
-      margin-top: 10px;
-      line-height: 30px;
-    }
+    margin-top: 2px;
+    line-height: 22px;
   }
+}
 
-  .top_line {
-    border-top: 2px solid rgb(222, 222, 222);
-  }
 
-  .text {
-    margin-bottom: 10px;
+.text {
+  margin-bottom: 8px;
+  text-align: left;
+  text-indent: 16px;
+}
+.text.tac{
   text-align: center;
-  }
+}
 
-  .color_iray {
-    color: rgb(153, 153, 153);
-  }
+.color_iray {
+  color: #6D7278;
+}
 
-  .color_red {
-    color: rgb(255, 89, 24);
-  }
+.color_red {
+  color: #AB0C0C;
+}
 
-  .middle_margin {
+.middle_margin {
   margin-bottom: 10px;
-  }
+}
 
-  .operation_button {
-    border: 1px solid rgb(0, 121, 254);
+.operation_button {
+  border: 1px solid #5c95e5;
   padding: 5px;
   text-align: center;
-  }
+}
 
-  .card_padding {
+.card_padding {
   padding-top: 8px;
-    font-size: 16px;
-  }
-  .box-card {
-    .szxx_header {
-      color: #303133;
-    }
-    // 证书背景色
-    /deep/.el-card__header {
-      background-color: #e2dfe0;
-    }
-  }
-  .bg-red {
-    .szxx_header {
-      color: #fff;
-    }
-    /deep/.el-card__header {
-      background-color: rgb(198, 67, 83);
-    }
-  }
-
-  /deep/.el-card__body {
+  font-size: 14px;
+  line-height: 22px;
+}
+/deep/.el-card__body {
   padding: 0px;
-  }
+}
 </style>