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

manager/src/views/privacy-content/index.vue

@@ -11,6 +11,8 @@
     </Row>
     <template v-if="!selected">
       <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
+        <Row>
+          <Col span="16">
             <Form ref="form" :model="form.article" :label-width="100">
               <FormItem label="文章标题" prop="title">
                 <Input v-model="form.article.title" clearable style="width: 40%" />
@@ -25,6 +27,17 @@
                 ></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>
+
         <div slot="footer">
           <Button type="text" @click="modalVisible = false">取消</Button>
           <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
@@ -245,3 +258,29 @@ export default {
   },
 };
 </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>