index.less

@imgSrc: '@/assets/images/demonstration';

.left_item {
    .l_title_wrap {
        width: 100%;
        height: 123px;
        background: url('@{imgSrc}/全行业软硬件系统解决方案.png') no-repeat center center;
        background-size: 100% 100%;
        padding: 30px 0 0 25px;

        .l_title_sub {
            background: url('@{imgSrc}/tip.png') no-repeat left center;
            background-size: 35px 36px;
            padding-left: 35px;
            font-size: 16px;
            height: 36px;
            line-height: 36px;

        }

        .l_title {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            padding-left: 5px;
            line-height: 32px;
            letter-spacing: 1px;
            // text-shadow: 0px 8px 8px rgba(8, 34, 78, 0.75);
            background: linear-gradient(0deg, #92D2FF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .l_list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .l_list_item:hover {
        opacity: 1;
        top: -8px;


    }

    .l_list_item:hover .l_list_item_tip {
        opacity: 1;
    }

    .l_list_item[selectType='select'] {
        opacity: 1;
        top: -8px;

        .l_list_item_tip {
            opacity: 1;
        }
    }

    .l_list_item {
        width: 178px;
        height: 162px;
        opacity: 0.7;
        top: 0;
        position: relative;
        text-align: center;
        margin-bottom: 15px;
        cursor: pointer;
        transition: all 0.5s;

        .l_list_item_title {
            padding-top: 115px;
            font-size: 18px;
        }

    }

    .l_list_item_tip {
        width: 71px;
        height: 37px;
        background: url('@{imgSrc}/选中产品.png') no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        transition: all 0.3s;
        bottom: -12px;
        left: calc(50% - 35.5px);
        opacity: 0;

    }


    .l_list_item[type='供水产品'] {
        background: url('@{imgSrc}/供水产品.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .l_list_item[type='水利产品'] {
        background: url('@{imgSrc}/水利产品.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .l_list_item[type='排水产品'] {
        background: url('@{imgSrc}/排水产品.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .l_list_item[type='节水产品'] {
        background: url('@{imgSrc}/节水产品.png') no-repeat center center;
        background-size: 100% 100%;
    }
}