证书

project/qujing/app/AppCertificateManage/components/Add.vue

@@ -17,7 +17,7 @@
               <el-form-item label="证书描述" style="width: 100%" prop="certificateContent" :rules="[{required: true, message: '请输入证书描述', trigger: 'blur'}]">
                 <div class="input-wrapper">
                   <el-button type="text" style="width: fit-content;" @click="append">插入获得证书序号</el-button>
-                  <el-input :rows="4" type="textarea" size="small" style="width: 100%;" v-model="form.certificateContent" clearable placeholder="恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!"></el-input>
+                  <el-input :rows="4" type="textarea" size="small" style="width: 100%;" v-model="form.certificateContent" clearable placeholder="恭喜您成为曲靖市第 「#获得证书序号」，位知法明理人。特颁此证，以资鼓励!"></el-input>
                 </div>
               </el-form-item>
               <el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]">
@@ -29,15 +29,12 @@
               <h2>全巧丽</h2>
               <div class="view-img__content">
                 <div class="top">
-                  <span>祝贺您于2021年10月，参加了 < 知法明理人 > 考核认证，经考核成绩合格，成为曲靖市第</span>
-                  <i></i>
-                  <span>位知法明理人。</span>
+                  <span v-html="certificateContent"></span>
                 </div>
-                <p>特发此证，以资鼓励！</p>
               </div>
               <div class="bottom">
                 <p>{{ form.certificateIssueUnit }}</p>
-                <div>2023年04月07日</div>
+                <div>{{ date }}</div>
               </div>
               <img src="https://cdn.cunwuyun.cn/fengdu/icon.png" />
             </div>
@@ -68,13 +65,27 @@
           certificateName: '',
           certificateIssueUnit: '曲靖市政法委',
           certificateTitle: '知法明理人证书',
-          certificateContent: '恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!'
+          certificateContent: `恭喜您成为曲靖市第 「#获得证书序号」位知法明理人
+
+          特颁此证，以资鼓励!`
         },
-        id: ''
+        id: '',
+        date: ''
+      }
+    },
+
+    computed: {
+      certificateContent () {
+        if (this.form.certificateContent.indexOf('「#获得证书序号」') > -1) {
+          return this.form.certificateContent.replace('「#获得证书序号」', '<i></i>')
+        }
+
+        return this.form.certificateContent
       }
     },
 
     created () {
+      this.date = this.$moment(new Date()).format(`YYYY年MM月DD日`)
       if (this.params && this.params.id) {
         this.id = this.params.id
         this.getInfo(this.params.id)
@@ -96,8 +107,8 @@
       },
 
       append () {
-        if (this.form.certificateContent.indexOf('[#获得证书序号]') === -1) {
-          this.form.certificateContent = this.form.certificateContent + '[#获得证书序号]'
+        if (this.form.certificateContent.indexOf('「#获得证书序号」') === -1) {
+          this.form.certificateContent = this.form.certificateContent + '「#获得证书序号」'
         }
       },
 
@@ -160,13 +171,41 @@
           font-weight: 500;
           font-size: 24px;
           color: #222222;
-          letter-spacing: 0;
+          letter-spacing: 3px;
           text-align: justify;
           line-height: 40px;
 
           p {
             margin-top: 40px;
           }
+
+
+          span {
+            display: block;
+            white-space: pre-line;
+          }
+
+          :deep( i ) {
+            display: inline-block;
+            position: relative;
+            width: 140px;
+            font-weight: 700;
+            font-size: 36px;
+            color: #3D5C8F;
+            text-align: center;
+
+            &:after {
+              position: absolute;
+              bottom: -10px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 120px;
+              height: 2px;
+              background: #999999;
+              z-index: 11;
+              content: ' ';
+            }
+          }
         }
 
         .bottom {