ghjg-digital-twin/src/views/jtaq/Index.vue

<template>
  <div id="jtaq">
    <div class="panel-left" :class="{ 'is-hide': aside_hide }">
      <div class="pl-b1">
        <span class="title1-left">船舶信息</span>
        <div class="plb1-part1">
          <img :src="require('@/assets/imgs/page_jtaq/icon-cbxx.png')" alt="">
          <div>
            <span>当前在港船舶总数</span>
            <div>
              <span>{{ data_cbxx.total }}</span>
              <span>艘次</span>
            </div>
          </div>
        </div>
        <ul class="plb1-part2">
          <li v-for="item in data_cbxx.cata" :class="{ 'clickable': item.name === '重点追踪船舶' }" @click="showBoatList(item)">
            <span>{{ item.name }}</span>
            <span>{{ item.value }}</span>
            <span>艘</span>
            <div>
              <span>{{ cbxxPercent(item.value) }}</span>
              <span>%</span>
            </div>
            <span>占比</span>
          </li>
        </ul>
      </div>
      <KeyBoatList :list-data="keyBoatList.value" :list-title="'重点追踪船舶列表'" v-if="boatListShow"
        @closeBoatList="boatListShow = false" />
      <div class="pl-b2">
        <span class="title2-left">船舶航行预测</span>
        <div class="plb2-row1">
          <span>上海市河港</span><span>{{ data_cbxx.riverCount }}</span><span>艘</span>
        </div>
        <ul class="plb2-main">
          <li v-for="item in listData_cbhxyc.value">
            <span>{{ item.dist }}</span>
            <span>{{ item.value }}</span>
            <span>艘</span>
          </li>
        </ul>
      </div>
      <div class="pl-b3">
        <span class="title2-left">船舶功能分类</span>
        <div id="chart-cbgn"></div>
      </div>
      <div class="pl-b4">
        <span class="title2-left">船舶航行状态</span>
        <div v-for="item in data_cbhxzt.value" class="plb4-item">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>艘</span>
              <span>{{ hxztPercent(item.value) }}</span>
              <span>%</span>
              <span>占比</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-right" :class="{ 'is-hide': aside_hide }">
      <div class="pr-b1 pr">
        <span class="title1-right">运行态势</span>
        <span class="title2-right">安全通航信息</span>
        <el-carousel trigger="click" height="23vh" class="prb1-main" indicator-position="outside" arrow="never"
          :autoplay="!aqthPopupShow">
          <el-carousel-item v-for="page in listData_aqthxx_len" :key="page">
            <div v-for="item, index in listData_aqthxx.value.slice((page - 1) * 2, (page - 1) * 2 + 2)" class="prb1-item"
              @click="showAqthPopup(index + (page - 1) * 2)">
              <span class="title3"
                :class="{ 'highlight': item.abstract[1] === aqthPopupData.value.code && aqthPopupShow }">{{
                  item.title }}</span>
              <span v-for="item2 in item.abstract"> {{ item2 }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="popup-aqth" v-if="aqthPopupShow">
          <i class="btn-close" @click="handleCloseAqthPopup"></i>
          <div class="title-dialog">{{ aqthPopupData.value.title }}</div>
          <p>{{ aqthPopupData.value.des }}</p>
        </div>
      </div>

      <div class="pr-b2 pr">
        <span class="title2-right">通航流量监测</span>
        <span class="title3">分时段流量统计</span>
        <div id="chart_fsdll"></div>
        <span class="title3">分航向流量统计</span>
        <div class="prb2-item" v-for="item in data_fhxll.value">
          <div>
            <img :src="require('@/assets/imgs/page_jtaq/icon-zhandian.png')" alt="">
            <span>{{ item.from }}</span>
            <i></i>
            <span>{{ item.to }}</span>
          </div>
          <div>
            <span>分航向流量统计</span>
            <span>{{ item.value }}</span>
            <span>艘次</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JtaqHome',
}
</script>

<script setup>
import { onMounted, reactive, computed, ref } from 'vue';
import { setCbgn, setFsdll } from '@/echarts/options'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import 'element-plus/es/components/carousel/style/css'
import 'element-plus/es/components/carousel-item/style/css'
import { GetThlljc, GetCbxx, GetThllByHour, GetKeyBoats } from '../../apis/jtaq'
import KeyBoatList from './cpns/KeyBoatList.vue'
import { asideShow } from '@/store/index'

const aside_hide = asideShow().isHide

onMounted(() => {
  getData()
  setCbgn(document.getElementById('chart-cbgn'), chartData_cbgnfl.value)
  setFsdll(document.getElementById('chart_fsdll'), chartData_fsdll.value)
})

function getData() {
  getData_thlljc()
  getData_cbxx()
}

function getData_cbxx() {
  GetCbxx().then(res => {
    listData_cbhxyc.value.forEach(i => {
      i.value = res.data.district[i.dist]
    })
    data_cbxx.total = res.data.inport
    data_cbxx.riverCount = res.data.inRiverShipTotal
    data_cbxx.cata.forEach(i => {
      i.value = res.data[i.fieldName]
    })
    data_cbhxzt.value.forEach(i => {
      i.value = res.data[i.fieldName]
    })
    let boatTypeArr = []
    for (let key in res.data.boatType) {
      boatTypeArr.push({ name: key, value: res.data.boatType[key] })
    }
    boatTypeArr = boatTypeArr.sort((a, b) => b.value - a.value)
    chartData_cbgnfl.value = [
      ...boatTypeArr.slice(0, 4),
      { name: '其它', value: boatTypeArr.slice(4).reduce((sum, i) => sum + i.value, 0) }
    ]
    setCbgn(document.getElementById('chart-cbgn'), chartData_cbgnfl.value)
  })
}

const data_cbxx = reactive({
  total: 0,
  riverCount: 0,
  cata: [
    { name: '重点追踪船舶', value: 0, fieldName: 'keyBoat' },
    { name: '载运危货船舶', value: 0, fieldName: 'dangerBoat' }
  ]
})

function cbxxPercent(value) {
  if (!value || value === 0) {
    return '-'
  }
  return (value / data_cbxx.total * 100).toFixed(2)
}

const listData_cbhxyc = reactive({
  value: [
    { dist: '奉贤', value: 0 },
    { dist: '金山', value: 0 },
    { dist: '松江', value: 0 },
    { dist: '嘉定', value: 0 },
    { dist: '闵行', value: 0 },
    { dist: '青浦', value: 0 },
    { dist: '宝山', value: 0 },
    { dist: '崇明', value: 0 },
    { dist: '浦东', value: 0 }
  ]
})

const data_cbhxzt = reactive({
  value: [
    { title: '航行中船舶', value: 0, iconUrl: require('@/assets/imgs/page_jtaq/icon-cb-hxz.png'), fieldName: 'runningBoatCount' },
    { title: '靠泊中船舶', value: 0, iconUrl: require('@/assets/imgs/page_jtaq/icon-cb-kbz.png'), fieldName: 'stopBoatCount' }
  ]
})

function hxztPercent(value) {
  const sum = data_cbhxzt.value.reduce((total, i) => i.value + total, 0)
  if (sum === 0 || !value) {
    return '-'
  }
  return Math.round(value / sum * 100)
}

const chartData_cbgnfl = reactive({
  value: [
    { name: '--', value: 0 },
    { name: '--', value: 0 },
    { name: '--', value: 0 },
    { name: '--', value: 0 },
    { name: '--', value: 0 }
  ]
})

const listData_aqthxx = reactive({
  value: [
    {
      title: '轮舱口盖吊装作业',
      abstract: [
        '2024年03月12日-2024年03月16日，06：00-24：00时',
        '沪航通〔2024〕0168号'
      ],
      des: '作业时间：2024年3月12日06：00时。\n'+
          '作业地点：秦航工56起重船进场，起重船定位于长兴0号线新码头2泊位。\n'+
          '作业方式：先抛船艏锚，后抛船艉锚，再将1根缆带在码头上。\n'+
          '注意事项：1、作业船舶应在显明易见处悬挂作业信号，并在锚缆入水处设浮标并显示标志，不作业时松缆入江底；\n' +
          '2、作业船应加强值班、了望和高频守听；\n' +
          '3、航行船舶应距最远锚位50米外缓速通过；\n' +
          '4、如遇实际风力大于7级或视程小于1000米停止作业。'
    },
    {
      title: '维护性疏浚作业',
      abstract: [
        '2024年3月11日至2024年12月31日，日夜作业',
        '沪航通〔2024〕0165号'
      ],
      des: '作业时间：2024年3月11日至2024年12月31日，日夜作业。\n' +
              '作业地点：1）外四期码头长1427*50、港池186*150及港池通道长105*243.5；\n' +
                      '2）外五外六码头长2058*50、内支线190*40、港池通道长105*120及港池300*92；\n'+
                      '3）外六海通码头前沿，长580米，宽50米；码头港池，长232米，宽40米；码头通道，长100米，宽60米范围内区域；\n' +
              '作业方式：挖泥船采用分层分条开挖，由码头前沿往港池方向逐条开挖，挖泥船移动方向向左至右然后再由右至左循环作业。疏浚泥土由运泥船运送到指定抛泥区抛送。\n' +
              '注意事项：1.作业船按规定悬挂号灯号型，保持AIS正常开启；\n'+
                      '2.作业船加强高频值守和动态通报，保持正规瞭望；\n'+
                      '3.船舶航经作业水域时，应保持安全间距，注意避让；\n'+
                      '4.遵守水上交通管控特别要求，服从现场交通组织；\n'+
                      '5.风力大于7级或能见度小于1000米时应暂停施工。'
    },
    {
      title: '工程动态监测作业',
      abstract: [
        '动态监测作业',
        '沪航通〔2024〕0151号'
      ],
      des: '作业时间：2024年03月15日至2024年12月31日，每天05：00-20：00时。\n' +
              '作业地点：北缘护底工程区域，南侧至北缘护底工程堤轴线以南300m，北侧至北缘护底工程堤轴线以北500m。\n' +
              '作业方式：由上海河口海岸科学研究中心负责实施固定断面监测和常规地形监测，测线垂直护滩堤轴线方向布设。\n' +
              '注意事项：1、作业船舶应在显明易见处悬挂作业信号，并在锚缆入水处设浮标并显示标志，不作业时松缆入江底；\n' +
                      '2、作业船应加强值班、了望和高频守听；\n' +
                      '3、航行船舶应距最远锚位50米外缓速通过；\n' +
                      '4、如遇实际风力大于7级或视程小于1000米停止作业。'
    },
    {
      title: '大件吊装作业',
      abstract: [
        '2024年3月13日至2024年3月21日，白天作业',
        '沪航通[2024]0166号'
      ],
      des: '作业时间：2024年3月13日至2024年3月21日，白天作业。\n'+
              '作业地点：军工路码头前沿水域范围内。\n'+
              '作业方式：起重船“向阳八号”顺靠军工路码头货轮“KANG SHUN UI HUANG（康顺辉煌）”轮外档进行码头装卸作业，将货物从码头车辆吊至货轮“KANG SHUN HUI HUANG（康顺辉煌）”；\n'+
                      '起重船“向阳八号”顺靠军工路码头货轮“NAVI JENNY（幸运之旅）”轮外档进行码头装卸作业，将货物从码头车辆吊至货轮“NAVI JENNY（幸运之旅）”；\n'+
                      '起重船“向阳八号”顺靠军工路码头货轮“ASIAN INFINITY（亚洲无限）”轮外档进行码头装卸作业，将货物从码头车辆吊至货轮“ASIAN INFINITY（亚洲无限）”。\n'+
                      '作业期间“向阳八号”与外轮前后系缆定位，无需抛锚。作业完毕，“向阳八号”立即撤离。\n'+
              '注意事项：1、作业船舶应在显明易见处悬挂作业信号；\n'+
              '2、作业船舶应指派专人加强值班、了望和VHF06频道守听，随时采取安全措施和保持通信联络；\n'+
              '3、过往船舶从施工水域安全距离外缓速驶过；\n'+
              '4、如遇6级以上大风或视程小于500米，作业停止；\n'+
              '5、作业现场听从巡逻艇的交通指挥；\n'+
              '6、吊装作业时，无关船舶不得进入作业船舶艏艉各长20米、外舷宽10米范围内水域航行、停泊、作业。'
    },
  ]
})

const listData_aqthxx_len = computed(() => {
  return Math.ceil(listData_aqthxx.value.length / 2)
})

const aqthPopupShow = ref(false)
const aqthPopupData = reactive({ value: {} })

function showAqthPopup(index) {
  aqthPopupShow.value = true
  aqthPopupData.value = { ...listData_aqthxx.value[index], code: listData_aqthxx.value[index].abstract[1] }
}

function handleCloseAqthPopup() {
  aqthPopupShow.value = false
}

function getData_thlljc() {
  GetThlljc().then(res => {
    chartData_fsdll.value = res.data.boatCountList
    let listTemp = JSON.parse(JSON.stringify(res.data.boatCountList))
    listTemp.forEach(i => {
      i.GPSTIME = i.GPSTIME.slice(-2)
    })
    let chartFsdll = setFsdll(document.getElementById('chart_fsdll'), listTemp)
    let lastIndex = res.data.boatCountList.length - 1
    chartFsdll.dispatchAction({
      type: 'select',
      seriesIndex: 0,
      dataIndex: lastIndex,
    })
    getData_fhxll(res.data.boatCountList[lastIndex].GPSTIME)
    chartFsdll.getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY]
      if (chartFsdll.containPixel('grid', pointInPixel)) {
        let dataIndex = chartFsdll.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
        chartFsdll.dispatchAction({
          type: 'select',
          seriesIndex: 0,
          dataIndex: dataIndex,
        })
        getData_fhxll(chartData_fsdll.value[dataIndex].GPSTIME)
      }
    })
  })
}

function getData_fhxll(time) {
  GetThllByHour(time + ':00:00').then(res => {
    data_fhxll.value.forEach(i => {
      i.value = res.data[i.fieldName]
    })
  })
}

const chartData_fsdll = reactive({
  value: [
    { GPSTIME: '00', NUM: 0 },
    { GPSTIME: '06', NUM: 0 },
    { GPSTIME: '12', NUM: 0 },
    { GPSTIME: '18', NUM: 0 }
  ]
})

const data_fhxll = reactive({
  value: [
    { from: '黄浦江上游', to: '黄浦江下游', value: 0, fieldName: 'down' },
    { from: '黄浦江下游', to: '黄浦江上游', value: 0, fieldName: 'up' },
  ]
})

const boatListShow = ref(false)

const keyBoatList = reactive({ value: [] })

function showBoatList(item) {
  // console.log(item)
  if (item.fieldName === "keyBoat") {
    if (keyBoatList.value.length !== 0) {
      boatListShow.value = true
      return
    }
    GetKeyBoats().then(res => {
      keyBoatList.value = res.data.Rows || []
      boatListShow.value = true
    })
  }
}

</script>

<style lang="scss" scoped>
#jtaq {

  .panel-left,
  .panel-right {
    box-sizing: border-box;
    position: absolute;
    top: 105px;
    width: 380px;
    height: calc(100vh - 105px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s ease;
  }

  .panel-left {
    left: 0;
    padding: 0 30px 30px;

    &.is-hide {
      left: -380px;
    }
  }

  .panel-right {
    right: 0;
    padding: 0 30px 30px;

    &.is-hide {
      right: -380px;
    }

    .pr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .pl-b1 {
    .plb1-part1 {
      display: flex;
      align-items: center;
      margin: 0 0 15px 10px;

      &>img {
        width: 100px;
        height: 71px;
      }

      &>div {
        display: flex;
        flex-direction: column;

        &>span {
          font-size: 16px;
          color: #FFFFFF;
        }

        &>div {
          margin-top: 3px;

          span:nth-child(1) {
            width: 57px;
            height: 21px;
            font-size: 28px;
            font-family: BarlowBold;
            color: transparent;
            background: linear-gradient(180deg, rgba(224, 244, 255, 0.9) 0%, rgba(89, 102, 128, 0.9) 100%);
            -webkit-background-clip: text;
            letter-spacing: 2px;
          }

          span:nth-child(2) {
            margin-left: 6px;
            font-size: 13px;
            color: rgba($color: #fff, $alpha: 0.6);
          }
        }
      }
    }

    .plb1-part2 {
      margin-left: 10px;

      li {
        &.clickable {
          cursor: pointer;
        }

        display: flex;
        align-items: flex-end;
        margin-bottom: 20px;

        &>span:nth-child(1) {
          font-size: 16px;
          color: #eee;
          font-weight: bold;
        }

        &>span:nth-child(2),
        &>div>span:nth-child(1) {
          display: inline-block;
          font-size: 22px;
          font-family: BarlowBold;
          color: #00EAFF;
          line-height: 22px;
        }

        &>span:nth-child(2) {
          width: 50px;
          margin: 0 5px;
          text-align: center;
        }

        &>span:nth-child(3),
        &>span:nth-child(5) {
          font-size: 15px;
          color: #eee;
        }

        &>div {
          display: flex;
          align-items: flex-end;
          width: 60px;
          margin-left: 15px;

          &>span:nth-child(2) {
            font-size: 16px;
            font-family: BarlowBold;
            color: #00EAFF;
            line-height: 14px;
          }
        }

      }
    }
  }

  .boat-dock-list {
    left: 360px;
    width: 350px;
    height: 600px;
  }

  .pl-b2 {
    .plb2-row1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px 0 10px;

      &>span:not(:nth-child(2)) {
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
        color: transparent;
        text-shadow: 0px 0px 5px rgba($color: #9EC7FF, $alpha: 0.3);
        background: linear-gradient(0deg, #6FC2FF 0%, #CCDAE6 35%, #FFFFFF 60%);
        -webkit-background-clip: text;
        padding-right: 10px;
      }

      span:nth-child(2) {
        flex: 1;
        padding-right: 10px;
        text-align: right;
        font-size: 20px;
        font-weight: bold;
        color: transparent;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(175, 231, 255, 0.8) 80%, rgba(0, 179, 255, 0.8) 100%);
        -webkit-background-clip: text;
      }
    }

    .plb2-main {
      width: 90%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      &>li {
        width: 91px;
        height: 25px;
        margin: 15px 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background: url('@/assets/imgs/page_jtaq/bg-cbyc.png') no-repeat;
        background-size: 100% 100%;

        span {
          margin-bottom: 8px;
          font-size: 16px;
          font-weight: 600;
          color: transparent;
          background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(175, 231, 255, 0.8) 80%, rgba(0, 179, 255, 0.8) 100%);
          text-shadow: 0 6px 0 rgba(175, 231, 255, 0.2);
          -webkit-background-clip: text;
          line-height: 14px;
        }

        span:nth-child(2) {
          margin: 0 4px 7px;
          font-family: BarlowBold;
          font-size: 24px;
          line-height: 24px;
        }
      }
    }
  }

  .pl-b3 {
    #chart-cbgn {
      height: 18vh;
      width: 90%;
    }
  }

  .pl-b4 {
    .plb4-item {
      display: flex;
      align-items: center;
      margin: 10px 0;

      &>img {
        width: 85px;
        height: 85px;
      }

      &>div {
        box-sizing: border-box;
        width: 200px;
        height: 66px;
        padding-left: 15px;
        transform: translateX(-10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: url('@/assets/imgs/page_jtaq/bg-hxzt.png') no-repeat;
        background-size: 100% 100%;

        &>span {
          font-size: 16px;
          font-weight: bold;
          font-style: italic;
          color: transparent;
          text-shadow: 0px 0px 5px rgba($color: #9EC7FF, $alpha: 0.3);
          background: linear-gradient(0deg, #6FC2FF 0%, #CCDAE6 35%, #FFFFFF 60%);
          -webkit-background-clip: text;
        }

        &>div {
          display: flex;
          align-items: flex-end;
          margin-top: 5px;

          span:nth-child(1),
          span:nth-child(3),
          span:nth-child(4) {
            padding-right: 3px;
            font-size: 22px;
            line-height: 22px;
            font-family: YSBTH;
            font-weight: 400;
            font-style: italic;
            color: transparent;
            text-shadow: 0px 0px 5px rgba($color: #9EC7FF, $alpha: 0.3);
            background: linear-gradient(-1deg, #9EC7FF 0%, #DCEBFF 40%, #FFFFFF 100%);
            -webkit-background-clip: text;
          }

          span:nth-child(2),
          span:nth-child(5) {
            margin: 0 5px;
            font-size: 16px;
            line-height: 22px;
            color: #FFFFFF;
          }

          span:nth-child(4) {
            font-size: 16px;
            line-height: 20px;
          }
        }
      }
    }
  }

  .pr-b1 {
    position: relative;

    .prb1-main {
      width: 82%;

      .prb1-item {
        margin: 15px 0;
        cursor: pointer;

        &>span:not(:first-child) {
          position: relative;
          display: block;
          padding-left: 26px;
          height: 21px;
          margin: 10px 0;
          font-size: 16px;
          font-family: BarlowBold;
          color: rgba($color: #fff, $alpha: 0.8);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 21px;
            height: 21px;
            background: url('@/assets/imgs/page_jtaq/icon-aqth.png') no-repeat;
            background-size: 100% 100%;
          }
        }

        .highlight {
          color: #FFE874;
        }
      }

      :deep(.el-carousel__indicator--horizontal) {
        margin: 0 4px;
      }

      :deep(.el-carousel__indicator button) {
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }
    }

    .popup-aqth {
      position: absolute;
      box-sizing: border-box;
      padding: 20px 10px 20px 20px;
      top: 5vh;
      left: -320px;
      width: 320px;
      height: 364px;
      background: url('@/assets/imgs/page_jtaq/bg-popup.png') no-repeat;
      background-size: 100% 100%;

      .btn-close {
        position: absolute;
        right: 18px;
        top: 15px;
        display: block;
        width: 12px;
        height: 12px;
        padding: 4px;
        background: url('@/assets/imgs/common/btn-close.png') no-repeat;
        background-size: 12px 12px;
        background-position: center;
        cursor: pointer;
      }

      p:nth-child(3) {
        height: calc(100% - 34px);
        padding-right: 10px;
        margin-top: 10px;
        overflow-y: auto;
        font-size: 16px;
        color: #eee;
        line-height: 22px;
        white-space: pre-wrap;
      }
    }
  }

  .pr-b2 {
    #chart_fsdll {
      width: 92%;
      height: 16vh;
      margin: 5px 0 10px;
    }

    .title2-right {
      margin-bottom: 25px;
    }

    .prb2-item {
      margin: 16px 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      &>div {
        display: flex;
      }

      &>div:first-child {
        align-items: center;
        width: fit-content;
        height: 32px;
        margin-bottom: 20px;
        padding-right: 14px;
        background: url('@/assets/imgs/page_jtaq/bg-fhx-1.png');
        background-size: 100% 100%;

        &>img {
          width: 47px;
          height: 51px;
          margin-right: 5px;
        }

        &>i {
          display: inline-block;
          width: 51px;
          height: 19px;
          margin: 0 6px 0 10px;
          background: url('@/assets/imgs/page_jtaq/icon-arrow.png') repeat-x;
          background-size: 17px 19px;
        }

        &>span {
          font-size: 16px;
          font-weight: bold;
          font-style: italic;
          color: #FFFFFF;
        }
      }

      &>div:last-child {
        box-sizing: border-box;
        justify-content: center;
        align-items: flex-end;
        width: 290px;
        height: 34px;
        padding-bottom: 13px;
        background: url('@/assets/imgs/page_jtaq/bg-fhx-2.png');
        background-size: 100% 100%;

        span:nth-child(1),
        span:nth-child(3) {
          font-size: 16px;
          color: #FFFFFF;
        }

        span:nth-child(2) {
          margin: 0 13px;
          font-size: 32px;
          font-family: BarlowBold;
          color: transparent;
          line-height: 32px;
          background: linear-gradient(0deg, rgba(148, 239, 255, 1) 0%, rgba(85, 226, 255, 1) 100%);
          -webkit-background-clip: text;
        }
      }
    }
  }
}
</style>