yanzhiAPP/pages/index3/ji.vue

<template>
	<view class="content">
		<view style="height: var(--status-bar-height)"></view>

		<view class="" style="display: flex;align-items: center;font-size: 33.29rpx;margin-bottom: 20rpx;">
			<u--image @tap="backFn" src="/static/img/FH.png" width="50.82rpx" height="50.82rpx" alt=""></u--image>
			<text>商品溯源</text>
		</view>
		<view class="head-img">
			<view class="">
				<u--image src="/static/img/JCBJ.jpg" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
			</view>
			<!-- <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> -->
			<!-- <view class="poisition">
				<view style="display: flex;">
					<u--image src="/static/img/dw.png" style="margin: 0 5rpx;" width="35.05rpx"
						height="35.05rpx"></u--image>
					江阳区通滩镇1队123号
				</view>
			</view> -->
		</view>
		<view class="bad-info" v-for="(item,index) in data" :key="index">
			<view class="tit">
				{{item.tit}}
			</view>
			<view class="bad-info-cont">
				<view class="" v-if="item.step">
					<u-steps current="5" direction="column" activeColor="#3DD395">
						<u-steps-item class="steps" :title="item.des1" :desc="item.time1">
						</u-steps-item>
						<u-steps-item :title="item.des2" :desc="item.time2">
						</u-steps-item>
						<u-steps-item :title="item.des3" :desc="item.time3">
						</u-steps-item>
						<u-steps-item :title="item.des4" :desc="item.time4">
						</u-steps-item>
						<u-steps-item :title="item.des5" :desc="item.time5">
						</u-steps-item>
					</u-steps>
				</view>

				<view class="" style="	display: flex;" v-else>
					<view class="">
						<view class="bad-info-cont-li">
							{{item.spmc}}：
						</view>
						<view class="bad-info-cont-li">
							{{item.scdz}}：
						</view>
						<view class="bad-info-cont-li" v-show="item.scq">
							{{item.scq}}：
						</view>
					</view>
					<view class="">
						<view class="bad-info-cont-li">
							{{item.spmc1}}
						</view>
						<view class="bad-info-cont-li" v-show="!item.scdz1.includes('static')">
							{{item.scdz1}}
						</view>
						<view class="bad-info-cont-li" v-show="!item.scdz1.includes('static')">
							<!-- {{item.scdz1}} -->
							{{item.scq1}}
						</view>
					</view>
				</view>

				<view class="" v-if='item.img'>
					<u--image :src="item.scdz1" width="646.61rpx" height="529.21rpx" alt=""></u--image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				data: [{
						tit: "品类信息",
						spmc: "商品名称",
						scdz: "生产地址",
						scq: "生长期",
						img: false,
						spmc1: "白羽鸡",
						scdz1: "江阳区威武村南485米",
						scq1: "5个月",
					}, {
						tit: "饲养",
						spmc: "饲料名称",
						scdz: "饲料用量",
						scq: "饲养人",
						img: false,
						spmc1: "正大饲料",
						scdz1: "3KG",
						scq1: "赵国强",
					},

					{
						tit: "卫生",
						des1: "鸡舍卫生清洁 负责人:周树",
						des2: "滴露消毒液1L 负责人:刘明山",
						des3: "鸡舍卫生清洁 负责人:周树",
						des4: "滴露消毒液1L 负责人:刘明山",
						des5: "鸡舍卫生清洁 负责人:周树",
						time1: "2023-10-9",
						time2: "2023-9-29",
						time3: "2023-8-15",
						time4: "2023-5-15",
						time5: "2023-7-1",
						step: true,
					},


					{
						tit: "出栏",
						spmc: "出栏时间",
						scdz: "鸡畜图片",
						img: true,
						spmc1: "2023-11-10",
						scdz1: "/static/img/JC.jpg",
						scq1: "8个月",
					}

				]

			}
		},
		onLoad() {

		},
		methods: {
			urlFn(name) {
				return `/static/img/${name}.png`
			},
			img(w, h, m) {
				return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
			},
			backFn() {
				uni.navigateBack()
			},
			navto() {
				uni.navigateTo({
					url: '/pages/index2/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		// background-color: grey;
		background-image: url("/static/img/bgc.png");
		background-size: cover;
	}

	.head-img {
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		margin: 0 auto;
		position: relative;

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 380.26rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			left: 43rpx;
			bottom: 36rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			display: flex;
			align-items: center;
			font-size: 29.79rpx;

			.dw-cls {

				margin: 0 5rpx;
			}
		}
	}

	.bad-info {
		margin: 20rpx 0;
		width: 693.93rpx;

		.tit {
			margin: 20rpx 0;


		}



		.bad-info-cont {
			padding: 20rpx;
			// padding-bottom: 0;
			background-color: white;
			// width: 693.93rpx;

			// height: 140.19rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			// align-items: center;


		}

		.bad-info-cont-li {
			margin-bottom: 30rpx;
		}
	}

	.steps {
		// color: red !important;
	}
</style>