<template>
  <div class="container">
    <div class="nav">
      <div class="nav-item"></div>
      <div class="nav-item">技术员看板</div>
      <div class="nav-item">{{ todayTime }}</div>
    </div>
    <div class="content">
      <div class="block">
        <div class="card">
          <div class="header">
            <div class="header-item">现场库存</div>
            <div class="header-item">
              <p class="label">总金额（元）</p>
              <p>0</p>
            </div>
            <div class="header-item">
              <p class="label">总卷数</p>
              <p>0</p>
            </div>
            <div class="header-item">
              <p class="label">总米数</p>
              <p>0</p>
            </div>
          </div>
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">人员</div>
            <div class="th">金额</div>
            <div class="th">卷数</div>
            <div class="th">米数</div>
          </div>
          <div class="table">
            <div class="tr" v-for="item in 22" :key="item">
              <div class="td">1</div>
              <div class="td">2</div>
              <div class="td">3</div>
              <div class="td">4</div>
              <div class="td">5</div>
            </div>
          </div>
        </div>
        <div class="card">
          123
        </div>
        <div class="card">
          123
        </div>
      </div>
      <div class="block" style="margin-top: 16px">
        <div class="card">
          <div class="header">
            <div class="header-item">现场库存详情</div>
          </div>
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">面料名称</div>
            <div class="th">规格</div>
            <div class="th">用途</div>
            <div class="th">类型</div>
            <div class="th">所属人员</div>
            <div class="th">现场库存卷数</div>
            <div class="th">现场库存米数</div>
            <div class="th">现场库存金额</div>
          </div>
          <div class="table">
            <div class="tr" v-for="item in 22" :key="item">
              <div class="td">1</div>
              <div class="td">12312312312312312</div>
              <div class="td">3</div>
              <div class="td">4</div>
              <div class="td">5</div>
              <div class="td">2</div>
              <div class="td">3</div>
              <div class="td">4</div>
              <div class="td">5</div>
            </div>
          </div>
        </div>
        <div class="card">
          123
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'technology_board',
  data () {
    return {
      timer: null,
      todayTime: this.$dayjs().format('YYYY-MM-DD')
    }
  },
  methods: {

  },
  mounted () {
    this.timer = setInterval(() => {
      this.todayTime = this.$dayjs().format('YYYY-MM-DD')
    }, 1000)
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .nav {
    background: #333333;
    display: flex;
    justify-content: space-between;
    .nav-item {
      flex: 1;
      padding: 10px 0;
      font-size: 24px;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
    }
  }
  .content {
    padding: 10px 20px;
    flex: 1;
    min-width: 1200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .block {
      flex: 1;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      .card {
        flex: 1;
        overflow: hidden;
        margin-right: 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #d7d7d7;
        border-radius: 5px;
        &:last-child {
          margin-right: 0;
        }
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .header-item {
            padding: 10px 0;
            flex: 2;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            border-right: 1px solid #d7d7d7;
            &:first-child {
              flex: 3;
            }
            &:last-child {
              border-right: none;
            }
            .label {
              font-size: 12px;
              font-weight: normal;
              color: #747474;
            }
          }
        }
        .table {
          flex: 1;
          overflow: auto;
          display: flex;
          flex-direction: column;
        }
        .tr {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #d7d7d7;
          .td, .th {
            padding: 5px;
            flex: 1;
            overflow: hidden;
            height: 100%;
            text-align: center;
            border-right: 1px solid #d7d7d7;
            &:last-child {
              border-right: none;
            }
          }
          .th {
            border-right: none;
            background: #d7d7d7;
          }
        }
      }
    }
  }
}
</style>
