guhongwei 4 лет назад
Родитель
Сommit
9e010a6043
2 измененных файлов с 232 добавлено и 221 удалено
  1. 0 1
      src/store/market/markettype.js
  2. 232 220
      src/views/notice/productForm.vue

+ 0 - 1
src/store/market/markettype.js

@@ -10,7 +10,6 @@ const mutations = {};
 
 const actions = {
   async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
-    console.log(info);
     const res = await this.$axios.$get(api.codeitemInfo, { skip, limit, ...info });
     return res;
   },

+ 232 - 220
src/views/notice/productForm.vue

@@ -1,146 +1,15 @@
 <template>
   <div id="productForm">
     <el-row>
-      <!-- <div class="w_1200">
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="技术需求信息征集" name="first">
-            <el-col :span="24">
-              列表
-            </el-col>
-            <el-col :span="24">
-              添加
-            </el-col>
-          </el-tab-pane>
-          <el-tab-pane label="科技成果信息征集" name="second"></el-tab-pane>
-        </el-tabs>
-        <el-col :span="24">
-          <el-col :span="24">
-            <h1>企业信息</h1>
-            <el-col :span="24">
-              <span>企业名称:</span>
-              <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>注册类型:</span>
-                <el-input v-model="form.type" placeholder="请输入注册类型"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>组织机构代码:</span>
-                <el-input v-model="form.zzjgdm" placeholder="请输入组织机构代码"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>注册时间:</span>
-                <el-input v-model="form.companydate" placeholder="请输入注册时间"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>注册资金:</span>
-                <el-input v-model="form.companycapital" placeholder="请输入注册资金"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>企业法人:</span>
-                <el-input v-model="form.companyperson" placeholder="请输入企业法人"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>企业网站:</span>
-                <el-input v-model="form.companyweb" placeholder="请输入企业网站"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>上年度企业总收入:</span>
-                <el-input v-model="form.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>上年度研发费用:</span>
-                <el-input v-model="form.sndyffy" placeholder="请输入上年度研发费用"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>企业总人数:</span>
-                <el-input v-model="form.companytotal" placeholder="请输入企业总人数"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>专&兼职研发人数:</span>
-                <el-input v-model="form.zjzyfrs" placeholder="请输入专&兼职研发人数"></el-input>
-              </el-col>
-            </el-col>
-          </el-col>
-          <el-col :span="24">
-            <h1>技术需求</h1>
-            <el-col :span="24">
-              <span>技术难题名称:</span>
-              <el-input v-model="form.name" placeholder="请输入技术难题名称"></el-input>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>需求紧急程度:</span>
-                <el-input v-model="form.degreeurgency" placeholder="请输入需求紧急程度"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>所属领域:</span>
-                <el-input v-model="form.field" placeholder="请输入所属领域"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>合作方式:</span>
-                <el-input v-model="form.cooperation" placeholder="请输入合作方式"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>投资预算:</span>
-                <el-input v-model="form.budget" placeholder="请输入投资预算"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>技术难题说明:</span>
-                <el-input v-model="form.requirementdesc" placeholder="请输入技术难题说明"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>预期技术目标描述:</span>
-                <el-input v-model="form.expect" placeholder="请输入预期技术目标描述"></el-input>
-              </el-col>
-            </el-col>
-            <el-col :span="24">
-              <el-col :span="12" class='txt'>
-                <span>需求现状及应对措施:</span>
-                <el-input v-model="form.present" placeholder="请输入需求现状及应对措施"></el-input>
-              </el-col>
-              <el-col :span="12" class='txt'>
-                <span>合作条件及要求:</span>
-                <el-input v-model="form.condition" placeholder="请输入合作条件及要求"></el-input>
-              </el-col>
-            </el-col>
-
-            <el-button type="primary" @click="isenableBtn()">保存</el-button>
-          </el-col>
-        </el-col>
-      </div> -->
       <el-col :span="24">
         <div class="w_1200">
           <el-col :span="24" class="top">
             <el-col :span="24" class="search">
-              查询
+              <el-input v-model="company" placeholder="请输入企业名称"></el-input>
+              <el-button type="primary" size="mini" @click="search">查询产品</el-button>
             </el-col>
             <el-col :span="24" class="list">
-              <el-table :data="list" style="width: 100%" border>
-                <el-table-column prop="date" label="名称" align="center"> </el-table-column>
-                <el-table-column label="产品类型" align="center">
-                  <template v-slot="scoped">
-                    {{ `${scoped.row.type}` == `0` ? '技术' : `${scoped.row.type}` == `1` ? '产品' : `${scoped.row.type}` == `2` ? '商务' : '' }}
-                  </template>
-                </el-table-column>
-                <el-table-column prop="field" label="所属领域" align="center"> </el-table-column>
-                <el-table-column prop="cooperation" label="合作方式" align="center"> </el-table-column>
-                <el-table-column prop="contacts" label="联系人" align="center"> </el-table-column>
-                <el-table-column prop="phone" label="联系电话" align="center"> </el-table-column>
-              </el-table>
+              <data-table :fields="fields" :opera="opera" :data="list" :total="total" @delete="toDelete" @query="search"></data-table>
             </el-col>
           </el-col>
           <el-col :span="24" class="down">
@@ -163,144 +32,151 @@
                           注册类型:
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.companytype" placeholder="请输入注册类型"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
-                        <el-col :span="4" class="left">
-                          注册类型
+                        <el-col :span="5" class="left">
+                          组织机构代码
                         </el-col>
-                        <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="19" class="right">
+                          <el-input v-model="technologyForm.zzjgdm" placeholder="请输入组织机构代码"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          注册时间
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-date-picker
+                            v-model="technologyForm.companydate"
+                            type="date"
+                            placeholder="请选择时间"
+                            format="yyyy-MM-dd"
+                            value-format="yyyy-MM-dd"
+                          >
+                          </el-date-picker>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型:
+                          注册资金
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.companycapital" placeholder="请输入注册资金"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          企业法人
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.companyperson" placeholder="请输入企业法人"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          企业网址
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.companyweb" placeholder="请输入企业网址"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          联系人
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.contacts" placeholder="请输入联系人"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          联系电话
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.phone" placeholder="请输入联系电话"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          QQ&微信
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.qqwx" placeholder="请输入QQ&微信"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          电子邮箱
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.email" placeholder="请输入电子邮箱"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
-                        <el-col :span="4" class="left">
-                          注册类型
+                        <el-col :span="6" class="left">
+                          上年度企业总收入
                         </el-col>
-                        <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="18" class="right">
+                          <el-input v-model="technologyForm.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
-                        <el-col :span="4" class="left">
-                          注册类型
+                        <el-col :span="6" class="left">
+                          上年度研发费用
                         </el-col>
-                        <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="18" class="right">
+                          <el-input v-model="technologyForm.sndyffy" placeholder="请输入上年度研发费用"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          企业总人数
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.companytotal" placeholder="请输入企业总人数"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
-                        <el-col :span="4" class="left">
-                          注册类型
+                        <el-col :span="6" class="left">
+                          专&兼职研发人数
                         </el-col>
-                        <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="18" class="right">
+                          <el-input v-model="technologyForm.zjzyfrs" placeholder="请输入专&兼职研发人数"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
                         <p>企业简介:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.companybrief"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入企业简介"
                         ></el-input>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>主要产品:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.mainproduct"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入主要产品"
                         ></el-input>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>企业资质&荣誉:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.qualifications"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入企业资质&荣誉"
                         ></el-input>
                       </el-col>
                     </el-col>
@@ -309,93 +185,101 @@
                     <h1>技术需求</h1>
                     <el-col :span="24" class="productInfo">
                       <el-col :span="24" class="txt">
-                        <el-col :span="2" class="left">
-                          企业名称:
+                        <el-col :span="4" class="left">
+                          技术难题&需求名称:
                         </el-col>
-                        <el-col :span="22" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="20" class="right">
+                          <el-input v-model="technologyForm.name" placeholder="请输入技术难题&需求名称"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
-                        <el-col :span="4" class="left">
-                          注册类型
+                        <el-col :span="5" class="left">
+                          需求紧急程度
                         </el-col>
-                        <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                        <el-col :span="19" class="right">
+                          <el-select v-model="technologyForm.degreeurgency" placeholder="请选择需求紧急程度">
+                            <el-option label="特急" value="特急"></el-option>
+                            <el-option label="一般" value="一般"></el-option>
+                            <el-option label="储备" value="储备"></el-option>
+                          </el-select>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          所属领域
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-select v-model="technologyForm.field" filterable>
+                            <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
+                          </el-select>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          投资预算
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-input v-model="technologyForm.budget" placeholder="请输入投资预算"></el-input>
                         </el-col>
                       </el-col>
                       <el-col :span="12" class="txt">
                         <el-col :span="4" class="left">
-                          注册类型
+                          合作方式
                         </el-col>
                         <el-col :span="20" class="right">
-                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
+                          <el-select v-model="technologyForm.cooperation" filterable>
+                            <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
+                          </el-select>
                         </el-col>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>技术难题&需求说明:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.requirementdesc"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入技术难题&需求说明"
                         ></el-input>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>预期技术目标描述:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.expect"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入预期技术目标描述"
                         ></el-input>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>需求现状及应对措施:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.present"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入需求现状及应对措施"
                         ></el-input>
                       </el-col>
                       <el-col :span="24" class="txtTwo">
-                        <p>企业简介:</p>
+                        <p>合作条件及要求:</p>
                         <el-input
-                          v-model="technologyForm.company"
+                          v-model="technologyForm.condition"
                           type="textarea"
                           maxlength="300"
                           show-word-limit
-                          :autosize="{ minRows: 2, maxRows: 5 }"
-                          placeholder="请输入企业名称"
+                          :autosize="{ minRows: 4, maxRows: 5 }"
+                          placeholder="请输入合作条件及要求"
                         ></el-input>
                       </el-col>
                     </el-col>
                   </el-col>
                   <el-col :span="24" class="btn">
-                    <el-button type="primary" size="mini">保存</el-button>
+                    <el-button type="primary" size="mini" @click="technologyBtn">保存</el-button>
                   </el-col>
                 </el-col>
               </el-tab-pane>
@@ -404,28 +288,140 @@
           </el-col>
         </div>
       </el-col>
+      <el-backtop>
+        <div class="backTop">返回顶部</div>
+      </el-backtop>
     </el-row>
   </div>
 </template>
 
 <script>
+import dataTable from '@/components/data-table.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
+const { mapActions: collectproduct } = createNamespacedHelpers('collectproduct');
 export default {
   name: 'productForm',
   props: {},
-  components: {},
+  components: {
+    dataTable,
+  },
   data: function() {
     return {
+      opera: [
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+          display: item => {
+            return item.status == '0' ? true : false;
+          },
+        },
+      ],
+      fields: [
+        { label: '企业名称', prop: 'company' },
+        { label: '标题', prop: 'name' },
+        {
+          label: '产品类型',
+          prop: 'type',
+          format: item => {
+            return item === '0' ? '技术' : item === '1' ? '产品' : '商务';
+          },
+        },
+        { label: '所属领域', prop: 'field' },
+        { label: '合作方式', prop: 'cooperation' },
+        { label: '联系人', prop: 'contacts' },
+        { label: '联系电话', prop: 'phone' },
+        {
+          label: '状态',
+          prop: 'status',
+          format: item => {
+            return item === '0' ? '待审核' : item === '1' ? '审核通过' : '审核拒绝';
+          },
+        },
+      ],
       list: [],
+      total: 0,
       activeName: 'first',
+      // 查询
+      company: '',
+      // 所属领域
+      fieldList: [],
+      // 成果状态
+      achievestatusList: [],
+      // 合作方式
+      cooperationList: [],
       // 技术需求
       technologyForm: {},
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.searchtype();
+  },
+  methods: {
+    ...markettype({ markettypeList: 'query' }),
+    ...collectproduct(['query', 'fetch', 'create', 'delete']),
+    // 查询企业所发布信息
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.company) {
+        let res = await this.query({ skip, limit, company: this.company, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      }
+    },
+    // 删除
+    async toDelete({ data }) {
+      let res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '信息删除成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    // 查询字典表
+    async searchtype() {
+      // 所属领域;
+      let res = await this.markettypeList({ category: '01' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `fieldList`, res.data);
+      }
+      // 成果状态;
+      res = await this.markettypeList({ category: '02' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `achievestatusList`, res.data);
+      }
+      // 合作方式;
+      res = await this.markettypeList({ category: '03' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `cooperationList`, res.data);
+      }
+    },
+    // 技术需求提交
+    async technologyBtn() {
+      let data = this.technologyForm;
+      data.noticeid = this.noticeid;
+      data.type = '0';
+      data.status = '0';
+      let res = await this.create(data);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '信息添加成功',
+          type: 'success',
+        });
+        // window.location.reload();
+        this.technologyForm = {};
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
+    noticeid() {
+      return this.$route.query.id;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -443,8 +439,15 @@ export default {
 }
 .top {
   .search {
-  }
-  .list {
+    text-align: center;
+    padding: 30px 0;
+    /deep/ .el-button {
+      padding: 10px 20px;
+      font-size: 16px;
+    }
+    /deep/.el-input {
+      width: 50%;
+    }
   }
 }
 .down {
@@ -470,8 +473,6 @@ export default {
             line-height: 40px;
             font-size: 15px;
           }
-          .right {
-          }
         }
         .txtTwo {
           p {
@@ -501,8 +502,6 @@ export default {
             line-height: 40px;
             font-size: 15px;
           }
-          .right {
-          }
         }
         .txtTwo {
           p {
@@ -514,7 +513,20 @@ export default {
     }
     .btn {
       text-align: center;
+      margin: 15px 0;
     }
   }
 }
+/deep/.el-backtop {
+  font-size: 16px;
+}
+.backTop {
+  height: 100%;
+  width: 100%;
+  background-color: #f2f5f6;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  text-align: center;
+  color: #1989fa;
+  border-radius: 10px;
+}
 </style>