EmploymentSite/vue/src/views/dataMap/siteDataMap.vue

<template>
  <div>
    <div class="map-box">
      <!-- 地图 -->
      <div
        id="mapDiv"
      ></div>
      <!-- 驿站查询与展示 -->
      <div class="site-search-data-box">
        <!-- 查询表单区域 -->
        <div class="search-input-box">
          <a-select
            v-model:value="searchType"
            @change="searchTypeChange"
          >
            <a-select-option value="site">找驿站</a-select-option>
            <a-select-option value="siteUser">找人员</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="siteSearchParam.siteName"
            :placeholder="searchType == 'site' ? '请输入站点名称' : '请输入人员名称'"
            enter-button
            :loading="searchLoading"
            style="width: 77%"
            @search="onSearch"
          />
        </div>
        <!-- 数据列表 -->
        <div class="select-data-box">
          <!-- 下拉框查询部分 -->
          <div class="select-input-box">
            <span class="cursor-pointer" style="width: 35px;padding: 7px 0;text-align: center"
                  @click="searchAll">全部</span>
            <a-select
              style="width: 30%;"
                v-model:value="siteSearchParam.regionCode"
                :allow-clear="true"
                :options="regionList"
                :field-names="{ label: 'name', value: 'code' }"
                :bordered="false"
                placeholder="所属县区"
                @change="changeRegion"
            >
            </a-select>
            <a-select
              style="width: 30%;"
                v-model:value="siteSearchParam.streetCode"
                :options="streetList"
                :field-names="{ label: 'name', value: 'code' }"
                :allow-clear="true"
                :bordered="false"
                placeholder="所属街道"
              @change="onSearch"
            >
            </a-select>
            <a-select
              style="width: 30%;"
              v-model:value="siteSearchParam.siteID"
              :options="siteDicList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
              :allow-clear="true"
              :bordered="false"
              :disabled="searchType == 'site'"
              placeholder="所属驿站"
              @change="onSearch"
            >
            </a-select>
          </div>
          <div class="list-box">
            <!-- 驿站数据 -->
            <div v-if="searchType == 'site' && siteList.length > 0" class="site-data"
                 :class="{'check-site':nowCheckSite.siteID == site.siteID || nowMouseenterSite.siteID == site.siteID}"
                 v-for="(site,siteIndex) in siteList"
                 :key="siteIndex"
                 @click="checkSite(site)"
                 @mouseenter="siteMouseenter(site)"
                 @mouseleave="siteMouseenter({siteID:null})"
            >
              <p class="site-name">
                {{ site.siteName }}
              </p>
              <p class="label-text">
                驿站编号：{{ site.siteCode }}
              </p>
              <p class="label-text">
                所属县区：{{ site.regionName }}
              </p>
            </div>
            <!-- 驿站人员数据 -->
            <div v-if="searchType == 'siteUser' && siteUserList.length > 0" class="site-data"
                 :class="{'check-site':nowCheckSiteUser.siteUserID == siteUser.siteUserID || nowMouseenterSiteUser.siteUserID == siteUser.siteUserID}"
                 v-for="(siteUser,siteIndex) in siteUserList"
                 :key="siteIndex"
                 @click="checkSiteUser(siteUser)"
                 @mouseenter="siteUserMouseenter(siteUser)"
                 @mouseleave="siteUserMouseenter({siteUserID:null})"
            >
              <p class="site-name">
                {{ siteUser.siteUserName }}
              </p>
              <p class="label-text">
                工号：{{ siteUser.userNo }}
              </p>
              <p class="label-text">
                联系电话：{{ siteUser.mobile }}
              </p>
              <p class="label-text">
                所属驿站：{{ siteUser.siteName }}
              </p>
            </div>
            <div
              v-if="(searchType == 'site' && siteList.length  == 0) || (searchType == 'siteUser' && siteUserList.length == 0)"
              class="empty-box">
              <a-empty/>
            </div>
          </div>
        </div>
        <!-- 分页控件 -->
        <div class="pagination-box">
          <span>共{{ paginationTotal }}{{ searchType == 'site' ? '个' : '人' }}</span>
          <a-pagination v-model:current="siteSearchParam.pageIndex" :total="paginationTotal"
                        v-model:pageSize="siteSearchParam.pageSize" :disabled="searchLoading"
                        show-less-items @change="onSearch" simple :show-size-changer="false"/>
        </div>
      </div>
      <!-- 驿站详情 -->
      <div class="site-info-box" v-if="searchType == 'site' && nowCheckSite.siteID != null">
        <p class="font-size-16 font-weight-600 margin-bottom-10 text-align-center">
          {{ nowCheckSite.siteName }}
          ({{ nowCheckSite.siteCode }})
        </p>
        <div class="w-full flex-box items-start margin-bottom-3">
          <img :src="th" alt="" style="width: 23px; height: 20px;" class="margin-right-3"/>
          <span class="font-size-14 white-space-normal">{{ nowCheckSite.detailAddress }}</span>
        </div>
        <div class="avt-info margin-top-10">
          <img :src="avtO1" alt="">
          <div>
            <p>{{ nowCheckSite.fzrName }}(站长)</p>
            <p>{{ nowCheckSite.fzrMobile }}</p>
          </div>
        </div>
        <a-divider></a-divider>
        <div class="w-full flex-box font-weight-800">
          <div class="left-item-flag"></div>
          建站以来累计
        </div>
        <div class="w-full margin-bottom-10 grid-cols-2 text-align-center padding-top-10 gap-y-1">
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.allCount.companyCount }}</p>
            <p class="font-size-12 font-weight-500">服务企业</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.allCount.postCount }}</p>
            <p class="font-size-12 font-weight-500">收集岗位</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.allCount.jobUserCount }}</p>
            <p class="font-size-12 font-weight-500">服务求职人员（人次）</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.allCount.jobFairsCount }}</p>
            <p class="font-size-12 font-weight-500">开展公共就业服务活动（场）</p>
          </div>
        </div>
        <div class="w-full flex-box font-weight-800">
          <div class="left-item-flag"></div>
          本年以来累计
        </div>
        <div class="w-full margin-bottom-10 grid-cols-2 text-align-center padding-top-10 gap-y-1">
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.yearCount.companyCount }}</p>
            <p class="font-size-12 font-weight-500">服务企业</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.yearCount.postCount }}</p>
            <p class="font-size-12 font-weight-500">收集岗位</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.yearCount.jobUserCount }}</p>
            <p class="font-size-12 font-weight-500">服务求职人员（人次）</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.yearCount.jobFairsCount }}</p>
            <p class="font-size-12 font-weight-500">开展公共就业服务活动（场）</p>
          </div>
        </div>
        <div class="w-full flex-box font-weight-800">
          <div class="left-item-flag"></div>
          本月以来累计
        </div>
        <div class="w-full margin-bottom-10 grid-cols-2 text-align-center padding-top-10 gap-y-1">
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.monthCount.companyCount }}</p>
            <p class="font-size-12 font-weight-500">服务企业</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.monthCount.postCount }}</p>
            <p class="font-size-12 font-weight-500">收集岗位</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.monthCount.jobUserCount }}</p>
            <p class="font-size-12 font-weight-500">服务求职人员（人次）</p>
          </div>
          <div>
            <p class="font-size-18 font-weight-700 ">{{ siteDataCount.monthCount.jobFairsCount }}</p>
            <p class="font-size-12 font-weight-500">开展公共就业服务活动（场）</p>
          </div>
        </div>
      </div>
      <!-- 驿站人员信息详情 -->
      <div class="site-user-info-box" v-if="searchType == 'siteUser' && nowCheckSiteUser.siteUserID != null">
        <div class="user-info-box margin-bottom-10">
          <p class="font-size-18 margin-bottom-8" style="font-weight: 600">
            {{ nowCheckSiteUser.siteUserName }}
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            工号：{{ nowCheckSiteUser.userNo }}
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            联系电话：{{ nowCheckSiteUser.mobile }}
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            所属驿站：{{ nowCheckSiteUser.siteName }}
          </p>
        </div>
        <div class="data-count-box">
          <p class="font-size-18 margin-bottom-8" style="font-weight: 600">
            工作情况
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            企业登记数：{{ siteUserDataCount.companyCount }}家
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            岗位登记数：{{ siteUserDataCount.postCount }}个
          </p>
          <p class="label-text font-size-14 margin-bottom-3">
            求职人员登记数：{{ siteUserDataCount.jobUserCount }}人
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import huiZhouGeoJSON from "./geo"
import {setBoundary} from "@/utils/position";
import {onMounted, reactive, ref} from "vue";
import type {SelectProps} from "ant-design-vue";
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
import {findSiteDataCount, getDataMapList, getSiteList} from "@/api/baseSettings/siteInfo";
import thIcon from "@/assets/images/blueTh1.png"
import {findUserDataCount, getSiteUserDataMapList} from "@/api/baseSettings/userInfo";
import avtO1 from "@/assets/images/avt01.png";
import th from "@/assets/images/th1.png";
import dayjs from "dayjs";

const T = (window as any).T;
const zoom = 9;
let map = null;
// 天地图默认中心点坐标
const centerLngLat = new T.LngLat(114.416110, 23.111582);
// 地图标记点
let markerList = ref<Array<any>>([]);
let labelList = ref<Array<any>>([]);

// 查询类型
const searchType = ref("site")
// 驿站查询数据
const siteSearchParam = reactive({
  pageIndex: 1,
  pageSize: 100,
  siteName: "",
  regionCode: null,
  streetCode: null,
  siteID: null,
});
// 驿站数据
const siteList = ref<Array<any>>([])
// 驿站人员数据
const siteUserList = ref<Array<any>>([]);
// 查询动画
const searchLoading = ref(false);
// 驿站总条数
const paginationTotal = ref(0)
// 县区数据
const regionList = ref<SelectProps['options']>();
// 街道数据
const streetList = ref<SelectProps['options']>();
// 驿站下拉框数据
const siteDicList = ref<any>([]);
// 选中的站点
const nowCheckSite = ref<any>({siteID: null})
// 鼠标经过的站点
const nowMouseenterSite = ref<any>({siteID: null});
// 驿站的业务数据
const siteDataCount = reactive({
  allCount: {
    companyCount: 0,
    postCount: 0,
    jobUserCount: 0,
    jobFairsCount: 0,
  },
  yearCount: {
    companyCount: 0,
    postCount: 0,
    jobUserCount: 0,
    jobFairsCount: 0,
  },
  monthCount: {
    companyCount: 0,
    postCount: 0,
    jobUserCount: 0,
    jobFairsCount: 0,
  }
})
// 选中的站点
const nowCheckSiteUser = ref<any>({siteUserID: null})
// 鼠标经过的站点
const nowMouseenterSiteUser = ref<any>({siteUserID: null});
// 驿站人员的业务数据
const siteUserDataCount = ref<any>({})

// 地图初始化
const initMap = () => {
  // 初始化容器
  map = new T.Map('mapDiv');
  if (map != null) {
    // 设置地图显示中心点为惠州市人民政府
    (map as any).centerAndZoom(centerLngLat, zoom);
    (map as any).setMinZoom(5);
    (map as any).setMaxZoom(14);

    // 地图缩放监听事件
    (map as any).addEventListener("zoomend", function () {
      setSiteMarker(false);
    });
  }
  // 设置城市边界
  setBoundary(map, T, huiZhouGeoJSON);
};

// 查询驿站
function onSearch() {
  searchLoading.value = true;
  if (searchType.value == "site") {
    getDataMapList(siteSearchParam).then((result: any) => {
      siteList.value = result.list;
      siteList.value.forEach((site: any) => {
        if (site.siteUsers) {
          site.siteUsers = site.siteUsers.split(',');
        } else {
          site.siteUsers = []
        }
      })
      paginationTotal.value = result.total;
      // 地图绘制
      setSiteMarker(true)
    }).finally(() => {
      searchLoading.value = false;
    })
  } else {
    let params = {
      pageIndex: siteSearchParam.pageIndex,
      pageSize: 100,
      siteUserName: siteSearchParam.siteName,
      regionCode: siteSearchParam.regionCode,
      streetCode: siteSearchParam.streetCode,
      siteID: siteSearchParam.siteID
    }
    getSiteUserDataMapList(params).then((result: any) => {
      siteUserList.value = result.list;
      paginationTotal.value = result.total;
      // 地图绘制
      setSiteMarker(true);
    }).finally(() => {
      searchLoading.value = false;
    })
  }

}

// 查询全部
function searchAll() {
  siteSearchParam.pageIndex = 1;
  siteSearchParam.pageSize = 100;
  siteSearchParam.siteName = "";
  siteSearchParam.regionCode = null;
  siteSearchParam.streetCode = null;
  siteSearchParam.siteID = null;
  onSearch();
}

// 查询类型切换事件
function searchTypeChange() {
  // 清空数据
  nowCheckSite.value = {siteID: null};
  nowCheckSiteUser.value = {siteUserID: null};
  onSearch();
  delMapInfo();
}

// 查询县区
const getRegionList = async function () {
  regionList.value = await getRegionCodeList();
}
// 县区变更事件-查询街道数据
const changeRegion = async function () {
  if (siteSearchParam.regionCode) {
    streetList.value = await getStreetCodeList(siteSearchParam.regionCode);
    getSiteList({pageIndex: 1, pageSize: 9999, regionCode: siteSearchParam.regionCode}).then((result: any) => {
      siteDicList.value = result.list;
    })
  } else {
    siteDicList.value = [];
    streetList.value = [];
  }
  onSearch();
}

function setSiteMarker(setCenter: boolean) {
  delMapInfo();

  if (setCenter) {
    // 设置中心点
    (map as any).centerAndZoom(centerLngLat, zoom);
  }

  if (siteList.value.length > 0 || siteUserList.value.length > 0) {
    let zoomLevel = (map as any).getZoom();
    const sizeData = computeMarkerSize(zoomLevel);

    // 设置图标
    const icon = new T.Icon({
      iconUrl: thIcon,
      iconSize: new T.Point(sizeData.iconSize, sizeData.iconSize),
      iconAnchor: sizeData.iconAnchor
    })
    if (searchType.value == "site") {
      // 解析站点数据，在地图中标记
      siteList.value.forEach((item: any) => {
        if (item.siteLongitude && item.siteLatitude) {
          const point = new T.LngLat(item.siteLongitude, item.siteLatitude)
          const marker = new T.Marker(point, {icon: icon}); // 创建标注
          // 添加点击事件
          marker.addEventListener('click', () => {
            checkSite(item);
            // marker.openInfoWindow(markerInfoWin);
          });
          let winHtml = `
            <div >
                <p style="line-height: 12px; font-size: 14px; font-weight: 600">${item.siteName}(${item.siteCode})</p>
                <span style="line-height: 12px;">所属区县：${item.regionName}</span>
                <br>
                <span style="line-height: 12px;">运营公司：${item.institutionName}</span>
                <br>
                <span style="line-height: 12px;">运营公司地址：${item.institutionAddress}</span>
                <br>
                <span style="line-height: 12px;">联系人：${item.institutionFzrName}</span>
                <br>
                <span style="line-height: 12px;">联系电话：${item.institutionFzrMobile}</span>
            </div>
          `;
          let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true, offset: new T.Point(3, 7)});
          // 添加鼠标经过事件
          marker.addEventListener('mouseover', () => {
            marker.openInfoWindow(markerInfoWin);
          });
          marker.addEventListener('mouseout', () => {
            marker.closeInfoWindow();
          });
          (map as any).addOverLay(marker);// 将标注添加到地图中
          markerList.value.push(marker);
        }
      })
    } else {
      // 解析人员数据
      siteUserList.value.forEach((item: any) => {
        if (item.longitude && item.latitude) {
          const point = new T.LngLat(item.longitude, item.latitude)
          const marker = new T.Marker(point, {icon: icon}); // 创建标注
          // 添加点击事件
          marker.addEventListener('click', () => {
            checkSiteUser(item);
          });
          (map as any).addOverLay(marker);// 将标注添加到地图中
          markerList.value.push(marker);
        } else if (item.siteLongitude && item.siteLatitude) {
          const point = new T.LngLat(item.siteLongitude, item.siteLatitude);
          const marker = new T.Marker(point, {icon: icon}); // 创建标注
          // 添加点击事件
          marker.addEventListener('click', () => {
            checkSiteUser(item);
          });
          (map as any).addOverLay(marker);// 将标注添加到地图中
          markerList.value.push(marker);
        }
      })
    }
  }
}

// 清空地图标点
function delMapInfo() {
  // 删除已有标点
  if (markerList.value.length > 0) {
    for (let i = 0; i < markerList.value.length; i++) {
      (map as any).removeOverLay(markerList.value[i]);
    }
    markerList.value = [];
  }
  if (labelList.value.length > 0) {
    for (let i = 0; i < labelList.value.length; i++) {
      (map as any).removeOverLay(labelList.value[i]);
    }
    labelList.value = [];
  }
  (map as any).closeInfoWindow();
}

// 天地图按缩放基本计算图标与文本的大小与锚点偏移值
function computeMarkerSize(zoomLevel: any) {
  // 计算新的icon大小
  let newIconSize = Math.min(Math.max(zoomLevel * 2, 10), 15);
  // 计算新的icon锚点位置
  let iconAnchor = new T.Point(10 * (newIconSize / 30), 20 * (newIconSize / 45));
  // 计算新的偏移量，保持 label 居中且不超过初始值
  let offsetX = -20 + ((newIconSize - 15) / 2);
  let offsetY = 28 + ((newIconSize - 15) / 2);
  // 确保偏移量不超过初始值
  offsetX = Math.max(offsetX, -20);
  offsetY = Math.min(offsetY, 28);
  // 更新 label 的偏移量
  let newOffset = new T.Point(offsetX, offsetY);
  let fontSize = Math.min(8, Math.max(6, 10 - (15 - newIconSize) / 2))

  return {
    iconSize: newIconSize,
    iconAnchor,
    labelOffset: newOffset,
    fontSize
  }
}

// 选择站点
function checkSite(site: any) {
  // 查询业务数据数量
  let year = dayjs().format("YYYY");
  let month = dayjs().format("MM");
  // 全部
  findSiteDataCount(site.siteID, null, null).then((result: any) => {
    siteDataCount.allCount = result;
  })
  // 当年
  findSiteDataCount(site.siteID, year, null).then((result: any) => {
    siteDataCount.yearCount = result;
  })
  // 当月
  findSiteDataCount(site.siteID, year, month).then((result: any) => {
    siteDataCount.monthCount = result;
  })
  nowCheckSite.value = JSON.parse(JSON.stringify(site));
  // 关闭地图上的其他信息弹窗
  (map as any).closeInfoWindow();
  if (site.siteLongitude && site.siteLatitude) {
    // 设置地图中心点
    (map as any).centerAndZoom(new T.LngLat(site.siteLongitude, site.siteLatitude), (map as any).getZoom());
    if (searchType.value == 'site') {
      let winHtml = `
            <div >
                <p style="line-height: 12px; font-size: 14px; font-weight: 600">${site.siteName}(${site.siteCode})</p>
                <span style="line-height: 12px;">所属区县：${site.regionName}</span>
                <br>
                <span style="line-height: 12px;">运营公司：${site.institutionName}</span>
                <br>
                <span style="line-height: 12px;">运营公司地址：${site.institutionAddress}</span>
                <br>
                <span style="line-height: 12px;">联系人：${site.institutionFzrName}</span>
                <br>
                <span style="line-height: 12px;">联系电话：${site.institutionFzrMobile}</span>
            </div>
          `;
      (map as any).openInfoWindow(winHtml, new T.LngLat(site.siteLongitude, site.siteLatitude), {
        autoPan: true,
        maxHeight: 300,
        maxWidth: 400,
        offset: new T.Point(5, 0)
      });
    }
  }
}

// 鼠标经过事件
function siteMouseenter(site: any) {
  nowMouseenterSite.value = site;
}

// 选择站点人员
async function checkSiteUser(siteUser: any) {
  await findUserDataCount(siteUser.userID).then((result: any) => {
    siteUserDataCount.value = result;
  })
  nowCheckSiteUser.value = JSON.parse(JSON.stringify(siteUser))
  if (siteUser.longitude && siteUser.latitude) {
    // 设置地图中心点
    (map as any).centerAndZoom(new T.LngLat(siteUser.longitude, siteUser.latitude), (map as any).getZoom());
  } else if (siteUser.siteLongitude && siteUser.siteLatitude) {
    // 设置地图中心点
    (map as any).centerAndZoom(new T.LngLat(siteUser.siteLongitude, siteUser.siteLatitude), (map as any).getZoom());
  }
}

// 鼠标经过事件
function siteUserMouseenter(siteUser: any) {
  nowMouseenterSite.value = siteUser;
}

onMounted(() => {
  initMap();
  getRegionList();
  onSearch();
})
</script>

<script lang="ts">
// 设置页面名称进行组件缓存
export default {
  name: "SiteDataMap"
}
</script>

<style lang="less">
.map-box {
  width: 100vw;
  height: 100vh;
  position: relative;
  border: 1px rgba(173, 173, 173, 0.8) solid;
  box-sizing: border-box;

  #mapDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .site-search-data-box {
    width: 360px;
    position: absolute;
    top: 15px;
    bottom: 5px;
    left: 15px;
    right: 390px;
    z-index: 110;

    .search-input-box {
      width: 100%;
      margin-bottom: 10px;
    }

    .select-data-box {
      height: calc(100% - 95px);
      background-color: #F8F8F8;
      border-radius: 10px 10px 0 0;
      padding: 10px;

      .select-input-box {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: white;
        padding: 5px;
        margin-bottom: 10px;
        border-radius: 10px;
      }

      .list-box {
        max-height: calc(100% - 60px);
        overflow: hidden;
        overflow-y: auto;

        .site-data {
          background-color: white;
          border-radius: 10px;
          padding: 8px;
          cursor: pointer;
          margin-bottom: 10px;
          box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
          box-sizing: border-box;
          border: 1px solid white;
        }

        .check-site {
          border-color: #007EFF;
        }
      }
    }
  }

  .site-info-box, .site-user-info-box {
    width: 300px;
    position: absolute;
    top: 15px;
    left: calc(100% - 330px);
    right: 15px;
    bottom: 15px;
    z-index: 110;
    border-radius: 10px;
    background-color: white;
    padding: 15px;
  }

  .pagination-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    background-color: #F8F8F8;
    border-radius: 0 0 10px 10px;
  }

  .empty-box {
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .label-text {
    font-size: 12px;
    color: #737373;
    margin-bottom: 3px;
  }

  .avt-info {
    display: flex;
    align-items: center;

    img {
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }

    .contact-name {
      font-size: 14px;
      color: #292934;
    }

    .contact-mobile {
      font-size: 12px;
      color: #6A6F75;
    }

  }

  .left-item-flag {
    height: 20px;
    width: 3px;
    border-radius: 8px;
    margin-right: 7px;
    background: linear-gradient(180deg, #fff, #0094ff);
  }

  .ant-btn, .ant-input {
    border: none !important;
  }

  input {
    height: 32px;
  }

  .ant-select:not(.ant-select-customize-input) .ant-select-selector,
  .ant-select:not(.ant-select-customize-input) .ant-select-selector,
  .ant-input-affix-wrapper, .ant-select-selector {
    border: none !important;
    box-shadow: none !important;
  }

  .ant-select:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) > .ant-select-selector {
    border-color: transparent;
    box-shadow: none;
  }
}
</style>