update

src/assets/css/base.css

@@ -86,9 +86,12 @@ textarea:focus {
 }
 
 :root {
-  --main-color: rgba(184, 1, 64, 1);
+  --main-color: #1655B2;
 }
-
-.tox-notifications-container{
-  display: none !important;
+.breadcrumb{
+  padding-bottom: 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(0,0,0,1);
+  line-height: 100%;
 }

src/assets/theme/style.scss

-$--color-primary: rgba(184, 1, 64, 1);
+$--color-primary: #1655B2;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: 'element-ui/lib/theme-chalk/fonts';

src/components/base/EditStyle.vue

@@ -255,18 +255,18 @@ export default {
     .btn {
       text-align: center;
       line-height: 34px;
-      background: rgba(184, 1, 64, 1);
+      background: #1655B2;
       border-radius: 6px;
       font-size: 14px;
       color: #fff;
       margin-top: 8px;
-      border: 1px solid rgba(184, 1, 64, 1);
+      border: 1px solid #1655B2;
       cursor: pointer;
       &.active {
         background: rgba(237, 245, 243, 0.39);
-        border: 1px solid rgba(184, 1, 64, 1);
+        border: 1px solid #1655B2;
         border-radius: 6px;
-        color: rgba(184, 1, 64, 1);
+        color: #1655B2;
       }
     }
   }

src/components/layout/Aside.vue

@@ -24,10 +24,10 @@ export default {
   data() {
     return {
       menuList: [
-        { name: '证书模板管理', path: '/template/list', icon: 'el-icon-notebook-2' },
-        { name: '动态变量管理', path: '/variable/list', icon: 'el-icon-user' },
-        { name: '学员管理', path: '/student/list', icon: 'el-icon-connection' },
-        { name: '项目管理', path: '/project/list', icon: 'el-icon-connection' }
+        { name: '证书模板管理', path: '/template/list', icon: 'el-icon-tickets' },
+        { name: '动态变量管理', path: '/variable/list', icon: 'el-icon-set-up' },
+        { name: '学员管理', path: '/student/list', icon: 'el-icon-user' },
+        { name: '项目管理', path: '/project/list', icon: 'el-icon-copy-document' }
       ]
     }
   },

src/modules/project/components/FormType.vue

@@ -266,7 +266,7 @@ export default {
   font-size: 16px;
   font-weight: bold;
   color: #333333;
-  border-left: 3px solid rgba(184, 1, 64, 1);
+  border-left: 3px solid #1655B2;
   padding-left: 7px;
   margin-bottom: 25px;
 }

src/modules/project/views/List.vue

@@ -95,10 +95,10 @@ export default {
           }
         ],
         columns: [
-          { label: 'id', prop: 'id', align: 'center' },
           { label: '项目名称', prop: 'title', align: 'center' },
-          { label: '关联人数', prop: 'students_count', align: 'center' },
           { label: '关联证书模板', prop: 'template_id_name', align: 'center' },
+          { label: '关联人数', prop: 'students_count', align: 'center' },
+          { label: 'id', prop: 'id', align: 'center' },
           { label: '创建时间', prop: 'created_time', align: 'center' },
           { label: '操作', slots: 'table-x', align: 'center' }
         ]

src/modules/project/views/Update.vue

@@ -7,38 +7,43 @@
         ref="ruleForm"
         label-width="110px"
         class="demo-ruleForm"
-        style="width: 80%; margin: 0 auto"
+        style="width: 550px"
       >
         <el-form-item label="项目名称" prop="title">
-          <el-input v-model="ruleForm.title"></el-input>
+          <el-input placeholder="请填写项目名称" v-model="ruleForm.title"></el-input>
         </el-form-item>
         <el-form-item label="关联证书模板" prop="template">
-          <el-select filterable v-model="ruleForm.template_id" placeholder="请选择">
+          <el-select filterable v-model="ruleForm.template_id" placeholder="请选择证书模板" style="width: 440px">
             <el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="关联学员">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <el-button type="primary" @click="drawer = true">选择学员</el-button>
+          <div class="select-btn" @click="drawer = true" style="margin-bottom: 10px">
+            <i class="el-icon-plus"></i>
+            <div class="text">选择图文</div>
           </div>
           <app-list v-bind="tableOptions" ref="list">
             <template v-slot:table-x="{ row }">
               <el-button type="text" @click="handleDelete(row)">删除</el-button>
             </template>
           </app-list>
-          </el-card>
         </el-form-item>
         <el-form-item>
-          <div style="padding-top: 20px; width: 200px; margin: 0 auto">
+          <div>
             <el-button type="primary" @click="submitForm">确认</el-button>
-            <el-button @click="drawer = true">取消</el-button>
+            <el-button @click="drawer = true" style="margin-left:20px;">取消</el-button>
           </div>
         </el-form-item>
       </el-form>
     </app-card>
-    <el-drawer size="80%" :visible.sync="drawer" :direction="direction" :destroy-on-close="true">
-      <app-list v-if="drawer" @selection-change="selectionChange" v-bind="selectTableOptions" ref="list" style="padding: 0 30px 0">
+    <el-drawer size="60%" :visible.sync="drawer" :direction="direction" :destroy-on-close="true">
+      <app-list
+        v-if="drawer"
+        @selection-change="selectionChange"
+        v-bind="selectTableOptions"
+        ref="list"
+        style="padding: 0 30px 0; height: auto"
+      >
       </app-list>
       <div style="padding-left: 30px"><el-button type="primary" @click="drawer = false">确认</el-button></div>
     </el-drawer>
@@ -113,12 +118,10 @@ export default {
     tableOptions() {
       return {
         columns: [
-          { label: 'id', prop: 'id', align: 'center' },
           { label: '姓名', prop: 'name', align: 'center' },
           { label: '手机号', prop: 'mobile', align: 'center' },
           { label: '邮箱', prop: 'email', align: 'center' },
           { label: '编号', prop: 'number', align: 'center' },
-          { label: '创建时间', prop: 'created_time', align: 'center' },
           { label: '操作', slots: 'table-x', align: 'center' }
         ],
         data: this.studentTableOptions
@@ -135,7 +138,12 @@ export default {
     },
     // 选择学员
     selectionChange(selection) {
-      this.studentTableOptions = selection
+      selection.forEach(item => {
+        const find = this.studentTableOptions.find(i => i.id === item.id)
+        if (!find) {
+          this.studentTableOptions.push(item)
+        }
+      })
     },
     // 证书模板
     getTemplateList() {
@@ -194,4 +202,23 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.select-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 0 17px;
+  width: fit-content;
+  cursor: pointer;
+  i {
+    color: #363636;
+  }
+  .text {
+    font-size: 14px;
+    color: #161616;
+    margin-left: 5px;
+  }
+}
+</style>

src/modules/student/components/importPeople.vue

@@ -27,7 +27,7 @@
       <a
         href="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/%E4%BA%BA%E5%91%98%E6%A8%A1%E6%9D%BF.xlsx"
         download="人员模板.xlsx"
-        style="color: #c01c40"
+        style="color: #1655B2"
       >
         <i class="el-icon-download"></i>人员模板.xlsx</a
       >

src/modules/student/views/List.vue

@@ -3,7 +3,7 @@
     <app-list v-bind="tableOptions" ref="list">
       <div class="line"></div>
       <div class="btn-box">
-        <el-button type="primary" @click="$router.push({ path: '/student/update' })">新增学员</el-button>
+        <el-button type="primary" @click="$router.push({ path: '/student/update' })">+ 添加学员</el-button>
         <el-button type="primary" @click="importDialogVisible = true">批量导入</el-button>
         <el-button type="primary" @click="downloadRecords">导出学员</el-button>
       </div>

src/modules/student/views/Update.vue

 <template>
   <div class="create-box">
-    <app-card :title="!$route.query.id ? '新建学员' : '编辑学员'">
+    <app-card :title="!$route.query.id ? '添加学员' : '编辑信息'">
       <el-form
         :model="ruleForm"
         :rules="rules"
         ref="ruleForm"
         label-width="100px"
         class="demo-ruleForm"
-        style="width: 40%; margin: 0 auto"
+        style="display: flex; flex-wrap: wrap"
       >
-        <el-form-item label="关联项目">
-          <el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择">
-            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="姓名" prop="name">
           <el-input v-model="ruleForm.name"></el-input>
         </el-form-item>
@@ -56,6 +51,11 @@
         <el-form-item label="微信">
           <el-input v-model="ruleForm.title"></el-input>
         </el-form-item>
+        <el-form-item label="关联项目">
+          <el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item>
           <div style="padding-top: 20px">
             <el-button type="primary" @click="submitForm">确认</el-button>

src/modules/template/views/List.vue

@@ -20,16 +20,20 @@
         <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
       </template>
       <template v-slot:table-x="{ row }">
+        <el-button type="text" @click="handleView(row)">预览</el-button>
         <el-button type="text" @click="handleEdit(row)">编辑</el-button>
         <el-button type="text" @click="handleDelete(row)">删除</el-button>
       </template>
     </app-list>
+    <div class="img-view" v-if="imgViewShow" @click="imgViewShow = false">
+      <img :src="imgView" alt="" />
+    </div>
   </app-card>
 </template>
 
 <script>
 // 接口
-import { getAppList, updateBanner, deleteBanner } from '../api'
+import { getAppList, updateBanner, deleteBanner, getDetails } from '../api'
 
 export default {
   data() {
@@ -38,6 +42,8 @@ export default {
       count.push({ value: i, options: i })
     }
     return {
+      imgViewShow: false,
+      imgView: '',
       value1: '',
       filterDate: '',
       options: count,
@@ -96,13 +102,9 @@ export default {
           }
         ],
         columns: [
+          { label: '模板名称', prop: 'title', align: 'center' },
           { label: 'id', prop: 'id', align: 'center' },
-          { label: '模板标题', prop: 'title', align: 'center' },
-          // {
-          //   label: '是否启用',
-          //   slots: 'release-status',
-          //   align: 'center'
-          // },
+          { label: '规则编号', prop: 'rule', align: 'center' },
           { label: '创建时间', prop: 'created_time', align: 'center' },
           { label: '操作', slots: 'table-x', align: 'center' }
         ]
@@ -148,6 +150,12 @@ export default {
           this.$refs.list.refetch(true)
         }
       })
+    },
+    handleView(row) {
+      getDetails({ id: row.id }).then(res => {
+        this.imgView = 'data:image/png;base64,' + res.data.image.replace(/\\r\\n/g, '')
+        this.imgViewShow = true
+      })
     }
   }
 }
@@ -169,4 +177,20 @@ export default {
     margin-bottom: 16px;
   }
 }
+.img-view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #000000, $alpha: 0.5);
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+  }
+}
 </style>

src/modules/template/views/Update copy.vue

-<template>
-  <div class="create-box">
-    <app-card :title="!$route.query.id ? '新建模板' : '编辑模板'">
-      <el-steps :active="active" finish-status="success">
-        <el-step title="步骤 1"></el-step>
-        <el-step title="步骤 2"></el-step>
-      </el-steps>
-      <div class="step-one" v-if="active === 0">
-        <el-form ref="form" :model="form" style="width: 50%;margin: 0 auto;" label-width="100px">
-          <el-form-item label="模板名称">
-            <el-input v-model="form.title"></el-input>
-          </el-form-item>
-          <el-form-item label="编号生成规则">
-            <el-radio-group v-model="form.rule">
-              <el-radio label="0">规则一</el-radio>
-              <el-radio label="1">规则二</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="active = 1">下一步</el-button>
-            <el-button @click="$router.go(-1)">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="step-two" v-if="active === 1">
-        <stepTwo @submit="submit" :data="step2Data"></stepTwo>
-      </div>
-    </app-card>
-  </div>
-</template>
-
-<script>
-import stepTwo from '../components/stepTwo.vue'
-import { createTemplate, getDetails, updateTemplate } from '../api'
-// import UploadImage from '@/components/upload/UploadImage.vue'
-// import { createBanner, getDetails, updateBanner } from '../api'
-export default {
-  components: {
-    stepTwo
-    // UploadImage
-  },
-  data() {
-    return {
-      active: 0,
-      form: {
-        title: '',
-        rule: '0'
-      },
-      step2Data: {}
-    }
-  },
-  computed: {
-    id() {
-      return this.$route.query.id
-    }
-  },
-  methods: {
-    submit(data) {
-      if (this.$route.query.id) {
-        data.id = this.$route.query.id
-        updateTemplate(Object.assign(this.form, data)).then(res => {
-          this.$message({
-            message: '修改成功',
-            type: 'success'
-          })
-          this.$router.go(-1)
-        })
-      } else {
-        createTemplate(Object.assign(this.form, data)).then(res => {
-          this.$message({
-            message: '提交成功',
-            type: 'success'
-          })
-          this.$router.go(-1)
-        })
-      }
-    },
-    getDetails() {
-      getDetails({ id: this.id }).then(res => {
-        const data = res.data
-        this.form = {
-          title: data.title,
-          rule: data.rule
-        }
-        this.step2Data = JSON.parse(data.info)
-      })
-    }
-  },
-  mounted() {
-    if (this.id) {
-      this.getDetails()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/modules/variable/components/DisplayType.vue

-<template>
-  <div>
-    <el-form :disabled="!!$route.query.type" ref="form" :rules="rules" :model="data" label-width="100px">
-      <el-form-item label="按钮文案：" prop="title">
-        <el-input v-model="data.title"></el-input>
-      </el-form-item>
-      <el-form-item label="页面展示：" prop="desc">
-        <v-editor :disabled="!!$route.query.type" v-model="data.desc"></v-editor>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import VEditor from '@/components/tinymce/Index.vue'
-export default {
-  components: { VEditor },
-  props: {
-    data: { type: Object, default: () => {} }
-  },
-  data() {
-    return {
-      form: {
-        edit: '',
-        btnText: ''
-      },
-      rules: {
-        title: [{ required: true, message: '请填写按钮文案', trigger: 'change' }],
-        desc: [{ required: true, message: '请填写页面内容', trigger: 'change' }]
-      }
-    }
-  },
-  methods: {
-    submitForm() {
-      let flag = false
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          flag = true
-        }
-      })
-      return flag
-    }
-  },
-  mounted() {
-    console.log(this.data, 'display')
-  }
-}
-</script>
-
-<style lang="scss">
-.tox-notifications-container {
-  display: none !important;
-}
-</style>

src/modules/variable/components/SetBasic.vue

-<template>
-  <div>
-    <el-form ref="form" :disabled="!!$route.query.type" :inline="true" :rules="rules" :model="form">
-      <el-form-item label="页面标题：" prop="title">
-        <el-input v-model="form.title"></el-input>
-      </el-form-item>
-      <el-form-item label="活动名称：" prop="name">
-        <el-input v-model="form.name"></el-input>
-      </el-form-item>
-      <el-form-item label="人数限制：" prop="max_number">
-        <el-input v-model="form.max_number"></el-input>
-      </el-form-item>
-      <el-form-item label="关联项目：" prop="project_id">
-        <el-select v-model="form.project_id" placeholder="请选择">
-          <el-option v-for="item in projectMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动开始时间：" prop="activity_time">
-        <el-date-picker
-          v-model="form.activity_time"
-          type="datetime"
-          @change="activityDateChange"
-          placeholder="选择日期时间"
-          :picker-options="pickerOptions"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="报名时间：" prop="time">
-        <el-date-picker
-          @change="dateChange"
-          v-model="form.time"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="报名开始日期"
-          end-placeholder="报名结束日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    form: { type: Object, default: () => {} }
-  },
-  data() {
-    return {
-      rules: {
-        title: { required: true, message: '请填写页面标题', trigger: 'blur' },
-        name: { required: true, message: '请填写活动标题', trigger: 'blur' },
-        max_number: [
-          { required: true, message: '请填写最大参与人数', trigger: 'blur' },
-          {
-            trigger: 'blur',
-            min: 1,
-            message: '最大人数限制不能小于1人',
-            validator(rule, value, callback) {
-              if (parseInt(Number(value)) && Number(value) >= 1) {
-                callback()
-              } else {
-                callback(new Error('最大人数限制不能小于1人'))
-              }
-            }
-          }
-        ],
-        project_id: { required: true, message: '请关联项目', trigger: 'change' },
-        time: { required: true, message: '请选择时间', trigger: 'change' },
-        activity_time: { required: true, message: '请选择时间', trigger: 'change' }
-      },
-      pickerOptions: {
-        disabledDate(v) {
-          return v.getTime() < new Date().getTime() - 86400000
-        }
-      }
-    }
-  },
-  computed: {
-    projectMap() {
-      return this.$store.state.commonMap.project_map || {}
-    }
-  },
-  mounted() {
-    console.log(this.form)
-  },
-  methods: {
-    submitForm() {
-      let flag = false
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          flag = true
-        }
-      })
-      return flag
-    },
-    // 日期改变的时候。吧日期转成后台需要的格式
-    dateChange(date) {
-      this.form.start_time = this.setDate(date[0])
-      this.form.end_time = this.setDate(date[1])
-    },
-    setDate(val) {
-      const d = new Date(val)
-      const date = `${d.getFullYear()}-${this.toDo(d.getMonth() + 1)}-${this.toDo(d.getDate())} ${this.toDo(
-        d.getHours()
-      )}:${this.toDo(d.getMinutes())}:${this.toDo(d.getSeconds())}`
-      return date
-    },
-    toDo(n) {
-      return n < 10 ? `0${n}` : n
-    },
-    activityDateChange() {
-      this.form.activity_time = this.setDate(this.form.activity_time)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/modules/variable/views/List.vue

@@ -3,7 +3,7 @@
     <app-list v-bind="tableOptions" ref="list">
       <div class="line"></div>
       <div class="btn-box">
-        <el-button type="primary" @click="$router.push({ path: '/variable/update' })">新建变量</el-button>
+        <el-button type="primary" @click="dialogVisible = true">+ 添加</el-button>
       </div>
       <template v-slot:filter-time>
         <el-date-picker
@@ -21,13 +21,41 @@
         <el-button type="text" @click="handleDelete(row)">删除</el-button>
       </template>
     </app-list>
+    <el-dialog title="添加动态变量" :visible.sync="dialogVisible" width="600px">
+      <el-form
+        :model="ruleForm"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+        style="width: 80%; margin: 0 auto"
+      >
+        <el-form-item label="变量名称：">
+          <el-input v-model="ruleForm.key"></el-input>
+        </el-form-item>
+        <el-form-item label="变量字段：">
+          <el-select v-model="ruleForm.value" placeholder="请选择">
+            <el-option v-for="item in infoOptions" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item>
+          <div style="padding-top: 20px">
+            <el-button type="primary" @click="submitForm">确认</el-button>
+            <el-button @click="$router.go(-1)">取消</el-button>
+          </div>
+        </el-form-item> -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+    </el-dialog>
   </app-card>
 </template>
 
 <script>
 // 接口
-import { getAppList, deleteVariable } from '../api'
-
+import { getAppList, deleteVariable, createVariable, updateVariable } from '../api'
 export default {
   data() {
     const count = []
@@ -39,7 +67,27 @@ export default {
       filterDate: '',
       options: count,
       createdStart: '',
-      createdEnd: ''
+      createdEnd: '',
+      dialogVisible: false,
+      ruleForm: {
+        key: '',
+        value: ''
+      },
+      infoOptions: [
+        { label: '姓名', value: 'name' },
+        { label: '电话', value: 'mobile' },
+        { label: '身份证号码', value: 'id_number' },
+        { label: '邮箱', value: 'email' },
+        { label: '地址', value: 'address' },
+        { label: '单位', value: 'company' },
+        { label: '职位', value: 'position' },
+        { label: '编号', value: 'number' },
+        { label: '国籍', value: 'country' },
+        { label: '省份', value: 'province' },
+        { label: '城市', value: 'city' },
+        { label: '行业', value: 'industry' },
+        { label: '微信', value: 'wechat' }
+      ]
     }
   },
   computed: {
@@ -67,15 +115,45 @@ export default {
           }
         ],
         columns: [
-          { label: 'id', prop: 'id', align: 'center' },
-          { label: '变量名称', prop: 'key', align: 'center' },
-          { label: '创建时间', prop: 'created_time', align: 'center' },
-          { label: '操作', slots: 'table-x', align: 'center' }
+          { label: '变量名称', prop: 'key' },
+          {
+            label: '关联变量',
+            prop: 'key2',
+            computed: res => {
+              return this.infoOptions.find(item => res.row.value === item.value).label
+            }
+          },
+          { label: 'id', prop: 'id' },
+          { label: '创建时间', prop: 'created_time' },
+          { label: '操作', slots: 'table-x' }
         ]
       }
     }
   },
   methods: {
+    submitForm() {
+      if (this.id) {
+        updateVariable(this.ruleForm).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: '编辑成功',
+              type: 'success'
+            })
+            this.dialogVisible = false
+          }
+        })
+      } else {
+        createVariable(this.ruleForm).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: '提交成功',
+              type: 'success'
+            })
+            this.dialogVisible = false
+          }
+        })
+      }
+    },
     // 时间搜索
     changeDate() {
       if (this.filterDate) {
@@ -88,7 +166,12 @@ export default {
     },
     // 编辑
     handleEdit(row) {
-      this.$router.push({ path: '/variable/update', query: { id: row.id, key: row.key, value: row.value } })
+      this.ruleForm = {
+        id: row.id,
+        key: row.key,
+        value: row.value
+      }
+      this.dialogVisible = true
     },
     // 删除
     handleDelete(row) {
@@ -106,11 +189,13 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .register-box {
+  ::v-deep {
     .el-form-item {
       margin-right: 20px !important;
     }
+  }
   .line {
     // border-top: 1px solid #D6D6D6;
     height: 1px;
@@ -122,4 +207,11 @@ export default {
     margin-bottom: 16px;
   }
 }
+::v-deep {
+  .el-dialog__body {
+    border-top: 1px solid #f0f0f0 !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    margin: 10px 0;
+  }
+}
 </style>