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-40 mr-32">
					17:52:00
				</view>
				<view class="fc-f fs-40 mr-32">
					2021-12-09
				</view>
				<view class="fc-f fs-40">
					星期四
				</view>
			</view>
			<view class="top-left">
				<view class="fc-f fs-40">
					26°C
				</view>
			</view>
		</view>
		
		
		<view class="data-box">
			<!-- 左 -->
			<view class="left-box flex-1">
				<view class="top-left mb-56">
					<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-48">
								￥89000.00
							</view>
							<view class="fc-f fs-14">
								收款总金额
							</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-48">
								16
							</view>
							<view class="fc-f fs-14">
								收款总笔数
							</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-48">
								32
							</view>
							<view class="fc-f fs-14">
								消费总人数
							</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-26">
						<image class="title-img" src="/static/xfmx.png" mode=""></image>
					</view>
					<!-- 滚动列表 -->
					<scroll-view class="scroll-view-css z-3" scroll-y="true" :scroll-top="scrollTop">
						<view class="item-box" v-for="(item,i) in 15" :key="i">
							<view class="user-box">
								<image class="user-img" src="/static/k1.png" mode=""></image>
								<view class="">
									<view class="fs-32 fc-f">
										Darrell Steward
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费者
									</view>
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									振合网实体店{{i+1}}
								</view>
								<view class="fs-28 fc-B2D6FF">
									消费门店
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									￥779.58
								</view>
								<view class="fs-28 fc-B2D6FF">
									消费金额
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									2025-03-24 12:32:24
								</view>
								<view class="fs-28 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-28 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 {
				scrollTop:0,
				timer:'',//定时器
				listData: []
			}
		},
		mounted() {
			this.startAutoScroll();
		},
		methods: {
			startAutoScroll() {
			  this.timer = setInterval(() => {
				this.scrollTop += 84;
				// console.log(this.scrollTop);
				// console.log(10 * 84);
				// 到底
				if (this.scrollTop >= (10 * 84)) {
				  this.scrollTop = 0;
				}
			  }, 2000);
			},
		}
	}
</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: 200rpx;
	}

	.top-box {
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 86rpx;
		margin-bottom: 60rpx;
		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-48 {
		font-size: 48rpx;
	}

	.fs-10 {
		font-size: 10rpx;
	}
	.fs-40{
		font-size: 40rpx;
	}
	.fs-32{
		font-size: 32rpx;
	}
	.fs-28{
		font-size: 28rpx;
	}
	.fs-7 {
		font-size: 7rpx;
	}

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

	.fs-5 {
		font-size: 5rpx;
	}
	.fs-14 {
		font-size: 24rpx;
	}
	
	.mr-32{
		margin-right: 32rpx;
	}
	.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;
	}
	.mb-26 {
		margin-bottom: 26rpx;
	}
	.mb-56{
		margin-bottom: 56rpx;
	}
	.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 {
		display: flex;
		flex-direction: column;
	}

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

	.amount-box {
		width: 620rpx;
		height: 204rpx;
		position: relative;
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-right: 62rpx;
	}

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

	.amount-img-two {
		width: 168rpx;
		height: 168rpx;
		margin-right:40rpx;
	}

	.list-box {
		position: relative;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-right: 62rpx;
	}

	.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: 40rpx;
		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: 1404rpx;
		height: 78rpx;
	}

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

	.title-right {
		text-align: right;
		position: relative;
		top: 20rpx;
		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%;
		height: 1060rpx;
		overflow: auto;
	}
	.scroll-view-css ::-webkit-scrollbar{
		display: none;
	}

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

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

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