房屋扫码样式

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;
+}

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 }
   },
   {

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) {

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;
+}

src/views/houseQR/index.vue

@@ -1,7 +1,68 @@
 <template>
-   <div class="container">
+    <div class="">
-        
+        <div class="header">
-   </div>
+            <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(){
+    created() {
-        console.log(this.houesId,'房屋Id');
+        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>