consumoption/pages/mintir/scrollView/scrollView.vue

<template>
	<view class="listview">
		<view class="listview-all">
			<view class="listview-name">
				数据检测
			</view>
			<view class="listview-seleven">
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
		</view>
		<view class="listview-table">
			<view class="listview-all-b">
				<view class="listview-table-all-one">
					<view class="listview-table-name">
						总消耗金额(元)
					</view>
					<view class="listview-table-many">
						<span>￥</span>
						{{dataList.sumAmt}}
					</view>
				</view>
				<view class="listview-table-all-two">
					<view class="listview-table-name">
						总消耗数量
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.sumCnt}}
					</view>
				</view>
				<view class="boxList"></view>
				<view class="xian"></view>
				<view class="xianList"></view>
			</view>
			<view class="listview-all-b">
				<view class="listview-table-all-three">
					<view class="listview-table-name">
						院内申领次数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.appyCnt}}
					</view>
				</view>
				<view class="listview-table-all-four">
					<view class="listview-table-name">
						院内配送次数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.delvCnt}}
					</view>
				</view>
			</view>
			<view class="listview-all-b">
				<view class="listview-table-all-three">
					<view class="listview-table-name">
						集采条目数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.fasCnt}}
					</view>
				</view>
				<view class="listview-table-all-four">
					<view class="listview-table-name">
						非集采条目数
					</view>
					<view class="listview-table-many">
						<span style=" visibility: hidden;">￥</span>
						{{dataList.othCnt}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: {
					cosmAmt: "", //消耗金额
					cosmCnt: "", //消耗数量
					appyCnt: "", //申领次数
					stooutCnt: "", //院内配送次数
				},
				value: 'Y',
				range: [{
						value: 'Y',
						text: "年"
					},
					{
						value: 'M',
						text: "月"
					},
					{
						value: 'D',
						text: "日"
					},
					{
						value: 'W',
						text: "周"
					},
				],
			};
		},
		methods: {
			listData() {
				this.$http('homePage.totalCosm', {
					timeType: this.value
				}, '加载中').then((res) => {
					this.dataList = res.data
				})
			},
			change(e) {
				this.value = e;
				this.listData({
					timeType: this.value
				})
			},
		},
		created() {
			this.listData()
		}
	};
</script>

<style scoped lang="scss">
	.listview {

		padding: 30rpx;


		.listview-all {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-width: 4rpx 4rpx 4rpx 4rpx;
			border-style: solid;
			border-color: #90ffe4;
		}

		.listview-name {
			font-size: 35rpx;
			font-weight: bold;
		}

		.listview-table {
			background-color: #fff;
			border-style: solid;
			border-color: #90ffe4;
			border-width: 0 4rpx 4rpx 4rpx;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;

			.listview-all-b {
				display: flex;
				justify-content: space-around;
				position: relative;

				.listview-table-all-one,
				.listview-table-all-three {
					width: 300rpx;
					height: 100rpx;
					text-align: left
				}

				.listview-table-all-two,
				.listview-table-all-four {
					width: 300rpx;
					height: 100rpx;
					text-align: right
				}

				.boxList {
					width: 50rpx;
					height: 50rpx;
					background: #fff;
					/* left: 46%; */
					top: 70%;
					position: absolute;
					z-index: 999;
				}

				.xian {
					position: absolute;
					top: 95rpx;
					width: 100%;
					height: 4rpx;
					background-color: #90ffe4;
					border-radius: 10rpx;
				}

				.xianList {
					position: absolute;
					height: 200rpx;
					width: 4rpx;
					background-color: #90ffe4;
					border-radius: 10rpx;
					left: 50%;
				}

			}

			.listview-table-name {
				color: #ccc;
				font-size: 25rpx;
			}

			.listview-table-many {
				color: #000;
				font-size: 30rpx;
				font-weight: bold;

			}
		}
	}
</style>