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

<template>
  <div id="hdsj">
    <div class="panel-left" :class="{'is-hide': aside_hide}">
      <div class="pl-b1">
        <span class="title1-left">水深管理</span>
        <div v-for="item in data_ssgl.value" class="plb1-item">
          <img :src="item.iconUrl" alt="">
          <div>
            <span @click="handleToggleSsgl(item)" :class="{'highlight': item.isHighlight}">{{ item.title }}</span>
            <div>
              <span :class="{'is-warning': item.value>0}">{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <water-depth-list v-if="listShow_whss" @close="handleCloseWhss" @pick="item => handlePickWhss(item)"/>
      <div class="pl-b2">
        <span class="title1-left">工程管理</span>
        <span class="title2-left">工程统计</span>
        <ul class="gctj-main">
          <li
            v-for="item in data_gctj.value"
            class="gctj-item"
            :class="{'highlight': currentYear===item.YEAR}"
            @click="handleChangeYear(item)"
          >
            <div>{{ item.YEAR }}年</div>
            <div>
              <span>{{ item.TOTAL }}</span>
              <span>个</span>
            </div>
          </li>
        </ul>
        <span class="title2-left">工程信息</span>
        <ul v-if="listData_gcxx.value.length>0" class="gcxx-main" :class="{'is-short-list': listData_gcxx.value.length<3}">
          <li class="gcxx-item" v-for="item,index in listData_gcxx.value" @click="handleChangeProject(item)">
            <img :src="require('@/assets/imgs/page_hdsj/icon-gcxx.png')" alt="">
            <div>
              <div>
                <div :class="{'highlight': item.id===currentProject.id}"><span :title="item.prjName">{{ item.prjName }}</span></div>
                <span
                  :class="{'status-wks': item.status==='未进行','status-jxz': item.status==='进行中','status-ywc': item.status==='已完成'}"
                >{{ item.status }}</span>
                <!-- <span class="status-ywc">已完成</span> -->
              </div>
              <div>
                <span>总方量</span><span>{{ (item.quantities/10000).toFixed(2) }}</span><span>万方</span>
                <span>总投资</span><span>{{ Math.floor(item.investment) }}</span><span>万元</span>
              </div>
              <div v-if="item.projectEndTime||item.projectStartTime">
                <span>{{ item.projectStartTime }}</span><span>至</span><span>{{ item.projectEndTime }}</span>
              </div>
              <div v-else></div>
            </div>
          </li>
        </ul>
        <div v-else class="no-data"><span>无数据</span></div>
      </div>
    </div>
    <div class="panel-right" v-if="showRightDetail" :class="{'is-hide': aside_hide}">
      <div class="pr-b1 pr">
        <span class="title1-right">疏浚监控</span>
        <span class="title2-right">工程名称</span>
        <span class="pro-name">{{ currentProject.name }}</span>
        <span class="title2-right">工程概况</span>
        <div class="part1-item" v-for="item in data_gcgk.sta">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="part2">
          <div @click="toggleShujunState('before')" :class="{'highlight': shujunState==='before'}">
            <span class="text-emp1">疏浚前</span><span>地形</span>
          </div>
          <div @click="toggleShujunState('after')" :class="{'highlight': shujunState==='after'}">
            <span class="text-emp2">疏浚后</span><span>地形</span>
          </div>
        </div>
      </div>
      <div class="pr-b2 pr">
        <span class="title2-right">分时统计</span>
        <div id="chart_fstj" v-show="!fstjListShow"></div>
        <div class="fstj-list table-carousel" v-show="fstjListShow">
          <div class="fl-btns">
            <i class="flb-play" @click="handlePlaySjByDay"></i>
            <i class="flb-back" @click="handleCloseList"></i>
          </div>
          <div class="head coloumn">
            <span>挖泥船</span><span>运泥船</span><span>运量</span><span>时间</span>
          </div>
          <el-carousel
            v-if="fstjListLen>0"
            trigger="click"
            indicator-position="outside"
            arrow="never"
            :autoplay="false"
          >
            <el-carousel-item v-for="page in fstjListLen" :key="page">
              <ul class="tc-list">
                <li
                  v-for="item,index in fstjListData.value.slice((page-1)*4, (page-1)*4+4)"
                  class="coloumn"
                  :class="{'highlight': fstjCurrentId===item.id}"
                  @click="handlePickFstjCurrent(item)"
                >
                  <span>{{ item.wnName }}</span>
                  <span>{{ item.ynName }}</span>
                  <span>{{ item.tonnage }}</span>
                  <span>{{ item.workTime }}</span>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
          <div v-else class="no-data">
            <span>无数据</span>
          </div>
        </div>
      </div>
      <div class="pr-b3 pr">
        <span class="title2-right">越界预警</span>
        <ul class="prb3-main" >
          <li v-for="item in data_yuejie.value" class="prb3-item2">
            <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">
            <span>{{ item.shipName }}</span>
            <span>{{ item.times? useDateFormat(item.times, 'MM-DD  HH:mm').value: '-' }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="panel-right pr-no-data">无数据</div>
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, ref, computed, onBeforeUnmount, watch } from 'vue';
  import { setSjjk } 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 { GetBoatNum, GetFstj, GetFstjByDay, GetYjWarning, GetGctj, GetGcxx } from '@/apis/hdsj'
  import { useDateFormat } from '@vueuse/core';
  import {
    ueCallInitShujun, ueCallClickShujun, ueCallRunShujun, ueCallBeforeShujun, ueCallClearShujun,
    ueCallAfterShujun, ueCallBackShujun, ueCallInitWaterShujun, ueCallStartYjyj, ueCallCloseYjyj,
    ueCallOpenWater, ueCallCloseWater, ueCallOpenMaintain, ueCallCloseMaintain
  } from '@/utils/UIInteractions'
  import bus from '@/utils/bus';
  import WaterDepthList from './cpns/WaterDepthList.vue'
  import { asideShow } from '@/store/index'

  const aside_hide = asideShow().isHide

  onMounted(() => {
    // setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
    // getGctj()
    bus.on('changeYuJiNum',(val)=> {
      data_ssgl.value[1].value = val
    })
  })
  
  const data_ssgl = reactive({value: [
    { title: '维护水深', isHighlight: false, value:  '-', unit: '米', iconUrl: require('@/assets/imgs/page_hdsj/logo-whss.png') },
    { title: '淤积预警', isHighlight: false, value:  0, unit: '处', iconUrl: require('@/assets/imgs/page_hdsj/logo-yjyj.png') },
  ]})

  const listShow_whss = ref(false)

  function handlePickWhss(item) {
    data_ssgl.value[0].value = Math.abs(+item.height)
    ueCallCloseMaintain()
    setTimeout(() => {
      ueCallOpenMaintain(item.id)
    }, 500);
  }

  function handleCloseWhss() {
    data_ssgl.value[0].isHighlight = false
    data_ssgl.value[0].value = '-'
    listShow_whss.value = false
    ueCallCloseMaintain()
  }

  function handleToggleSsgl(item) {
    if(item.title==='淤积预警'&&item.value>0) {
      if(data_ssgl.value[1].isHighlight === false) {
        ueCallCloseWater()
        ueCallStartYjyj()
      } else {
        ueCallOpenWater()
        ueCallCloseYjyj()
      }
      data_ssgl.value[1].isHighlight = !data_ssgl.value[1].isHighlight
    }
    if(item.title==='维护水深') {
      if(listShow_whss.value) {
        handleCloseWhss()
      } else {
        data_ssgl.value[0].isHighlight = true
        listShow_whss.value = true
      }
    }
  }

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

  function handleChangeProject(item) {
    currentProject.id = item.id
    currentProject.name = item.prjName
  }

  const currentProject = reactive({ id: '', name: '' })
  const showRightDetail = ref(true)
  watch(()=>currentProject.id, (val)=> {
    if(val===null||+currentYear.value>2022) {
      showRightDetail.value = false
    } else {
      fstjListShow.value = false
      getFstj(val)
      getYjWarning(val)
      getBoatNum(val)
      showRightDetail.value = true
    }
  })

  const currentYear = ref('2022')
  watch(currentYear, (val)=> {
    getGcxx(val)
  },{immediate: true})

  function handleChangeYear(item) {
    currentYear.value = item.YEAR
  }
  
  const data_gctj = reactive({value: [
    { YEAR: '2022', TOTAL: 3 },
    { YEAR: '2023', TOTAL: 2 },
    { YEAR: '2024', TOTAL: 0 },
  ]})

  // function getGctj() {
  //   GetGctj().then(res => {
  //     data_gctj.value = res.data.Rows
  //     currentYear.value = res.data.Rows[0].YEAR
  //   })
  // }

  function getGcxx(year) {
    GetGcxx(year).then(res => {
      if(res.data?.Rows.length>0) {
        listData_gcxx.value = res.data.Rows
        listData_gcxx.value.forEach(i => {
          if(i.projectStartTime) {
            if(i.projectEndTime) {
              i.status = '已完成'
            } else {
              i.status = '进行中'
            }
          } else {
            i.status = '未进行'
          }
        })
        currentProject.id = res.data.Rows[0].id
        currentProject.name = res.data.Rows[0].prjName
      } else {
        listData_gcxx.value = []
        currentProject.id = null
        currentProject.name = null
      }
    })
  }
  
  const data_gcgk = reactive({
    sta: [
      { title: '施工范围长度', value: '-', unit: 'km', iconUrl: require('@/assets/imgs/page_hdsj/logo-hdzc.png') },
      { title: '疏浚船舶', value: '-', unit: '艘', iconUrl: require('@/assets/imgs/page_hdsj/logo-sjcb.png') },
    ]
  })

  function getBoatNum(id) {
    GetBoatNum(id).then(res => {
      let areaLength
      switch(id) {
        case '1648916350938120192':
          areaLength = 1.469
          break
        case '1648912989748723712':
          areaLength = 2.781
          break
        case '1648914259771392000':
          areaLength = 1.364
          break
      }
      data_gcgk.sta[0].value = areaLength || '-'
      data_gcgk.sta[1].value = res.data.data || '-'
    })
  }

  const shujunState = ref(null)

  watch(shujunState, (val, oldVal) => {
    if(val&&!oldVal) {
      bus.emit('toggleUnderWaterLegend',{from: 'show_hdsj', state: true})
    }else if(!val&&oldVal){
      bus.emit('toggleUnderWaterLegend',{from: 'show_hdsj', state: false})
    }
  })

  function toggleShujunState(type) {
    if(type===shujunState.value) {
      shujunState.value = null
      ueCallInitWaterShujun()
    }else {
      if(type==='before') {
        ueCallBeforeShujun()
      } else if(type==='after') {
        ueCallAfterShujun()
      }
      shujunState.value = type
    }
  }
  
  const chartData_fstj = reactive({
    default: [
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
      { TIME: '-/-', TOTAL: 0, SUM: 0 },
    ],
    value: []
  })
  
  function getFstj(id) {
    GetFstj(id).then(res => {
      if(!res.data) {
        setSjjk(document.getElementById('chart_fstj'), chartData_fstj.default)
        return
      }
      chartData_fstj.value = res.data.Rows.slice(-6)
      let chartFstj = setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
      chartFstj.on('click', (params)=> {
        fstjListShow.value = true
        GetFstjByDay(params.name, id).then(res => {
          fstjListData.value = res.data.Rows
        })
      })
    })
  }
  
  const fstjListShow = ref(false)
  const fstjListData = reactive({value: []})

  const fstjListLen = computed(() => {
    return Math.ceil(fstjListData.value.length/4)
  })

  const fstjCurrentId = ref('')

  const shujunRunTime = ref(1)

  function handlePickFstjCurrent(item) {
    ueCallClearShujun()
    setTimeout(() => {
      fstjCurrentId.value = item.id
      shujunRunTime.value = 1
      ueCallInitShujun()
    }, 1000);
  }

  function handlePlaySjByDay() {
    ueCallClearShujun()
    setTimeout(() => {
      fstjCurrentId.value = ''
      shujunRunTime.value = fstjListData.value.length
      ueCallInitShujun()
    }, 1000);
  }

  function handleCloseList() {
    fstjCurrentId.value = ''
    fstjListShow.value = false
    ueCallClearShujun()
  }

  bus.on('ueRec_InitShujun', (data) => {
    if(data.isOk=='true') {
      ueCallClickShujun()
    }
  })

  bus.on('ueRec_ClickShujun', (data) => {
    if(data.isOk=='true') {
      ueCallRunShujun()
      shujunRunTime.value -= 1
    }
  })

  bus.on('ueRec_RunShujun', (data) => {
    if(data.isOk=='true' && shujunRunTime.value>0) {
      ueCallBackShujun()
    }
  })

  bus.on('ueRec_BackShujun', (data) => {
    if(data.isOk=='true' && shujunRunTime.value>0) {
      ueCallRunShujun()
      shujunRunTime.value -= 1
    }
  })
  
  const data_yuejie = reactive({
    default: [
      { shipName: '-', times: '' },
      { shipName: '-', times: '' },
      { shipName: '-', times: '' },
      { shipName: '-', times: '' },
    ],
    value: []
  })

  function getYjWarning(id) {
    GetYjWarning(id).then(res => {
      if(res.data) {
        data_yuejie.value = res.data.Rows.sort((a,b) => b.TIME - a.TIME)
      } else {
        data_yuejie.value = data_yuejie.default
      }
    })
  }

  onBeforeUnmount(() => {
    bus.off('ueRec_InitShujun')
    bus.off('ueRec_ClickShujun')
    bus.off('ueRec_RunShujun')
    bus.off('ueRec_BackShujun')
    ueCallClearShujun()
    bus.emit('toggleUnderWaterLegend',{from: 'show_hdsj', state: false})
  })
</script>

<style lang="scss" scoped>
#hdsj {
  
  .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;
    justify-content: flex-start;
    &.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;
    }
    &.pr-no-data {
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
  }

  .pl-b1 {
    margin-bottom: 2vh;
    .plb1-item {
      display: flex;
      align-items: center;
      
      &>img {
        width: 105px;
        height: 95px;
      }
      &>div {
        display: flex;
        flex-direction: column;
        &>span {
          display: block;
          box-sizing: border-box;
          width: 174px;
          height: 27px;
          margin: 6px 0 5px;
          padding-left: 15px;
          background: url('@/assets/imgs/page_hdsj/bg-ssgl-text.png') no-repeat;
          background-size: contain;
          font-size: 24px;
          font-family: YSBTH;
          color: #FFFFFF;
          line-height: 25px;
          text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
          cursor: pointer;
          &.highlight {
            background: url('@/assets/imgs/page_hdsj/bg-ssgl-text2.png') no-repeat;
            background-size: contain;
          }
        }
        &>div {
          padding-left: 15px;
          display: flex;
          align-items:flex-end;
          span:nth-child(1) {
            margin-right: 9px;
            font-size: 34px;
            line-height: 34px;
            font-family: BarlowBold;
            color: transparent;
            background: linear-gradient(0deg, rgba(29,128,224,0.9) 0%, rgba(255,255,255,0.9) 70%);
            -webkit-background-clip: text;
            &.is-warning {
              background: linear-gradient(0deg, rgba(224,159,29,0.9) 0%, rgba(255,255,255,0.9) 70%);
              -webkit-background-clip: text;
            }
          }
          span:nth-child(2) {
            font-size: 16px;
            line-height: 22px;
            color: #FFFFFF;
            text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
          }
        }
      }
    }
  }

  .pl-b2 {
    .title2-left {
      margin-bottom: 2vh;
    }
    .gctj-main {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2.5vh;
      .gctj-item {
        width: 93px;
        height: 95px;
        background: url('../../assets/imgs/page_hdsj/bg-gctj.png') no-repeat;
        background-size: contain;
        background-position-y: bottom;
        cursor: pointer;
        &>div:first-child {
          font-size: 18px;
          font-family: Barlow;
          color: #FFFFFF;
          text-align: center;
        }
        &>div:last-child {
          text-align: center;
          color: #72D0FF;
          text-shadow: 0px 3px 3px rgba(0,0,0,0.47);
          &>span:first-child {
            font-size: 26px;
            font-family: BarlowBold;
          }
          &>span:last-child {
            font-size: 16px;
          }
        }
        &.highlight {
          background-image: url('../../assets/imgs/page_hdsj/bg-gctj-s.png');
          &>div:last-child {
            color: #FFFF73;
          }
        }

      }
    }
    .gcxx-main {
      height: 36vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      &.is-short-list {
        justify-content: flex-start;
        padding-top: 2.1vh;
      }
      .gcxx-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
        cursor: pointer;
        &>img {
          width: 37px;
          height: 39px;
        }
        &>div {
          margin-left: 5px;
          &>div:nth-child(1) {
            display: flex;
            align-items: center;
            margin-top: 4px;
            &>div:nth-child(1) {
              width: 210px;
              height: 24px;
              background: url('@/assets/imgs/page_hdsj/bg-gcxx-title.png') no-repeat;
              background-size: contain;
              span {
                display: block;
                width: 100%;
                height: 100%;
                font-size: 16px;
                font-weight: bold;
                font-style: italic;
                color: transparent;
                line-height: 24px;
                background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 90%);
                -webkit-background-clip: text;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &.highlight {
                background: url('@/assets/imgs/page_hdsj/bg-gcxx-title2.png') no-repeat;
                background-size: contain;
                &>span {
                  background: linear-gradient(0deg, #f0d60d 0%, #FFFFFF 90%);
                  -webkit-background-clip: text;
                }
              }
            }
            span:nth-child(2) {
              display: block;
              width: 66px;
              height: 31px;
              font-size: 13px;
              font-weight: bold;
              font-style: italic;
              color: #FFFFFF;
              line-height: 33px;
              text-align: center;
              &.status-wks {
                background: url('@/assets/imgs/page_hdsj/gcxx-wks.png') no-repeat;
                background-size: contain;
              }
              &.status-jxz {
                background: url('@/assets/imgs/page_hdsj/gcxx-jxz.png') no-repeat;
                background-size: contain;
              }
              &.status-ywc {
                background: url('@/assets/imgs/page_hdsj/gcxx-ywc.png') no-repeat;
                background-size: contain;
              }
              
            }
          }
          &>div:nth-child(2) {
            margin: 8px 0 6px;
            span {
              margin-right: 10px;
              font-size: 15px;
              font-family: BarlowBold;
              color: #FFFFFF;
              opacity: 0.8;
            }
            span:nth-child(2), span:nth-child(5) {
              margin-right: 2px;
              font-size: 16px;
              opacity: 1;
            }
            span:nth-child(3n) {
              font-size: 12px;
              opacity: 0.8;
            }
            
          }
          &>div:nth-child(3) {
            height: 20px;
            span {
              font-size: 15px;
              font-family: BarlowBold;
              color: #FFFFFF;
              opacity: 0.7;
            }
            span:nth-child(2) {
              margin: 0 8px;
            }
            
          }
        }
      }
    }
    .no-data {
      position: relative;
      height: 36vh;
      span {
        position: absolute;
        top: 40%;
        width: 100%;
        text-align: center;
        font-size: 16px;
      }
    }
  }

  .pr-b1 {
    .pro-name {
      width: 80%;
      display: block;
      font-family: YSBTH;
      font-size: 20px;
      color: #f8ec95;
      line-height: 26px;
    }
    .part1-item {
      width: 80%;
      display: flex;
      align-items: center;
      // &:not(:last-child) {
      //   margin-bottom: 15px;
      // }
      &>img {
        width: 89px;
        height: 95px;
      }
      &>div {
        margin-left: 17px;
        &>span {
          font-size: 20px;
          font-style: italic;
          color: rgba($color: #EAF2FF, $alpha: 0.85);
        }
        &>div {
          margin-top: 8px;
          span:nth-child(1) {
            margin-right: 11px;
            font-size: 32px;
            font-family: BarlowBold;
            color: #FFFFFF;
            line-height: 32px;
          }
          span:nth-child(2) {
            font-size: 16px;
            color: rgba($color: #A6C8FF, $alpha: 0.8);
          }
        }
      }
    }

    .part2 {
      width: 90%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      &>div {
        width: 140px;
        height: 49px;
        background: url('../../assets/imgs/page_hdsj/bg-sj-btn.png');
        background-size: contain;
        cursor: pointer;
        text-align: center;
        &>span {
          font-size: 18px;
          font-family: YSBTH;
          color: #eee;
          line-height: 49px;
        }
        .text-emp1 {
          color: #fcd049;
        }
        .text-emp2 {
          color: #46c6fe;
        }
        &.highlight {
          filter: brightness(130%);
          transform: scale(1.1);
        }
      }
    }
  }

  .pr-b2 {
    #chart_fstj {
      width: 90%;
      height: 20vh;
    }
    .fstj-list {
      // margin-top: 0.5vh;
      height: 23vh;
      width: 90%;
      position: relative;

      .fl-btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
        &>i {
          display: block;
          width: 20px;
          height: 20px;
          margin-left: 10px;
          cursor: pointer;
        }
        .flb-back {
          background: url('@/assets/imgs/page_hdsj/btn-back.png');
          background-size: contain;
        }
        .flb-play {
          background: url('@/assets/imgs/page_hdsj/btn-play.png');
          background-size: contain;
        }
      }

      .coloumn {
        span:nth-child(1) {
          width: 30%;
        }
        span:nth-child(2) {
          width: 30%;
        }
        span:nth-child(3) {
          width: 20%;
        }
        span:nth-child(4) {
          width: 20%;
        }
      }

      .el-carousel {
        height: calc(100% - 50px);
      }

      .tc-list {
        &>li {
          height: 30px;
          margin-top: 10px;
          cursor: pointer;
          &.highlight>span {
            color: #f0d60d;
          }
        }
      }
    }
  }

  .pr-b3 {
    .prb3-main {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 100%;
      // height: 20vh;
      // margin: 10px 0 25px;

      .prb3-item2 {
        width: 85%;
        height: 24px;
        display: flex;
        align-items: center;
        margin: 10px 0;
        background: url('@/assets/imgs/page_hdsj/bg-wgyj-list.png') no-repeat;
        background-size: 100% 100%;
        span:nth-child(2) {
          display: block;
          width: 51%;
          font-size: 16px;
          font-weight: 700;
          font-style: italic;
          color: transparent;
          background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
        }
        span:nth-child(3) {
          display: block;
          font-size: 16px;
          font-family: BarlowBold;
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }
    }
  }
}
</style>