Browse Source

房屋扫码样式

dev
mk 1 year ago
parent
commit
9db39c5b70
  1. 18
      src/assets/css/index.less
  2. BIN
      src/assets/images/houseQR/1.png
  3. BIN
      src/assets/images/houseQR/2.png
  4. BIN
      src/assets/images/houseQR/3.png
  5. BIN
      src/assets/images/houseQR/4.png
  6. BIN
      src/assets/images/houseQR/5.png
  7. BIN
      src/assets/images/houseQR/6.png
  8. BIN
      src/assets/images/houseQR/7.png
  9. BIN
      src/assets/images/houseQR/8.png
  10. BIN
      src/assets/images/houseQR/bot_1.png
  11. BIN
      src/assets/images/houseQR/bot_2.png
  12. BIN
      src/assets/images/houseQR/bot_3.png
  13. BIN
      src/assets/images/houseQR/bot_4.png
  14. BIN
      src/assets/images/houseQR/header_bg.png
  15. BIN
      src/assets/images/houseQR/header_bg_mask.png
  16. BIN
      src/assets/images/houseQR/house.png
  17. BIN
      src/assets/images/houseQR/house_bg.png
  18. BIN
      src/assets/images/icons/community.png
  19. BIN
      src/assets/images/icons/grid.png
  20. BIN
      src/assets/images/icons/tel.png
  21. 2
      src/router/router.config.js
  22. 2
      src/views/home/index.vue
  23. 81
      src/views/houseQR/index.less
  24. 122
      src/views/houseQR/index.vue

18
src/assets/css/index.less

@ -65,7 +65,6 @@ body #app {
&-center3{
align-items: flex-start;
}
&-mean{
justify-content: space-around;
}
@ -75,6 +74,9 @@ body #app {
&-fend{
justify-content: flex-end;
}
&-wrap{
flex-wrap: wrap;
}
}
.m{
&-left12{
@ -113,6 +115,12 @@ body #app {
&-bot50{
margin-bottom: 50px;
}
&-bot10{
margin-bottom:10px;
}
&-top16{
margin-top:16px;
}
}
.p{
@ -181,6 +189,10 @@ body #app {
&_round{
border-radius: 5px;
}
&_33{
width: 33px;
height: 33px;
}
}
.font-size13{
font-size: 13px;
@ -202,3 +214,7 @@ body #app {
width: 100%;
right: 0;
}
.content{
width: calc(100% - 20px);
margin: 0 auto;
}

BIN
src/assets/images/houseQR/1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/houseQR/2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/images/houseQR/3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/houseQR/4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/images/houseQR/5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/images/houseQR/6.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/images/houseQR/7.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/images/houseQR/8.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/images/houseQR/bot_1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/images/houseQR/bot_2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/houseQR/bot_3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/images/houseQR/bot_4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/houseQR/header_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

BIN
src/assets/images/houseQR/header_bg_mask.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/houseQR/house.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/images/houseQR/house_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/images/icons/community.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 915 B

BIN
src/assets/images/icons/grid.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/icons/tel.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

2
src/router/router.config.js

@ -6,7 +6,7 @@ export const constantRouterMap = [
{
path: '/',
name: 'home',
component: () => import('@/views/home'),
component: () => import('@/views/houseQR'),
meta: { title: '首页', keepAlive: false }
},
{

2
src/views/home/index.vue

@ -173,7 +173,7 @@ export default {
}
let res = await communityActivity(parm)
if (res) {
this.activityList = res.list
this.activityList = res.list.slice(0, 2);
}
},
handelClickJump(path) {

81
src/views/houseQR/index.less

@ -0,0 +1,81 @@
.header{
background:url('@/assets/images/houseQR/header_bg.png');
background-size: 100%;
width: 100%;
height: 180px;
z-index: 1;
}
.mask{
background:url('@/assets/images/houseQR/header_bg_mask.png');
background-size: 100%;
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 180px;
z-index: 2;
}
section{
position: relative;
top: -40px;
z-index: 3;
.house_base{
position: relative;
height: 80px;
background: url('@/assets/images/houseQR/house_bg.png') no-repeat;
background-size: 85% 100% ;
background-position: center center;
font-size: 18px;
font-weight: bold;
padding: 0 30px 0 0 ;
box-sizing: border-box;
img{
width: 115px;
height: 102px;
position: relative;
top: -20px;
}
}
}
.basi_content{
border-radius: 0 0 8px 8px;
position: relative;
&::after{
content: '';
position: absolute;
left: 0;
top: -13px;
width: 0;
height: 0;
border-left:9px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #dfe9ef;
}
&::before{
content: '';
position: absolute;
right: 0;
top: -13px;
width: 0;
height: 0;
border-left:9px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #dfe9ef;
}
}
a{
padding: 5px 17px;
color: #ffffff;
background: #3974f6;
border-radius: 30px;
height: 28px;
text-align: center;
line-height: 18px;
font-size: 14px;
box-sizing: border-box;
}
.my_community{
padding-top: 8px;
box-sizing: border-box;
font-family: pingfang-bold;
}

122
src/views/houseQR/index.vue

@ -1,7 +1,68 @@
<template>
<div class="container">
</div>
<div class="">
<div class="header">
<div class="mask"></div>
</div>
<section>
<div class="flex flex-y m-bot10">
<div class="house_base flex">
<img src="@/assets/images/houseQR/house.png" alt="">
<div class="flex flex-y flex-center1 flex1">
<div class="van-multi-ellipsis--l2">青岛市市北区重青岛市市北区重庆南路青岛市市北区重庆南路庆南路青岛市市北区重庆南路</div>
<div>120号205户</div>
</div>
</div>
<div class="card flex flex-y basi_content content">
<div class="flex flex-center">
<div class="label">
<img src="@/assets/images/icons/community.png" class="img_16 m-right10" alt="">
<span class="gray">所属社区</span>
</div>
<div class="value flex1">市北区</div>
</div>
<div class="flex flex-center m-top15">
<div class="label">
<img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="">
<span class="gray">所属网格</span>
</div>
<span class="value flex1">第一网格</span>
</div>
<div class="flex flex-center2 flex-end m-top15">
<div class="flex">
<div class="label">
<img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="">
<span class="gray">社区电话</span>
</div>
<div class="value ">0532-66778080</div>
</div>
<a :href='`tel:0532-66778080`'>拨打</a>
</div>
</div>
</div>
<div class="content card ">
<div class="title">
<span>我的社区</span>
</div>
<div class="my_community flex flex-wrap">
<div style="width: 25%;" class="flex flex-y flex-center1 flex-center2"
v-for="(item, index) in myCommunity" :key="index">
<img :src="item.imgSrc" class="img_33 m-top16" alt="">
<span class="font-size14 m-top10">{{ item.title }}</span>
</div>
</div>
</div>
<div class="content card" style="margin-top: 10px;">
<div class="title"><span>服务矩阵</span></div>
<div class="my_community flex flex-wrap">
<div style="width: 25%;" class="flex flex-y flex-center1 flex-center2"
v-for="(item, index) in serverList" :key="index">
<img :src="item.imgSrc" class="img_33 m-top16" alt="">
<span class="font-size14 m-top10">{{ item.title }}</span>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
@ -9,11 +70,54 @@ export default {
name: 'houseQR',
data() {
return {
houesId:this.$route.query.houseId,
}
houesId: this.$route.query.houseId,
myCommunity: [
{
imgSrc: require('@/assets/images/houseQR/1.png'),
title: '二维码下载'
},
{
imgSrc: require('@/assets/images/houseQR/2.png'),
title: '我有诉求'
}, {
imgSrc: require('@/assets/images/houseQR/3.png'),
title: '社区讯息'
}, {
imgSrc: require('@/assets/images/houseQR/4.png'),
title: '社区活动'
}, {
imgSrc: require('@/assets/images/houseQR/5.png'),
title: '居民议事'
}, {
imgSrc: require('@/assets/images/houseQR/6.png'),
title: '满意度测评'
}, {
imgSrc: require('@/assets/images/houseQR/7.png'),
title: '可享服务'
}, {
imgSrc: require('@/assets/images/houseQR/8.png'),
title: '身边网格员'
}
],
serverList: [
{
imgSrc: require('@/assets/images/houseQR/bot_1.png'),
title: '户政服务'
}, {
imgSrc: require('@/assets/images/houseQR/bot_2.png'),
title: '身份证业务'
}, {
imgSrc: require('@/assets/images/houseQR/bot_3.png'),
title: '公积金'
}, {
imgSrc: require('@/assets/images/houseQR/bot_4.png'),
title: '电子社保'
},
]
}
},
created(){
console.log(this.houesId,'房屋Id');
created() {
console.log(this.$route, '房屋Id');
},
mounted() {
@ -21,6 +125,6 @@ export default {
}
</script>
<style scoped lang="less">
<style scoped lang="less" scoped>
@import './index';
</style>
Loading…
Cancel
Save