zh_tv/pages/index/index.vue

<template>
	<view class="box">
		<image class="bg-img" src="/static/bg.png" mode=""></image>
		<image class="bt-box" src="/static/bt.png" mode=""></image>
		<view class="top-box">
			<view class="top-left">
				<view class="fc-f fs-7 mr-6">
					17:52:00
				</view>
				<view class="fc-f fs-7 mr-6">
					2021-12-09
				</view>
				<view class="fc-f fs-7">
					星期四
				</view>
			</view>
			<view class="top-left">
				<view class="fc-f fs-7">
					26°C
				</view>
			</view>
		</view>
		<view class="data-box">
			<view class="left-box flex-1">
				<view class="top-left mb-10">
					<view class="amount-box flex-1">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zje.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-13">
								￥89000.00
							</view>
							<view class="fc-f fs-5">
								收款总金额
							</view>
						</view>
					</view>
					<view class="amount-box flex-1 mrl-12">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zbs.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-13">
								16
							</view>
							<view class="fc-f fs-5">
								收款总笔数
							</view>
						</view>
					</view>
					<view class="amount-box flex-1">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zrs.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-13">
								32
							</view>
							<view class="fc-f fs-5">
								消费总人数
							</view>
						</view>
					</view>
				</view>
				<view class="flex-1 list-box">
					<image class="list-img" src="/static/k3.png" mode=""></image>
					<view class="title-box mb-5">
						<image class="title-img" src="/static/xfmx.png" mode=""></image>
					</view>
						<!-- 滚动列表 -->
						<scroll-view class="scroll-view-css z-3" scroll-x="true">
							<view class="item-box" v-for="(item,index) in 15">
								<view class="user-box">
									<image class="user-img" src="/static/k1.png" mode=""></image>
									<view class="">
										<view class="fs-6 fc-f">
											Darrell Steward
										</view>
										<view class="fs-5 fc-B2D6FF">
											消费者
										</view>
									</view>
								</view>
								<view class="">
									<view class="fs-6 fc-f">
										振合网实体店
									</view>
									<view class="fs-5 fc-B2D6FF">
										消费门店
									</view>
								</view>
								<view class="">
									<view class="fs-6 fc-f">
										￥779.58
									</view>
									<view class="fs-5 fc-B2D6FF">
										消费金额
									</view>
								</view>
								<view class="">
									<view class="fs-6 fc-f">
										2025-03-24 12:32:24
									</view>
									<view class="fs-5 fc-B2D6FF text-align-right">
										消费时间
									</view>
								</view>
							</view>
						</scroll-view>
				</view>
			</view>
			<view class="right-box flex-1">
				<view class="flex-1 chart-box">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/xfdb.png" mode=""></image>
						<view class="fc-f fs-5 title-right">
							单位（元）
						</view>
					</view>
					<view class="flex-1">
						<!-- 柱状图 -->
					</view>
				</view>
				<view class="flex-1 chart-box mbt-12">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/zjtj.png" mode=""></image>
						<view class="bfje-num">
							<view class="bfje-title">
								<image class="bf-img" src="/static/bfje.png" mode=""></image>
								<view class="fc-B2D6FF fs-5">
									总帮扶金额(元)
								</view>
							</view>
							<view class="fc-f fs-7">
								27998.00
							</view>
						</view>
					</view>
					<view class="flex-1 tj-box">
						<view class="hx-box z-3">
							<!-- 环形图 -->
						</view>
						<view class="bf-box mr-16 ml-28">
							<view class="bf-num">
								<image class="yhbf-img" src="/static/yhbf.png" mode=""></image>
								<view class="fc-f fs-10 z-3 text-align-center">
									￥8999.00
								</view>
							</view>
							<view class="bf-title">
								<image class="yh-bg" src="/static/yh-bg.png" mode=""></image>
								<image class="yh-img z-3" src="/static/yh.png" mode=""></image>
								<view class="fs-5 fc-f z-3">
									用户帮扶资金 40%
								</view>
							</view>
						</view>
						<view class="bf-box">
							<view class="bf-num">
								<image class="yhbf-img" src="/static/dpbf.png" mode=""></image>
								<view class="fc-f fs-10 z-3 text-align-center">
									￥18999.00
								</view>
							</view>
							<view class="bf-title">
								<image class="yh-bg" src="/static/dp-bg.png" mode=""></image>
								<image class="yh-img z-3" src="/static/dp.png" mode=""></image>
								<view class="fs-5 fc-f z-3">
									店铺帮扶资金 60%
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-1 chart-box">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/rztj.png" mode=""></image>
					</view>
					<view class="flex-1">
						<!-- 曲线图 -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: []
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 101vw;
		height: 102vh;
	}

	.bt-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 39rpx;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 15rpx 12rpx 16rpx;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 2;
	}

	.top-left {
		display: flex;
		align-items: center;
	}

	.text-align-center {
		text-align: center;
	}

	.fw-b {
		font-weight: bold;
	}

	.fc-00D5FF {
		color: #00D5FF;
	}

	.fc-B2D6FF {
		color: #B2D6FF;
	}

	.fc-f {
		color: #fff;
	}

	.fs-13 {
		font-size: 13rpx;
	}

	.fs-10 {
		font-size: 10rpx;
	}

	.fs-7 {
		font-size: 7rpx;
	}

	.fs-6 {
		font-size: 6rpx;
	}

	.fs-5 {
		font-size: 5rpx;
	}

	.mr-6 {
		margin-right: 6rpx;
	}

	.mr-16 {
		margin-right: 16rpx;
	}

	.ml-28 {
		margin-left: 28rpx;
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	.mb-5 {
		margin-bottom: 5rpx;
	}

	.mrl-12 {
		margin: 0 12rpx;
	}

	.mbt-12 {
		margin: 12rpx 0;
	}

	.text-align-right {
		text-align: right;
	}

	.flex-1 {
		flex: 1;
	}

	.z-3 {
		position: relative;
		z-index: 3;
	}

	.left-box {
		margin-right: 12rpx;
		display: flex;
		flex-direction: column;
	}

	.data-box {
		padding: 0 23rpx 23.05rpx 23rpx;
		box-sizing: border-box;
		display: flex;
		flex: 1;
	}

	.amount-box {
		height: 39rpx;
		position: relative;
		padding: 3rpx 9rpx;
		display: flex;
		align-items: center;
	}

	.amount-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.amount-img-two {
		width: 32rpx;
		height: 32rpx;
		margin-right: 7rpx;
	}

	.list-box {
		position: relative;
		padding: 12rpx 7rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.list-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.right-box {
		display: flex;
		flex-direction: column;
	}

	.chart-box {
		position: relative;
		padding: 7rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.chart-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.title-box {
		position: relative;
		width: 100%;
		height: 15rpx;
	}

	.title-img {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 274rpx;
		height: 100%;
		z-index: 2;
	}

	.title-right {
		text-align: right;
		line-height: 15rpx;
		position: relative;
		z-index: 2;
	}

	.bfje-num {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 2rpx;
		border-image: linear-gradient(90deg, rgba(113, 203, 255, 0.5), rgba(0, 161, 255, 0.05)) 0 0;
		z-index: 2;
	}

	.bfje-title {
		display: flex;
		align-items: center;
		margin-bottom: 1rpx;
	}

	.bf-img {
		width: 6rpx;
		height: 6rpx;
		margin-right: 1rpx;
	}

	.tj-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bf-box {
		width: 73rpx;
		height: 50rpx;
	}

	.bf-num {
		width: 73rpx;
		height: 35rpx;
		position: relative;
		margin-bottom: 4rpx;
	}

	.bf-title {
		width: 100%;
		height: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.yh-bg {
		position: absolute;
		top: 0;
		height: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.yh-img {
		width: 7rpx;
		height: 7rpx;
		margin-right: 0.3rpx;
	}

	.yhbf-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.hx-box {
		width: 54rpx;
		height: 54rpx;
	}

	.scroll-view-css {
		width: 100%;
		flex: 1;
		overflow: auto;
	}

	.item-box {
		width: 100%;
		height: 26rpx;
		background: rgba(0, 161, 255, 0.05);
		border-radius: 9rpx;
		margin-bottom: 6rpx;
		padding: 5rpx 9rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user-box {
		display: flex;
		align-items: center;
	}

	.user-img {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		margin-right: 3rpx;
	}
</style>