proginn-frontend/components/ad.vue

<template>
<div class="ad-container" v-if="list.length > 0">

    <a class="ad-list-item" v-for="(item, index) in list" :key="index" :href="item.url" :style="{
        'background-image': `url('${item.image}')`
    }" target="view_window">
    </a>

</div>
</template>

<script>
export default {
    props: ['location'],
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.fetchData()
    },
    methods: {
        getPagePath() {
            const link = location.href
        },
        async fetchData() {
            let res = await this.$axios.post('/uapi/pub/adInfo', {
                position: this.location
            })
            if (Number(res.data.status) === 1) {
                this.list = [...res.data.data.list]
            } else {
                this.$message.error(res.data.info);
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.ad-container {
    // margin: 0 16px;
}

.ad-list-item {
    margin: 16px 0;
    display: block;
    padding-bottom: 75%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;

    &:first-child {
        margin-top: 0
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.ad-tips {
    padding: 16px 0;
    font-size: 12px;
    text-align: center;
    color: #999;
}
</style>