<template>
  <div class="container" style="padding-top: 13vw; box-sizing: border-box">
    <TopNav navTitle="人员盘查" :showRight="false" :showLeft="true" />
    <div class="tip_text">
      盘查结果：{{ ryxx.pcbqsm }}
    </div>
    <div class="head-nav-banner" v-if="ryxx.xm"></div>
    <!-- <div class="top" v-if="ryxx.xm">
      <div class="basic-info">
        <div class="IDcard-info">
          <div class="info-item">
            <span class="bt">姓名</span>
            <span>{{ ryxx.xm }}</span>
          </div>
          <div class="info-item">
            <span class="bt">性别</span>
            <span class="text">{{ setDict(ryxx.xbdm, D_BZ_XB) }}</span>&emsp;
            <span class="bt">民族</span>
            <span>{{ setDict(ryxx.mzdm, D_BZ_MZ) || "汉" }}</span>
          </div>
          <div class="info-item">
            <span class="bt">出生</span>{{ ryxx.csrq }}
          </div>
          <div class="info-item">
            <span class="bt">住址</span>
            <span class="text">{{ ryxx.zzxz }}</span>
          </div>
        </div>
        <div class="img-box">
          <img :src="ryxx.baseUrl" width="75" />
        </div>
      </div>
      <div class="sfzh">
        <span class="bt">公民身份证号码</span>
        <span class="idNumber">{{ ryxx.sfzh }}</span>
      </div>
    </div>
    <div class="ry_xgxx">
      <div class="contact-way">
        <div>
          人员标签：
          <span v-if="ryxx.bqxxsj">
            <span class="rybq" v-for="(e, i) in ryxx.bqxxsj.split(',')" :key="i + 'bq'">{{ e }}</span>
          </span>
          <span style="color: #808080" v-else>暂无标签</span>
        </div>
      </div>
      <div>
        联系电话 :<span>{{ ryxx.lxdh || "未知" }}</span>
      </div>
      <div>从业单位 :<span>未知</span></div>
    </div>
    <div class="bg_ban"></div>
    <div class="center" v-if="ryxx.xm">
      <div class="associated-information">
        <div class="sign-title">关联信息</div>
        <div class="content1">
          <div class="item-box" @click="goCanTrack">
            <div class="ass-item-box">
              <div class="circlebox bg2"></div>
              <span>盘查轨迹</span>
            </div>
          </div>
          <div class="item-box">
            <div class="ass-item-box" @click="goLicence">
              <div class="circlebox bg4"></div>
              <span>核查驾驶证</span>
            </div>
          </div>
          <div class="item-box" @click="goVhicol">
            <div class="ass-item-box">
              <div class="circlebox bg5"></div>
              <span>核查机动车</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pick-up-information">
        <div class="sign-title">采集信息</div>
        <div class="pick-box">
          <div class="pick-item-box pbg2" @click="goFeatureInfo">
            <div>特征信息</div>
          </div>
          <van-badge @click="showWpdj = true" class="pick-item-box pbg3" :content="wpdjList.length">
            <div>物品登记</div>
          </van-badge>
        </div>
      </div>
      <div class="vehicular">
        <div class="sign-title">
          乘坐车辆
          <span @click="showCar" style="color: #153fba; font-size: 12px; font-weight: normal">手动输入</span>
        </div>
        <div class="veh-box">
          <div @click="onConfirmCzcl(item)" v-for="item in clList"
            :class="ryxx.pcclId === item.id ? 'active cp_item' : 'cp_item'" :key="item.id">
            {{ item.text.substr(0, 2) }}
            <span></span>
            {{ item.text.substr(2, item.text.length - 2) }}
          </div>
          <div v-if="clList.length === 0" class="no-veh">暂无乘坐车辆~</div>
        </div>
      </div>
    </div> -->
    <!-- 物品登记弹窗 -->
    <van-popup v-model:show="showWpdj" round :style="{ width: '90vw' }">
      <van-form @submit="onSubmit">
        <van-cell-groub>
          <van-field name="uploader" label="物品图片">
            <template #input>
              <van-uploader v-model="wpTpIdList" multiple :max-count="3" :after-read="upLoadImg2" />
            </template>
          </van-field>
        </van-cell-groub>
        <van-cell-groub>
          <van-field v-model="wpForm.wpms" label="物品描述" placeholder="物品描述" rows="2" maxlength="50"
            show-word-limit></van-field>
        </van-cell-groub>
        <van-cell-groub>
          <van-field v-model="wpForm.wpsl" label="物品数量" placeholder="物品数量" type="number"
            :rules="[{ required: true, message: '请填写物品数量' }]"></van-field>
        </van-cell-groub>
        <van-cell-groub>
          <van-field v-model="wpForm.wplx" label="物品类型" @click="showWplx = true" readonly is-link placeholder="选择物品类型"
            :rules="[{ required: true, message: '请选择物品类型' }]"></van-field>
        </van-cell-groub>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" size="small">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <!-- 移交弹窗 -->
    <van-popup v-model:show="showYj" round :style="{ width: '90vw' }">
      <van-form @submit="onYj">
        <van-cell-groub>
          <van-field v-model="yjForm.pcclYjdw" label="移交单位" placeholder="移交单位"
            :rules="[{ required: true, message: '请填写移交单位' }]"></van-field>
        </van-cell-groub>
        <van-cell-groub>
          <van-field v-model="yjForm.pcclYjyy" label="移交原因" placeholder="选择移交原因" @click="showYjyy = true" readonly
            is-link :rules="[{ required: true, message: '请选择移交原因' }]"></van-field>
        </van-cell-groub>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" size="small">移交</van-button>
        </div>
      </van-form>
    </van-popup>
    <!-- 物品类型 -->
    <van-popup round v-model:show="showWplx" position="bottom">
      <van-picker :columns="D_BZ_BPCRCWP" @cancel="showWplx = false" @confirm="onConfirmWplx"></van-picker>
    </van-popup>
    <!-- 移交原因 -->
    <van-popup round v-model:show="showYjyy" position="bottom">
      <van-picker :columns="D_BZ_BPCRYYJYY" @cancel="showYjyy = false" @confirm="onConfirmYjyy"></van-picker>
    </van-popup>
    <div class="bg_ban"></div>
    <!-- <div class="upload" v-if="ryxx.xm">
      <div class="tsxx" v-show="fileList.length === 0">
        点击上传图片 <br />
        最多可上传 3 张照片
      </div>
      <van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead">
        <van-button class="up_btn" icon="plus"></van-button>
      </van-uploader>
    </div>
    <div class="foot_ban"></div> -->
    <div class="bottom-box">
      <div @click="save('1')">
        <img src="../../../assets/images/new/fangxing.png" />放行
      </div>
      <div @click="save('2')" class="yj">
        <img src="../../../assets/images/new/yijiao.png" /> 移交
      </div>
    </div>
    <van-loading type="spinner" style="padding: 20vw 0; text-align: center" v-if="loading" />
    <van-empty image="network" description="错误，请稍后再试" v-if="showEmpty" />
    <!-- 盘车 -->
    <checkedCar ref="car" />
  </div>
</template>

<script setup>
import ImageCompressor from "image-compressor.js";
import TopNav from "../../../components/topNav";
import checkedCar from "../../spsHome/components/checkCar.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  selectRy,
  selectRybq,
  saveBpcry,
  upImage,
  getClOf2h,
} from "../../../api/common";
import { getDictList, setDict } from "../../../utils/dict";
import { zlPrPc, saveNFC } from "../../../api/zlzx.js";
import { getBase64, hintToast } from "../../../utils/tools.js";
const { D_BZ_BPCRCWP, D_BZ_MZ, D_BZ_BPCRYYJYY, D_BZ_XB } = getDictList(
  "D_BZ_BPCRCWP",
  "D_BZ_MZ",
  "D_BZ_BPCRYYJYY",
  "D_BZ_XB"
);
const clList = ref([]);
const router = useRouter();
const loading = ref(true);
const showEmpty = ref(false);
const car = ref(); //盘查车辆组件对象
const zlId = ref("");
const yjForm = ref({});
const showYjyy = ref(false);
const showCzcl = ref(false); //乘坐车辆数据
const czclHp = ref(null);
const wpdjList = ref([]); //物品登记集合
const showYj = ref(false);
const tpIdList = ref([]); //图片id集合
const wpTpIdList = ref([]);
const showWpdj = ref(false);
const showWplx = ref(false);
const fileList = ref([]);
const wpForm = ref({
  wpms: "",
  wpTpIdList: [],
  wpsl: 1,
  wplx: "",
});
const gps = ref({});
const gps1 = ref({});
const ryxx = ref({
  sfzh: "",
  xm: "",
  xbdm: "",
  xb: "",
  csrq: "",
  zzxz: "",
  pcclId: "",
});
const bbinfo = ref({}); //报备数据
const userInfo = JSON.parse(getStorage("userInfo"));
const pcsrlx = ref(null);
onMounted(() => {
  zlId.value = router.currentRoute.value.query.zlId;
  getClDict(); //获取是否有乘坐车辆
  let sfzh = router.currentRoute.value.query.sfzh;
  pcsrlx.value = router.currentRoute.value.query.pcsrlx;
  bbinfo.value = localStorage.getItem("GET_BBINFO")
    ? JSON.parse(localStorage.getItem("GET_BBINFO"))
    : "";
  try {
    gps = JSON.parse(bridge.getLocation());
    gps1 = JSON.parse(bridge.getPhoneInfo());
  } catch (error) { }
  if (sfzh) {
    if (pcsrlx.value == 2 || pcsrlx.value == 6 || pcsrlx.value == 5) {
      czrkQueryDetail(sfzh); //获取人员信息
    } else if (pcsrlx.value == 7) {
      let data = localStorage.getItem("OCR");
      if (data) {
        // let obj = JSON.parse(data).data;
        // saveNFCData(obj);
      }
    } else if (pcsrlx.value == 1) {
      let data = localStorage.getItem("NFC");
      if (data) {
        let obj = JSON.parse(data).data;
        saveNFCData(obj);
      }
    }
  } else {
    hintToast("身份证为空,请重试！");
    showEmpty.value = true;
    loading.value = false;
  }
});

// NFC保存
function saveNFCData(obj) {
  let pramas = {
    xm: obj.xm,
    sfzh: obj.sfzh,
    csrq: obj.csrq,
    xbdm: obj.xb,
    mzdm: obj.mz,
    jgdm: obj.jgssx,
    zzxz: obj.zzxz,
    bbid: bbinfo.value ? bbinfo.value.id : "",
    jd: gps.app_x,
    wd: gps.app_y,
    pcsrlx: "1",
    pcfs: "02",
    xjzdz: obj.zzxz,
    zdch: gps.app_tfSn,
    zdsim: gps1.zdlmei,
    zdxh: gps.zdxh,
  };
  loading.value = true;
  saveNFC(pramas)
    .then((res) => {
      ryxx.value = res;
      // ryxx.value.baseUrl = "data:image/png;base64," + obj.zp;
      ryxx.value.baseUrl =
        "http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=" +
        res.sfzh;
      loading.value = false;
      // getPersonBq(res.id);
    })
    .catch(() => {
      loading.value = false;
    });
}

// 获取人员信息
function czrkQueryDetail(sfzh) {
  let params = {
    sfzh: sfzh,
    jd: gps.app_x,
    wd: gps.app_y,
    sjly: "",
    zdxh: gps.zdxh,
    zdch: gps.app_tfSn,
    zdsim: gps1.zdlmei,
    pcsrlx: pcsrlx.value,
    glxtdm: "",
    glxtid: "",
    jzid: "",
    bbid: bbinfo.value ? bbinfo.value.id : "",
    pcfs: "",
  };
  loading.value = true;
  selectRy(params)
    .then((res) => {
      loading.value = false;
      if (res) {
        ryxx.value = res;
        ryxx.value.baseUrl =
          "http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=" +
          res.sfzh;
        // getPersonBq(res.id); //获取人员标签
      } else {
        hintToast("查无此人,请核对人员信息！");
        router.go(-1);
      }
    })
    .catch(() => {
      loading.value = false;
    });
  //如果是指令页面跳转过来调用
  if (zlId.value) {
    zlPrPc({
      pclxdm: 1,
      pcryclId: ryxx.value.id,
      zlId: zlId.value,
    }).then((res) => { });
  }
}

// 获取人员标签
function getPersonBq(id) {
  selectRybq({ id }).then((res1) => {
    ryxx.value.bqxxsj = res1.bqxxsj;
  });
}

// 获取是否有乘坐车辆
function getClDict() {
  getClOf2h().then((res) => {
    clList.value = res.map((item) => {
      return { id: item.id, text: item.hphm };
    });
  });
}

// 核查驾驶证
function goLicence() {
  router.push({ path: "/drivinglicence", query: { sfzh: ryxx.value.sfzh } });
}
// 核查机动车
function goVhicol() {
  router.push({ path: "/motorVehicle", query: { sfzh: ryxx.value.sfzh } });
}

// 关联信息
function goCanTrack() {
  router.push({ path: "/TrackInventory", query: { sfzh: ryxx.value.sfzh } });
}
//  移交原因
function onConfirmYjyy(val) {
  showYjyy.value = false;
  yjForm.value.pcclYjyy = val.text;
}
// 物品类型
function onConfirmWplx(val) {
  showWplx.value = false;
  wpForm.value.wplx = val.text;
}

// 特征信息
function goFeatureInfo() {
  router.push("/featureInfo");
}

// 打开查询车辆弹窗
function showCar() {
  car.value.handleOpen();
}

function onConfirmCzcl(val) {
  czclHp.value = val.text;
  if (ryxx.value.pcclId === val.id) {
    ryxx.value.pcclId = "";
  } else {
    ryxx.value.pcclId = val.id;
  }
}

// 物品登记提交
function onSubmit() {
  wpdjList.value.push(wpForm.value);
  showWpdj.value = false;
  wpForm.value = { wpms: "", wpTpIdList: [], wpsl: 1, wplx: "" };
}

//获取文件
async function afterRead(file) {
  file.message = "上传中...";
  let fileBlob = await _compressImage(file.file);
  let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
  const data = new FormData();
  data.append("file", fileData);
  upImage(data).then((res) => {
    file.status = "done";
    file.message = "上传成功";
    if (!tpIdList.value.includes(res)) tpIdList.value.push(res);
  });
}
// 上传图片
async function upLoadImg2(file) {
  file.message = "上传中...";
  let fileBlob = await _compressImage(file.file);
  let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
  const data = new FormData();
  data.append("file", fileData);
  file.status = "uploading";
  upImage(data).then((res) => {
    file.status = "done";
    file.message = "上传成功";
    if (!wpForm.value.wpTpIdList.includes(res))
      wpForm.value.wpTpIdList.push(res);
  });
}

//压缩图片
const _compressImage = (file) => {
  return new Promise((resolve, reject) => {
    new ImageCompressor(file, {
      quality: 0.6, //压缩质量
      success(res) {
        resolve(res);
      },
      error(e) {
        reject(e);
      },
    });
  });
};
// 移交或者放行
function save(val) {
  if (val === "1") {
    const formData = {
      pcclId: ryxx.value.pcclId,
      id: ryxx.value.id,
      pcclJg: "1",
      pcclJgmc: "放行",
      pcclYjdw: yjForm.value.pcclYjdw,
      ryWpList: wpdjList.value,
      tpIdList: tpIdList.value,
      tzbqList: ryxx.value.tzList,
    };
    // if (pcsrlx.value != 7 && pcsrlx.value != 1 && fileList.value.length == 0) {
    //   return hintToast("非刷二代证件盘查，必须采集照片！");
    // }
    saveBpcry(formData).then((res) => {
      if (pcsrlx.value == "6" || pcsrlx.value == "5") {
        router.go(-2); //保存成功退回上一级
      } else {
        router.go(-1); //保存成功退回上一级
      }
      hintToast("放行成功！");
    });
  } else {
    ryxx.value.pcclJg = val;
    ryxx.value.pcclJgmc = "移交";
    showYj.value = true;
  }
}

//移交表单
function onYj() {
  const formData = {
    pcclId: ryxx.value.pcclId,
    id: ryxx.value.id,
    pcclJg: "2",
    pcclJgmc: "移交",
    pcclYjdw: yjForm.value.pcclYjdw,
    ryWpList: wpdjList.value,
    tpIdList: tpIdList.value,
    tzbqList: ryxx.value.tzList,
  };
  // if (pcsrlx.value != 7 || (pcsrlx.value != 1 && fileList.value.length == 0)) {
  //   return hintToast("非刷二代证件盘查，必须采集照片！");
  // }
  saveBpcry(formData).then((res) => {
    hintToast("移交成功！"); //保存成功退回上一级
    if (pcsrlx.value == "6" || pcsrlx.value == "5") {
      router.go(-2); //保存成功退回上一级
    } else {
      router.go(-1); //保存成功退回上一级
    }
  });
}

//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.sfzh}`);
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.bg_ban {
  background: #eff0f5;
  height: 12px;
}

.foot_ban {
  height: 12px;
  background: #eff0f5;
}

.container {
  margin-bottom: 6vh;
}

.top {
  background-image: url("../../../assets/images/new/id_card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 28vw;
  padding: 2vh 0 2vh 5vw;
  margin: 0 2vw;
  position: relative;
  z-index: 2;

  .basic-info {
    color: #4d4d4d;
    display: flex;
    justify-content: space-between;

    .IDcard-info {
      flex: 1;
      @include font_size($font_medium_s);

      .info-item {
        line-height: 6vw;

        .bt {
          display: inline-block;
          width: 34px;
          text-align-last: justify;
          color: #1f6cec;
          margin-right: 10px;
        }
      }
    }

    .img-box {
      margin-right: 12px;
      width: 74px;
      height: 94px;

      >img {
        border-radius: 5px;
        border: 1px solid #e5e5e5;
        overflow: hidden;
      }
    }
  }

  .sfzh {
    @include font_size($font_medium_s);
    margin-top: 1vw;

    .bt {
      color: #1f6cec;
      margin-right: 10px;
    }

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

.ry_xgxx {
  margin: 0 2vw 12px;
  background: #f3f6fe;
  padding: 12px;
  @include font_size($font_medium_s);

  .bq {
    margin-bottom: 8px;

    >span {
      display: inline-block;
      padding: 2px 4px;
      border: 1px solid #3a9687;
      border-radius: 3px;
      margin-right: 8px;
      background: #e7f5f3;
    }
  }

  div {
    line-height: 1.8em;

    >span {
      color: #013791;
    }
  }

  .contact-way {
    line-height: 2vh;
    @include font_size($font_medium_s);

    .one-line {
      display: flex;

      .phoneNum {
        width: 50%;
      }
    }
  }
}

.fxBtn {
  background: linear-gradient(148deg, #5897ff, #1862de);
  color: #f2f2f2;
}

.yjBtn {
  background: linear-gradient(148deg, #ffbb6b, #ff7a45);
  color: #f2f2f2;
}

.center {
  padding: 0 3vw;

  .sign-title {
    padding-left: 14px;
    line-height: 3vh;
    @include font_size($font_medium);
    font-weight: bold;
    display: flex;
    position: relative;
    justify-content: space-between;
    margin: 1vh 0;

    .chooseP {
      @include font_size($font_medium_s);
      color: rgb(0, 102, 255);
      font-weight: normal;
    }
  }

  .sign-title::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background: linear-gradient(0deg, #7ec2ff 0%, #0e8aff 100%);
    border-radius: 1px;
  }

  .associated-information {
    @include font_size($font_medium_s);
    @include font_color($font-color-theme);

    .item-box {
      margin: 2vw 4vw;
      display: flex;

      .ass-item-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }

    .content1 {
      display: flex;

      .circlebox {
        width: 15vw;
        height: 15vw;
        text-align: center;
        line-height: 15vw;
        margin-bottom: 2vw;
      }

      .bg1 {
        background: url("../../../assets/images/new/sydj_bg.png");
        background-size: contain;
        background-repeat: no-repeat;
      }

      .bg2 {
        background: url("../../../assets/images/new/pcgj.png");
        background-size: contain;
        background-repeat: no-repeat;
      }

      .bg3 {
        background: url("../../../assets/images/new/tcry.png");
        background-size: contain;
        background-repeat: no-repeat;
      }

      .bg4 {
        background: url("../../../assets/images/new/hcjsz.png");
        background-size: contain;
        background-repeat: no-repeat;
      }

      .bg5 {
        background: url("../../../assets/images/new/hcjdc.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }

  .pick-up-information {
    @include font_size($font_medium_s);
    @include font_color($font-color-theme);

    .pick-box {
      display: flex;
      justify-content: flex-start;
      margin: 3vw 0;
    }

    .pick-item-box {
      padding: 3vw 3vw 10vw;
      width: 30%;
      margin-right: 2vw;
      // border-radius: 3vw;
      position: relative;

      .tp {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    .pbg1 {
      background: url("../../../assets/images/new/bg-blue.png") no-repeat;
      background-size: cover;
    }

    .pbg2 {
      background: url("../../../assets/images/new/tzxx_bg.png") no-repeat;
      background-size: 100% 100%;
      color: #464d82;
    }

    .pbg3 {
      color: #397361;
      background: url("../../../assets/images/new/wpdj.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .vehicular {
    @include font_color($font-color-theme);

    .no-veh {
      text-align: center;
      @include font_size($font_medium_s);
      color: #cccccc;
      margin: 4vw 0;
    }

    .veh-box {
      margin: 1vh 0;

      .cp_item {
        display: inline-block;
        text-align: center;
        line-height: 2em;
        @include font_size($font_medium_s);
        width: 31.33%;
        margin-right: 2%;
        background: url("../../../assets/images/new/cp_bg.png") no-repeat;
        background-size: 100% 100%;

        >span {
          display: inline-block;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #333;
          margin-bottom: 4%;
        }
      }

      .active.cp_item {
        background: url("../../../assets/images/new/cp_bg_active.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;

        >span {
          background: #fff;
        }
      }
    }
  }
}

.line1 {
  width: 100vw;
  background-color: #eee;
  height: 1vh;
}

.upload {
  padding: 1vh 3vw;
  height: 80px;
  position: relative;

  .tsxx {
    position: absolute;
    color: #a8a8a8;
    top: 0;
    left: 30%;
    bottom: 0;
    padding: 8% 0;
    font-size: 14px;
  }

  .up_btn {
    height: 80px;
    width: 80px;
    color: #a8a8a8;
    font-size: 24px;
    background: #f2f2f2 url("../../../assets/images/new/upimg_bg.png") no-repeat;
    background-size: 100% 100%;
  }
}

.bottom-box {
  text-align: center;
  background: #fff;
  border-top: 1px solid #ddddde;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 6vh;
  line-height: 6vh;
  display: flex;

  >div {
    height: 6vh;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    >img {
      width: 20px;
      margin-right: 8px;
    }
  }

  .yj {
    background: #f0f0f0;
  }
}

.upload-box {
  margin: 1vh 3vw;
}

.staff-title {
  height: 5vh;
  background-color: rgb(13, 106, 245);
  text-align: center;
  line-height: 5vh;
}

.staff-sure {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.head-nav-banner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 35vw;
  z-index: 1;
  background: #1143ca;
}

::v-deep .headBlue {
  background-color: #1143ca !important;
}

.navTitle {
  position: absolute;
  top: 0;
  color: #fff;
  font-size: 5.5vw;
  text-align: center;
  width: 100%;
  padding: 3vw 0;
}

.rybq {
  display: inline-block;
  padding: 0 4px;
  background: #f00;
  color: #f2f2f2;
  border-radius: 4px;
  margin: 4px;
}

.no-veh_cp {
  display: flex;

  >span {
    flex: 1;
  }
}
.tip_text{
  font-size: 18px;
  margin-top: 10px;
}
</style>
