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 18:02:30 +08:00
parent 4f36215dad
commit df49e1f9dc
2 changed files with 92 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,10 @@
<script> <script>
import {mapState} from "vuex" import {mapState} from "vuex"
import SubHeader from "./comps/subHeader.vue";
export default { export default {
name: "AppDvWeiyang", name: "AppDvWeiyang",
components: {SubHeader},
label: "未央最新定制大屏", label: "未央最新定制大屏",
props: { props: {
instance: Function, instance: Function,
@@ -58,12 +60,24 @@ export default {
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div> <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
</div> </div>
<div class="d"></div> <div class="d"></div>
<div class="e"></div> <div class="e">
<sub-header title="五条工作链"/>
</div>
<div class="f"></div> <div class="f"></div>
<div class="g"></div> <div class="g">
<div class="h"></div> <sub-header title="工单分类"/>
<div class="i"></div> </div>
<div class="j"></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> </template>
</section> </section>
</template> </template>
@@ -134,5 +148,10 @@ export default {
grid-column: 1/3 grid-column: 1/3
} }
} }
.info {
font-size: 12px;
color: #BDCCDB;
}
} }
</style> </style>

68
project/biaopin/dv/weiyang/comps/subHeader.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<section class="subHeader">
<div class="subHeader-title" :class="{right:!!$scopedSlots.right}">
<h2 class="fill" v-text="title"/>
<slot name="right"/>
</div>
<div class="divider"/>
<div class="slot">
<slot/>
</div>
</section>
</template>
<script>
export default {
name: 'subHeader',
props: ['title']
}
</script>
<style lang="scss" scoped>
.subHeader {
height: 100%;
background: #7583900f;
.subHeader-title {
display: flex;
align-items: center;
height: 51px;
padding: 0 8px 0 46px;
box-sizing: border-box;
background-image: linear-gradient(90deg, #00d4ff00 0%, rgba(0, 212, 255, 0.3) 12%, #0080ff00 100%), url("https://cdn.sinoecare.com/i/2024/09/03/66d6d5b006572.png");
background-size: 100% 6px, 54px 42px;
background-position: center bottom, left center;
background-repeat: no-repeat;
h2 {
font-size: 20px;
color: #fff;
}
img {
width: 28px;
height: 28px;
margin-right: 8px;
}
&.right {
padding-right: 0;
}
}
.divider {
height: 7px;
background-image: linear-gradient(90deg, #1F979A 12%, #1f979a82 100%), linear-gradient(90deg, #243132 80%, #02FEFF 99%);
background-size: 16px 7px, 100% 3px;
background-position: calc(100% - 92px) top, left center;
background-repeat: no-repeat;
}
.slot {
height: calc(100% - 75px);
padding-top: 19px;
}
}
</style>