front-end/mobile-code/src/pages/setting/coupon.vue

<template>
	<div class="app-content">
		<div class="module-com flex-center-between switch-blo">
			<div class="app-size-32">开启自动涨价</div>
			<div>
				<switch checked @change="switchChangeFn" />
			</div>
		</div>
		<div class="module-com new_wrap">
			<div class="module-det">
				<div>
					<span>新人注册会员赠送</span>
					<input type="text" class="setting-inp" />
					<span>元优惠券，满</span>
					<input type="text" class="setting-inp" />
				</div>
                <div>
                    <span>元可以使用，</span>
					<input type="text" class="setting-inp" />
                    <span>天内有效。</span>
                </div>
			</div>
		</div>
		<div class="prompt-text">提示：在节日的前一天和当天, 商城设置自动涨价的商品将会全部 统一涨价。过后自动恢复原价。</div>
		<div class="admin-button-com blue big">确定</div>
	</div>
</template>

<script>
export default {
	name: 'setting-coupon',
	data() {
		return {}
	},
	methods: {
		switchChangeFn(e) {
			console.log('switch1 发生 change 事件，携带值为', e.target.value)
		}
	}
}
</script>

<style lang="scss" scoped>
    .prompt-text {
        color: $fontColor3;
        padding-bottom: 20px;
        padding-left: 30px;
    }
	.module-com {
        margin-bottom: 20px;
        padding: 30px;
        background-color: #fff;
        color: $fontColor2;
        .module-tit {
            font-size: 28px;
        }
    }
    .admin-button-com {
        width: calc(100% - 100px);
        margin: 60px 30px 0;
    }
    .switch-blo {
        padding: 15px 30px;
    }
    .new_wrap {
        .module-det {
            color: $fontColor2;
            font-size: 28px;
            & > div {
                @include disFlex(center, flex-start);
                flex-wrap: wrap;
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .setting-inp {
                width: 120px;
                height: 70px;
                border: 2px solid $borderColor;
                border-radius: 10px;
                margin: 0 16px;
                text-align: center;
                &:first-child {
                    margin-left: 0;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
</style>