瀏覽代碼

协议页面

@dongkboy 3 年之前
父節點
當前提交
5002e87b83
共有 1 個文件被更改,包括 122 次插入 和 54 次删除
  1. 122 54
      src/views/AgreementManage/CarInsurance/AgreementEntry.vue

+ 122 - 54
src/views/AgreementManage/CarInsurance/AgreementEntry.vue

@@ -16,14 +16,17 @@
           <!-- 工具区域Start -->
           <el-row style="margin: 0px 20px;">
             <!-- <kt-button size="small" style="color: #409EFF;" icon="el-icon-circle-plus" label="添加" type="text" perms="sys:user:add" @click="handleAdd" /> -->
-            <kt-button style="background-color: #52C578;border:#52C578;margin-left: 15px;" icon="fa fa-plus" label="添加协议" type="primary" perms="sys:dept:add" @click="handleAdd" />
+            <kt-button style="background-color: #52C578;border:#52C578;margin-left: 15px;" icon="fa fa-plus" label="添加协议"
+              type="primary" perms="sys:dept:add" @click="handleAdd" />
           </el-row>
 
           <el-form class="queryForm" ref="queryFormRef" :model="queryForm" label-width="80px">
             <el-row style="margin-bottom: 15px;">
               <el-col :span="8">
                 <el-form-item label="录入时间">
-                  <el-date-picker v-model="queryForm.date" style="margin-left: 20px;width:90%" size="small" type="daterange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+                  <el-date-picker v-model="queryForm.date" style="margin-left: 20px;width:90%" size="small"
+                    type="daterange" align="left" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+                  </el-date-picker>
                 </el-form-item>
               </el-col>
               <el-col :span="4">
@@ -46,69 +49,82 @@
 
           <!-- 审核中-->
           <template v-if="pageRequest.columnFilters.status.value == '0'">
-            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns" editButtonName="查看" @findPage="findPage" @handleEdit="handleTableEdit">
+            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns"
+              editButtonName="查看" @findPage="findPage" @handleEdit="handleTableEdit">
             </kt-common-table>
           </template>
 
           <!-- 审核通过 -->
           <template v-if="pageRequest.columnFilters.status.value == '1'">
-            <kt-common-table permsEdit="sys:user:edit" permsDelete="sys:user:delete" :data="pageResult" :columns="columns" editButtonName="编辑" deleteButtonName="删除" :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit" @handleDeleteFlag="handleTableDeleteFlag">
+            <kt-common-table permsEdit="sys:user:edit" permsDelete="sys:user:delete" :data="pageResult" :columns="columns"
+              editButtonName="编辑" deleteButtonName="删除" :showBatchDelete="false" @findPage="findPage"
+              @handleEdit="handleTableEdit" @handleDeleteFlag="handleTableDeleteFlag">
             </kt-common-table>
           </template>
 
           <!-- 退回修改 -->
           <template v-if="pageRequest.columnFilters.status.value == '2'">
-            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns" editButtonName="修改" @findPage="findPage" @handleEdit="handleTableEdit"></kt-common-table>
+            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns"
+              editButtonName="修改" @findPage="findPage" @handleEdit="handleTableEdit"></kt-common-table>
           </template>
 
           <!-- 已失效 -->
           <template v-if="pageRequest.columnFilters.status.value == '99'">
-            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns" editButtonName="修改" @findPage="findPage" @handleEdit="handleTableEdit"></kt-common-table>
+            <kt-common-table permsEdit="sys:user:edit" :showBatchDelete="false" :data="pageResult" :columns="columns"
+              editButtonName="修改" @findPage="findPage" @handleEdit="handleTableEdit"></kt-common-table>
           </template>
         </SplitArea>
       </Split>
     </el-main>
 
     <!-- 新增协议的对话框 -->
-    <el-dialog title="协议信息" v-dialogDrag :visible.sync="dialogVisible" width="840px" :before-close="handleClose" @close="closeVisible">
+    <el-dialog title="协议信息" v-dialogDrag :visible.sync="dialogVisible" width="70%" :before-close="handleClose"
+      @close="closeVisible">
 
-      <el-row style="margin-bottom: 10px;" v-if="addAgreementForm.agreestatus=='2'">
+      <el-row style="margin-bottom: 10px;" v-if="addAgreementForm.agreestatus == '2'">
         <el-col :span="4" style="text-align: right"><label style="margin-right: 10px;">退回修改原因:</label></el-col>
         <el-col :span="20" style="color: red;">
-          {{addAgreementForm.remark}}
+          {{ addAgreementForm.remark }}
         </el-col>
       </el-row>
-      <el-row v-if="addAgreementForm.agreestatus!='0'">
-        <el-button color="#f00" size="small" type="primary" style="margin-bottom: 20px;" @click="productDialogVisible=true">添加产品费用</el-button>
+      <el-row v-if="addAgreementForm.agreestatus != '0'">
+        <el-button color="#f00" size="small" type="primary" style="margin-bottom: 20px;"
+          @click="productDialogVisible = true">添加产品费用</el-button>
       </el-row>
 
       <!-- 内容主体区域 -->
-      <el-tabs v-model="activeTabs" type="card" :closable="addAgreementForm.agreestatus!='0'" @tab-remove="removeProductTab">
+      <el-tabs v-model="activeTabs" type="card" :closable="addAgreementForm.agreestatus != '0'"
+        @tab-remove="removeProductTab">
         <!-- 协议基本信息 -->
         <el-tab-pane label="协议信息" name="first">
-          <el-form :disabled="addAgreementForm.agreestatus=='0'" size="mini" :model="addAgreementForm" :rules="addAgreementRules" ref="addAgreementRef" label-width="130px">
+          <el-form :disabled="addAgreementForm.agreestatus == '0'" size="mini" :model="addAgreementForm"
+            :rules="addAgreementRules" ref="addAgreementRef" label-width="130px">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议代码" prop="agreementcode">
-                  <el-input v-model="addAgreementForm.agreementcode" placeholder="请输入协议代码" style="width: 100%;"></el-input>
+                  <el-input v-model="addAgreementForm.agreementcode" placeholder="请输入协议代码"
+                    style="width: 100%;"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议名称" prop="agreementname">
-                  <el-input v-model="addAgreementForm.agreementname" placeholder="请输入协议名称" style="width: 100%;"></el-input>
+                  <el-input v-model="addAgreementForm.agreementname" placeholder="请输入协议名称"
+                    style="width: 100%;"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议简称" prop="agreementshort">
-                  <el-input v-model="addAgreementForm.agreementshort" placeholder="请输入协议简称" style="width: 100%;"></el-input>
+                  <el-input v-model="addAgreementForm.agreementshort" placeholder="请输入协议简称"
+                    style="width: 100%;"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议类型" prop="agreementtype">
                   <el-select v-model="addAgreementForm.agreementtype" placeholder="请选择协议类型" style="width: 100%;">
-                    <el-option v-for="item in agreementtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in agreementtypeoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -116,7 +132,8 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="合作公司" prop="insure1">
-                  <el-cascader style="width: 100%;" v-model="addAgreementForm.insure1" :show-all-levels="false" :options="options" :props="optionProps" @change="handleChange" clearable></el-cascader>
+                  <el-cascader style="width: 100%;" v-model="addAgreementForm.insure1" :show-all-levels="false"
+                    :options="options" :props="optionProps" @change="handleChange" clearable></el-cascader>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -129,7 +146,8 @@
               <el-col :span="12">
                 <el-form-item label="合作渠道" prop="channel">
                   <el-select v-model="addAgreementForm.channel" placeholder="请选择投保渠道" style="width: 100%;">
-                    <el-option v-for="item in channeloptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in channeloptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -138,6 +156,22 @@
                   <el-input v-model="addAgreementForm.account" placeholder="请添加对接人" style="width: 100%;"></el-input>
                 </el-form-item>
               </el-col>
+
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="联系方式" prop="account">
+                  <el-input v-model="addAgreementForm.account" placeholder="请输入联系方式" style="width: 100%;"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="有效状态" prop="account">
+                  <el-select v-model="addAgreementForm.channel" placeholder="请选择投保渠道" style="width: 100%;">
+                    <el-option label="有效" value="1"></el-option>
+                    <el-option label="无效" value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
@@ -151,7 +185,8 @@
               <el-col :span="12">
                 <el-form-item label="保单日期类型" prop="matchtype">
                   <el-select v-model="addAgreementForm.matchtype" placeholder="请选择保单日期类型" style="width: 100%;">
-                    <el-option v-for="item in matchtypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in matchtypeoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -159,13 +194,15 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item label="协议生效日期" prop="startdate">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.startdate" type="date" placeholder="选择协议生效日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.startdate" type="date"
+                    placeholder="选择协议生效日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                   </el-date-picker>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="协议失效日期" prop="enddate">
-                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.enddate" type="date" placeholder="选择失效日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  <el-date-picker style="width: 100%;" v-model="addAgreementForm.enddate" type="date" placeholder="选择失效日期"
+                    format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                   </el-date-picker>
                 </el-form-item>
               </el-col>
@@ -174,27 +211,38 @@
               <el-col :span="12">
                 <el-form-item label="佣金发放方式" prop="moneytype">
                   <el-select v-model="addAgreementForm.moneytype" placeholder="请选择佣金发放方式" style="width: 100%;">
-                    <el-option v-for="item in moneytypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in moneytypeoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="结算周期" prop="moneytime">
                   <el-select v-model="addAgreementForm.moneytime" placeholder="请选择结算周期" style="width: 100%;">
-                    <el-option :label="'T+'+item" :value="item" v-for="item of 60" :key="item"></el-option>
+                    <el-option :label="'T+' + item" :value="item" v-for="item of 60" :key="item"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </el-tab-pane>
+        <el-tab-pane label="产品费用" name="product" style="padding: 20px;">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox label="复选框 A" ></el-checkbox>
+          </el-checkbox-group>
+        </el-tab-pane>
         <el-tab-pane label="承保规则" name="second">
-          <el-form :disabled="addAgreementForm.agreestatus=='0'" size="mini" :model="rulesForm" :rules="agreementProdsRules" ref="rulesForm" label-width="120px">
+
+        </el-tab-pane>
+        <!-- <el-tab-pane label="承保规则" name="second">
+          <el-form :disabled="addAgreementForm.agreestatus == '0'" size="mini" :model="rulesForm"
+            :rules="agreementProdsRules" ref="rulesForm" label-width="120px">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="费率类型" prop="feetype">
                   <el-select v-model="rulesForm.feetype" placeholder="请选择费率类型" style="width: 100%;">
-                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -212,19 +260,21 @@
               <el-col :span="12">
                 <el-form-item label="使用性质" prop="canusenature">
                   <el-select v-model="rulesForm.canusenature" placeholder="请选择使用性质" style="width: 100%;">
-                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="车辆种类" prop="cancarkind">
                   <el-select v-model="rulesForm.cancarkind" placeholder="请选择车辆种类" style="width: 100%;">
-                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
-            <!-- <el-row>
+          <el-row>
               <el-col :span="24" v-if="carareaoptions.length>0 || operType=='ADD'">
                 <el-form-item label="可承保地区" prop="cancity">
                   <el-select style="width: 100%;" v-model="rulesForm.cancity" multiple clearable placeholder="请选择可承保地区">
@@ -232,16 +282,18 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row> -->
+            </el-row>
           </el-form>
-        </el-tab-pane>
+        </el-tab-pane> -->
         <el-tab-pane label="渠道信息" name="qudao">
-          <el-form :disabled="addAgreementForm.agreestatus=='0'" size="mini" :model="rulesForm" :rules="agreementProdsRules" ref="rulesForm" label-width="120px">
+          <el-form :disabled="addAgreementForm.agreestatus == '0'" size="mini" :model="rulesForm"
+            :rules="agreementProdsRules" ref="rulesForm" label-width="120px">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="费率类型" prop="feetype">
                   <el-select v-model="rulesForm.feetype" placeholder="请选择费率类型" style="width: 100%;">
-                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in feetypeoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -259,26 +311,31 @@
               <el-col :span="12">
                 <el-form-item label="使用性质" prop="canusenature">
                   <el-select v-model="rulesForm.canusenature" placeholder="请选择使用性质" style="width: 100%;">
-                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in canusenatureoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="车辆种类" prop="cancarkind">
                   <el-select v-model="rulesForm.cancarkind" placeholder="请选择车辆种类" style="width: 100%;">
-                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
+                    <el-option v-for="item in cancarkindoptions" :key="item.label" :label="item.label"
+                      :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane :key="item.productid" v-for="(item, index) in productTabs" :label="item.product" :name="item.productid">
-          <el-form :disabled="addAgreementForm.agreestatus=='0'" size="mini" :model="item" :rules="agreementProdsRules" ref="productRef" label-width="120px">
+        <el-tab-pane :key="item.productid" v-for="(item, index) in productTabs" :label="item.product"
+          :name="item.productid">
+          <el-form :disabled="addAgreementForm.agreestatus == '0'" size="mini" :model="item" :rules="agreementProdsRules"
+            ref="productRef" label-width="120px">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="产品佣金比例" prop="productrate">
-                  <el-input v-model="item.productrate" @change="changeProdFee(index)" placeholder="请输入产品佣金比例" style="width: 100%;"></el-input>
+                  <el-input v-model="item.productrate" @change="changeProdFee(index)" placeholder="请输入产品佣金比例"
+                    style="width: 100%;"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -290,14 +347,14 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-row style="border-top: 1px solid #eee;margin-top: 0px;padding: 10px 0px;" v-if="operType=='EDIT'">
+            <el-row style="border-top: 1px solid #eee;margin-top: 0px;padding: 10px 0px;" v-if="operType == 'EDIT'">
               <el-row style="margin-bottom: 10px;">
                 <label style="margin-right: 15px;font-size: 16px;">管理费用设置</label>
               </el-row>
               <el-row style="margin: 10px 0px;background-color: #E4E7ED;padding: 8px 0;">
-                <el-col :span="8" class="u-f-ajc">佣金入口:{{item.productrate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">公司预留佣金:{{item.keeprate}}</el-col>
-                <el-col :span="8" class="u-f-ajc">佣金出口:{{item.feerate}}</el-col>
+                <el-col :span="8" class="u-f-ajc">佣金入口:{{ item.productrate }}</el-col>
+                <el-col :span="8" class="u-f-ajc">公司预留佣金:{{ item.keeprate }}</el-col>
+                <el-col :span="8" class="u-f-ajc">佣金出口:{{ item.feerate }}</el-col>
               </el-row>
               <el-row>
                 <el-row style="margin: 5px 0px;" type="flex" justify="center">
@@ -305,26 +362,30 @@
                   <el-col :span="8">管理费用</el-col>
                   <el-col :span="8">追加费用</el-col>
                 </el-row>
-                <el-row style="margin: 5px 0px;" type="flex" justify="center" v-for="prodfeesItem in item.prodfees" :key="prodfeesItem.comlevel">
+                <el-row style="margin: 5px 0px;" type="flex" justify="center" v-for="prodfeesItem in item.prodfees"
+                  :key="prodfeesItem.comlevel">
                   <el-col :span="4">
-                    <label>{{prodfeesItem.comlevel}}</label>
+                    <label>{{ prodfeesItem.comlevel }}</label>
                   </el-col>
                   <el-col :span="8">
-                    <el-input size="mini" style="width:60%" type="number" @change="changeProdFee(index)" v-model="prodfeesItem.keeprate"></el-input>
+                    <el-input size="mini" style="width:60%" type="number" @change="changeProdFee(index)"
+                      v-model="prodfeesItem.keeprate"></el-input>
                   </el-col>
                   <el-col :span="8">
-                    <el-input size="mini" type="number" style="width:60%" @change="changeProdFee(index)" v-model="prodfeesItem.addrate"></el-input>
+                    <el-input size="mini" type="number" style="width:60%" @change="changeProdFee(index)"
+                      v-model="prodfeesItem.addrate"></el-input>
                   </el-col>
                 </el-row>
               </el-row>
             </el-row>
             <!-- 费用授权 -->
-            <el-row style="border-top: 1px solid #eee;margin-top: 20px;padding: 10px 0px;" v-if="operType=='EDIT'">
+            <el-row style="border-top: 1px solid #eee;margin-top: 20px;padding: 10px 0px;" v-if="operType == 'EDIT'">
               <el-row style="margin-bottom: 10px;">
                 <label style="margin-right: 15px;font-size: 16px;">管理费用授权</label>
               </el-row>
               <el-row>
-                <el-tree :ref="item.id" :data="companyListTree" :props="companyProps" show-checkbox node-key="id" :accordion="true" :default-checked-keys="item.authcomcode"></el-tree>
+                <el-tree :ref="item.id" :data="companyListTree" :props="companyProps" show-checkbox node-key="id"
+                  :accordion="true" :default-checked-keys="item.authcomcode"></el-tree>
               </el-row>
             </el-row>
 
@@ -335,11 +396,13 @@
       <!-- 底部区域 -->
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
-        <el-button v-show="addAgreementForm.agreestatus!='0'" size="mini" type="primary" @click="submitForm">提交</el-button>
+        <el-button v-show="addAgreementForm.agreestatus != '0'" size="mini" type="primary"
+          @click="submitForm">提交</el-button>
       </span>
     </el-dialog>
 
-    <el-dialog title="新增产品费用" :visible.sync="productDialogVisible" :before-close="addProductHandleClose" width="700px" center>
+    <el-dialog title="新增产品费用" :visible.sync="productDialogVisible" :before-close="addProductHandleClose" width="700px"
+      center>
       <el-form label-width="120px" size="mini">
         <el-row>
           <el-col :span="9">
@@ -381,6 +444,11 @@ export default {
   },
   data() {
     return {
+      //==============================
+      checkList: ['复选框 A'],
+
+
+      //==============================
       peopleid: "",
       peopledeptid: "",
 
@@ -496,7 +564,7 @@ export default {
         children: "children",
       },
       options: [], //保险公司下拉列表
-      activeTabs: "first",
+      activeTabs: "product",
       operType: "ADD", //'ADD','EDIT'
       dialogTitle: "新增协议",
       dialogVisible: false, //控制对话框显示
@@ -900,7 +968,6 @@ export default {
     // 选择合作公司end
 
     handleAdd() {
-      this.activeTabs = "first";
       this.operType = "ADD";
       this.dialogTitle = "新增协议";
       this.dialogVisible = true;
@@ -910,7 +977,7 @@ export default {
         .then((_) => {
           done();
         })
-        .catch((_) => {});
+        .catch((_) => { });
     },
     closeVisible() {
       this.carareaoptions = [];
@@ -1055,7 +1122,7 @@ export default {
         .then((_) => {
           done();
         })
-        .catch((_) => {});
+        .catch((_) => { });
     },
     removeProductTab(targetName) {
       let tabs = this.productTabs;
@@ -1242,6 +1309,7 @@ export default {
 .el-divider {
   margin: 10px 0px 15px !important;
 }
+
 .queryForm .el-row {
   margin: 0px;
 }