技術標籤：# JavaScript# CSS / C3

<template>
<ul>
    <li v-for=(item, idx) in list>
        <a
            :href='item.link || "javascript:void(0);"'
            :style='`cursor: ${item.link ? "pointer" : "auto"}; backgroundImage: url(${item.url});`'
            target='_blank'
        ></a>
    </li>
</ul>
</template>

<script>
new Vue({
    data(){
        return {
            list: [...]
        }
    }
})
</script>

<style lang="less" scoped>
    @item-top: 1%;
    @item-right: 1%;
    @item-width: 24.25%;
    .horizontal-vertical-center{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    ul{
        max-width: 1120px;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0 auto;
        li{
            float: left;
            width: @item-width;
            overflow: hidden;
            margin: 0 @item-right 0 0;
            padding-top: 13.6%;
            position: relative;
            &:last-child {
                margin: 0;
            }
            a {
                text-decoration: none;
                outline: none;
                transition: color 0.2s ease;
                min-width: 100%;
                min-height: 100%;
                background-size: cover;
                .horizontal-vertical-center;
            }
        }
    }
</style>