yanzhiAPP/pages/index/index.vue

<template>
	<view class="" style="background-color: #EAF2EF;min-height: 100vh;">
		<view class="bg"></view>

		<view class="" style="height: 200rpx;">

		</view>
		<view class="content">
			<view class="serch">
				<view class="s">
					<u-search searchIconColor='white' color="white" placeholder="搜索基地名称" bgColor='#34D190'
						borderColor="white" placeholderColor="white" :showAction="false" v-model="keyword"></u-search>
				</view>

				<view class="add" @click="ceshi">
					+
				</view>
			</view>

			<view class="plowland" v-for="(item,index) in list" :key="index" @click="navgo('/pages/index1/'+item.path)">
				<view class="top">
					<view class="left">
						<view class="tit">
							{{item.tit}}
						</view>
						<view class="">
							面积： <text>{{item.mj}}</text>
						</view>
						<view class="" style="margin:20rpx 0">
							{{item.type?item.type:"农作物"}}： <text>{{item.nzw}}</text>
						</view>
					</view>
					<view class="right" @click.stop="navgo('/pages/index3/'+item.path)">
						<uqrcode ref="uqrcode" canvas-id="qrcode" :value="'https://uqrcode.cn/doc'+item.path"
							sizeUnit='rpx' :size='163'></uqrcode>
					</view>
				</view>
				<view class="bottom">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="">
							生长周期：<text>{{item.szzq}}</text>
						</view>
						<view class="">
							培育方式： <text>{{item.pyfs}}</text>
						</view>
					</view>

					<view class="hr">

					</view>
					<view class="" style="display: flex; justify-content: space-around;">
						<view class="" style="display: flex;flex-direction: column;align-items: center;"
							v-for="items in item.li">
							<view class="">
								<u--image :src="items.img" width="101.64rpx" height="101.64rpx" alt=""></u--image>
							</view>
							<view class="">
								<text>{{items.tit}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				list: [{
						path: "index",
						tit: "柑橘园种植基地",
						mj: "1200亩",
						nzw: "蜜桔",
						szzq: "125天",
						pyfs: "种植",
						li: [{
							img: "/static/img/QXJC.png",
							tit: "气象检测"
						}, {
							img: "/static/img/QTTC.png",
							tit: "气体探测"
						}, {
							img: "/static/img/ZWXBSQ.png",
							tit: "紫外线变送器"
						}, ]
					},
					{
						path: "shucai",
						tit: "蔬菜种植基地",
						mj: "300亩",
						nzw: "有机花菜",
						szzq: "95天",
						pyfs: "种植",
						li: [{
							img: "/static/img/QXJC.png",
							tit: "气象检测"
						}, {
							img: "/static/img/QTTC.png",
							tit: "气体探测"
						}, {
							img: "/static/img/ZWXBSQ.png",
							tit: "紫外线变送器"
						}, ]
					},
					{
						path: "ji",
						tit: "鸡畜养殖基地",
						mj: "30亩",
						nzw: "黄羽鸡",
						szzq: "136天",
						pyfs: "养殖",
						type: "种植物",
						li: [{
							img: "/static/img/QXJC.png",
							tit: "气象检测"
						}, {
							img: "/static/img/QTTC.png",
							tit: "气体探测"
						}, {
							img: "/static/img/DZJC.png",
							tit: "地质检测"
						}, ]
					},
					{
						path: "xia",
						tit: "水产养殖基地",
						mj: "200亩",
						nzw: "鲥鱼",
						type: "养殖物",
						szzq: "72天",
						pyfs: "养殖",
						li: [{
							img: "/static/img/RYY.png",
							tit: "溶氧仪"
						}, {
							img: "/static/img/SZJC.png",
							tit: "水质检测"
						}, ]
					}



				],
			}
		},
		onShow() {},
		methods: {
			ceshi() {

				this.$refs.uqrcode[0].toTempFilePath({
					success: res => {
						console.log(res);
					}
				});
			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		height: 419.92rpx;
		background-color: #34D190;
		position: absolute;
		border-radius: 0 0 60rpx 60rpx;
	}

	.serch {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;

		.s {
			width: 611.57rpx;
		}

		.add {
			margin-left: 20rpx;
			font-size: 80rpx;
			color: white;
			transform: translateY(-5rpx);
		}
	}

	.content {
		width: 693.93rpx;
		margin: 0 auto;
		position: relative;
		padding-bottom: 50rpx;

		.plowland {
			font-size: 33.29rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			color: #737373;
			margin-bottom: 30rpx;

			text {
				color: black;
			}

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

				.left {
					.tit {
						font-size: 42.06rpx;
						color: #00A15E;
						margin-bottom: 30rpx;
					}
				}

				.right {
					width: 162.97rpx;
					height: 162.97rpx;
					// background-color: pink;
				}
			}


			.hr {
				border-top: 1px solid #B3B3B3;
				margin: 30rpx 0;

			}
		}
	}
</style>