cesuan/components/datepicker.vue

<template>
	<view class="datepicker">
		<text lines="1" class="datepicker-y-v">2023</text>
		<text lines="1" class="datepicker-y">年</text>
		<text lines="1" class="datepicker-m-v">02</text>
		<text lines="1" class="datepicker-m">月</text>
		<text lines="1" class="datepicker-d-v">13</text>
		<text lines="1" class="datepicker-d">日</text>
		<text lines="1" class="datepicker-h-v">13</text>
		<text lines="1" class="datepicker-h">时</text>
	</view>
</template>

<script>
	export default {
		name: "datepicker",
		data() {
			return {
				years:["请选择年份",1998,1999,2000],
                yearsIndex:0
			};
		}
	}
</script>

<style>
	.datepicker {
		background: url(../static/yinyang/selectbg.png) 100% no-repeat;
		background-size: 100% 100%;
		width: 564rpx;
		height: 50rpx;
		flex-direction: row;
		display: flex;
		margin: 48rpx auto 26rpx auto;
		position: relative;
	}


	.datepicker-y {
		width: 38rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(128, 127, 128, 1);
		font-size: 24rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;

	}

	.datepicker-m {
		width: 40rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(128, 127, 128, 1);
		font-size: 24rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 0;
	}

	.datepicker-d {
		width: 42rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(128, 127, 128, 1);
		font-size: 24rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 0;
	}

	.datepicker-y-v {
		width: 94rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 30rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin-right: 30rpx;
	}

	.datepicker-m-v {
		width: 70rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 30rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin-right: 28rpx;
	}

	.datepicker-d-v {
		width: 84rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 30rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin-right: 28rpx;
	}

	.datepicker-h-v {
		width: 80rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 30rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 0;
	}

	.datepicker-h {
		position: absolute;
		top: 0;
		width: 24rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(128, 127, 128, 1);
		font-size: 24rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
		right: -30rpx;
	}
</style>