kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

曲靖证书

Browse Source
This commit is contained in:
yanran200730
2023-04-10 11:05:32 +08:00
parent e31ced26f9
commit f361599dc5
1 changed files with 123 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
project/qujing/app/AppCertificateManage/components/Add.vue
View File

@@ -6,23 +6,42 @@
<template slot="content"> <template slot="content">
<ai-card title="基本信息"> <ai-card title="基本信息">
<template #content> <template #content>
<el-form class="ai-form" :model="form" label-width="120px" ref="form"> <div class="wrapper">
<el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]"> <el-form class="ai-form" :model="form" label-width="120px" ref="form">
<el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input> <el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]">
</el-form-item> <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input>
<el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]"> </el-form-item>
<el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input> <el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]">
</el-form-item> <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input>
<el-form-item label="证书描述" style="width: 100%" prop="certificateContent" :rules="[{required: true, message: '请输入证书描述', trigger: 'blur'}]"> </el-form-item>
<div class="input-wrapper"> <el-form-item label="证书描述" style="width: 100%" prop="certificateContent" :rules="[{required: true, message: '请输入证书描述', trigger: 'blur'}]">
<el-button type="text" style="width: fit-content;" @click="append">插入获得证书序号</el-button> <div class="input-wrapper">
<el-input :rows="4" type="textarea" size="small" style="width: 100%;" v-model="form.certificateContent" clearable placeholder="恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!!"></el-input> <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> </div>
</el-form-item> <div class="bottom">
<el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]"> <p>{{ form.certificateIssueUnit }}</p>
<el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书颁发单位" :maxlength="50"></el-input> <div>2023年04月07日</div>
</el-form-item> </div>
</el-form> <img src="https://cdn.cunwuyun.cn/fengdu/icon.png" />
</div>
</div>
</template> </template>
</ai-card> </ai-card>
</template> </template>
@@ -47,9 +66,9 @@
info: {}, info: {},
form: { form: {
certificateName: '', certificateName: '',
certificateIssueUnit: '', certificateIssueUnit: '曲靖市政法委',
certificateTitle: '', certificateTitle: '知法明理人证书',
certificateContent: '' certificateContent: '恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!'
}, },
id: '' id: ''
} }
@@ -87,7 +106,7 @@
if (valid) { if (valid) {
this.instance.post(`/app/appcertificateinfo/addOrUpdate`, { this.instance.post(`/app/appcertificateinfo/addOrUpdate`, {
...this.form, ...this.form,
imageUrl: this.form.imageUrl[0].url id: this.params.id || ''
}).then(res => { }).then(res => {
if (res.code == 0) { if (res.code == 0) {
this.$message.success('提交成功') this.$message.success('提交成功')
@@ -117,5 +136,89 @@
flex-direction: column; flex-direction: column;
width: 50%; 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> </style>