<template>
  <div>
    <el-col :span="3">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :style="{ minHeight: tableheight }"
        style="height:200px;overflow:auto;"
      >
        <el-menu-item index="1">
          <span slot="title">上塘街道</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span slot="title">上塘街道</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span slot="title">上塘街道</span>
        </el-menu-item>
        <el-menu-item index="4">
          <span slot="title">上塘街道</span>
        </el-menu-item>
        <el-menu-item index="5">
          <span slot="title">上塘街道</span>
        </el-menu-item>
      </el-menu></el-col
    >
    <el-col :span="21">
      <div class="box-card">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="card-title">宁波市启文社区垃圾分类视频检视下载</span>
            <el-button
              style="float: right; padding: 5px;margin:0 5px;"
              type="primary"
              >本月</el-button
            >
            <el-button style="float: right; padding: 5px" type="primary"
              >上月</el-button
            >
          </div>
          <div class="text item">
            <div>用户数(户)：1021</div>
            <div>平台使用人数：2329</div>
            <div>视频数量：2079</div>
            <div>文件大小：1.2G</div>
          </div>
          <div class="right">
            <el-divider></el-divider>
            <el-button type="primary"
              >下载</el-button
            >
          </div>
        </el-card>
      </div>
      <div class="box-card bottom">
        <el-card>
          <div class="clearfix">2020-03-30</div>
          <el-divider></el-divider>
          <div v-for="i in 6" :key="i">
            <div class="vditem"></div>
          </div>
        </el-card>
      </div>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      tableheight: parseInt(window.innerHeight) - 120 + "px"
    };
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleOpen() {
      console.log(111);
    },
    handleClose() {
      console.log(111);
    }
  },
  created() {
    console.log(this.tableheight);
  }
};
</script>
<style scoped>
.about {
  height: 100%;
}
.box-card {
  width: 100%;

  /* display: flex;
  align-items: center;
  background-color: white;
  height: 200px; */
  padding: 0 20px;
}
.clearfix {
  text-align: left;
}
.card-title {
  font-size: 18px;
  font-weight: 550;
}
.text {
  text-align: left;
}
.bottom {
  margin-top: 20px;
}
.vditem {
  width: 230px;
  height: 180px;
  background-color: #ededed;
  margin-right: 10px;
  margin-top: 10px;
  float: left;
}
.item div{
  line-height: 35px;
}
.right{
  text-align: right;
}
</style>
