村/社区布局完成

This commit is contained in:
aixianling
2024-09-03 16:28:23 +08:00
parent 5bc9f859f4
commit 4f36215dad

View File

@@ -1,7 +1,24 @@
<script>
import {mapState} from "vuex"
export default {
name: "AppDvWeiyang",
label: "未央最新定制大屏",
props: {
instance: Function,
dict: Object,
menuName: {default: '未央最新定制大屏'}
},
data() {
return {
areaId: ""
}
},
computed: {
...mapState(["user"]),
currentAreaId: v => v.areaId || v.user.info.areaId,
isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId)
},
mounted() {
}
@@ -9,24 +26,45 @@ export default {
</script>
<template>
<section class="AppDvWeiyang">
<div class="a"></div>
<div class="a1"></div>
<div class="b"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="c"></div>
<div class="c1 grid">
<div class="item row"></div>
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
</div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<section class="AppDvWeiyang" :class="{isLastAreaLevel}">
<template v-if="isLastAreaLevel">
<div class="a"></div>
<div class="a1"></div>
<div class="b"></div>
<div class="bb grid">
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
</div>
<div class="b2"></div>
<div class="cc grid">
<div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
</div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
</template>
<template v-else>
<div class="a"></div>
<div class="a1"></div>
<div class="b"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="c"></div>
<div class="c1 grid">
<div class="item row"></div>
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
</div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
</template>
</section>
</template>
<style lang="scss">
@@ -52,12 +90,34 @@ export default {
"h h i i j j g g"
"h h i i j j g g";
&.isLastAreaLevel {
grid-template-areas:
"a a1 b bb b2 b2 cc cc"
"e e f f f f g g"
"e e f f f f g g"
"j j f f f f g g"
"j j f f f f g g"
"h h i i i i g g"
"h h i i i i g g";
.bb {
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
.cc {
grid-area: cc;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
}
.item {
background: #7583900f;
backdrop-filter: blur(8px);
}
@each $area in (a, a1, b, b1, b2, c, c1, d, e, f, g, h, i, j) {
@each $area in (a, a1, b, b1, b2, c, c1, c2, d, e, f, g, h, i, j) {
.#{$area} {
grid-area: $area;
@if not index((c1),$area) {