client-app/style/index/index.scoped.scss

.hc-home-nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    .title {
        flex: 1;
        color: #101010;
        font-size: 56rpx;
    }
    .icon {
        color: #AEAEB2;
        font-size: 56rpx;
        display: flex;
        align-items: center;
        text[class^="i-ri-"] {
            font-size: 48rpx;
        }
    }
}

.hc-flex-conten {
    position: relative;
    height: 328rpx;
    .left-col-card-1,
    .right-col-card-1,
    .right-col-card-2,
    .left-col-card-2,
    .left-col-card-3,
    .right-col-card-3,
    .right-col-card-4 {
        position: absolute;
        color: white;
        .card-bg {
            position: absolute;
            border-radius: 22rpx;
            color: white;
        }
    }
    .left-col-card-1 {
        height: 328rpx;
        width: 274rpx;
        top: 0;
        left: 0;
        .card-bg {
            height: 100%;
            width: 236rpx;
            top: 0;
            left: 36rpx;
            color: white;
            background-image: linear-gradient(to right, #fb7e90, #faa478);
            transform-origin: 172rpx 400rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .icon {
                position: relative;
                top: 36rpx;
                color: white;
                font-size: 128rpx;
                text-align: center;
                text {
                    opacity: .6;
                }
            }
        }
        .text-box {
            position: absolute;
            bottom: 36rpx;
            left: 62rpx;
            font-size: 36rpx;
            font-weight: bold;
            opacity: 1;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
        }
        &.is-animation {
            .card-bg {
                animation-name: leftColCard;
            }
            .text-box {
                animation-name: opacityText;
            }
        }
    }
    .right-col-card-1 {
        height: 100rpx;
        width: 452rpx;
        top: 0;
        right: 0;
        .card-bg {
            top: 0;
            height: 100%;
            width: 414rpx;
            right: 36rpx;
            color: white;
            background-image: linear-gradient(to right, #fbccba, #f9b8b4);
            transform-origin: 500rpx 310rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .text {
                position: relative;
                top: 28rpx;
                left: 36rpx;
                font-size: 30rpx;
                font-weight: bold;
            }
        }
        .icon {
            position: absolute;
            top: 15rpx;
            right: 62rpx;
            color: white;
            font-size: 60rpx;
            opacity: 1;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            text {
                opacity: .6;
            }
        }
        &.is-animation {
            .card-bg {
                animation-name: rightColCard;
            }
            .icon {
                animation-name: opacityText;
            }
        }
    }
    .right-col-card-2 {
        height: 204rpx;
        width: 452rpx;
        top: 124rpx;
        right: 0;
        overflow: hidden;
        .card-bg {
            top: 0;
            height: 100%;
            width: 414rpx;
            right: 36rpx;
            color: white;
            background-image: linear-gradient(#ffcb0a, #ffde02);
            transform-origin: 500rpx 200rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .text {
                position: relative;
                top: 28rpx;
                left: 36rpx;
                font-size: 30rpx;
                font-weight: bold;
            }
        }
        .icon {
            position: absolute;
            bottom: -40rpx;
            right: 40rpx;
            color: white;
            font-size: 164rpx;
            opacity: 1;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            text {
                opacity: .6;
            }
        }
        &.is-animation {
            .card-bg {
                animation-name: rightColCard;
            }
            .icon {
                animation-name: opacityText;
            }
        }
    }
    &.__150 {
        height: 272rpx;
    }
    .left-col-card-2 {
        height: 272rpx;
        width: 100%;
        top: 0;
        left: 0;
        .card-bg {
            height: 100%;
            top: 0;
            left: 36rpx;
            right: 36rpx;
            color: white;
            overflow: hidden;
            background-image: linear-gradient(to right, #55cbf2, #2f81ed);
            transform-origin: 350rpx 800rpx;
            animation-delay: 0.05s;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .icon {
                position: absolute;
                top: 0;
                color: white;
                font-size: 236rpx;
                text-align: center;
                text {
                    opacity: .6;
                }
            }
            .text-box {
                position: absolute;
                top: 50rpx;
                right: 50rpx;
                font-size: 55rpx;
                font-weight: bold;
            }
        }
        &.is-animation {
            .card-bg {
                animation-name: leftColCard;
            }
        }
    }
    &.__180 {
        height: 327rpx;
    }
    .left-col-card-3 {
        height: 327rpx;
        width: 364rpx;
        top: 0;
        left: 0;
        .card-bg {
            height: 100%;
            width: 328rpx;
            top: 0;
            left: 36rpx;
            color: white;
            background-image: linear-gradient(to left top, #8edde1, #88eec9);
            transform-origin: 220rpx 1000rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .icon {
                position: relative;
                top: 20rpx;
                color: white;
                font-size: 170rpx;
                text-align: right;
                right: 20rpx;
                text {
                    opacity: .6;
                }
            }
        }
        .text-box {
            position: absolute;
            bottom: 36rpx;
            left: 70rpx;
            color: white;
            font-size: 44rpx;
            font-weight: bold;
            opacity: 1;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
        }
        &.is-animation {
            .card-bg {
                animation-name: leftColCard;
            }
            .text-box {
                animation-name: opacityText;
            }
        }
    }
    .right-col-card-3 {
        height: 224rpx;
        width: 360rpx;
        top: 0;
        right: 0;
        overflow: hidden;
        .card-bg {
            top: 0;
            height: 100%;
            width: 322rpx;
            right: 36rpx;
            color: white;
            background-image: linear-gradient(to left top, #abc1fa, #d7bff9);
            transform-origin: 500rpx 200rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .icon {
                position: absolute;
                top: 14rpx;
                right: 60rpx;
                color: white;
                font-size: 122rpx;
                opacity: 1;
                animation-duration: 2s;
                animation-iteration-count: 1;
                animation-fill-mode: backwards;
                text {
                    opacity: .6;
                }
            }
            .text {
                position: absolute;
                bottom: 24rpx;
                left: 30rpx;
                font-size: 33rpx;
                font-weight: bold;
            }
        }
        &.is-animation {
            .card-bg {
                animation-name: rightColCard;
            }
            .icon {
                animation-name: opacityText;
            }
        }
    }
    .right-col-card-4 {
        height: 80rpx;
        width: 360rpx;
        top: 246rpx;
        right: 0;
        .card-bg {
            top: 0;
            height: 100%;
            width: 322rpx;
            right: 36rpx;
            color: white;
            background-image: linear-gradient(to right, #c59dd9, #efb7e6);
            transform-origin: 500rpx 310rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            .text {
                position: relative;
                top: 22rpx;
                left: 36rpx;
                font-size: 28rpx;
                font-weight: bold;
            }
        }
        .icon {
            position: absolute;
            top: 15rpx;
            right: 62rpx;
            color: white;
            font-size: 44rpx;
            opacity: 1;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
            text {
                opacity: .7;
            }
        }
        &.is-animation {
            .card-bg {
                animation-name: rightColCard;
            }
            .icon {
                animation-name: opacityText;
            }
        }
    }
}

.hc-list-container {
    position: relative;
    padding: 0 40rpx;
    .hc-list-item {
        position: relative;
        background: white;
        border-radius: 16rpx;
        padding: 30rpx 32rpx;
        border: 1rpx solid #eef2fd;
        transform-origin: 350rpx 340rpx;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: backwards;
        .icon {
            position: absolute;
            width: 91rpx;
            height: 91rpx;
            color: white;
            border-radius: 10rpx;
            font-size: 50rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            text {
                opacity: 1;
                animation-duration: 2s;
                animation-iteration-count: 1;
                animation-fill-mode: backwards;
                animation-name: opacityText;
            }
            &.bg-1 {
                background: #FF5F40;
            }
            &.bg-2 {
                background: #FF9502;
            }
            &.bg-3 {
                background: #FFCB01;
            }
            &.bg-4 {
                background: #2979FF;
            }
            &.bg-5 {
                background: #00E676;
            }
            &.bg-6 {
                background: #9254DE;
            }
            &.bg-7 {
                background: #5756D7;
            }
        }
        .container {
            position: relative;
            padding-left: 120rpx;
            .title {
                color: #101010;
                font-size: 32rpx;
                font-weight: bold;
            }
            .text {
                color: #8E8E93;
                font-size: 26rpx;
                margin-top: 10rpx;
            }
        }
        &.a-l {
            animation-name: leftColCard;
        }
        &.a-r {
            animation-name: rightColCard;
        }
    }
    .hc-list-item + .hc-list-item {
        margin-top: 30rpx;
    }
}

@keyframes leftColCard {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rightColCard {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes opacityText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hc-popover-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 999999;
    background: #E8E8E8;
    .img-box {
        position: relative;
        opacity: 1;
        transform-origin: 350rpx 220rpx;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: backwards;
        .img-bg {
            width: 100%;
            background-image: url(/static/image/bg-1.jpg);
            background-position: center;
            background-size: 100% 100%;
            aspect-ratio: auto 1125 / 1048;
        }
    }
    .close-icon {
        position: absolute;
        top: calc(var(--status-bar-height) + 40rpx);
        right: 40rpx;
        font-size: 50rpx;
        color: #CACACA;
    }
    .hc-popover-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        max-height: 90%;
        z-index: 1;
        padding: 42rpx;
        border-radius: 50rpx 50rpx 0 0;
        box-shadow: 0 -14rpx 12rpx -14rpx rgba(0, 0, 0, 0.2);
        padding-bottom: calc(var(--window-bottom) + 30rpx);
        opacity: 1;
        transform-origin: 350rpx 960rpx;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: backwards;
        &::before {
            display: block;
            position: relative;
            content: "";
            background: #CACACA;
            border-radius: 8rpx;
            height: 7rpx;
            width: 140rpx;
            top: -22rpx;
            left: calc(50% - (140rpx / 2));
        }
        .project-name {
            font-size: 36rpx;
            color: #554D84;
            font-weight: bold;
        }
        .contrac-name {
            color: #8E8E93;
            margin-top: 20rpx;
        }
        .tip-title {
            margin-top: 42rpx;
            color: #464646;
            font-weight: bold;
        }
        .tip-content-box {
            position: relative;
            margin-top: 30rpx;
            .tip-item {
                position: relative;
                display: flex;
                align-items: center;
                .icon {
                    font-size: 32rpx;
                    color: #EE5B20;
                    text {
                        position: relative;
                        top: 4rpx;
                    }
                }
                .text {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    color: #8E8E93;
                }
            }
            .tip-item + .tip-item {
                margin-top: 25rpx;
            }
        }
    }
    &.show {
        display: block;
        .img-box {
            animation-name: bounceInDown;
        }
        .hc-popover-container {
            animation-name: bounceInUp;
        }
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000rpx, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 50rpx, 0);
    }
    75% {
        transform: translate3d(0, -20rpx, 0);
    }
    90% {
        transform: translate3d(0, 10rpx, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000rpx, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -40rpx, 0);
    }
    75% {
        transform: translate3d(0, 20rpx, 0);
    }
    90% {
        transform: translate3d(0, -10rpx, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}