锁屏问题修复
This commit is contained in:
aixianling
@@ -5,7 +5,7 @@
|
||||
<h2>一级网格</h2>
|
||||
<div class="gird-item__wrapper level1" @click="getStatistics(topGrid.id)">
|
||||
<h3>{{ topGrid.girdName }}</h3>
|
||||
<image :src="$cdn + 'xincheng/w-right.png'" />
|
||||
<image :src="$cdn + 'xincheng/w-right.png'"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gird-item" v-if="secondaryGrid.length">
|
||||
@@ -19,25 +19,25 @@
|
||||
<div class="gird-item__wrapper level3" @click="getSubInfo">
|
||||
<h3>专属网格</h3>
|
||||
<p>（{{ tertiaryGrid.length }}个）</p>
|
||||
<image :src="$cdn + 'xincheng/blue-right.png'" />
|
||||
<image :src="$cdn + 'xincheng/blue-right.png'"/>
|
||||
</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 streetInfo" :key="index">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<h2>{{ index }}</h2>
|
||||
<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 streetInfo" :key="index">
|
||||
<div class="left">
|
||||
<i></i>
|
||||
<h2>{{ index }}</h2>
|
||||
</div>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</u-popup>
|
||||
<u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
|
||||
<div class="street-dialog">
|
||||
@@ -65,282 +65,282 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'grid',
|
||||
export default {
|
||||
name: 'grid',
|
||||
|
||||
appName: '网格统计',
|
||||
appName: '网格统计',
|
||||
|
||||
data () {
|
||||
return {
|
||||
isShowStreet: false,
|
||||
streetInfo: {},
|
||||
isShowVillage: false,
|
||||
topGrid: [],
|
||||
secondaryGrid: [],
|
||||
tertiaryGrid: [],
|
||||
tertiaryInfo: {},
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowStreet: false,
|
||||
streetInfo: {},
|
||||
isShowVillage: false,
|
||||
topGrid: [],
|
||||
secondaryGrid: [],
|
||||
tertiaryGrid: [],
|
||||
tertiaryInfo: {},
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
onLoad() {
|
||||
this.$loading()
|
||||
this.getInfo().finally(() => uni.hideLoading())
|
||||
},
|
||||
|
||||
methods: {
|
||||
getStatistics(girdId) {
|
||||
this.$loading()
|
||||
this.getInfo()
|
||||
this.$http.post(`/api/appgirdinfo/girdInfoCountById?girdId=${girdId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowStreet = true
|
||||
this.streetInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getStatistics (girdId) {
|
||||
this.$loading()
|
||||
this.$http.post(`/api/appgirdinfo/girdInfoCountById?girdId=${girdId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowStreet = true
|
||||
this.streetInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getSubInfo() {
|
||||
this.$loading()
|
||||
this.$http.post(`/api/appgirdinfo/girdInfoCountByThree`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowVillage = true
|
||||
this.tertiaryInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getSubInfo () {
|
||||
this.$loading()
|
||||
this.$http.post(`/api/appgirdinfo/girdInfoCountByThree`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.isShowVillage = true
|
||||
this.tertiaryInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getInfo() {
|
||||
return this.$http.post(`/api/appgirdinfo/listAllByTop`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.topGrid = res.data
|
||||
|
||||
getInfo () {
|
||||
this.$http.post(`/api/appgirdinfo/listAllByTop`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.topGrid = res.data
|
||||
if (res.data.girdList.length) {
|
||||
this.secondaryGrid = res.data.girdList
|
||||
|
||||
if (res.data.girdList.length) {
|
||||
this.secondaryGrid = res.data.girdList
|
||||
|
||||
res.data.girdList.forEach(e => {
|
||||
this.tertiaryGrid.push(...e.girdList)
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
res.data.girdList.forEach(e => {
|
||||
this.tertiaryGrid.push(...e.girdList)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid {
|
||||
min-height: 100vh;
|
||||
padding: 32px 0;
|
||||
background: #fff;
|
||||
.grid {
|
||||
min-height: 100vh;
|
||||
padding: 32px 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.street-dialog {
|
||||
height: 100%;
|
||||
padding: 0 32px 30px;
|
||||
|
||||
.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: 88px;
|
||||
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 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
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: #1365DD;
|
||||
.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: 88px;
|
||||
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 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
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: #1365DD;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user