coupon-secend/css/style.css

/* 轮播图 */
.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: 88vh;
	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-list{
	width: 100%;
	max-height: calc(88vh - 1rem);
	overflow-y: auto;
	position: relative;
}
.collect-coupons-list>.item:first-child{
	margin-bottom: .2rem !important;
}

.collect-coupons-list .code-btn{
	width: 3.6rem;
	margin: 0 auto;
}

/* 尾部 */
.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;
}