jhlapp/pagesT/statement/DataReport.vue

<template>
	<view class="top-view">
		<view class="search-view">
			<u-tabs-swiper font-size="28" ref="tabs" :list="tabs_list" :is-scroll="false" :current="tabs_current"
				@change="timeChange"></u-tabs-swiper>
		</view>
		<view v-if="tabs_current === 0">
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData" background="none" :animation="false" />
			</view>
			<view class="thead">
				<view class="flex1 sort-li">日期</view>
				<view class="flex1 staff-li">订单金额</view>
				<view class="flex1 cutomer-li">与上日环比</view>
			</view>
			<ul class="cont-ul">
				<li class="flex">
					<view class="flex1 sort-li">1</view>
					<view class="flex1 staff-li">2</view>
					<view class="flex1 cutomer-li">3</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
					series: [{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34]
					}]
				},
				tabs_current: 0,
				tabs_list: [{
						name: '订单金额'
					},
					{
						name: '客户统计'
					},
					{
						name: '资金统计'
					},
					{
						name: '订单数'
					}
				],
			};
		},
		methods: {
			timeChange(index) {
				this.tabs_current = index;
			}
		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 400rpx;
	}

	.top-view {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 9;
		.thead {
			line-height: 60rpx;
			height: 60rpx;
			font-size: 24rpx;
			background-color: #f5f5f5;
			display: flex;
			width: 100%;
		}
		.search-view {
			width: 100%;
		}
	}

	.flex1 {
		display: table-cell;
		// width: 33%;
		text-align: center;
		position: relative;
		height: 100%;
		vertical-align: middle;

		&.staff-li {
			width: 33%;
		}

		&.sort-li {
			width: 33%;
		}

		&.cutomer-li {
			width: 33%;
		}

	}

	.cont-ul {
		background-color: #ffffff;
		.flex {
			height: 70rpx;
		}
	}

	.flex {
		display: table;
		width: 750rpx;
		// line-height: 90rpx;
		font-size: 24rpx;
	}
</style>