tf-business/pages/tabbar/index/index.vue

<template>
	<view class="home">
		<capsule></capsule>
		<view class="bg-box"></view>
		<view class="header-top" :style="{ height: menuButtonHeight }">
			<view class="shop-title">麦乐鸡烤肉店</view>
			<view class="shop-state">
				<tui-icon style="height: 36rpx;" name="circle-fill" color="rgb(70,208,88)" :size="20"></tui-icon>
				<text>营业中</text>
			</view>
		</view>
		<view class="header-content"></view>
		<view class="main-tool">
			<view class="tool-list">
				<view class="tool-item" v-for="item in toolList" :key="item.title">
					<image :src="item.img" alt="" />
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="summarize-box">
			<view class="summarize-left">经营概括</view>
			<view class="summarize-right">
				<text>更多</text>
				<tui-icon name="arrowright" :size="24"></tui-icon>
			</view>
		</view>
		<view class="statistics-list">
			<view class="statistics-item" v-for="(item, index) in statisticsList" :key="index">
				<view class="statistics-trans">{{ item.title }}</view>
				<view class="statistics-price">
					<view class="price">{{ item.price }}</view>
					<view class="text">较昨日</view>
				</view>
				<view class="proportion" v-if="item.state !== 2">
					<view class="proportion-box">
						<text :style="{ color: item.state == 0 ? '#42D373' : '#EF530E' }">{{ item.proportion }}%</text>
						<image
							:src="item.state == 0 ? require('@/static/image/home/decline-icon.png') : require('@/static/image/home/rise-icon.png')"
							alt="" />
						<!-- <image src="@/static/image/home/decline-icon.png" alt="" /> -->
					</view>
				</view>
				<view class="chart-img" v-if="item.state !== 2">
					<template v-if="item.state == 0">
						<image
							:src="item.proportion <= 16 ? require('@/static/image/home/green.png') : require('@/static/image/home/green-more.png')"
							alt="" />
					</template>
					<template v-if="item.state == 1">
						<image src="@/static/image/home/red.png" alt="" />
					</template>
				</view>
				<view class="empty" v-if="item.state == 2">
					<view class="left"></view>
					<view class="bottom"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	created() {
		//  获取胶囊的高度
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.menuButtonHeight = menuButtonInfo.height + 'px'
		// #endif
	},
	data() {
		return {
			//  胶囊的高度
			menuButtonHeight: null,
			toolList: [
				{
					title: "扫码验劵",
					img: require('@/static/image/home/1.png')
				},
				{
					title: "输码验劵",
					img: require('@/static/image/home/2.png')
				},
				{
					title: "核销明细",
					img: require('@/static/image/home/3.png')
				},
				{
					title: "收款记录",
					img: require('@/static/image/home/4.png')
				},
			],
			statisticsList: [
				{
					title: "今日成交金额",
					price: "16500元",
					proportion: "16",
					state: 0
				},
				{
					title: "今日成交订单量",
					price: "60单",
					proportion: "20",
					state: 0
				},
				{
					title: "今日核销金额",
					price: "14200元",
					proportion: "16",
					state: 1
				},
				{
					title: "今日成交订单量",
					price: "0",
					proportion: "16",
					state: 2
				},
			]
		}
	},
	onLoad() {

	},
	methods: {

	}
}
</script>

<style lang="scss" scoped>
.home {
	width: 100vw;
	height: 100vh;
	background-color: rgb(247, 247, 247);
	position: relative;
	z-index: -2;

	.bg-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 654rpx;
		z-index: -1;
		background: linear-gradient(136deg, rgba(239, 83, 14, 0.63) 13%, rgba(239, 83, 14, 0.27) 54%);
	}

	.header-top {
		margin-left: 32rpx;
		@include flex(flex-start, null, 12rpx);

		.shop-title {
			font-size: 36rpx;
			color: #000;
		}

		.shop-state {
			width: 148rpx;
			height: 48rpx;
			border-radius: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 16rpx;
			@include flex(space-between, null, 6rpx);

			text {
				font-size: 24rpx;
			}
		}
	}

	.header-content {
		width: 694rpx;
		height: 294rpx;
		margin: 60rpx auto 40rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
	}

	.main-tool {
		.tool-list {
			padding: 40rpx 60rpx 50rpx;
			background-color: #fff;
			height: 208rpx;
			width: 100%;
			border-radius: 28px 28px 0px 0px;
			box-sizing: border-box;
			@include flex(space-between, null, 60rpx);

			.tool-item {
				@include flex(center, column, 10rpx);

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					color: #666666;
					font-size: 28rpx;
				}
			}
		}
	}

	.summarize-box {
		padding: 0 32rpx;
		box-sizing: border-box;
		@include flex(space-between);
		margin: 32rpx 0;

		.summarize-left {
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.summarize-right {
			@include flex(center, null);
			font-size: 28rpx;
			color: #999999;
		}
	}

	.statistics-list {
		@include flex(space-between, null, 18rpx);
		flex-wrap: wrap;
		padding: 0 12rpx;
		box-sizing: border-box;

		.statistics-item {
			width: 354rpx;
			height: 286rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 28rpx;

			.statistics-trans {
				color: #666666;
				font-size: 28rpx;
				margin-bottom: 24rpx;
			}

			.statistics-price {
				@include flex(space-between);

				.price {
					color: #333333;
					font-size: 36rpx;
				}

				.text {
					margin-right: 10rpx;
					color: #666666;
					font-size: 24rpx
				}
			}

			.proportion {
				@include flex(flex-end);
				margin: 20rpx 0 12rpx;

				.proportion-box {
					@include flex(center, null, 5rpx);

					text {
						font-size: 28rpx;
					}

					image {
						width: 20rpx;
						height: 28rpx;
						display: block;
					}
				}
			}

			.chart-img {
				width: 100%;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.empty{
				position: relative;
				width: 100%;
				height: 135rpx;
				.left{
					position: absolute;
					right: 25rpx;
					top: 20rpx;
					width: 28rpx;
					height: 5rpx;
					background-color: #666666;
				}
				.bottom{
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					height: 5rpx;
					background-color: #666666;
				}
			}
		}
	}
}
</style>