front/front-vue/src/views/system/accInf/accInf.vue

<template>
  <div class="app-container zap-main">
    <search-bar :hiddenSetting="true" @query="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-form-item label="账户卡号" prop="paiAccno">
          <el-input
            v-model="queryParams.paiAccno"
            placeholder="请输入账户卡号"
            clearable
            @keyup.enter.native="handleQuery"
            maxlength="25"
          />
        </el-form-item>
      </el-form>
    </search-bar>
    <div class="zap-content zap-margin-top">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAdd"
        v-hasPermi="['accInf:accInf:add']"
        >添加对公账户</el-button
      >
    </div>

    <el-table
      class="zap-table"
      v-loading="loading"
      :data="accList"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="开户行" align="center" prop="paiBankName" />
      <el-table-column
        label="账户类型"
        :formatter="formulaFormat"
        align="center"
        prop="paiAcctype"
      />
      <el-table-column label="账户卡号" align="center" prop="paiAccno" />
      <el-table-column
        label="账户状态"
        :formatter="formulaFormatSend"
        align="center"
        prop="paiStatus"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['accInf:accInf:edit']"
            v-if="scope.row.paiAcctype == '00' || scope.row.paiAcctype == '01'"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['accInf:accInf:delete']"
            v-if="scope.row.paiAcctype == '01'"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-withdrawal"
            @click="handleWithdrawal(scope.row)"
            v-hasPermi="['user:wthdrawal:add']"
            v-if="
              scope.row.paiAcctype == '06' ||
              scope.row.paiAcctype == '07' ||
              scope.row.paiAcctype == '08'
            "
            >提现</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-recharge"
            @click="handleRecharge(scope.row)"
            v-if="
              scope.row.paiAcctype == '06' ||
              scope.row.paiAcctype == '07' ||
              scope.row.paiAcctype == '08'
            "
            >充值</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-if="scope.row.paiAcctype == '06'"
            >交易明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加对公账户 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-form-item prop="smiType" label="开户银行" size="large">
          <el-select
            @change="changePayer"
            v-model="form.paiBankName"
            filterable
            clearable
            remote
            reserve-keyword
            placeholder="请选择开户银行"
            :remote-method="getBankList"
          >
            <el-option
              v-for="(item, index) in bankList"
              :key="index"
              :label="item.zcbiBankName"
              :value="item.zcbiBankName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分支行" prop="paiQlbankname" size="large">
          <el-input
            v-model="form.paiQlbankname"
            clearable
            style="width: 215px"
            placeholder="请输入分支行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="账户名称" prop="scySocialCode" size="large">
          <el-input
            v-model="form.paiAccnoName"
            disabled
            clearable
            style="width: 215px"
            placeholder="请输入账户名称"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="账户卡号" prop="paiAccno" size="large">
          <el-input
            v-model="form.paiAccno"
            clearable
            style="width: 215px"
            placeholder="请输入账户卡号"
            maxlength="22"
          />
        </el-form-item>
      </el-form>
      <el-row style="height: 109px" type="flex" align="middle" justify="center">
        <el-button type="primary" plain @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </el-row>
    </el-dialog>
    <!-- 修改对公账户 -->
    <el-dialog :title="title" :visible.sync="edit" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-form-item prop="smiType" label="开户银行" size="large">
          <el-select
            @change="changePayer"
            v-model="form.paiBankName"
            :disabled="disableds"
            filterable
            clearable
            remote
            reserve-keyword
            placeholder="请选择开户银行"
            :remote-method="getBankList"
          >
            <el-option
              v-for="(item, index) in bankList"
              :key="index"
              :label="item.zcbiBankName"
              :value="item.zcbiBankName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分支行" prop="paiQlbankname" size="large">
          <el-input
            v-model="form.paiQlbankname"
            clearable
            style="width: 215px"
            placeholder="请输入分支行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="账户名称" prop="paiAccnoName" size="large">
          <el-input
            v-model="form.paiAccnoName"
            disabled
            clearable
            style="width: 215px"
            placeholder="请输入账户名称"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="账户卡号" prop="paiAccno" size="large">
          <el-input
            v-model="form.paiAccno"
            :disabled="disableds"
            clearable
            style="width: 215px"
            placeholder="请输入账户卡号"
            maxlength="22"
          />
        </el-form-item>
      </el-form>
      <el-row style="height: 109px" type="flex" align="middle" justify="center">
        <el-button type="primary" plain @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </el-row>
    </el-dialog>
    <!-- 充值页面 -->
    <el-dialog
      :title="title"
      :visible.sync="recharge"
      width="800px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-row type="flex" align="middle" class="zap-title"
          ><span class="zap-title__prefix"></span
          >复制以下信息,去银行客户端转账</el-row
        >
        <el-form-item label="开户银行" prop="paiBankName" size="large">
          <el-input
            v-model="form.paiBankName"
            style="width: 215px"
            placeholder="请输入开户银行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="分支行" prop="paiQlbankname" size="large">
          <el-input
            v-model="form.paiQlbankname"
            clearable
            style="width: 215px"
            placeholder="请输入分支行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="账户名称" prop="paiAccnoName" size="large">
          <el-input
            v-model="form.paiAccnoName"
            clearable
            style="width: 215px"
            placeholder="请输入账户名称"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="账户卡号" prop="paiAccno" size="large">
          <el-input
            v-model="form.paiAccno"
            clearable
            style="width: 215px"
            placeholder="请输入账户卡号"
            maxlength="15"
          />
        </el-form-item>
      </el-form>
      <el-row style="height: 109px" type="flex" align="middle" justify="center">
        <el-button type="primary" plain @click="cancelRecharge"
          >确 认</el-button
        >
      </el-row>
    </el-dialog>
    <!-- 提现页面 -->
    <el-dialog
      :title="title"
      :visible.sync="withdrawal"
      width="800px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="账户卡号" prop="paiAccno" size="large">
      <el-select
            v-model="form.paiAccno"
            filterable
            clearable
            remote
            reserve-keyword
            placeholder="请选择账户卡号"
          >
            <el-option
              v-for="(item, index) in cardList"
              :key="index"
              :label="item.paiAccno+'/'+item.paiQlbankname"
              :value="item.paiAccno"
              @click.native="changeAcc(item)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['accInf:accInf:add']"
          >添加对公账户</el-button
        >
        <el-form-item label="开户银行" prop="paiBankName" size="large">
          <el-input
            v-model="form.paiBankName"
            disabled
            clearable
            style="width: 215px"
            placeholder="请输入开户银行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="分支行" prop="paiQlbankname" size="large">
          <el-input
            v-model="form.paiQlbankname"
            disabled
            clearable
            style="width: 215px"
            placeholder="请输入分支行"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item label="账户名称" prop="paiAccnoName" size="large">
          <el-input
            v-model="form.paiAccnoName"
            disabled
            clearable
            style="width: 215px"
            placeholder="请输入账户名称"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="提现金额" prop="amount" size="large">
          <el-input
            v-model="form.amount"
            clearable
            style="width: 215px"
            placeholder="请输入提现金额"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="电子账户" prop="accno" size="large" style="display:none">
          <el-input
            v-model="form.accno"
            clearable
            style="width: 215px"
            placeholder="请输入电子账户"
            maxlength="18"
          />
        </el-form-item>
        <el-button type="primary" plain @click="allMoney">全部提现</el-button>
        <el-form-item prop="cade">
          <el-input v-model="form.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
          </el-input>
        </el-form-item>
        <el-row type="flex" align="middle" class="zap-title"
          ><span class="zap-title__prefix"></span>可提现金额:{{KYAMT ? KYAMT : 0.00}}元</el-row
        >
      </el-form>
      <el-row style="height: 109px" type="flex" align="middle" justify="center">
        <el-button type="primary" plain @click="cancelWithdrawal"
          >确 认</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { listAcc,addAcc,updateAcc,delAcc,listBank,detailsAcc,listCard,wthdrawal,listChargeStatus,payMoney} from "@/api/system/accInf";
import { balance } from "@/api/bank/bankInterface";
import { listElectronicsAcc } from "@/api/common/companyAcc";
import {sendMessageForMoney} from "@/api/login";
import { release } from 'os';
import Cookies from 'js-cookie';
export default {
  name: "accInf",
  data() {
    return {
      //验证码
      sendShortMessageBtn : false,
      codeBtnWord: '获取验证码', // 获取验证码按钮文字
      //可用余额
      KYAMT: null,
      //电子账户
      accno: null,
      // id隐藏
      isShow: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      //联系人隐藏
      disabled: false,
      disableds: false,
      // 总条数
      total: 0,
      // 账户表格数据
      accList: [],
      //账户卡号数据
      cardList: [],
      //姓名
      nameList: [],
      bankList: [],
      //字典
      formulaOptions: [],
      formulaOptionsSend: [],
      UserList: [],
      enclosureList: [],
      sfzList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层
      edit: false,
      // 是否显示弹出层
      recharge: false,
      // 是否显示弹出层
      withdrawal: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scyName: null,
        smiType: null,
        smiManager: null,
        smiContract: null,
        smiContractPhone: null,
        sfsContent: null,
        sfsIsDel: null,
        sfsRemark: null,
        ssId: null,
        ssName: null,
      },
      // 表单参数
      form: {
        shortMessageCode: null
      },
      // 表单校验
      rules: {
        paiBankName: [
          {
            required: true,
            message: "开户银行不能为空",
            trigger: ["change", "blur"],
          },
        ],
        paiQlbankname: [
          {
            required: true,
            message: "分支行不能为空",
            trigger: ["change", "blur"],
          },
        ],
        paiAccno: [
          {
            required: true,
            message: "银行卡号不能为空",
            trigger: ["change", "blur"],
          },
        ],
        amount: [
          {
            required: true,
            message: "提现金额不能为空",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getBankList();
    this.getDicts("pay_pai_acctype").then((response) => {
      this.formulaOptions = response.data;
    });
    this.getDicts("pay_pai_status").then((response) => {
      this.formulaOptionsSend = response.data;
    });
  },
  methods: {
    //切换账款类型
    changePayer(value) {
      if (value) {
        this.$set(this.form, "paiQlbankname", value);
      }
    },
    //提现选择账户
    changeAcc(item){
      if (item.paiAccno) {
        this.$set(this.form, "paiQlbankname", item.paiQlbankname);
        this.$set(this.form, "paiBankName", item.paiBankName);
        this.$set(this.form, "paiAccnoName", item.paiAccnoName);
      }
    },
    /** 查询账户列表 */
    getList() {
      this.loading = true;
      listAcc(this.queryParams).then((response) => {
        this.accList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    //查询对公账户
    listCard(){
      listCard().then((response) => {
        this.cardList = response.data.records;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 修改取消按钮
    cancelEdit() {
      this.edit = false;
      this.reset();
    },
    // 充值取消按钮
    cancelRecharge() {
      this.recharge = false;
      this.reset();
    },
    //全部提现
    allMoney(){
      this.$set(this.form, "amount", this.KYAMT);
    },
    // 提现按钮
    cancelWithdrawal() {
      var self = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          const loading = self.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          if(eval(self.form.amount) > eval(self.KYAMT)){
            self.$message({
              message: '提现金额不得大于可提现金额!',
              type: 'warning'
            });
            loading.close();
          }else if(self.form.shortMessageCode == null || self.form.shortMessageCode == ""){
            self.msgError("请输入短信验证码!");
            loading.close();
          }else{
            console.log(self.form.shortMessageCode,'验证码')
            //stAccNo:实体账户 dzAccNo:电子账户  tranAmt:提现金额 shortMessageCode:短信验证码
            var map = {'stAccNo': self.form.paiAccno,'dzAccNo':self.form.accno,'tranAmt':self.form.amount,'shortMessageCode':self.form.shortMessageCode}
            wthdrawal(map).then((response) =>{
              debugger
              if(response.data.status == "1"){
                loading.close();
                self.msgSuccess("提现成功");
                this.withdrawal = false;
                this.getList();
              }else if(response.data.status == "0"){
                loading.close();
                self.msgSuccess("提现中");
                this.withdrawal = false;
                this.getList();
              }else if(response.data.status == "2"){
                loading.close();
                self.msgError("提现失败,请稍后再试");
                this.withdrawal = false;
                this.getList();
              }
            }).catch(() => {
                loading.close();
            });
          }
        }
      });
      //this.withdrawal = false;
      //this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        scyId: null,
        scyName: null,
        smiType: null,
        smiManager: null,
        smiContract: null,
        smiContractPhone: null,
        sfsContent: null,
        sfsIsDel: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sfsRemark: null,
        ssId: null,
        ssName: null,
        amount: null,
        shortMessageCode: null
      };
      this.noneBtnImg = false;
      this.enclosureList = [];
      this.sfzList = [];
      this.resetForm("form");
      this.accno = null,
      this.KYAMT = null
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.scyId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //资方类型
    formulaFormat(row, column) {
      return this.selectDictLabel(this.formulaOptions, row.paiAcctype);
    },
    //奖项
    formulaFormatSend(row, column) {
      return this.selectDictLabel(this.formulaOptionsSend, row.paiStatus);
    },
    //查询银行名称
    getBankList(paiBankName) {
      this.queryParams.paiBankName = paiBankName;
      listBank(this.queryParams).then((response) => {
        this.bankList = response.data.records;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      detailsAcc().then((response) => {
        this.$set(this.form, "paiAccnoName", response.data.company);
      });
      this.title = "添加对公账户";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const paiId = row.paiId || this.ids;
      detailsAcc(paiId).then((response) => {
        debugger
        this.form = response.data.sccInf[0];
        this.edit = true;
        if (response.data.sccInf[0].paiAcctype == "00") {
          this.disableds = true;
        }else{
          this.disableds = false;
        }
        this.title = "修改对公账户";
      });
    },
    /** 充值按钮操作 */
    handleRecharge(row) {
      this.reset();
      const paiId = row.paiId || this.ids;
      detailsAcc(paiId).then((response) => {
        this.form = response.data.sccInf[0];
        this.recharge = true;
        this.title = "充值转账";
      });
    },
    /** 提现按钮操作 */
    handleWithdrawal(row) {
      var self = this;
      self.reset();
      //查询本企业电子账户余额
      listElectronicsAcc().then((response) =>{
        if(response.data[0]){
          self.accno = response.data[0].paiAccno
          self.$set(self.form, "accno", response.data[0].paiAccno);
          balance(response.data[0].paiAccno).then((response) =>{
            self.KYAMT = response.data.kyAmt
          })
        }
      }).then(() =>{
        listChargeStatus(self.accno).then((response) =>{
          debugger
          const list = response.data;
          if(list.length > 0){
          const newDatas = []
          let confirmText = []
          const h = self.$createElement
          for (let i = 0; i < list.length; i++) {
            confirmText = [
          `编号：${list[i].zfrNumber}`,`费用:${list[i].zciAmount}`
        ]
            for (const j in confirmText) {
          newDatas.push(h('p', null, confirmText[j]))
        }
          }
          self.$confirm('提示', {
          title: '请缴纳手续费',
          message: h('div', null, newDatas),
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        })
          .then(function(){
            const loading = self.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            var map = {'accNo':self.accno}
            payMoney(map).then((response) =>{
              debugger
              const resultList = response.data;
              if(resultList.length > 0){
                self.msgError("缴费失败!");
                loading.close();
              }else{
                loading.close();
                self.$message({
                  message: '缴费成功',
                  type: 'success'
                });
                listCard().then((response) => {
                  self.cardList = response.data.records;
                });
                const paiId = row.paiId || self.ids;
                detailsAcc(paiId).then((response) => {
                  self.form = response.data.sccInf[0];
                  self.withdrawal = true;
                  self.title = "提现";
                });
              }
            }).catch(() => {
              loading.close();
            });
          })
          }else{
             listCard().then((response) => {
              self.cardList = response.data.records;
            });
            const paiId = row.paiId || self.ids;
            detailsAcc(paiId).then((response) => {
              self.form = response.data.sccInf[0];
              self.withdrawal = true;
              self.title = "提现";
            });
          }
        })
      })

    },
    //交易明细按钮
    handleDetail(row){
      Cookies.set("/accInf/accInfDetail/")
      this.$router.push({ path: "/accInf/accInfDetail/"});
    },
    // accNo(item) {
    //   if(item.paiAccno){
    //     balance(item.paiAccno).then((response) =>{
    //       this.KYAMT = response.data.list.row.KYAMT
    //     })
    //   }
    // },
    /** 新增提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          addAcc(this.form)
            .then((response) => {
              loading.close();
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.listCard();
            })
            .catch((response) => {
              loading.close();
            });
        }
      });
    },
    /** 提交按钮 */
    submitEdit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          updateAcc(this.form)
            .then((response) => {
              loading.close();
              this.msgSuccess("修改成功");
              this.edit = false;
              this.getList();
            })
            .catch((response) => {
              loading.close();
            });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const paiId = row.paiId || this.ids;
      const paiAccno = row.paiAccno;
      this.$confirm(
        '是否确认删除账户卡号为"' + paiAccno + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delAcc(paiId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    sendMessage(){
      this.$refs.form.validate((valid) => {
          if (valid) {
            // 调用获取短信验证码接口
            sendMessageForMoney(this.form.phone, this.form.code, this.form.uuid).then(response => {
              this.sendShortMessageBtn = true;
              this.msgSuccess("发送成功!");
              // 因为下面用到了定时器，需要保存this指向
              let that = this
              that.waitTime = 60;
              this.codeBtnWord = `${this.waitTime}s 后重新获取`
              let timer = setInterval(function(){
                  if(that.waitTime>1){
                      that.waitTime--
                      that.codeBtnWord = `${that.waitTime}s 后重新获取`
                  }else{
                      clearInterval(timer)
                      that.codeBtnWord = '获取验证码'
                      that.waitTime = 60
                      that.sendShortMessageBtn = false;
                  }
              },1000)

            }).catch((response)=>{
            });

          }
      })
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
// 验证码
    .login-code {
        height: 55px;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .login-code-img {
        flex: 1;
        height: 55px;
        margin-left: 8px;
    }

    .rightulliimg{
        width: 860px;

    }
    .divider_left{
        margin-left: -40px;
    }
  </style>