diff --git a/project/qujing/app/AppCertificateManage/components/Add.vue b/project/qujing/app/AppCertificateManage/components/Add.vue
index 47e73a63..c6ef4a40 100644
--- a/project/qujing/app/AppCertificateManage/components/Add.vue
+++ b/project/qujing/app/AppCertificateManage/components/Add.vue
@@ -6,23 +6,42 @@
     <template slot="content">
       <ai-card title="基本信息">
         <template #content>
-          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
-            <el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]">
-              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input>
-            </el-form-item>
-            <el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]">
-              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input>
-            </el-form-item>
-            <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>
+          <div class="wrapper">
+            <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+              <el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]">
+                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input>
+              </el-form-item>
+              <el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]">
+                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input>
+              </el-form-item>
+              <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>
+                </div>
+              </el-form-item>
+              <el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]">
+                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateIssueUnit" clearable placeholder="请输入证书颁发单位" :maxlength="50"></el-input>
+              </el-form-item>
+            </el-form>
+            <div class="view-img">
+              <h1>{{ form.certificateTitle }}</h1>
+              <h2>全巧丽</h2>
+              <div class="view-img__content">
+                <div class="top">
+                  <span>祝贺您于2021年10月，参加了 < 知法明理人 > 考核认证，经考核成绩合格，成为曲靖市第</span>
+                  <i></i>
+                  <span>位知法明理人。</span>
+                </div>
+                <p>特发此证，以资鼓励！</p>
               </div>
-            </el-form-item>
-            <el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]">
-              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书颁发单位" :maxlength="50"></el-input>
-            </el-form-item>
-          </el-form>
+              <div class="bottom">
+                <p>{{ form.certificateIssueUnit }}</p>
+                <div>2023年04月07日</div>
+              </div>
+              <img src="https://cdn.cunwuyun.cn/fengdu/icon.png" />
+            </div>
+          </div>
         </template>
       </ai-card>
     </template>
@@ -47,9 +66,9 @@
         info: {},
         form: {
           certificateName: '',
-          certificateIssueUnit: '',
-          certificateTitle: '',
-          certificateContent: ''
+          certificateIssueUnit: '曲靖市政法委',
+          certificateTitle: '知法明理人证书',
+          certificateContent: '恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!'
         },
         id: ''
       }
@@ -87,7 +106,7 @@
           if (valid) {
             this.instance.post(`/app/appcertificateinfo/addOrUpdate`, {
               ...this.form,
-              imageUrl: this.form.imageUrl[0].url
+              id: this.params.id || ''
             }).then(res => {
               if (res.code == 0) {
                 this.$message.success('提交成功')
@@ -117,5 +136,89 @@
       flex-direction: column;
       width: 50%;
     }
+
+    .wrapper {
+      position: relative;
+      height: 500px;
+
+      .view-img {
+        position: absolute;
+        right: 0;
+        top: 0px;
+        z-index: 11;
+        width: 884px;
+        height: 1248px;
+        padding-top: 190px;
+        background: url(https://cdn.cunwuyun.cn/fengdu/zhengshu-bg.png);
+        background-size: 100% 100%;
+        transform: scale(0.4);
+        transform-origin: top right;
+
+        .view-img__content {
+          width: 724px;
+          margin: 0 auto;
+          font-weight: 500;
+          font-size: 24px;
+          color: #222222;
+          letter-spacing: 0;
+          text-align: justify;
+          line-height: 40px;
+
+          p {
+            margin-top: 40px;
+          }
+        }
+
+        .bottom {
+          position: absolute;
+          bottom: 80px;
+          right: 78px;
+          line-height: 40px;
+          font-size: 24px;
+          text-align: right;
+          color: #3D5C8F;
+        }
+
+        h1 {
+          margin-bottom: 70px;
+          font-weight: 900;
+          font-size: 72px;
+          color: #3D5C8F;
+          letter-spacing: 16px;
+          text-align: center;
+        }
+
+        h2 {
+          position: relative;
+          margin-bottom: 46px;
+          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: ' ';
+          }
+        }
+
+        & > img {
+          position: absolute;
+          bottom: 340px;
+          left: 50%;
+          z-index: 1;
+          width: 140px;
+          height: 140px;
+          transform: translateX(-50%);
+        }
+      }
+    }
   }
 </style>