/* 轮播图 */ .banner { width: 100%; height: 3.64rem; overflow: hidden; } .banner img { width: 100%; min-height: 3.64rem; } /* 首页内容区 */ .index-content { background-color: #fed7b0; padding: .45rem .2rem; border-top: .02rem solid #eeb94f; } /* 活动 */ .index-content .section { padding: .1rem; background-image: linear-gradient(to top, #fec44b, #fff8b4); position: relative; } .section-box { flex-wrap: wrap; width: 100%; background-color: #ffffff; } .index-content .section:nth-of-type(1) .section-box, .index-content .section:nth-of-type(2) .section-box { padding: .62rem .36rem .3rem; } .index-content .section:nth-of-type(3) .section-box { padding: .48rem .36rem; } .activity-time { justify-content: center; } .activity-time .envelopes { width: 5.03rem; height: 3.95rem; position: relative; } .activity-time .envelopes>img { width: 100%; } .activity-time .envelopes>p { justify-content: center; align-items: center; width: 2.25rem; height: .58rem; background-image: linear-gradient(to top, #fed383, #fdf0c2); color: #ec294c; font-weight: bold; position: absolute; left: calc(50% - 1.125rem); bottom: .7rem; z-index: 1; animation: scale_name 1s linear alternate infinite; } @keyframes scale_name { from { transform: scale(.9); } to { transform: scale(1.1); } } .activity-info .txt { width: 100%; line-height: 1.7; } .activity-info .survey>p { line-height: 2; } .activity-info .introduce { line-height: 1.7; margin-top: .2rem; } /* 商家推荐 */ .recommend-title { justify-content: center; align-items: center; width: 3.2rem; height: .88rem; background-color: #ff353f; border: .1rem solid #ffde77; border-radius: .44rem; text-indent: .04rem; letter-spacing: .04rem; position: absolute; left: 50%; top: -0.49rem; transform: translateX(-50%); } .recommend .item { width: calc(33.33% - .16rem); margin: .25rem .24rem 0 0; } .recommend .item:nth-of-type(3n) { margin-right: 0; } .recommend .item>.img { width: 100%; height: 1.9rem; overflow: hidden; } .recommend .item>.img img { width: 100%; min-height: 1.9rem; } .recommend .item>.txt { margin: .2rem 0 .1rem; text-align: center; } /* 领券 */ .luck-draw { width: 100%; min-height: calc(100vh - 0.96rem); background-image: url(../images/luck-draw-bg.jpg); background-size: 100% 100%; } .card-list { padding: .45rem .2rem; } .card-list .item { align-items: center; height: 1.76rem; margin-bottom: .45rem; } .card-list .item:last-child { margin-bottom: 0; } .card-txt { width: calc(100% - 2.36rem); height: 100%; padding-left: .4rem; } .card-txt p { margin-top: .13rem; } .card-txt strong { display: block; line-height: 1.15; } .card-txt span { display: block; margin-top: .02rem; } .card-btn, .use-btn { justify-content: center; align-items: center; width: 2.36rem; height: 100%; border-radius: 0 .08rem .08rem 0; background-image: url(../images/card-btn.png); background-size: cover; overflow: hidden; } .card-btn strong, .use-btn strong { display: block; text-indent: .18rem; } .grayscale-btn { background-image: url(../images/grayscale-btn.png); } .card-btn img, .use-btn img { height: .84rem; margin-left: .13rem; } /* 已核销列表 */ .card-list .card-item { height: auto; padding: .25rem; box-shadow: 0 0 .16rem rgba(243, 91, 0, .17); } .card-item .info { justify-content: space-between; align-items: center; } .card-item .price { width: 2.5rem; font-weight: bold; } .card-item .used-txt { width: calc(100% - 2.6rem); } .card-item .used-txt>span { display: block; margin-bottom: .04rem; } .card-item .used-txt>p:last-child { margin-top: .08rem; } .card-item>.info .copy { justify-content: space-between; } .card-item .copy-btn>em { display: block; width: 0; height: 0; overflow: hidden; position: fixed; top: -5rem; right: -5rem; } /* 商户展示 */ .search { justify-content: space-between; align-items: center; width: calc(100% - .5rem); height: .86rem; margin: .3rem auto 0; } .search-form { justify-content: space-between; width: 100%; } .search-select-bg { width: 1.94rem; border: .02rem solid #868686; position: relative; } .search-select { width: 100%; height: 100%; padding: 0 .3rem; color: #868686; } .search-select-bg>img { display: block; width: .14rem; height: .3rem; position: absolute; top: 50%; right: .15rem; transform: translateY(-50%); } .search-input-bg { align-items: center; width: calc(100% - 2.1rem); } .search-input { width: 100%; line-height: .8rem; border-radius: .25rem 0 0 .25rem; border: .02rem solid #868686; border-right: 0; padding: 0 .3rem; -webkit-appearance: none; color: #868686; } .search-input::-webkit-input-placeholder { color: #868686; } .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-btn { justify-content: center; align-items: center; width: .96rem; height: 100%; border-radius: 0 .25rem .25rem 0; } .search-btn>img { width: .4rem; height: .4rem; filter: grayscale(100%) brightness(100); } /* 商户列表 */ .business-list { padding: 0 .25rem .3rem; } .business-list .item { justify-content: space-between; border: .04rem solid #ffb285; padding: .18rem; margin-top: .3rem; } .business-list .item .img { width: 1.9rem; height: 1.9rem; overflow: hidden; } .business-list .item .img img { width: 100%; min-height: 1.9rem; } .business-list .item .txt { width: calc(100% - 2.15rem); } .business-list .item .txt>a { display: block; height: 1.4rem; } .business-list .item .txt p { margin-top: .1rem; } .business-tips { text-align: center; margin-top: 20px; } .navigation-btn { justify-content: center; align-items: center; width: 1.9rem; height: .5rem; } /* 商家详情 */ .detail-info { justify-content: space-between; align-items: center; padding: .3rem .5rem; border-top: .16rem solid #ffd6ac; border-bottom: .16rem solid #ffd6ac; } .detail-info>.cover { width: 1.3rem; height: 1.3rem; overflow: hidden; } .detail-info>.cover img { width: 100%; min-height: 1.3rem; } .detail-info>.txt { width: calc(100% - 1.65rem); } .detail-info>.txt p { margin-top: .15rem; } /* 标题 */ .detail-title { padding: .2rem .4rem; margin-top: .2rem; } /* 介绍 */ .detail { padding: 0 .4rem; } .detail img { max-width: 100%; margin: .1rem auto; } /* 地址 */ .address { padding: 0 .4rem; } .addr-map { width: 100%; height: 4rem; } .addr-txt { margin: .3rem 0; } .addr-txt .item { justify-content: space-between; align-items: center; width: 100%; height: .64rem; } .addr-txt .item p { width: calc(100% - 0.48rem); } .addr-txt .item span { justify-content: center; align-items: center; width: .38rem; height: .38rem; } /* 我的 */ .my-info-bg { align-items: center; width: 100%; height: 3.85rem; background-image: url(../images/my-bg.jpg); background-size: 100%; } .my-info { width: 100%; text-align: center; } .my-info .cover { justify-content: center; align-items: center; width: 1.9rem; height: 1.9rem; margin: 0 auto; overflow: hidden; } .my-info .cover img { max-width: 100%; max-height: 100%; } .my-info .nick-name { margin: .12rem 0; } /* 内容 */ .my-content { padding: 0 .5rem .3rem; margin-top: .12rem; } .my-content .item { justify-content: space-between; align-items: center; width: 100%; height: .92rem; border-bottom: .02rem solid #d6d6d6; } .my-content .item>span { justify-content: center; width: .6rem; } .my-content .item>p { width: calc(100% - .74rem); } .my-content .item>img { width: .14rem; } /* 绑定手机号 */ .bind-content { padding: 0 .4rem; } .bind-phone-title { margin: .7rem 0; text-align: center; } .phone-input { width: 100%; height: .76rem; border-bottom: .02rem solid #d6d6d6; } .phone-input::-webkit-input-placeholder { color: #000000; } .bind-btn { justify-content: center; align-items: center; width: 5.6rem; height: .96rem; margin: .7rem auto 0; } /* 待使用&已使用 */ .use-txt { box-shadow: 0 0 .16rem rgba(243, 91, 0, .17); } /* 复制成功提示 */ .copy-tips { display: none; padding: .15rem .3rem; position: fixed; left: 50%; top: 50%; z-index: 999; transform: translate(-50%, -50%); } .copy-tips.show { display: block; } /* 核销 */ .pull-bg { display: none; width: 7.5rem; height: 100%; background-color: rgba(0, 0, 0, .3); position: fixed; left: 50%; top: 0; z-index: 666; transform: translateX(-50%); } .pull-bg.show, .submit-btn.show { display: block; } .card-window { display: none; width: 6.5rem; padding: .48rem .48rem .6rem; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; } .card-window.show { display: block; } .window-title { text-align: center; } .card-code { width: 2.8rem; margin: .48rem auto; } .card-code>img { width: 100%; } .code-btn { justify-content: center; align-items: center; height: .98rem; } /* 扫码 */ #qr-canvas { width: 4.5rem; height: 4.5rem; } /* 导航弹窗 */ .navigation-box { width: 7.5rem; height: 0; border-radius: .3rem .3rem 0 0; box-shadow: 0 0 .5rem rgba(0, 0, 0, .3); position: fixed; left: 50%; bottom: 0; z-index: 9999; transform: translateX(-50%); overflow: hidden; transition: all .6s; } .navigation-box.show { height: 3rem; } .navigation-box .item { line-height: 1rem; text-align: center; border-bottom: .02rem solid #e1e1e1; } .navigation-box .item:last-child { border: 0; } /* 核销数据 */ .write-off { padding: .5rem .5rem 0; } .write-off .item { margin-bottom: .5rem; } .write-off .item .title { margin-bottom: .3rem; } .write-off .item:first-child { margin-bottom: .4rem; } .write-off .item:first-child .title { margin-bottom: .2rem; } .write-off .item:first-child input { display: block; width: 100%; height: .4rem; font-size: .3rem; } .write-off .item .title>em { margin-left: .2rem; } .write-off .item .img { flex-wrap: wrap; } .write-off .item .img>div { width: 1.72rem; height: 1.72rem; border: 1px solid #080808; margin-top: .3rem; overflow: hidden; } .write-off .item .img>div:nth-of-type(1), .write-off .item .img>div:nth-of-type(2), .write-off .item .img>div:nth-of-type(3){ margin-top: 0; } .upload-img { margin-right: .3rem; position: relative; } .upload-img .del-btn{ display: flex; justify-content: center; align-items: center; width: .36rem; height: .36rem; font-style: normal; background-color: #ec294c; border-radius: 100%; position: absolute; top: 0; right: 0; } .upload-img .del-btn>em{ font-size: .24rem; color: #ffffff; transform: scaleX(1.36) rotateZ(-2deg); } .upload-img img { width: 100%; } .upload-btn { justify-content: center; align-items: flex-end; text-align: center; position: relative; } .upload-btn img { width: .54rem; } .upload-btn em { display: block; margin: .25rem 0 .14rem; } .upload-btn>input{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } /* 核销按钮 */ .write-off-btns { width: 5.6rem; margin: 0 auto; padding: .6rem 0 .3rem; } .write-off-btns>.btn { justify-content: center; align-items: center; height: 1rem; color: #ffffff; } .back-btn { margin-top: .3rem; } /* 领券弹窗 */ .collect-coupons{ display: none; width: calc(100% - 1rem); height: 70vh; transform: translate(-50%,-50%); background-color: #ffffff; border-radius: .3rem; padding-bottom: .5rem !importants; position: fixed; left: 50%; top: 50%; z-index: 999; overflow: hidden; } .collect-coupons.show{ display: block; } .collect-coupons-title{ line-height: .4rem; text-align: center; margin-bottom: .2rem; } .collect-coupons-list{ width: 100%; max-height: calc(70vh - 1.6rem); overflow-y: auto; } .collect-coupons-list::-webkit-scrollbar { width: 0; height: 0; opacity: 0; } .collect-coupons-list>.item:first-child{ margin-bottom: .2rem !important; } .collect-coupons-list .code-btn{ width: 3.6rem; margin: 0 auto; color: #ffffff; } /* 尾部 */ .footer { width: 7.5rem; height: .96rem; box-shadow: 0 0 .4rem rgba(243, 91, 0, .4); padding: 0 .2rem; overflow-x: hidden; position: fixed; left: 50%; bottom: 0; z-index: 99; transform: translateX(-50%); } .foot { justify-content: space-between; align-items: center; width: 100%; height: .96rem; } .foot>.item { flex-wrap: wrap; justify-content: center; width: 25%; } .foot-business>.item { width: 50%; } .foot>.item img { height: .34rem; margin-top: .06rem; } .foot>.item img:nth-of-type(2) { display: none; } .foot>.item span { width: 100%; text-align: center; margin-top: .02rem; } .foot>.item.active img:nth-of-type(1) { display: none; } .foot>.item.active img:nth-of-type(2) { display: block; } .foot>.item.active span { color: #f35b00; }