Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_wxcp_app into dev
This commit is contained in:
liuye
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user