H5_module/home/index/index.css

/**index.wxss**/
.banner{overflow: hidden;position: relative;z-index: 5;}
.banner image{width: 100%;height: 500rpx;overflow: hidden;transition: all .3s ease;}
.banner::after{content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #003050;opacity: .5;}
.top{margin: -305rpx 30rpx 0;position: relative;z-index: 6;}
.m-logo{width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 12rpx;background-color: #fff;}
.m-name{font-size: 32rpx;color: #fff;font-weight: bold;line-height: 48rpx;}
.change{font-size: 24rpx;color: #fff;margin-left: 15rpx;font-weight: normal;}
.change image{width: 14rpx;height: 23rpx;margin-left: 15rpx;}
.m-bot{margin-top: 15rpx;padding-right: 20rpx;}
.m-tag{font-size: 20rpx;color: #fff;}
.m-tag text{margin: 0 10rpx 0 0;height: 31rpx;border: 2rpx solid #fff;border-radius: 5rpx;padding: 0 10rpx;line-height: 31rpx;}
.gsjs-ico{width: 36rpx;height: 33rpx;}
.card{background: linear-gradient(180deg, var(--submain) 0%, var(--main) 100%);border-radius: 20rpx;position: relative;margin-top: 40rpx;height: 800rpx;color: var(--light);}
.logo{width: 148rpx;height: 49rpx;position: absolute;top: 0;right: 0;z-index: 2;}
.card-logo{width: 100%;height: 528rpx;position: absolute;top: 0;left: 0;z-index: 1;}
.open-card{position: absolute;top: 0;left: 0;right: 0;bottom: 0;justify-content: center;background-color: rgba(0,0,0,.6);z-index: 10;font-size: 36rpx !important;text-align: center;flex-direction: column;border-radius: 20rpx !important;color: #fff;}
.open-card image{width: 90rpx;height: 90rpx;margin: 0 auto 30rpx;}
.card-top{padding: 40rpx 45rpx 0;position: absolute;top: 0;left: 0;right: 0;z-index: 5;}
.card-no{font-size: 32rpx;text-shadow: 0 3rpx 6rpx rgba(0,0,0,0.3);}
.card-info{margin-top: 40rpx;}
.card-name{font-size: 48rpx;font-weight: bold;line-height: 71rpx;}
.card-user{font-size: 28rpx;}
.card-user text{margin-left: 15rpx;}
.card-ma{width: 88rpx;height: 88rpx;}
.vip-img{height: 26rpx;margin-top: 8rpx;}
.card-bot{position: absolute;bottom: 0;left: 0;right: 0;z-index: 5;padding-bottom: 50rpx;}
.datas .li{width: 33.33%;font-size: 24rpx;text-align: center;}
.numbers{font-size: 48rpx;font-weight: bold;margin-bottom: 15rpx;line-height: 1;}
.card-eye{width: 26rpx;height: 20rpx;margin-left: 8rpx;}
.datas .li .ddflex{justify-content: center;}
.zhuanshu-t{margin-top: 40rpx;padding: 0 44rpx 0 32rpx;position: relative;}
.zhuanshu-t image{width: 163rpx;height: 36rpx;position: relative;z-index: 2;}
.zhuanshu-t:before{content: '';display: block;height: 1rpx;background-color: #fff;opacity: .5;position: absolute;right: 44rpx;top: 17rpx;left: 80rpx;}
.zhuanshu-info{padding: 30rpx 45rpx 0 !important;}
.zhuanshu-img{width: 100rpx;height: 100rpx;background-color: #fff;border-radius: 50rpx;margin-right: 20rpx;}
.zhuanshu-name{font-size: 32rpx;color: #fff;font-weight: bold;line-height: 48rpx;}
.zhuanshu-name text{font-size: 20rpx;font-weight: normal;height: 29rpx;border: 2rpx solid #fff;border-radius: 5rpx;padding: 0 6rpx;line-height: 29rpx;margin-left: 9rpx;}
.zhuanshu-mobile{font-size: 24rpx;color: #fff;text-align: left;}
.zhuanshu-weixin{width: 39rpx;height: 37rpx;}
.bottom{padding: 45rpx 0 20rpx;text-align: center;}
.bot-name{font-size: 24rpx;color: #666;}
.bot-xuke{font-size: 20rpx;color: #999;justify-content: center;margin-top: 12rpx;}
.bot-xuke image{width: 19rpx;height: 21rpx;margin-left: 6rpx;}
.coupon{position: fixed;right: 9rpx;bottom: 55%;z-index: 50;}
.coupon-img{width: 86rpx;height: 87rpx;background: linear-gradient(180deg, #FF9E01 0%, #FE0419 100%);border-radius: 50%;overflow: hidden;}
.coupon-img image{width: 44rpx;height: 45rpx;margin: 13rpx auto 0;}
.coupon-text{width: 92rpx;height: 29rpx;background: linear-gradient(180deg, #FF9E01 0%, #FE0419 100%);border-radius: 6rpx;font-size: 19rpx;color: #fff;text-align: center;line-height: 29rpx;margin-top: -24rpx;}
.contact{position: fixed;right: 0;bottom: 40%;width: 110rpx !important;height: 180rpx !important;background: linear-gradient(180deg, #70FFFA 0%, #0043C8 100%);box-shadow: 0 3rpx 24rpx 1rpx rgba(0,65,196,0.2);border-radius: 55rpx 55rpx 0 30rpx !important;overflow: hidden;text-align: center;z-index: 50;}
.contact image{width: 78rpx;height: 78rpx;border-radius: 50%;margin: 18rpx auto 8rpx;background-color: #fff;}
.contact-text{font-size: 26rpx;color: #fff;font-weight: bold;}
.contact-text text{display: block;font-size: 18rpx;font-weight: normal;}

.con-ss{position: relative;transition: all .3s ease;}


.isPlay {
		animation: big 0.2s 1 alternate ease-in-out forwards;
	}
 
@keyframes big {
	100% {
		height: 500rpx;
	}
	100% {
		height: 1000rpx;
	}
}

.isPlaasf {
	animation: biasd 0.5s 1 alternate ease-in-out forwards;
}

@keyframes biasd {
	0% {
		height: 1000rpx;
	}

	100% {
		height: 500rpx;
	}
}