kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

村/社区布局完成

Browse Source
This commit is contained in:
aixianling
2024-09-03 16:28:23 +08:00
parent 5bc9f859f4
commit 4f36215dad
1 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
project/biaopin/dv/weiyang/AppDvWeiyang.vue
View File

@@ -1,7 +1,24 @@
<script> <script>
import {mapState} from "vuex"
export default { export default {
name: "AppDvWeiyang", name: "AppDvWeiyang",
label: "未央最新定制大屏", 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() { mounted() {
} }
@@ -9,24 +26,45 @@ export default {
</script> </script>
<template> <template>
<section class="AppDvWeiyang"> <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
<div class="a"></div> <template v-if="isLastAreaLevel">
<div class="a1"></div> <div class="a"></div>
<div class="b"></div> <div class="a1"></div>
<div class="b1"></div> <div class="b"></div>
<div class="b2"></div> <div class="bb grid">
<div class="c"></div> <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
<div class="c1 grid"> </div>
<div class="item row"></div> <div class="b2"></div>
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div> <div class="cc grid">
</div> <div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
<div class="d"></div> </div>
<div class="e"></div> <div class="d"></div>
<div class="f"></div> <div class="e"></div>
<div class="g"></div> <div class="f"></div>
<div class="h"></div> <div class="g"></div>
<div class="i"></div> <div class="h"></div>
<div class="j"></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> </section>
</template> </template>
<style lang="scss"> <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"
"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 { .item {
background: #7583900f; background: #7583900f;
backdrop-filter: blur(8px); 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} { .#{$area} {
grid-area: $area; grid-area: $area;
@if not index((c1),$area) { @if not index((c1),$area) {