mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-23 21:36:38 +08:00
增加租房详情页
This commit is contained in:
zopewind
parent
e6eccd45a9
commit
582e92615e
225
pages/rentHouse/rentDetail.css
Normal file
225
pages/rentHouse/rentDetail.css
Normal file
@ -0,0 +1,225 @@
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
background-color: #f4f4f4;
|
||||
font-family: PingFangSC-Light, helvetica, 'Heiti SC';
|
||||
}
|
||||
|
||||
view,
|
||||
image,
|
||||
text,
|
||||
navigator {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
view,
|
||||
text {
|
||||
font-family: PingFangSC-Light, helvetica, 'Heiti SC';
|
||||
font-size: 29rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 750rpx;
|
||||
height: 417rpx;
|
||||
}
|
||||
|
||||
.banner image {
|
||||
width: 100%;
|
||||
height: 417rpx;
|
||||
}
|
||||
|
||||
.m-menu {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 0rpx;
|
||||
padding-top: 25rpx;
|
||||
}
|
||||
|
||||
.m-menu .item {
|
||||
width: 150rpx;
|
||||
height: 126rpx;
|
||||
}
|
||||
|
||||
.m-menu image {
|
||||
display: block;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.m-menu text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.rent-price {
|
||||
background: #fff;
|
||||
width=750rpx;
|
||||
padding: 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.rent-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rent-house {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.rent-pay {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.rent-right {
|
||||
float: right;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.rent-price {
|
||||
font-size: 36rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.rent-properties {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 2rpx;
|
||||
height: 150rpx;
|
||||
background: #fff;
|
||||
wight: 750rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.rent-properties-box {
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.rent-properties-title {
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
margin: 5rpx 0rpx;
|
||||
}
|
||||
|
||||
.rent-properties-type {
|
||||
font-size: 28rpx;
|
||||
margin: 15rpx 0rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rent-lable {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.rent-spec {
|
||||
padding: 20rpx 30rpx;
|
||||
margin-top: 4rpx;
|
||||
width: 750rpx;
|
||||
height: 74rpx;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.rent-contact-box {
|
||||
position: fixed:bottom:0;
|
||||
width: 750rpx;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.rent-contact-item {
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rent-contact-box button {
|
||||
border-radius: 20rpx;
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
background: #f8b551;
|
||||
height: 83rpx;
|
||||
width: 45%;
|
||||
text-align: center;
|
||||
line-height: 83rpx;
|
||||
}
|
||||
|
||||
.rent-contact-box image {
|
||||
display: block;
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.rent-contact-box text {
|
||||
font-size: 28rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rent-description {
|
||||
width: 750rpx;
|
||||
background: #fff;
|
||||
margin-top: 4rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.rent-desc-header {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.rent-summary {
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.rent-location {
|
||||
width: 750rpx;
|
||||
background: #fff;
|
||||
margin-top: 4rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.rent-location text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.rent-location map {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 20rpx;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: 20rpx;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
84
pages/rentHouse/rentDetail.vue
Normal file
84
pages/rentHouse/rentDetail.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
|
||||
<swiper-item wx:for="{{banner}}" wx:key="id">
|
||||
<block wx:if="{{item.link>0}}">
|
||||
<navigator url="/pages/goods/goods?id={{item.link}}">
|
||||
<image src="{{item.url}}" background-size="cover"></image>
|
||||
</navigator>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<image src="{{item.url}}" background-size="cover"></image>
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="rent-house">
|
||||
<view class="rent-left">
|
||||
<view class="rent-name">宝安公园旁豪华大单间</view>
|
||||
<view class="rent-pay">押二付一</view>
|
||||
</view>
|
||||
<view class="rent-right">
|
||||
<text class="rent-price">*****元/月</text>
|
||||
</view>
|
||||
<view style="clear:both;"></view>
|
||||
</view>
|
||||
<view class="rent-properties">
|
||||
<view class="rent-properties-box">
|
||||
<view class="rent-properties-title">1室0厅1卫</view>
|
||||
<view class="rent-properties-type">户型</view>
|
||||
</view>
|
||||
<view class="rent-properties-box">
|
||||
<view class="rent-properties-title">25m<sup>2</sup></view>
|
||||
<view class="rent-properties-type">面积</view>
|
||||
</view>
|
||||
<view style="padding:5rpx;">
|
||||
<view class="rent-properties-title">1/1</view>
|
||||
<view class="rent-properties-type">楼层</view>
|
||||
</view>
|
||||
<view style="padding:5rpx;">
|
||||
<view class="rent-properties-title"有</view>
|
||||
<view class="rent-properties-type">电梯</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rent-spec">
|
||||
<view class="rent-left">
|
||||
<label class="rent-lable">租房方式：</label>整租
|
||||
</view>
|
||||
<view class="rent-right"><label class="rent-lable">入住日期：</label>可立即入住</view>
|
||||
</view>
|
||||
<view class="rent-spec">
|
||||
<label class="rent-lable">房屋特色：</label>拎包入住
|
||||
</view>
|
||||
|
||||
<view class="m-menu" style="margin-top:4rpx;">
|
||||
<navigator class="item" url="/pages/category/category?id={{item.id}}" wx:for="{{channel}}" wx:key="id">
|
||||
<image src="{{item.iconUrl}}" background-size="cover"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<view style="width:750rpx;background:#fff;margin-top:4rpx;padding:20rpx 30rpx;">
|
||||
<text style="display:block;font-size:32rpx;margin-bottom:10rpx;">房源描述</text>
|
||||
<text style="font-size:24rpx;line-height:28rpx;">全新装修，品牌家电，知能操控，拎包入住，可停车，安静。全新装修，品牌家电，知能操控，拎包入住，可停车，安静。</text>
|
||||
</view>
|
||||
<view style="width:750rpx;background:#fff;margin-top:4rpx;padding:20rpx 30rpx;">
|
||||
<text style="font-size:30rpx;">房屋位置</text>
|
||||
<map style="margin-top:10rpx;" id="map" longitude="113.324520" latitude="23.099994" scale="14" style="height:200rpx;"></map>
|
||||
</view>
|
||||
<view class="rent-contact-box">
|
||||
<view class="rent-contact-item">
|
||||
<image src="/static/images/phone.png"></image>
|
||||
<text >电话咨询</text>
|
||||
</view>
|
||||
<button size="default" >预约看房</button>
|
||||
<view style="clear:both;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./rentDetail.css");
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user