<template>
    <div class="grid">
        <div class="top">
            
            <div class="banner">
                <img class="bannerImg" src="./img/banner.jpg">
            </div>
            <div class="title">
                <div>镇江市2022年度“最美网格员”</div>
                <div>选树活动开始啦！</div>
            </div>
            <!-- <div class="info">
                <div class="infoName">
                    发布用户
                </div>
                <div class="infoTime">
                    2022-11-21 18:30
                </div>
            </div> -->
        </div>
        <div class="center">
            <div class="content">
                今年以来，镇江市全面按照中央、省相关决策部署，深入推进网格化服务管理机制创新工作，着力完善网格化管理、精细化服务、信息化支撑的基层治理平台，聚力打通服务群众的“最后一公里”。全市网格员积极作为、勇于担当，全力做好排查安全隐患、化解纠纷矛盾、宣传政策法规、服务人民群众等工作。特别是在今年疫情防控工作中，逆行向前、不分昼夜，始终坚守奋战在一线，为镇江的平安和稳定作出了很大的贡献。
            </div>
            <div class="content">
                为进一步选树典型、激励先进，镇江市委政法委、镇江市市域社会治理现代化指挥中心联合组织开展市级“最美网格员”选树活动。经前期各地各部门推荐，全市共产生32名“最美网格员”候选人，现进入投票阶段。
            </div>
            <div class="content">
                网格虽小，却装着万家事；网格虽微，却连着你我他。快参与到我们的活动中，一起为“最美”网格员投票吧！
            </div>
        </div>
        <div class="bottom">
            <div class="tip">
                点击图片预览保存，打开微信扫描，进入投票小程序
            </div>
            <div class="vote">
                投票时间：2022年11月22日-2022年11月27日
            </div>
            <div class="img" @click="imgpreview">
                <van-image round width="105" height="105" :src="require('./img/applets.png')" />
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import { ImagePreview } from 'vant';
Vue.use(VanImage).use(ImagePreview);
export default {
    data() {
        return {

        }
    },
    methods: {
        imgpreview() {
            ImagePreview([require('./img/applets.png')]);
        },
    },
}
</script>
<style lang="stylus" scoped>
.grid{
    height: 100vh;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    .top{
        .title{
            text-align: center;
            font-size: 36px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #333333;
            margin-top: 20px;
            line-height: 42px;
        }
        .banner{
            width: 100%;
            .bannerImg{
                width 100%;
                height 100%;
            }
        }
        .info{
            display: flex;
            align-items: center;
            font-size: 26px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin: 24px 0;

            .infoName{
                margin-right: 40px;
            }
        }
    }
    .center{
        .content{
            font-size: 32px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 42px;
            padding: 16px 0;
            text-indent: 60px;
        }
    }
    .bottom{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5987FF;
        line-height: 42px;
        margin-top: 20px;
        .img{
            margin-top: 24px;
        }
    }
}
</style>