2023/03/04

src/components/subject/projectplan/CollectiveLandAcquisition/Scommit.vue

@@ -0,0 +1,768 @@
+<template>
+	<div class="SignAcontract">
+		<div class="SignAcontract-content">
+			<div class="SignAcontract-content-right">
+				<div class="button-background" @click="control(0)"><el-button :disabled='PlacementMode==1'>上一步</el-button></div>
+				<el-steps :active="index" align-center style="width: calc(100% - 212px);">
+				  <el-step title="打印付款单" ></el-step>
+				  <el-step title="上传付款单" ></el-step>
+				  <el-step title="完成" ></el-step>
+				</el-steps>
+				<div class="button-background" @click="control(1)"><el-button>下一步</el-button></div>
+			</div>
+			<div class="SignAcontract-content-lent">
+				<div class="SignAcontract-content-lent-data" v-if="index==1">
+					<div class="button-background">
+						<el-button @click="RoomC()">打印</el-button>
+					</div>
+					<div class="contractA" id="RoomC">
+						<div class="contractA-title" style="color: #000;">
+						房屋征收补偿款领款单
+						</div>
+						<div class="contractA-name">
+							<div>
+								兹有<span>{{strpdetails.bussiness.projectName}}</span>被征收人<span>{{datahousehold.householderName}}</span>，按<span>{{datahousehold.moveBackCode}}住宅产权调换协议</span>（协议编号：<span>{{datahousehold.moveBackCode}}</span>）领取房屋征收补偿资金
+								
+								<span style="color: red;border-bottom: 1px solid red;"
+								 contenteditable v-html="datahousehold.thisPayAmount" @blur="datahousehold.thisPayAmount=$event.target.innerText"></span>
+								
+								元，大写 <span>{{transformation(datahousehold.thisPayAmount)}}</span>
+							</div>
+							<div>
+								领款人承诺:今后如其他当事人持异议时由本人负责。
+							</div>
+							<div>
+								领款人(签字):
+							</div>
+							<div>
+								领款人身份证号:
+							</div>
+							<div>
+								备注：<span></span>
+							</div>
+						</div>
+						<div class="contractA-bottom" style="margin: 4rem 0;">
+							<div style="text-indent: 2em;">
+								征收实施单位（盖章）：<span>慈溪市房屋征收所</span>
+							</div>
+							<div style="display: flex;justify-content: space-around;margin-bottom: 3rem;line-height: 2em;">
+								<div>经办人：<span>{{username}}</span></div>
+								<div style="display: flex;">日期<p style="letter-spacing: 2rem;margin: 0;">：年月日</p></div>
+							</div>
+							<div class="contractA-bottom-b" style="text-align: inherit;text-indent: 2em;">
+								注：领款人领款时应随带补偿协议、身份证。
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="Upload" v-if="index==2">
+					<div class="Upload-butom">
+						
+						<div class="Upload-butom-tow">
+								<h3>补偿款领款日期：</h3>
+								<el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
+								v-model="payDate" style="width: 250px;"></el-date-picker>
+						</div>
+						<div class="Upload-butom-ont" v-for="(item,index) in fileListindex" :key="index">
+							<div class="tc-middle-add">
+								<h3>打款凭证：</h3>
+							</div>
+							<div class="tc-middle-name">
+								<ul>
+									<li v-for="itemid in item.tree" @click="nodeClic(itemid)">
+										<i class="el-icon-error" @click.stop="deleteFile(itemid)"></i>
+										<img v-if="itemid.name.split('.').pop().toLowerCase()=='pdf'" src="../../../../assets/file-pdf.png" alt="">
+										<img v-else-if="itemid.name.split('.').pop().toLowerCase()=='png'||itemid.name.split('.').pop().toLowerCase()=='jpg'"
+										  src="../../../../assets/file-img.png" alt="">
+										<img v-else-if="itemid.name.split('.').pop().toLowerCase()=='text'" src="../../../../assets/file-excel.png" alt="">
+										<img v-else src="../../../../assets/file-other.png">
+										<div><Tooltip :text="itemid.name"></Tooltip></div>
+									</li>
+									<el-upload action='' :auto-upload="false" :headers="tokenData" :on-change="handleChang" :show-file-list="false">
+									  <li @click="selectFile()">
+									  	<div class="add">
+									  		<div class="add-top">
+									  			<span class="el-icon-plus"></span>
+									  		</div>
+									  		<div class="add-buttom">
+									  			添加文件
+									  		</div>
+									  	</div>
+									  </li>
+									</el-upload>
+								</ul>
+							</div>
+						</div>
+						<div class="Upload-butom-ont">
+							<div class="tc-middle-add">
+								<h4>情况说明：</h4>
+							</div>
+							<div class="tc-middle-name">
+								<div class="form" style="padding: 0;">
+									<el-form>
+										<el-form-item label="情况说明" label-width="130px" style="width: 100%;">
+											<el-input v-model='Reremar' type="textarea" :rows="4" placeholder="请输入情况说明"
+												style="width: 100%;"></el-input>
+										</el-form-item>
+									</el-form>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</template>
+
+<script>
+	import Tooltip from '../../../assembly/tooltip.vue'
+	export default {
+		name: "survey",
+		props: ['strpdetails','datahouseholdmax'],
+		components:{
+			Tooltip
+		},
+		data() {
+			return {
+				index:1,
+				PlacementMode:0,
+				username:'',
+				
+				uuid:'',
+				payDate:'',
+				fileListindex:[],
+				defaultOpen: require("../../../../assets/file-plus.png"),
+				defaultClose: require("../../../../assets/file-reduce.png"),
+				Reremar:'',
+				tokenData: {
+					token: window.sessionStorage.getItem('token')
+				},
+				datahousehold:{}
+			}
+		},
+		computed: {},
+		mounted() {
+			this.datahousehold=this.datahouseholdmax
+			this.getName()
+			if(!this.datahousehold.thisPayAmount){
+				this.index=1
+			}else{
+				this.index=2
+				this.getUid()
+				this.getgetexaminefile()
+			}
+		},
+		methods: {
+			
+			control(row){
+					var Positive =0
+					if(row){
+						this.index++
+						Positive =0
+					}else{
+						this.index--
+						Positive =1
+					}
+					if(this.index<=1){
+						this.index=1
+						
+					}else if(this.index==2){
+						this.addagreement(0)
+						this.getUid()
+						this.getgetexaminefile()
+					}else if(this.index>=3){
+						this.payrecord()
+						this.index=2
+					}
+			},
+			payrecord(){
+				var data={
+					id:this.uuid,
+					householdId:this.datahousehold.id,
+					payDate:this.payDate,
+					payAmount:this.datahousehold.thisPayAmount,
+					remarks:this.Reremar
+				}
+				this.$http.post('api/auth/payrecord/pay', data).then((res) => {
+					if (res.status == 200 && res.data.code == 0) {
+						// this.username = res.data.user.name
+						this.$message.success('付款成功!');
+						this.datahousehold.thisPayAmount=''
+						this.$emit('getlist',3)
+						// this.addagreement(1)
+					} else {
+						this.$message.error('失败!');
+					}
+				})
+			},
+			// 获取姓名
+			getName() {
+				this.$http.get('api/v1/pri/userInfo', null).then((res) => {
+					if (res.status == 200 && res.data.code == 0) {
+						this.username = res.data.user.name
+					} else {
+						this.$message.error('失败!');
+					}
+				})
+			},
+			addagreement(row){
+					this.$http.post('api/auth/householdcx/update',this.datahousehold).then((res) => {
+						if (res.status == 200 && res.data.code == 0) {
+							// this.agreementControl = false
+							this.datahousehold=res.data.data
+						} else {
+							this.$message.error("失败!");
+						}
+					})
+			},
+			// 数字转大写（不带单位）
+			  transformation(n){
+			    if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
+			        return "";  //判断数据是否大于0
+			    }
+			    var unit = "千百拾亿千百拾万千百拾元角分", str = "";
+			    n += "00";  
+			    var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数
+			    if (indexpoint >= 0){
+			        n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
+			    }
+			    unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
+			    for (var i=0; i < n.length; i++){
+			        str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
+			    }
+			    return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
+			  },
+			  // 获取uuid
+			  getUid(){
+			      var s = [];
+			      var hexDigits = "0123456789abcdef";
+			      for (var i = 0; i < 30; i++) {
+			      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+			      }
+			      s[14] = "4";
+			      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+			      var uuid = s.join("");
+			      this.uuid = uuid;
+			      return uuid;
+			  },
+			  // 上传文件按钮
+			  selectFile() {
+			    this.selectFileName = '3、审批后资料/5、打款凭证'+'/'+this.uuid;
+			  },
+			  // 上传文件
+			  handleChang(file) {
+			    let that = this;
+			    let formData = new FormData();
+			    formData.append('file', file.raw);
+			    formData.append('type', 2);
+			    formData.append('id', this.datahousehold.id);
+			    formData.append('destfolder', this.selectFileName);
+			    that.$http.post('api/auth/file/upload', formData).then((res) => {
+			      if (res.status == 200 && res.data.code == 0) {
+			        that.$message.success("上传文件成功!");
+			        this.getgetexaminefile();
+			      } else {
+			        that.$message.error("上传文件失败!");
+			      }
+			    });
+			  },
+			  //获取文件
+			  getgetexaminefile(){
+			  	  this.$http.get('api/auth/file/fileList?type=' + 2 + '&id=' + this.datahousehold.id, null).then((res) => {
+			  	    if (res.status == 200 && res.data.code == 0) {
+			  			this.fileListindex = res.data.list
+			  			var data=[
+			  				{name:'5、打款凭证',empty:false,type: "folder",url:'5、打款凭证',tree:[]},
+			  			]
+			  			if(this.fileListindex){
+			  				this.fileListindex.forEach((item,index)=>{
+			  					if(item.empty==false){
+									if(item.name=='3、审批后资料'){
+										item.tree.forEach((nale,ixde)=>{
+											if(nale.name=='5、打款凭证'){
+												if(nale.tree!=null&&nale.tree.length!=0){
+													nale.tree.forEach((nana,ixde)=>{
+														if(nana.name==this.uuid){
+															data[0]=nana
+														}
+													})
+												}
+											}
+										})
+									}
+			  					}
+			  				})
+			  			}
+			  			this.fileListindex=data
+			  		} else {
+			  	      this.$message.error("查找文件列表失败!");
+			  	    }
+			  	});
+			  },
+			  //删除文件
+			  deleteFile(item) {
+			  	var data = new FormData;
+			  	data.append("delFileUri", item.url);
+			  	data.append("id", this.datahousehold.id);
+			  	data.append("type", 2);
+			  	this.$confirm('确定要删除该文件吗？').then(_ => {
+			  		this.$http.post('api/auth/file/removeFile', data).then((res) => {
+			  			if (res.status == 200 && res.data.code == 0) {
+			  				this.$message.success('删除该文件成功!');
+			  				this.getgetexaminefile();
+			  			} else {
+			  				this.$message.error('删除该文件失败!');
+			  			}
+			  		})
+			  	})
+			  },
+			  nodeClic(val) {
+			    this.dataurl=''
+			    var data = new FormData;
+			    data.append("downloadFileUri", val.url);
+			    data.append("id",this.datahousehold.id);
+			    data.append("type",2);
+			    this.$http.post('api/auth/file/download', data, {responseType: 'blob'}).then((res) => {
+			      if (res.headers['content-type'] == "application/octet-stream;charset=utf-8"||res.headers['content-type'] == "application/octet-stream;charset=UTF-8") {
+			        //此处有个坑。这里用content保存文件流，最初是content=res，
+			        //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
+			        //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
+			        const content = res.data
+			        const type = {
+			          xml: 'text/xml',
+			          zip: 'application/zip',
+			          doc: 'application/msword',
+			          bin: 'application/octet-stream',
+			          exe: 'application/octet-stream',
+			          so: 'application/octet-stream',
+			          dll: 'application/octet-stream',
+			          pdf: 'application/pdf',
+			          ai: 'application/postscript',
+			          xls: 'application/vnd.ms-excel',
+			          ppt: 'application/vnd.ms-powerpoint',
+			          dir: 'application/x-director',
+			          js: 'application/x-javascript',
+			          swf: 'application/x-shockwave-flash',
+			          xhtml: 'application/xhtml+xml',
+			          xht: 'application/xhtml+xml',
+			          mid: 'audio/midi',
+			          midi: 'audio/midi',
+			          mp3: 'audio/mpeg',
+			          rm: 'audio/x-pn-realaudio',
+			          rpm: 'audio/x-pn-realaudio-plugin',
+			          wav: 'audio/x-wav',
+			          bmp: 'image/bmp',
+			          gif: 'image/gif',
+			          jpeg: 'image/jpeg',
+			          jpg: 'image/jpeg',
+			          png: 'image/png',
+			          css: 'text/css',
+			          html: 'text/html',
+			          htm: 'text/html',
+			          txt: 'text/plain',
+			          xsl: 'text/xml',
+			          mpeg: 'video/mpeg',
+			          mpg: 'video/mpeg',
+			          avi: 'video/x-msvideo',
+			          movie: 'video/x-sgi-movie',
+			          xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+			        }
+			        const blob = new Blob([content], { // 关键代码
+			          type: type[val.url.split('.').pop().toLowerCase()]
+			        }) //构造一个blob对象来处理数据
+			        this.dataurl = window.URL.createObjectURL(blob)
+			  	  this.Examine=true
+			      }
+			    });
+			  },
+			RoomC(){
+					this.$nextTick(function() {
+						//判断iframe是否存在，不存在则创建iframe
+						var iframe = document.getElementById("print-iframe");
+						var el = document.getElementById("RoomC");
+						iframe = document.createElement('IFRAME');
+						var doc = null;
+						iframe.setAttribute("id", "print-iframe");
+						iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
+						document.body.appendChild(iframe);
+						doc = iframe.contentWindow.document;
+						//这里可以自定义样式
+						doc.write(
+							'<style media="print">@page {size: auto;margin: 30mm;}.contractA{width: 100%;height: 100%;color: #000000;}span {word-break: break-all;border-bottom: 1px solid #000;min-width: 50px;display: inline-block;line-height: 3rem;text-align: center;text-indent: 0em;margin:0;line-height: 1.5rem}.contractA-title{width: 100%;text-align: center;font-size: 20px;font-weight: bolder;margin-bottom: 5mm;}.contractA-name{text-indent: 2em;line-height: 2rem;font-size: 18px;}.contractA-bottom{font-size: 18px;margin-top: 7mm;}.contractA-bottom-a{display: flex;}.contractA-bottom-a div{width: 50%;text-align: center;}.contractA-bottom-b{text-align: center;margin-bottom: 7mm;}.contractA-bottom-c{text-align: right;letter-spacing: 3rem;}</style>'
+						); //解决出现页眉页脚和路径的问题
+						doc.write('<div>' + el.innerHTML + '</div>');
+						doc.close();
+						iframe.contentWindow.focus();
+						setTimeout(function() {
+							iframe.contentWindow.print();
+						}, 50) //解决第一次样式不生效的问题
+						if (navigator.userAgent.indexOf("MSIE") > 0) {
+							document.body.removeChild(iframe);
+						}
+					})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.button-background .el-button{
+		border-radius: 5px;
+	}
+	.SignAcontract{
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		.indexbutton{
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 100%;
+			height: 100%;
+			background-color: #00000050;
+			ul{
+				position: fixed;
+				z-index: 11;
+				top: 40%;
+				left: 25%;
+				width: 50%;
+				display: flex;
+				justify-content: space-evenly;
+				li{
+					width: 100px;
+					height: 150px;
+					// background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
+					background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
+					border-radius: 20px;
+					line-height: 150px;
+					color: #fff;
+					font-size: 18px;
+					text-align: center;
+					cursor: pointer;
+					&:nth-child(2){
+						// background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
+						background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%); background-blend-mode: normal, lighten, soft-light;
+					}
+					&:nth-child(3){
+						// background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
+						background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
+					}
+				}
+			}
+		}
+		.SignAcontract-content{
+			position: fixed;
+			top: 20%;
+			right: 25%;
+			z-index: 11;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			width: 50%;
+			height: 60%;
+			.SignAcontract-content-right{
+				border-radius: 5px;
+				width: 100%;
+				height: 100px;
+				background-color: #fff;
+				display: flex;
+				justify-content: space-between;
+				padding: 20px;
+				box-sizing: border-box;
+				/deep/.is-finish{
+					color: #439dc1;
+					border-color: #439dc1;
+				}
+				/deep/.is-process{
+					color: #c0c4cc;
+					border-color: #c0c4cc;
+				}
+				/deep/.el-step{
+					// &:nth-child(1){
+					// 	flex-basis: 25% !important;
+					// 	.el-step__line{
+					// 		right: -100%;
+					// 	}
+					// }
+					// &:nth-child(2){
+					// 	flex-basis: 50% !important;
+					// 	.el-step__line{
+					// 		right: -25%;
+					// 	}
+					// }
+					// &:nth-child(3){
+					// 	flex-basis: 25% !important;
+					// }
+				}
+			}
+			.SignAcontract-content-lent{
+				width: 100%;
+				height: calc(100% - 125px);
+				background-color: #fff;
+				border-radius: 5px;
+				padding: 20px;
+				box-sizing: border-box;
+				overflow: auto;
+				& {
+					scrollbar-width: thin;
+					scrollbar-color: #c1c1c1 #eee;
+				}
+				&::-webkit-scrollbar {
+					width: 6px;
+					background-color: #eee;
+				}
+				&::-webkit-scrollbar-thumb {
+					background-color: #c1c1c1;
+					&:hover {
+						background-color: #a8a8a8;
+					}
+					&:active {
+						background-color: #787878;
+					}
+				}
+				.Upload{
+					width: 100%;
+					height: 100%;
+					.Upload-top{
+						height: 38px;
+						display: flex;
+						justify-content: space-between;
+						.button-background {
+								margin-right: 10px;
+							}
+					}
+					.Upload-butom{
+						width: 100%;
+						height: 100%;
+						// height: calc(100% - 38px);
+						.Upload-butom-tow{
+							width: 100%;
+							height: 40px;
+							display: flex;
+							h3{
+								font-size: 18px;
+								color: #439dc1;
+								line-height: 40px;
+								&::before{
+									content: "*";
+									color: #f56c6c;
+									margin-right: 5px;
+								}
+							}
+						}
+						.Upload-butom-ont{
+							width: 100%;
+							height: calc(50% -20px);
+							.tc-middle-add {
+								display: flex;
+								h3{
+									font-size: 18px;
+									color: #439dc1;
+									margin: 15px 0;
+									&::before{
+										content: "*";
+										color: #f56c6c;
+										margin-right: 5px;
+									}
+								}
+								h4{
+									font-size: 18px;
+									color: #439dc1;
+									margin: 15px 0;
+								}
+							}
+							.tc-middle-empty{
+								width: 100%;
+								img{
+									margin: 0 auto;
+									display: block;
+								}
+							}
+							.tc-middle-name{
+								width: 100%;
+								ul{
+									width: 100%;
+									display: flex;
+									li{
+										width: 100px;
+										height: 110px;
+										cursor: pointer;
+										margin: 0 10px;
+										position: relative;
+										border: 1px solid #dedede;
+										border-radius: 10px;
+										padding: 10px;
+										box-sizing: border-box;
+										&:hover{
+											i{
+												display: block;
+											}
+										}
+										i{
+											position: absolute;
+											top: -9px;
+											right: -9px;
+											color: #FF4500;
+											font-size: 25px;
+											display: none;
+										}
+										img{
+											width: 55px;
+											margin: 0 auto;
+											display: block;
+										}
+										div{
+											width: 100%;
+											display: block;
+											text-align: center;
+											color: #5e5e5e;
+											margin: 2px;
+											margin-top: 8px;
+											overflow: hidden;
+											text-overflow: ellipsis;
+											word-break: break-all;
+											font-size: 14px;
+											display: inline-block;
+											display: -webkit-box !important;
+											-webkit-line-clamp: 1;
+											-webkit-box-orient: vertical;
+											span {
+											  display: initial;
+											  white-space: break-spaces;
+											}
+										}
+										.add{
+											width: 100%;
+											height: 100%;
+											.add-top{
+												margin: 0 auto;
+												width: 80%;
+												height: 60%;
+												border: 2px dotted #c6c6c6;
+												border-radius: 5px;
+												position: relative;
+												span{
+													display: inline;
+													position: absolute;
+													top: calc(50% - 15px);
+													left:  calc(50% - 15px);
+													font-size: 30px;
+													color: #bbb;
+												}
+											}
+											.add-buttom{
+												color: #5e5e5e;
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				.SignAcontract-content-lent-data{
+					width: 100%;
+					height: 1000px;
+					span {
+						word-break: break-all;
+						border-bottom: 1px solid #000;
+						min-width: 50px;
+						display: inline-block;
+						line-height: 18px;
+						text-align: center;
+						text-indent: 0em;
+					}
+					td{
+						border-bottom: 1px solid #000;
+						border-right: 1px solid #000;
+					}
+					.contractA {
+						width: 100%;
+						height: calc(100% - 40px);
+						padding: 3%;
+						font-size: 15px;
+						box-sizing: border-box;
+						.contractA-title {
+							width: 100%;
+							text-align: center;
+							font-size: 20px;
+							font-weight: bolder;
+							margin-bottom: 1%;
+						}
+					
+						.contractA-name {
+							text-indent: 2em;
+							line-height: 2em;
+							font-size: 18px;
+						}
+					
+						.contractA-bottom {
+							margin-top: 2rem;
+							font-size: 18px;
+							.contractA-bottom-a {
+								display: flex;
+								line-height: 2rem;
+								div {
+									width: 50%;
+									text-align: center;
+								}
+							}
+					
+							.contractA-bottom-b {
+								text-align: center;
+								line-height: 2rem;
+								margin-bottom: 2rem;
+							}
+					
+							.contractA-bottom-c {
+								text-align: right;
+								letter-spacing: 2rem;
+							}
+						}
+					}
+				}
+				.toexamine{
+					height: 500px;
+				}
+			}
+		}
+	}
+	.FarmerPreferenceCss{
+		width: 100%;
+		p{
+			font-size: 16px;
+			color: #439dc1;
+		}
+		.FarmerPreferenceCss-top{
+			width: 100%;
+			
+		}
+		.FarmerPreferenceCss-buttom{
+			ul{
+				li{
+					display: flex;
+					margin: 5px 0;
+					span{
+						padding: 5px;
+					}
+					.name{
+						padding: 5px;
+						border-radius: 5px;
+						background-color: #e6a23c;
+						color: #fff;
+					}
+					.ont{
+						color: #f56c6c;
+					}
+					.tow{
+						color: #78c951;
+					}
+				}
+			}
+		}
+	}
+</style>