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

        <leftNav selNavId="1" />


        <div class="content_box">
            <div class="crad_box">
                <div class="crad_item" v-for="(v, k) in titleList" :key="k" @click="handleTask(v)">
                    <span class="text_gradual crad_name">{{ v.label }}</span>
                </div>
            </div>
            <div class="base_box"></div>
        </div>
    </div>
</template>

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

    },
    components: {

    },
    data(){
        return {
            titleList: [
                { label: this.$dictLabel('node_sub_title1'), val: '1' },
                { label: this.$dictLabel('node_sub_title2'), val: '2' },
                { label: this.$dictLabel('node_sub_title3'), val: '3' },
            ]
        }
    },
    methods: {
        handleTask(v){
            // this.$router.push('/task')  query: { id: userId }
            this.$router.push({ path: '/task', query: { name: v.label,type: v.val } });

        }, 
        handleHome() {
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .content_box{
        margin-top: 160px;
        // margin: 0 auto;
        width: fit-content;
        .crad_box{
            display: flex;
            justify-content: space-evenly;
            .crad_item{
                box-sizing: border-box;
                padding-top: 270px;
                width: 316px;
                height: 400px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
                // .crad_name{
                //     background: linear-gradient(to bottom, #ffffff, #8af3ff); /* 渐变颜色 */
                //     background-clip: text;
                //     -webkit-background-clip: text;
                //     color: transparent; /* 使文字透明，以显示背景渐变 */
                //     // color: #8af3ff;
                //     text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), /* 白色发光 */
                // }
            }
            .crad_item:first-child{
                background-image: url('~@/assets/bigScreen/crad_1.png');
            }
            .crad_item:nth-child(2){
                background-image: url('~@/assets/bigScreen/crad_2.png');
            }
            .crad_item:last-child{
                background-image: url('~@/assets/bigScreen/crad_3.png');
            }
        }
        .base_box{
            margin-top: -60px;
            width: 1348px;
            height: 386px;
            background-image: url('~@/assets/bigScreen/img_base.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>