vue-insagent-pc/src/views/Core/components/detailsDialogPro.vue

<template>
  <el-dialog :visible.sync="dialogVisible" width="80%" class="details_style">
    <div slot="title" class="dialog-title details-title">
      <img src="../../../icon/归属信息.png" alt class="icon-img" />
      <span>车辆报价信息详情</span>
    </div>
    <div class="details-body flex">
      <div style="background-color: #fff">
        <ul class="tabLeft" ref="tabLeft">
          <li
            data-id="gsxx"
            :class="{ 'li-selected': selectedItem === 'gsxx' }"
            @click="selectItem('gsxx')"
          >
            归属信息
          </li>
          <li
            data-id="clxx"
            :class="{ 'li-selected': selectedItem === 'clxx' }"
            @click="selectItem('clxx')"
          >
            车辆信息
          </li>
          <li
            data-id="czxx"
            :class="{ 'li-selected': selectedItem === 'czxx' }"
            @click="selectItem('czxx')"
          >
            车主信息
          </li>
          <li
            data-id="tbrxx"
            :class="{ 'li-selected': selectedItem === 'tbrxx' }"
            @click="selectItem('tbrxx')"
          >
            投保人信息
          </li>
          <li
            data-id="bbrxx"
            :class="{ 'li-selected': selectedItem === 'bbrxx' }"
            @click="selectItem('bbrxx')"
          >
            被保人信息
          </li>
          <li
            data-id="cjxx"
            :class="{ 'li-selected': selectedItem === 'cjxx' }"
            @click="selectItem('cjxx')"
          >
            投保信息
          </li>
          <li
            data-id="qsxx"
            v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0"
            :class="{ 'li-selected': selectedItem === 'qsxx' }"
            @click="selectItem('qsxx')"
          >
            欠税信息
          </li>
          <li
            data-id="bfys"
            :class="{ 'li-selected': selectedItem === 'bfys' }"
            @click="selectItem('bfys')"
          >
            保费因素
          </li>
          <li
            data-id="xzxx"
            v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0"
            :class="{ 'li-selected': selectedItem === 'xzxx' }"
            @click="selectItem('xzxx')"
          >
            险种信息
          </li>
          <li
            data-id="jyx"
            v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0"
            :class="{ 'li-selected': selectedItem === 'jyx' }"
            @click="selectItem('jyx')"
          >
            驾意险
          </li>
          <li
            data-id="yxzl"
            :class="{ 'li-selected': selectedItem === 'yxzl' }"
            @click="selectItem('yxzl')"
            v-if="Object.keys(obj).length != 0"
          >
            影像资料
          </li>
          <li
            data-id="dzbd"
            v-if="orderInfo && orderInfo.orderstatus == 3"
            :class="{ 'li-selected': selectedItem === 'dzbd' }"
            @click="selectItem('dzbd')"
          >
            保单信息
          </li>
          <li
            data-id="fymx"
            v-if="
              orderInfo.orderFeeResult && orderInfo.orderFeeResult.length > 0
            "
            :class="{ 'li-selected': selectedItem === 'fymx' }"
            @click="selectItem('fymx')"
          >
            费用明细
          </li>
          <li
            data-id="jgglf"
            v-if="
              orderInfo.feeOrderNewVo &&
              orderInfo.feeOrderNewVo.deptManagerFee.length > 0
            "
            :class="{ 'li-selected': selectedItem === 'jgglf' }"
            @click="selectItem('jgglf')"
          >
            机构管理费
          </li>
          <li
            data-id="fxmx1"
            v-if="
              orderInfo.feeOrderNewVo &&
              orderInfo.feeOrderNewVo.retailFee &&
              orderInfo.feeOrderNewVo.retailFee.length > 0
            "
            :class="{ 'li-selected': selectedItem === 'fxmx1' }"
            @click="selectItem('fxmx1')"
          >
            分销明细
          </li>
          <li
            data-id="shyj"
            v-if="
              orderInfo && orderInfo.orderstatus == 4 && orderInfo.auditopinion
            "
            :class="{ 'li-selected': selectedItem === 'shyj' }"
            @click="selectItem('shyj')"
          >
            审核意见
          </li>
        </ul>
      </div>
      <div
        style="
          margin: 20px;
          height: 60vh;
          overflow: hidden;
          overflow-x: auto;
          width: 100%;
        "
      >
        <ul class="fixedTop">
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_cph.png" alt="" />
              </div>
              <p>车牌号：</p>
            </div>
            <p>{{ orderInfo.licenseno }}</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_cph.png" alt="" />
              </div>
              <p>险种：</p>
            </div>
            <p>{{ orderInfo.product }}</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_cph.png" alt="" />
              </div>
              <p>录入来源：</p>
            </div>
            <p v-if="orderInfo.entryStatus == '1'">车险录入</p>
            <p v-if="orderInfo.entryStatus == '2'">代客录单</p>
            <p v-if="orderInfo.entryStatus == '3'">外部订单</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_gs.png" alt="" />
              </div>
              <p>保险公司：</p>
            </div>
            <p>{{ orderInfo.inscompany }}</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_cph.png" alt="" />
              </div>
              <p>协议：</p>
            </div>
            <p v-if="orderInfo.ptlAgreement">
              {{ orderInfo.ptlAgreement.agreementName
              }}{{ orderInfo.ptlAgreement.businessDescription
              }}{{ orderInfo.ptlAgreement.jobDescription }}
            </p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_gs.png" alt="" />
              </div>
              <p>签单时间</p>
            </div>
            <p>{{ orderInfo.signingTime }}</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_gs.png" alt="" />
              </div>
              <p>支付时间</p>
            </div>
            <p>{{ orderInfo.payDate }}</p>
          </li>
          <li>
            <div class="title">
              <div class="img">
                <img src="@/assets/image/detailsDialog_ly.png" alt="" />
              </div>
              <p>业务来源：</p>
            </div>
            <p>{{ orderInfo.source }}</p>
          </li>
        </ul>
        <div class="content" @scroll="handleScroll">
          <OpenCloseBox id="gsxx">
            <span slot="title">归属信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6" v-if="orderInfo.province"
                  ><span>归属机构省：</span>{{ orderInfo.province }}</el-col
                >
                <el-col :span="6" v-if="orderInfo.city"
                  ><span>归属机构市：</span>{{ orderInfo.city }}</el-col
                >
                <el-col :span="6" v-if="orderInfo.prefecture"
                  ><span>归属机构区：</span>{{ orderInfo.prefecture }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>本人工号：</span>{{ orderInfo.userid }}</el-col
                >
                <el-col :span="6"
                  ><span>本人姓名：</span>{{ orderInfo.username }}</el-col
                >
                <el-col :span="6"
                  ><span>联系方式：</span>{{ orderInfo.mobile }}</el-col
                >
                <el-col :span="6"
                  ><span>性别：</span>{{ orderInfo.sex }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6" v-if="orderInfo.referrerProvince"
                  ><span>推荐人归属机构省：</span
                  >{{ orderInfo.referrerProvince }}</el-col
                >
                <el-col :span="6" v-if="orderInfo.referrerCity"
                  ><span>推荐人归属机构市：</span
                  >{{ orderInfo.referrerCity }}</el-col
                >
                <el-col :span="6" v-if="orderInfo.referrerPrefecture"
                  ><span>推荐人归属机构区：</span
                  >{{ orderInfo.referrerPrefecture }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <!-- <el-col v-if="orderInfo.referrerDeptAreaInfo" :span="24"><span>推荐人归属机构：</span>{{
                  orderInfo.referrerDeptAreaInfo }}</el-col> -->
                <el-col :span="6"
                  ><span>推荐人工号：</span>{{ orderInfo.referrerNo }}</el-col
                >
                <el-col :span="6"
                  ><span>推荐人姓名：</span>{{ orderInfo.referrerName }}</el-col
                >
                <el-col :span="6"
                  ><span>联系方式：</span>{{ orderInfo.referrerMobile }}</el-col
                >
                <el-col :span="6"
                  ><span>性别：</span>{{ orderInfo.referrerSex }}</el-col
                >
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="clxx">
            <span slot="title">车辆信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>车牌号：</span
                  >{{ orderInfo.carinfo.licenseNo }}</el-col
                >
                <el-col :span="6"
                  ><span>车辆识别代码：</span
                  >{{ orderInfo.carinfo.vinNo }}</el-col
                >
                <el-col :span="6"
                  ><span>品牌型号：</span
                  >{{ orderInfo.carinfo.modelcname }}</el-col
                >
                <el-col :span="6"
                  ><span>发动机号：</span
                  >{{ orderInfo.carinfo.engineNo }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>年款：</span>{{ orderInfo.carinfo.caryear }}</el-col
                >
                <el-col :span="6"
                  ><span>座位数：</span
                  >{{ orderInfo.carinfo.seatCount }}</el-col
                >
                <el-col :span="6"
                  ><span>整备质量：</span
                  >{{ orderInfo.carinfo.completeKerbMass }}</el-col
                >
                <el-col :span="6"
                  ><span>核定载质量：</span
                  >{{ orderInfo.carinfo.limitLoad }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>排量：</span>{{ orderInfo.carinfo.enginedesc }}</el-col
                >
                <el-col :span="6"
                  ><span>功率：</span>{{ orderInfo.carinfo.powerScale }}</el-col
                >
                <el-col :span="6"
                  ><span>新车购置价：</span
                  >{{ orderInfo.carinfo.purchasePrice }}</el-col
                >
                <el-col :span="6"
                  ><span>使用性质：</span
                  >{{ orderInfo.carinfo.carnature }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>车辆用途：</span
                  >{{ orderInfo.carinfo.vehicleUse }}</el-col
                >
                <el-col :span="6"
                  ><span>车辆类型：</span
                  >{{ orderInfo.carinfo.cartype }}</el-col
                >
                <el-col :span="6"
                  ><span>车辆种类：</span
                  >{{ orderInfo.carinfo.cimodelclass }}</el-col
                >
                <el-col :span="6"
                  ><span>能源种类：</span
                  >{{ orderInfo.carinfo.energyType }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>注册日期：</span
                  >{{ orderInfo.carinfo.registerDate }}</el-col
                >
                <el-col :span="6"
                  ><span>发证日期：</span
                  >{{ orderInfo.carinfo.issueDate }}</el-col
                >
                <el-col :span="6"
                  ><span>是否过户：</span
                  >{{
                    orderInfo.carinfo.transferFlag == true ? "是" : "否"
                  }}</el-col
                >
                <el-col :span="6"
                  ><span>转移登记日期：</span
                  >{{ orderInfo.carinfo.transferDate }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>商业险是否过户：</span
                  >{{
                    orderInfo.carinfo.transferFlagBi == true ? "是" : "否"
                  }}</el-col
                >
                <el-col :span="6"
                  ><span>是否脱保：</span
                  >{{
                    orderInfo.carinfo.outOfInsurance == true ? "是" : "否"
                  }}</el-col
                >
                <el-col :span="6"
                  ><span>是否二手车：</span
                  >{{ orderInfo.carinfo.usedCar == true ? "是" : "否" }}</el-col
                >
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="czxx">
            <span slot="title">车主信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>车主姓名：</span>{{ orderInfo.ownerinfo.name }}</el-col
                >
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.ownerinfo.identifyType=='身份证'?'身份证':'统一社会信用代码' }}</el-col>
                <el-col :span="6" v-if="orderInfo.ownerinfo.identifyType=='身份证'"><span>身份证号：</span>{{ orderInfo.ownerinfo.identifyNumber }}</el-col>
                  <el-col :span="6" v-else><span>统一社会信用代码：</span>{{ orderInfo.ownerinfo.organizationCode }}</el-col>
                <el-col :span="6"
                  ><span>手机号：</span>{{ orderInfo.ownerinfo.mobile }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>电子邮箱：</span
                  >{{
                    orderInfo.ownerinfo.email ? orderInfo.ownerinfo.email : "-"
                  }}</el-col
                >
                <el-col :span="12"
                  ><span>地址：</span>{{ orderInfo.ownerinfo.addr }}</el-col
                >
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="tbrxx">
            <span slot="title">投保人信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>投保人姓名：</span
                  >{{ orderInfo.applyinfo.name }}</el-col
                >
                <!-- <el-col :span="6"
                  ><span>证件类型：</span
                  >{{ orderInfo.applyinfo.identifyType }}</el-col
                >
                <el-col :span="6"
                  ><span>身份证号：</span
                  >{{ orderInfo.applyinfo.identifyNumber }}</el-col
                > -->
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.applyinfo.identifyType=='身份证'?'身份证':'统一社会信用代码' }}</el-col>
                <el-col :span="6" v-if="orderInfo.applyinfo.identifyType=='身份证'"><span>身份证号：</span>{{ orderInfo.applyinfo.identifyNumber }}</el-col>
                  <el-col :span="6" v-else><span>统一社会信用代码：</span>{{ orderInfo.applyinfo.organizationCode }}</el-col>
                <el-col :span="6"
                  ><span>手机号：</span>{{ orderInfo.applyinfo.mobile }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>电子邮箱：</span
                  >{{
                    orderInfo.applyinfo.email ? orderInfo.applyinfo.email : "/"
                  }}</el-col
                >
                <el-col :span="12"
                  ><span>地址：</span>{{ orderInfo.applyinfo.addr }}</el-col
                >
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="bbrxx">
            <span slot="title">被保人信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>被保人姓名：</span
                  >{{ orderInfo.insureinfo.name }}</el-col
                >
                <!-- <el-col :span="6"
                  ><span>证件类型：</span
                  >{{ orderInfo.insureinfo.identifyType }}</el-col
                >
                <el-col :span="6"
                  ><span>身份证号：</span
                  >{{ orderInfo.insureinfo.identifyNumber }}</el-col
                > -->
                <el-col :span="6"><span>证件类型：</span>{{ orderInfo.insureinfo.identifyType=='身份证'?'身份证':'统一社会信用代码' }}</el-col>
                <el-col :span="6" v-if="orderInfo.insureinfo.identifyType=='身份证'"><span>身份证号：</span>{{ orderInfo.insureinfo.identifyNumber }}</el-col>
                  <el-col :span="6" v-else><span>统一社会信用代码：</span>{{ orderInfo.insureinfo.organizationCode }}</el-col>
                <el-col :span="6"
                  ><span>手机号：</span
                  >{{ orderInfo.insureinfo.mobile }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>电子邮箱：</span
                  >{{
                    orderInfo.insureinfo.email
                      ? orderInfo.insureinfo.email
                      : "/"
                  }}</el-col
                >
                <el-col :span="12"
                  ><span>地址：</span>{{ orderInfo.insureinfo.addr }}</el-col
                >
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="cjxx">
            <span slot="title">投保信息</span>
            <div slot="boby">
              <div class="m-btn-10">保险公司：{{ orderInfo.inscompany }}</div>

              <div class="quotation-style">
                <b>险种</b>
                <b>起保日期</b>
                <b>终保日期</b>
                <b>保费金额</b>
                <span>交强险</span>
                <span>{{
                  orderInfo.jqstartdate ? orderInfo.jqstartdate : "-"
                }}</span>
                <span>{{
                  orderInfo.jqenddate ? orderInfo.jqenddate : "-"
                }}</span>
                <span>{{
                  orderInfo.jqpremium ? "￥" + orderInfo.jqpremium : "-"
                }}</span>
                <span>商业险</span>
                <span>{{
                  orderInfo.systartdate ? orderInfo.systartdate : "-"
                }}</span>
                <span>{{
                  orderInfo.syenddate ? orderInfo.syenddate : "-"
                }}</span>
                <span>{{
                  orderInfo.sypremium ? "￥" + orderInfo.sypremium : "-"
                }}</span>
                <span>车船税</span>
                <span>-</span>
                <span>-</span>
                <span>￥{{ orderInfo.taxamount }}</span>
                <span>驾意险</span>
                <span>-</span>
                <span>-</span>
                <span>{{
                  orderInfo.jypremium ? "￥" + orderInfo.jypremium : "-"
                }}</span>
                <span>总计</span>
                <span>-</span>
                <span>-</span>
                <span class="themeColor" style="font-weight: bold"
                  >￥{{ orderInfo.sumpremium }}</span
                >
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox
            id="qsxx"
            v-if="orderInfo.taxArrears && orderInfo.taxArrears.length > 0"
          >
            <span slot="title">欠税信息</span>
            <div slot="boby">
              <div class="quotation-style tax-arrears">
                <b>当年应缴（元）</b>
                <b>去年补缴（元）</b>
                <b>滞纳金（元）</b>
                <b>总计</b>
                <div
                  v-for="(
                    taxArrearsitem, taxArrearsindex
                  ) in orderInfo.taxArrears"
                  :key="taxArrearsindex"
                >
                  <span>￥{{ taxArrearsitem.dayYearTax }}</span>
                  <span>￥{{ taxArrearsitem.taxDefault }}</span>
                  <span>￥{{ taxArrearsitem.lateFee }}</span>
                  <span>￥{{ orderInfo.taxamount }}</span>
                </div>
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="bfys">
            <span slot="title">保费因素</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>评分：</span
                  >{{
                    orderInfo.extendInfo.score ? orderInfo.extendInfo.score : ""
                  }}</el-col
                >
                <el-col :span="6"
                  ><span>总赔付率：</span
                  >{{ orderInfo.extendInfo.lossRation }}</el-col
                >
                <el-col :span="6"
                  ><span>总折扣率：</span
                  >{{ orderInfo.extendInfo.totalAdjustRate }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>交强类型评分：</span
                  >{{ orderInfo.extendInfo.jqScore }}</el-col
                >
                <el-col :span="6"
                  ><span>交强赔付率：</span
                  >{{ orderInfo.extendInfo.jqLossRation }}</el-col
                >
                <el-col :span="6"
                  ><span>交强险折扣：</span
                  >{{ orderInfo.extendInfo.jqAdjustRate }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>商业类型评分：</span
                  >{{ orderInfo.extendInfo.syScore }}</el-col
                >
                <el-col :span="6"
                  ><span>商业赔付率：</span
                  >{{ orderInfo.extendInfo.syLossRation }}</el-col
                >
                <el-col :span="6"
                  ><span>商业险折扣：</span
                  >{{ orderInfo.extendInfo.syAdjustRate }}</el-col
                >
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col :span="6"
                  ><span>交强续保：</span
                  >{{ orderInfo.extendInfo.jqRenewal }}</el-col
                >
                <el-col :span="6"
                  ><span>商业续保：</span
                  >{{ orderInfo.extendInfo.syRenewal }}</el-col
                >
                <el-col :span="6"
                  ><span>交强出险次数：</span
                  >{{ orderInfo.extendInfo.jqClaims }}</el-col
                >
                <el-col :span="6"
                  ><span>商业出险次数：</span
                  >{{ orderInfo.extendInfo.syClaims }}</el-col
                >
              </el-row>
              <el-row :span="6" >
                  <el-col :span="6" v-if="orderInfo.ubiPredictedInfoScore"><span>紫金能源车（鼎然-车辆风险评分）：</span>{{ orderInfo.ubiPredictedInfoScore }}</el-col>
                  <el-col :span="6" v-if="orderInfo.mergeCostRate"><span>交商合并经营成本率：</span>{{ orderInfo.mergeCostRate }}</el-col>
                </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox
            id="xzxx"
            v-if="orderInfo.kindinfo && orderInfo.kindinfo.length > 0"
          >
            <span slot="title">险种信息</span>
            <div slot="boby">
              <div class="quotation-style kind-arrears">
                <b>商业险险别</b>
                <b>保额（元）</b>
                <b>保费（元）</b>
                <div
                  v-for="(kindinfoitem, kindinfoindex) in orderInfo.kindinfo"
                  :key="kindinfoindex"
                >
                  <span>{{ kindinfoitem.kindName }}</span>
                  <span
                    v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)"
                    >{{ kindinfoitem.unitAmount }}</span
                  >
                  <span
                    v-else-if="
                      ['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(
                        kindinfoitem.kindCode
                      )
                    "
                  >
                    {{ kindinfoitem.deductibleRate }}
                  </span>
                  <span
                    v-else-if="
                      ['TY1', 'TY2', 'TY3', 'TY4'].includes(
                        kindinfoitem.kindCode
                      )
                    "
                  >
                    {{ kindinfoitem.serviceTimes }}次
                  </span>
                  <span v-else>{{ kindinfoitem.amount }}</span>
                  <span>{{
                    kindinfoitem.coveragePremium
                      ? kindinfoitem.coveragePremium
                      : "-"
                  }}</span>
                </div>
              </div>
            </div>
          </OpenCloseBox>
          <OpenCloseBox
            id="jyx"
            v-if="orderInfo.accidentInfo && orderInfo.accidentInfo.length > 0"
          >
            <span slot="title">驾意险</span>
            <div slot="boby">
              <el-table
                :data="orderInfo.accidentInfo"
                stripe
                border
                :header-cell-style="{
                  background: '#F7F7F9 ',
                  fontWeight: '500',
                  color: '#333333',
                }"
                style="width: 100%"
              >
                <el-table-column prop="name" align="center" label="驾意险名称">
                  <template slot-scope="scope">
                    <span style="color: #d42426">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amount" align="center" label="保险金额">
                  <template slot-scope="scope">
                    <span
                      >￥{{ scope.row.amount ? scope.row.amount : "-" }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="premium" label="保费">
                  <template slot-scope="scope">
                    <span
                      >￥{{ scope.row.premium ? scope.row.premium : "-" }}</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>

          <OpenCloseBox id="yxzl" v-if="Object.keys(obj).length != 0">
            <span slot="title">影像资料</span>
            <div slot="boby">
              <el-row :gutter="20">
                <el-col :span="12">
                  <h4>行驶证影像</h4>
                  <viewer :images="obj.carImageList">
                    <img
                      class="imageStyle"
                      v-for="(imageItem, imageIndex) in obj.carImageList"
                      :src="imageItem"
                      :key="imageIndex"
                    />
                  </viewer>
                </el-col>
                <el-col :span="12">
                  <div v-if="obj.ownerImageList">
                    <h4>车主身份证影像</h4>
                    <viewer :images="obj.ownerImageList">
                      <img
                        class="imageStyle"
                        v-for="(imageItem, imageIndex) in obj.ownerImageList"
                        :src="imageItem"
                        :key="imageIndex"
                      />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div v-if="obj.policyImageList">
                    <h4>投保人身份证影像</h4>
                    <viewer :images="obj.policyImageList">
                      <img
                        class="imageStyle"
                        v-for="(imageItem, imageIndex) in obj.policyImageList"
                        :src="imageItem"
                        :key="imageIndex"
                      />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0" />
                  </div>
                </el-col>
                <el-col :span="12">
                  <div v-if="obj.insuredImageList">
                    <h4>被保人身份证影像</h4>
                    <viewer :images="obj.insuredImageList">
                      <img
                        class="imageStyle"
                        v-for="(imageItem, imageIndex) in obj.insuredImageList"
                        :src="imageItem"
                        :key="imageIndex"
                      />
                    </viewer>
                  </div>
                  <div v-else>
                    <h4>营业执照</h4>
                    <img class="imageStyle" style="margin-right: 0" />
                  </div>
                </el-col>
              </el-row>
              <el-row
                :gutter="20"
                v-if="obj.carCheckImageList && obj.carCheckImageList.length > 0"
              >
                <el-col :span="24">
                  <h4>验车照影像</h4>
                  <viewer :images="obj.carCheckImageList">
                    <img
                      class="imageStyle"
                      v-for="(imageItem, imageIndex) in obj.carCheckImageList"
                      :src="imageItem"
                      :key="imageIndex"
                    />
                  </viewer>
                </el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox
            id="dzbd"
            v-if="orderInfo && orderInfo.orderstatus == 3"
          >
            <span slot="title">保单信息</span>
            <div slot="boby">
              <el-row class="premium-style" :gutter="20">
                <!-- <el-col :span="12"><span>交强险投保单号：</span>{{ orderInfo.jqapplyno }}</el-col> -->
                <el-col :span="12" v-if="orderInfo.jqpolicyno"
                  ><span>交强险保单号：</span>{{ orderInfo.jqpolicyno }}</el-col
                >
                <!-- <el-col v-if="orderInfo.syapplyno" :span="12"><span>商业险投保单号：</span>{{ orderInfo.syapplyno }}</el-col> -->
                <el-col v-if="orderInfo.sypolicyno" :span="12"
                  ><span>商业险保单号：</span>{{ orderInfo.sypolicyno }}</el-col
                >
                <el-col
                  :span="12"
                  v-for="(oldfileItem, oldfileIndex) in warrantObj.oldfileList"
                  :key="oldfileIndex"
                >
                  <div>
                    <span>{{ oldfileItem.fileTitle }} ：</span
                    >{{ orderInfo.licenseno }}
                    <el-button
                      style="margin-left: 30px"
                      type="text"
                      @click="viewfile(oldfileItem)"
                      >下载
                    </el-button>
                  </div>
                </el-col>
                <el-col
                  :span="12"
                  v-for="(val, oldfileIndex) in warrantObj.businessList"
                  :key="oldfileIndex"
                >
                  <div>
                    <span>{{ val.fileTitle }} ：</span>{{ orderInfo.licenseno }}
                    <el-button
                      style="margin-left: 30px"
                      type="text"
                      @click="viewfile(val)"
                      >下载
                    </el-button>
                  </div>
                </el-col>
              </el-row>
              <el-row class="premium-style" :gutter="20">
                <el-col
                  :span="12"
                  v-for="(oldfileItem, oldfileIndex) in warrantObj.accidentList"
                  :key="oldfileIndex"
                >
                  <div>
                    <span>{{ oldfileItem.fileTitle }} ：</span
                    >{{ orderInfo.licenseno }}
                    <el-button
                      style="margin-left: 30px"
                      type="text"
                      @click="viewfile(oldfileItem)"
                      >下载
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="fymx" v-if="feeOrderNewVoList">
            <span slot="title">费用明细</span>
            <div
              slot="boby"
              style="font-size: 12px; width: 100%"
              class="FeeEnclosure"
            >
              <el-table
                :data="feeOrderNewVoList.list"
                :span-method="feeOrderNewVomergeRows"
                :border="true"
                width="100%"
                :stripe="true"
                size="mini"
                :header-cell-style="{
                  background: '#F7F7F9',
                  fontWeight: '700',
                  color: '#606266',
                }"
              >
                <el-table-column prop="type" label=""> </el-table-column>
                <el-table-column prop="insuranceType" label="险种">
                </el-table-column>
                <el-table-column prop="premium" label="保费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.premium }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="otherCostsProportion" label="跟单比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing || scope.row.type !== '入口费用'"
                      >{{ scope.row.otherCostsProportion }}
                      <span v-if="scope.row.otherCostsProportion !== null"> % </span>
                      <span v-else> — </span>
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.otherCostsProportion"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="superviseCosts" label="手续费比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing || scope.row.type !== '入口费用'"
                      >{{ scope.row.superviseCosts }}
                      <span v-if="scope.row.superviseCosts !== null"> % </span>
                      <span v-else> — </span>
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.superviseCosts"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="totalProportion" label="总比例">
                  <template slot-scope="scope">
                    <span v-if="!isAuditing || scope.row.type !== '入口费用'"
                      >{{ scope.row.totalProportion }}
                      <span v-if="scope.row.totalProportion !== null"> % </span>
                      <span v-else> — </span>
                      </span
                    >
                    <el-input
                      v-else
                      v-model="scope.row.totalProportion"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="otherCostsPremiums" label="跟单费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.otherCostsPremiums }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="superviseCostsPremiums" label="手续费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.superviseCostsPremiums }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalAmount" label="总费用">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.totalAmount }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="jgglf" v-if="feeOrderNewVoList.deptManagerFee">
            <span slot="title">机构管理费</span>
            <div
              slot="boby"
              style="font-size: 12px; width: 100%"
              class="FeeEnclosure"
            >
              <el-table
                :data="feeOrderNewVoList.deptManagerFee"
                :border="true"
                width="100%"
                :stripe="true"
                size="mini"
                :header-cell-style="{
                  background: '#F7F7F9',
                  fontWeight: '700',
                  color: '#606266',
                }"
              >
                <el-table-column
                  prop="insuranceType"
                  label="险种"
                ></el-table-column>
                <el-table-column
                  prop="deptProportionLevelOne"
                  label="一级管理费比例"
                >
                  <template slot-scope="scope">
                    <span v-if="!isAuditing"
                      >{{ scope.row.deptProportionLevelOne }}%
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.deptProportionLevelOne"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptProportionLevelTwo"
                  label="二级管理费比例 "
                >
                  <template slot-scope="scope">
                    <span v-if="!isAuditing"
                      >{{ scope.row.deptProportionLevelTwo }}%
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.deptProportionLevelTwo"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptProportionLevelThree"
                  label="三级管理费比例"
                >
                  <template slot-scope="scope">
                    <span v-if="!isAuditing"
                      >{{ scope.row.deptProportionLevelThree }}%
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.deptProportionLevelThree"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptProportionLevelFoure"
                  label="四级管理费比例"
                >
                  <template slot-scope="scope">
                    <span v-if="!isAuditing"
                      >{{ scope.row.deptProportionLevelFoure }}%
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.deptProportionLevelFoure"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptProportionLevelFive"
                  label="五级管理费比例"
                >
                  <template slot-scope="scope">
                    <span v-if="!isAuditing"
                      >{{ scope.row.deptProportionLevelFive }}%
                    </span>
                    <el-input
                      v-else
                      v-model="scope.row.deptProportionLevelFive"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="deptPremiumsLevelOne" label="一级管理费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.deptPremiumsLevelOne }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="deptPremiumsLevelTwo" label="二级管理费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.deptPremiumsLevelTwo }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptPremiumsLevelThree"
                  label="三级管理费"
                >
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.deptPremiumsLevelThree }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptPremiumsLevelFoure"
                  label="四级管理费"
                >
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.deptPremiumsLevelFoure }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deptPremiumsLevelFive"
                  label="五级管理费"
                >
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.deptPremiumsLevelFive }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="externalProportion"
                  label="代客录单扣减比例"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.externalProportion"
                      >{{ scope.row.externalProportion }}%</span
                    >
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="externalPremiums"
                  label="代客录单扣减金额"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.externalPremiums"
                      >￥{{ scope.row.externalPremiums }}</span
                    >
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="profitMarginPremiums" label="利润差值">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.profitMarginPremiums }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>
          <OpenCloseBox id="fxmx1" v-if="feeOrderNewVoList.retailFee">
            <span slot="title">分销明细</span>
            <div
              slot="boby"
              style="font-size: 12px; width: 100%"
              class="FeeEnclosure"
            >
              <el-table
                :data="feeOrderNewVoList.retailFee"
                :border="true"
                width="100%"
                :stripe="true"
                size="mini"
                :header-cell-style="{
                  background: '#F7F7F9',
                  fontWeight: '700',
                  color: '#606266',
                }"
              >
                <el-table-column
                  prop="insuranceType"
                  label="等级"
                ></el-table-column>
                <el-table-column
                  prop="userName"
                  label="接收人"
                ></el-table-column>
                <el-table-column prop="jqRetailProportion" label="交强分销比例">
                  <template slot-scope="scope">
                    <span>{{ scope.row.jqRetailProportion }}%</span>
                  </template>
                </el-table-column>
                <el-table-column prop="jqRetailPremiums" label="交强分销费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.jqRetailPremiums }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="syRetailProportion" label="商业分销比例">
                  <template slot-scope="scope">
                    <span>{{ scope.row.syRetailProportion }}%</span>
                  </template>
                </el-table-column>
                <el-table-column prop="syRetailPremiums" label="商业险分销费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.syRetailPremiums }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noRetailProportion" label="非车分销比例">
                  <template slot-scope="scope">
                    <span>{{ scope.row.noRetailProportion }}%</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noRetailPremiums" label="非车险分销费">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.noRetailPremiums }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="amount" label="金额">
                  <template slot-scope="scope">
                    <span>￥{{ scope.row.totalRetailPremiums }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </OpenCloseBox>
          <OpenCloseBox
            id="shyj"
            v-if="
              orderInfo && orderInfo.orderstatus == 4 && orderInfo.auditopinion
            "
          >
            <span slot="title">审核意见</span>
            <div slot="boby">
              <p style="padding: 10px 50px">
                {{ orderInfo.auditopinion }}
              </p>
            </div>
          </OpenCloseBox>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <template v-if="auditStatus != 1">
        <el-button
          size="small"
          type="warning"
          @click="updatedCost"
          v-if="isAuditing"
          >更改费用</el-button
        >
        <el-button
          size="small"
          type="primary"
          style="background-color: #0ec216; border: 1px solid #0ec216"
          @click="adjustFee"
          ><span v-if="isAuditing">取消调整</span
          ><span v-if="!isAuditing">调整费用</span></el-button
        >
        <el-button
          size="small"
          type="primary"
          style="background-color: #0ec216; border: 1px solid #0ec216"
          @click="adusitFUn"
          >审核通过</el-button
        >
        <el-button
          size="small"
          type="primary"
          v-if="isrejection"
          style="background-color: #0ec216; border: 1px solid #0ec216"
          @click="rejectionFUn"
          >审核驳回</el-button
        >
      </template>
      <el-button
        size="small"
        type="primary"
        plain
        @click="dialogVisible = false"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import OpenCloseBox from "./openclose.vue";

export default {
  name: "detailsDialog",
  data() {
    return {
      dialogVisible: false,
      obj: {},
      warrantObj: {},
      selectedItem: null,
      isAuditing: false,
      itemRefs: [],
      itemPositions: [],
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default: {},
    },
    auditStatus: String,
    isrejection: {
      type: Boolean,
      default: false,
    },
    feeOrderNewVoList: Object,
  },
  watch: {
    dialogVisible(oldValue, newValue) {
      if (oldValue) {
        this.$nextTick(() => {
          this.initScroll();
        });
      }
    },
  },
  components: { OpenCloseBox },
  methods: {
    adjustFee() {
      this.isAuditing = !this.isAuditing;
    },
    adusitFUn() {
      this.$emit("adusitFUn");
    },
    rejectionFUn() {
      this.$emit("rejectionFUn");
    },
    updatedCost() {
      let newCost = {
        deptManagerFee: this.feeOrderNewVoList.deptManagerFee,
        feeOrder: this.feeOrderNewVoList.list,
        retailFee: this.feeOrderNewVoList.retailFee,
      };
      this.$emit("updatedCost", newCost);
      this.isAuditing = false;
    },
    feeOrderNewVomergeRows({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (
          rowIndex === 0 ||
          this.feeOrderNewVoList.list[rowIndex].type !==
            this.feeOrderNewVoList.list[rowIndex - 1].type
        ) {
          let rowSpan = 1;
          for (
            let i = rowIndex + 1;
            i < this.feeOrderNewVoList.list.length;
            i++
          ) {
            if (this.feeOrderNewVoList.list[i].type === row.type) {
              rowSpan++;
            } else {
              break;
            }
          }
          return [rowSpan, 1];
        } else {
          return [0, 0];
        }
      }
      return [1, 1];
    },
    selectItem(item) {
      this.selectedItem = item;
      const element = document.getElementById(item);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      } else {
        console.error(`Element with ID ${item} not found.`);
      }
    },
    initScroll() {
      const tabChildren = this.$refs.tabLeft.children;
      if (tabChildren.length === 0) {
        console.warn("No children elements found in tabLeft.");
        return;
      }

      for (let i = 0; i < tabChildren.length; i++) {
        const child = tabChildren[i];
        const id = child.dataset.id;
        if (id) {
          const element = document.getElementById(id);
          if (element) {
            this.itemRefs.push(id);
            this.itemPositions.push({
              id,
              top: element.offsetTop,
              height: element.offsetHeight,
            });
          } else {
            console.error(`Element with ID ${id} not found.`);
          }
        }
      }
    },
    handleScroll(event) {
      const container = event.target;
      const scrollTop = container.scrollTop + 103;
      const clientHeight = container.clientHeight + 103;
      const scrollHeight = container.scrollHeight - 103;
      // 查找当前显示的元素
      const currentItem = this.itemPositions.find(({ top, height }) => {
        return top >= scrollTop && top + height <= scrollTop + clientHeight;
      });
      if (currentItem) {
        // 处理当前显示的元素
        this.selectedItem = currentItem.id;
      } else {
        console.warn("No current item found within the viewport.");
      }
      if (scrollTop + clientHeight == scrollHeight) {
        this.selectedItem = this.itemRefs[this.itemRefs.length - 1];
      }
    },
    setBackupVisible: function (backupVisible) {
      this.selectedItem = "gsxx";
      this.dialogVisible = backupVisible;
    },
    imageFun(param) {
      this.obj = param;
    },
    warrantyFun(param) {
      this.warrantObj = param;
    },
    saveAs(blob, filename) {
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.target = "_ blank";
      link.download = filename;
      link.click();
    },
    //预览文件
    viewfile(index) {
      if (this.orderInfo.isExternal == 1) {
        let url = index.fileurl; // 3.创建一个临时的url指向blob对象
        fetch(url)
          .then((response) => response.blob())
          .then((blob) => {
            this.saveAs(
              blob,
              index.fileurl.substring(name + 1, index.fileurl.length)
            );
          })
          .catch((error) => {});
      } else {
        let name = index.fileurl.lastIndexOf("/");
        fetch(index.fileurl)
          .then((response) => response.blob())
          .then((blob) => {
            this.saveAs(
              blob,
              index.fileurl.substring(name + 1, index.fileurl.length)
            );
          })
          .catch((error) => {});
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.details-body {
  .tabLeft {
    list-style: none;
    padding-left: 0;
    width: 100px;

    li {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 500;
      padding-left: 20px;
      cursor: pointer;
    }

    li:hover {
      color: var(--themeColor);
    }
  }

  .li-selected {
    color: var(--themeColor);
    background-color: rgba(212, 36, 38, 0.06);
  }

  .fixedTop {
    width: 100%;
    overflow-x: auto;
    height: auto;
    // position: absolute;
    // top: 10px;
    background: linear-gradient(#fbe8e8, #fff 50%);
    border-radius: 5px;
    margin-bottom: 20px;
    list-style-type: none;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    li {
      width: auto;
      height: auto;

      .title {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;

        p {
          font-size: 16px;
          color: #666;
          margin: 0 0 0 10px;
        }

        .img {
          width: 24px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        margin-bottom: 5px;
      }

      p {
        margin: 10px 0 0 0;
        font-size: 20px;
        color: #333;
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 103px);
    overflow-y: auto;
  }
}

.icon-img {
  width: 30px;
  height: 30px;
  vertical-align: bottom;
}

.details-title {
  font-weight: bold;
  font-size: 16px;
}

.quotation-style {
  font-size: 0;

  b {
    background: #f7f7f9;
    font-size: 14px;
  }

  b,
  span {
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    text-align: center;
    line-height: 40px;
    border: 1px solid #eef1f6;
    font-size: 14px;
  }
}

.premium-style {
  div {
    padding: 5px 0;
  }

  span {
    color: #868b98;
  }
}

.driving-style {
  span:first-child {
    width: 70%;
  }

  b:first-child {
    width: 70%;
  }

  b,
  span {
    width: 15%;
  }
}

.tax-arrears {
  b,
  span {
    width: 25%;
  }
}

.kind-arrears {
  b,
  span {
    width: 33.33%;
  }
}

.imageStyle {
  display: inline-block;
  width: 120px;
  height: 120px;
  // box-shadow: #ddd 0px 0px 5px;
  margin-right: 86px;
  border: 1px dashed #ced4da;
  background: #f7f7f9;
}

.FeeEnclosure {
  /deep/ table {
    width: 100% !important;
  }

  /deep/ .cell {
    text-align: center;
  }

  /deep/ .el-table__empty-block {
    width: 100% !important;
  }
}

/deep/ .el-dialog__body {
  padding-top: 0;
  border-bottom: 1px solid #eef1f6;
  background-color: rgb(242, 242, 242);
  padding: 0;
}
</style>