.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; } .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; } .ad-coupons-box { position: absolute; height: 500rpx; width: 83vw; top: 80rpx; left: 0; } .ad-coupons-list-box { display: flex; flex-direction: column; align-items: center; } .ad-coupons-item-bg { background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url('https://www.aimzhu.com/miniapp-assets/ad_item_bg.png'); width: 100%; height: 100%; } .ad-coupons-item-content { position: absolute; display: flex; top: 55rpx; left: 0; flex-direction: row; width: 100%; height: 77%; justify-content: center; align-items: center; } .ad-coupons-item-price-box { padding: 5rpx; color: #000000; font-size: 40rpx; font-weight: bold; align-items: baseline; justify-content: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ad-coupons-item-desc { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .ad-coupons-item-price { flex: 0.5; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 60rpx; font-weight: bold; color: #000000; } .ad-coupons-item-price-icon { font-size: 20rpx; } .ad-coupons-item-desc-title { font-size: 32rpx; margin-left: 5px; color: #000000; font-weight: bold; text-align: center; width: 28vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .ad-coupons-item-desc-time { font-size: 18rpx; margin-left: 5px; color: #000000; font-weight: bold; width: 29vw; text-overflow: ellipsis; white-space: nowrap; text-align: center; overflow: hidden; } .ad-coupons-item { position: relative; top: 0; left: 0; width: 500rpx; height: 240rpx; } .ad-coupons-item:nth-of-type(n+2) { margin-top: 20rpx; } .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: 50rpx; background-color: rgba(255, 169, 0, 1); color: rgba(255, 255, 255, 1); font-size: 28rpx; text-align: center; margin-top: 20rpx; padding: 10rpx; width: 55vw; align-self: center; } .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; } .image-box { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 652rpx; height: 774rpx; } /* 图片背景 */ .ad-coupons-box-bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* 内容 */ .ad-coupons-container { display: flex; flex-direction: column; }