hxj/src/pages/sale/properties/properties.vue

<template>
	<view class="properties_list">
		<view class="item main-left" v-for="(item,index) in 4">
			<view class="left">
				<image src="https://t17.9026.com/web/statics/image/sale/1.png" mode=""></image>
			</view>
			<view class="main-between-y right ">
				<view class="title">建业·凯旋广场</view>
				<view class="addr">成都市武侯区天府一街5号</view>
				<view class="content">洛阳建业·凯旋广场由建业（住宅）集团投资，洛阳建业凯旋置地有限公司开发...</view>
			</view>
			<image class="bg" src="https://t17.9026.com/web/statics/image/sale/properties_gradual.png" mode=""></image>
		</view>
		<view style="100rpx"></view>
		<navigator url="/pages/sale/properties/addProperties" hover-class="navigator-hover">
			<button class="addPro" type="default">添加楼盘</button>
		</navigator>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.properties_list {
		background-color: #F8F8F8;

		.item {
			font-family: PingFang SC;
			margin: 25rpx auto;
			width: 678rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			// background-image: url(https://t17.9026.com/web/statics/image/sale/properties_gradual.png);
			padding: 25rpx;
			position: relative;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 80%;
				height: 100%;
			}

			.left {
				image {
					width: 153rpx;
					height: 153rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				margin-left: 25rpx;

				.title {
					font-size: 30rpx;

					font-weight: bold;
					color: #222222;
				}

				.addr {
					font-size: 22rpx;

					font-weight: 500;
					color: #222222;
				}

				.content {
					font-size: 24rpx;

					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}

		.addPro {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #A18353;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>