<template>
    <section class="bg">
      <!-- <t-header title="顺安大屏监控-生产统计">
      </t-header> -->
      <t-header title="顺安大屏监控——仓储监控">
        <div class="pages">
          <router-link to="/LogisticsProcess">物流工艺</router-link>
          <router-link to="/ProdCount">生产统计</router-link>
          <!-- <router-link to="/setup">设备监控</router-link> -->
        </div>
      </t-header>
      <div class="container">
        <div class="top_wrapper">
          <div class="yard-wrap">
            <div class="cont-1">
              <div class="corridor_2">困料监控</div>
              <div class="tags">
                <div class="tag_type">
                  <div class="type_color green"></div>
                  <div class="tag_text">静置中</div>
                </div>
                <div class="tag_type">
                  <div class="type_color blue"></div>
                  <div class="tag_text">空盅</div>
                </div>
                <div class="tag_type">
                  <div class="type_color yellow"></div>
                  <div class="tag_text">静置完成</div>
                </div>
                <div class="tag_type">
                  <div class="type_color red"></div>
                  <div class="tag_text">强制完成</div>
                </div>
              </div>
            </div>
            <div class="yard_group clearfix" style="display: flex;">
              <div class="tcon1">
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(0, 12)" :key="i" :class="{mgl10: i === 2 || i === 4 || i === 6 || i === 8 || i === 10}">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                        <!-- <p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
                        <p class="tan_p">载具：{{e.vehicleCode}}</p>
                        <p class="tan_p">物料：{{e.materialCode}}</p>
                        <p class="tan_p">名称：{{e.materialName}}</p>
                        <p class="tan_p">重量(kg)：{{e.weight}}</p>
                        <p class="tan_p">入库时间：{{e.warehousingTime}}</p>
                        <p class="tan_p">静置(h)：{{e.standTime}}</p> -->
                        <!-- <img src="../../assets/images/screen3/popup_bg.png" alt=""> -->
                        <!-- <img src="../../assets/images/screen3/popup_line.png" alt=""> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lbox lbox2">
                  <div class="conn1"  v-for="(e, i) in group01.slice(12, 26)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tcon2">
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(26, 30)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(30, 34)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(34, 38)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tcon3">
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(38, 41)" :key="i" :class="{mgl10: i === 1 || i === 2 || i === 3}">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lbox">
                  <div class="conn1"  v-for="(e, i) in group01.slice(16, 17)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon">
                        <div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="corridor_2">成型暂存监控</div>
            <div class="yard_group clearfix" style="display: flex;">
              <div class="tcon1">
                <div class="lbox">
                  <div class="conn1" style="width: 137px;" v-for="(e, i) in group02.slice(0, 14)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="lbox lbox2">
                  <div class="conn1" style="width: 137px;" v-for="(e, i) in group02.slice(14, 28)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-top-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yard-right">
            <div class="corridor_2">出窑暂存监控</div>
            <div class="yard_group clearfix" style="display: flex; margin-top: -25px;">
              <div class="tcon1">
                <div class="lbox colbox">
                  <div class="conn1"  v-for="(e, i) in group03.slice(0, 7)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-bottom-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content contentrt">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tcon1">
                <div class="lbox colbox">
                  <div class="conn1"  v-for="(e, i) in group03.slice(7, 14)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-bottom-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content contentrt">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tcon1" style="margin-left: 60px;">
                <div class="lbox colbox">
                  <div class="conn1"  v-for="(e, i) in group03.slice(14, 20)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-bottom-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content contentrt">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tcon1">
                <div class="lbox colbox">
                  <div class="conn1"  v-for="(e, i) in group03.slice(20, 26)" :key="i">
                    <div class="a-box" @click="showInfo(e)">
                      <div class="atext">{{e.storageLocation}}</div>
                      <div class="acon acon2">
                        <div class="maskbox"></div>
                      </div>
                    </div>
                    <div class="b-box" v-show="flg === e.storageLocation">
                      <div class="border left-bottom-border">
                        <img src="../../assets/images/screen3/dot_line.png" alt="">
                      </div>
                      <div class="content contentrt">
                        <div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
                        <p class="tan_p"  v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom_wrapper">
          <div class="bottom_wrapper_l">
            <div class="block_h2">
              <h2>困料库存</h2>
            </div>
            <div class="list_scroll_title">
              <span>货位</span><span>物料编码</span><span>物料名称</span><span>重量(kg)</span><span>已静置(h) </span><span>状态</span>
            </div>
            <vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
              <ul class="content-block-scroll-ul">
                <li v-for="(e, i) in array1" :key="i">
                  <span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.weight}}</span><span>{{e.standTime}}</span><span>{{e.standStatusName}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="bottom_wrapper_l">
            <div class="block_h2">
              <h2>成型库存</h2>
            </div>
            <div class="list_scroll_title">
              <span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
            </div>
            <vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
              <ul class="content-block-scroll-ul">
                <li v-for="(e, i) in array2" :key="i">
                  <span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.qty}}</span><span>{{e.vehicleCode}}</span><span>{{e.warehousingTime}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="bottom_wrapper_l">
            <div class="block_h2">
              <h2>出窑库存</h2>
            </div>
            <div class="list_scroll_title">
              <span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
            </div>
            <vue-seamless-scroll :data="array3" :class-option="classOption" class="content-block-scroll">
              <ul class="content-block-scroll-ul">
                <li v-for="(e, i) in array3" :key="i">
                  <span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.qty}}</span><span>{{e.vehicleCode}}</span><span>{{e.warehousingTime}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <section class="bottom"></section>
    </section>
</template>

<script>
import THeader from '@components/header.vue'
import { storageMonitor } from '@js/getData11'
export default {
  name: 'StorageMonitor',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      testArr: [
        {
          storageLocation: 111
        },
        {
          storageLocation: 222
        },
        {
          storageLocation: 333
        },
        {
          storageLocation: 444
        },
        {
          storageLocation: 555
        },
        {
          storageLocation: 666
        },
        {
          storageLocation: 777
        },
        {
          storageLocation: 888
        },
        {
          storageLocation: 999
        },
        {
          storageLocation: 1001
        },
        {
          storageLocation: 1002
        },
        {
          storageLocation: 1003
        }
      ],
      testArr2: [
        {
          storageLocation: 1
        },
        {
          storageLocation: 2
        },
        {
          storageLocation: 3
        },
        {
          storageLocation: 4
        },
        {
          storageLocation: 5
        },
        {
          storageLocation: 6
        },
        {
          storageLocation: 7
        },
        {
          storageLocation: 8
        },
        {
          storageLocation: 9
        },
        {
          storageLocation: 10
        },
        {
          storageLocation: 11
        },
        {
          storageLocation: 12
        },
        {
          storageLocation: 13
        },
        {
          storageLocation: 14
        }
      ],
      materArr1: [],
      materArr2: [],
      structArr: [],
      array1: [],
      array2: [],
      array3: [],
      group01: [],
      group02: [],
      group03: [],
      code1: '',
      flg: ''
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted () {
    // lock_type 00空闲，01锁定
    // stand_status 0为空，2为静置中，3为静置完成，4为强制静置完成，5为静置超时
    this.initData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        // this.code1 = ''
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await storageMonitor()
      this.array1 = res.standStock
      this.array1.map(el => {
        if (el.standStatus === '1') {
          el.standStatusName = '静置中'
        }
        if (el.standStatus === '2') {
          el.standStatusName = '静置完成'
        }
        if (el.standStatus === '3') {
          el.standStatusName = '强制静置完成'
        }
        if (el.standStatus === '4') {
          el.standStatusName = '静置超时'
        }
        if (el.standStatus === '5') {
          el.standStatusName = '强制静置超时'
        }
      })
      this.array2 = res.frontWarehouseStock
      this.array3 = res.backWarehouseStock
      this.group01 = res.standMonitor
      this.group02 = res.frontWarehouseMonitor
      this.group03 = res.backWarehouseMonitor
      console.log(this.group01, 666)
      // for (let i = 0; i < this.group01.length; i++) {
      //   this.group01[i] = Object.assign(this.group01[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
      // }
      // for (let i = 0; i < this.group03.length; i++) {
      //   this.group03[i] = Object.assign(this.group03[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
      // }
      // for (let i = 0; i < this.group02.length; i++) {
      //   if (i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 47 || i === 48 || i === 49 || i === 50 || i === 51) {
      //     this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
      //   } else {
      //     this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
      //   }
      // }
    },
    // getdata(e) {
    //   // getdata(21),22,23
    //   // this.code1 = this.code1 === id ? '' : id

    //   // list：【
    //     id:xxx,
    //     show: false
    //   】
    //   e.show = true
    //   {show: true}
    //   show:false
    // },
    getInfo1 (e) {
      this.code1 = this.code1 === e.point_code ? '' : e.point_code
    },
    closebtn () {
      this.code1 = ''
    },
    showInfo (e) {
      this.flg = this.flg === e.storageLocation ? '' : e.storageLocation
    },
    closeInfo () {
      this.flg = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.cgreen
  color #30EBC9 !important
.cyellow
  color #E2BB0E !important
.cred
  color #FF0000 !important
.status1
  color #32C5FF
.status2
  color #F7B502
.bg
  _wh(100%, 100%)
  overflow hidden
.container
  _wh(100%, calc(100% - 1.38rem))
  padding 0rem .2509rem 0
  overflow hidden
  clear both
.bottom
  _wh(100%, .38rem)
  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
  position fixed
  bottom 0
.top_wrapper
  position relative
  height 66%
  display flex
.tag_block
  position absolute
  // bottom .1rem
  top -5px
  right .3rem
  _fj(row)
.tag_type
  _fj(row)
.type_color
  width .1rem
  height .1rem
  border-radius 50%
  margin-right 10px
.tag_text
  font-size .12rem
  line-height .2rem
.blue
  background #32C5FF !important
.green
  background #30EBC9 !important
.gray
  background #516282 !important
.yellow
  background #E2BB0E !important
.orange
  background #F96700 !important
.red
  background #FF0000 !important
.cblue
  color #32C5FF !important
.cgreen
  color #30EBC9 !important
.cgray
  color #516282 !important
.cyellow
  color #E2BB0E !important
.corange
  color #F96700 !important
.cred
  color #FF0000 !important
.lock
  border .02rem solid #f00 !important
.yard-wrap
  // height 6.95rem
  height 100%
  width 80%
  // padding .1rem 0
.yard_group
  width 100%
  // height calc(50% - 46px)
  clear both
  &:nth-child(1)
    margin-bottom 20px
.yard_group_ul
  float left
  display grid
  grid-gap 0
  justify-items center
  align-items center
  margin-top -.01rem
.yard_group_ul_1
  width 80%
  position absolute
  grid-template-columns repeat(18, 80% / 18)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_ul_2
  width 100%
  position absolute
  grid-template-columns repeat(14, 80% / 14)
  // grid-template-columns repeat(26, 100% / 26)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_ul_3
  width 20%
  grid-template-columns repeat(5, 100% / 5)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_ul_4
  width 100%
  grid-template-columns repeat(4, 80% / 4)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(7, 73px)
.yard_group_cell
  position relative
  display inline-block
  width 100%
  // height calc(1.8rem / 2)
  height 100%
  box-sizing border-box
  border 1px solid #32C5FF
  background #000F2B
  border-radius 8px
.yard_group_p
// height calc(1.8rem / 2)
height 90px
  p
    font-size 12px
    // line-height 0.28rem
    line-height 28px
    height 28px
    -webkit-text-size-adjust none
    text-align center
    white-space nowrap
  img
    display block
    width 60%
    // height 0.6rem
    height 60px
    margin 0 auto
.machine_1
  position absolute
  width 60%
  width 100%
  height 78px
  overflow hidden
  background center center / 100% 100% url(../../assets/images/screen1/zhong.png) no-repeat
  margin 0 auto
  z-index 98
  // left 50%
  // margin-left -30%
  opacity 0.5
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
.machine_2
  position absolute
  width 60%
  width 100%
  height 78px
  overflow hidden
  background center center / 100% 100% url(../../assets/images/screen1/cp1.jpg) no-repeat
  margin 0 auto
  z-index 98
  // left 50%
  // margin-left -30%
  opacity 0.5
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
.ingbox
  position absolute
  bottom 0
  width 100%
  z-index 97 //
.corridor_2
  _wh(80%,22px)
  _font(16px, 22px, #fff,,left)
  margin 22px 12px 30px 0
.locate-wrap
  position absolute
  width 100%
  bottom -40%
.locate-content
  position absolute
  width 2.9rem
  height 2.74rem
  z-index 99
  background center center / 100% 100% url(../../assets/images/screen1/popover_1.png) no-repeat
  padding .36rem .15rem
.tan_pline
  width 100%
  margin 0 auto
.tan_p
  font-size .12rem
  line-height .36rem
  height .36rem
  overflow hidden
  color #fff
  span
    padding-right .4rem
    float right
.close_btn
  position absolute
  top 3%
  right 10%
  margin-right -.25rem
  font-size .14rem
  border-radius 5px
  cursor pointer
.bottom_wrapper
  display flex
  width 100%
  height 40%
  // padding-top 120px
  padding-bottom 10px
  _fj(row)
.bottom_wrapper_l
  // _wh(calc(33%), 100%)
  width 100%
  height 100%
  position relative
.title
  position absolute
  top .15rem
  left .25rem
// .block_h2
//   _wh(100%, 22px)
//   margin 12px
//   h2
//     font-size 16px
//     line-height 22px
.block_h2
    _wh(calc(100% - 12px), 32px)
    margin 17px 0 10px 0
    padding-left 0.55rem
    background center center / 100% 100% url(../../assets/images/screen1/title_bg_d1.png) no-repeat
    h2
      _font(16px, 32px, #fff,,left)
.list_scroll_title
  width calc(100% - 12px)
  // width calc(100% - 30px)
  // margin 0 15px
  background #262F52
  span
    display inline-block
    width 13%
    text-align center
    line-height 32px
    font-size 12px
    color rgba(255,255,255,0.60)
    // float left
    &:nth-child(2)
      width 22%
      text-align center
    &:nth-child(3)
      width 22%
      text-align center
    &:nth-child(6)
      width 15%
.content-block-scroll
  // width calc(100% - 30px)
  // margin 0 15px 4px 15px
  width calc(100% - 12px)
  margin 0 0px 4px 0px
  height calc(100% - 82px)
  overflow hidden
.content-block-scroll-ul
  width 100%
  li
    width 100%
    height 38px
    _fj(row, center)
    &:nth-child(2n)
      background rgba(38,47,82,0.50)
    span
      display inline-block
      width 13%
      padding 0 2px
      font-size 12px
      transform scale(0.7)
      text-align center
      line-height 38px
      box-sizing border-box
      // float left
      &:nth-child(2)
        width 22%
        line-height 28px
        // transform scale(0.6)
        white-space:normal
        text-align center
      &:nth-child(3)
        width 22%
        line-height 28px
        // transform scale(0.6)
        white-space:normal
        text-align center
      &:nth-child(6)
        width 18%
.foldcricle0
  position absolute
  z-index 102
  width .24rem
  height .24rem
  background center center / 100% 100% url(../../assets/images/screen1/dot.png) no-repeat
.foldcricle2
  top .50rem
  left .6rem
.foldcricle1
  top 0
  left -0.1rem
.foldline0
  position absolute
  z-index 102
  border 1px dashed #32C5FF
  height 1px
.foldline1
  width .33rem
  top .12rem
  left .09rem
.foldline2
  width .60rem
  top .39rem
  left .27rem
  transform rotate(60deg)
.coordinate1
  left .9rem
  top -.14rem
.coordinate2
  right .86rem
  top -.14rem
.coordinate3
  left .9rem
  bottom .86rem
.aline1
  position absolute
  z-index 102
  top -.70rem
  left .88rem
.bline1
  position absolute
  top -.70rem
  left .93rem
.aline2
  position absolute
  z-index 102
  transform rotate(180deg)
  top -.50rem
  left 0px
.bline2
  position absolute
  z-index 102
  transform rotate(60deg)
  top -1.05rem
  right 1.28rem
.aline3
  position absolute
  z-index 102
  transform rotate(0deg)
  bottom .7rem
  left .88rem
.bline3
  position absolute
  z-index 102
  transform rotate(-120deg)
  bottom .2rem
  left 1.38rem
// .foldcricle0
//   position absolute
//   z-index 102
//   width 24px
//   height 24px
//   background center center / 100% 100% url(../../assets/images/screen1/dot.png) no-repeat
// .foldcricle2
//   top 50px
//   left 55px
// .foldcricle1
//   top 0
//   left -0.1rem
// .foldline0
//   position absolute
//   z-index 102
//   border 1px dashed #32C5FF
//   height 1px
// .foldline1
//   width 30px
//   top 12px
//   left 9px
// .foldline2
//   width 60px
//   top 38px
//   left 24px
//   transform rotate(60deg)
// .coordinate1
//   left 38px
//   top -14px
// .coordinate2
//   right 53px
//   top -14px
// .coordinate3
//   left 38px
//   bottom 66px
// .aline1
//   position absolute
//   z-index 102
//   top -70px
//   left 88px
// .bline1
//   position absolute
//   top -70px
//   left 88px
// .aline2
//   position absolute
//   z-index 102
//   transform rotate(180deg)
//   top -50px
//   left 0px
// .bline2
//   position absolute
//   z-index 102
//   transform rotate(60deg)
//   top -100px
//   right 138px
// .aline3
//   position absolute
//   z-index 102
//   transform rotate(0deg)
//   bottom 50px
//   left 88px
// .bline3
//   position absolute
//   z-index 102
//   transform rotate(-120deg)
//   bottom -2px
//   left 138px
.yard_group_p
  _wh(100%, 100%)
.fontselect
  _font(12px, 30px, #fff,,)
  // transform scale(0.8)
  white-space:nowrap
.mgl1
  margin-left -22px
.mgl2
  margin-left 0px
.yard-right
  width 18%
  height 100%
  margin-left 2%
  box-sizing border-box
  // border 1px solid #32c5ff
.cont-1
  display flex
.tags
  display flex
  width 20%
  align-items center
  justify-content space-around
.mgt5
  margin-left 100px
.mgt6
  margin-left 150%
.pages
  position absolute
  left .2509rem
  top 11%
  _wh(20%, .4rem)
  _fj(flex-start)
  a
    cursor pointer
    font-family "SourceHanSansCN"
    _font(.18rem, .30rem, #fff, 700,)
    letter-spacing .01rem
    padding .05rem .2rem
    border-radius .05rem
    background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
    +a
      margin-left .2rem
.tcon2
  width 300px
  margin-left 40px
.lbox
  width 80%
  display flex
.lbox2
  margin-top 40px
.conn1
 position relative
 width 60px
.a-box
  width 60px
  height 91px
  border 1px solid #32c5ff
  border-radius 8px
  .atext
    _font(12px, 18px, #fff,,)
    transform scale(0.8)
    white-space:normal
    text-align center
    height 35px
  .acon
    width 100%
    height 61%
    background center center / 100% 100% url(../../assets/images/screen1/zhong.png) no-repeat
    border-bottom-right-radius 8px
    border-bottom-left-radius 8px
  .maskbox
    width 100%
    height 100%
    // background #ff0
    position relative
    opacity 0.5
    border-bottom-right-radius 8px
    border-bottom-left-radius 8px
  .acon2
    background center center / 100% 100% url(../../assets/images/screen1/cp1.jpg) no-repeat
    opacity 0.3
.b-box
  position absolute
  z-index 11
  top 0px
  left 50px
  .border
    width 127px
    height 105px
    position absolute
    left 0px
    top 40px
    z-index 10
  .left-top-border
    transform rotateY(180deg)
  .left-bottom-border
    transform rotate(0deg)
    left -166px
  .right-top-border
    transform rotateY(180deg)
  .right-bottom-border
    transform rotateY(180deg)
  .content
    width 310px
    height 300px
    border-sizing border-box
    padding 20px
    position absolute
    left 115px
    background center center / 100% 100% url(../../assets/images/screen1/popover_1.png) no-repeat
    // background-image url(../../assets/images/screen3/popup_bg.png)
    background-repaeat no-repeat
  .contentrt
      left: -432px;
    p
      width 100%
      line-height 30px
.icon-guanbi2
  position: absolute;
  top: 8px;
  right: 9px;
  width: 30px;
  height: 22px;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  background-color: #0a3679;
.close_btn2
  position: absolute;
  top: 3%;
  right: 10%;
  margin-right: -0.25rem;
  font-size: 0.14rem;
  line-height: 0.34rem;
  padding: 0 0.16rem;
  border-radius: 5px;
  cursor: pointer;
.mgl10
  margin-left 23px
.colbox
  display flex
  flex-direction column
</style>
