hxj/src/pages/case/appointment/appointment.vue

<template>
	<view class="page">
		<!-- <app-nav-bar v-if="true" :fixed="true" :background-color="''" :xStyle="1" :hasMallSetting="2"
			:hasHeight="false"></app-nav-bar> -->
		<view class="swiper_cent tpbg">
			<swiper style="height: 534rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				@change="swiperChange">
				<swiper-item v-for="(item,index) in 3" :key="index" @click="gopage">
					<view style="width: 100%;height: 534rpx;position: relative;">
						<image src="https://t17.9026.com/web/statics/image/index/14.png" style="width: 100%;height: 534rpx;position: absolute;top: 0;left: 0;" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="swiper_zhishi">
				<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in 3" :key="i"></view>
			</view> -->
		</view>
		<view class="center">
			<!-- <view class="summary" >
				<view class="main-between title">
					<view class="t-omit-two hxj-title text">北欧现代质感卧室，简洁清爽，卧室拥有大面积采光，让卧室明亮起来。</view>
					<image src="https://t17.9026.com/web/statics/image/index/share.png" style="width: 33rpx;height: 33rpx;margin-top: 5rpx;"
						mode=""></image>
				</view>
				<view class="main-between gg">
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/hx.png" mode=""></image>户型
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">三室一厅两卫</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/mj.png" mode=""></image>面积
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">40m²</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/dq.png" mode=""></image>地区
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">成都</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/fg.png" mode=""></image>风格
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">北欧</view>
					</view>
				</view>
			</view> -->
			<view class="details">
				<view class="hjx-ts-34 hjx-tc-222 hjx-tw-600 hxj-mb-20">龙湖·揽镜</view>
				<view class="content hjx-tc-666 hjx-ts-26">
					<view>地址：<text class="hjx-tc-B19D60">成都市双流区天府大道南段2716号</text></view>
					<view class="content-text">
						简介：四季轮换，家已经奏响秋日之歌。让卧室从清凉过渡到温暖，在人居荟只需要几步，干净舒适的家居、收纳、陈设与柔美的色调相融合，打造魅力非凡的惬意居所。
					</view>
					<!-- <view class="content-image">
						<image src="https://t17.9026.com/web/statics/image/index/15.png" mode=""></image>
					</view>
					<view class="main-between content-goods">
						<view class="main-left desc">
							<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
							<view>
								<view class="title">兴城人居ins居家占位套餐</view>
								<view class="col">
									高级棕
								</view>
							</view>
						</view>
						<view class="priceBox main-center-y">
							<view class="hxj-price20 hjx-tc-222 hjx-tw-600"><text>￥</text>2466.00</view>
							<view class="hxj-price20 hjx-tc-999 hjx-text-decoration-line-through"><text>￥</text>3000.00
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="details">
				<view class="hjx-ts-34 hjx-tc-222 hjx-tw-600 hxj-mb-20">基本信息</view>
				<view class="content hjx-tc-666 hjx-ts-26">
					<view v-for="(item,index) in 7" :key="index" class="hxj-mb-10">物业类型：<text class="hjx-tw-600 hjx-tc-222">住宅</text></view>
					<!-- <view class="content-text">
						简介：四季轮换，家已经奏响秋日之歌。让卧室从清凉过渡到温暖，在人居荟只需要几步，干净舒适的家居、收纳、陈设与柔美的色调相融合，打造魅力非凡的惬意居所。
					</view> -->
					<view class="content-image">
						<image src="https://t17.9026.com/web/statics/image/index/15.png" mode=""></image>
					</view>
					<!-- <view class="main-between content-goods">
						<view class="main-left desc">
							<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
							<view>
								<view class="title">兴城人居ins居家占位套餐</view>
								<view class="col">
									高级棕
								</view>
							</view>
						</view>
						<view class="priceBox main-center-y">
							<view class="hxj-price20 hjx-tc-222 hjx-tw-600"><text>￥</text>2466.00</view>
							<view class="hxj-price20 hjx-tc-999 hjx-text-decoration-line-through"><text>￥</text>3000.00
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="noMake cross-center">
			<button type="default" @tap="goAppointment">立即预约</button>
		</view>
	</view>
</template>

<script>
	import appNavBar from '@/components/page-component/index/app-nav-bar.vue';
	export default {
		components: {
			appNavBar
		},
		data() {
			return {
swiperKey:0
			};
		},
		methods: {
			swiperChange(e){
				console.log(e.detail.current)
				this.swiperKey = e.detail.current
			},
			goAppointment(){
				uni.navigateTo({
					url:'/pages/case/appointment/appointment-form'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noMake{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0px 7rpx 45rpx 1rpx rgba(85, 82, 82, 0.64);
		button{
			width: 678rpx;
			height: 84rpx;
			background: #A18353;
			border-radius: 6rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.page {
		position: relative;
		min-height: 100vh;
	}

	.tpbg {
		width: 750rpx;
		height: 534rpx;
	}

	.w {
		width: 750rpx;
	}

	.center {
		width: 750rpx;
		height: auto;
		background: #F8F8F8;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 36rpx;
		margin-top: -20rpx;
		.summary {
			padding-bottom: 30rpx;
			background-color: #F8F8F8;

			.title {
				padding-bottom: 20rpx;

				.text {
					width: 579rpx;
				}
			}

			.gg {
				padding: 20rpx 0;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.item {
					width: 25%;
					height: 73rpx;
				}
			}
		}

		.details {
			// padding-top: 38rpx;

			.content {
				.content-text {
					font-size: 30rpx;
					font-weight: 500;
					line-height: 46rpx;
					padding: 15rpx 0;
				}

				.content-image {
					width: 100%;
					max-height: 738rpx;

					image {
						width: 100%;
					}
				}

				.content-goods {
					margin-top: 12rpx;
					background: #F2F2F2;

					.desc {
						width: 511rpx;
						height: 141rpx;
						border-radius: 6rpx;
						padding: 18rpx 24rpx;

						.goods-img {
							width: 101rpx;
							height: 99rpx;
							border-radius: 8rpx;
							margin-right: 21rpx;
						}

						.title {
							font-size: 26rpx;
							font-weight: 500;
							color: #222222;
							line-height: 46rpx;
						}

						.col {
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
							line-height: 46rpx;
						}
					}

					.priceBox {
						padding: 18rpx 24rpx;
					}

				}
			}
		}
	}
	.swiper_cent {
		position: relative;
		.swiper_zhishi {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			position: absolute;
			bottom: 39rpx;
	
			view {
				width: 81rpx;
				height: 4rpx;
				background: #c8c8c8;
			}
			.view_active {
				background: #f4f4f4;
			}
		}
	}
</style>