index.vue

<template>

    <div class="lists">
        <div v-for="(item, index) of list.active" :key="index">
            <div class="list" @click="listClick(index)">
                <div class="list-logos">
                    <img class="list-logo" :src="item.logoUrl">
                </div>
                <div class="list-infos">
                    <div class="list-title">{{item.name}}</div>
                    <div class="list-dsc">{{item.dsc}}</div>
                </div>
            </div>

        </div>
    </div>


</template>

<script>
    // ZKit
    // const log = console.log.bind(console)

    export default {
        name: "discountIndex",
        data() {
            return {
                list: {
                    active: [
                        {
                            name: "大转盘活动",
                            logoUrl: "/mainSale/icon-active-1.png",
                            dsc: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
                            reDirect: "turntableDetail"
                        },
                        {
                            name: "送券活动",
                            logoUrl: "/mainSale/icon-active-2.png",
                            dsc: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
                            reDirect: "couponDetail"
                        }
                    ],
                },
            };
        },
        created() {

        },
        methods: {
            listClick(inIndex){
                // log('--->click: inIndex =', inIndex)
                // log('--->click: reDirect =', this.list.active[inIndex].reDirect)
                this.$router.push(this.list.active[inIndex].reDirect)
            },
        }
    };
</script>

<style scoped>
    .lists {
        padding: 4px 16px 20px 16px;
    }

    .list {
        padding: 12px 0px;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        border-bottom: 1px solid #EEEEEE;
    }

    .list-logos {
        width: 80px;
        height: 80px;
        background-color: #F8F8F8;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .list-logo {
        width: 56px;
        height: 56px;
    }

    .list-infos {
        width: 251px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;

        margin-left: 12px;
    }

    .list-title {
        font-size: 14px;
        height: 16px;
        line-height: 16px;
        font-weight: bold;
        color: #2D476A;
        width: 100%;
        text-align: left;

        margin-bottom: 8px;
    }

    .list-dsc {
        font-size: 12px;
        height: 14px;
        line-height: 14px;
        font-weight: normal;
        color: #2D476A;
        width: 100%;
        text-align: left;
        overflow: auto;
    }
</style>