index.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="关键字" prop="nickname">
        <el-input v-model="queryParams.searchKey" placeholder="搜索昵称、姓名、手机、Email" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="成交" prop="mobile">
        <el-select v-model="queryParams.isDeal">
          <el-option v-for="item in [{label:'全部',value:''},{label:'是',value:true},{label:'否',value:false}]" :value="item.value" :label="item.label" :key="item.value" ></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="认证" prop="password">
        <el-select v-model="queryParams.authType">
          <el-option v-for="item in [{label: '全部',value: ''},{label:'营业执照认证',value:1},{label:'身份证认证',value:2},{label:'双认证',value:3}]" :key="item.value"  :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="registerIp">
        <dict-selector v-model="queryParams.auditStatus" :type="DICT_TYPE.AUDIT_STATUS"></dict-selector>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button :loading="exportLoading" type="primary" @click="exportFn">导 出</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="公司名称" align="center" prop="enterpriseName" />
      <el-table-column label="用户昵称" align="center" prop="nickname" />
      <el-table-column label="真实姓名" align="center" prop="identityName" />
      <el-table-column label="区号">
        <template v-slot:default = 'scope'>
          {{scope.row.areaCode ? `${scope.row.areaCode}`:''}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" show-overflow-tooltip align="center" prop="mobile" >
     </el-table-column>
      <el-table-column label="成交" align="center" prop="" show-overflow-tooltip />
      <el-table-column label="认证" align="center" :formatter="authentication" />
      <el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="身份证审核状态" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.identityAuditStatus">未提交</div>
        <dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.identityAuditStatus" ></dict-tag>
          <el-tooltip  v-if="scope.row.identityAuditStatus === 3" class="item" effect="dark" :content="scope.identityAuditRemark" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="营业执照审核状态" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.enterpriseAuditStatus">未提交</div>
          <dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.enterpriseAuditStatus" ></dict-tag>
          <el-tooltip  v-if="scope.row.enterpriseAuditStatus === 3" class="item" effect="dark" :content="scope.rowenterpriseAuditRemark" placement="bottom">
          <i class="el-icon-question"></i>
            </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope" >
          <el-button size="mini" type="text"  @click="guarantee(scope.row)">保函/证书</el-button>
          <el-button size="mini" type="text"  @click="operationLogFn(scope.row)">操作日志</el-button>
          <el-button v-if="scope.row.identityAuditStatus !== 0 && scope.row.identityAuditStatus !== undefined" size="mini" type="text"  @click="identityFn(scope.row , '1')">身份证</el-button>
          <el-button  size="mini" type="text"  @click="identityFn(scope.row, '2')">营业执照</el-button>
          <el-button  size="mini" type="text" @click="deleteFn(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                @pagination="getList"/>
    <el-dialog
      title="保函/证书"
      :visible.sync="guaranteeShow"
      :before-close="()=>{guaranteeUrl = ''; guaranteeShow = false;}"
      width="50%">
      <el-form>
        <el-form-item label="保函/证书">
          <el-row :gutter="20" type="flex" justify="center" >
            <el-col :span="12"><el-input v-model="guaranteeUrl" ></el-input></el-col>
            <el-col :span="4"><div style="height: 45px;overflow: hidden;">
              <file-upload v-model="guaranteeUrl" :fileType="['png', 'jpg', 'jpeg','pdf']" :limit="1" :isShowTip="false"></file-upload>
            </div></el-col>
            <el-col :span="6">
              <div>可上传图片,pdf文档</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
       <div style="text-align: center;"><el-button @click="setGuarantee">保 存</el-button></div>
    </el-dialog>
    <el-dialog
      title="操作日志"
      :visible.sync="operationLogShow"
      width="50%">
      <el-table :data="operationLogList">
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="操作内容" prop="content"></el-table-column>
        <el-table-column label="操作人" prop="userId"></el-table-column>
        <el-table-column label="操作时间">
          <template v-slot:default ="scope">
            {{parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作ip" prop="ip"></el-table-column>
      </el-table>
      <pagination  v-show="totalLog >   0" :total="totalLog" :page.sync="operationLogFrom.page" :limit.sync="operationLogFrom.row"
                  @pagination="getOperationLogList"/>
    </el-dialog>
        <el-dialog
          title="认证"
          :visible.sync="attestationShow"
          width="80%">
           <div class="details">
             <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane label="身份证" name="1" v-if="this.publicObj && this.publicObj.identityAuditStatus !== 0 && this.publicObj.identityAuditStatus !== undefined">
                <div style="padding:0 40px;box-sizing: border-box;">
                  <el-form ref="formId" label-position="left" label-width="100px" :rules="rulesId"  :model="IdDetails" >
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="IdDetails.name"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" prop="cardType">
                      <dict-selector v-model="IdDetails.cardType"  :type="DICT_TYPE.CERTIFICATE_TYPE" ></dict-selector>
                    </el-form-item>
                    <el-form-item label="证件号码" prop="cardNumber">
                      <el-input v-model="IdDetails.cardNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="证件正面照" prop="img1">
                      <div>
                          <el-input  readonly style="margin-bottom: 20px" v-model="IdDetails.img1"></el-input>
                        <ImageUpload :isShowTip="false" v-model="IdDetails.img1" :limit="1"></ImageUpload>
                      </div>
                    </el-form-item>
                    <el-form-item label="证件背面照" prop="img2">
                      <div>
                        <el-input readonly style="margin-bottom: 20px" v-model="IdDetails.img2"></el-input>
                        <ImageUpload :isShowTip="false" :limit="1" v-model="IdDetails.img2"></ImageUpload>
                      </div>
                    </el-form-item>
                    <el-form-item label="审核状态">
                     {{getDictDatas(DICT_TYPE.AUDIT_STATUS)[IdDetails.status].label}}
                    </el-form-item>
                    <el-form-item label="审核时间" v-if="IdDetails.status === 2 || IdDetails.status === 3">
                     {{parseTime(IdDetails.auditTime)}}
                    </el-form-item>
                    <el-form-item v-if="IdDetails.status === 1 || IdDetails.status === 3" label="审核备注">
                     <el-input v-model="IdDetails.auditRemark" :disabled="IdDetails.status === 3" type="textarea"></el-input>
                    </el-form-item>
                  </el-form>
                  <div v-if="IdDetails.status === 1" style="text-align: center;margin-top: 20px;">
                    <el-button type="primary" @click="idCardAuditFn(2)">审核通过</el-button>
                    <el-button type="primary" @click="idCardAuditFn(3)">审核不通过</el-button>
                    <el-button @click="attestationShow = false">取 消</el-button>
                  </div>
                  <div v-if="IdDetails.status === 2 || IdDetails.status === 3" style="text-align: center;margin-top: 20px;">
                    <el-button type="primary" @click="setMemberUserUpdateIdCard">修 改</el-button>
                    <el-button @click="attestationShow = false">取 消</el-button>
                  </div>
                </div>
               </el-tab-pane>
               <el-tab-pane label="营业执照" name="2" >
                <div style="width: 500px;padding:0 40px;box-sizing: border-box;">
                  <el-form :rules="rulesEnterprise" :model="enterpriseFrom" label-position="left" ref="formEnter" label-width="100px">
                    <el-form-item label="企业名称" prop="name">
                        <el-input v-model="enterpriseFrom.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="企业法人" prop="legalName">
                      <el-input v-model="enterpriseFrom.legalName" ></el-input>
                    </el-form-item>
                    <el-form-item label="证件号码" prop="cardNumber">
                      <el-input v-model="enterpriseFrom.cardNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="证件照" prop="img1">
                      <div>
                        <el-input readonly style="margin-bottom: 20px" v-model="enterpriseFrom.img1"></el-input>
                        <ImageUpload :isShowTip="false" :limit="1" v-model="enterpriseFrom.img1"></ImageUpload>
                      </div>
                    </el-form-item>
                    <el-form-item label="附件">
                      <el-input readonly v-model="enterpriseFrom.img2"></el-input>
                      <ImageUpload :isShowTip="false" :limit="1" v-model="enterpriseFrom.img2"></ImageUpload>
                    </el-form-item>
                    <el-form-item label="审核状态">{{getDictDatas(DICT_TYPE.AUDIT_STATUS)[enterpriseFrom.status].label}}</el-form-item>
                    <el-form-item v-if="enterpriseFrom.status === 2 || enterpriseFrom.status === 3" label="审核时间">{{parseTime(enterpriseFrom.auditTime)}}</el-form-item>
                    <el-form-item v-if="enterpriseFrom.status === 1 || enterpriseFrom.status === 3" label="审核备注">
                      <el-input v-model="enterpriseFrom.auditRemark" :disabled="enterpriseFrom.status === 3" type="textarea"></el-input>
                    </el-form-item>
                  </el-form>
                  <div v-if="enterpriseFrom.status === 1" style="text-align: center;margin-top: 20px;">
                    <el-button type="primary" @click="certificateVerificationFn(2)">审核通过</el-button>
                    <el-button type="primary" @click="certificateVerificationFn(3)">审核不通过</el-button>
                    <el-button @click="attestationShow = false">取 消</el-button>
                  </div>
                  <div v-if="enterpriseFrom.status === 2 || enterpriseFrom.status === 3" style="text-align: center;margin-top: 20px;">
                    <el-button type="primary" @click="setMemberUserUpdateEnterprise">修 改</el-button>
                    <el-button @click="attestationShow = false">取 消</el-button>
                  </div>
                  <div v-if="enterpriseFrom.status === 0" style="text-align: center;margin-top: 20px;">
                    <el-button type="primary" @click="submit">上 传</el-button>
                    <el-button @click="attestationShow = false">取 消</el-button>
                  </div>
                </div>
               </el-tab-pane>
             </el-tabs>
           </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  createUser,
  updateUser,
  deleteUser,
  getUserPage,
  exportUserExcel,
  operationLogApi,
  seTupdateBackletter,
  memberGetAuthIdcardInfo,
  memberGetAuthEnterpriseInfo,
  memberUserAuditIdCard,
  memberUserUpdateIdCard,
  memberUserUpdateEnterprise, setUserUpdateStatus, userCreateAuditEnterprise
} from "@/api/member/user";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import FileUpload  from "@/components/FileUpload"
import ImageUpload from "@/components/ImageUpload";
import uploadImage from "@/components/UploadImage";
import {CommonStatusEnum} from "@/utils/constants";
import {changeUserStatus, listServiceUser, listSimpleUsers} from "@/api/system/user";

let stateId = {
  0:'审核中',
  1:'审核通过',
  2:'审核不通过',
  3:'已过期'
}
export default {
  name: "User",
  components: {
    FileUpload,
    ImageUpload,uploadImage
  },
  data() {
    return {
      totalLog:0,
      stateId,
      IdDetails:{},
      enterpriseFrom:{},
      guaranteeUrl:undefined,
      DICT_TYPE,
      getDictDatas,
      // audit_status
      activeName:"1",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRangeLoginDate: [],
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        isDeal:undefined,//	是否成交
        searchKey:undefined,//关键字
        auditStatus:undefined,//审核状态
        authType:undefined,//关键字
      },
      // 表单参数
      form: {},
      // 表单校验
      rulesId: {
        name: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        cardType: [{ required: true, message: "证件类型不能为空", trigger: "blur" }],
        cardNumber: [{ required: true, message: "证件号码不能为空", trigger: "blur" }],
        img1: [{ required: true, message: "身份正面照不能为空", trigger: "blur" }],
        img2: [{ required: true, message: "身份正面照不能为空", trigger: "blur" }],
      },
      rulesEnterprise: {
        name: [{required: true, message: "企业名称不能为空", trigger: "blur"}],
        legalName: [{required: true, message: "企业法人不能为空", trigger: "blur"}],
        cardNumber: [{required: true, message: "证件号码不能为空", trigger: "blur"}],
        img1: [{required: true, message: "证件照不能为空", trigger: "blur"}],
      },
      publicObj:undefined,
      operationLogShow:false,
      guaranteeShow:false,
      operationLogFrom:{
        page:1,
        row:10,
        userId:undefined
      },
      operationLogList:[],
      attestationShow:false
    };
  },
  created() {
    this.resetId();
    this.resetEnterprise()
    this.getList();
  },
  methods: {
    deleteFn(row){
      console.log(row)
      this.$modal.confirm(`是否要删除昵称为${row.nickname}的会员`).then(function (){
            return deleteUser(row.id)
      }).then( res => {
        if(res.code === 0) this.getList(); this.$message.success('删除成功')
      }).catch(() =>{
        this.$message.success('删除失败')
        }

      )
    },
    //导出
    exportFn(){
      this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
        this.exportLoading = true;
        return exportUserExcel(this.queryParams);
      }).then(response => {
        this.$download.excel(response, '${table.classComment}.xls');
        this.exportLoading = false;
      }).catch(() => {});
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.nickname + '"用户吗?').then(function() {
        return setUserUpdateStatus({id:row.id,status:row.status})
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
          : CommonStatusEnum.ENABLE;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams};
      this.addBeginAndEndTime(params, this.dateRangeLoginDate, 'loginDate');
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行查询
      getUserPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 表单重置 */
    resetId(){
       this.IdDetails = {
         auditRemark: undefined,
         auditTime: undefined,
         cardNumber: undefined,
         cardType: 0,
         createTime: undefined,
         id: 0,
         img1: undefined,
         img2: undefined,
         name: '',
         status: 0,
         userId: 0
       }
    },//清空身份证
    resetEnterprise(){
      this.enterpriseFrom = {
        auditRemark: undefined,
        auditTime: undefined,
        cardNumber: undefined,
        createTime: undefined,
        id: undefined,
        img1: undefined,
        img2: undefined,
        legalName: undefined,
        name: undefined,
        status: 0,
        userId: undefined
      }
    },//清空企业
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeLoginDate = [];
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 保函证书
    guarantee(row) {
         this.publicObj = row;
         this.guaranteeShow = true;
         this.guaranteeUrl = row.backLetterImg;
    },
    // 操作日志
    operationLogFn(row){
      this.publicObj = row;
      this.operationLogFrom.page = 1;
      this.operationLogFrom.userId = row.id
      this.operationLogShow = true;
      this.operationLogList = [];
      this.getOperationLogList();

    },
    getOperationLogList(){
      operationLogApi(this.operationLogFrom).then(r=>{
        if(r.code === 0){
          this.operationLogList = r.data.list
          this.totalLog = r.data.total
        }
      })
    },
    setGuarantee(){
      seTupdateBackletter({userId:this.publicObj.id,backLetter:this.guaranteeUrl}).then(r=>{
        if(r.code === 0){
          this.publicObj.backLetterImg = this.guaranteeUrl;
          this.guaranteeShow = false;
          this.$message.success('保存成功');
        }
      })
    },
    identityFn(row,val){
      this.attestationShow = true;
      this.activeName = val;
      this.publicObj = row;
      if(val == 1){
        this.getIdentityDetails();
      }else {
        this.getEnterpriseFn();
      }
    },
    handleClick(val){
      if(val.name == 1){
        this.getIdentityDetails();
      }else {
        this.getEnterpriseFn();
      }
    },
    getIdentityDetails(){
      this.resetId();
      memberGetAuthIdcardInfo({userId:this.publicObj.id}).then(r=>{
        if(r.code === 0 && !!r.data){
            this.IdDetails  = r.data
        }
      })
    },
    getEnterpriseFn(){
      this.resetEnterprise();
      memberGetAuthEnterpriseInfo({userId:this.publicObj.id}).then(r => {
         if(r.code === 0 && !!r.data){
           this.enterpriseFrom = r.data
         }
      })
    },
    //身份证审核
    idCardAuditFn(val){
      let p = {
        auditStatus:val,
        userCardAuthId:this.IdDetails.id,
        auditRemark:this.IdDetails.auditRemark
      }
      if(val === 2){
       p.auditRemark = undefined
      }
      memberUserAuditIdCard(p).then(r => {
        if(r.code === 0){
          this.$message.success('修改成功');
          this.getList()
          this.getIdentityDetails()
        }
      })
    },
  //  企业证书审核
    certificateVerificationFn(val){
      let p = {
        auditStatus:val,
        userCardAuthId:this.enterpriseFrom.id,
        auditRemark:this.enterpriseFrom.auditRemark
      }
      if(val === 2){
        p.auditRemark = undefined
      }
      memberUserAuditEnterprise(p).then(r => {
        if(r.code === 0){
          this.getList()
          this.getEnterpriseFn();
        }
      })
    },
    setMemberUserUpdateIdCard(){
      this.$refs.formId.validate(async valid =>{
        let p ={
          cardNumber:this.IdDetails.cardNumber,
          cardType:this.IdDetails.cardType,
          img1:this.IdDetails.img1,
          img2:this.IdDetails.img2,
          name:this.IdDetails.name,
          userCardAuthId:this.IdDetails.id,
        };
        if(valid && this.IdDetails.status === 3){
       let res = await new Promise((resolve)=>{
         this.$confirm('是否要将当前状态修改为审核成功？', '状态修改', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(r =>{
           resolve(r)
         }).catch((r)=>{
           resolve(r)
         })
       })
          p.auditPass = res === 'confirm' ? true : false;
        } else if(valid) {
          p.auditPass =  false;
        } else {
          return
        }
        memberUserUpdateIdCard(p).then(r => {
          if(r.code === 0){
            this.$message.success('修改成功')
            if(p.auditPass === true ){
              this.getIdentityDetails()
            }
            this.getList()
          }
        })
      })
    },
    setMemberUserUpdateEnterprise(){
      this.$refs.formEnter.validate(async valid =>{
        let p = {
          cardNumber:this.enterpriseFrom.cardNumber,
          img1:this.enterpriseFrom.img1,
          img2:this.enterpriseFrom.img2,
          legalName:this.enterpriseFrom.legalName,
          name:this.enterpriseFrom.name,
          userEnterpriseAuthId:this.enterpriseFrom.id,
        }
        if(valid && this.enterpriseFrom.status === 3){
          let res = await  new Promise((resolve)=>{
            this.$confirm('是否要将当前状态修改为审核成功?', '状态修改', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(r =>resolve(r)).catch(r => resolve(r))
          })
          p.auditPass = res === 'confirm' ? true : false;
        }else if(valid){
          p.auditPass = false;
        }else {
          return
        }
        memberUserUpdateEnterprise(p).then(r =>{
          if(r.code === 0){
            if(p.auditPass === 3){
              this.getEnterpriseFn();
            }
            this.getList()
            this.$message.success('修改成功');
          }
        })
      })
    },
    authentication(row){
     if(!row.identityAuditStatus && !row.enterpriseAuditRemark){
       return '否'
      }else if(row.identityAuditStatus >= 0 && row.enterpriseAuditRemark >= 0){
       return '双认证'
     } else if(row.identityAuditStatus >= 0){
       return '身份'
     }else if(row.enterpriseAuditRemark >= 0){
       return '营业'
     }
    },
    submit(){
      let p = {
        cardNumber:this.enterpriseFrom.cardNumber,
        img1:this.enterpriseFrom.img1,
        img2:this.enterpriseFrom.img2,
        legalName:this.enterpriseFrom.legalName,
        name:this.enterpriseFrom.name,
        userEnterpriseAuthId:this.enterpriseFrom.id,
        userId:this.publicObj.id
      }
      userCreateAuditEnterprise(p).then(r => {
        console.log(r);
        if(r.code === 0){
          this.$message.success('添加成功!');
          this.enterpriseFrom.status = 2
          this.enterpriseFrom.auditTime = new Date().getTime()
         this.getEnterpriseFn();
        }
      })
    }
  },
  watch:{
    attestationShow(newVal){
       if(!newVal){
         this.resetId();
         this.resetEnterprise()
         this.publicObj = undefined;
       }
    }
  }
};
</script>
<style lang="scss" scoped>
.details{
  .el-input {
    width: 300px;
  }
  .el-textarea{
    width: 300px;
  }
  .el-button{
    width: 180px;
    height: 50px;
     margin: 0 10px;
  }
}
</style>