|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <view class="product">
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item" @click="godetails">
|
|
|
+ <view class="product-box">
|
|
|
+ <view class="product-img">
|
|
|
+ <image src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5" mode="aspectFill"></image>
|
|
|
+ <view class="floor">
|
|
|
+ <view class="floor-box">
|
|
|
+ <uni-icons type="location" color="#fff" size="12"></uni-icons>
|
|
|
+ 1号楼-一层
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info">
|
|
|
+ <view class="title"><text>房源名称</text></view>
|
|
|
+ <view class="other">
|
|
|
+ <text>120m²</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签1</text>
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text>标签2</text>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-box">
|
|
|
+ <text>120</text>
|
|
|
+ <view class="price-text">元/月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "house",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ productList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 详情
|
|
|
+ godetails() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/houseDetail/houseDetail'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .product {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+
|
|
|
+ .product-item {
|
|
|
+ width: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-item:nth-child(2n-1) {
|
|
|
+ padding-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-item:nth-child(2n) {
|
|
|
+ padding-left: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-box {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-img {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-img image {
|
|
|
+ width: 100%;
|
|
|
+ height: 260rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-box {
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor .iconfont {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-info {
|
|
|
+ padding: 10rpx 0 20rpx 0;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ color: #aaa;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ color: red;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box .price-text {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 24rpx;
|
|
|
+ scale: 0.9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|