158 lines
3.4 KiB
Vue
158 lines
3.4 KiB
Vue
<script>
|
|
import {mapState} from "vuex"
|
|
import SubHeader from "./comps/subHeader.vue";
|
|
|
|
export default {
|
|
name: "AppDvWeiyang",
|
|
components: {SubHeader},
|
|
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() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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">
|
|
<sub-header title="五条工作链"/>
|
|
</div>
|
|
<div class="f"></div>
|
|
<div class="g">
|
|
<sub-header title="工单分类"/>
|
|
</div>
|
|
<div class="h">
|
|
<sub-header title="全区积分排名(前10)"/>
|
|
</div>
|
|
<div class="i">
|
|
<sub-header title="居民统计">
|
|
<div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
|
|
</sub-header>
|
|
</div>
|
|
<div class="j">
|
|
<sub-header title="特殊人群数量统计"/>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
<style lang="scss">
|
|
.AiDvWrapper {
|
|
.viewPanel {
|
|
background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.AppDvWeiyang {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
padding: 16px 0;
|
|
grid-auto-rows: 128px;
|
|
grid-template-areas:
|
|
"a a1 b b1 b2 b2 c c1"
|
|
"e e f f f f c c1"
|
|
"e e f f f f g g"
|
|
"e e f f f f g g"
|
|
"e e f f f f 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 {
|
|
background: #7583900f;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
@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) {
|
|
@extend .item;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c1 {
|
|
gap: 10px;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
.row {
|
|
grid-column: 1/3
|
|
}
|
|
}
|
|
|
|
.info {
|
|
font-size: 12px;
|
|
color: #BDCCDB;
|
|
}
|
|
}
|
|
</style>
|