ts_aimz/components/ad-popup/ad-popup.wxss

.ad-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


.ad-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.close-icon {
    height: 50rpx;
    width: 50rpx;
    align-self: flex-end;
    margin-right: 10px;
}

.custom-checkbox-group {
    color: #FFA900;
    margin-top: 5px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-checkbox.checked {
    background-color: #FFA900;
    border-color: #FFA900;
    color: white;
    border-radius: 50%;
}

.ic-close {
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MDA3MjkxNjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1ODkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTg3Mi42MDgxOTkgMTUwLjMyNjE0NUM2NzQuMjM5Njc5LTQ5LjU5MjEzIDM0OC43OTEzMjUtNDkuNTkyMTMgMTUwLjQyMjgwNCAxNTAuMzI2MTQ1Yy0xOTkuOTE4Mjc1IDE5OS45MTgyNzUtMTk5LjkxODI3NSA1MjMuODE2ODc1IDAgNzIzLjczNTE0OSAxOTkuOTE4Mjc1IDE5OS45MTgyNzUgNTIzLjgxNjg3NSAxOTkuOTE4Mjc1IDcyMy43MzUxNDkgMCAxOTguMzY4NTIxLTE5OS45MTgyNzUgMTk4LjM2ODUyMS01MjUuMzY2NjI5LTEuNTQ5NzU0LTcyMy43MzUxNDl6IG0tNDAuMjkzNjA1IDY4MS44OTE3ODljLTE3Ni42NzE5NjQgMTc2LjY3MTk2NC00NjYuNDc1OTc0IDE3Ni42NzE5NjQtNjQzLjE0NzkzOCAwLTE3Ni42NzE5NjQtMTc2LjY3MTk2NC0xNzYuNjcxOTY0LTQ2NC45MjYyMiAwLTY0My4xNDc5MzhDMzY1LjgzODYxOSAxMi4zOTgwMzMgNjU1LjY0MjYzIDEyLjM5ODAzMyA4MzIuMzE0NTk0IDE4OS4wNjk5OTZjMTc4LjIyMTcxOCAxNzguMjIxNzE4IDE3OC4yMjE3MTggNDY2LjQ3NTk3NCAwIDY0My4xNDc5Mzh6TTcxMi45ODM1MyAzMDkuOTUwODEzYy0xMC44NDgyNzgtMTAuODQ4Mjc4LTI5LjQ0NTMyNy0xMC44NDgyNzgtNDAuMjkzNjA1IDBMNTExLjUxNTUwMiA0NzEuMTI1MjM2IDM1MC4zNDEwNzkgMzA5Ljk1MDgxM2MtMTAuODQ4Mjc4LTEwLjg0ODI3OC0yOS40NDUzMjctMTAuODQ4Mjc4LTQwLjI5MzYwNiAwLTEwLjg0ODI3OCAxMC44NDgyNzgtMTAuODQ4Mjc4IDI5LjQ0NTMyNyAwIDQwLjI5MzYwNkw0NzEuMjIxODk2IDUxMS40MTg4NDIgMzEwLjA0NzQ3MyA2NzIuNTkzMjY1Yy0xMC44NDgyNzggMTAuODQ4Mjc4LTEwLjg0ODI3OCAyOS40NDUzMjcgMCA0MC4yOTM2MDYgMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNiAwTDUxMS41MTU1MDIgNTUxLjcxMjQ0OCA2NzIuNjg5OTI1IDcxMi44ODY4NzFjMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNSAwIDEwLjg0ODI3OC0xMC44NDgyNzggMTAuODQ4Mjc4LTI5LjQ0NTMyNyAwLTQwLjI5MzYwNkw1NTEuODA5MTA3IDUxMS40MTg4NDIgNzEyLjk4MzUzIDM1MC4yNDQ0MTljMTAuODQ4Mjc4LTEwLjg0ODI3OCAxMC44NDgyNzgtMjcuODk1NTczIDAtNDAuMjkzNjA2eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMzU5MCI+PC9wYXRoPjwvc3ZnPg==');
    background-size: cover;
    background-repeat: no-repeat;
}


.image-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-content {
    position: absolute;
    height: 200rpx;
    width: 61vw;
    left: 86rpx;
    top: 188rpx;
    transform: rotate(-11.6deg);
    transform-origin: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.price-box {
    display: flex;
    flex-direction: row;
    text-align: justify;
    align-items: baseline;
    justify-content: center;
    flex: 2;
    padding: 8rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-icon {
    font-size: 28rpx;
    margin-bottom: 5px;
    color: #FFA900;
}

.p-content {
    font-size: 45rpx;
    margin-left: 5px;
    color: #FFA900;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-desc-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #cc8a05fb;
    flex: 3;
}

.ad-desc {
    font-size: 32rpx;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300rpx;
}

.ad-period {
    font-size: 24rpx;
}

.btn {
    border-radius: 14px;
    background-color: rgba(255, 169, 0, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: PingFangSC-regular;
    margin-top: 20px;
    padding: 10px;
    width: 55vw;
}

.close-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #fff;
}

.ad-ic-up-circle {
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzcxODA0NjI3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTY0IDUxMkE0NDggNDQ4IDAgMSAwIDUxMiA2NCA0NDggNDQ4IDAgMCAwIDY0IDUxMnogbTQ5Ny4yOC0yMTAuMjRhNzI5LjYgNzI5LjYgMCAwIDEgMjI0IDIyNCA5NiA5NiAwIDEgMS0xNjQuNDggOTguODggNDk2IDQ5NiAwIDAgMC0xMDguOC0xMjIuNTYgNTY0LjggNTY0LjggMCAwIDAtMTA5LjEyIDEyMy41MiA5NiA5NiAwIDEgMS0xNjQuNDgtOTguODggNzI5LjYgNzI5LjYgMCAwIDEgMjI0LTIyNCA5NiA5NiAwIDAgMSA5OC44OC0wLjk2eiIgZmlsbD0iI0ZFOTk0NCIgcC1pZD0iMjYwMyI+PC9wYXRoPjwvc3ZnPg==');
    background-size: cover;
    background-repeat: no-repeat;
}

.ad-ic-down-circle {
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzcxOTM5MTMzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2OTciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTk2MCA1MTJhNDQ4IDQ0OCAwIDEgMC00NDggNDQ4IDQ0OCA0NDggMCAwIDAgNDQ4LTQ0OHogbS00OTcuMjggMjEwLjI0YTcyOS42IDcyOS42IDAgMCAxLTIyNC0yMjQgOTYgOTYgMCAxIDEgMTY0LjQ4LTk4Ljg4IDQ5NiA0OTYgMCAwIDAgMTA4LjggMTIyLjU2IDU2NC44IDU2NC44IDAgMCAwIDEwOS4xMi0xMjMuNTIgOTYgOTYgMCAxIDEgMTY0LjQ4IDk4Ljg4IDcyOS42IDcyOS42IDAgMCAxLTIyNCAyMjQgOTYgOTYgMCAwIDEtOTguODggMC45NnoiIGZpbGw9IiNGRTk5NDQiIHAtaWQ9IjM2OTgiPjwvcGF0aD48L3N2Zz4=');
    background-size: cover;
    background-repeat: no-repeat;

}

.ad-icon-size {
    width: 32rpx;
    height: 32rpx;
}

.ad-icon-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ad-bg {
    width: 600rpx;
    height: 600rpx;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('https://www.aimzhu.com/miniapp-assets/ad_bg.png');
}