feat:[非试验表单][配置方法列表]

src/views/business/form/nonTrial/comp/syff.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="study-tbbd">
-    <div class="tbbd-right">
-      配置方法列表
+    <div class="tbbd-right" >
+      <syffList :study="studyInfo" @showDetail="showDetailCallback"/>
     </div>
   </div>
 </template>
 
 <script>
+import syffList from './syffList.vue'
 export default {
   name: 'StudySyff',
   props: {
@@ -20,22 +21,32 @@ export default {
   watch:{
     study: {
       immediate: true,
-      deep: true,
+      deep:true,
       handler(v) {
-        this.studyInfo = v
+        this.studyInfo = _.merge({studySubjectId:''},v)
       },
     },
   },
-  components: {},
+  components: {syffList},
   computed: {},
   filters: {},
   data() {
     return {
-      studyInfo:{}
+      showDetail:false,
+      studyInfo:{
+        studySubjectId:''
+      }
     }
   },
   created() {},
   methods: {
+    changeSubject(val){
+      this.studyInfo.studySubjectId = val
+    },
+    showDetailCallback(val){
+      this.showDetail=val
+      this.$emit('showDetail',val)
+    }
   }
 }
 </script>

src/views/business/form/nonTrial/comp/syff/Xq.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <div class="edit-container">
+      <div class="edit-top">
+        <div class="left-top">
+          <img src="@/assets/images/back.png" @click="cancel()" />
+          <div class="left-title"></div>
+        </div>
+        <div class="center-top">
+        </div>
+        <div class="right-top">
+          <el-button @click="cancel()">{{ $t('form.cancel') }}</el-button>
+          <el-button type="primary" @click="handleExport" v-if="showExportBtn">{{
+            $t('page.business.study.studyMethod.daochu') }}</el-button>
+          <el-button type="primary" @click="yuedu" v-if="form.zt == 0 && !showExportBtn">{{
+            $t('page.business.study.studyMethod.yuedu') }}</el-button>
+        </div>
+      </div>
+      <div class="edit-content ">
+        <div class="pdf-layout">
+          <div class="pdf-content">
+            <pdf id="pdfBox" :page="pageNum" :src="pdfSrc" @progress="loadedRatio = $event"
+              @num-pages="totalPages = $event"></pdf>
+          </div>
+          <div class="btn-layout" v-if="totalPages">
+            <div class="pageNum">{{ pageNum }} / {{ totalPages }}</div>
+            <el-button-group>
+              <el-button round plain type="primary" icon="el-icon-arrow-left" size="mini"
+                @click="prePage">上一页</el-button>
+              <el-button round plain type="primary" size="mini" @click="nextPage">下一页<i
+                  class="el-icon-arrow-right el-icon--right"></i></el-button>
+            </el-button-group>
+          </div>
+          <div ref="contentToPdf">
+            <div class="content-title">
+              <div class="line"></div>
+              <div class="subtitle"> {{ $t('page.business.study.studyMethod.qmhz') }}</div>
+            </div>
+            <el-table v-loading="loading" :data="list">
+              <el-table-column :label="$t('page.business.study.studyMethod.qmr')" prop="qmrMc" />
+              <el-table-column :label="$t('page.business.study.studyMethod.qmsj')" prop="createTime" />
+              <el-table-column :label="$t('page.business.study.studyMethod.qmyy')" prop="qmyy" />
+              <el-table-column :label="$t('page.business.study.studyMethod.remark')" prop="remark" />
+            </el-table>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+    <Yd ref="Yd" @callback="closeYd" />
+  </div>
+</template>
+
+<script>
+import { studyMethod_readList, studyMethod_export } from '@/api/business/study/studyMethod'
+import html2canvas from 'html2canvas';
+import { PDFDocument } from 'pdf-lib'
+import { mapGetters } from 'vuex'
+import pdf from 'vue-pdf'
+import Yd from './Yd.vue'
+export default {
+  name: "Xq",
+  components: { pdf, Yd },
+  data() {
+    return {
+      showExportBtn: false,
+      pdfSrc: '',
+      open: false,
+      pageNum: 1,
+      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
+      totalPages: 0, //pdf总页数
+      form: {},
+      list: [],
+      loading: false,
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName','name'
+    ]),
+  },
+  created() {
+
+  },
+  methods: {
+    yuedu() {
+      this.$refs.Yd.show(this.form)
+    },
+
+    cancel() {
+      this.$emit('close')
+    },
+
+    show(row) {
+      this.showExportBtn = false
+      this.open = true
+      this.form = row
+      this.pdfSrc = process.env.VUE_APP_FILE_DOMAIN + row.fileUrl
+      this.getPageNum()
+    },
+    showExport(row) {
+      this.loading = true
+      this.open = true
+      this.showExportBtn = true
+      this.form = row
+      this.pdfSrc = process.env.VUE_APP_FILE_DOMAIN + row.fileUrl
+
+      studyMethod_readList({ studyMethodId: row.id }).then(response => {
+        this.list = response.data
+        this.loading = false
+        this.getPageNum()
+      })
+    },
+
+    // 获取PDF总页数
+    getPageNum() {
+      let loadingTask = pdf.createLoadingTask(this.pdfSrc);
+      loadingTask.promise
+        .then((pdf) => {
+          this.totalPages = pdf.numPages;
+          this.loadPdfFromUrl()
+          // this.$nextTick(() => {
+          //   this.setWatermarkContent();
+          // });
+
+        })
+        .catch((err) => {
+          this.$message.msgError("pdf加载失败");
+        });
+
+    },
+    // 上一页
+    prePage() {
+      let page = this.pageNum;
+      page = page > 1 ? page - 1 : this.totalPages;
+      this.pageNum = page;
+      window.scrollTo(0, 0);
+    },
+
+    // 下一页
+    nextPage() {
+      let page = this.pageNum;
+      page = page < this.totalPages ? page + 1 : 1;
+      this.pageNum = page;
+      window.scrollTo(0, 0);
+    },
+
+    closeYd(val) {
+      this.form.zt = val
+    },
+
+    handleExport() {
+      studyMethod_export({studyMethodId: this.form.id}).then(response => {
+        let fileUrl = response.data.fileUrl
+        this.$download.saveAs(process.env.VUE_APP_FILE_DOMAIN + fileUrl, this.form.ffmc + ".pdf");
+      })
+    }
+
+  }
+}
+</script>
+<style lang="scss">
+.pdf-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.pdf-content {
+  min-width: 1000px;
+  min-height: 550px;
+  position: relative;
+  margin: 0 auto
+}
+
+.btn-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content-edit {
+  background: #f5f5f5;
+  padding: 0;
+
+  .edit-top {
+    background: #fff;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .left-top {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      img {
+        height: 16px;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+
+      .right-top {}
+
+    }
+  }
+
+  .edit-content {
+    background: #fff;
+    padding: 20px;
+    min-height: 500px;
+
+    .edit-form {
+      width: 800px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

src/views/business/form/nonTrial/comp/syff/Xz.vue

@@ -0,0 +1,205 @@
+G<template>
+  <div>
+    <!-- 新增试验间弹窗 -->
+    <el-dialog :title="$t('page.business.study.studyMethod.scff')" :visible.sync="open" width="400px" append-to-body
+      :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('page.business.study.studyMethod.mc')" prop="ffmc">
+              <el-input type="text" v-model="form.ffmc" maxlength="20"
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <!-- 方法 -->
+          <el-col :span="24">
+            <el-form-item :label="$t('page.business.study.studyMethod.ff')" prop="fileUlr">
+              <el-upload class="upload-demo" :before-upload="handleBeforeUpload" :on-error="handleUploadError"
+                :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="true" :headers="headers"
+                :on-remove="handleRemove" :action="uploadFileUrl" accept=".pdf" :limit="1" :file-list="fileList">
+                <el-button size="small" type="primary">{{ $t('page.business.study.studyMethod.scwj') }}</el-button>
+                <div slot="tip" class="el-upload__tip">{{ $t('page.business.study.studyMethod.wjm') }}</div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
+              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.remark')" prop="qmbz">
+              <el-input type="textarea" v-model="form.qmbz" :rows="2" maxlength="500"
+                :placeholder="$t('form.placeholderInput')">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.signer')">
+              <el-input type="text" v-model="nickName" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.password')" prop="qmrmm">
+              <el-input type="password" v-model="form.qmrmm" maxlength="20"
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { studyMethod_save } from "@/api/business/study/studyMethod"
+import { mapGetters } from 'vuex'
+import { getToken } from "@/utils/auth"
+
+export default {
+  name: "XzSyj",
+  components: {},
+  data() {
+    return {
+      open: false,
+      form: {
+        mc: '',
+        fileUrl: '',
+        fileName: ''
+      },
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      rules: {
+        ffmc: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        fileUrl: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        qmrmm: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName','name'
+    ]),
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.open = false
+    },
+    reset() {
+      this.form = {
+        ffmc: null,
+        fileUrl: '',
+        fileName: '',
+        qmrmm: null,
+        kssyyl: '',
+        qmyy: '上传文件',
+        bjbz: ''
+      }
+      this.fileList = []
+      this.resetForm("form")
+    },
+    show(study) {
+      this.reset()
+      this.form.studyId = study.id
+      this.form.studySubjectId = study.studySubjectId
+      this.open = true
+    },
+    save() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          studyMethod_save(this.form).then(response => {
+            this.open = false
+            this.$emit('callback')
+          })
+        }
+      })
+    },
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      let fileType = ['pdf']
+      // 校检文件类型
+      if (fileType) {
+        const fileName = file.name.split('.')
+        const fileExt = fileName[fileName.length - 1]
+        const isTypeOk = fileType.indexOf(fileExt) >= 0
+        if (!isTypeOk) {
+          this.$modal.msgError('文件格式不正确，请上传pdf格式文件!')
+          return false
+        }
+      }
+      // 校检文件名是否包含特殊字符
+      if (file.name.includes(',')) {
+        this.$modal.msgError('文件名不正确，不能包含英文逗号!')
+        return false
+      }
+      this.$modal.loading("正在上传文件，请稍候...")
+      this.number++
+      return true
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError('上传文件数量不能超过1个!')
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试")
+      this.$modal.closeLoading()
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      console.log(res)
+      if (res.code === 200) {
+        this.form.fileUrl = res.data.url
+        this.form.fileName = res.data.name
+        this.fileList.push({ name: res.data.name, url: res.data.url })
+        this.$modal.closeLoading()
+      } else {
+        this.number--
+        this.$modal.closeLoading()
+        this.$modal.msgError(res.msg)
+        this.$refs.fileUpload.handleRemove(file)
+      }
+    },
+    handleRemove() {
+      this.form.fileUrl = ''
+      this.form.fileName = ''
+      this.fileList = []
+    }
+  }
+}
+</script>

src/views/business/form/nonTrial/comp/syff/Yd.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <!-- 阅读弹窗 -->
+    <el-dialog :title="$t('page.business.study.studyMethod.yuedu')" :visible.sync="open" width="500px" append-to-body
+      :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
+              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.remark')" prop="remark">
+              <el-input type="textarea" v-model="form.remark" :rows="5" maxlength="500"
+                :placeholder="$t('form.placeholderInput')">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.signer')">
+              <el-input type="text" v-model="nickName" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.password')" prop="qmrmm">
+              <el-input type="password" v-model="form.qmrmm" maxlength="20"
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { studyMethod_read } from "@/api/business/study/studyMethod"
+import { mapGetters } from 'vuex'
+
+export default {
+  name: "Yd",
+  data() {
+    return {
+      open: false,
+      form: {},
+      rules: {
+        qmrmm: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName','name'
+    ]),
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.open = false
+    },
+    reset() {
+      this.form = {
+        studyMethodId: null,
+        qmyy: '阅读',
+        remark: '',
+        qmrmm: null
+      }
+      this.resetForm("form")
+    },
+    show(row) {
+      this.reset()
+      this.form.studyMethodId = row.id
+      this.open = true
+    },
+    save() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.$modal.loading()
+          studyMethod_read(this.form).then(response => {
+            this.open = false
+            this.$emit('callback', 1)
+            this.$modal.closeLoading()
+          }).finally(() => {
+            this.$modal.closeLoading()
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/business/form/nonTrial/comp/syffList.vue

@@ -0,0 +1,211 @@
+<!-- 试验方法列表 -->
+<template>
+  <div>
+    <div class="tbbd-list" v-show="!showDetail">
+      <div class="tbbd-search">
+        <el-form :model="searchForm" ref="searchForm" class="search-area" :inline="true" label-width="88px">
+          <el-row>
+            <el-col :span="24">
+              <!-- 方法名称 -->
+              <el-form-item :label="$t('page.business.study.studyMethod.ffmc')" prop="ffmc">
+                <el-input v-model="searchForm.ffmc" :placeholder="$t('form.placeholderInput')" clearable
+                  @keyup.enter.native="search" />
+              </el-form-item>
+              <!-- 创建人 -->
+              <el-form-item :label="$t('page.business.study.studyMethod.cjr')" prop="cjr">
+                <el-input v-model="searchForm.cjr" :placeholder="$t('form.placeholderInput')" clearable
+                  @keyup.enter.native="search" />
+              </el-form-item>
+              <!-- 创建时间 -->
+              <el-form-item :label="$t('page.business.study.studyMethod.cjsj') + '：'">
+                <el-date-picker v-model="daterange" class="chat-histogram-daterange" type="daterange"
+                  range-separator="-" :start-placeholder="$t('form.startDate')" :end-placeholder="$t('form.endDate')"
+                  value-format="yyyy-MM-dd" @change="search" style="width: 250px;" />
+              </el-form-item>
+              <!-- 状态 -->
+              <el-form-item :label="$t('page.business.study.studyMethod.zt') + '：'" prop="zt">
+                <el-select v-model="searchForm.zt" :placeholder="$t('form.placeholderSelect')" clearable
+                  @change="search">
+                  <el-option :label="$t('page.business.study.studyMethod.yidu')" :value="1" />
+                  <el-option :label="$t('page.business.study.studyMethod.weidu')" :value="0" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
+                <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+      </div>
+      <div class="tbbd-content">
+        <el-row class="add-box">
+          <el-col>
+            <el-button type="primary" icon="el-icon-plus" @click="add()" v-hasPermi="['business:studyMethod:upload']">{{
+              $t('page.business.study.studyMethod.scff') }}</el-button>
+          </el-col>
+        </el-row>
+
+        <el-table v-loading="loading" :data="list">
+          <el-table-column :label="$t('page.business.study.studyMethod.ffmc')" prop="ffmc" />
+          <el-table-column :label="$t('page.business.study.studyMethod.cjsj')" prop="createTime" />
+          <el-table-column :label="$t('page.business.study.studyMethod.cjr')" prop="userMc" />
+          <el-table-column :label="$t('page.business.study.studyMethod.zt')" prop="status" align="center" width="100">
+            <template slot-scope="scope">
+              <span v-if="scope.row.zt != 0">{{ $t('page.business.study.studyMethod.yidu') }}</span>
+              <span v-if="scope.row.zt === 0">{{ $t('page.business.study.studyMethod.weidu') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('form.operate')" align="left" fixed="right" width="200">
+            <template slot-scope="scope">
+              <!-- 阅读 -->
+              <el-button type="text" @click="detail(scope.row)" v-hasPermi="['business:studyMethod:read']">{{
+                $t('page.business.study.studyMethod.yuedu') }}</el-button>
+              <!-- 导出 -->
+              <el-button type="text" @click="showExport(scope.row)" v-hasPermi="['business:studyMethod:download']">{{
+                $t('page.business.study.studyMethod.daochu') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
+          @pagination="getList" />
+      </div>
+    </div>
+    <!-- 新增 -->
+    <Xz key="Xz" ref="Xz" @callback="search" />
+    <!-- 详情 -->
+    <Xq key="Xq" ref="Xq" v-show="showDetail"  @close="xqClose" />
+  </div>
+
+</template>
+
+<script>
+import { studyMethod_list } from '@/api/business/study/studyMethod'
+import Xz from "./syff/Xz";
+import Xq from "./syff/Xq";
+import { mapGetters } from 'vuex'
+import moment from "moment";
+export default {
+  name: 'SyffList',
+  props: {
+    study: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id'
+    ]),
+  },
+  watch: {
+    study: {
+      handler(newVal) {
+        this.searchForm.studySn = newVal.sn
+        this.searchForm.studyMc = newVal.name
+        this.searchForm.studyId = newVal.id
+        this.searchForm.studySubjectId = newVal.studySubjectId
+        this.leader = newVal.leader
+        this.search()
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  components: { Xz, Xq },
+  data() {
+    return {
+      showDetail: false,
+      daterange: [],
+      showFh: false,
+      daterange: [],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+        studyId: '',
+        syjh: '',
+        syqy: '',
+        qyr: '',
+        jsr: '',
+        startDate: '',
+        endDate: ''
+      },
+      loading: false,
+      total: 0,
+      list: [],
+      currentRow: null
+    }
+  },
+  created() { },
+  methods: {
+
+    search() {
+      this.searchForm.pageNum = 1
+      this.getList()
+    },
+    reset() {
+      this.resetForm("searchForm")
+      this.search()
+    },
+    getList() {
+      if (this.daterange != null && this.daterange.length > 0) {
+        this.searchForm.startDate = this.daterange[0] + " 00:00:00"
+        this.searchForm.endDate = this.daterange[1] + " 23:59:59"
+      } else {
+        this.searchForm.startDate = ''
+        this.searchForm.endDate = ''
+      }
+      this.loading = true
+      studyMethod_list(this.searchForm).then(response => {
+        this.list = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    add() {
+      this.$refs.Xz.show(this.study);
+    },
+    detail(row) {
+      this.showDetail = true
+      this.$emit('showDetail', this.showDetail)
+      this.$refs.Xq.show(row)
+    },
+    showExport(row) {
+      this.showDetail = true
+      this.$emit('showDetail', this.showDetail)
+      this.$refs.Xq.showExport(row)
+    },
+    xqClose() {
+      this.showDetail = false
+      this.$emit('showDetail', this.showDetail)
+      this.search()
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tbbd-list {
+  .tbbd-search {
+    background: #fff;
+    padding: 20px;
+    margin-bottom: 10px;
+
+    .right-btn {
+      text-align: right
+    }
+  }
+
+  .tbbd-content {
+    padding: 20px;
+    background: #fff;
+
+    .add-box {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>