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

Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_wxcp_app into dev

Browse Source
This commit is contained in:
liuye
2022-07-01 17:14:40 +08:00
parent 65afc37240 a7285d3df5
commit 3c30f3b49c
1 changed files with 295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue
View File

@@ -0,0 +1,295 @@
<template>
<div class="grid">
<div class="gird-wrapper">
<div class="gird-item">
<h2>一级网格</h2>
<div class="gird-item__wrapper level1" @click="isShowStreet = true">
<h3>中山门街道</h3>
</div>
</div>
<div class="gird-item">
<h2>二级网格</h2>
<div class="gird-item__wrapper level2">
<div class="grid-item__item" v-for="(item, index) in 10" :key="index">群策巷社区</div>
</div>
</div>
<div class="gird-item">
<h2>三级网格</h2>
<div class="gird-item__wrapper level3" @click="isShowVillage = true">
<h3>专属网格</h3>
<p>（12个）</p>
</div>
</div>
</div>
<u-popup v-model="isShowStreet" :closeable="false" border-radius="16" height="60%" mode="bottom">
<div class="street-dialog">
<scroll-view scroll-y class="street-wrapper">
<h2 class="title">数据统计</h2>
<div class="street-item__wrapper">
<div class="street-item" v-for="(item, index) in 40" :key="index">
<div class="left">
<i></i>
<h2>网格数</h2>
</div>
<span>12</span>
</div>
</div>
</scroll-view>
</div>
</u-popup>
<u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
<div class="street-dialog">
<scroll-view scroll-y class="street-wrapper">
<h2 class="title">数据统计</h2>
<div class="street-item__wrapper">
<div class="street-item" v-for="(item, index) in 9" :key="index">
<div class="left">
<i></i>
<h2>网格数</h2>
</div>
<span>12</span>
</div>
</div>
<h2 class="title">网格列表</h2>
<div class="street-item__wrapper">
<div class="street-item" style="justify-content: center" v-for="(item, index) in 9" :key="index">
<span>群策巷社区</span>
</div>
</div>
</scroll-view>
</div>
</u-popup>
</div>
</template>
<script>
export default {
name: 'grid',
appName: '网格统计',
data () {
return {
isShowStreet: false,
isShowVillage: false
}
},
onLoad () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.grid {
min-height: 100vh;
padding: 32px 0;
background: #fff;
box-sizing: border-box;
* {
box-sizing: border-box;
}
.street-dialog {
height: 100%;
padding: 0 32px 30px;
.street-wrapper {
.title {
height: 100px;
line-height: 100px;
width: 128px;
font-size: 32px;
font-weight: 600;
color: #262B36;
}
.street-item__wrapper {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.street-item {
display: flex;
align-items: center;
justify-content: space-between;
width: calc((100% - 30px) / 2);
height: 80px;
margin-bottom: 16px;
padding: 0 32px;
background: #F3F5F7;
&:nth-of-type(2n - 1) {
margin-right: 30px;
}
.left {
display: flex;
align-items: center;
i {
width: 8px;
height: 8px;
margin-right: 16px;
border-radius: 50%;
background: #1365DD;
}
h2 {
color: #666666;
font-size: 26px;
}
}
span {
font-size: 28px;
color: #333;
font-weight: 600;
}
}
}
}
.gird-item {
position: relative;
margin: 0 16px 80px;
padding: 16px;
border: 2px dashed #CCCCCC;
&::after {
position: absolute;
bottom: 0;
left: 50%;
z-index: 11;
width: 2px;
height: 80px;
background: #666666;
transform: translate(-50%, 100%);
content: ' ';
}
&::before {
position: absolute;
bottom: -80px;
left: 50%;
z-index: 11;
border: 14px solid transparent;
border-top: 14px solid #666666;
transform: translate(-50%, 50%);
content: ' ';
}
&:last-child::after, &:last-child::before {
display: none;
}
.level1 {
position: relative;
text-align: center;
height: 80px;
line-height: 80px;
background: #1365DD;
color: #fff;
font-size: 32px;
&:active {
opacity: 0.6;
}
image {
position: absolute;
top: 50%;
right: 16px;
z-index: 1;
width: 32px;
height: 32px;
transform: translateY(-50%);
}
h3 {
font-weight: normal;
}
}
.level3 {
display: flex;
position: relative;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
height: 96px;
background: #E8EFFB;
color: #fff;
font-size: 28px;
&:active {
opacity: 0.6;
}
h3 {
color: #1365DD;
}
p {
color: #CCCCCC;
font-size: 24px;
}
image {
position: absolute;
top: 50%;
right: 16px;
z-index: 1;
width: 32px;
height: 32px;
transform: translateY(-50%);
}
h3 {
font-weight: normal;
}
}
.level2 {
display: flex;
flex-wrap: wrap;
.grid-item__item {
width: calc((100% - 16px) / 2);
height: 80px;
line-height: 80px;
margin-bottom: 8px;
padding: 0 10px;
color: #3B3F59;
font-size: 28px;
font-weight: 600;
text-align: center;
background: #F3F5F7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:nth-of-type(2n - 1) {
margin-right: 8px;
}
}
}
& > h2 {
margin-bottom: 16px;
text-align: center;
color: #ccc;
font-size: 26px;
font-weight: normal;
}
}
}
</style>