村/社区布局完成
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user