yueche_app/pages/coupon/coupon.vue

<template>
	<view class="container">
		<wd-tabs v-model="tab" auto-line-width custom-class="custom_class_tab">
			<block v-for="item in tabs" :key="item">
				<wd-tab :title="`${item}`" :name="item">
					<view class="content">
						<view class="status_tip">
							<wd-status-tip image="content" tip="暂无内容" />
						</view>
					</view>
				</wd-tab>
			</block>
		</wd-tabs>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const tab = ref(0)

const tabs = ref(['待使用', '已使用', '已过期'])
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 0 30rpx;
	height: 100%;
	color: #001713;
	background-color: #fffdfb;

	:deep(.custom_class_tab .wd-tabs__line) {
		background-color: #ff8205;
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 0;
		height: calc(100vh - 84rpx);
		color: #001713;
		overflow-y: auto;

		.status_tip {
			margin-top: 100rpx;
		}
	}
}
</style>