文章发表弹框样式

This commit is contained in:
lmj
2022-10-17 19:14:45 +08:00
parent 0c78558a86
commit a3487c3841

View File

@@ -2,11 +2,10 @@
<div>
<el-row class="article-add">
<el-form ref="form" :rules="rules" :model="addForm" label-position="right" label-width="80px">
<el-form-item prop="title" label="标题:">
<el-form-item prop="title" label="标题">
<el-input class="title-input" v-model.trim="addForm.title" placeholder="请输入文章标题,长度在 1 到 100 个字符" show-word-limit maxlength="100"></el-input>
</el-form-item>
<el-form-item class="imgInstructions">
<el-form-item class="imgInstructions" label="封面">
<div class="el-form-item__content">
<imageUpload :value="converImage" width="133px" height="100px" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
<dl>
@@ -17,17 +16,24 @@
</div>
</el-form-item>
<el-form-item prop="keyword" label="关键字:"><el-input show-word-limit maxlength="50" placeholder="请输入关键字,长度在 0 到 50 个字符" v-model.trim="addForm.keyword"></el-input></el-form-item>
<el-form-item prop="summary" label="摘要:">
<el-form-item prop="keyword" label="关键字"><el-input show-word-limit maxlength="50" placeholder="请输入关键字,长度在 0 到 50 个字符" v-model.trim="addForm.keyword"></el-input></el-form-item>
<el-form-item prop="summary" label="摘要">
<el-input show-word-limit maxlength="200" placeholder="请输入摘要,仅限200字以内(未填写摘要信息时,自动从内容中提取!)" v-model.trim="addForm.summary" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
</el-form-item>
<el-form-item prop="content" label="内容:">
<el-form-item prop="content" label="正文">
<WxEditor v-model.trim="addForm.content" placeholder="请输入内容,长度至少在100个字符" :minHeight="250">
</WxEditor></el-form-item>
<el-form-item class="footer-btn">
<el-button type="primary" :loading="craftLoading" @click="submit(1)" style="margin-right: 40px;">保存草稿</el-button>
<el-form-item class="footer-btn ">
<div class="btnbox">
<div class="check-right">
<el-checkbox style="margin-left:00px" v-model="checked"></el-checkbox><span style="font-size:14px;color:#787878;margin-left: 10px;">我已阅读并遵守<span style="color:#588afc;margin-right:10px;cursor: pointer;" @click="addFormCheckedShow = true">平台内容发布要求</span> </span>
</div>
<div class="button-left">
<el-button type="primary" plain :loading="craftLoading" @click="submit(1)" style="margin-right: 40px;">保存草稿</el-button>
<el-button :loading="loading" @click="submit(2)" :disabled="!checked" type="primary">提交</el-button>
<el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="font-size:14px;color:#787878;margin-left: 10px;">我已阅读并遵守<span style="color:#588afc;margin-right:10px;cursor: pointer;" @click="addFormCheckedShow = true">平台内容发布要求</span> </span>
</div>
</div>
</el-form-item>
</el-form>
</el-row>
@@ -220,6 +226,21 @@ export default {
</script>
<style scoped lang="scss">
.btnbox{
display: flex;
width: 100%;
.check-right{
flex: 1;
}
.button-left{
margin-left: auto;
}
}
::v-deep .el-form-item__label{
font-size: 18px !important;
color: #333 !important;
font-weight: 600 !important;
}
::v-deep .checked-show{
.el-dialog__header{
padding:0;
@@ -284,8 +305,8 @@ export default {
margin-left: 20px;
line-height: 1.5;
dt {
font-size: 16px;
font-weight: bold;
font-size: 18px;
font-weight: 600;
}
dd {
margin: 0;