uni-zhihuikuangshan/components/p-production-statistics-section-4/p-production-statistics-section-4.vue

<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_title">{{item.name}}</view>
				<view class="item_content">
					<view class="box">
						<view class="name">早班产量</view>
						<view class="num">{{item.n1}} 吨</view>
					</view>
					<view class="box">
						<view class="name">中班产量</view>
						<view class="num">{{item.n2}} 吨</view>
					</view>
					<view class="box">
						<view class="name">晚班产量</view>
						<view class="num">{{item.n3}} 吨</view>
					</view>
				</view>
				<view class="item_bottom">
					<view class="left">年累计产量：<text>{{item.year}} 吨</text></view>
					<view class="right" @click="go_container(item.org_num)">
						<view class="more">更多详情</view>
						<uni-icons type="arrowright" size="12" color="#75B8D5"></uni-icons>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		mounted() {
			this.get_list()
		},
		methods:{
			go_container(org_num){
				uni.navigateTo({
					url: "../../production/production_report/production_report?org_num=" +
						org_num,
				})
			},
			get_list(){
				this.$p_api.coalmine_ratio({
					
				}).then((res)=>{
					// console.log(res.data.data)
					
					this.list = res.data.data
				})
			},
			
		}
		
	}
</script>

<style lang="scss">
	.list {
		padding-bottom: 40rpx;

		.item {}

		.item_title {
			text-align: center;
			line-height: 100rpx;

			font-size: 34rpx;
			font-weight: 700;
		}

		.item_content {
			box-sizing: border-box;
			padding: 0 20rpx;

			display: flex;
			justify-content: space-between;

			.box {
				box-sizing: border-box;
				width: 200rpx;
				text-align: center;

				border-radius: 6px;
				overflow: hidden;

				.name {
					font-size: 26rpx;
					line-height: 40rpx;
				}

				.num {
					font-size: 26rpx;
					line-height: 40rpx;
				}
			}

			.box:nth-child(1) {
				border: 1px solid #00A2E8;
			}

			.box:nth-child(1) .name {
				background-color: #00A2E8;
			}

			.box:nth-child(2) {
				border: 1px solid #FFBC34;
			}

			.box:nth-child(2) .name {
				background-color: #FFBC34;
			}

			.box:nth-child(3) {
				border: 1px solid #FFC0B2;
			}

			.box:nth-child(3) .name {
				background-color: #FFC0B2;
			}
		}

		.item_bottom {
			display: flex;
			justify-content: space-between;

			box-sizing: border-box;
			padding: 40rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #eee;

			.left {
				font-size: 24rpx;

				text {
					font-weight: 700;
				}
			}

			.right {
				display: flex;
				align-items: baseline;

				.more {
					margin-right: 6rpx;

					font-size: 24rpx;
					color: #75B8D5;
				}
			}
		}
	}
</style>