<template>
    <div class="gd-container">
        <div class="item" v-for="(item,index) in personList" :key="index">
            <img :src="item.image" />
            <span>{{ item.name }}</span>
            <span>{{ item.post }}</span>
            <span>{{ item.phone }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    components: {},
    data() {
        return {
            areaCode: this.$route.query.areaCode,
            personList: []
        };
    },
    watch: {},
    created() {},
    computed: {},
    mounted () {
        this.initData()
    },
    beforeDestroy() {},
    computed: {},
    watch: {},
    methods: {
        initData() {
            let params = {
                areaCode: this.areaCode,
                pageNum: 1,
                pageSize: 10
            };
            this.$http.post("/server/queryServerPeopleInfoPage", this.common.request(params)).then(res => {
                if (res.data.code == 200) {
                    this.personList = res.data.data.records
                } else {
                    this.$Message.error("查询失败");
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.gd-container {
    width: 100%;
    // height: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(auto-fill, 333px);
    grid-gap: 30px 50px;

    .item {
        background: url("../../../assets/pbImage/page-item-bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 140px;
            height: 196px;
        }

        span {
            margin-top: 10px;
            font-size: 16px;
            color: #ffffff;
        }
    }
}
</style>
