首页样式部分

src/api/home.js

@@ -0,0 +1,11 @@
+// axios
+import request from '@/utils/request'
+
+// 【社区服务】活动列表+轮播图
+export function communityActivity(params) {
+    return request({
+      url: `/actual/base/communityActivity/page`,
+      method: 'get',
+      params
+    })
+  }

src/assets/css/index.less

@@ -9,21 +9,43 @@ body #app {
 #app {
   font-size: 16px;
   background-size: 100% auto;
+  font-family:pingfang-ordinary;
 }
 
 .card{
   background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  // box-shadow: 0 1px 3px rgba(0,0,0,.3);
   padding: 13px;
   box-sizing: border-box;
   width: auto;
+  .title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    :nth-child(1){
+      font-family:pingfang-bold;
+    }
+    :nth-child(2){
+      color: #B4B4B4;
+      font-size: 14px;
+    }
+  }
+}
+.white{
+  color: #fff;
+}
+.gray{
+  color: #999999;
 }
 .flex{
   display: flex;
   .flex1{
     flex: 1;
   }
+  &-1{
+    flex: 1;
+  }
   &-y{
       flex-direction: column;
   }
@@ -69,10 +91,27 @@ body #app {
   &-bottom{
     margin-bottom: 5px;
   }
+  &-right10{
+    margin-right: 10px;
+  }
+  &-top15{
+    margin-top: 15px;
+  }
+  &-top10{
+    margin-top: 10px;
+  }
+  &-top18{
+    margin-top: 18px;
+  }
 }
 
-.p-18{
-  padding: 0 18px;
+.p{
+  &-18{
+    padding: 0 18px;
+  }
+  &-12{
+    padding: 12px;
+  }
 }
 
 .bto_btn{
@@ -116,4 +155,26 @@ body #app {
 .container {
   padding: 10px;
 }
-
+.img{
+  &_17{
+    width: 17px;
+    height: 17px;
+  }
+  &_16{
+    width: 16px;
+    height: 16px;
+  }
+  &_20{
+    width: 20px;
+    height: 20px;
+  }
+}
+.font-size13{
+  font-size: 13px;
+}
+.font-size14{
+  font-size: 13px;
+}
+.font-bold{
+  font-weight: bold;
+}

src/plugins/vant.js

@@ -22,7 +22,10 @@ import {
   Step,
   Divider,
   List,
-  ActionSheet
+  ActionSheet,
+  Search,
+  Swipe,
+  SwipeItem,
 } from 'vant'
 
 Vue.use(Button)
@@ -47,3 +50,6 @@ Vue.use(Button)
   .use(Divider)
   .use(List)
   .use(ActionSheet)
+  .use(Search)
+  .use(Swipe)
+  .use(SwipeItem)

src/views/home/index.less

@@ -0,0 +1,57 @@
+.blueBg{
+    background: #3974F6;
+    border-radius: 0px 0px 20px 20px;
+    width: 100%;
+    height: 160px;
+}
+.content{
+    position: relative;
+    top: -150px;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+.notice_time{
+    padding-right: 5px;
+    box-sizing: border-box;
+    border-right: solid 1px #999999;
+    margin-right: 6px;
+    height: 20px;
+    line-height: 20px;
+}
+.van-ellipsis{
+    color: #555555;
+}
+.notice{
+    height: 50px;
+    line-height: 50px;
+}
+.appeal,.verify{
+    width: 158px;
+    height: 73px;
+    background-size: 100% 100%;
+    padding: 17px 14px;
+    box-sizing: border-box;
+    :nth-child(1){
+        font-family:pingfang-bold;
+    }
+}
+.appeal{
+    background-image: url('@/assets/images/home/appeal.png');
+}
+.verify{
+    background-image: url('@/assets/images/home/verify.png');
+}
+.nav{
+    color: #333333;
+    img{
+        width: 41px;
+        height: 40px;
+    }
+}
+.activity_content{
+    width: 100%;
+    .img{
+        width: 231px;
+        height: 33px;
+    }
+}

src/views/home/index.vue

@@ -1,26 +1,153 @@
 <template>
-    <div class=''></div>
+    <div>
+        <div class="blueBg"></div>
+        <div class="content">
+            <div class="flex flex-end">
+                <div class="flex flex-center2 white">
+                    <img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt="">
+                    <span>社区</span>
+                </div>
+                <div class="flex flex-center2">
+                    <van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" background="#3974f6"
+                        style="width: 170px;" />
+                    <img src="@/assets/images/icons/mine.png" class="img_20 " alt="">
+                </div>
+            </div>
+            <div class="swipe">
+                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+                    <van-swipe-item><img src="@/assets/images/zhishu.png" alt=""
+                            style="width: 100%; margin: 0 auto;"></van-swipe-item>
+                    <van-swipe-item>2</van-swipe-item>
+                    <van-swipe-item>3</van-swipe-item>
+                    <van-swipe-item>4</van-swipe-item>
+                </van-swipe>
+            </div>
+            <div class="card flex flex-end flex-center2 m-top15 notice">
+                <img src="@/assets/images/icons/notice.png" class="img_17 m-right7" alt="">
+                <div class="van-ellipsis flex-1">
+                    这个vant真的好好好用强烈推!!!!!!!!
+                </div>
+                <span class="gray notice_time">05-06</span>
+                <span class="gray">更多</span>
+            </div>
+            <div class="card m-top10">
+                <div class="flex white">
+                    <div class="appeal m-right10 flex flex-y">
+                        <div>我有诉求</div>
+                        <div class="font-size13 m-top5" style="color: #d8e6fe;"> 居民点单 社区接单</div>
+                    </div>
+                    <div class="verify">
+                        <div>信息核实</div>
+                        <div class="font-size13 m-top5" style="color: #d8e6fe;">登记信息 窗口办理</div>
+                    </div>
+                </div>
+                <div class="flex flex-centr2 flex-mean m-top18">
+                    <div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item,index) in tabList">
+                        <img :src="item.imgSrc"
+                         alt="">
+                         <span>{{item.title}}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="card m-top10">
+                <div class="title">
+                    <span>社区活动</span>
+                    <span>更多</span>
+                </div>
+                <div class="activity_content flex" v-for="(item,index) in activityList">
+                    <img :src="item.imgSrc" alt="" class="mr10">
+                    <div class="flex flex-y flex-1">
+                        <div class="title van-ellipsis">{{item.title}}</div>
+                        <div class="address gray font-size14 van-ellipsis">地点：{{item.address}}</div>
+                        <div class="time gray font-size14">时间：{{item.date}}</div>
+                        <div class="flex flex-end">
+                            <div>
+                                <span>报名人数：</span> <span>{{item.resiNum}}</span><span>/{{item.total}}人</span>
+                            </div>
+                            <van-button type="info" round >报名</van-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
 </template>
 
 <script>
+import { communityActivity } from '@/api/home';
 export default {
-//数据
     data() {
-        return {};
+        return {
+            searchKey: null,//搜索栏
+            tabList:[
+                {
+                    imgSrc:require('@/assets/images/nav/1.png'),
+                    title:'社区讯息',
+                    path:'/notice'
+                },
+                {
+                    imgSrc:require('@/assets/images/nav/2.png'),
+                    title:'社区活动',
+                    path:'/notice'
+                },
+                {
+                    imgSrc:require('@/assets/images/nav/3.png'),
+                    title:'居民议事',
+                    path:'/notice'
+                },
+                {
+                    imgSrc:require('@/assets/images/nav/4.png'),
+                    title:'满意度测评',
+                    path:'/notice'
+                },
+                {
+                    imgSrc:require('@/assets/images/nav/5.png'),
+                    title:'可享服务',
+                    path:'/notice'
+                }
+            ],
+            activityList:[
+                {
+                    title:'社区活动测试测试测试时杀死还是',
+                    address:'上海市普陀区金沙江路 1518 弄',
+                    date:'2021-09-22',
+                    imgSrc:require('@/assets/images/zhishu1.png'),
+                    resiNum:10,
+                    total:50
+                },
+                {
+                    title:'社区活动测试测试测试时杀死还是',
+                    address:'上海市普陀区金沙江路 1518 弄',
+                    date:'2021-09-22',
+                    imgSrc:require('@/assets/images/zhishu1.png'),
+                    resiNum:10,
+                    total:50
+                }
+            ]
+        };
     },
-//创建前
-    created() {},
-//方法
-    methods: {},
-//子组件注册
-    components:{},
-//计算
-    computed:{},
-//监听
+    created() {
+        // this.communityActivity()//获取轮播图与活动列表
+    },
+    methods: {
+        async communityActivity() {
+            let { data, code, msg } = await communityActivity()
+            if (code === 0) {
+                console.log(data);
+            }
+        }
+    },
+    components: {},
+    computed: {},
     watch: {},
 }
 </script>
 
-<style lang='scss'>
+<style lang='less' scoped>
+@import './index';
 
+:deep(.van-field__control) {
+    font-size: 13px;
+}
 </style>