PunchSettle-MiniProgram/pages/settle-list/settle-list.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<!-- <view class="selector">
			<view class="wrap selected">月</view>
			<view class="wrap">年</view>
		</view>
		<view class="datetime-selector">
			<view class="left-btn"><uni-icons type="left" size="30"></uni-icons></view>
			<view class="middle-btn">
				<picker mode="date" :value="date" fields="month">
					<view class="datetime-view">{{date}}</view>
					<view class="down-btn"><uni-icons type="down" size="30"></uni-icons></view>
				</picker>
			</view>
			<view class="right-btn"><uni-icons type="right" size="30"></uni-icons></view>
		</view> -->
		<view>
			<uni-datetime-picker type="daterange" />
		</view>
		<uni-list :border="true">
			<uni-list-item v-for="i in 10" title="2024-12-07 完成3个打卡任务，结算奖励4，结算前奖励6，结算后奖励10" time="2020-02-02 20:20" ></uni-list-item>
		</uni-list>
	</main-layout>
</template>

<script setup>
	import {ref} from 'vue';
	
	const date = ref('2025-01');
</script>

<style lang="scss" scoped>
	.selector {
		width: 220rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: #CCCCCC;
		
		/** 文本1 */
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		// line-height: 52.13rpx;
		color: #000000;

		padding: 12rpx;
		display: flex;
		
		.wrap {
			flex-grow: 1;
			opacity: 1;
			border-radius: 8rpx;
			
			display: inline-flex;
			justify-content: center;
			align-content: center;
		}
		
		.selected {
			background: #FFFFFF;
		}
	}
	
	.left-btn, .middle-btn, .right-btn, .datetime-view, .down-btn {
		display: inline-flex;
	}
	
	.datetime-selector {
		width: 100%;
		
		display: flex;
		justify-content: center;
		align-content: center;
		
		.middle-btn>picker {
			display: flex;
			justify-content: center;
			align-content: center;
		}
	}
</style>