front-end/mobile-code/src/components/module/app-activily-coupon.vue

<template>
	<modal-module :show="show" @cancel="modalCancel" :custom="true" padding="0 0" bgcolor="none">
		<div class="app-activily-coupon" @click="receive">
			<div class="sctivliy-bg">
				<img src="../../static/images/coupon/new-bg.png" alt mode="widthFix" />
			</div>
			<div class="coupon-wrap">
				<div class="coupon-bg">
					<img src="../../static/images/coupon/new-coupon-bg.png" alt mode="widthFix" />
				</div>
				<!-- 列表 -->
				<div class="list-det">
					<div class="list-det-left">
						<div class="price-wrap">
							<span>￥</span>
							<span class="price">1000</span>
						</div>
						<div class="full-reduc">满100可使用</div>
					</div>
					<div class="list-det-right">
						<div class="coupon-message">
							<div class="app-color-1">优惠券</div>
							<div>适用：全品类</div>
							<div>有效至：2020-10-11</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</modal-module>
</template>

<script>
import ModalModule from '@/components/plugin/modal'
export default {
	name: 'app-activily-coupon',
	components: {
		ModalModule
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {}
	},
	methods: {
		receive() {
			console.log('领取！')
		},
		modalCancel() {
			this.show = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-activily-coupon {
		height: 748px;
		.coupon-wrap {
            position: relative;
            top: -370px;
            left: -10px;
            width: 70%;
            margin: 0 auto;
			.list-det {
				width: 100%;
				@include disFlex(center, space-between);
				position: absolute;
				top: 0;
				left: 0;
				.list-det-left {
					padding: 20px 0 20px 26px;
					width: 160px;
					color: #fff;
					.price-wrap {
						margin-bottom: 6px;
						font-size: 24px;
						.price {
							font-size: 40px;
							font-weight: bold;
							line-height: 1;
						}
					}
				}
				.list-det-right {
					width: calc(100% - 186px);
					margin-left: 22px;
					@include disFlex(center, space-between);
					padding: 20px 26px 20px 0;
					.coupon-message {
						color: $fontColor2;
						& > div {
                            margin: 2px 0;
                            transform: scale(0.9);
                            font-weight: 300;
						}
					}
				}
			}
		}
	}
</style>