epmet-wx-pa-chengyang/src/views/home/index.vue

<template>
    <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 {
            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() {
        // this.communityActivity()//获取轮播图与活动列表
    },
    methods: {
        async communityActivity() {
            let { data, code, msg } = await communityActivity()
            if (code === 0) {
                console.log(data);
            }
        }
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
@import './index';

:deep(.van-field__control) {
    font-size: 13px;
}
</style>