<template>
  <div class="container">
    <div class="flex">
      <div class="box mr-8">
        <Title1 title="排队信息" />
        <div
		style="cursor: pointer;"
		class="count-box flex justify-between">
          <count-item
            label="今日入园人数"
            :count="scenicStore.scenicQueueData.header.jrjdrs"
            suffix="人"
			@click="handlePop2()"
          />
		  <count-item
		     label="今日出园人数"
		     :count="scenicStore.scenicQueueData.header.jrjdcy"
		     suffix="人"
			  @click="handleLineUp()"
		   />
          <count-item
            label="排队人数"
            :count="scenicStore.scenicQueueData.header.pdrs"
            :color="scenicStore.scenicQueueData.header.pdrs_type == 0 ? '' : '#E21B1B'"
            suffix="人"
			 @click="handleLineUp()"
          />
        </div>
        <div class="border">
          <div class="pt-10">
            <Title3 title="景区排队人数" />
          </div>
          <Line
            :width="490"
            :height="300"
            :data="scenicQueueData"
            :xAxisData="scenicQueueXAxisData"
          />
        </div>
      </div>
      <div class="box mr-8">
        <Title1 title="景区承载" />
        <div class="flex">
          <circle-progress
            :width="200"
            :height="70"
            :value="scenicStore.scenicBearData.header.jqRate"
            :title="`${scenicStore.scenicBearData.header.jqRate}%`"
            subTitle="景区承载率"
          />
          <div class="flex flex-1 justify-between">
            <count-item
              label="景区当前在园人数"
              :count="scenicStore.scenicBearData.header.jrjdrs"
              suffix="人"
            />
            <count-item
              label="景区最大承载"
              :count="scenicStore.scenicBearData.header.jqzdcz"
              suffix="人"
            />
          </div>
        </div>
        <div class="border">
          <div class="pt-10">
            <Title3 title="今日景区承载量" />
          </div>
          <Line
            :width="490"
            :height="300"
            :data="scenicBearData"
            :xAxisData="scenicBearXAxisData"
          />
        </div>
      </div>
      <div class="box-1 mr-8" style="padding: 0;">
        <Title1 title="停车信息" />
        <div class="flex">
          <div class="height70 flex flex-1">
            <circle-progress
              v-for="(item, index) in garageList"
              :key="index"
              :width="140"
              :height="70"
              :value="parseFloat(item.rate)"
              :title="item.occupied"
              :subTitle="`${item.name}`"
            />
          </div>
          <div class="ml-20 flex flex-1 justify-between">
            <count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
            <count-item
              label="剩余车位数"
              :count="scenicStore.stopCarData.info.occupiedSpaces"
              suffix="个"
            />
          </div>
        </div>
        <div class="flex">
          <div class="border mr-8 flex-1">
            <div class="pt-10">
              <Title3 title="今日景区车流量" />
            </div>
            <Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
          </div>
          <div class="border flex-1">
            <div class="pt-10">
              <Title3 title="车辆归属地占比" />
            </div>
            <PieRow
              label="今日停车累计"
              :dataList="dataLists"
              :total="carTotal"
              :width="360"
              :height="300"
            />
          </div>
        </div>
      </div>
      <div class="box-2">
        <Title1 title="异常信息 " />
        <div style="cursor: pointer;" class="count-box flex">
          <count-item
            v-for="item in headList"
            @click="showAbnormalList(item)"
            :label="item.name"
            :count="item.count"
            :type="item.type"
            :color="item.type == 0 ? '#0096FF' : '#E21B1B'"
            suffix="次"
          />
        </div>
        <div class="border flex-1">
          <div class="pt-10">
            <Title3 title="异常告警占比" />
          </div>
          <PieRow
            label="告警总数"
            :dataList="scenicStore.secureData.dataList"
            :total="alarmTotal"
            :width="440"
            :height="300"
          />
        </div>
      </div>
    </div>
    <div class="flex mt-8">
      <div class="box-3 mr-8">
        <div class="look-box">
          <Title1 title="交通信息" />
          <div @click="hanldeLookMap" class="look-btn">查看详情</div>
        </div>
        <div class="count-box flex">
          <count-item
            v-for="(item, index) in scenicStore.trafficData.infoList"
            :key="index"
            :label="item.name"
            :count="item?.value || 0"
          />
        </div>
        <div class="flex">
          <div class="border mr-8">
            <Title3 title="今日交通负载" />
            <traffic-flow :list="scenicStore.trafficData.data.congestion" />
          </div>
          <div class="border mr-8">
            <Title3 title="拥堵次数占比" />
            <jam
              :width="220"
              :height="300"
              sub-title="拥堵频次总数"
              :list="scenicStore.trafficData.data.countRate"
			  :text="'暂无拥堵'"
            />
          </div>
          <div class="border">
            <Title3 title="拥堵时长占比" />
            <jam
			 :text="'暂无拥堵'"
              :width="220"
              :height="300"
              sub-title="拥堵总时长(分钟)"
              :list="scenicStore.trafficData.data.timeRate"
            />
          </div>
        </div>
      </div>

      <div class="box-4 mr-8">
        <Title1 title="用户画像" />
        <div class="flex">
          <div class="border mr-8 flex-1">
            <Title3 title="年龄/性别占比" />
            <age :list="scenicStore.userPortraitData.data.ageRate" />
            <div
              class="cell pt-20"
              v-for="(item, index) in scenicStore.userPortraitData.data.genderRate"
              :key="index"
            >
              <img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
              <img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
              <div class="bg">
                <span class="text">{{ item.name }}</span>
                <div class="progress">
                  <el-progress
                    :percentage="parseFloat(item.value)"
                    :show-text="false"
                    :color="
                      item.name == '女'
                        ? 'linear-gradient( to right, #0A4482 0%, #FF7021 100%)'
                        : 'linear-gradient( to right, #074D90 0%, #55E0FF 100%)'
                    "
                  />
                </div>
                <span :class="[item.name == '男' ? 'man' : 'woman']">{{ item.value }}%</span>
              </div>
            </div>
          </div>
          <div class="border mr-8 flex-1">
            <Title3 title="客源地分析TOP5" />
            <RegionTop
              :list="scenicStore.userPortraitData.data.provinceRate"
              :width="250"
              :height="366"
            />
          </div>
          <div class="border flex-1">
            <Title3 title="购票来源" />
            <TicketSource
              :list="scenicStore.userPortraitData.data.channel"
              :width="240"
              :height="330"
            />
          </div>
        </div>
      </div>
      <div class="box-5">
        <Title1 title="车船信息" />
        <div class="flex mb-6">
          <div class="border mr-8 pt-10 pb-10">
            <div class="flex justify-between">
              <Title2 title="景区车辆" />
              <div class="sum">
                <span>总数：</span>
                <countup
                  :end-val="
                    scenicStore.carShipData.car.count?.drivingCount +
                    scenicStore.carShipData.car.count?.nonDrivingCount
                  "
                />
              </div>
            </div>
            <div class="car-box mt-10">
              <img class="icon" src="@/assets/images/icon-6.png" />
              <div class="car-item pr-20">
                <div class="label">运营车辆</div>
                <div class="value flex">
                  <countup :end-val="scenicStore.carShipData.car.count?.drivingCount" />
                  <span class="suffix"> 辆 </span>
                </div>
              </div>
              <div class="car-item">
                <div class="label">空闲车辆</div>
                <div class="value flex">
                  <countup :end-val="scenicStore.carShipData.car.count?.nonDrivingCount" />
                  <span class="suffix"> 辆 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="border pt-10 pb-10">
            <div class="flex justify-between">
              <Title2 title="景区船只" />
              <div class="sum">
                <span>总数：</span>
                <countup
                  :end-val="
                    scenicStore.carShipData.ship.count?.drivingCount +
                    scenicStore.carShipData.ship.count?.nonDrivingCount
                  "
                />
              </div>
            </div>
            <div class="car-box mt-10">
              <img class="icon" src="@/assets/images/icon-7.png" />
              <div class="car-item pr-20">
                <div class="label">运营船只</div>
                <div class="value flex">
                  <countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
                  <span class="suffix">艘</span>
                </div>
              </div>
              <div class="car-item">
                <div class="label">空闲船只</div>
                <div class="value flex">
                  <countup :end-val="scenicStore.carShipData.ship.count?.nonDrivingCount" />
                  <span class="suffix">艘</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="border pt-10 pb-10">
          <div id="car-ship" class="car-ship" />
          <img class="full" src="@/assets/images/full.png" @click="show = true" />
        </div>
      </div>
    </div>
	<el-dialog :title="'徒步客流统计'" center v-model="dialogTableVisible2">
	  <div class="bom-box">
	    <div class="table">
			<div class="header-title">{{gridTitle}}</div>
	      <div class="header">
	        <div @click="handleTabPassFlow(0)" :class="hIndex==0?'h-active':''" >路段</div>
	        <div @click="handleTabPassFlow(1)" :class="hIndex==1?'h-active':''">点位</div>
	      </div>
	      <div class="list">
			  <div class="item">
				 <div>名称</div>
				 <div>进入</div>
				 <div>离开</div>
				 <div>保有量</div>
			  </div>
	        <div class="item" v-if="hIndex==0" v-for="(item, index) in tjArr.groups" :key="index">
	          <div>{{ item.title }}</div>
	          <div>{{ item.enter }}</div>
			  <div>{{ item.exit }}</div>
			  <div>{{ item.holdValue }}</div>

	        </div>
			<div class="item" v-if="hIndex==1" v-for="(item, index) in tjArr.single" :key="index">
				 <div>{{ item.title }}</div>
				 <div>{{ item.enter }}</div>
				 <div>{{ item.exit }}</div>
				 <div>{{ item.holdValue }}</div>

			</div>
	      </div>
	    </div>
	  </div>
	</el-dialog>
  </div>
  <big-map
    v-model="show"
    :carList="scenicStore.carShipData.car.list"
    :shipList="scenicStore.carShipData.ship.list"
  />
  <traMap :longitude="longitude" :latitude="latitude" v-model="traMapShow"></traMap>
  <all-list :events="scenicSpotId" v-model="allShow" />
  <warn-list v-model="warnShow" :type="warnType" :scenicSpotId="scenicSpotId" />
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import PubSub from 'pubsub-js'
  import allList from './allList'
  import warnList from './warnList.vue'
  import carIcon from '@/assets/images/car.png'
  import carStopIcon from '@/assets/images/car-stop.png'
  import carOfflineIcon from '@/assets/images/car-offline.png'
  import {getSpotPassengerFlow} from "@/api/home.js";
  import shipIcon from '@/assets/images/ship.png'
  import shipStopIcon from '@/assets/images/ship-stop.png'
  import shipOfflineIcon from '@/assets/images/ship-offline.png'

  import age from './age'
  import jam from './jam'
  import BigMap from './big-map'
  import traMap from './tra-map'
  import TrafficFlow from './traffic-flow'
  import { useRouter } from 'vue-router'
  import { useMap } from '@/hooks/map'
  import { useScenicStore } from '@/stores/scenic'
  let props = defineProps({
    scenicSpotId: {
      type: String,
      default: () => ''
    }
  })
  const router = useRouter()
  const scenicStore = useScenicStore()
  const { initMap, addMarker, marker } = useMap()
  //景区排队
  let allShow = ref(false)
  let events = ref({})
  let warnType = ref("curr")

  const handleLineUp = (item)=>{
  	  allShow.value = true
  	  events.value = item
  }
  let dialogTableVisible2 = ref(false)
  let tjArr = ref([])
  let hIndex = ref(0)
  const handleTabPassFlow = (index)=>{
	  hIndex.value = index;
  }
  const handlePop2 = async()=>{
      if(props.scenicSpotId=="root00000000"){
        dialogTableVisible2.value = true
        let res = await getSpotPassengerFlow({scenicSpotId:props.scenicSpotId})
        tjArr.value = res.data
      }
  }
  let show = ref(false)
  let scenicChange = null
  let carOverlays = ref([])
  let shipOverlays = ref([])
  let traMapShow = ref(false)
  //查看交通信息
  let latitude = ref('')
  let longitude = ref('')
  let warnShow = ref(false)
  const showAbnormalList = function (item){
    if(item.name=='今日异常总数'){
      warnType.value = 'all'
    }else if(item.name=='当前异常数'){
      warnType.value = 'curr'
    }else if(item.name=='已解除异常数'){
      warnType.value = 'deal'
    }
    warnShow.value = true;
  }
  const hanldeLookMap = () => {
    router.push('/traffic')
    // traMapShow.value = true
  }
  const handleToWorkOrder = () => {
    router.push('/workOrder')
  }
  const garageList = computed(() => {
    return scenicStore.stopCarData.headList
  })

  const alarmTotal = computed(() => {
    return scenicStore.secureData.dataList.reduce((pre, cur) => {
      return pre + cur.count
    }, 0)
  })
  const stopCarDataLists = computed(() => {
    return scenicStore.stopCarData.dataLists
  })
  const carTotal = computed(() => {
    return dataLists.value.reduce((pre, cur) => {
      return pre + parseInt(cur.count)
    }, 0)
  })

  const carBearData = computed(() => {
    return [{ data: scenicStore.stopCarData.dataList.map((item) => item.value) }]
  })
  const carBearXAxisData = computed(() => {
    return scenicStore.stopCarData.dataList.map((item) => item.name)
  })

  const scenicBearData = computed(() => {
    return [{ data: scenicStore.scenicBearData.dataList.map((item) => item.value) }]
  })
  const scenicBearXAxisData = computed(() => {
    return scenicStore.scenicBearData.dataList.map((item) => item.name)
  })

  const scenicQueueData = computed(() => {
    return [{ data: scenicStore.scenicQueueData.dataList.map((item) => item.value) }]
  })
  const scenicQueueXAxisData = computed(() => {
    return scenicStore.scenicQueueData.dataList.map((item) => item.name)
  })
  let dataLists = ref([])
  watch(
    () => scenicStore.stopCarData.dataLists,
    (val) => {
      console.log(val.length, 'watch 监听')
      if (val.length) {
        dataLists.value = val
      } else {
        dataLists.value = []
      }
    },
    { immediate: true }
  )
  let headList = ref([])
  watch(
    () => scenicStore.secureData.headList,
    (val) => {
      if (val.length) {
        headList.value = scenicStore.secureData.headList
      } else {
        headList.value = []
      }
    },
    { immediate: true }
  )
  watch(
    () => scenicStore.carShipData,
    (val) => {
		return false
      setTimeout(() => {
        if (carOverlays.value.length > 0) {
          for (let i = 0; i < carOverlays.value.length; i++) {
            for (let j = 0; j < val.car.list.length; j++) {
              if (carOverlays.value[i].sim == val.car.list[j].sim) {
                carOverlays.value[i].setPosition({
                  lng: val.car.list[j].lng,
                  lat: val.car.list[j].lat
                })
                continue
              }
            }
          }
        } else {
          val.car.list.map((item, i) => {
            if (item.status == '行驶') {
              addMarker(carIcon, [item.lng, item.lat], [36, 50])
            }
            if (item.status == '离线') {
              addMarker(carOfflineIcon, [item.lng, item.lat], [36, 50])
            }
            if (item.status == '静止') {
              addMarker(carStopIcon, [item.lng, item.lat], [36, 50])
            }
            carOverlays.value[i] = marker.value
          })
        }

        if (shipOverlays.value.length > 0) {
          for (let i = 0; i < shipOverlays.value.length; i++) {
            for (let j = 0; j < val.ship.list.length; j++) {
              if (carOverlays.value[i].sim == val.ship.list[j].sim) {
                carOverlays.value[i].setPosition({
                  lng: val.ship.list[j].lng,
                  lat: val.ship.list[j].lat
                })
                continue
              }
            }
          }
        } else {
          val.ship.list.map((item, i) => {
            if (item.status == '行驶') {
              addMarker(shipIcon, [item.lng, item.lat], [36, 50])
            }
            if (item.status == '离线') {
              addMarker(shipOfflineIcon, [item.lng, item.lat], [36, 50])
            }
            if (item.status == '静止') {
              addMarker(shipStopIcon, [item.lng, item.lat], [36, 50])
            }
            shipOverlays.value[i] = marker.value
          })
        }
      }, 1000)
    },
    { immediate: true }
  )

  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
      latitude.value = data.lat
      longitude.value = data.lng
      carOverlays.value = []
      shipOverlays.value = []
      initMap('car-ship', data.lng, data.lat, 15)
    })
  })
  onUnmounted(() => {
    PubSub.unsubscribe(scenicChange)
  })
</script>
<style scoped lang="scss">
	.h-active{
		background-color: #fff;
		color:#0063ff;
	}
	.coll-box{
		flex:1 !important;
	}
  .box-1 {
    // margin-top: vh(120);
    width: vw(900);
    height: vh(950);
    padding: vw(10);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
    .header {
      display: flex;
      margin-top: vh(10);
      &__left {
        display: flex;
        align-items: center;
		margin-right:vw(10);
		cursor:pointer;
        > img {
          width: vw(74);
          height: auto;
        }
      }
      &__left-item {
        position: relative;
        width: vw(120);
        height: vh(58);
        padding-left: vw(10);
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: url('@/assets/images/ticket-item-bg.png');
        background-size: 100% 100%;
		// margin-left:vw(30);
        .label {
          position: absolute;
          top: vh(-4);
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
		  left:vw(0)
        }
      }
      & > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .label {
          font-weight: 400;
          font-size: vw(16);
          color: #ffffff;
        }
        .value {
          font-weight: bold;
          font-size: vw(28);
          color: #02f9fa;
          text-align: center;
          line-height: vh(60);
        }
        .warning {
          color:#DCBB48;;
        }
        .error {
          color: #ff4400;
        }
      }

      .countup-wrap {
        color: #02f9fa;
        font-size: vw(28);
        font-weight: bold;
      }
    }
    .main {
      width: 100%;
      height: vh(600);
      overflow-x: auto;
      overflow-y: hidden;
	  position:relative;
	  .look-btn{
		  cursor: pointer;
		  position: absolute;
		  right: vw(20);
		  top: 6%;
		  transform: translateY(-50%);
		  padding: vw(20);
		  display: flex;
		  align-items: center;
		  background: #0a4190;
		  border-radius: vw(4);
		  font-size: vw(16);
		  font-weight:700;
		  color: #fff;
		  z-index: 999;
		  img{
			  width:vw(100);
			  // height:;
		  }
	  }
      .scenic-box {
        width: 100%;
        height: 100%;
      }
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        height: vh(10); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      > img {
        width: auto;
        height: 100%;
      }
    }
    .footer {
      .item {
        flex: 1;
        height: vh(140);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
        &:nth-child(1) {
          margin-right: vw(10);
        }
        .bg {
          padding-left: vw(20);
          width: vw(243);
          height: vh(40);
          display: flex;
          align-items: center;
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
          &:nth-child(1) {
            margin-bottom: vh(4);
          }
          .label {
            width: vw(120);
            font-weight: 400;
            font-size: vw(14);
            color: #fff;
          }
          .value {
            font-weight: bold;
            font-size: vw(28);
            color: #fff;
          }
          .success {
            color: #02f9fa;
          }
          .error {
            color: #e21b1b;
          }
        }
      }
      .list {
        margin-top: vh(4);
        height: vh(116);
        overflow: hidden;
      }
      .cell {
        display: flex;
        margin-left: vw(4);
        margin-top: vh(12);
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .tag {
          padding: 0 vw(16);
          font-weight: bold;
          font-size: vw(14);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: vw(2);
        }
        .tag--important {
          @extend .tag;
          background: #feae00;
        }
        .tag--warn {
          @extend .tag;
          background: #d9011b;
        }
        .tag--normal {
          @extend .tag;
          background: #2380fb;
        }
        .content {
          margin-left: vw(4);
          padding: 0 vw(10);
          width: vw(760);
          height: vh(24);
          line-height: vh(24);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
          border-radius: vw(2);
          background: rgba(0, 150, 255, 0.28);
        }
      }
      .more {
        cursor: pointer;
        width: auto;
        height: vh(100);
        margin-top: vh(12);
      }
    }
  }
</style>
<style lang="scss" scoped>
	:deep(.el-dialog__headerbtn .el-dialog__close){
		color:#fff;
		font-size:40px;
		position:relative;
		top:15px;
		right:15px;
	}
	:deep(.el-dialog__header.show-close){
		padding-right:0;
	}
  :deep(.el-dialog) {
    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
    background-size: 100% 100%;
	width:vw(1500);
  }
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
  }

  .sp-ico {
    width: vw(40);
  }
  .item-name {
    width: 90%;
    text-align: center;
  }
  .sp-img {
    width: vw(100);
  }
  .correspondence {
    margin: vw(8);
    width: vw(300);
    height: vh(1070);
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
  }
  .bom-box2{
	  // margin-top:vh(10);
	  min-width:vw(900);
	  height:vh(800);

  }
  .header-title{
  		  font-size:vw(32);
  		  color:#fff;
  		  text-align:center;
  		  font-weight:bold;
  		  margin-bottom:vh(20);

  }
  .bom-box {
	  .table2{
		  width:100%;
		  height:vh(740);
	  }
    .table {
      width: 100%;
      margin-top: vh(5);
      .header {
        height: vh(28);
        font-weight: 400;
        font-size: vw(24);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
        & > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .list {
        overflow-y: auto;
        height: vh(490);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .item {
          height: vh(50);
          font-weight: 400;
          font-size: vw(24);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
            background: linear-gradient(
              90deg,
              rgba(0, 150, 255, 0) 0%,
              rgba(0, 150, 255, 0.22) 100%
            );
          }
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* 保证文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }
        }
      }
    }
    .title {
      span {
        margin-left: vw(30);
        font-weight: 800;
        font-size: vw(15);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }
  }
  .top-box {
    width: 100%;
    height: vh(500);
    .icon-box {
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 50%;
        margin-top: vh(40);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        & > img {
          width: vw(54);
          height: auto;
        }
      }
    }
    .title {
      width: vw(260);
      height: vh(26);
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
      font-size: vw(16);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
      background-size: 100% 100%;
    }
  }
</style>
<style scoped lang="scss">
  .null-box {
    width: vw(360);
    height: vh(300);
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    font-size: vw(20);
    justify-content: center;
  }
  .look-box {
    position: relative;
    .look-btn {
	  cursor: pointer;
      position: absolute;
      right: vw(20);
      top: 50%;
      transform: translateY(-50%);
      padding: vw(12);
      display: flex;
      align-items: center;
      background: #0a4190;
      border-radius: vw(4);
      font-size: vw(14);
      color: #fff;
    }
  }
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
  :deep(.anchorBL) {
    display: none;
  }
  .height70 {
    height: vh(70);
  }
  .legend {
    display: flex;
    align-items: center;
    justify-content: center;

    @mixin icon($column) {
      width: vw(50);
      height: vh(60);
      display: flex;
      flex-direction: $column;
      align-items: center;
      justify-content: center;
    }

    &__wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: vw(8);
      width: vw(170);
    }
    &-item {
      color: #fff;
    }
    &-item:nth-child(1) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(2) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(3) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(4) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(5) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(6) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item-label {
      font-weight: 400;
      font-size: vw(12);
      line-height: vh(14);
    }
    &-item-value {
      font-weight: bold;
      font-size: vw(16);
      line-height: vh(18);
    }
  }
  .container {
    margin: vh(120) 0 0 vw(10);
    .count-box {
      padding: 0 vw(10);
      height: vh(70);
    }
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
    .border {
      position: relative;
      padding: 0 vw(10);
      box-sizing: border-box;
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
	  flex:1;
    }
    .box {
      @extend .bg;
      width: vw(510);
      height: vh(475);
    }
    .box-1 {
      @extend .bg;
      height: vh(475);
    }
    .box-2 {
      @extend .bg;
      height: vh(475);
    }
    .box-3 {
      @extend .bg;
      height: vh(465);
    }
    .box-4 {
      @extend .bg;
      height: vh(465);
    }
    .box-5 {
      @extend .bg;
      height: vh(465);
	  flex:1;
    }
    .car-box {
      width: vw(316);
      height: vh(74);
      display: flex;
      align-items: center;
      .icon {
        position: absolute;
        width: vw(350);
        height: vw(74);
      }
      .car-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:nth-child(2) {
          padding-left: vw(80);
        }
      }
      .label {
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
      }
      .value {
        font-weight: bold;
        font-size: vw(24);
        color: #02f9fa;
        margin-top: vh(6);
        align-items: flex-end;
      }
      .suffix {
        font-size: vw(12);
        color: #02f9fa;
        margin-bottom: vw(4);
      }
    }
    .sum {
      font-weight: bold;
      font-size: vw(18);
      color: #02f9fa;
      display: flex;
      align-items: center;
    }
    .car-ship {
      // width: vw(660);
	  width: 100%;
      height: vh(250);
    }
    .full {
      cursor: pointer;
      position: absolute;
      right: vw(20);
      bottom: vw(20);
      width: vw(50);
      z-index: 999;
    }
    .count {
      margin: vw(20) vw(20) 0 vw(20);
      height: vh(24);
      font-weight: bold;
      font-size: vw(14);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-left: vw(4) solid #37d8fc;
      border-right: vw(4) solid #37d8fc;
      background: rgba(0, 150, 255, 0.19);
    }
    .cell {
      margin-left: vw(10);
      display: flex;
      align-items: center;
      .bg {
        display: flex;
        align-items: center;
        height: vh(20);
        padding-right: vw(10);
        background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
      }
      .icon {
        width: vw(26);
        height: vw(28);
        margin-right: vw(4);
      }
      .text {
        font-weight: 400;
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.9);
      }
      .progress {
        width: vw(110);
        margin-left: vw(4);
      }
      .man {
        font-weight: bold;
        font-size: vw(14);
        color: #02f9fa;
        margin-left: vw(10);
      }
      .woman {
        font-weight: bold;
        font-size: vw(14);
        color: #f15a25;
        margin-left: vw(10);
      }
    }
    .ticket-box {
      margin-top: vh(20);
      width: 100%;
      height: vh(106);
      background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
      .title {
        width: vw(253);
        height: vh(28);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/title-5.png');
        background-size: 100% 100%;
        & > span {
          padding-left: vw(22);
          font-weight: bold;
          font-size: vw(15);
          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
          color: transparent; /* 兼容其他浏览器 */
        }
      }
    }
    .ticket-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > img {
        width: vw(74);
        height: vh(74);
      }
      & > div {
        flex: 1;
        height: vh(58);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/ticket-item-bg.png');
        background-size: 100% 100%;
      }
      .label {
        padding-left: vw(10);
        font-weight: 400;
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.9);
      }
      .countup-wrap {
        color: #02f9fa;
        font-size: vw(28);
        font-weight: bold;
      }
    }
  }
</style>
