myAchievement.vue 2.0 KB
<template>
	<view class="page">
		<view class="navbox">
			<view class="navitem">月度业绩</view>
			<view class="navitem active">年度业绩</view>
		</view>
		<view class="box">
			<view class="tittle">
				<view class="titem">
					查询时间
				</view>
				<view class="titem">
					收益金额(元)
				</view>
			</view>
			<view class="numbox">
				<view class="nitem">2019.12</view>
				<view class="nitem">8000.00</view>
			</view>
			<view class="numbox">
				<view class="nitem">2019.12</view>
				<view class="nitem">8000.00</view>
			</view>
			<view class="numbox">
				<view class="nitem">2019.12</view>
				<view class="nitem">8000.00</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.navbox{
		width: 100%;
		height: 88rpx;
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.navitem{
		width: 50%;
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(35,35,35,1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active{
		color: #FF9417;
	}
	.box{
		padding: 32rpx;
		box-sizing: border-box;
	}
	.tittle,.numbox{
		display: flex;
		align-items: center;
	}	
	.titem{
		width: 50%;
		height: 96rpx;
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:600;
		color:rgba(35,35,35,1);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed #000;
	}
	.titem:first-child{
		border-right-color: transparent;
	}
	.numbox{
		background: #fff;
	}
	.nitem{
		width: 50%;
		height: 96rpx;
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(35,35,35,1);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed #000;
		border-top-color: transparent;
	}
	.numbox .nitem:first-child{
		border-right-color: transparent;
	}
</style>