<template>
  <div class="" style="padding-top: 13vw">
    <TopNav navTitle="领导驾驶舱" :showRight="false" :showLeft="true" />
    <div class="wddb_box">
      <div class="wdrw_title">我的待办任务</div>
      <div class="dbrw_total">
        <div @click="routerPush('/rw')" class="wddb_item">
          <span class="num">{{ myDb.dcl }}</span><br />
          待处理任务
        </div>
        <div @click="routerPush('/newTwoHome/yclList')" class="wddb_item">
          <span class="num">{{ myDb.ycl }}</span><br />
          已处理任务
        </div>
      </div>
    </div>
    <div style="height: 3vw; background: #eff0f5"></div>
    <div class="jq_box topM">
      <span class="jmsfjq_total_title">警情态势</span>
    </div>
    <div class="jq_box">
      <div class="jq_item left_item" style="padding: 0">
        <div class="jrjqzs_total jq_total_item" @click="onClickJqTotal(1)">
          <span class="jmsfjq_total_title">今日总警情</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.total }} </span>
            件
            <span style="display: inline-block; margin-left: 6vw">环比<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.totalHb > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.totalHb > 0 ? 'red' : 'green'">
                  {{ jqTotal.totalHb }}%</span>
              </span>
            </span>
          </div>
        </div>
        <div class="zdjqzs_total jq_total_item" @click="onClickJqTotal(2)">
          <span class="jmsfjq_total_title">今日重大警情</span>
          <div style="margin: 1vw 0 0 0">
            <span class="red jq_num">{{ jqTotal.zdCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              占比<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.zdHb > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.zdHb > 0 ? 'red' : 'green'">
                  {{ jqTotal.zdHb }}%</span></span>
            </span>
          </div>
        </div>
        <div class="wffzzs_total jq_total_item" @click="onClickJqTotal(3)">
          <span class="jmsfjq_total_title">今日违法犯罪警情</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ jqTotal.wffzCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              环比<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.wffzHb > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.wffzHb > 0 ? 'red' : 'green'">
                  {{ jqTotal.wffzHb }}%</span></span>
            </span>
          </div>
          <div class="xz_xs_total">
            <span>刑事 {{ jqTotal.xsCount }} </span>
            <span class="sx"></span>
            <span>行政 {{ jqTotal.xzCount }}</span>
          </div>
        </div>
        <div class="jq_total_item dxzp_item" @click="onClickJqTotal(12)">
          <span class="jmsfjq_total_title">今日一般警情</span>
          <div style="margin: 1vw 0 0 0">
            <span class="jq_num">{{ jqTotal.dzCount }}</span>
            件
            <span style="display: inline-block; margin-left: 6vw">
              占比<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="jqTotal.dzHb > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="jqTotal.dzHb > 0 ? 'red' : 'green'">
                  {{ jqTotal.dzHb }}%</span></span>
            </span>
          </div>
        </div>
      </div>
      <div class="jq_item jmsfjq_box">
        <div class="jmsfjq_total_title">街面实发警情</div>
        <div style="margin-top: 2vw">
          <span style="font-size: 6vw; font-weight: 700">{{
            jqTotal.jmsfTotal
          }}</span>
          <span>&ensp;件&ensp;</span>
          <span>较昨日 &ensp;<span :class="zrjqTotal > 0 ? 'red' : 'green'">{{
            zrjqTotal > 0 ? "+" + zrjqTotal : zrjqTotal
          }}</span></span>
        </div>
        <div class="mk_jq_total_box" @click="onClickJqTotal(9)">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>两抢</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">{{ jqTotal.lqCount }}</span>
              <span class="jq_total_unit">&ensp;件</span>
            </div>
          </div>
          <span class="jqhb">&emsp;较昨日&ensp;<span :class="jqTotal.lqCount > 0 ? 'red' : 'green'">{{ jqTotal.lqUp > 0 ?
            "+" + jqTotal.lqUp : jqTotal.lqUp }}</span></span>
        </div>
        <div class="mk_jq_total_box" @click="onClickJqTotal(10)">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>盗窃汽车</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">
                {{ jqTotal.qcCount }}
              </span>
              <span class="jq_total_unit"> 件</span>
            </div>
          </div>
          <span class="jqhb">&emsp;较昨日&ensp;<span :class="jqTotal.qcUp > 0 ? 'red' : 'green'">{{ jqTotal.qcUp > 0 ? "+"
            + jqTotal.qcUp : jqTotal.qcUp }}</span></span>
        </div>
        <div class="mk_jq_total_box" @click="onClickJqTotal(8)">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>盗窃车内财物</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">{{ jqTotal.ccCount }}</span>
              <span class="jq_total_unit"> 件</span>
            </div>
          </div>
          <span class="jqhb">&emsp;较昨日&ensp;<span :class="jqTotal.ccUp > 0 ? 'red' : 'green'">{{ jqTotal.ccUp > 0 ? "+"
            + jqTotal.ccUp : jqTotal.ccUp }}</span></span>
        </div>
        <div class="mk_jq_total_box" @click="onClickJqTotal(7)">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>扒窃</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">{{ jqTotal.pqCount }}</span>
              <span class="jq_total_unit"> 件</span>
            </div>
          </div>
          <span class="jqhb">&emsp;较昨日&ensp;<span :class="jqTotal.pqUp > 0 ? 'red' : 'green'">{{ jqTotal.pqUp > 0 ? "+"
            + jqTotal.pqUp : jqTotal.pqUp }}</span></span>
        </div>

        <div class="mk_jq_total_box" @click="onClickJqTotal(6)">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>盗窃三车</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">{{ jqTotal.dqscCount }}</span>
              <span class="jq_total_unit"> 件</span>
            </div>
          </div>
          <span class="jqhb">&emsp;较昨日&ensp;<span :class="jqTotal.dqscUp > 0 ? 'red' : 'green'">{{
            jqTotal.dqscUp > 0 ? "+" + jqTotal.dqscUp : jqTotal.dqscUp
          }}</span></span>
        </div>
        <!-- <div class="mk_jq_total_box">
          <div class="jq_total">
            <div>
              <span class="red"># </span>
              <span>入室盗窃</span>
            </div>
            <div>
              <span style="font-size: 4.5vw">{{ jqTotal.rdCount }}</span>
              <span class="jq_total_unit"> 件</span>
            </div>
          </div>
          <span class="jqhb"
            >&emsp;较昨日&ensp;<span
              :class="jqTotal.rdUp > 0 ? 'red' : 'green'"
              >{{ jqTotal.rdUp > 0 ? "+" + jqTotal.rdUp : jqTotal.rdUp }}</span
            ></span
          >
        </div> -->
      </div>
    </div>
    <!-- <div style="height: 3vw; background: #eff0f5"></div> -->
    <!-- <div class="wqts_box">
      <div class="jq_box topM">
        <span class="jmsfjq_total_title">稳情态势</span>
      </div>

      <div class="order_total">
        <div class="total_item" style="background: #dd2024">
          <span>2</span><br />
          <span>失控数量</span>
        </div>
        <div class="total_item" style="background: #fb8734">
          <span>10</span><br />
          <span>在控数量</span>
        </div>
        <div class="total_item" style="background: #ecc617">
          <span>10</span><br />
          <span>待反馈数</span>
        </div>
      </div>
    </div>
    <div class="wk_echart">
      <WqtsChart style="flex: 1" />
      <div style="flex: 1">
        <div class="wk_item" v-for="(item, index) in wkList" :key="index">
          <span class="wk_dot" :style="{ background: item.color }"></span
          >{{ item.text }}&nbsp; {{ item.hb }}% &nbsp; {{ item.num }} 人
        </div>
      </div>
    </div> -->

    <!-- <div style="height: 3vw; background: #eff0f5"></div> -->
    <div style="height: 3vw; background: #eff0f5"></div>
    <div class="qwqk_box">
      <div class="jmsfjq_total_title title_box" @click="routerPush(`/qwCenter`, { status: '街面警力' })">
        <span>勤务情况</span>
        <span class="look_more">查看更多 </span>
      </div>
      <div class="qu_total">
        <div class="qu_item_total">
          <span>{{ qwData.zbld.zbldxm }}</span><br /><span>值班领导</span>
        </div>
        <div class="qu_item_total">
          <span>{{ qwData.zgjl }}</span><br /><span>在岗警力</span>
        </div>
        <div class="qu_item_total">
          <span>{{ qwData.jmjl }}</span><br /><span>街面警力</span>
        </div>
      </div>
      <div class="zdqw_box" v-if="qwData.xfList.length > 0">
        <div class="zdqw_item_box" v-for="item in qwData.xfList" :key="item" @click="onClickXfInfo(item.id)">
          <div class="zdqw_title_box">
            <span class="zdqw_msg" style="font-size: 15px; font-weight: 700"><span style="
                  background: #4d1717;
                  color: #fff;
                  display: inline-block;
                  padding: 0 1vw;
                  margin-right: 1.5vw;
                  border-radius: 3px;
                  font-size: 11px;
                ">类型</span>{{ setDict(item.qwlx, D_BZ_QWLX) }}</span>
            <span class="">负责人：<span style="
                  display: inline-block;
                  background: #fff;
                  border-radius: 10px;
                  padding: 0 1.5vw;
                ">{{ item.fzrXm }}</span></span>
          </div>
          <div class="zdqw_mj_fj_num">
            <span class="van-ellipsis">备注：{{ item.bz }}</span>
            <div class="" style="font-weight: 700; line-height: 5vw">
              <span class="zdqw_msg">民警：{{ item.pbmj.length }}人</span>
              <span class="zdqw_msg" style="padding-left: 5vw; border-left: 1px solid #4d1717">辅警：{{ item.pbfj.length
                }}人</span>
            </div>
          </div>
        </div>
      </div>
      <div class="wzdqw_box" v-else>无重大勤务</div>
      <div class="zbld_box">
        <div class="zbld_item_box" v-for="item in qwData.zbList" :key="item" @click="onClickZbInfo(item.id)">
          <img src="../../assets/images/new/jc.png" />
          <div class="abld_detail">
            <span>{{ item.zbldXm }}</span><br />
            <span style="display: inline-block; width: 28vw; margin-top: 1vw" class="van-ellipsis">{{ item.ssbm
              }}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 3vw; background: #eff0f5"></div>
    <div class="sjkb_box">
      <div class="jmsfjq_total_title">数据详览</div>
      <div class="sjkb_item_box">
        <div @click="routerPush('/yyzx/fmjq/index')" class="sjkb_item">
          方面性警情分析
        </div>
        <div @click="routerPush('/jqfx', { jqlx: 'zjq' })" class="sjkb_item">
          总警情分析
        </div>
        <div @click="routerPush('/jqfx', { jqlx: 'wffzjq' })" class="sjkb_item">
          违法犯罪警情分析
        </div>
        <div @click="routerPush('/jqfx', { jqlx: 'jmjq' })" class="sjkb_item">
          街面警情分析
        </div>
      </div>
    </div>
    <div style="height: 3vw; background: #eff0f5"></div>
    <!-- <div class="jq_box topM">
      <span class="jmsfjq_total_title" style="paddingtop: 2vw">部门动态</span>
    </div>
    <div class="bmdt_box">
      <div
        v-for="(item, index) in bmList"
        :key="index"
        style="text-align: center; margin-right: 1.5vw"
        @click="bmClick(item)"
      >
        <img :src="item.img" alt="" class="bmdt_img" />
        <div class="bm_item">
          {{ item.text }}
          <span
            v-if="index != 0"
            style="font-weight: 100; color: #333; margin-top: 2vw"
            >（开发中）</span
          >
        </div>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import WqtsChart from "./wqtsChart.vue";
import { getMyTaskTotal } from "../../api/rwzx.js";
import { getZdRyCount } from "../../api/zdry.js";
import {
  getYclTask,
  getZbld,
  getJmjlCount,
  getZgjlCount,
  getTbQwZbbb,
  getTbQwXfbb,
} from "../../api/ldjsc.js";
import { baseUrl2 } from "../../utils/request";
import { getDictList, setDict } from "../../utils/dict";
import TopNav from "../../components/topNav.vue";
import { ref, onMounted, onUnmounted, onActivated, reactive } from "vue";
import router from "../../router";
import axios from "axios";
import { dateFormat } from "../../utils/tools.js";
import { getYqList } from "../../api/common.js";
import store from "../../store";
import { onBeforeRouteLeave } from "vue-router";
const { D_BZ_QWLX } = getDictList("D_BZ_QWLX");
const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
const myDb = reactive({
  dcl: 0,
  ycl: 0,
});
const zdgz = reactive({
  hszdry: 0,
});
const qwData = reactive({
  zgjl: 0, //在岗警力
  jmjl: 0, //街面警力
  zbld: {}, //值班领导
  zbList: [], //勤务值班列表
  xfList: [], //巡防列表
});
const wkList = ref([
  {
    text: "红色预警",
    color: "#dd2024",
    num: 2,
    hb: ((2 / 22) * 100).toFixed(0),
  },
  {
    text: "橙色预警",
    color: "#fb8734",
    num: 4,
    hb: ((4 / 22) * 100).toFixed(0),
  },
  {
    text: "黄色预警",
    color: "#ecc617",
    num: 6,
    hb: ((6 / 22) * 100).toFixed(0),
  },
  {
    text: "蓝色预警",
    color: "#4399fc",
    num: 10,
    hb: ((10 / 22) * 100).toFixed(0),
  },
]);
const bmList = ref([
  {
    text: "巡大",
    num: 0,
    img: require("../../assets/images/new/xd.png"),
  },
  {
    text: "出入境管理",
    num: 0,
    img: require("../../assets/images/new/crjgl.png"),
  },
  {
    text: "侦察署",
    num: 0,
    img: require("../../assets/images/new/zcs.png"),
  },
  {
    text: "办公室",
    num: 0,
    img: require("../../assets/images/new/bgs.png"),
  },
  {
    text: "指挥室",
    num: 0,
    img: require("../../assets/images/new/zhs.png"),
  },
  {
    text: "政治处",
    num: 0,
    img: require("../../assets/images/new/zzc.png"),
  },
  {
    text: "政经文保署",
    num: 0,
    img: require("../../assets/images/new/zjwbs.png"),
  },
  {
    text: "治安署",
    num: 0,
    img: require("../../assets/images/new/zas.png"),
  },
  {
    text: "法制大队",
    num: 0,
    img: require("../../assets/images/new/fzdd.png"),
  },
  {
    text: "纪检组",
    num: 0,
    img: require("../../assets/images/new/jjz.png"),
  },
]);
function bmClick(item) {
  switch (item.text) {
    case "巡大":
      router.push("/newTwoHome/xd");
      break;
    default:
      break;
  }
}
const jqTotal = ref({}); //今日警情统计
const zrjqTotal = ref(0); //昨日警情数据
const QWLX = ref([]); //勤务类型
//点击警情统计查看列表
function onClickJqTotal(status) {
  if (status === 1) {
    router.push(`/newTwoHome/zjq`);
  } else {
    router.push(`/newTwoHome/jq/xzjqlist?status=${status}`);
  }
}
//获取警情统计  type 是否是昨日
function _getJqTotal(type) {
  return new Promise((ok) => {
    let data = {
      orgId: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0]
        .deptCode,
      startTime: `${dateFormat("z")} 16:00:00`,
      endTime: `${dateFormat()} 16:00:00`,
      type: 1,
      keyword: "",
    };
    if (type) {
      data.startTime = `${dateFormat("z2")} 16:00:00`;
      data.endTime = `${dateFormat("z")} 16:00:00`;
    }
    axios.post(`${baseUrl2}/xz1Api/api/alarm/count`, data).then((res) => {
      if (res.data) {
        if (type) {
          let num =
            res.data.data.lqCount +
            res.data.data.qcCount +
            res.data.data.ccCount +
            res.data.data.pqCount +
            res.data.data.dqscCount;
          zrjqTotal.value = jqTotal.value.jmsfTotal - num;
        } else {
          jqTotal.value = res.data.data;
          jqTotal.value.jmsfTotal =
            res.data.data.lqCount +
            res.data.data.qcCount +
            res.data.data.ccCount +
            res.data.data.pqCount +
            res.data.data.dqscCount;
        }
        ok();
      }
    });
  });
}
//查看巡防详情
function onClickXfInfo(id) {
  router.push({
    path: "/yyzx/xfbb/addtsXfbb",
    query: {
      bbid: id,
    },
  });
}
//查看值班详情
function onClickZbInfo(id) {
  router.push({
    path: "/yyzx/views/addZbbbInfo",
    query: {
      zt: "",
      id: id,
      text: "",
      color: "",
      flag: "",
    },
  });
}
//获取巡防列表
function _getTbQwXfbb() {
  let data = {
    pageSize: 1000,
    pageCurrent: 1,
    qwlxs: "01,02,03,04,05",
    ssbmid: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0]
      .deptId,
    bbzt: 0,
  };
  getTbQwXfbb(data).then((res) => {
    if (res && res.records.length > 0) {
      res.records.forEach((item) => {
        if (item.pbfj) {
          item.pbfj = JSON.parse(item.pbfj);
        } else {
          item.pbfj = [];
        }
        if (item.pbmj) {
          item.pbmj = JSON.parse(item.pbmj);
        } else {
          item.pbmj = [];
        }
        qwData.xfList.push(item);
      });
    }
  });
}
//获取值班列表
function _getTbQwZbbb() {
  let data = {
    pageSize: 50,
    pageCurrent: 1,
    startTime: `${dateFormat("z")} 16:00:00`,
    endTime: `${dateFormat()} 16:00:00`,
    ssbmdm: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0]
      .deptCode,
  };
  getTbQwZbbb(data).then((res) => {
    if (res && res.records.length > 0) {
      qwData.zbList = res.records;
    }
  });
}
//获取勤务数据
function _getQwData() {
  getZbld().then((res) => {
    if (res) qwData.zbld = res;
  });
  getJmjlCount().then((res) => {
    if (res) qwData.jmjl = res.jmjl;
  });
  getZgjlCount().then((res) => {
    if (res) qwData.zgjl = res.zgjl;
  });
}
function getZdgz() {
  zdgz.hszdry = 0;
  getZdRyCount({}).then((res) => {
    res.forEach((v) => {
      zdgz.hszdry += v.COUNT;
    });
  });
}
//待办任务数据
function getMyDb() {
  myDb.dcl = 0;
  getMyTaskTotal({ sfzh: userInfo.idEntityCard }).then((res) => {
    if (res) {
      res.forEach((e) => {
        myDb.dcl += e.count;
      });
    }
  });
  getYclTask().then((res) => {
    myDb.ycl = res;
  });
}

function routerPush(url, data = {}) {
  router.push({
    path: url,
    query: data,
  });
}
onMounted(async () => {
  getMyDb();
  getZdgz();
  await _getJqTotal();
  await _getJqTotal(true);
  _getQwData();
  _getTbQwZbbb();
  _getTbQwXfbb();
});
</script>
<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.sjkb_box {
  @include font_size($font_medium_s);
  font-weight: 700;
  padding: 3vw;

  .sjkb_item_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 3vw;

    .sjkb_item {
      width: 44%;
      margin-bottom: 3vw;
      padding: 2vw 2vw;
      background: #ebf2fa;
      text-align: center;
      border-radius: 1vw;
      color: #00347e;
      border: 1px solid #0d4595;
    }
  }
}

.wddb_box {
  @include font_size($font_medium_s);
  background: url("../../assets/images/new/ldjsc_total.png");
  background-size: 100% 100%;
  margin: 3vw;
  color: #ffffff;
  padding: 4vw 0;

  .wdrw_title {
    text-align: center;
    @include font_size($font_medium);
    font-weight: 700;
  }

  .dbrw_total {
    display: flex;
    justify-content: space-between;
    // padding: 2vw 3.5vw 5vw 3.5vw;
  }

  .wddb_item {
    width: 41%;
    border-radius: 2vw;
    text-align: center;

    .num {
      font-size: 5vw;
      margin-right: 1.5vw;
      display: inline-block;
      margin-bottom: 1vw;
    }
  }
}

.jq_box {
  display: flex;
  justify-content: space-between;
  @include font_size($font_medium_s);
  margin: 0 3vw 3vw 3vw;

  .jmsfjq_box {
    background: linear-gradient(0deg, #f4f8fb 35%, #e1eeff 100%);
  }

  .left_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .jq_item {
    width: 46.85%;
    border-radius: 2vw;
    padding: 1.5vw;

    .mk_jq_total_box {
      margin: 5vw 0;

      .jq_total {
        @include font_size($font_medium);
        display: flex;
        justify-content: space-between;

        .jq_total_unit {
          @include font_size($font_medium_s);
        }
      }

      .jqhb {
        display: inline-block;
        margin-top: 1vw;
        color: #999;
      }
    }

    .jq_total_item {
      padding: 2.5vw;
      border-radius: 2vw;
    }

    .dxzp_item {
      background: rgba(81, 193, 242, 0.1);
    }

    .zdjqzs_total {
      background: url("../../assets/images/new/zdjqzs.png");
      background-size: 100%;
    }

    .jrjqzs_total {
      background: rgba(125, 148, 248, 0.3);
    }

    .wffzzs_total {
      background: #fae9e1;

      .xz_xs_total {
        display: flex;
        justify-content: space-between;
        color: #7c4e19;

        .sx {
          width: 1px;
          background: #7c4e19;
        }
      }
    }
  }
}

.order_total {
  margin: 3vw;
  @include font_size($font_medium_s);
  display: flex;
  justify-content: space-between;
  margin-top: 3vw;
  color: #fff;

  .total_item {
    border-radius: 5px;
    width: 31%;
    padding: 2.5vw 0;
    text-align: center;

    &>span:nth-child(1) {
      display: inline-block;
      @include font_size($font_medium);
      font-weight: 700;
      margin-bottom: 1.5vw;
    }
  }
}

.wk_echart {
  display: flex;
  align-items: flex-start;
  @include font_size($font_medium_s);
  height: 40vw;
  overflow: hidden;

  .wk_dot {
    display: inline-block;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    margin-right: 2vw;
  }

  .wk_item {
    margin: 4vw;
  }
}

.topM {
  padding-top: 2vw;
}

.yuqts_box {
  display: flex;
  justify-content: center;
  height: 40vw;
  overflow: auto;
  // background: #f1f6f4;
  // margin: 0 3vw 3vw 3vw;
  // padding: 2.5vw;
  padding-bottom: 5vw;
  @include font_size($font_medium_s);
}

.bmdt_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  margin: 0 2.5vw 3vw 2.5vw;
  @include font_size($font_medium_s);

  .bm_item {
    // white-space: nowrap;
    border-radius: 10px;
    flex-shrink: 0;
    height: 12vw;
    margin: 0 1vw;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }
}

.qwqk_box {
  margin: 3vw;
  @include font_size($font_medium_s);

  .title_box {
    display: flex;
    justify-content: space-between;
  }

  .qu_total {
    display: flex;
    justify-content: space-between;
    margin-top: 3vw;

    .qu_item_total {
      width: 31.5%;
      text-align: center;
      background: #f5f5f5;
      padding: 3vw 0;
      border-radius: 1.5vw;

      &>span:nth-child(1) {
        display: inline-block;
        @include font_size($font_medium);
        font-weight: 700;
        margin-bottom: 2vw;
      }
    }
  }

  .zbld_box {
    margin-top: 3vw;
    overflow-x: auto;
    display: flex;

    .zbld_item_box {
      border: 1px solid #eee;
      padding: 2.5vw 3vw;
      flex-shrink: 0;
      width: 39vw;
      margin-right: 2.5vw;
      display: table;
      border-radius: 1.5vw;

      &>img {
        position: relative;
        top: -1vw;
      }

      .abld_detail {
        display: inline-block;
        margin-left: 1.7vw;

        &>span:nth-child(1) {
          @include font_size($font_medium);
          font-weight: 700;
        }
      }
    }
  }

  .zdqw_box {
    margin-top: 3vw;
    overflow-x: auto;
    display: flex;

    .zdqw_item_box {
      background: #fef4f4;
      line-height: 6vw;
      margin-right: 3vw;
      // padding: 2vw;
      flex-shrink: 0;
      display: table;
      border-radius: 1.5vw;
      width: 60vw;
      overflow: hidden;
      color: #4d1717;

      .zdqw_msg {
        display: inline-block;
        margin-right: 5vw;
      }
    }
  }
}

.wzdqw_box {
  padding: 2.5vw;
  text-align: center;
  background: rgba(106, 188, 131, 0.2);
  margin-top: 3vw;
  border-radius: 1.5vw;
  @include font_size($font_medium);
  font-weight: 700;
}

.jmsfjq_total_title {
  @include font_size($font_medium);
  font-weight: 700;
}

.bl_img {
  width: 2vw;
  height: 2.5vw;
  margin-right: 1vw;
}

.jq_num {
  font-size: 6vw;
  font-weight: 700;
  margin: 2vw 0;
}

.wqts_box {
  background: url("../../assets/images/new/wqts.png");
  background-size: 100%;
  padding: 2vw 0;
}

.yqts_box {
  background: url("../../assets/images/new/yqts.png");
  background-size: 100% 100%;
  padding: 2vw 0;
}

.look_more {
  font-weight: normal;
  color: #777;
  @include font_size($font_medium_s);
}

.zdqw_title_box {
  background: #f5e9e9;
  padding: 1.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.zdqw_mj_fj_num {
  padding: 2vw;
}

.bmdt_img {
  width: 11vw;
  height: 11vw;
  padding: 4vw 5.5vw;
  background: #f5f7fd;
  border-radius: 5px;
}
</style>