<template>
  <div class="unit">
    <!-- 管理单位 -->
    <div>
      <div class="building-info">
        <ul>
          <li>
            <span>管理形式：</span>
            <p>有管理单位（非物业）</p>
          </li>
          <li>
            <span>所属管理：</span>
            <p>重庆大剧院管理有限公司</p>
          </li>
          <li>
            <span>消防安全联系人：</span>
            <p>王武</p>
          </li>
        </ul>
        <ul>
          <li>
            <span>消防安全责任人：</span>
            <p>李四</p>
          </li>
          <li>
            <span>消防安全管理人：</span>
            <p>王五</p>
          </li>
          <li>
            <span>联系方式：</span>
            <p>13556723998</p>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <div class="title">入住单位列表</div>
      <div>
        <div class="row header">
          <span class="idx">序号</span>
          <span class="in_unit">入住单位</span>
          <span class="person">责任人</span>
          <span class="manage">管理人</span>
        </div>
        <VueSeamlessScroll
          :data="list"
          :class-option="classOption"
          class="warp"
        >
          <ul class="item">
            <li class="row" v-for="(item, index) in list" :key="index">
              <span class="idx">{{ index + 1 }}</span>
              <span class="in_unit">{{ item[0] }}</span>
              <span class="person">{{ item[1] }}</span>
              <span class="manage">{{ item[2] }}</span>
            </li>
          </ul>
        </VueSeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "GementUnit",
  data() {
    return {
      list: [
        ["国泰艺术中心", "王晓辉", "李小小"],
        ["人民大礼堂", "李四", "张三"],
        ["人民大礼堂", "王五", "赵六"],
        ["花博艺术中心", "张米", "刘小明"],
        ["人民大礼堂", "王五", "赵六"],
        ["人民大礼堂", "王五", "赵六"],
        ["人民大礼堂", "王五", "赵六"],
        ["人民大礼堂", "王五", "赵六"],
      ],
    };
  },
  components: {
    VueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        singleHeight: 29,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.unit {
  padding: 10px 10px;
  .building-info {
    display: flex;
    // letter-spacing: 1px;
    line-height: 31px;

    ul:first-child {
      flex: 1;
    }
    ul:last-child {
      width: 190px;
    }
    li {
      overflow: hidden;
    }
    p {
      font-size: 14px;
      display: inline-block;
    }
    span {
      color: #78c3cd;
      font-size: 12px;
    }
  }
}

.title {
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background-color: rgba(0, 163, 255, 0.3) !important;
}
.warp {
  height: 85px;
  margin: 0 auto;
  overflow: hidden;
  .item {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
  }
}

.header {
  color: #98dfe9 !important;
  height: 30px !important;
  line-height: 30px !important;
  background-color: rgba(7, 188, 223, 0.8) !important;
  margin-top: 2px; //07BCDF
  font-size: 12px !important;
}

li.row {
  border-bottom: 1px dotted #1d525f;
  box-sizing: border-box;
}

.row,
li.row {
  display: block;
  height: 29px;
  line-height: 29px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  .idx,
  .in_unit,
  .person,
  .manage {
    flex: 0.25;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
