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

<template>
    <div class="pages">
        <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" style="width: 75px;height: 95px;">
                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
                        <div class="van-ellipsis">{{item.title}}</div>
                        <div class="address font-size14 van-ellipsis gray">地点：{{item.address}}</div>
                        <div class="time gray font-size14">时间：{{item.date}}</div>
                        <div class="flex flex-end">
                            <div>
                                <span>报名人数：</span> <span class="font-size18 orange">{{item.resiNum}}</span>/<span class="font-size14">{{item.total}}人</span>
                            </div>
                            <van-button type="info"size="small" round >报名</van-button>
                        </div>
                    </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 eventList">
                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
                      <span class="van-multi-ellipsis--l2">
                        {{item.title}}  
                      </span> 
                      <div class="flex flex-end flex-center gray m-top10 font-size13">
                        <div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt=""><span>参与 {{item.total}}</span></div>
                        <div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7"><span>支持 {{item.support}}</span></div>
                        <div class="flex flex-center"><img src="@/assets/images/icons/oppose.png" alt="" class="img_16 m-right7"><span>反对 {{item.oppose}}</span></div>
                      </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
                }
            ],
            eventList:[
                {
                    total:100,
                    support:50,
                    title:'社区活动测试测试测试时杀死社区活动测试测试测试时杀死还是上海市普陀区金沙江路还是上海市普陀区金沙江路',
                    oppose:10
                },
                {
                    total:100,
                    support:50,
                    title:'社区活动测试测试测试时杀死社区活动测试测试测试时杀死还是上海市普陀区金沙江路还是上海市普陀区金沙江路',
                    oppose:10
                }
            ]
        };
    },
    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>