<template>
  <div class="container"
    :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="top-bg" @click="showFullScreen">
      <el-col :span="5" style="height: 100%">
        <img :src="titlePng" alt="logo" />
      </el-col>
      <el-col :span="14" style="height: 100%">
        <div class="top-title">PDC量产线生产可视化看板(PACK)</div>
      </el-col>
      <el-col :span="5" style="height: 100%">
        <div class="top-time year">{{ year }} {{ week }}</div>
        <div class="top-time time">{{ time }}</div>
      </el-col>
    </div>
    <div class="plan-info">
      <div class="plan-info-item">
        <div class="plan-info-item-title">计划产量</div>
        <div class="plan-info-item-value">
          <div class="plan-info-item-value-item">
            {{ stationPlan.计划产量 }}
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">趋势产量</div>
        <div class="plan-info-item-value">
          <div class="plan-info-item-value-item">
            {{ stationPlan.趋势产量 }}
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">上线数量</div>
        <div class="plan-info-item-value">
          <div :class="getPlanInfoClass()">
            {{stationPlan.上线数量}}
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">下线数量</div>
        <div class="plan-info-item-value">
          <div :class="getPlanInfoClass()">
            {{stationPlan.实际产量}}
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">通过率</div>
        <div class="plan-info-item-value">
          <div :class="getProductOkClass()">
            {{ stationPlan.通过率 }}%
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">开动率</div>
        <div class="plan-info-item-value">
          <div :class="getDeviceWorkClass()">
            {{ stationPlan.开动率 }}%
          </div>
        </div>
      </div>
      <div class="plan-info-item">
        <div class="plan-info-item-title">停线时间</div>
        <div class="plan-info-item-value">
          <div :class="getDeviceStopClass()">
            {{ stationPlan.停线时间 }}
            <span>m</span>
          </div>
        </div>
      </div>
    </div>
    <div class="station-info">
      <div class="line"></div>
      <div style="display: flex;">
        <div v-for="(item, index) in stationInfo" :key="index" class="station-item">
          <div v-if="index === 0" class="station-info-item-value station-info-header"><span
              class="header-text">{{ item.工位 }}</span></div>
          <div v-if="index === 0" class="station-info-item-value station-info-header"><span
              class="header-text">{{ item.停线 }}</span></div>
          <div v-if="index === 0" class="station-info-item-value station-info-header"><span
              class="header-text-small">停线<br>次数</span></div>
          <div v-if="index === 0" class="station-info-item-value station-info-header"><span
              class="header-text">{{ item.产量 }}</span></div>
          <div v-if="index !== 0" :class="getStationBgClass(item.状态)"><span
              :class="getStationValueClass(0)">{{ item.工位 }}</span></div>
          <div v-if="index !== 0" class="station-info-item-value"><span
              :class="getStationValueClass(1)">{{ item.停线 }}</span></div>
          <div v-if="index !== 0" class="station-info-item-value"><span
              :class="getStationValueClass(3)">{{ item.停线次数 }}</span></div>
          <div v-if="index !== 0" class="station-info-item-value"><span
              :class="getStationValueClass(2)">{{ item.产量 }}</span></div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="top-problem">
      <div class="top-problem-left">
        <div class="top-problem-left-title">TOP:</div>
        <vue-seamless-scroll v-if="topProblemIsMove" id="seamlessScroll_topProblem" :data="topProblem"
          :class-option="classOption_topProblem_move" class="top-problem-left-warp">
          <div id="topProblem" style="height: auto;overflow: hidden;">
            <div v-for="(item, index) in topProblem" :key="index" class="top-problem-left-item">
              <span class="top-problem-left-item-content">{{ index + 1 }}.</span>
              <span class="top-problem-left-item-content">{{ item.content }}</span>
            </div>
          </div>
          <div v-if="topProblemIsMove" class="line-white"></div>
        </vue-seamless-scroll>
        <vue-seamless-scroll v-else id="seamlessScroll_topProblem" :data="topProblem"
          :class-option="classOption_topProblem_stop" class="top-problem-left-warp">
          <div id="topProblem" style="height: auto;overflow: hidden;">
            <div v-for="(item, index) in topProblem" :key="index" class="top-problem-left-item">
              <span class="top-problem-left-item-content">{{ index + 1 }}.</span>
              <span class="top-problem-left-item-content">{{ item.content }}</span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
      <div class="top-problem-center"></div>
      <div class="top-problem-right">
        <vue-seamless-scroll v-if="tempProblemIsMove" id="seamlessScroll_tempProblem" :data="tempProblem"
          :class-option="classOption_tempProblem_move" class="top-problem-right-warp">
          <div id="tempProblem" style="height: auto;overflow: hidden;">
            <div v-for="(item, index) in tempProblem" :key="index" class="top-problem-right-item">
              <span class="top-problem-right-item-content">{{ index + 1 }}.</span>
              <span class="top-problem-right-item-content">{{ item.content }}</span>
            </div>
          </div>
          <div v-if="tempProblemIsMove" class="line-white"></div>
        </vue-seamless-scroll>
        <vue-seamless-scroll v-else id="seamlessScroll_tempProblem" :data="tempProblem"
          :class-option="classOption_tempProblem_stop" class="top-problem-right-warp">
          <div id="tempProblem" style="height: auto;overflow: hidden;">
            <div v-for="(item, index) in tempProblem" :key="index" class="top-problem-right-item">
              <span class="top-problem-right-item-content">{{ index + 1 }}.</span>
              <span class="top-problem-right-item-content">{{ item.content }}</span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="bottom">
      <div class="slogan">{{ slogan }}</div>
    </div>
    <OpLoginStatusOverlay :current-time-tick="currentTimeTick" />
    <div v-if="machineStopCall.length > 0" class="machineStop" :style="getMachineStopCallColor()">
      <!-- 只有一条数据时：铺满显示，字体放大 -->
      <div v-if="machineStopCall.length === 1" class="machineStop-single">
        <div class="machineStop-single-item">
          <span
            class="machineStop-single-content">【{{ machineStopCall[0].type }}】{{ machineStopCall[0].opCode }}-{{ machineStopCall[0].opName }}：{{ machineStopCall[0].content }}</span>
        </div>
      </div>
      <!-- 多条数据时：保持滚动显示 -->
      <div v-else style="height: 265px;overflow: hidden;">
        <vue-seamless-scroll ref="seamlessScroll" :data="machineStopCall" :class-option="classOption_machineStopCall"
          class="machineStop-warp">
          <div v-for="(item, index) in machineStopCall" :key="index" class="machineStop-item">
            <span class="machineStop-item-content">{{ index + 1 }}.</span>
            <span
              class="machineStop-item-content">【{{ item.type }}】{{ item.opCode }}-{{ item.opName }}：{{ item.content }}</span>
          </div>
          <div v-if="machineStopCall.length >= classOption_machineStopCall.limitMoveNum" class="line-white"></div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import OpLoginStatusOverlay from '@/components/OpLoginStatusOverlay.vue'
export default {
  name: 'IndexPack',
  components: {
    OpLoginStatusOverlay
  },
  data() {
    return {
      classOption_topProblem_stop: {
        step: 0.5,
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 500, // 开始无缝滚动的数据量
        hoverStop: true,
        openTouch: false
      },
      classOption_topProblem_move: {
        step: 0.5,
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true,
        openTouch: false
      },
      classOption_tempProblem_stop: {
        step: 0.5,
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 500, // 开始无缝滚动的数据量
        hoverStop: true,
        openTouch: false
      },
      classOption_tempProblem_move: {
        step: 0.5,
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true,
        openTouch: false
      },
      classOption_machineStopCall: {
        step: 0.5,
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 4, // 开始无缝滚动的数据量
        hoverStop: true,
        openTouch: false
      },
      machineStop: [],
      machineCall: [],
      topProblem: [],
      topProblemIsMove: false,
      tempProblem: [],
      tempProblemIsMove: false,
      slogan: '',
      stationInfo: [],
      stationPlan: {
        计划产量: 0,
        趋势产量: 0,
        实际产量: 0,
        上线数量: 0,
        在制数量: 0,
        通过率: 0,
        通过率下限: 0,
        开动率: 0,
        开动率下限: 0,
        停线时间: 0,
        停线时间上限: 999999
      },
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      timer2: '',
      dbTimeBase: null,
      dbTimeBaseTick: 0,
      currentTimeTick: 0,
      year: '',
      time: '',
      week: '',
      workPlanRollConfig: {
        step: 0.05,
        direction: 1,
        limitMoveNum: 6,
        openWatch: true,
        hoverStop: false
      },
      tableData1: [],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },
  computed: {
    machineStopCall() {
      return [...this.machineStop, ...this.machineCall]
    }
  },
  watch: {},
  props: {},
  created() {
  },
  mounted() {
    this.getLogo()
    const that = this
    this.syncDatabaseTime()
    // 定时器部分
    this.timer = setInterval(() => {
      that.getNowTime()
    }, 1000)
    this.timer2 = setInterval(() => {
      that.syncDatabaseTime()
    }, 10 * 60 * 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })
    this.getStationPlanData()
    this.getTopProblemData()
    this.getTempProblemData()
    this.getMachineStopData()
    this.getMachineCallData()
    this.getSloganData()
    this.getStationInfoData()

    this.timer1 = setInterval(() => {
      this.getStationPlanData()
      this.getTopProblemData()
      this.getTempProblemData()
      this.getMachineStopData()
      this.getMachineCallData()
      this.getSloganData()
      this.getStationInfoData()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
    clearInterval(this.timer2)
  },
  methods: {
    showFullScreen() {
      // 全屏显示
      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        document.documentElement.requestFullscreen()
      }
    },
    getDivHeight_topProblem() {
      // 获取当前div的高度
      const dom_topProblem = document.getElementById('topProblem')
      const dom_set = document.getElementById('seamlessScroll_topProblem')
      if (this.topProblem.length > 0) {
        if (dom_topProblem.clientHeight > dom_set.clientHeight) {
          this.topProblemIsMove = true
        } else {
          this.topProblemIsMove = false
        }
      }
    },
    getDivHeight_tempProblem() {
      // 获取当前div的高度
      const dom_tempProblem = document.getElementById('tempProblem')
      const dom_set = document.getElementById('seamlessScroll_tempProblem')
      if (this.tempProblem.length > 0) {
        if (dom_tempProblem.clientHeight > dom_set.clientHeight) {
          this.tempProblemIsMove = true
        } else {
          this.tempProblemIsMove = false
        }
      }
    },
    getMachineStopCallColor() {
      console.log(this.machineStop)
      if (this.machineStop.length > 0) {
        return {
          backgroundColor: '#ff0000'
        }
      } else {
        return {
          backgroundColor: '#ff8700'
        }
      }
    },
    getPlanInfoClass() {
      // 根据实际产量与计划产量对比，返回不同的样式
      return this.stationPlan.实际产量 >= this.stationPlan.趋势产量 ? 'plan-info-item-value-item-green' : 'plan-info-item-value-item-red'
    },
    getDeviceWorkClass() {
      // 根据实际产量与计划产量对比，返回不同的样式
      return this.stationPlan.开动率 >= this.stationPlan.开动率下限 ? 'plan-info-item-value-item' : 'plan-info-item-value-item-red'
    },
    getProductOkClass() {
      // 根据实际产量与计划产量对比，返回不同的样式
      return this.stationPlan.通过率 >= this.stationPlan.通过率下限 ? 'plan-info-item-value-item' : 'plan-info-item-value-item-red'
    },
    getDeviceStopClass() {
      // 根据实际产量与计划产量对比，返回不同的样式
      return this.stationPlan.停线时间 <= this.stationPlan.停线时间上限 ? 'plan-info-item-value-item' : 'plan-info-item-value-item-red'
    },
    getStationValueClass(index) {
      // 根据索引返回不同的样式
      return `station-info-item-value-span${index}`
    },
    getStationBgClass(index) {
      if (index === '2') {
        return 'station-info-item-value-stop'
      } else if (index === '3') {
        return 'station-info-item-value-call'
      } else {
        return 'station-info-item-value'
      }
    },
    getStationPlanData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_生产指标查询', params)
      this.ExecDatabase(data).then((res) => {
        this.stationPlan.计划产量 = res.data[0].计划产量
        this.stationPlan.趋势产量 = res.data[0].趋势产量
        this.stationPlan.实际产量 = res.data[0].实际产量
        this.stationPlan.上线数量 = res.data[0].上线数量
        this.stationPlan.在制数量 = res.data[0].在制数量
        this.stationPlan.通过率 = res.data[0].通过率
        this.stationPlan.通过率下限 = res.data[0].通过率下限
        this.stationPlan.开动率 = res.data[0].开动率
        this.stationPlan.开动率下限 = res.data[0].开动率下限
        this.stationPlan.停线时间 = res.data[0].停线时间
        this.stationPlan.停线时间上限 = res.data[0].停线时间上限
      })
    },
    getTopProblemData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_TOP问题查询', params)
      this.ExecDatabase(data).then((res) => {
        this.topProblem = res.data
        this.getDivHeight_topProblem()
      })
    },
    getTempProblemData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_临时问题查询', params)
      this.ExecDatabase(data).then((res) => {
        this.tempProblem = res.data
        this.getDivHeight_tempProblem()
      })
    },
    getMachineStopData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_停机查询', params)
      this.ExecDatabase(data).then((res) => {
        this.machineStop = res.data
      })
    },
    getMachineCallData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_呼叫查询', params)
      this.ExecDatabase(data).then((res) => {
        this.machineCall = res.data
      })
    },
    getSloganData() {
      const data = this.CreateData1('11', 'TV_slogan查询')
      this.ExecDatabase(data).then((res) => {
        this.slogan = res.data[0]['slogan']
      })
    },
    getStationInfoData() {
      const params = []
      params[0] = ['SearchType', 2]
      const data = this.CreateData1('11', 'TV_工位信息_查询', params)
      this.ExecDatabase(data).then((res) => {
        this.stationInfo = res.data
      })
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    syncDatabaseTime() {
      const data = this.CreateData1('3', 'SELECT CONVERT(varchar(19), GETDATE(), 120) AS 当前时间')
      this.ExecDatabase(data).then((res) => {
        const currentTime = res.data && res.data[0] ? res.data[0].当前时间 : ''
        const date = currentTime ? new Date(currentTime.replace(/-/g, '/')) : null
        if (date && !isNaN(date.getTime())) {
          this.dbTimeBase = date
          this.dbTimeBaseTick = Date.now()
          console.info('[看板时间][PACK] 已同步数据库时间:', currentTime)
          this.getNowTime()
        } else {
          console.warn('[看板时间][PACK] 数据库时间格式异常，当前返回值:', currentTime)
        }
      }).catch(() => {
        // 数据库时间获取失败时保留当前基准；首次失败则临时使用本机时间。
        if (!this.dbTimeBase) {
          console.warn('[看板时间][PACK] 数据库时间获取失败，当前使用本机时间')
          this.getNowTime()
        } else {
          console.warn('[看板时间][PACK] 数据库时间获取失败，继续沿用上一次数据库基准时间')
        }
      })
    },
    getNowTime() {
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const date = this.dbTimeBase ? new Date(this.dbTimeBase.getTime() + Date.now() - this.dbTimeBaseTick) : new Date()
      this.currentTimeTick = date.getTime()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      this.year = date.getFullYear() + '年' + month + '月' + day + '日'
      this.time = hour + ':' + minute + ':' + second
      this.week = weekDays[date.getDay()]
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  //background-image:url("../assets/image/bg1.png");background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
}

.top-bg {
  margin-top: 1px;
  width: 100%;
  height: 140px;
  background-image: url('../assets/image/top.png');
  background-repeat: no-repeat;
  background-size: cover;

  img {
    width: 250px;
    margin: 30px 0 0 40px;
  }

  .top-title {
    //font-family: "Impact" ;
    font-size: 62px;
    text-align: center;
    margin-top: 16px;
    font-weight: bolder;
    color: transparent;
    background: linear-gradient(to bottom, #feffff 0%, #feffff 33%, #79bad3 66%, #a9d6e8 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .top-time {
    color: transparent;
    background: linear-gradient(to bottom, #feffff 0%, #feffff 33%, #79bad3 66%, #a9d6e8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-align: center;
    margin-left: 35px;
    font-weight: bolder;
    letter-spacing: 2px;
  }

  .year {
    font-size: 26px;
    margin-top: 10px;
  }

  .time {
    font-size: 45px;
  }
}

.plan-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  font-family: Impact, sans-serif;
  padding-top: 25px;
}

.plan-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plan-info-item-title {
  color: #e6f8ff;
  font-size: 47px;
  text-align: center;
}

.plan-info-item-value {
  background-image: url('../assets/image/numberBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 140px;
  font-weight: normal;
}

.plan-info-item-value-item {
  color: transparent;
  background: linear-gradient(to bottom, #d1f6ff 0%, #d1f6ff 30%, #4baed0 60%, #01b6e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 5px;
  font-size: 90px;
  letter-spacing: 3px;
  text-align: center;

  span {
    font-size: 50px;
    font-weight: normal;
  }
}

.plan-info-item-value-item-green {
  color: transparent;
  background: linear-gradient(to bottom, #dafbd1 0%, #d8facf 30%, #3db132 60%, #2bca09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 5px;
  font-size: 90px;
  text-align: center;

  span {
    font-size: 50px;
    font-weight: normal;
  }
}

.plan-info-item-value-item-red {
  color: transparent;
  background: linear-gradient(to bottom, #fed6dc 0%, #fed6dc 30%, #b64c67 60%, #dc1d3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 5px;
  font-size: 90px;
  text-align: center;

  span {
    font-size: 50px;
    font-weight: normal;
  }
}

.station-info {
  width: 100%;
  padding-top: 10px;
}

.station-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.station-info-item-value {
  width: 100%;
  margin: auto;
  background-image: url("../assets/image/tableBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  padding: 0;
  height: 78px;
  line-height: 78px;
  text-align: center;
  font-size: 34px;
  position: relative;
}

.station-info-item-value-stop {
  width: 100%;
  background-image: url("../assets/image/tableBg_stop.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  padding: 0;
  height: 78px;
  line-height: 78px;
  text-align: center;
  font-size: 34px;
  position: relative;
}

.station-info-item-value-call {
  width: 100%;
  background-image: url("../assets/image/tableBg_call.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  padding: 0;
  height: 78px;
  line-height: 78px;
  text-align: center;
  font-size: 34px;
  position: relative;
}

// 标题列样式（第一列固定宽度）
.station-info-header {
  width: 80px;
  flex-shrink: 0;
  flex-grow: 0;
  text-align: center;
}

.header-text {
  font-size: 28px;
  color: #d9f1f7;
  margin: 0 auto;
}

.header-text-small {
  font-size: 18px;
  color: #d9f1f7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.3;
  text-align: center;
}

.station-info-item-value-span0 {
  color: #e6f8ff;
}

.station-info-item-value-span1 {
  color: #7db7db;
}

.station-info-item-value-span2 {
  color: transparent;
  background: linear-gradient(to bottom, #d1f6ff 0%, #d1f6ff 30%, #4baed0 60%, #01b6e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.station-info-item-value-span3 {
  color: #7db7db;
}

.line {
  width: 100%;
  height: 5px;
  background-color: #476298;
}

.line-white {
  width: 100%;
  height: 10px;
  //background: linear-gradient(to bottom, #47586f 0%, #738598  50%, #47586f 100%);
}

.top-problem {
  height: 315px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.top-problem-left {
  width: 1100px;
  flex-shrink: 0;
  flex-grow: 0;
  height: 200px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 36px;
  color: #e6f8ff;
  padding: 15px 0 0 10px;
  //font-weight: bolder;
}

.top-problem-left-title {
  width: 130px;
  text-align: center;
  flex-shrink: 0;
  flex-grow: 0;
  padding-top: 10px;
}

.top-problem-left-item {
  height: auto;
  font-size: 0;
  padding-right: 10px;
  display: flex;
}

.top-problem-left-item-content {
  font-size: 40px;
  line-height: 2;
}

.top-problem-left-warp {
  overflow: hidden;
  height: 265px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    &.ul-item {
      display: flex;

      .li-item {
        margin: 0 10px 0 0;
        width: 330px;
        height: 368px;
      }
    }
  }
}

.top-problem-center {
  height: 150px;
  width: 2px;
  flex-shrink: 0;
  flex-grow: 0;
  background: linear-gradient(to bottom, #47586f 0%, #738598 50%, #47586f 100%);
  margin-top: 30px;
}

.top-problem-right {
  padding: 15px 0 0 30px;
  height: 200px;
  flex: 1;
  color: #e6f8ff;
  font-size: 30px;
}

.top-problem-right-item {
  height: auto;
  font-size: 0;
  padding-right: 10px;
  display: flex;
}

.top-problem-right-item-content {
  font-size: 30px;
  line-height: 1.5;
}

.top-problem-right-warp {
  overflow: hidden;
  height: 265px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    &.ul-item {
      display: flex;

      .li-item {
        margin: 0 10px 0 0;
        width: 330px;
        height: 368px;
      }
    }
  }
}

.bottom {
  background-color: #051332;
  height: 60px;
  background-image: url("../assets/image/bottom.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.slogan {
  font-family: Impact, sans-serif;
  font-size: 30px;
  text-align: center;
  color: transparent;
  background: linear-gradient(to bottom, #ffffff 0%, #e1f0ff 30%, #afcfff 60%, #637daa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-top: 5px;
  white-space: pre;
}

.machineStop {
  position: absolute;
  bottom: 55px;
  left: 0;
  height: 280px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  width: 100%;
}

.machineStop-warp {
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    &.ul-item {
      display: flex;

      .li-item {
        margin: 0 10px 0 0;
        width: 330px;
        height: 368px;
      }
    }
  }
}

.machineStop-item {
  height: auto;
  font-size: 0;
  padding-right: 10px;
  display: flex;
}

.machineStop-item-content {
  font-size: 46px;
  line-height: 1.5;
}

/* 单条数据时的样式：铺满并放大字体 */
.machineStop-single {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.machineStop-single-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.machineStop-single-content {
  font-size: 72px;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
