/* 头部 */ .header { align-items: center; width: 7.5rem; height: .94rem; position: fixed; left: 50%; top: 0; z-index: 99; transform: translateX(-50%); } .header-back { justify-content: center; width: .6rem; height: .4rem; } .header-back>img { width: .4rem; height: .4rem; } .header-title { width: calc(100% - 1.2rem); line-height: 1.2; text-align: center; } /* 尾部 */ .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>.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: .06rem; } .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; } /* 轮播图 */ .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%; padding: .48rem .36rem; background-color: #ffffff; } .activity { justify-content: space-between; } .activity .envelopes { width: 2.8rem; height: 3.66rem; background-image: url(../images/envelopes.png); background-size: 100% 100%; } .activity .envelopes>span { display: block; font-size: .64rem; text-align: center; line-height: 1.5; margin-top: 1.7rem; color: #ffebac; } .activity .envelopes>p { justify-content: center; align-items: center; width: calc(100% - .52rem); height: .58rem; background-image: linear-gradient(to top, #fed383, #fdf0c2); margin: .15rem auto 0; color: #ec294c; font-weight: bold; animation: scale_name 1s linear alternate infinite; } @keyframes scale_name { from { transform: scale(.95); } to { transform: scale(1.05); } } .activity .txt { width: 100%; line-height: 1.7; } .activity .txt>p { margin-top: .25rem; } /* 商家推荐 */ .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 - 1.92rem); background-image: url(../images/luck-draw-bg.jpg); background-size: cover; } .turntable-title{ width: 5.25rem; height: 2.17rem; padding: .5rem 0 .45rem; margin: 0 auto; } .turntable-title>img{ width: 100%; } .turntable-bg{ width: 6.73rem; height: 7.69rem; margin: 0 auto; position: relative; } .lamp{ width: 5.6rem; height: 5.6rem; position: absolute; left: 50%; top: .59rem; z-index: 1; transform: translateX(-50%); animation: lamp-opacity .3s linear alternate infinite; } @keyframes lamp-opacity { from { opacity: 0; } to { opacity: 1; } } .turntable{ width: 4.4rem; height: 4.4rem; position: absolute; left: 50%; top: 1.2rem; margin-left: -2.2rem; z-index: 9; transition: all 3s; } .pointer{ width: 1.92rem; height: 2.06rem; position: absolute; left: 50%; top: 2.34rem; transform: translateX(-50%); z-index: 99; } .turntable-bg img{ width: 100%; } /* 结果提示 */ .result-tips{ display: none; width: 5.4rem; padding: .5rem; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 999; } .result-tips.show{ display: block; } .tips-msg{ text-align: center; padding: .46rem 0; } .tips-btn{ justify-content: center; align-items: center; width: 3.64rem; height: .98rem; margin: .1rem auto 0; } /* 商户展示 */ .search { justify-content: space-between; align-items: center; width: calc(100% - .5rem); height: .86rem; margin: .3rem auto 0; padding: 0 .3rem 0 .4rem; border: .02rem solid #868686; } .search-input { width: calc(100% - .6rem); line-height: .8rem; } .search-input::-webkit-input-placeholder { color: #868686; } .search img { width: .4rem; height: .4rem; } /* 商户列表 */ .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; } .navigation-btn { justify-content: center; align-items: center; width: 1.9rem; height: .5rem; } /* 我的 */ .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; } /* 待使用/已核销卡券 */ .card-list { padding: 0 .2rem .3rem; margin-top: .15rem; } .card-list .item { justify-content: space-between; align-items: center; width: 100%; padding: .3rem .35rem .3rem .25rem; margin-top: .35rem; box-shadow: 0 0 .16rem rgba(243, 91, 0, .17); } .card-list .item>.info { width: calc(100% - 1.12rem); } .card-list .item>.info .price { margin-right: .3rem; } .card-list .item>.info .price span { display: inline-block; width: .4rem; height: .4rem; text-align: center; line-height: .4rem; } .card-list .item>.info .txt>span { display: block; } .card-list .item>.info .txt>p { margin-top: .1rem; } .card-list .item>.info .used-txt>span { line-height: 1.2; } .card-list .item>.info .used-txt>p { margin-top: .03rem; } .card-list .item>.line { width: .02rem; height: 1.64rem; margin-right: .3rem; background-color: #dedede; } .card-btn { justify-content: center; align-items: center; width: .8rem; height: 1.64rem; padding: 0 .25rem; text-align: center; } /* 核销 */ .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{ 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; }