86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<!--
|
|
* @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>
|