universal-wechat-uniapp-241007/pages_order/renting/rentingDetail.vue

<template>
	<view>



		<view style="width: 100vw; height: 553rpx;">
			<image style="width: 100vw; height: 553rpx;"
				src="https://pic1.ajkimg.com/display/anjuke/ea5773-%E8%83%9C%E9%80%B8%E5%9C%B0%E4%BA%A7/3b5e900e0ed231e6154759c8c885b6cc-800x650.jpg?frame=1"
				mode="scaleToFill" />
		</view>

		<view
			style="padding: 36rpx; background: #FFF; position: absolute; z-index: 1; width: calc(100vw - 72rpx); min-height: 780rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;margin-top: -20rpx;">

			<view class="t0">2400元/月</view>
			<view class="t1">整租·康卓新城 1室1卫</view>
			<view class="t2">房源编号:HC42012205JC33V</view>
			<view class="t2">今天10:33更新·浏览 168</view>

			<view class="driver"></view>

			<view class="flex-wrap xr">
				<view class="sb-w4 h70">
					<view class="font-a">南</view>
					<view class="font-b">朝向</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">60</view>
					<view class="font-b">面积</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">32层/32层</view>
					<view class="font-b">楼层</view>
				</view>
				<view class="sb-w4 h70">
					<view class="font-a">精装</view>
					<view class="font-b">装修</view>
				</view>
			</view>

			<view class="driver"></view>

			<view class="line64">
				<view class="flex-sb">
					<view class="w50">
						<span class="font-b">付款：</span>
						<span class="font-c">季付</span>
					</view>
					<view class="w50">
						<span class="font-b">电梯：</span>
						<span class="font-c">有</span>
					</view>
				</view>
				<view class="flex-sb">
					<view class="w50">
						<span class="font-b">交付：</span>
						<span class="font-c">即时交付</span>
					</view>
					<view class="w50">
						<span class="font-b">看房：</span>
						<span class="font-c">随时可看</span>
					</view>
				</view>
				<view class="flex-sb">
					<view>
						<span class="font-b">投诉：</span>
						<span class="font-c">
							<uni-icons type="phone" size="12" />
							199 1888 8888
						</span>
					</view>
				</view>
				<view class="flex-sb">
					<view>
						<span class="font-b">小区：</span>
						<span class="font-c">
							<uni-icons type="paperplane" size="12" />
							长岸江边新民小区
						</span>
					</view>
				</view>
			</view>

		</view>

		<view class="b-fiexd flex" style="height: 98rpx; z-index: 2;">
			<view style="padding-left: 20rpx;">
				<image src="/static/logo.png" class="radius80 test" />
			</view>
			<view style="padding: 12rpx 20rpx; width: 280rpx;">
				<view class="font-d">廖吃翔</view>
				<view class="font-b">新城国际花都</view>
			</view>
			<view style="padding: 20rpx" @click="clickShare()">
				<uni-icons type="redo"></uni-icons>
			</view>
			<view class="d-btn" @click="clickService">
				<span>打电话</span>
			</view>
		</view>

	</view>
</template>

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

			}
		},
		onShow() {

		},
		methods: {
			clickShare() {
				uni.share({
					provider: 'weixin',
					type: 5,
					success: (res) => {
						console.log(res);
					}
				});
			},
			clickService() {
				uni.makePhoneCall({
					phoneNumber: '10086',
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.t0 {
		font-weight: 1000;
		font-size: 32rpx;
		color: #FF0000;
		line-height: 64rpx;
	}

	.t1 {
		font-weight: bold;
		font-size: 36rpx;
		color: #3D3D3D;
		line-height: 64rpx;
	}

	.t2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #ADADAD;
		line-height: 42rpx;
	}

	.driver {
		width: 100%;
		height: 2rpx;
		background-color: #D5D5D5;
		opacity: .4;
		margin: 20rpx auto;
	}

	.xr {
		padding: 10rpx 0 20rpx;
	}

	.font-a {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		line-height: 46rpx;
		text-align: center;
	}

	.font-b {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 24rpx;
		color: #ADADAD;
		line-height: 46rpx;
	}

	.font-d {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 800;
		font-size: 28rpx;
		color: #333;
		line-height: 32rpx;
	}

	.font-c {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		font-size: 24rpx;
		color: #333;
		line-height: 46rpx;
	}


	.d-btn {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #4255E4;
		border-radius: 36rpx 36rpx 36rpx 36rpx;

		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;

		margin: 12rpx;
	}
</style>