@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ page { min-height: 100%; background-color: #693bec; } .sure { padding: 10rpx 20rpx; border-radius: 30rpx; font-size: 26rpx; background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%); color: #fff; width: 200rpx; text-align: center; margin: 0 auto; margin-top: 40rpx; } .one { height: 252rpx; width: 252rpx; } .two { height: 126rpx; width: 126rpx; } .onebox { height: 372rpx; width: 352rpx; border-radius: 26rpx; background-color: #fff; } .twobox { height: 186rpx; width: 176rpx; border-radius: 13rpx; background-color: #fff; } .sj { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #ac3800; line-height: 40rpx; padding-left: 36rpx; } .nr { padding: 0 55rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ac3800; line-height: 40rpx; } .xz { text-align: center; height: 48rpx; font-size: 34rpx !important; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #ac3800; line-height: 48rpx; } .mybtn { display: flex; width: 100%; justify-content: space-between; padding: 20rpx 32rpx 36rpx 32rpx; } .mybtn image { width: 308rpx; height: 84rpx; } .camera_head { height: 88rpx; } .details_title { width: 100%; position: -webkit-sticky; position: sticky; top: 0; z-index: 2021; } .details_title .details_nav { width: 100%; } .details_title .details-title_head { width: 100%; height: 88rpx; padding: 0 30rpx; background: #ffffff; } .details_title .details-title_head .details_title_return { width: 44rpx; height: 44rpx; } .details_title .details-title_head .details_title_name { width: 466rpx; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 36rpx; font-weight: bold; } .details_title .details-title_head .details_title_mp3 { width: 44rpx; height: 44rpx; } .camera_main { height: 793px; padding-top: 58rpx; background: url(/pagesA/static/choubg@2x.png) no-repeat; background-color: #693bec; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .camera_main .camera_main_head { padding: 30rpx 30rpx 80rpx 30rpx; } .camera_main .camera_main_head .details_head_gold { color: #ffffff; font-size: 30rpx; font-weight: bold; } .camera_main .camera_main_head .details_head_btn { width: 120rpx; height: 50rpx; color: #ffffff; font-size: 28rpx; background: linear-gradient(0deg, #f6af32 0%, #f7751f 100%); border-radius: 25rpx; margin-left: 30rpx; } .camera_main .camera_main_head .details_head_rule image { width: 24rpx; height: 24rpx; margin-left: 10rpx; } .camera_main .camera_main_head .details_head_rule text { color: #ffffff; font-size: 26rpx; } .camera_main .camera_main_box { width: 680rpx; height: 1000rpx; margin: 0 auto; background-size: 100% 100%; } .camera_main .camera_main_box .camera_main_box_name { line-height: 132rpx; text-align: center; padding-top: 50rpx; height: 60rpx; font-size: 44rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #edec6f; } .camera_main .camera_main_box .camera_main_box_ul { width: 100%; padding: 0 118rpx; margin: 0 auto; margin-top: 140rpx; flex-wrap: wrap; justify-content: space-between; } .camera_main .camera_main_box .camera_main_box_ul .camera_main_box_li { width: 140rpx; height: 164rpx; margin-bottom: 42rpx; background-size: cover; border-radius: 8rpx; } .camera_main .camera_main_box .camera_main_box_ul .camera_main_box_li:nth-child(4n) { margin-right: 0; } .camera_main .camera_main_box .camera_main_box_ul .camera_main_box_li image { width: 100%; height: 100%; } .camera_main .camera_main_box .camera_main_box_ul .active { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAABuCAYAAADxuSuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzODVFNDQ5RDdCQTExRUI5MkVGQTRBRUY2OEQ3NzgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzODVFNDRBRDdCQTExRUI5MkVGQTRBRUY2OEQ3NzgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjM4NUU0NDdEN0JBMTFFQjkyRUZBNEFFRjY4RDc3ODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjM4NUU0NDhEN0JBMTFFQjkyRUZBNEFFRjY4RDc3ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ByQWIAAADf0lEQVR42uzaP4sTQRiA8by729icWFjYKciV551or6WdgiBoKVY2gl/Cym+hcJ/ARrCy8A+KYHkgh83BwVkqnLuv75hZM5nM7CZi4U2eB16NSTbF7o+ZTVD0cHMSVdlctblhc8Hm1ITWse82X2xe2Lyz6cIXJYJzzeapzQ7njYI+2jy2eRWuLn0PbV6ChhLteBuP4hXnrs2zlT5KOZtFJCsfcc/muYOzYQ/2bM4OIlG/yylwioQjfv+RUUyHNhcb++N+Fk2PpQvQhENlwAmnCiYNyFl54ODcSr7cY2lnj1WDe2vglLXiGBQJ4dTB48VuOjhbyZWmnaHRlhWn+BXHXWcPR2p/fevs1rXl4JxeeLqdrTYarjrxfQ6Vg6ffmnR6eUX9v921bxaO2GiGtqg5NC1wioaj8yvL73+2s9Uo3rKa3A2xdun7HLaqQrcqjXDIdOuSzEKRXnE08Y0KOOV/q4qfqwIH9RCcGIwmhq2qrDRCogMOZASOTjJoWG3KBpSYPzfKg3Am0W80Q2DAU9bvOLlrnbnOVVLdmEwqb7VZZjXKwsmtOoBZL0BLXPOKs0V/E3AIOAQcAg4Bhwg4BBwCDgGHgEMEHAIOAYeAQ8AhAg4Bh4BDwCHgEAGHgEPAIeAQcIiAQ8Ah4BBwCDhEwCHgEHAIOAQcIuAQcAg4BBwi4BBwCDgEHAIOEXAIOAQcAg4Bhwg4BBwCDgGHgEMEHAIOAYeAQ8AhAg4Bh4BDwCHgEAGHgEPAIeAQcIiAQ8Ah4BBwCDicAgIO/QdwJPM3ldsK15wVh/7BiiNLrCysPOWuNEOvR+9pBt+YGioPjax+zZvUh4iNAgc43sL4ihMf6DYy9dOnieeoDDhVNOHzo1tVeKACZ63hVGk0g3DERmMk7gM60BSJp1rEIyGeBBydM9UfXNtDDYxI8E7glA2n9mjq7Ipz7OAc2Jybe7r2OGp/oxzCqdiqivsaHm1XUgcrTZ088sDBeW1ze+Gl2n9Q6++su2jrAk5x9zgiEZj8z8NvHJzdJBwJ8Pj7GukyaEB0MleaGE98n5NvV/Rw0731vc3lwbfqwLcsOtl4Vvut7oPNlf7m+I7NW5szo0sarXPfvBXtF6Q9m+s2+5wbyrTvjTgrczvZJ5ttmyc2R5wn8h15E9veyHQDUk3epLgt7JLN+Qn/9WJd+2Hz1eazzc/4xV8CDACjcwcSBkAPOwAAAABJRU5ErkJggg==) no-repeat; background-size: cover; } .camera_footer { width: 722rpx; margin: 0 auto; background-color: #f4e569; border: 4rpx solid; border-top: 0; border-bottom: 0; padding: 20rpx; } .camera_footer .camera_footer_li { width: 330rpx; height: 88rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: #ffffff; text-shadow: 0rpx 2rpx 1rpx #fc985c; border-radius: 44rpx; } .camera_footer .camera_footer_li:first-child { background: linear-gradient(145deg, #fb986e, #fa7e48); box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(138, 56, 6, 0.44); } .camera_footer .camera_footer_li:last-child { background: linear-gradient(145deg, #ff6666, #ff413f); box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(138, 56, 6, 0.44); border-radius: 44rpx; } .pay { background: #ffffff; border-radius: 20rpx 20rpx 0rpx 0rpx; padding: 0 50rpx 32rpx 50rpx; position: relative; } .pay .pay_close { top: 30rpx; right: 30rpx; width: 44rpx; height: 44rpx; position: absolute; } .pay .pay_head { text-align: center; font-size: 30rpx; font-weight: bold; padding: 40rpx 0 50rpx 0; } .pay .pay_shop { margin-bottom: 40rpx; } .pay .pay_shop .pay_shop_main { display: flex; flex: 1; height: 200rpx; flex-direction: column; justify-content: space-around; } .pay .pay_shop .pay_shop_img { width: 200rpx; height: 200rpx; padding: 12rpx; margin-right: 30rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_top { display: flex; margin-bottom: 12rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_top .pay_shop_img_left { margin-right: 12rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_top .pay_shop_img_left image { width: 114rpx; height: 114rpx; border-radius: 6rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_top .pay_shop_img_right image { width: 51rpx; height: 51rpx; border-radius: 6rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_top .pay_shop_img_right image:first-child { margin-bottom: 12rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_bot { display: flex; justify-content: flex-end; } .pay .pay_shop .pay_shop_img .pay_shop_img_bot image { width: 51rpx; height: 51rpx; margin-left: 12rpx; border-radius: 6rpx; } .pay .pay_shop .pay_shop_img .pay_shop_img_bot image:first-child { margin-left: 0; } .pay .pay_shop .pay_shop_name { font-size: 28rpx; } .pay .pay_shop .pay_shop_price_l { color: #cf271b; font-size: 30rpx; } .pay .pay_shop .pay_shop_price_btn { width: 183rpx; height: 50rpx; color: #fa7e48; font-size: 30rpx; font-weight: bold; background: rgba(246, 175, 50, 0.5); border-radius: 25rpx; } .pay .pay_attention { color: #666666; } .pay .pay_contant { margin: 24rpx 0 59rpx 0; } .pay .pay_contant image { width: 32rpx; height: 32rpx; margin-right: 10rpx; } .pay .pay_contant text { font-size: 26rpx; } .pay .pay_gold { height: 78rpx; font-size: 26rpx; background: #ff6666; border-radius: 39rpx; } .pay .pay_ul_btn { width: 310rpx; height: 78rpx; font-size: 26rpx; background: #fa7e48; border-radius: 39rpx; } .pay .pay_ul_btn:last-child { background: #ff6666; } .regulation { width: 650rpx; padding: 0 0 0 30rpx; background: #ffffff; border-radius: 20rpx; position: relative; } .regulation .scroll-view { height: 735rpx; } .regulation .regulation_close { position: absolute; width: 44rpx; height: 44rpx; top: 30rpx; right: 30rpx; } .regulation .regulation_name { padding: 40rpx 0; padding-right: 30rpx; text-align: center; font-size: 30rpx; font-weight: bold; } .prize { width: 750rpx; display: flex; justify-content: center; } .prize .prize_box { width: 100%; height: 1120rpx; position: relative; flex-direction: column; background: url(/pagesA/static/guang@2x.png) no-repeat; background-size: 100% auto; background-position: top; background-repeat: no-repeat; } .prize .prize_box .prize_close { width: 64rpx; height: 64rpx; top: 64rpx; right: 30rpx; position: absolute; } .prize .prize_box .prize-top { width: 528rpx; height: 170rpx; position: absolute; top: 120rpx; left: 118rpx; } .prize .prize_box .prize-top-2 { top: 40rpx; } .prize .prize_box .prize_footer { width: 100%; height: 472rpx; background-image: url(/pagesA/static/btns@2x.png); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; left: 0; bottom: -34rpx; } .prize .prize_box .prize_footer-2 { bottom: -114rpx; } .prize .prize_box .prize_footer .btn { width: 310rpx; height: 84rpx; border-radius: 16rpx; position: absolute; left: 220rpx; } .prize .prize_box .prize_footer .btn-1 { top: 210rpx; } .prize .prize_box .prize_footer .btn-0 { top: 316rpx; } .prize .shiwan { background: url(/static/image/open/tanchuangbeijing@2x.png) no-repeat; background-size: cover; } .prize .prize_ul { width: 566rpx; display: flex; flex-wrap: wrap; justify-content: space-between; position: absolute; top: 336rpx; left: 92rpx; } .prize .prize_ul-2 { top: 226rpx; } .prize .prize_ul::after { content: ''; width: 176rpx; } .prize .prize_ul_li { margin-bottom: 16rpx; position: relative; width: 176rpx; height: 186rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; display: flex; padding: 8rpx 0; box-sizing: border-box; } .prize .prize_ul_li image { margin: 0 auto; } .prize .prize_ul_li text { font-size: 24rpx; font-weight: 500; color: #171a20; width: 146rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .prize .prize_ul_li .left-top-tag { width: 3rem; height: 3rem; } .prize .prize_ul_li .left-top-tag .tag-text { font-size: 0.6rem !important; } .prize .prize_shop { transition: 1s; position: absolute; top: 336rpx; left: 198rpx; display: flex; flex-direction: column; } .prize .prize_shop image { width: 174rpx; height: 235rpx; margin-bottom: 20rpx; } .prize .prize_shop text { width: 70%; font-size: 16rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #171a20; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .prize .prize_shop .colorblack { font-size: 32rpx !important; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #171a20; } .prize .prize_shop .left-top-tag { width: 5rem; height: 5rem; } .prize .prize_shop .left-top-tag .tag-text { font-size: 1rem; } .prize .tag-normal { box-shadow: 0 0 40rpx 18rpx #9d85ff; } .prize .tag-rare { box-shadow: 0 0 40rpx 18rpx #47a8ff; } .prize .tag-supreme { box-shadow: 0 0 40rpx 32rpx #feb337; } .prize .tag-legend { box-shadow: 0 0 40rpx 32rpx #fe615e; } .prize .shiwan { width: 399rpx; height: 48rpx; color: #ffffff; font-size: 30rpx; margin-top: 40rpx; background: #000000; border-radius: 27rpx 27rpx 27rpx 27rpx; } .left-top-tag { z-index: 999999; position: absolute; left: -2px; top: -3px; } .left-top-tag .tag-img { height: 100% !important; width: 100% !important; } .left-top-tag .tag-text { position: absolute; top: 30%; left: 30%; color: #fff !important; width: auto !important; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); transform: translateX(-50%) translateY(-50%) rotate(-45deg); } .prize_shop_scale { -webkit-transform: scale(1.3); transform: scale(1.3); } .recycle { width: 640rpx; padding-bottom: 95rpx; position: relative; background: #ffffff; box-shadow: 0rpx -5rpx 20rpx 0rpx rgba(0, 0, 0, 0.1); border-radius: 30rpx; } .recycle .recycle_close { top: 20rpx; right: 30rpx; width: 44rpx; height: 44rpx; position: absolute; } .recycle .recycle_head { height: 100rpx; text-align: center; line-height: 100rpx; font-size: 32rpx; font-weight: bold; border-bottom: 2rpx solid #e9e9e9; } .recycle .recycle_price { margin: 40rpx 0 0rpx 0; flex-direction: column; } .recycle .recycle_price text { color: #fa7e48; font-size: 36rpx; font-weight: bold; } .recycle .recycle_price text:last-child { color: #333333; margin-top: 10rpx; font-size: 26rpx; } .recycle .recycle_ul { padding: 0 30rpx; margin: 50rpx 0; } .recycle .recycle_ul_li { margin-bottom: 30rpx; } .recycle .recycle_ul_li:last-child { margin-bottom: 0; } .recycle .recycle_ul_li .recycle_ul_li_txt { color: #999999; font-size: 26rpx; } .recycle .recycle_ul_li .recycle_ul_li_r text { color: #999999; font-size: 26rpx; } .recycle .recycle_ul_li .recycle_ul_li_r text:last-child { width: 80rpx; text-align: right; color: #fa7e48; font-size: 30rpx; } .recycle .recycle_txt { padding: 0 30rpx; color: #999999; font-size: 26rpx; } .loading-mask { position: fixed; height: 100vh; width: 100vw; top: 0; display: flex; align-items: center; justify-content: center; background-color: #76767652; } .loading-mask .loading-gif { width: 60%; }