隐私协议右侧添加手机查看效果

master
15386982806 2024-01-25 13:20:46 +08:00
parent 54502b331f
commit 5e9a258cc8
1 changed files with 52 additions and 13 deletions

View File

@ -11,20 +11,33 @@
</Row> </Row>
<template v-if="!selected"> <template v-if="!selected">
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100"> <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
<Form ref="form" :model="form.article" :label-width="100"> <Row>
<FormItem label="文章标题" prop="title"> <Col span="16">
<Input v-model="form.article.title" clearable style="width: 40%" /> <Form ref="form" :model="form.article" :label-width="100">
</FormItem> <FormItem label="文章标题" prop="title">
<FormItem class="form-item-view-el" label="文章内容" prop="content"> <Input v-model="form.article.title" clearable style="width: 40%" />
</FormItem>
<FormItem class="form-item-view-el" label="文章内容" prop="content">
<editor
ref="editor"
openXss
v-model="form.article.content"
v-if="modalVisible"
></editor>
</FormItem>
</Form>
</Col>
<Col span="8">
<div class="mobile-effect">
<div class="title">页面预览</div>
<div class="content">
<div v-html="form.article.content"></div>
</div>
</div>
</Col>
</Row>
<editor
ref="editor"
openXss
v-model="form.article.content"
v-if="modalVisible"
></editor>
</FormItem>
</Form>
<div slot="footer"> <div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button> <Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"></Button> <Button type="primary" :loading="submitLoading" @click="handleSubmit"></Button>
@ -245,3 +258,29 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.mobile-effect {
box-sizing: border-box;
margin: 0 20px;
border: 2px solid #f1f2f3;
height: 610px;
.title {
align-items: center;
background: #f9f9fa;
border-radius: 4px 4px 0 0;
color: #85878a;
display: flex;
font-size: 12px;
height: 32px;
line-height: 20px;
padding: 0 12px;
}
.content {
width: 100%;
height: 560px;
padding: 0 14px;
overflow-y: scroll;
}
}
</style>