|
|
|
@@ -0,0 +1,363 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div class="map_main" id="mapWrap"></div> |
|
|
|
|
|
|
|
<div class="top_address" @click="showAddress=true"> |
|
|
|
<i class="address_icon"></i> |
|
|
|
<p>羊亭</p> |
|
|
|
<p>/北上夼</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-popup v-model="show" position="bottom" :overlay="false" round> |
|
|
|
<div class="pop_main"> |
|
|
|
|
|
|
|
<div class="pop_title"> |
|
|
|
<i class="address_icon"></i> |
|
|
|
<p>羊亭镇-北上夼村</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="pop_content"> |
|
|
|
<div class="pop_content_left"> |
|
|
|
<img src="../../../static/images/plotPremises/plotPremises_icon_01.png" alt=""> |
|
|
|
<div class="pop_content_left_box"> |
|
|
|
<div> |
|
|
|
<p>农房 <span>(栋)</span></p> |
|
|
|
<p>352</p> |
|
|
|
</div> |
|
|
|
<span class="border"></span> |
|
|
|
<div> |
|
|
|
<p>可租 <span>(栋)</span></p> |
|
|
|
<p @click="showList = true,activeName='nf'">71</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pop_content_left"> |
|
|
|
<img src="../../../static/images/plotPremises/plotPremises_icon_02.png" alt=""> |
|
|
|
<div class="pop_content_left_box"> |
|
|
|
<div> |
|
|
|
<p>农地 <span>(亩)</span></p> |
|
|
|
<p>352</p> |
|
|
|
</div> |
|
|
|
<span class="border"></span> |
|
|
|
<div> |
|
|
|
<p>可租 <span>(亩)</span></p> |
|
|
|
<p @click="showList = true,activeName='nd'">71</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<van-popup v-model="showZD" closeable position="bottom" :closed="show=true" :overlay="false" round> |
|
|
|
<div class="pop_main"> |
|
|
|
|
|
|
|
<div class="pop_title"> |
|
|
|
<i class="address_icon"></i> |
|
|
|
<p>羊亭镇-北上夼村-107</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="pop_content_zd"> |
|
|
|
<img src="../../../static/images/plotPremises/plotPremises_img.png" alt=""> |
|
|
|
|
|
|
|
<div class="pop_content_zd_right"> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租地位置：</van-col> |
|
|
|
<van-col>北上夼村</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租地编号：</van-col> |
|
|
|
<van-col>310</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租地面积：</van-col> |
|
|
|
<van-col>12亩</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>咨询代表：</van-col> |
|
|
|
<van-col>张村委</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>咨询电话：</van-col> |
|
|
|
<van-col>13306310631</van-col> |
|
|
|
</van-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<van-popup v-model="showZF" closeable position="bottom" :closed="show=true" :overlay="false" round> |
|
|
|
<div class="pop_main"> |
|
|
|
|
|
|
|
<div class="pop_title"> |
|
|
|
<i class="address_icon"></i> |
|
|
|
<p>羊亭镇-北上夼村-107</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="pop_content_zd"> |
|
|
|
<img src="../../../static/images/plotPremises/plotPremises_img.png" alt=""> |
|
|
|
|
|
|
|
<div class="pop_content_zd_right"> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租房位置：</van-col> |
|
|
|
<van-col>北上夼村</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租房编号：</van-col> |
|
|
|
<van-col>310</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>租房面积：</van-col> |
|
|
|
<van-col>12亩</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>咨询代表：</van-col> |
|
|
|
<van-col>张村委</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row type="flex" justify="space-between"> |
|
|
|
<van-col>咨询电话：</van-col> |
|
|
|
<van-col>13306310631</van-col> |
|
|
|
</van-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<van-popup v-model="showList" closeable position="right" :closed="show=true" :overlay="false" round :style="{ width: '45%' , height: '60%' , background:'#ffffff' }"> |
|
|
|
<div class="pop_main_right"> |
|
|
|
|
|
|
|
<p class="pop_title" :style="{color:activeName=='nf'?'#1B65F8':'#FF7321'}">{{activeName=='nf'?'待租农房':'待租农地'}}</p> |
|
|
|
|
|
|
|
<div class="pop_content_right"> |
|
|
|
<van-row> |
|
|
|
<van-col span="8" offset="4">编号</van-col> |
|
|
|
<van-col span="9" offset="3">面积</van-col> |
|
|
|
</van-row> |
|
|
|
<van-row v-for="(item,index) in 20" |
|
|
|
@click="listChange(index)" |
|
|
|
:class="{ active: selectChooseOrder == index }" |
|
|
|
> |
|
|
|
<van-col span="8" offset="4">101</van-col> |
|
|
|
<van-col span="9" offset="3">3亩</van-col> |
|
|
|
</van-row> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="pop_btn_right"> |
|
|
|
<p :style="{background:activeName=='nf'?'#1B65F8':'',color:activeName=='nf'?'#ffffff':''}" @click="tabChange('nf')">农房</p> |
|
|
|
<p :style="{background:activeName=='nd'?'#FF7321':'',color:activeName=='nd'?'#ffffff':''}" @click="tabChange('nd')">农地</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<van-popup v-model="showAddress" position="bottom" round> |
|
|
|
<van-picker show-toolbar title="村镇选择" :columns="columns" /> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import $ from "jquery"; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
show:true, |
|
|
|
showZD:false, |
|
|
|
showZF:false, |
|
|
|
showList:false, |
|
|
|
showAddress:false, |
|
|
|
activeName:'nf', |
|
|
|
selectChooseOrder:-1, |
|
|
|
columns: [ |
|
|
|
{ |
|
|
|
text: '浙江', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
text: '杭州', |
|
|
|
children: [{ text: '西湖区' }, { text: '余杭区' }], |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '温州', |
|
|
|
children: [{ text: '鹿城区' }, { text: '瓯海区' }], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '福建', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
text: '福州', |
|
|
|
children: [{ text: '鼓楼区' }, { text: '台江区' }], |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '厦门', |
|
|
|
children: [{ text: '思明区' }, { text: '海沧区' }], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
tabChange(name){ |
|
|
|
this.activeName = name; |
|
|
|
}, |
|
|
|
listChange(id){ |
|
|
|
this.selectChooseOrder = id; |
|
|
|
this.show = false; |
|
|
|
this.showZF = false; |
|
|
|
this.showZD = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.home_wrapper { |
|
|
|
background: #e9e9e9; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
} |
|
|
|
.map_main{ |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center; |
|
|
|
background-size: 100%; |
|
|
|
} |
|
|
|
/deep/ .van-popup{ |
|
|
|
background: #F1F0F5; |
|
|
|
} |
|
|
|
/deep/ .van-popup--right{ |
|
|
|
top: 35%; |
|
|
|
} |
|
|
|
.top_address{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
position: absolute; |
|
|
|
top: 5vh; |
|
|
|
left: 3vw; |
|
|
|
padding: 1vh 2vh; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 5vh; |
|
|
|
p{font-size: 1.5vh} |
|
|
|
} |
|
|
|
.address_icon { |
|
|
|
width: 13PX; |
|
|
|
height: 17PX; |
|
|
|
background: url("../../../static/images/plotPremises/positioning.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 1vw; |
|
|
|
} |
|
|
|
.pop_main{ |
|
|
|
padding: 2vh 3vw; |
|
|
|
.pop_title{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 2.2vh; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
.pop_content{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 2vh; |
|
|
|
.pop_content_left{ |
|
|
|
background: #ffffff; |
|
|
|
width: 48%; |
|
|
|
padding: 1.5vh 3vw; |
|
|
|
border-radius: 15PX; |
|
|
|
.pop_content_left_box{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: .5vh; |
|
|
|
.border{ |
|
|
|
border-left: 2PX dashed #DFDFDF; |
|
|
|
} |
|
|
|
div{ |
|
|
|
p{ |
|
|
|
&:first-child{ |
|
|
|
font-size: 2vh; |
|
|
|
color: #797979; |
|
|
|
span{ |
|
|
|
font-size: 1.5vh; |
|
|
|
} |
|
|
|
} |
|
|
|
&:last-child{ |
|
|
|
font-size: 3vh; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
} |
|
|
|
&:last-child{ |
|
|
|
p:last-child{ |
|
|
|
color: #1B65F8; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.pop_content_zd{ |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 15PX; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 2vh; |
|
|
|
overflow: hidden; |
|
|
|
img{width: 40%;} |
|
|
|
.pop_content_zd_right{ |
|
|
|
width: 60%; |
|
|
|
padding:1.5vh 2.5vh; |
|
|
|
font-size: 1.8vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.pop_main_right{ |
|
|
|
|
|
|
|
.pop_title{ |
|
|
|
font-size: 2.2vh; |
|
|
|
color: #1B65F8; |
|
|
|
padding: 1.5vh; |
|
|
|
} |
|
|
|
|
|
|
|
.pop_content_right{ |
|
|
|
font-size: 1.8vh; |
|
|
|
height: 48vh; |
|
|
|
overflow-y: scroll; |
|
|
|
.active{ |
|
|
|
box-shadow:0px 0px 5px #999999; |
|
|
|
} |
|
|
|
.van-row{ |
|
|
|
padding: 1vh 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pop_btn_right{ |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
p{ |
|
|
|
padding: 1.5vh 0; |
|
|
|
text-align: center; |
|
|
|
font-size: 2vh; |
|
|
|
flex: 1; |
|
|
|
background: #E1E0E4; |
|
|
|
color: #9F9F9F; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
