CTEQishou/pages/dache/kehuheyh/Qianbao.vue

<template>
	<view>
		<customNav :shownav="false" title="" titledetl=""></customNav>
		<view class="topContentV">
			<view style=" padding-top: 40rpx; width: 100%;;background-color: #1A1A1A;">
				<view class="contentInRowL barbgv">
					<image style="width: 44rpx;height: 44rpx;" src="/static/imags/fanhuiz@3x.png" mode="scaleToFill" @click="fanhui"></image>
					<text style="margin-left: 10rpx;font-size: 36rpx;color: white;">{{$t('dache.qianbao')}}</text>
				</view>
			</view>
			<view class="toptalbarCT">
				<view class="contentInRowS topNoteCt">
					<view class="contentColumn">
						<text class="yuerTxt">{{$t('zhanghu.yuer')}}</text>
						<text class="yuershlTxt">￥88.56</text>
					</view>
					<text class="tixianBtv">{{$t('tixian.tixian')}}</text>
				</view>
			</view>
			<view class="navbarCT">
				<view class="contentInRowS" style="width: 92%;margin-left: 4%;">
					<view class="contentInRowL" style="align-items: center;">
						<picker mode="date" :value="month" fields="month" @change="bindDateChange">
							<text class="blacktext">{{month}}</text>
							<image style="width: 30rpx;height: 30rpx;" src="/static/imags/dache/xialasanj.png" mode="scaleToFill"></image>
						</picker>
						
					</view>
					<view class="contentInRowR">
						<text :class="slState==1?'btselct':'btselctN'" @click="listState(1)">{{$t('tixian.quanbu')}}</text>
						<text :class="slState==2?'btselct':'btselctN'" @click="listState(2)">{{$t('dache.jinshouru')}}</text>
						<text :class="slState==3?'btselct':'btselctN'" @click="listState(3)">{{$t('dache.jinzhichu')}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 460rpx;">
			<view style="background-color: #F7F7F7;width: 100%;">
				<view class="contentInRowS timeLine">
					<text class="dartext">12月8日</text>
					<text class="dartext">合计 12.88元</text>
				</view>
			</view>
			<view class="bottomborder" style="background-color:white;width: 100%;">
				<view class="contentInRowS zjcrLine">
					<view class="contentColumnC">
						<text class="blacktext">收到车费</text>
						<text class="dartext">17:44</text>
					</view>
					<text class="blacktext">+99.99元</text>
				</view>
			</view>
			<view class="bottomborder" style="background-color:white;width: 100%;">
				<view class="contentInRowS zjcrLine">
					<view class="contentColumnC">
						<text class="blacktext">收到车费</text>
						<text class="dartext">17:44</text>
					</view>
					<text class="blacktext">+99.99元</text>
				</view>
			</view>
			<view class="bottomborder" style="background-color:white;width: 100%;">
				<view class="contentInRowS zjcrLine">
					<view class="contentColumnC">
						<text class="blacktext">收到车费</text>
						<text class="dartext">17:44</text>
					</view>
					<text class="blacktext">+99.99元</text>
				</view>
			</view>
			<view style="background-color: #F7F7F7;width: 100%;">
				<view class="contentInRowS timeLine">
					<text class="dartext">12月8日</text>
					<text class="dartext">合计 12.88元</text>
				</view>
			</view>
			<view class="bottomborder" style="background-color:white;width: 100%;">
				<view class="contentInRowS zjcrLine">
					<view class="contentColumnC">
						<text class="blacktext">收到车费</text>
						<text class="dartext">17:44</text>
					</view>
					<text class="blacktext">+99.99元</text>
				</view>
			</view>
			<view style="height: 80rpx;"></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slState:1,
				month:''
			}
		},
		onLoad() {
			var today = new Date();
			var year = today.getFullYear();
			var month = today.getMonth() + 1;
			this.month = year+'-'+month;
		},
		methods: {
			fanhui(){
				uni.navigateBack();
			},
			listState(index){
				this.slState=index;
			},
			bindDateChange: function(e) {
				this.month=e.detail.value;
				console.log(e.detail.value)
			},
		},
	}
</script>

<style lang="scss">
@import '@/common/common.scss';
page{
	background-color: #F4F4F4;
}
.topContentV{
	position: fixed;
	padding-top: 40rpx;
	width: 750upx;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
}
.toptalbarCT{
	width: 100%;
	display: flex;
	justify-content:center;
	align-items: center;
	background-color:#384152;
	height: 270rpx;
}
.topNoteCt{
	width: 88%;
	margin-left: 6%;
	align-items: center;
}

.yuerTxt{
	color:#B2BBCA;
	font-size: 32rpx;
}

.yuershlTxt{
	color:white;
	font-size: 42rpx;
	font-weight: bold;
}
.tixianBtv{
	padding-left: 40rpx;
	padding-right: 40rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	background-color:#E86E48;
	color: white;
	border-radius: 16rpx;
	letter-spacing: 6rpx;
}
.navbarCT{
	width: 100%;
	display: flex;
	justify-content:center;
	align-items: center;
	background-color:white;
	height: 106rpx;
}
.btselct{
	padding-left: 30rpx;
	padding-right: 30rpx;
	line-height: 50rpx;
	border-radius: 25rpx;
	border: 1rpx solid #E86E48;
	background-color: white;
	color: #E86E48;
	margin-left: 20rpx;
}
.btselctN{
	line-height: 50rpx;
	margin-left: 20rpx;
	color: #979797;
}
.barbgv{
	margin-top: 6rpx;
	height: 100rpx;
	align-items: center;
	padding-left: 30rpx;
	width: 100%;
	background-color: #444F68;
}

.timeLine{
	height: 80rpx;
	width: 92%;
	margin-left: 4%;
	align-items: center;
}

.zjcrLine{
	width: 92%;
	margin-left: 4%;
	align-items: center;
	height: 150rpx;
}
.bottomborder{
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}

.dartext{
	font-size: 32rpx;
	color: #979797;
}
.blacktext{
	font-size: 32rpx;
	color:black;
}
</style>