<!--
 * @Author: zwq
 * @Date: 2020-12-29 16:37:56
 * @LastEditors: zwq
 * @LastEditTime: 2022-11-03 08:58:07
 * @Description:
-->
<template>
  <div class="container">
    <div
      v-for="i in areaArr"
      :key="i"
      :style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
      class="area"
    >
      <el-row>
        <el-col :span="1"><div class="areaName">{{ i }}</div></el-col>
        <el-col :span="23">
          <div class="locationFlex">
            <div
              v-for="l in 72"
              :key="l"
              :class="l>Math.round(Math.random()*100)?'waring':''"
              :style="{ marginRight: 6 * beilv + 'px',marginTop: 2 * beilv + 'px',marginBottom: 1 * beilv + 'px',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}"
              class="location"
            >{{ l }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'

export default {
  // components: { SmallTitle },
  props: {
    beilv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区']
    }
  },
  methods: {}
}
</script>

<style scoped>
.area {
  background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent);
  background-size: 100% 100%;
  padding: 5px 0;
  padding-left: 15px;
  text-align: center;
  border-radius: 4px;
  border: 1px dotted #5EC3D8;
}
.areaName {
  margin-top: 100%;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}
.locationFlex{
  margin-left: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.location{
  background: #63cf74;
  border-radius: 4px;
  font-size: 12px;
  line-height: 25px;
}
.waring{
  background: #FF5D6B;
}
</style>
