<template>
    <div class="container">
        <div class="title_top">
            <div class="title_name" @click="handleHome">
                {{ this.$dictLabel('node_title5') }}
            </div>
        </div>

        <leftNav selNavId="5" />
        
        <div class="crad_box">
            <div class="crad" v-for="(v,k) in list" @click="handlegoto(v)">
                <div class="crad_icon"></div>
                <span class="text_gradual crad_name">{{ v.label }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Entrance',
    props: {

    },
    components: {

    },
    data(){
        return {
            list: [
                { label: this.$dictLabel('link1'), path: '/crad' },
                { label: this.$dictLabel('link2'), path: '', url: this.$dictLabel('link_url2') },
                { label: this.$dictLabel('link3'), path: '', url: this.$dictLabel('link_url3') },
                { label: this.$dictLabel('link4'), path: '', url: this.$dictLabel('link_url4') },
                { label: this.$dictLabel('link5'), path: '', url: this.$dictLabel('link_url5') },
                { label: this.$dictLabel('link6'), path: '', url: this.$dictLabel('link_url6') },
                // { label: '入口名称7', val: '' },
                // { label: '入口名称8', val: '' },
            ]
        }
    },
    methods: {
        handlegoto(v){
            // console.log(this.list);
            
            if (v.path) {
                this.$router.push(v.path)
            }
            if (v.url) {
                window.open(v.url,'_bank')
            }
        },
        handleHome() {
           
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.container{
    position: relative;
    width: 100%;
    height: 100%;
    background: url('~@/assets/bigScreen/task/img_bg_5.png') no-repeat bottom center;
    // background-image: url('~@/assets/bigScreen/task/img_bg_5.png');
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .crad_box{
        // width: 1180px; 
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        // gap: 20px;
        // row-gap: 2vh;
        row-gap: 20px;
        // column-gap: 20px;

        .crad{
            width: 317px;
            height: 341px;
            background-image: url('~@/assets/bigScreen/task/img_bg_6.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
    
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .crad_icon{
                width: 151px;
                height: 143px;
                background-image: url('~@/assets/bigScreen/task/icon_6.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .crad_name{
                margin-top: 20px;
            }
        }
    }
}
</style>