<template>
    <div class="app-container">
        <div class="title">营销中心</div>
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
                <img :src="item.coverImg" class="icon">
                <div class="info">
                    <div class="name">{{ item.name }}</div>
                    <div class="intro">
                        {{ item.value }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { appCenterGet } from "@/api/application";
export default {
    data() {
        return {
            list: [],
        }
    },
    mounted() {
        this.appCenterGet()
    },
    methods: {
        // 跳转
        to(item) {
            localStorage.setItem('applocation', JSON.stringify(item))
            this.$router.push({
                name: item.absUrl
            })
        },
        // 获取应用列表
        async appCenterGet() {
            try {
                const res = await appCenterGet({
                    type:'market'
                })
                this.list = res
            } catch (error) {
                console.log(error);
            }
        },


    }
}
</script>

<style scoped lang="scss">
.title {
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
}

.list {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    .item {
        width: 400px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        padding: 14px;

        &:hover {
            cursor: pointer;

            .info {
                .name {
                    color: #39D47A;
                }

                .intro {
                    color: #39D47A;
                }
            }
        }

        .icon {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        .info {
            flex: 1;
            padding-left: 10px;

            .name {
                font-weight: bold;
            }

            .intro {
                color: #999;
                margin-top: 4px;
            }
        }
    }
}
</style>