From 582e92615e2c281984a385a6dbb54847d6b3e438 Mon Sep 17 00:00:00 2001
From: zopewind <1147919823@qq.com>
Date: Mon, 21 Sep 2020 22:46:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A7=9F=E6=88=BF=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/rentHouse/rentDetail.css | 225 +++++++++++++++++++++++++++++++++
 pages/rentHouse/rentDetail.vue |  84 ++++++++++++
 2 files changed, 309 insertions(+)
 create mode 100644 pages/rentHouse/rentDetail.css
 create mode 100644 pages/rentHouse/rentDetail.vue

diff --git a/pages/rentHouse/rentDetail.css b/pages/rentHouse/rentDetail.css
new file mode 100644
index 0000000..382ab72
--- /dev/null
+++ b/pages/rentHouse/rentDetail.css
@@ -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;
+}
diff --git a/pages/rentHouse/rentDetail.vue b/pages/rentHouse/rentDetail.vue
new file mode 100644
index 0000000..0ee1bad
--- /dev/null
+++ b/pages/rentHouse/rentDetail.vue
@@ -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>