“页面样式修改”

App.vue

@@ -57,6 +57,18 @@
 		box-sizing: border-box;
 	}
 
+	.te {
+
+		width: 40vw;
+		/* 容器宽度 */
+		white-space: nowrap;
+		/* 文字不换行 */
+		overflow: hidden;
+		/* 超出部分隐藏 */
+		text-overflow: ellipsis;
+		/* 超出部分显示省略号 */
+	}
+
 	// .uni-tabbar .uni-tabbar__icon {
 	// 	width: 80rpx !important;
 	// 	height: 80rpx !important;

components/plant/landInfo.vue

@@ -1,14 +1,56 @@
 <template>
 
 
-	<view class="">
+	<view class="" style="margin-top: 10rpx;">
+		<view class="" style="display: flex;align-items: center;height: 50rpx;">
+			<u--image src="/static/main/index/dw.png" width="25rpx" height="30rpx"
+				style="margin-right: 10rpx;"></u--image>
 			{{info.title}}
+		</view>
 
+		<view class="info">
+			<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
+				当前种植
+				<view class="">
+					{{info.kindarea|| info.total_area-info.residual_area}}亩
+				</view>
+			</view>
+			<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
+				土地面积
+				<view class="">
+					{{info.total_area}}亩
+				</view>
+			</view>
+			<view class="info-li" style="background-image: url('/static/main/index/tdfzr.png');">
+				当地负责人
+				<view class="">
+					{{info.master_name}}
+				</view>
+			</view>
+			<view class="info-li" style="background-image: url('/static/main/index/fzrdh.png');">
+				负责人电话
+				<view class="">
+					{{info.master_phone}}
+				</view>
+			</view>
+			<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/dqzz.png');">
+				种植品种
+				<view class="">
+					{{info.kind}}
+				</view>
+			</view>
+			<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/pin_pai.png');">
+				种植品牌
+				<view class="">
+					{{info.breed}}
+				</view>
+			</view>
+		</view>
 
 	</view>
 
 
-	<view class="card">
+	<!-- <view class="card">
 		<view class="tit">
 			<view class="">
 				{{info.title}}
@@ -55,9 +97,9 @@
 				联系方式: {{info.master_phone}}
 			</view>
 
-		</view>
+		</view> -->
 
-	</view>
+	<!-- </view> -->
 
 
 
@@ -71,6 +113,7 @@
 	} from "vue";
 	const props = defineProps({
 		info: Object,
+		isDetail: Boolean
 
 	})
 
@@ -83,6 +126,21 @@
 </script>
 
 <style lang="scss" scoped>
+	.info {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.info-li {
+			width: 223rpx;
+			height: 129rpx;
+			border-radius: 10rpx;
+			background-size: 100% 100%;
+			padding: 20rpx;
+			margin-bottom: 20rpx;
+		}
+	}
+
 	.card {
 		// width: 710rpx;
 		margin: 0 auto;

pages/husbandryForm/detail.vue

@@ -1,13 +1,25 @@
 <template>
 	<view class="content">
+
 		<view class="content-con-a" v-if="datalist.length>0">
 
 			<view class="shop_action">
 				<view class="" v-for="(item,i) in datalist">
-					<view class="shop_action-title">
+					<view class=" tit">
 						{{item.type_text}}
 					</view>
+
 					<view class="shop_action-detail" v-if="item.type!=3&&item.type!=5">
+
+						<view class="action-detail">
+							<view class="title">
+								施肥面积：
+							</view>
+							<view class="detail">
+								{{item.detail.area}}亩
+							</view>
+						</view>
+
 						<view class="action-detail">
 							<view class="title">
 								{{item.type_text.slice(0, -2)}}<text class=""
@@ -68,8 +80,19 @@
 							</view>
 
 							<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
-								<image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
+
-								</image>
+								<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
+									circular></u-swiper>
+
+								<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
+								</image> -->
+
+
+
+
+
+
+
 							</view>
 						</view>
 					</view>
@@ -159,6 +182,9 @@
 			</view>
 
 		</view>
+
+
+
 	</view>
 </template>
 
@@ -196,6 +222,8 @@
 			if (res.code == 1) {
 
 				datalist.splice(0, datalist.length, ...res.data)
+				res.data.detai
+				// console.log(res.data)
 			}
 		});
 	};
@@ -215,6 +243,10 @@
 			urls: url
 		})
 	}
+
+	const hdClick = (e) => {
+		console.log(e)
+	}
 </script>
 
 
@@ -322,4 +354,23 @@
 
 		}
 	}
+
+	.tit {
+		position: relative;
+		padding-left: 20rpx;
+		font-weight: bold;
+		margin-bottom: 20rpx;
+	}
+
+	.tit::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		left: 0;
+		width: 3px;
+		/* 左边框的宽度 */
+		height: 30rpx;
+		background-color: #34D08D;
+	}
 </style>

pages/landDetail/index.vue

@@ -56,8 +56,8 @@
 								<view class="">
 									<text style="color: black;">种植面积:</text> {{item.area}}亩
 								</view>
-								<view class="">
+								<view class="te">
-									<text style="color: black;">参与人:</text> {{item.user}}
+									<text style="color: black;white-space: nowrap;">参与人:</text> {{item.user}}
 								</view>
 								<view class="">
 									<text style="color: black;">种植日期:</text> {{item.plant_date}}

pages/landDetail/tudi.vue

@@ -1,19 +1,19 @@
 <template>
 	<view class="box">
 		<view class="content">
-			<view class="video" @click="navto('/pages/live/live')">
+			<view class="" style="display: flex;justify-content: space-between;">
-				<!-- <u--image :src="url" width="100%" height="300rpx"></u--image> -->
+				<view class="tit">
-				<u-swiper :list="dataobj.datapic" width="100%" height="300rpx"></u-swiper>
+					苗情监测数据
 				</view>
-			<view class="time">
+				<view class="" style="display: flex;">
-				<u-icon name="clock"></u-icon>
+					<u-icon name="clock" style="margin-right: 10rpx;"></u-icon>
 					<text>刷新时间: {{getNowTimeFn()}} </text>
 				</view>
-			<view class="add-thing" @click="showPicker=true" v-if="palnttype">
-				记农事
 			</view>
-			<view class="" style="margin-bottom: 30rpx;" v-else></view>
+			<view class="video" @click="navto('/pages/live/live')">
-			<landInfo :info='dataobj'></landInfo>
+				<u--image :src="url" width="100%" height="300rpx"></u--image>
+			</view>
+			<landInfo :info='dataobj' :isDetail='true'></landInfo>
 
 
 			<view class="">
@@ -21,23 +21,70 @@
 					操作信息
 				</view>
 				<view class="" v-if="dataList1.length>0">
-					<view class="thing-card" v-for="(item,index) in dataList1" :key="index">
+					<view class="thing-card" v-for="(item,index) in dataList1" :key="index"
-						<view class="head">
+						@click="navtoForm(item,item.type)">
+						<!-- <view class="head">
 							<view class="">
 								{{item.type_text}}
 							</view>
 							<view class="" @click="navtoForm(item,item.type)">
 								农事查看
+							
 							</view>
-						</view>
+						</view> -->
 
 						<view class="card_body">
-							<view class="left">
+							<view class="left" style="position: relative;">
 								<u--image @click="perviewFn(item.detail.pic)" radius='10' :src="item.detail.pic[0]"
 									width="200rpx" height="200rpx"></u--image>
+
+
+
+								<view class="stick-img" style="background-color: red;">
+									<!-- dsf -->
+									<u--image :src="stickImgFn(item.type)" class="stick-img" width="100rpx"
+										height="100rpx"></u--image>
+
+								</view>
+
+
+
+
+							</view>
+							<view class="right" style="color:#7B7B7B ;">
+								<view class="" v-if="item.type !=5">
+									<text style="color: black;">{{actionTypeFn(item.type)}}: </text>
+									<text
+										v-if="item.type==3">{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}</text>
+									<text v-else>{{item.detail.kind}}</text>
+								</view>
+								<view class="">
+									<text style="color: black;">参与人员</text>：{{item.detail.user}}
+									<view class="" v-if='item.type==5'>
+										<text style="color: black;">收获日期:</text> {{item.update_time.slice(0,10)}}
+									</view>
+								</view>
+								<view class="" v-if="item.type !=5">
+									<view class="">
+										<text style="color: black;">开始日期</text>：{{item.detail.start_date}}
+									</view>
+									<view class="">
+										<text style="color: black;">结束日期</text>：{{item.detail.end_date}}
+									</view>
+								</view>
+								<view class="te">
+									<text style="color: black;white-space: nowrap;">备注</text>：{{item.detail.remark}}
+								</view>
+
+
+
+
+
+
+								<!-- <view class="" v-if="item.type==5">
+									<view class="">
+										参与人: {{item.detail.user}}
 									</view>
-							<view class="right">
-								<view class="" v-if="item.type==5">
 									<view class="">
 										参与人: {{item.detail.user}}
 									</view>
@@ -48,16 +95,19 @@
 								<view class="" v-else>
 									<view class="" v-if="!item.detail.type">
 										<view class="">
-											{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4">剂</text>种类: {{item.detail.kind}}
+											{{item.type_text.slice(0, -2)}}<text class=""
+												v-if="item.type==2||item.type==4">剂</text>种类: {{item.detail.kind}}
 										</view>
 
 										<view class="">
-											{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4">剂</text>品牌: {{item.detail.breed}}
+											{{item.type_text.slice(0, -2)}}<text class=""
+												v-if="item.type==2||item.type==4">剂</text>品牌: {{item.detail.breed}}
 										</view>
 
 
 										<view class="" v-if='item.detail.dosage'>
-											{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4">剂</text>用量: {{item.detail.dosage}}
+											{{item.type_text.slice(0, -2)}}<text class=""
+												v-if="item.type==2||item.type==4">剂</text>用量: {{item.detail.dosage}}
 
 											<text v-if='item.type==4'>升</text>
 											<text v-if='item.type!=4&&item.type!=5'>斤</text>
@@ -69,7 +119,8 @@
 
 									<view class="" v-if="item.type==3">
 
-										{{item.type_text.slice(0, -2)}}方式: {{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
+										{{item.type_text.slice(0, -2)}}方式:
+										{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
 									</view>
 									<view class="">
 										参与人: {{item.detail.user}}
@@ -84,7 +135,10 @@
 									<view class="" v-if="item.detail.remark">
 										备注: {{item.detail.remark}}
 									</view>
-								</view>
+								</view> -->
+
+
+
 
 							</view>
 						</view>
@@ -222,8 +276,8 @@
 			plant_id: typeID.value
 		}).then((res) => {
 			if (res.code == 1) {
-				if(res.data.status==2){
+				if (res.data.status == 2) {
-					palnttype.value=false
+					palnttype.value = false
 				}
 				getlist1(res.data.land_id, res.data.kind, res.data.pic, res.data.area, res.data.breed)
 			}
@@ -315,6 +369,21 @@
 			urls: url
 		})
 	}
+	const actionTypeFn = (type) => {
+		if (type == 3) return "喷灌方式"
+		if (type == 4) return "除虫剂种类"
+		if (type == 2) return "除草剂种类"
+		if (type == 1) return "肥料种类"
+		if (type == 5) return "收获"
+
+	}
+	const stickImgFn = (type) => {
+		if (type == 3) return "/static/main/index/guan_gai.png"
+		if (type == 4) return "/static/main/index/chu_chong.png"
+		if (type == 2) return "/static/main/index/chu_cao.png"
+		if (type == 1) return "/static/main/index/shi_fei.png"
+		if (type == 5) return "/static/main/index/shou_huo.png"
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -401,7 +470,6 @@
 		.card_body {
 			padding: 20rpx;
 			display: flex;
-			// justify-content: space-between;
 
 			.right {
 				display: flex;
@@ -409,6 +477,33 @@
 				flex-direction: column;
 				margin-left: 40rpx;
 			}
+
+			.stick-img {
+				position: absolute;
+				z-index: 9999;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
 			}
 		}
+	}
+
+	.tit {
+		position: relative;
+		padding-left: 20rpx;
+		font-weight: bold;
+		margin-bottom: 20rpx;
+	}
+
+	.tit::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		left: 0;
+		width: 3px;
+		/* 左边框的宽度 */
+		height: 30rpx;
+		background-color: #34D08D;
+	}
 </style>