diff --git a/packkey/combining.css b/packkey/combining.css index 0658576..9ba2a1e 100644 --- a/packkey/combining.css +++ b/packkey/combining.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; * { margin: 0 auto; padding: 0; @@ -34,10 +35,6 @@ body { .mask { height: 6rem !important; } - .flex-but { - top: 5.12rem; - bottom: unset !important; - } } #app { @@ -49,105 +46,148 @@ body { .content { min-height: 100%; - background: linear-gradient(#ff2c02 0 1rem, #f6f6f4 3rem 70%); + background: #ff4830; position: relative; - box-sizing: border-box; - border-radius: 0 0 0.08rem 0.08rem; - padding-top: 0.2rem; } -.content .nav { - text-align: center; - font-size: 0.18rem; - color: #fff; -} - -.content .notis { - margin-top: 0.5rem; - background: rgba(0, 0, 0, 0.2); - color: #fff; - padding: 0.12rem; - box-sizing: border-box; +.content .banner { + width: 100%; + max-height: 100%; } .content .box { padding: 0.16rem; + padding-top: 0; +} + +.content .box .goods-box { + background-size: 100% 100%; + min-height: 1.8rem; + width: 100%; + padding-top: 0.2rem; + box-sizing: border-box; +} + +.content .box .goods-box .title { + text-align: center; + color: #ff3024; + font-weight: bold; + font-size: 0.16rem; + padding-left: 0.12rem; + box-sizing: border-box; +} + +.content .box .goods-box .notis { + margin: 0 0 0.1rem; + color: #ffd3d8; + text-align: center; + font-size: 0.13rem; +} + +.content .box .g-b-u { + overflow-x: scroll; + margin-top: 0.28rem; + margin-bottom: 0.12rem; + width: 94%; + margin-left: 0.14rem; + box-sizing: border-box; + list-style: none; + display: -webkit-box; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; +} + +.content .box .g-b-u::-webkit-scrollbar { + display: none; +} + +.content .box .g-b-u li { + background: url("./云闪付切图/ysf_redenvelope_overdue.png"); + background-size: 100% 100%; + height: 1.16rem; + width: 1rem; + margin-left: 0.1rem; +} + +.content .box .g-b-u li:first-child { + margin-left: 0; +} + +.content .box .g-b-u li .g-b-u-t { + color: #fd4b34; + font-size: 0.12rem; + text-align: center; +} + +.content .box .g-b-u li .reduce { + text-align: center; + color: #ff877d; + font-size: 0.12rem; +} + +.content .box .g-b-u li .money { + text-align: center; + color: #fc4a2f; + font-size: 0.2rem; + font-weight: bold; + margin: 0.02rem 0; +} + +.content .box .g-b-u li .money span { + font-size: 0.12rem; + font-weight: 400; + display: inline-block; + margin-right: -0.04rem; +} + +.content .box .g-b-u li .g-b-but { + font-size: 0.12rem; + text-align: center; + color: #fc4934; + margin-top: 0.23rem; +} + +.content .box .g_b_title { + color: #fff; + font-size: 0.18rem; + display: flex; + align-items: center; + margin: 0.2rem; +} + +.content .box .g_b_title img { + width: 0.26rem; +} + +.content .box .g_b_title img:first-child { + margin-right: 0.1rem; + transform: rotateY(360deg); +} + +.content .box .g_b_title img:last-child { + margin-left: 0.1rem; + transform: rotateY(180deg); } .content .box .box-cotent, .content .box .box-footer { - border-radius: 0.12rem; - background-color: #fff; - margin-bottom: 0.2rem; - padding: 0.14rem; - box-sizing: border-box; -} - -.content .box .box-cotent { - padding: 0.2rem 0 0.3rem; -} - -.content .box .b-t-t { - font-size: 0.18rem; - font-weight: bold; - margin-bottom: 0.15rem; - color: #333333; -} - -.content .box .logo { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0.3rem; -} - -.content .box .logo img { - width: 0.3rem; - margin-right: 0.06rem; -} - -.content .box .t-1 { - color: #666; - margin-bottom: 0.04rem; - font-size: 0.12rem; + margin-bottom: 0.12rem; } .content .box .time { font-size: 0.12rem; margin-top: 0.08rem; - color: #666666; - width: 82%; + text-align: center; + color: #fff; + width: 100%; margin: 0 auto; - word-spacing: 0.05rem; line-height: 0.18rem; } -.content .box .dashedLine { - width: 100%; - margin: 0.2rem 0; -} - -.content .box .box-footer .b-f-t { - font-size: 0.16rem; - margin-bottom: 0.14rem; - line-height: 0.2rem; - font-weight: bold; +.content .box .box-footer { display: flex; - align-items: center; - justify-content: center; -} - -.content .box .box-footer .b-f-t img { - width: 0.12rem; -} - -.content .box .box-footer .b-f-t img:first-child { - margin-right: 0.06rem; -} - -.content .box .box-footer .b-f-t img:last-child { - margin-left: 0.06rem; - transform: rotateY(180deg); + flex-direction: column; } .content .box .box-footer .group_image { @@ -158,20 +198,32 @@ body { } .content .box .box-footer .b-f-i { - font-size: 0.14rem; - margin-top: 0.08rem; - color: #666666; + color: #ff4901; line-height: 0.24rem; min-height: 2rem; } +.content .box .box-footer .b-f-i p { + font-size: 0.12rem; +} + +.content .box .box-footer .b-f-b { + background-size: 100% 100%; + padding: 0 0.24rem; +} + +.content .box .box-footer .b-f-img { + width: 100%; + max-height: 100%; +} + .content .box .box-cotent { display: flex; flex-direction: column; } .content .box .box-cotent input { - width: 90%; + width: 100%; border: 0; outline: 0; background: #f8f9fd; @@ -185,15 +237,10 @@ body { } .content .box .box-cotent .but { - margin-top: 0.2rem; - width: 90%; - border: 0; - outline: 0; - background: #e52600; - height: 0.42rem; - border-radius: 0.2rem; - color: #fff; - font-size: 0.16rem; + margin-top: 0.05rem; + width: 100%; + max-height: 100%; + margin-bottom: 0.08rem; } .prompt { @@ -253,7 +300,7 @@ body { } .mask .model .m-title { - font-size: .18rem; + font-size: 0.18rem; color: #000; } diff --git a/packkey/combining.html b/packkey/combining.html index 2fe5392..8880162 100644 --- a/packkey/combining.html +++ b/packkey/combining.html @@ -11,8 +11,7 @@ type="text/javascript" charset="utf-8"> - - + @@ -33,23 +32,45 @@ -
- -

恭喜您领取立减金

+
+
-

{{goods.title}}

-
@@ -125,11 +149,48 @@ dynamicStyle() { switch (Number(this.goods.group_info.channel)) { case 1: - return { bg: '#0076f6', bt: '#c2dbf5' }; + return { + bg: '#4989f5', + title_color: '#fff', + banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_banner.png', + goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_img.png', + footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_top.png', + footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_middle.png', + footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_d.png', + footer_color: '#4989F5', + notis_color: '#FF486D', + goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png', + goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png', + }; case 2: - return { bg: '#07c160', bt: '#cfeddc' }; + return { + bg: '#cee5be', + title_color: '#239700', + banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_banner.png', + goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_redenvelope_img.png', + footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_top.png', + footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_middle.png', + footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_d.png', + footer_color: '#5eb145', + time_color: '#5eb145', + notis_color: '#239700', + goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png', + goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png', + }; case 3: - return { bg: '#ff2c02', bt: '#f9bbae' }; + return { + bg: '#ff4830', + title_color: '#FF3024', + banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_banner.png', + goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_img.png', + footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_top.png', + footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_middle.png', + footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_d.png', + footer_color: '#FF4901', + notis_color: '#FFD3D8', + goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_tobeused.png', + goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_overdue.png', + }; default: return {}; }