证书样式修改

 <!--
  * @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 ? "不动产权证书" : "不动产登记证明"
+          item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明"
         }}</span>
         <div class="header_text">{{ item.bdcqzh }}</div>
       </div>
@@ -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,178 +82,257 @@
   </div>
 </template>
 <script>
-  import { mapGetters } from 'vuex'
-  import store from '@/store/index.js'
-  import { getSlsqBdcqzList } from "@/api/bdcqz.js";
-  export default {
-    props: {},
-    data () {
-      return {
-        //表单是否可操作
-        viewEdit: false,
-        dialog: false,
-        tableData: [],
-        bdcqzlx: 1,
-        bdcqz: {}
-      }
+import { mapGetters } from "vuex";
+import store from "@/store/index.js";
+import { getSlsqBdcqzList } from "@/api/bdcqz.js";
+export default {
+  props: {},
+  data() {
+    return {
+      //表单是否可操作
+      viewEdit: false,
+      dialog: false,
+      tableData: [],
+      bdcqzlx: 1,
+      bdcqz: {},
+    };
+  },
+  computed: {
+    ...mapGetters(["workFresh"]),
+  },
+  watch: {
+    workFresh: {
+      handler(newVal, oldVal) {
+        console.log(newVal, "newVal");
+        if (newVal) this.list();
+      },
     },
-    computed: {
-      ...mapGetters(['workFresh'])
+  },
+  created() {
+    this.list();
+    this.viewEdit = this.$parent.currentSelectTab.ableOperation;
+  },
+  methods: {
+    /**
+     * @description: 初始化列表
+     * @author: renchao
+     */
+    list() {
+      return new Promise((resolve, reject) => {
+        var bsmSlsq = this.$route.query.bsmSlsq;
+        getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
+          resolve(res.code);
+          if (res.code === 200) {
+            this.tableData = res.result;
+            if (res.result) {
+              this.bdcqz = res.result[0];
+            }
+          }
+        });
+      });
     },
-    watch: {
-      workFresh: {
-        handler (newVal, oldVal) {
-          console.log(newVal, 'newVal');
-          if (newVal) this.list()
-        }
+    /**
+     * @description: 打开证书预览弹窗
+     * @param {*} item
+     * @param {*} type
+     * @author: renchao
+     */
+    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
+        );
+      } else {
+        this.$popupDialog(
+          "证书证明打印",
+          "workflow/components/dialog/zsdy",
+          { ...item },
+          "76%",
+          true
+        );
       }
     },
-    created () {
-      this.list()
-      this.viewEdit = this.$parent.currentSelectTab.ableOperation
+    /**
+     * @description: 再次打印
+     * @param {*} item
+     * @author: renchao
+     */
+    openInvalidDiglog(item) {
+      this.$popupDialog(
+        "证书证明打印",
+        "workflow/components/dialog/zsdy",
+        { ...item },
+        "76%",
+        true
+      );
     },
-    methods: {
-      /**
-       * @description: 初始化列表
-       * @author: renchao
-       */
-      list () {
-        return new Promise((resolve, reject) => {
-          var bsmSlsq = this.$route.query.bsmSlsq;
-          getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
-            resolve(res.code);
-            if (res.code === 200) {
-              this.tableData = res.result;
-              if (res.result) {
-                this.bdcqz = res.result[0];
-              }
-            }
-          })
-        })
-      },
-      /**
-       * @description: 打开证书预览弹窗
-       * @param {*} item
-       * @param {*} type
-       * @author: renchao
-       */
-      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);
-        } else {
-          this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
-        }
-      },
-      /**
-       * @description: 再次打印
-       * @param {*} item
-       * @author: renchao
-       */
-      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)
+    /**
+     * @description: openRecordPop
+     * @param {*} item
+     * @author: renchao
+     */
+    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 {
-    box-sizing: border-box;
-    padding-right: 15px;
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    padding-bottom: 55px;
+<style scoped lang="scss">
+@import "~@/styles/public.scss";
+.szxx {
+  box-sizing: border-box;
+  padding-right: 15px;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  padding-bottom: 55px;
 
-    .box-card {
-      float: left;
-      width: 300px;
-      margin-top: 10px;
-      margin-right: 10px;
-      // .szxx_body {
-      //   height: 240px;
-      // }
+  .box-card {
+    float: left;
+    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;
     }
   }
-
-  .szxx_header {
-    // color: #ffffff;
-    font-weight: bolder;
-    font-size: 16px;
-
-    .header_type {
-      display: flex;
-      justify-content: center;
-      align-content: center;
+  .zs-card {
+    border: 1px solid #a6b0be;
+    background-image: none;
+    /deep/ .el-card__header {
+      background-image: url("~@/image/zs-red.png");
+      .szxx_header {
+        color: #ffe47c;
+      }
     }
-
-    .header_text {
-      text-align: center;
-      margin-top: 10px;
-      line-height: 30px;
+    .top_line {
+      border-top: 1px solid #d3dbe5;
+      width: 330px;
+      margin: 0 auto 10px ;
     }
   }
-
-  .top_line {
-    border-top: 2px solid rgb(222, 222, 222);
+  .zm-card{
+    /deep/ .el-card__header {
+      &:after{
+        content: "";
+            display: inline-block;
+            width: 330px;
+            height: 1px;
+            background-color: #B28676;
+            position: absolute;
+            left: 10px;
+      }
+    }
   }
-
-  .text {
-    margin-bottom: 10px;
-    text-align: center;
+  .zm-card.no-print {
+    background-image: url("~@/image/zm-gray.png");
+    .szxx_header {
+      color: #6D7278;
+    }
   }
-
-  .color_iray {
-    color: rgb(153, 153, 153);
+  .zs-card.no-print {
+    /deep/ .el-card__header {
+      background-image: url("~@/image/zs-gray.png");
+      .szxx_header {
+        color: #ffffff;
+      }
+    }
   }
+}
 
-  .color_red {
-    color: rgb(255, 89, 24);
-  }
+.szxx_header {
+  // color: #ffffff;
+  // font-weight: bolder;
+  font-size: 16px;
 
-  .middle_margin {
-    margin-bottom: 10px;
+  .header_type {
+    display: flex;
+    justify-content: center;
+    align-content: center;
   }
 
-  .operation_button {
-    border: 1px solid rgb(0, 121, 254);
-    padding: 5px;
+  .header_text {
     text-align: center;
+    margin-top: 2px;
+    line-height: 22px;
   }
+}
 
-  .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 {
-    padding: 0px;
-  }
+.text {
+  margin-bottom: 8px;
+  text-align: left;
+  text-indent: 16px;
+}
+.text.tac{
+  text-align: center;
+}
+
+.color_iray {
+  color: #6D7278;
+}
+
+.color_red {
+  color: #AB0C0C;
+}
+
+.middle_margin {
+  margin-bottom: 10px;
+}
+
+.operation_button {
+  border: 1px solid #5c95e5;
+  padding: 5px;
+  text-align: center;
+}
+
+.card_padding {
+  padding-top: 8px;
+  font-size: 14px;
+  line-height: 22px;
+}
+/deep/.el-card__body {
+  padding: 0px;
+}
 </style>