/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 底部tabbar */ /* 我的页面账户信息背景 */ /* 主题色 */ /* 页面背景色 */ /* 文字颜色 */ /* 背景棕色 */ /* 按钮颜色 */ .poster-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; } .poster-ad-container { position: relative; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .poster-close-icon { height: 50rpx; width: 50rpx; align-self: flex-end; margin-right: 10px; } .poster-custom-checkbox-group { color: #FFA900; margin-top: 5px; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; z-index: 9999; } .checkbox-text { font-size: 28rpx; color: #FFA900; } .poster-custom-checkbox { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } .poster-custom-checkbox.checked { background-color: #FFA900; border-color: #FFA900; color: white; border-radius: 50%; } .poster-ic-close { background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MDA3MjkxNjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1ODkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTg3Mi42MDgxOTkgMTUwLjMyNjE0NUM2NzQuMjM5Njc5LTQ5LjU5MjEzIDM0OC43OTEzMjUtNDkuNTkyMTMgMTUwLjQyMjgwNCAxNTAuMzI2MTQ1Yy0xOTkuOTE4Mjc1IDE5OS45MTgyNzUtMTk5LjkxODI3NSA1MjMuODE2ODc1IDAgNzIzLjczNTE0OSAxOTkuOTE4Mjc1IDE5OS45MTgyNzUgNTIzLjgxNjg3NSAxOTkuOTE4Mjc1IDcyMy43MzUxNDkgMCAxOTguMzY4NTIxLTE5OS45MTgyNzUgMTk4LjM2ODUyMS01MjUuMzY2NjI5LTEuNTQ5NzU0LTcyMy43MzUxNDl6IG0tNDAuMjkzNjA1IDY4MS44OTE3ODljLTE3Ni42NzE5NjQgMTc2LjY3MTk2NC00NjYuNDc1OTc0IDE3Ni42NzE5NjQtNjQzLjE0NzkzOCAwLTE3Ni42NzE5NjQtMTc2LjY3MTk2NC0xNzYuNjcxOTY0LTQ2NC45MjYyMiAwLTY0My4xNDc5MzhDMzY1LjgzODYxOSAxMi4zOTgwMzMgNjU1LjY0MjYzIDEyLjM5ODAzMyA4MzIuMzE0NTk0IDE4OS4wNjk5OTZjMTc4LjIyMTcxOCAxNzguMjIxNzE4IDE3OC4yMjE3MTggNDY2LjQ3NTk3NCAwIDY0My4xNDc5Mzh6TTcxMi45ODM1MyAzMDkuOTUwODEzYy0xMC44NDgyNzgtMTAuODQ4Mjc4LTI5LjQ0NTMyNy0xMC44NDgyNzgtNDAuMjkzNjA1IDBMNTExLjUxNTUwMiA0NzEuMTI1MjM2IDM1MC4zNDEwNzkgMzA5Ljk1MDgxM2MtMTAuODQ4Mjc4LTEwLjg0ODI3OC0yOS40NDUzMjctMTAuODQ4Mjc4LTQwLjI5MzYwNiAwLTEwLjg0ODI3OCAxMC44NDgyNzgtMTAuODQ4Mjc4IDI5LjQ0NTMyNyAwIDQwLjI5MzYwNkw0NzEuMjIxODk2IDUxMS40MTg4NDIgMzEwLjA0NzQ3MyA2NzIuNTkzMjY1Yy0xMC44NDgyNzggMTAuODQ4Mjc4LTEwLjg0ODI3OCAyOS40NDUzMjcgMCA0MC4yOTM2MDYgMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNiAwTDUxMS41MTU1MDIgNTUxLjcxMjQ0OCA2NzIuNjg5OTI1IDcxMi44ODY4NzFjMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNSAwIDEwLjg0ODI3OC0xMC44NDgyNzggMTAuODQ4Mjc4LTI5LjQ0NTMyNyAwLTQwLjI5MzYwNkw1NTEuODA5MTA3IDUxMS40MTg4NDIgNzEyLjk4MzUzIDM1MC4yNDQ0MTljMTAuODQ4Mjc4LTEwLjg0ODI3OCAxMC44NDgyNzgtMjcuODk1NTczIDAtNDAuMjkzNjA2eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMzU5MCI+PC9wYXRoPjwvc3ZnPg=="); background-size: cover; background-repeat: no-repeat; } .poster-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; } .poster-ad-coupons-box { position: absolute; height: 500rpx; width: 83vw; top: 80rpx; left: 0; } .poster-ad-coupons-list-box { display: flex; flex-direction: column; align-items: center; } .poster-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%; } .poster-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; } .poster-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; } .poster-ad-coupons-item-desc { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .poster-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; } .poster-ad-coupons-item-price-icon { font-size: 20rpx; } .poster-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; } .poster-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; } .poster-ad-coupons-item { position: relative; top: 0; left: 0; width: 500rpx; height: 240rpx; } .poster-ad-coupons-item:nth-of-type(n+2) { margin-top: 20rpx; } .poster-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; } .poster-p-icon { font-size: 28rpx; margin-bottom: 5px; color: #FFA900; } .poster-p-content { font-size: 45rpx; margin-left: 5px; color: #FFA900; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poster-ad-desc-box { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #cc8a05fb; flex: 3; } .poster-ad-desc { font-size: 32rpx; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300rpx; } .poster-ad-period { font-size: 24rpx; } .poster-btn { border-radius: 50rpx; background-color: #ffa900; color: white; font-size: 28rpx; text-align: center; margin-top: 30rpx; padding: 10rpx; width: 55vw; align-self: center; z-index: 9999; } .poster-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; } .poster-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; } .poster-ad-ic-down-circle { background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzcxOTM5MTMzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2OTciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTk2MCA1MTJhNDQ4IDQ0OCAwIDEgMC00NDggNDQ4IDQ0OCA0NDggMCAwIDAgNDQ4LTQ0OHogbS00OTcuMjggMjEwLjI0YTcyOS42IDcyOS42IDAgMCAxLTIyNC0yMjQgOTYgOTYgMCAxIDEgMTY0LjQ4LTk4Ljg4IDQ5NiA0OTYgMCAwIDAgMTA4LjggMTIyLjU2IDU2NC44IDU2NC44IDAgMCAwIDEwOS4xMi0xMjMuNTIgOTYgOTYgMCAxIDEgMTY0LjQ4IDk4Ljg4IDcyOS42IDcyOS42IDAgMCAxLTIyNCAyMjQgOTYgOTYgMCAwIDEtOTguODggMC45NnoiIGZpbGw9IiNGRTk5NDQiIHAtaWQ9IjM2OTgiPjwvcGF0aD48L3N2Zz4="); background-size: cover; background-repeat: no-repeat; } .poster-ad-icon-size { width: 32rpx; height: 32rpx; } .poster-ad-icon-box { display: flex; flex-direction: column; justify-content: space-between; } .poster-image-box { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 652rpx; } /* 图片背景 */ .poster-ad-coupons-box-bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* 内容 */ .poster-ad-coupons-container { display: flex; flex-direction: column; }