You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
5.8 KiB
176 lines
5.8 KiB
<template>
|
|
<view>
|
|
<view class="se-px-40 se-py-20">
|
|
<view class="se-bgc-white se-br-50 se-c-black se-px-20 se-py-5 se-flex se-flex-h-sb se-fs-26">
|
|
<view class="se-b-r se-pl-10 se-pr-20 se-flex se-flex-h se-h-40 se-lh-40 " @click="handleAreaChange()">
|
|
<text class="se-pr-20 nobreak">{{city}}</text>
|
|
<uv-icon name="arrow-down-fill"></uv-icon>
|
|
</view>
|
|
<view class="se-ml-20">
|
|
<uv-search :showAction="false" bgColor="transparent" placeholder="请输入租房信息" v-model="keyword"></uv-search>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="backdrop se-mb-20">
|
|
<image class="se-w-vw-100 se-h-400" src="@/static/image/banner.png" mode=""></image>
|
|
</view>
|
|
<view class="se-grid se-bgc-white se-py-30 se-mt-300">
|
|
<navigator url="/pages_subpack/category/index" v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-mb-20">
|
|
<image class="se-a-100 se-br-20" :src="item.img" mode=""></image>
|
|
<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
|
|
</navigator>
|
|
<!-- <view v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-mb-20" @click="onNav">
|
|
<image class="se-a-100 se-br-20" :src="item.img" mode=""></image>
|
|
<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
|
|
</view> -->
|
|
</view>
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-24">
|
|
<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
|
|
<text class="se-ml-10">今日有20套租房信息新发布....</text>
|
|
</view>
|
|
<view class="se-bgc-white se-my-20">
|
|
<uv-tabs :list="list" :activeStyle="{color:'#000000'}" :inactiveStyle="{color:'#666666'}" :lineColor="`url(${lineBg}) 100% 100%`"></uv-tabs>
|
|
</view>
|
|
<view class="se-pb-200">
|
|
<view @click="onDetail(item)" class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex" v-for="(item,index) in 20" :key="index">
|
|
<view class="se-pos se-w-260 se-h-180">
|
|
<image class="se-a-80 se-pos-lt" src="../../static/image/2x.png" mode=""></image>
|
|
<image class="se-w-260 se-h-180 se-br-10" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
|
|
</view>
|
|
<view class="se-pl-10 se-w-p-100">
|
|
<view class="se-c-black se-fs-28">
|
|
整租·四季峰景四期 2室2厅1卫
|
|
</view>
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
|
|
<text>精装修</text>
|
|
<text>1年</text>
|
|
</view>
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
|
|
<view class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5">
|
|
全新首租
|
|
</view>
|
|
<view class="se-c-66 se-flex se-flex-ai-c">
|
|
<uv-icon name="eye"></uv-icon>
|
|
<text class="se-ml-5 se-fs-18">999+</text>
|
|
</view>
|
|
</view>
|
|
<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
|
|
<text class="se-c-red se-fs-28 se-fw-6">￥1500元/月</text>
|
|
<text class="se-c-66 se-fs-22">四季峰景四期</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 地址 -->
|
|
<citySelect ref="citySelectRef" :zIndex="0" @city-change="handleCityChange"></citySelect>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import citySelect from "@/components/cityselect/index.vue"
|
|
import { fetchMenu } from '@/common/api.js';
|
|
const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAANCAYAAAC3mX7tAAAAAXNSR0IArs4c6QAAAbxJREFUOE+lk0FrE1EUhc+ZDOhMigjZdNcWdCPJqNCdlkZw4TKL2mVwkKLQ/gAFRcEu/AEKuumDrEopNEsXSlNoV+2iTYIbBdNdNwGpmRmFyVx5oQk6mYSpvt1799z7zTnvDQPlBAJcRGxZOLXotn7Gz8ftZePaROCZP+IaEh36a04LxFS8mMmgcKFcb54H9Kvi5LtdNIZ6BMf0lVMDMD88UJ7abuP1eUDeWuEZyVcJPZ/oKeclgRcJxRMrG17l4udOGthZbF8ATMb1IvKcXiU/y66xnziM2LQf1O+nAfnq+hYgpSStCeMmdcFXzi6AWyMGrlvZcGmUs54T31QQLIzo37Pd+u0eKFD5osDYHvPlJyLyNopYnbgUtrSuc2pOG4aUSC4nxTWYFXHOfni02wPp5anCO4KP0sSUViOQ91m38VjrByDZLprBt/ZHkAkvMO3oP3QiO9ZM7i7v1MK/QHoj6sblQLrV/4ZpCDMluoff++iBo/6Bdua32m/+NUYdlz2dW+k7GQnqF84eyOqY1xjPcw8Rn+iLTwp6yFFcpP8zhLxHsgjBFRrI9WKO0AbxVURqMOVDttw8GHeTvwFKoZ4cmcUYJAAAAABJRU5ErkJggg==";
|
|
export default{
|
|
components:{
|
|
citySelect
|
|
},
|
|
data(){
|
|
return{
|
|
city:"长沙市",
|
|
keyword:"",
|
|
lineBg: lineBg,
|
|
|
|
nav:[
|
|
{
|
|
img:"../../static/image/nav1.png",
|
|
name:"闲置散居农房"
|
|
},
|
|
{
|
|
img:"../../static/image/nav2.png",
|
|
name:"集体建设用地"
|
|
},
|
|
{
|
|
img:"../../static/image/nav3.png",
|
|
name:"鱼塘"
|
|
},
|
|
{
|
|
img:"../../static/image/nav4.png",
|
|
name:"林地"
|
|
},
|
|
{
|
|
img:"../../static/image/nav5.png",
|
|
name:"经营性建设用地"
|
|
},
|
|
{
|
|
img:"../../static/image/nav6.png",
|
|
name:"耕地"
|
|
},
|
|
{
|
|
img:"../../static/image/nav7.png",
|
|
name:"出租房"
|
|
},
|
|
{
|
|
img:"../../static/image/nav8.png",
|
|
name:"二手房"
|
|
}
|
|
],
|
|
list: [
|
|
{
|
|
name: '近期热销'
|
|
}, {
|
|
name: '城市'
|
|
}, {
|
|
name: '分区'
|
|
}, {
|
|
name: '闲置资源分类'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getHttpData()
|
|
},
|
|
methods:{
|
|
getHttpData() {
|
|
const res = fetchMenu();
|
|
console.log(res)
|
|
},
|
|
handleAreaChange(){
|
|
this.$refs.citySelectRef.open()
|
|
},
|
|
handleCityChange(e) {
|
|
console.info(e)
|
|
this.city = e.city.label
|
|
// this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
|
},
|
|
onDetail(event){
|
|
uni.navigateTo({
|
|
url:"/pages_subpack/detail/index"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
.se-grid{
|
|
border-top-right-radius: 50rpx;
|
|
border-top-left-radius: 50rpx;
|
|
}
|
|
.backdrop{
|
|
width: 750rpx;
|
|
height: 350rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
/* border-radius: 0 0 14% 14%; */
|
|
}
|
|
.nobreak {
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|