Homestay_manage_app/pages/strategyDetatil/strategyDetatil.vue

<template>
	<view class="container">
		<view class="title">这里不是瑞士！是江西靖安！</view>
		<view class="time">2023-09-08 15:15:15</view>
		<rich-text class="desc" :nodes="strings"></rich-text>
		<rich-text class="desc" :nodes="strings2"></rich-text>
		<view class="tags">
			<view class="tag">#南昌周边游</view>
			<view class="tag">#江西旅游</view>
			<view class="tag">#靖安旅游</view>
			<view class="tag">#靖安民宿</view>
			<view class="tag">#民宿推荐</view>
			<view class="tag">#周末去哪玩</view>
		</view>
		<view class="imgList">
			<img v-for="(ele, index) in imgList" :key="index" mode="scpectfill" :src="ele" @click="handleImg(index)" />
		</view>

		<view class="info" @click="handleClick">
			<view class="info_left">
				<view class="left_top">
					<img src="../../static/index/hotel2.png" />
					<view class="top_info">附近 | 靖安沐光源宿</view>
					<view class="top_rate">5.0分</view>
				</view>
				<view class="left_bottom">经济型 中源乡 4.4km</view>
			</view>
			<view class="info_right">
				<img src="../../static/index/star.png" />
				2100
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			strings:
				'<div>南昌周边度假的宝藏民宿🏠享受山野间森呼吸🌿</div>                       <div>很适合逃离城市奔向大自然的快乐躺平☁</div>                             <div>阴雨绵绵也抵挡不住它的美☔</div>                                      <div>心向山野 尽请赴约🍃</div>                                            <div>一房一景 设计独特 🪐</div>                                           <div>室内有着巨大落地窗🚪</div>                                           <div>地址⛺️宜春市靖安县宁福线中源乡合港村南段组10号</div>                    <div>交通🚘南昌自驾开车约2H</div>                                         <div>风格⛱民宿是新中式生活美学的格调 非常高级还配备中餐厅、商务会议室、茶室、休闲娱乐包厢等🎞</div>                                                    <div>适合情侣、家庭自驾游玩 💕</div>',
			strings2:
				'<div>🔆附近景区游玩推荐：</div>                                           <div>北岭花海、九岭瀑布、九门楼、九岭尖云海、日出、冰雪、风车、草甸、露营、游客中心、清水平台观景、河道游船、观赏荷花、采莲、客家民俗、农俗活动及客家美食、小吃、果脯、高山滑雪、梯田等</div>',
			imgList: [
				'https://chtech.ncjti.edu.cn/hotelReservation/image/19.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/20.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/21.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/22.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/23.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/24.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/25.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/26.jpg',
				'https://chtech.ncjti.edu.cn/hotelReservation/image/27.jpg'
			]
		}
	},
	methods: {
		handleClick() {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${1363527549}`
			})
		},
		handleImg(index) {
			uni.previewImage({
				urls: this.imgList,
				current: index
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background-color: #ffffff;

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.time {
		margin: 10rpx 0 20rpx;
		color: #808080;
		font-size: 28rpx;
	}

	.desc {
		line-height: 45rpx;
		font-size: 28rpx;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin: 15rpx 0;
		font-size: 28rpx;
		color: #1e7dfb;

		.tag {
		}
	}

	.imgList {
		display: grid;
		grid-template-columns: repeat(auto-fill, 223rpx);
		gap: 10rpx;

		img {
			width: 223rpx;
			height: 223rpx;
			border-radius: 11rpx;
		}
	}

	.info {
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx 0 15rpx;
		margin: 40rpx 0 48rpx;
		width: 690rpx;
		height: 130rpx;
		border-radius: 13rpx;
		background-color: #f2f2f2;

		.info_left {
			flex: 4;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.left_top {
				display: flex;
				align-items: center;

				img {
					width: 34rpx;
					height: 34rpx;
				}

				.top_info {
					margin: 0 34rpx 0 13rpx;
					font-size: 28rpx;
				}

				.top_rate {
					font-size: 24rpx;
				}
			}

			.left_bottom {
				margin-left: 46rpx;
				color: #a6a6a6;
				font-size: 24rpx;
			}
		}

		.info_right {
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;

			img {
				width: 42rpx;
				height: 43rpx;
			}
		}
	}
}
</style>