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 v-if="item.projectEndTime||item.projectStartTime">
                <span>{{ item.projectStartTime }}</span><span>至</span><span>{{ item.projectEndTime }}</span>
              </div>
              <div v-else></div>
              <div>
                <span>计划方量</span><span>{{ (item.quantities/10000).toFixed(2) }}</span><span>万方</span>
                <span>实际方量</span><span>{{ Math.floor(item.tonnage) }}</span><span>万方</span>
              </div>
              <div>
                <span>总投资</span><span>{{ Math.floor(item.investment) }}</span><span>万元</span>
              </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;
                opacity: 0.8;
              }
              span:nth-child(4), span:nth-child(6) {
                margin-right: 2px;
                color: #FFFFFF;
                font-size: 16px;
                opacity: 1;
              }
              span:nth-child {
                font-size: 12px;
                opacity: 0.8;
              }

            }
            &>div:nth-child(3) {
              height: 20px;
              span {
                margin-right: 10px;
                font-size: 12px;
                font-family: BarlowBold;
                color: #FFFFFF;
                opacity: 0.7;
              }
              span:nth-child(2), span:nth-child(3), span:nth-child(5), span:nth-child(6){
                color: #FFFFFF;
                font-size: 13px;
                opacity: 1;
              }
            }
            &>div:nth-child(4) {
              height: 20px;
              span {
                margin-right: 10px;
                font-size: 12px;
                font-family: BarlowBold;
                color: #FFFFFF;
                opacity: 0.7;
              }
              span:nth-child(2), span:nth-child(3){
                margin-right: 2px;
                color: #FFFFFF;
                font-size: 13px;
                opacity: 1;
              }
            }
          }
        }
      }
      .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>