<template>
  <div id="ssky">
    <div class="panel-left">
      <span class="title1-left" @click="handlePjylClick" :class="{'highlight': pjylSelected}">浦江游览</span>
      <div class="pl-b1 pl">
        <span class="title2-left">游览资源</span>
        <div class="ylzy-item" @click="handleBDListShow('ylzy-boat')">
          <img :src="require('@/assets/imgs/page_ssky/icon-youchuan.png')" alt="">
          <div>
            <span>游船数</span>
            <div>
              <span>{{ylzyData.boatNum}}</span><span>艘</span>
            </div>
          </div>
        </div>
        <div class="ylzy-item" @click="handleBDListShow('ylzy-dock')">
          <img :src="require('@/assets/imgs/page_ssky/icon-matou.png')" alt="">
          <div>
            <span>码头数</span>
            <div>
              <span>{{ylzyData.dockNum}}</span><span>个</span>
            </div>
          </div>
        </div>
      </div>
      <BoatDockList :list-data="ylzyData.boatList" :list-title="'游船信息'" v-if="boatDockListShow==='ylzy-boat'" @closeBoatList="boatDockListShow=false"/>
      <BoatDockList :list-data="ylzyData.dockList" :list-title="'码头信息'" v-if="boatDockListShow==='ylzy-dock'" @closeBoatList="boatDockListShow=false"/>
      <div class="pl-b2 pl">
        <span class="title2-left">码头客流量</span>
        <div class="plb2-row1">
          <i></i>
          <div>
            <span>当前总客流</span>
            <span>{{formatNum(mtkllData.total)}}</span>
          </div>
        </div>
        <div class="plb2-row2">
          <div class="plb2-item" v-for="item, index in mtkllData.catagory" :key="item.name">
            <span>{{item.shipType}}</span>
            <div>
              <div :style="'width:'+formatCataBarWidth(item.passengerTotal)"></div>
            </div>
            <span>{{formatNum(item.passengerTotal) }}</span>
          </div>
        </div>
       
      </div>
      <div class="pl-b3 pl">
        <span class="title2-left">航班信息</span>
        <div class="plb3-main">
          <ul class="hbxx-list" id="hbxxList">
            <li class="hbxx-item" v-for="item in hbxxData.value" :key="item.mmsi+item.scheduleTime">
              <i></i>
              <div>
                <div>
                  <span>{{ item.shipName }}</span>
                </div>
                <div>
                  <div>
                    <span>{{ item.saleNum }}</span>
                    <span>人</span>
                  </div>
                  <div>
                    <span>{{ item.typeName }}</span>
                    <i @click="handleBoatClick(item)"></i>
                  </div>
                </div>
                <span>{{ item.scheduleTime }}</span>
              </div>
            </li>
          </ul>
        </div>
        
      </div>
    </div>
    <div class="panel-right">
      <span class="title1-right" @click="handleDjldClick" :class="{'highlight': djldSelected}">对江轮渡</span>
      <div class="pr-b1 pr">
        <span class="title2-right">轮渡资源</span>
        <div class="prb1-main">
          <div @click="handleBDListShow('ldzy-dock')">
            <i></i>
            <div>
              <span>渡口数</span>
              <div>
                <span>{{ldzyData.dk}}</span>
                <span>个</span>
              </div>
            </div>
          </div>
          <div  @click="handleBDListShow('ldzy-boat')">
            <i></i>
            <div>
              <span>渡船数</span>
              <div>
                <span>{{ldzyData.dc}}</span>
                <span>艘</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <BoatDockList :list-data="ldzyData.dockList" :list-title="'渡口信息'" v-if="boatDockListShow==='ldzy-dock'" @closeBoatList="boatDockListShow=false"/>
      <BoatDockList :list-data="ldzyData.boatList" :list-title="'渡船信息'" v-if="boatDockListShow==='ldzy-boat'" @closeBoatList="boatDockListShow=false"/>
      <div class="pr-b2 pr">
        <span class="title2-right">轮渡客流量</span>
        <div class="prb2-p1">
          <img
            :src="require('@/assets/imgs/page_ssky/logo-ldkll.png')"
            alt="" @click="handleLineClick" :class="{'highlight': lineSelected }"
          />
          <div>
            <div v-for="item, index in ldklData.value" :key="index">
              <span>{{item.name}}</span>
              <span>{{formatNum(item.value)}}</span>
            </div>
          </div>
        </div>
        <div class="prb2-p2">
          <div class="ldkl-list" id="ldklList">
            <ListBoxLdkll
              v-for="item, index in ldklLineData.value"
              :key="index" :list-data="item" :is-highlight="item.name===ldklLinePicked.name"
              @itemClick="item => handleLdklPick(item)"
            />
          </div>
        </div>
      </div>
      <LdkllLineDetail v-if="ldklLineDetailShow" :row-data="ldklLinePicked" @closeDialog="handleCloseLdkllDetail"/>
      <div class="pr-b3 pr">
        <span class="title2-right">停航信息</span>
        <div v-for="item, index in thxxData.value" :key="index" class="prb3-item">
          <div>
            <img :src="require('@/assets/imgs/page_ssky/icon-yj.png')" alt="">
            <span>{{ item.routeName }}</span>
          </div>
          <div>
            <span>{{item.delayStart.slice(5,16)+ ' ~ ' +item.delayEnd.slice(5,16)}}</span>
            <span :class="item.delayType==='延时'? 'yj-orange': 'yj-red'">{{item.delayType}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

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

<script setup>
  import { reactive, ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
  import ListBoxLdkll from './cpns/ListBoxLdkll'
  import BoatDockList from './cpns/BoatDockList.vue'
  import { GetMtkll, GetYlzy, GetLdzy, GetLdkll, GetThxx, GetHbxx } from '@/apis/ssky'
  import { useRafFn } from '@vueuse/core'
  import bus from '@/utils/bus'
  import {
    ueCallCloseBoat, ueCallPositionByType, ueCallShowOnlyLycb, ueCallCloseOnlyLycb,
    ueCallShowLine, ueCallCloseLine, ueCallShowMt, ueCallCloseMt, ueCallShowLymt, ueCallCloseLymt
  } from '@/utils/UIInteractions'
  import LdkllLineDetail from './cpns/LdkllLineDetail.vue'

  let timer

  bus.on('boatPanelShow', (state) => {
    console.log(boatDockListShow.value)
    if(state&&boatDockListShow.value.toString().indexOf('ylzy')!==-1) {
      boatDockListShow.value = false
    }
  })

  onMounted(() => {
    ueCallShowOnlyLycb()
    getYlzy()
    getMtkll()
    getLdzy()
    getLdkll()
    getThxx()
    getHbxx()
    timer = setInterval(() => {
      getThxx()
      getHbxx()
    }, 60000);
  })

  onBeforeUnmount(() => {
    bus.off('boatPanelShow')
    ueCallCloseBoat()
    ueCallCloseOnlyLycb()
    clearInterval(timer)
  })

  const boatDockListShow = ref(false)

  function handleBDListShow(name) {
    boatDockListShow.value = boatDockListShow.value===name? false: name
  }

  function getYlzy() {
    GetYlzy().then(res => {
      ylzyData.boatNum = res.data.shipNumber
      // ylzyData.dockNum = res.data.pierNumber
      ylzyData.dockNum = 10
      ylzyData.boatList = res.data.shipNames
      ylzyData.dockList = res.data.pierNames
    })
  }

  const ylzyData = reactive({
    boatNum: 0,
    dockNum: 0,
    boatList: [],
    dockList: []
  })

  function getMtkll() {
    GetMtkll().then(res => {
      mtkllData.total = res.data.totalPassenger
      mtkllData.catagory.forEach(i => {
        res.data.passengersTypes.forEach(j => {
          if(i.shipType===j.shipType) {
            i.passengerTotal = j.passengerTotal || 0
          }
        })
      })
      mtkllData.catagory.sort((a,b) => b.passengerTotal - a.passengerTotal)
    })
  }

  const mtkllData = reactive({
    total: 0,
    catagory: [
      { shipType: '公共航班', passengerTotal: 0 },
      { shipType: '特色航班', passengerTotal: 0 },
      { shipType: '快线航班', passengerTotal: 0 },
      { shipType: '临时航班', passengerTotal: 0 },
    ]
  })

  function getLdzy() {
    GetLdzy().then(res => {
      ldzyData.dk = res.data.pierNumber
      ldzyData.dc = res.data.shipNumber
      ldzyData.boatList = res.data.shipNames
      ldzyData.dockList = res.data.pierNames
    })
  }

  const ldzyData = reactive({
    dk: 0,
    dc: 0,
    boatList: [],
    dockList: []
  })

  function getLdkll() {
    GetLdkll().then(res => {
      ldklData.value.forEach(i => {
        i.value = res.data[i.fieldName]
      })
      let lineMap = new Map()
      res.data.lineList.forEach((row,index) => {
        if(lineMap.has(row.name)) { return }
        lineMap.set(row.name, row)
      })
      let lineArr = []
      lineMap.forEach((val, key) => {
        lineArr.push(val)
      })
      ldklLineData.value = lineArr
      nextTick(() => {
        ldklListScroll()
      })
    })
  }

  const ldklData = reactive({value: [
    { name: '当前总客流', fieldName: 'dailyPassengerFlow', value: 0 },
    { name: '行人数', fieldName: 'pedestrian', value: 0 },
    { name: '两轮车数', fieldName: 'bicycle', value: 0 },
    { name: '三轮车数', fieldName: 'motorcycle', value: 0 },
  ]})

  const ldklLineData = reactive({value: [
    {name: "-", walkingCount: "0", bicycleCount: "0", motorCount: "0", count: "0", onTime: '-'},
    {name: "-", walkingCount: "0", bicycleCount: "0", motorCount: "0", count: "0", onTime: '-'},
  ]})

  let ldklScrollResume
  function ldklListScroll() {
    const ldklList = document.getElementById('ldklList')
    let itemH = ldklList.clientHeight / Math.ceil(ldklLineData.value.length) * 2
    const { pause, resume } = useRafFn(() => {
      if(Math.abs(ldklList.style.top.slice(0, -2)) >= itemH) {
        ldklList.style.top = 0
        let ldklListTemp = [...ldklLineData.value]
        for(let i=0; i<2; i++) {
          ldklListTemp.push(ldklListTemp.shift())
        }
        ldklLineData.value = ldklListTemp
      }
      ldklList.style.top = (Number(ldklList.style.top.slice(0, -2)) - 0.5) + 'px'
    })
    ldklList.onmouseenter = pause
    ldklList.onmouseleave = () => {
      if(!ldklLinePicked.value?.name) {
        resume()
      }
    }
    ldklScrollResume = resume
  }

  const ldklLinePicked = ref({
    name: ''
  })

  const ldklLineDetailShow = ref(false)

  function handleLdklPick(item) {
    ldklLinePicked.value = item
    ldklLineDetailShow.value = true
  }

  function handleCloseLdkllDetail() {
    ldklLineDetailShow.value = false
    ldklLinePicked.value = {}
    ldklScrollResume()
  }

  function getThxx() {
    GetThxx().then(res => {
      if(res.data.Rows.length>0) {
        thxxData.value = res.data.Rows.slice(0,3)
      }
    })
  }

  const thxxData = reactive({value: [
    { routeName: '无信息', delayStart: '2000/01/01 00:00:00', delayEnd: '2000/01/01 00:00:00', delayType: '-' }
  ]})

  function getHbxx() {
    GetHbxx().then(res => {
      hbxxData.value = res.data.Rows
      if(isHbxxScrolling) { return }
      nextTick(() => {
        hbxxListScroll()
        isHbxxScrolling = true
      })
    })
  }

  const hbxxData = reactive({value: [
    // { shipName: '--', saleNum: '--', typeName: '--', scheduleTime: '--' },
    // { shipName: '--', saleNum: '--', typeName: '--', scheduleTime: '--' },
  ]})

  let isHbxxScrolling = false
  function hbxxListScroll() {
    const hbxxList = document.getElementById('hbxxList')
    let itemH = hbxxList.clientHeight / Math.ceil(hbxxData.value.length) * 2
    const { pause, resume } = useRafFn(() => {
      if(Math.abs(hbxxList.style.top.slice(0, -2)) >= itemH) {
        hbxxList.style.top = 0
        let hbxxListTemp = [...hbxxData.value]
        for(let i=0; i<2; i++) {
          hbxxListTemp.push(hbxxListTemp.shift())
        }
        hbxxData.value = hbxxListTemp
      }
      hbxxList.style.top = (Number(hbxxList.style.top.slice(0, -2)) - 0.5) + 'px'
    })
    hbxxList.onmouseenter = pause
    hbxxList.onmouseleave = resume
  }

  function formatNum(num){
    if(!num) { return '0' }
    let result = '';
    let int = num.toString();
    while (int.length > 3) {
      result = ',' + int.slice(-3) + result;
      int = int.slice(0, int.length - 3);
    }
    if (int) {
      result = int + result;
    }
    return result;
  }

  function formatCataBarWidth(value) {
    const maxv = mtkllData.catagory.reduce((pre, i) => Math.max(pre, i.passengerTotal),0)
    if(maxv===0) { return '10%'}
    const result = Math.floor(value/maxv*100)
    return result<10 ? result+10+'%' : result+'%'
  }

  function handleBoatClick(item) {
    // bus.emit('ueRec_BoatClick', {mmsi: item.mmsi, where: 'HPJ'})
    ueCallPositionByType('boat',item.mmsi)
  }

  const lineSelected = ref(false)

  function handleLineClick() {
    lineSelected.value = !lineSelected.value
    if(lineSelected.value) {
      ueCallShowLine()
    } else {
      ueCallCloseLine()
    }
  }

  const pjylSelected = ref(false)

  function handlePjylClick() {
    pjylSelected.value = !pjylSelected.value
    if(pjylSelected.value) {
      ueCallShowLymt()
    } else {
      ueCallCloseLymt()
    }
  }

  const djldSelected = ref(false)

  function handleDjldClick() {
    djldSelected.value = !djldSelected.value
    if(djldSelected.value) {
      ueCallShowMt()
    } else {
      ueCallCloseMt()
    }
  }

</script>

<style lang="scss" scoped>
#ssky {
  .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;
  }
  .panel-left {
    left: 0;
    padding: 0 30px 10px;
    .boat-dock-list {
      left: 360px;
    }
    .title2-left {
      margin-bottom: 2.2vh;
    }
  }

  .panel-right {
    right: 0;
    padding: 0 30px 10px;
    .pr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .boat-dock-list {
      right: 360px;
    }
  }

  .pl-b1 {
    box-sizing: border-box;
    padding-right: 40px;
    margin-top: 1vh;

    .ylzy-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      cursor: pointer;
      &>img {
        width: 95px;
        height: 95px;
      }
      &>div {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 231px;
        height: 73px;
        margin-left: -40px;
        padding-left: 45px;
        background: url('@/assets/imgs/page_ssky/bg-ylzy.png') no-repeat;
        background-size: 100% 100%;
        &>span {
          font-size: 16px;
          color: rgba(91, 158, 224, 1);
        }
        &>div {
          span:first-child {
            margin-right: 6px;
            font-size: 26px;
            font-family: BarlowBold;
          }
          span:last-child {
            font-size: 14px;
          }
        }
      }
    }

  }

  .pl-b2 {
    margin-top: 2vh;
    .plb2-row1 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      i {
        display: inline-block;
        width: 82px;
        height: 85px;
        background: url('@/assets/imgs/page_ssky/icon-zkl.png') no-repeat;
        background-size: contain;
        margin-right: 16px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        span:first-child {
          font-size: 16px;
          margin-bottom: 6px;
        }
        span:last-child {
          font-size: 32px;
          font-family: BarlowBold;
          color: transparent;
          background: linear-gradient(0deg, rgba(255,192,66,1) 0%, rgba(255,255,255,1) 100%);
          -webkit-background-clip: text;
          text-shadow: 0 0 20px rgba(45, 172, 252, 0.4);
        }
      }
    }

    .plb2-row2 {
      .plb2-item {
        margin-bottom: 25px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>span:nth-child(1) {
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
        }
        &>div:nth-child(2) {
          flex: 1;
          height: 4px;
          box-sizing: border-box;
          padding: 0 13px;
          div {
            position: relative;
            height: 100%;
            background: linear-gradient(90deg, rgba(102, 170, 255, 0.1) 0%, rgba(102, 170, 255, 1) 100%);
            &::after {
              position: absolute;
              right: -17px;
              top: -19px;
              content: '';
              display: block;
              width: 43px;
              height: 41px;
              background: url('@/assets/imgs/page_ssky/hangban-gg.png') no-repeat;
              background-size: cover;
            }
          }
        }
        &>span:nth-child(3) {
          width: 55px;
          text-align: right;
          font-size: 18px;
          font-family: Barlow;
          color: rgba($color: #fff, $alpha: 0.8);
        }
      }
      .plb2-item:nth-child(2)>div:nth-child(2)>div {
        background: linear-gradient(90deg, rgba(241, 216, 146, 0.1) 0%, rgba(241, 216, 146, 1) 100%);
        &::after {
          background: url('@/assets/imgs/page_ssky/hangban-ts.png') no-repeat;
          background-size: cover;
        }
      }
      .plb2-item:nth-child(3)>div:nth-child(2)>div {
        background: linear-gradient(90deg, rgba(193, 169, 249, 0.1) 0%, rgba(193, 169, 249, 1) 100%);
        &::after {
          background: url('@/assets/imgs/page_ssky/hangban-ls.png') no-repeat;
          background-size: cover;
        }
      }
    }
    
    
  }

  .pl-b3 {
    margin-top: 1vh;
    .plb3-main {
      width: 100%;
      height: 18vh;
      overflow: hidden;
      position: relative;
      .hbxx-list {
        position: absolute;
        top: 0;
        .hbxx-item {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
      
          &>i {
            display: flex;
            width: 73px;
            height: 86px;
            background: url('@/assets/imgs/common/icon-lshb.png') no-repeat;
            background-size: 100% 100%;
          }
      
          &>div {
            &>div:nth-child(1) {
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 8px;
              width: 222px;
              height: 24px;
              background: url('@/assets/imgs/common/bg-text1.png') no-repeat;
              background-size: 100% 100%;
      
              span:nth-child(1) {
                padding-right: 5px;
                font-size: 18px;
                font-weight: bold;
                font-style: italic;
                color: transparent;
                background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
                -webkit-background-clip: text;
              }
            }
      
            &>div:nth-child(2) {
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 8px;
              margin: 6px 0;
    
              &>div {
                display: flex;
                align-items: center;
              }
      
              div:nth-child(1) {
                &>span:nth-child(1) {
                  margin-right: 7px;
                  font-size: 18px;
                  font-family: BarlowBold;
                  color: #FFFFFF;
                  line-height: 18px;
                }
                &>span:nth-child(2) {
                  font-size: 12px;
                  color: #FFFFFF;
                }
              }
      
              div:nth-child(2){
                &>span {
                  font-size: 14px;
                  font-style: italic;
                  color: #FF0000;
                }
                &>i {
                  display: inline-block;
                  width: 24px;
                  height: 24px;
                  margin-left: 10px;
                  background: url('@/assets/imgs/page_ssky/btn-detail.png') no-repeat;
                  background-size: contain;
                  cursor: pointer;
                }
              }
            }
            &>span:nth-child(3) {
              font-size: 13px;
              color: #FFFFFF;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }

  .pr-b1 {
    margin-top: 1vh;
    .prb1-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1vh;
      width: 98%;
      &>div {
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          display: block;
          width: 80px;
          height: 80px;
          background: url('@/assets/imgs/page_ssky/boat-dks.png') no-repeat;
          background-size: contain;
        }
        &>div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          &>span {
            font-size: 14px;
            font-weight: 400;
            color: #00FFFF;
          }
          &>div {
            span:nth-child(1) {
              font-size: 34px;
              font-family: BarlowBold;
              margin-right: 8px;
              text-shadow: 0 0 20px rgba(45, 172, 252, 1);
            }
            span:nth-child(2) {
              font-size: 14px;
            }
          }
        }

      }
      &>div:nth-child(2) > i {
        background: url('@/assets/imgs/page_ssky/boat-dcs.png') no-repeat;
        background-size: contain;
      }
    }
  }

  .pr-b2 {
    margin-top: 2vh;
    .prb2-p1 {
      display: flex;
      align-items: center;
      margin: 20px 0 10px 0;

      &>img {
        width: 94px;
        height: 180px;
        cursor: pointer;
        &.highlight {
          filter: brightness(120%) saturate(120%);
        }
      }
      
      &>div {
        display: flex;
        flex-direction: column;
        
        &>div {
          box-sizing: border-box;
          padding-left: 30px;
          width: 225px;
          height: 34px;
          margin-bottom: 10px;
          line-height: 28px;
          background: url('@/assets/imgs/page_ssky/bg-ldkll.png') no-repeat;
          background-size: contain;
          span:nth-child(1) {
            display: inline-block;
            width: 50%;
            font-size: 13px;
            color: #FFFFFF;
          }
          span:nth-child(2) {
            display: inline-block;
            width: 50%;
            font-size: 14px;
            font-family: YSBTH;
            color: #FFEA00;
            &::before {
              content: '';
              display: inline-block;
              width: 7px;
              height: 10px;
              margin-right: 7px;
              background: url('@/assets/imgs/page_ssky/arrow-ldkll.png') no-repeat;
              background-size: 7px 8px;
              background-position: center;
            }
          }
        }
        &>div:not(:nth-child(1)) {
          span:nth-child(1) {
            &::before {
              content: '';
              display: inline-block;
              width: 4px;
              height: 4px;
              margin-right: 5px;
              transform: translateY(-2px);
              background: #00AAFF;
            }
          }
          span:nth-child(2) {
            color: #73D0FF;
          }
        }
      }
    }

    .prb2-p2 {
      width: calc(100% - 6px);
      height: 15vh;
      overflow: hidden;
      position: relative;
      border: 2px solid transparent;
      padding-left: 2px;
      .ldkl-list {
        // cursor: pointer;
        position: absolute;
        top: 0;
      }
    }
  }

  .pr-b3 {
    margin-top: 1vh;
    .title2-right {
      margin-bottom: 2vh;
    }
    .prb3-item {
      margin: 0 15px 20px 0;
      &>div:nth-child(1) {
        width: 276px;
        height: 24px;
        display: flex;
        align-items: center;
        background: url('@/assets/imgs/page_ssky/bg-lundu-line.png') no-repeat;
        background-size: contain;
        margin-bottom: 10px;
        img {
          margin-left: -5px;
        }
        span {
          padding-right: 5px;
          font-size: 18px;
          font-weight: bold;
          font-style: italic;
          color: transparent;
          line-height: 24px;
          background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
        }
      }
      &>div:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFFFFF;
        padding-left: 5px;
        span:nth-child(1) {
          font-size: 14px;
        }
        span:nth-child(2) {
          display: inline-block;
          width: 65px;
          height: 32px;
          font-size: 13px;
          line-height: 32px;
          text-align: center;
          font-style: italic;
          &.yj-red {
            background: url('@/assets/imgs/page_ssky/bg-red.png') no-repeat;
            background-size: contain;
          }
          &.yj-orange {
            background: url('@/assets/imgs/page_ssky/bg-orange.png') no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }

}
</style>
