hwnc/pagesB/pages/chooseland/chooseland.vue

<template>
	<view :class="[AppTheme]" class="container">
		<view class="inationy_aea">
			<view :class="selectindexs ? 'carousel-section bg' : 'carousel-section '">
				<view v-show="selectindexs">
					<swiper class="carousel" circular>
						<swiper-item v-for="(item, index) in imglist" :key="index" class="carousel-item">
							<image :src="item" style="width: 100%;height: 100%;"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-dots"></view>
				</view>
				<view v-show="!selectindexs">
					<yfsVideo ref="yvideo" :src="landdetails&&landdetails.video_url"></yfsVideo>
				</view>
				<scroll-view style="height: 40px;position: absolute;bottom: 20rpx;" scroll-x="true">
					<view class="farm_btn">
						<view
							:class="selectindexs ? 'baner_btn act bg-primary border-primary' : 'baner_btn border-primary'"
							@click="chickvedio(true)">图片
						</view>
						<view v-show="landdetails&&landdetails.video_url"
							:class="!selectindexs ? 'baner_btn act bg-primary border-primary' : 'baner_btn border-primary '"
							@click="chickvedio(false)">视频</view>
					</view>
				</scroll-view>
			</view>
			<view class="borbak"></view>
			<!-- 基本信息 -->
			<view class="detailed_information">
				<view class="price_selection">
					<view class="commodity_price">
						<view class="commodity_price_red text-neutral">￥{{ landdetails.show_price||0 }}</view>
						元起
					</view>
				</view>
				<view class="case_titleblock">
					<view class="case_title">{{ landdetails.soil_name||'' }}</view>
				</view>
				<view class="case_title_sm">{{ landdetails.soil_desc||'' }}</view>
				<view class="borbak"></view>
				<view class="rental_record" v-if="landdetails.address!=''">
					<view class="rental_address"
						style=" display: flex;justify-items: center;justify-content: center; font-weight: normal;">
						<view class="">
							<u-icon @click="casemap" name="map" :label="landdetails.address" labelPos="right"
								labelSize="14" size="18">
							</u-icon>
						</view>
						<view v-if="position" class=""
							style=" display: flex;justify-items: center;justify-content: center;margin-top: 2rpx;">
							<u-icon name="arrow-right" labelSize="12" size="16">
							</u-icon>
						</view>
					</view>
				</view>
				<view class="borbak"></view>
				<!-- 选择地块 -->
				<view class="rental_record">
					<view class="rental_address" v-if='soil_set&&soil_set.title1'>{{soil_set.title1}}</view>
					<view class="rental_address" v-else>选择土地</view>
					<view class="regional_records">剩余{{ hirelandlistsenum }}/{{ retunnsn(hirelandlist.length) }}</view>
				</view>
				<view class="parcel_status">
					<view class="parcel_statusitem">
						<view class="color_block_representation" style="background-color: #9F7F68;"></view>
						可选
					</view>
					<view class="parcel_statusitem">
						<view class="color_block_representation" style="background-color: #635044;"></view>
						选中
					</view>
					<view class="parcel_statusitem">
						<view class="color_block_representation" style="background-color: #DFD8D4;"></view>
						已租
					</view>
				</view>
				<view class="land_list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="land_item" v-for="(item, index) in hirelandlist" :key="index"
							@click="swtedland(item, index)">
							<view v-if="item.status === '0' || item.status === 0" class="land_item_text1"
								:style="{backgroundImage: selelanditem === index?'url(' + representation_sel + ') !important':''}">
								<view class="land_item_title1">{{ item.area }}</view>
								<view class="land_item_title2">m²</view>
								<view class="land_item_title3">{{ item.alias }}</view>
							</view>
							<view v-if="item.status === '1' || item.status === 1" class="land_item_text"
								:style="{backgroundImage: item.status === 1 || item.status === '1'?'url(' + landselled + ') !important':''}">
								已出租
							</view>
							<view style="justify-content: center;display: flex;padding-top: 10rpx;">
								<u-icon
									v-if="(item.status === '0' && selelanditem !== index) || (item.status === 0 && selelanditem !== index)"
									name="checkmark-circle" color="rgb(159, 127, 104)" size="25">
								</u-icon>
								<u-icon v-if="selelanditem === index" name="checkmark-circle-fill"
									color="rgb(99, 80, 68)" size="25">
								</u-icon>
								<u-icon v-if="item.status === '1' || item.status === 1" name="lock"
									color="rgb(223, 216, 212)" size="25">
								</u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="borbak"></view>
				<!-- 选择周期和服务 -->
				<view class="rental_record" @click="hireselect = true">
					<view class="rental_address" v-if='soil_set&&soil_set.title2'>{{soil_set.title2}}</view>
					<view class="rental_address" v-else>租赁周期</view>
					<view class="hirecycle" v-if='soil_set&&soil_set.title3'>{{ cycle===''?soil_set.title3  :cycle }}></view>
					<view class="hirecycle" v-else>{{ cycle===''? "请选择租赁周期" :cycle }} ></view>
				</view>
				<view class="borbak"></view>
				<u-picker :show="hireselect" ref="uPicker" keyName="label" :columns="[hirepackagelist]"
					@confirm="choonsesekey" @cancel="cancel"></u-picker>
				<view class="rental_record">
					<view class="rental_address" v-if="soil_set&&soil_set.title4">{{soil_set.title4}}</view>
					<view class="rental_address" v-else>地块服务</view>
					<view class="regional_records" @click="navtovip()" v-if="soil_set&&soil_set.title5">{{soil_set.title5}} >
					</view>
					<view class="regional_records" @click="navtovip()" v-else>了解特权 ></view>
				</view>
				<view class="parcel_selist">
					<scroll-view class="scroll-view_t" scroll-x="true">
						<view class="scroll_view_item" @click="cutlysetage = index"
							v-for="(item, index) in hostingpackage" :key="index"
							:class="[cutlysetage === index ? 'scroll_vem_sle bg-base border-primary' : 'scroll_vem_sle1']">
							<view class="title_main plug_center_100">{{ item.serve_name }}</view>
							<view class="postage plug_center_100 text-neutral">
								￥
								<text class="price_bold ">{{ item.serve_price }}</text>
								/天
							</view>
							<view class="brief_introduction">{{ item.serve_desc }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="borbak"></view>
				<!-- 种子列表 -->
				<view class="rental_record">
					<view class="rental_address" v-if="soil_set&&soil_set.title6">{{soil_set.title6}}</view>
					<view class="rental_address" v-else>种子列表</view>
					<view class="regional_records" @click="seeseed()" v-if="soil_set&&soil_set.title7">{{soil_set.title7}} >
					</view>
					<view class="regional_records" @click="seeseed()" v-else>查看全部 ></view>
				</view>
				<view class="seed_list">
					<navigator :url="'/pagesB/pages/chooseland/seed/vilegedetail?seedid=' + item.id"
						hover-class="navigator-hover" open-type="navigate" class="seed_item"
						v-for="(item, index) in seeddatalist" :key="index">
						<image class="seed_item_thumbnail" mode="aspectFill" :src="item.ripe_pic"></image>
						<view class="seed_item_delit">
							<view class="seed_delit_title">{{ item.seed_name }}</view>
							<view class="seed_delit_yield">预估产量:{{ item.seed_yield }}kg/m²</view>
						</view>
					</navigator>
				</view>
		<!-- 		店铺 -->
		<view class="borbak"></view>
				<view class="farm" v-if="landdetails.farm_id">
					<view class="text_area">
						<view class="shop_name">
							<image :src="farm_info.farm_logo" :lazy-load="true" class="shop_thumbnail"></image>
							<view class="right_shop_mess">
								<view class="shop_line">
									<view class="shop_line_p1">{{farm_info.farm_name}}
									</view>
									<view class="right_shop_mess_p2" @click="gostoredetail(farm_info.id)">
										进店逛逛
									</view>
								</view>
								<view class="shop_line_fl">
								</view>
								<view class="shop_line">
									<view class="shop_line_p2">
										<u-icon   name="map" size="20" color="#9C9C9C"></u-icon>
										<view class="address">
											{{farm_info.farm_address}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="shop_one">
						<view class="shop_one_1">
							<view class="view1">{{farm_info.page_view}}</view>
							<view class="view2">访客数</view>
						</view>
						<view>
							<u-line color="#999998" direction="col" length='60%'></u-line>
						</view>
					
						<view class="shop_one_1">
							<view class="view1">{{farm_info.shopnum}}</view>
							<view class="view2">全部商品</view>
						</view>
						<view>
							<u-line color="#999998" direction="col" length='60%'></u-line>
						</view>
					
						<view class="shop_one_1">
					
							<view class="view1">{{farm_info.shoporder}}</view>
					
							<view class="view2">已售出</view>
						</view>
					</view>
					<!-- <view style="padding: 0 0 20rpx 0;">
						<u-album singleSize="75" multipleSize='75' singleMode="aspectFill"
							multipleMode="aspectFill" :urls="farm_info.detail_img" maxCount="4" :showMore='true'
							rowCount="4"></u-album>
					</view> -->
				</view>
				
				<!-- 土地详情 -->
				<view class="borbak"></view>
				<view class="land_details">
					<view class="rental_record">
						<view class="rental_address" v-if="soil_set&&soil_set.title8">{{soil_set.title8}}</view>
						<view class="rental_address" v-else>土地详情</view>
					</view>
					<view class="land_content" v-html="landdetails.soil_detail"></view>
				</view>
			</view>
		</view>
		<admyself :opshow="true"></admyself>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="page-bottom_1">
				<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<u-icon labelSize="12" color="#909399" label="首页" labelPos="bottom" labelColor="#909399" size="25"
						name="home"></u-icon>
				</navigator>
				<view @click="opensharebox" class="p-b-btn">
					<u-icon labelSize="12" color="#909399" label="分享" labelPos="bottom" labelColor="#909399" size="25"
						name="share"></u-icon>
				</view>

				<!-- #ifdef MP -->
				<view class="p-b-btn" style="position: relative;">
					<u-icon labelSize="12" color="#909399" label="客服" labelPos="bottom" labelColor="#909399" size="25"
						name="chat"></u-icon>
					<button open-type="contact" hover-class="none" style="position: absolute;opacity: 0;">客服</button>
				</view>
				<!-- #endif -->
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" bg-linear-gradient action-btn no-border buy-now-btn"
					@click="sumitorder">立即租赁</button>
			</view>
		</view>
		<view class="pading_bss"></view>
		<u-back-top :scroll-top="scrollTop" :custom-style="customstyle"></u-back-top>
		<!-- #ifdef MP-WEIXIN -->
		<nologin ref="nologin" v-on:loginback="loginback"></nologin>
		<!-- #endif -->
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
	</view>
</template>
<script>
	import Landapi from '@/api/land/index.js';
	import Seedapi from '@/api/seed/index.js';
	import yfsVideo from '@/components/yfs-video/yfs-video.vue';
	import nologin from '@/components/nologin/nologin.vue';

	export default {
		components: {
			yfsVideo,
			nologin
		},
		data() {
			return {
				primary: this.$theme.primary,
				sharedata: null,
				cycle: '',
				btnImgOrVideo: 1,
				// 土地详情
				landdetails: '',
				// 轮播图集合
				imglist: [],
				//切换轮播和监控
				selectindexs: true,
				// 出租土地集
				hirelandlist: [],
				// 当前选中土地下标
				selelanditem: null,
				//租聘周期
				hirecycle: '',
				//顶部距离
				scrollTop: 0,
				customstyle: {
					background: '#F4F6F8'
				},
				//租聘周期选择器显隐控制器
				hireselect: false,
				// 托管周期
				hirepackagelist: [],
				orderid: null,
				// 当前选中托管套餐
				cutlysetage: 0,
				// 土地租赁协议
				hostingpackage: [],
				// 种子列表
				seeddatalist: [],
				//剩余土地
				hirelandlistsenum: 0,
				videoUrl: 'videoUrl',
				settingFile: getApp().globalData.siteinfo,
				landselled: '',
				representation_sel: '',
				latitude: '', //纬度
				longitude: '', //经度
				position: false,
				tarpty_id: '',
				soil_set: '',
					farm_info:''
			};
		},
		onLoad(options) {
			this.$store.commit('setlandleaseorder', null);
			this.landselled = this.settingFile.root_img + '/static/app/chooseland/landselled.png';
			this.representation_sel = this.settingFile.root_img + '/static/app/chooseland/landseed.png';
			this.$bindid.getbindid(options, this.$store);
			//获取土地详情
			this.getlanddebyid(options.landid);
			this.orderid = options.landid;

			// 获取土地租赁协议列表
			this.gethostingpackage();
			//获取种子列表
			this.getseedlist(1, 1);
			if (this.$config && this.$config.app.position == 1) {
				this.position = true;
			}
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		onShow: function() {
			this.selectindexs = true;
			this.selelanditem = null;
			this.cutlysetage = 0;
			if (this.orderid !== null) {
				//获取土地详情
				this.getlanddebyid(this.orderid);
			}
		},
		methods: {
			gostoredetail(farmid) { //跳转店铺详情
			 
				uni.navigateTo({
					url: "/pagesC/pages/merchantdetails/merchantdetails?id=" + farmid
				})
			},
			loginback() {
				//登录回调
			},
			casemap() {
				if (this.position) {
					// #ifdef MP-WEIXIN  || APP-PLUS
					uni.openLocation({
						latitude: Number(this.latitude), //要去的纬度-地址---请注意这里的Number，如果不加Number，就会出错
						longitude: Number(this.longitude), //要去的经度-地址---请注意这里的Number，如果不加Number，就会出错
						name: '',
						address: this.landdetails.address
					});
					// #endif
				}
			},
			opensharebox() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			videoErrorCallback() {
				this.$api.msg('播放错误,请换一个~');
			},
			chickvedio(_selectindexs) {
				this.selectindexs = _selectindexs;
				if (!this.selectindexs) {
					this.$refs.yvideo.playvideo(this.landdetails.video_url);
				}
			},
			//获取种子列表
			getseedlist(type, p) {
				var that = this;
				Seedapi.getseedlist({
					type: type,
					p: p,
					orderid: this.orderid
				}).then(res => {
					if (res.status == 1) {
						// 获取服务套餐详情集合
						that.seeddatalist = res.data;
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//获取土地详情
			getlanddebyid(landid) {
				let that = this;
				if (landid !== null && landid !== undefined) {
					Landapi.getlanddeilt({
						id: landid
					}).then(res => {
						if (res.status == 1) {
							that.sharedata = res.data.sharedata
							that.sharedata.title = res.data.soil_name;
							that.sharedata.path = '/pagesB/pages/chooseland/chooseland?pid=' + this.$getuid() +
								'&id=' + landid;
							that.landdetails = res.data;
							that.farm_info=res.data.farm;
							console.log(that.farm_info,'that.farm_info')
							that.soil_set = res.data.soil_set;
							console.log(that.soil_set,'')
							that.tarpty_id = res.data.party;
							that.landdetails.soil_detail = res.data.soil_detail.replace(/\<img src="/gi,
								`<img style='width:100%;display:block' src="${that.settingFile.root_rich_img}`);
							//返回为对象,无需转换
							let pannms = res.data.period;
							that.hirepackagelist = [];
							for (var i; i < pannms.length; i++) {
								console.log(i)
							}
							pannms.forEach((item, index) => {
								let paritem = {
									label: item.periodname,
									value: parseInt(item.days),
									extra: index
								};
								that.hirepackagelist.push(paritem);
							});
							that.imglist.push(that.landdetails.soil_cover_pic);
							that.hirelandlist = JSON.parse(that.landdetails.subdivision);
							let updaordermess = this.$store.state.updaordermess;
							updaordermess.soil_pic = that.landdetails.soil_cover_pic;
							let locationdata = res.data.location
							that.latitude = locationdata[1]; //要去的纬度-地址
							that.longitude = locationdata[0]; //要去的经度-地址
							that.$store.commit('setupdaordermess', updaordermess);
							this.retuoklen(this.hirelandlist)
						} else {
							that.$api.msg(res.msg);
						}
					})
				}
			},

			// 获取土地租赁协议列表
			gethostingpackage(title) {
				var that = this;
				Landapi.getsecemist({
					soil_id: this.orderid
				}).then(res => {
					if (res.status == 1) {
						// 给套餐集合赋值
						that.hostingpackage = res.data.data;
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//切换当前选中土地
			swtedland(item, index) {
				let that = this;
				if (item !== null && item !== undefined) {
					if (item.status === '0' || item.status === 0) {
						if (that.selelanditem === index) {
							that.selelanditem = null;
						} else {
							if (that.hirelandlist[index].title === item.title) {
								that.selelanditem = index;
								 
							}
						}
					}
				}
			},
			// 切换select值
			choonsesekey(e) {
				let that = this;
				that.hireselect = false;
				that.hirecycle = that.hirepackagelist[e.indexs[0]];
				that.cycle = that.hirecycle.label
			},
			cancel() {
				let that = this;
				that.hireselect = false;
			},
			//跳转了解特权页面
			navtovip() {
				uni.navigateTo({
					url: '/pagesB/pages/chooseland/landservice/landservice?soil_id=' + this.orderid + '&type=0'
				});
			},
			// 查看更多种子
			seeseed() {
				uni.navigateTo({
					url: '/pagesB/pages/chooseland/seed/moreseed?orderid=' + this.orderid
				});
			},
			sumitpost() {
				var that = this;
				if (that.selelanditem !== null) {
					if (!that.hirecycle) {
						that.$api.msg('请选择租赁周期');
						return
					}
					var selelanditemtext = that.hirelandlist[that.selelanditem]
					let ordermess = {
						//土地id
						landid: that.landdetails.id,
						//地块ID
						selelanditem: selelanditemtext.id,
						//选中土地
						selelanditemtext: selelanditemtext,
						//当前选中托管套餐
						cutlysetagetext: that.hostingpackage[that.cutlysetage],
						//托管周期
						hirecycle: that.hirecycle,
						//托管周期集合
						hirepackagelist: that.hirepackagelist,
						//土地名称
						soil_name: that.landdetails.soil_name,
						seednumber: 0,
						vipaddress: that.landdetails.vipaddress,
						level_radio: that.landdetails.level_radio,
					};
					that.$store.commit('setlandleaseorder', ordermess);
					uni.navigateTo({
						url: '/pagesB/pages/creatorder/creatorder?id=' + that.tarpty_id + '&soil_id=' + this
							.orderid
					});
				} else {
					that.$api.msg('请选择土地');
				}
			},
			//提交订单
			sumitorder() {
				let that = this;
				// #ifdef MP-WEIXIN
				if (that.$store.state.islogin()) {
					that.sumitpost()
				} else {
					that.$refs.nologin.open();
				}
				// #endif
				// #ifdef H5 || APP-PLUS
				that.sumitpost()
				// #endif
			},
			//跳转首页
			gotoindex() {
				uni.switchTab({
					url: '/pages/land/land'
				});
			},
			//返回剩余土地数
			retuoklen(landlist) {
				let surplusnm = 0;
				if (landlist !== null && landlist !== undefined) {
					landlist.forEach(item => {
						if (item.status === 0 || item.status === '0') {
							surplusnm = surplusnm + 1;
						}
					});
				}
				this.hirelandlistsenum = surplusnm;
			},
			//土地分块总数
			retunnsn(itmenum) {
				if (itmenum === undefined) {
					return 0;
				} else {
					return itmenum;
				}
			}
		}
	};
</script>
<style lang="scss">
	.ditu {
		width: 100%;
		height: calc(100vh);
	}

	#vievieod {
		height: 600rpx;
		width: 100%;
		top: -16rpx
	}

	.pading_bss {
		height: 200rpx;
		width: 100%;
	}

	.container {
		overflow-x: hidden;
	}

	.carousel-section {
		position: relative;
		width: 100%;
		height: 450rpx;
		background-color: #000;

		.carousel {
			width: 100%;
			height: 450rpx;

			swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.farm_btn {
			position: absolute;
			display: flex;

			.baner_btn {
				width: 150rpx;
				height: 60rpx;
				margin: 0 20rpx;
				color: #ffffff;
				text-align: center;
				line-height: 54rpx;
				border-radius: 30rpx;
				border-width: 1rpx;
				border-style: solid;
			}

			.baner_btn.act {}
		}
	}

	.carousel-section.bg {
		background-color: #000000;

		.video_blck {
			width: 100%;
			height: 419rpx;
		}
	}

	button::after {
		border: none;
	}

	.inationy_aea {}

	.detailed_information {
		width: calc(100% - 40rpx);
		margin: 15rpx 20rpx 0 20rpx;
	}

	.price_selection {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.commodity_price {
		font-size: 28rpx;
		color: #999;
		display: flex;
	}

	.commodity_price_red {
		font-weight: 800;
		margin: 0 10rpx 0 0;
		font-size: 32rpx;
	}

	.wx_share {
		font-size: 28rpx;
		color: #999;
		display: flex;
		justify-content: flex-start;
		background: transparent;
		align-items: center;
	}

	.case_titleblock {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.case_title {
		font-size: 30rpx;
		font-weight: 550;
		color: #000;
		padding: 20rpx 5rpx;
	}

	.case_title_sm {
		font-size: 28rpx;
		color: #999;
		margin: 20rpx 0 10rpx 0;
	}

	button:after {
		border: none;
	}

	.rental_record {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
	}

	.rental_address {
		font-size: 30rpx;
		color: #000;
		font-weight: 550;
	}

	.regional_records {
		font-size: 26rpx;
		color: #999;
	}

	.parcel_status {
		display: flex;
		justify-content: space-around;
		margin: 35rpx 0;
	}

	.parcel_statusitem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		color: #000;
	}

	.color_block_representation {
		width: 35rpx;
		height: 35rpx;
		margin-right: 5rpx;
		border-radius: 5rpx;
	}


	.land_list {}

	.scroll-view_H {
		width: 100%;
		white-space: nowrap;
		position: relative;
		height: 350rpx;

	}

	.land_item {
		white-space: break-spaces;
		margin: 0 10rpx;
		text-align: center;
		display: inline-block;
	}

	.land_item_text {
		height: 235rpx;
		font-size: 30rpx;
		color: #fff;
		width: 68rpx;
		padding: 10rpx 7rpx;
		background-image: url('../../../static/chooseland/land.png');
		text-align: center;
		border-radius: 10rpx;
		background-size: cover;
		align-items: center;
		justify-content: center;
		display: flex;
		writing-mode: vertical-lr;
		text-orientation: upright;
		letter-spacing: 6px;

	}

	.land_item_text1 {
		height: 235rpx;
		font-size: 30rpx;
		color: #fff;
		width: 68rpx;
		padding: 10rpx 7rpx;
		background-image: url('../../../static/chooseland/land.png');
		text-align: center;
		border-radius: 10rpx;
		background-size: cover;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.land_item_title1 {
		width: 68rpx;
		align-items: center;
		justify-content: center;
		display: flex;
		padding-left: 2rpx;
		text-align: center;
	}

	.land_item_title2 {
		width: 68rpx;
		align-items: center;
		justify-content: center;
		display: flex;
		padding-left: 10rpx;
		text-align: center;
	}

	.land_item_title3 {
		width: 68rpx;
		writing-mode: vertical-lr;
		text-orientation: upright;
		letter-spacing: 4px;
		align-items: center;
		justify-content: center;
		display: flex;
		text-align: center;
	}

	.curnmk {
		width: 28rpx;
		height: 28rpx;
		border: 1rpx solid #666;
		opacity: 0.5;
		margin: 15rpx auto 0 auto;
		border-radius: 50%;
	}

	.custom_pair {
		margin-top: 15rpx;
		background: #FFF;
		border-radius: 50%;
		border-style: solid;
		border-width: 1rpx;
	}

	.custom_pair1 {
		margin-top: 15rpx;
		background: #FFF;
		border-radius: 50%;
		border-style: solid;
		border-width: 1rpx;
	}

	.custom_pair2 {
		margin-top: 15rpx;
		background: #f3f3f3;
		border: 1rpx solid #f3f3f3;
		border-radius: 50%;
	}

	.hirecycle {
		font-size: 28rpx;
		color: #333;
	}

	.parcel_selist {
		width: 100%;
	}

	.borbak {
		height: 10rpx;
		width: calc(100% + 40rpx);
		margin: 0 -20rpx;
		background-color: #fafafa;
	}

	.scroll-view_t {
		white-space: nowrap;
		width: 100%;
		margin: 25rpx 0;
	}

	.scroll_view_item {
		width: 285rpx;
		padding: 25rpx 0 0 0;
		border-radius: 15rpx;
		display: inline-block;
		margin: 0 15rpx;
		vertical-align: top;
		// border: 3rpx solid transparent;
	}

	.scroll_vem_sle {
		border-width: 5rpx;
		border-style: solid;
	}

	.scroll_vem_sle1 {
		border: 3rpx solid #ececec;
		border-width: 3rpx;
		border-style: solid;
		background: #ececec;
	}

	.title_main {
		font-size: 32rpx;
		color: #000;
	}

	.postage {
		font-size: 28rpx;
		margin: 20rpx 0;
	}

	.brief_introduction {
		color: #999;
		font-size: 26rpx;
		height: 120rpx;
		line-height: 30rpx;
		margin: 0 15rpx;
		width: calc(100% - 30rpx);
		text-align: center;
		white-space: break-spaces;
	}

	.plug_center_100 {
		width: 100%;
		text-align: center;
	}

	.price_bold {
		font-size: 34rpx;
		font-weight: 800;
	}

	.slege_navion {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		position: fixed;
		width: 90%;
		margin: 0 5%;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		padding: 15rpx 0;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		align-items: flex-end;
	}

	.operation_buttonlist {
		display: flex;
		justify-content: flex-start;
	}

	.disn_flx {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.seed_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.seed_item {
		width: 45%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 15rpx;
	}

	.seed_item_thumbnail {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.seed_item_delit {
		margin-left: 15rpx;
	}

	.seed_delit_title {
		font-size: 28rpx;
		color: #000000;
	}

	.seed_delit_yield {
		font-size: 24rpx;
		line-height: 35rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.land_details {
		margin: 0;
		padding-bottom: 20rpx;
	}

	.land_content {
		width: 100%;
	}

	.load_window {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	.bottom_fill {
		height: 150rpx;
		width: 100%;
		background: transparent;
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		// justify-content: center;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

		.page-bottom_1 {
			display: flex;
			justify-content: space-evenly;

			// margin-left: 2vh;
			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				width: 96upx;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}
		}


		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30);
			position: relative;

			// margin-right: 2vh;
			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 350rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
			}
		}
	}
	.text_area {
		.shop_name {
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.shop_thumbnail {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
	
			.right_shop_mess {
				width: calc(100% - 90rpx);
	             padding-left: 15rpx;
				.shop_line {
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					.shop_line_p1 {
						color: #1f1f1f;
						font-size: 32rpx;
						padding-left: 3rpx;
						font-weight: 300;
					}
	
					.shop_line_p2 {
						width: 100%;
						display: flex;
						align-items: center;
	
						.address {
							color: #333;
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
	
				.shop_line_fl {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 5rpx 0;
				}
	
				.right_shop_mess_p2 {
					border: 1rpx solid #cccccc;
					color: #666;
					font-size: 24rpx;
					padding: 12rpx 20rpx;
					border-radius: 40rpx;
				}
			}
		}
	}
	
	.shop_one {
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0rpx;
	
		.shop_one_1 {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.view1 {
				font-size: 28rpx;
				margin-bottom: 10rpx;
	
			}
	
			.view2 {
				font-size: 24rpx;
				color: #999999;
			}
		} 
	}
	.farm{
			 // background-color: #ffffff;
			 margin-top: 20rpx;
			 padding: 20rpx;
	}
</style>