reader/pages/aiAvatar/index.less

.container {
    position: relative;
    min-height: 100vh;
    background-color: #3609B8;
    overflow: hidden;

    .headerBg {
        position: absolute;
        width: 100%;
        height: 598rpx;
    }

    .body {
        position: relative;
        z-index: 2;
        margin: 206rpx auto 36rpx;
        width: 700rpx;

        .uploadBox {
            position: relative;
            width: 100%;
            height: 790rpx;

            .uploadBg {
                width: 100%;
                height: 100%;
            }

            .loading {
                position: absolute;
                width: 100%;
                top: 300rpx;
                text-align: center;
                z-index: 3;
                color: white;

                .loadingImg {
                    width: 110rpx;
                    height: 110rpx;
                    animation: identifier 2.6s infinite linear;
                }

                .tips1 {
                    margin: 42rpx 0rpx 42rpx;
                    font-size: 34rpx;
                }

                .tips2 {
                    font-size: 26rpx;
                }
            }

            .fillImg {
                position: absolute;
                width: 660rpx;
                height: 642rpx;
                left: 22rpx;
                top: 118rpx;
                border-radius: 20rpx;
                object-fit: cover;
            }

            .imgMask::before {
                position: absolute;
                content: "";
                width: 660rpx;
                height: 642rpx;
                background-color: rgba(0, 0, 0, 0.4);
            }
        }

        .templateBox {
            margin-top: 30rpx;

            .tHeaderBg {
                width: 700rpx;
                height: 48rpx;
            }

            .templates {
                position: relative;
                width: 100%;
                // height: 236rpx;
                border-radius: 20rpx;

                .tbg {
                    position: absolute;
                    z-index: -1;
                    width: 100%;
                    height: 100%;
                }

                .templateScroll {
                    width: 100%;
                    padding: 36rpx 0 6rpx 16rpx;
                    white-space: nowrap;
                    box-sizing: border-box;

                    .template {
                        margin-right: 10rpx;
                        display: inline-block;

                        .cover {
                            width: 140rpx;
                            height: 140rpx;
                            margin-right: 20rpx;
                            background-color: white;
                            border-radius: 10rpx;
                        }

                        .name {
                            margin-top: 12rpx;
                            width: 140rpx;
                            color: white;
                            text-align: center;
                            font-size: 26rpx;
                        }
                        .active {
                            border: 4rpx solid #FDD841;
                            box-sizing: border-box;
                        }
                    }

                }
            }
        }
    }

    .btns {
        width: 700rpx;
        margin: 0 auto 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
            width: 285rpx;
            height: 82rpx;
        }
    }
}