changshu_WeChat/subPackages/other/virtual.vue

<template>
	<view class="centent">
		<view class="topbg">
			<view class="bgjb">
				<image :src="$getimg('djcp-bg.png')"></image>
			</view>
			<view class="bgjb-jb">
				<image :src="$getimg('djcp-bg-jb.png')"></image>
			</view>
		</view>
		<view class="tbb">
			<view class="tbboxs" v-for="(el,ind) in zslist" :key="ind">
			<view class="tboxbot" :style="{background: 'url('+el.siteUrl+el.typeImg+') no-repeat'}"
				@click="goto(el.link)">
				<image :src="$getimg('720qj.png')" mode="" class="bot-img"></image>
				<view class="tbtitle">
					<view class="tbname">{{el.title}}</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:'云游常熟',
				statusBarHeight: 0,
				info: {
					color: true,
					num: false,
					name:'云游常熟'
				},
				id: 97,
				first: 0,
				count: 50,
				lmdata: [],
				alldata: [],
				xwwfind: 0,
				// dc5z497skfk,dbbz007skfz,d8fz6a7sk0k,5d0z877sk0v
				zslist:[
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://dc5z497skfk.720yun.com/t/51vk6mqbgih?scene_id=106687067","title":"沙家浜风景区 ","tagStr":"沙家浜,风景区","typeImg":"/u/cms/www/202305/2516563241wi.jpg","id":334,"url":"https://dc5z497skfk.720yun.com/t/51vk6mqbgih?scene_id=106687067","topLevel":10,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://d8fz6a7sk0k.720yun.com/t/050j5shyzk5?scene_id=21965561","title":"虞山风景区","tagStr":"虞,山风,景区","typeImg":"/u/cms/www/202305/251657029wlx.jpg","id":321,"releaseDate":"2021-09-09 13:23:49.0","sortDate":"2021-09-09 13:23:49.0","url":"https://0b3m144u1t6.720yun.com/t/050j5shyzk5?scene_id=21965561","topLevel":9,},
					// {"siteUrl":"https://qyly1.csly-travel.com/","link":"https://529m5b6u15i.720yun.com/t/dcvkub1yO8h","title":"尚湖风景区","tagStr":"尚,湖,风景区","typeImg":"/u/cms/www/202305/25165720cyrq.jpg","id":322,"releaseDate":"2021-09-09 13:24:07.0","sortDate":"2021-09-09 13:24:07.0","url":"https://529m5b6u15i.720yun.com/t/dcvkub1yO8h","topLevel":8,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://dc5z497skfk.720yun.com/t/0avk6mf908e?scene_id=106710365","title":"蒋巷乡村旅游景区","tagStr":"蒋,巷,乡村,旅游,景区","typeImg":"/u/cms/www/202305/25165736jc2o.jpg","id":335,"releaseDate":"2020-10-27 10:10:32.0","sortDate":"2020-10-27 10:10:32.0","url":"https://dc5z497skfk.720yun.com/t/0avk6mf908e?scene_id=106710365","topLevel":7,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://5d0z877sk0v.720yun.com/t/9bvkcwrwgph","title":"方塔古迹名胜区 ","tagStr":"方,塔,生态园","typeImg":"/u/cms/www/202109/091334268bqd.jpg","id":323,"releaseDate":"2021-09-09 13:24:24.0","sortDate":"2021-09-09 13:24:24.0","url":"https://c8dmf6eu1er.720yun.com/t/9bvkcwrwgph?scene_id=63708131#scene_id=63708131","topLevel":6,},
					{"siteUrl":"https://changshu.js-dyyj.com/uploads/20250711/5a10efa64cbd67061e7acd2e933e0b8f.jpg","link":"https://dc5z497skfk.720yun.com/t/dcvk6mdm77m?scene_id=107009036","title":"梅李聚沙园景区 ","tagStr":"梅,李,聚,沙,园,景区","typeImg":"","id":336,"releaseDate":"2020-10-27 10:11:11.0","sortDate":"2020-10-27 10:11:11.0","url":"https://dc5z497skfk.720yun.com/t/dcvk6mdm77m?scene_id=107009036","topLevel":5,},
					{"siteUrl":"https://changshu.js-dyyj.com/uploads/20250711/7ee4850182b5a1e55d28349078b63cd6.jpg","link":"https://dc5z497skfk.720yun.com/t/77vk6mdhzpe?scene_id=107019380","title":"古里红豆山庄景区","tagStr":"古,里,红豆,山庄,景区","typeImg":"","id":333,"releaseDate":"2020-10-27 10:07:02.0","sortDate":"2020-10-27 10:07:02.0","url":"https://dc5z497skfk.720yun.com/t/77vk6mdhzpe?scene_id=107019380","topLevel":4,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://dbbz007skfz.720yun.com/t/ecvkiyd9zry?scene_id=40156097","title":"常熟文庙","tagStr":"常熟,文庙","typeImg":"/u/cms/www/202101/131604371utp.jpg","id":337,"releaseDate":"2020-10-27 10:12:05.0","sortDate":"2020-10-27 10:12:05.0","url":"https://dbbz007skfz.720yun.com/t/ecvkiyd9zry?scene_id=40156097","topLevel":3,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://5d0z877sk0v.720yun.com/t/7evkOyfedq9","title":"燕园（灵宫殿戏楼）","tagStr":"燕园,灵,宫殿,戏楼","typeImg":"/u/cms/www/202109/09134025ec9x.jpg","id":325,"releaseDate":"2021-09-09 13:25:04.0","sortDate":"2021-09-09 13:25:04.0","url":"https://633m500u1ea.720yun.com/t/7evkOyfedq9#scene_id=53555443","topLevel":2,},
					{"siteUrl":"https://qyly1.csly-travel.com/","link":"https://dbbz007skfz.720yun.com/t/b1vkc72h72b?scene_id=64824933","title":"言子旧宅","tagStr":"言,子,旧宅","typeImg":"/u/cms/www/202305/25170115s5al.jpg","id":324,"releaseDate":"2021-09-09 13:24:46.0","sortDate":"2021-09-09 13:24:46.0","url":"https://dbbz007skfz.720yun.com/t/b1vkc72h72b?scene_id=64824933","topLevel":1,}]
			}
		},
		onLoad(options) {
			// this.getData();
			// this.getDatalist();
		},
		onReady() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		
		onPageScroll(e) {
			if (e.scrollTop > 50 && !this.info.num) {
				this.info.num = true;
			}
			if (e.scrollTop < 50 && this.info.num) {
				this.info.num = false;
			}
		},
		methods: {
			goto(link){
				uni.navigateTo({
					url: '/subPackages/webPage/webPage?url=' + link
				});
			},
			geturl(url) {
				return 'http://cscmp.tour-ma.com' + url;
			},
			ckxwwfind(ind, id) {
				this.xwwfind = ind;
			},
			getData() {
				this.Post({
					apiType: 'old',
					id: this.id
				},'/json/channel_get.jspx').then(res => {
					if (res) {
						this.nowdata = res;
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			},
			getDatalist() {
				this.Post({
					apiType: 'old',
					channelIds: this.id,
					first: this.first,
					count: this.count
				}, '/json/content_list.jspx').then(res => {
					if (res) {
						if (res.length == 0) {
							return
						}
						for (var i = 0; i < res.length; i++) {
							this.zslist.push(res[i]);
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	$url:'https://qyly1.csly-travel.com/r/cms/www/m/changshu/';
	.cityicon{
		width: calc(100% - 167rpx);
		font-size: 32upx;
		color: #FFFFFF;
		left: 80upx;
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 9999;
		height: 80rpx;
		justify-content: center;
	}
	.centent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		overflow-y: scroll;

		.topbg {
			width: 100%;
			position: relative;

			.bgjb {
				width: 100%;
				height: 350rpx;
				position: absolute;
				z-index: -2;

				image {
					width: 100%;
					height: 350rpx;
				}
			}

			.bgjb-jb {
				position: absolute;
				top: 150rpx;
				z-index: -1;
				width: 100%;

				image {
					width: 100%;
					height: 250rpx;
				}
			}
		}
		.tbb{
			width: 100%;
			height: 100%;
			.tbboxs:nth-child(1)   {
			margin-top: 50rpx;
			}
		}
		.tbboxs {
			max-width: 690upx;
			height: 449upx;
			margin: auto;
			margin: 20upx auto 5%;
			width: 90%;
			position: relative;

			.tboxbot {
				width: 100%;
				height: 100%;
				position: relative;
				background-size: 100% 100% !important;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 104, 77, 0.2);
				/* position: absolute; */
				/* top: 72rpx; */
				/* left: 50%; */
				/* margin-left: -47%; */
				border-radius: 20rpx;
				overflow: hidden;
				
				.bot-img{
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
				.tbtitle {
					width: 100%;
					height: 130rpx;
					position: absolute;
					left: 0upx;
					bottom: 0upx;

					&::before {
						content: '';
						display: inline-block;
						width: 100%;
						height: 100%;
						background: url($url+'mask.png') no-repeat;
						background-size: 100% 100% !important;
						padding-bottom: 2rpx;
					}

					.tbname {
						font-size: 36upx;
						font-weight: bold;
						margin-bottom: 16upx;
						position: absolute;
						top: 46rpx;
						left: 30rpx;
					}

					.tbinfo {
						width: 90%;
						font-size: 24upx;
						font-weight: 500;
						line-height: 1.4;
						position: absolute;
						top: 120rpx;
						left: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: flex;

						// align-items: center;
						&::before {
							content: '';
							display: inline-block;
							width: 24rpx;
							height: 28rpx;
							margin-right: 10rpx;
							background: url($url+'icon-add-da.png') no-repeat;
							background-size: 100% 100% !important;
						}
					}
				}
			}
			
		}
		
		// .szra1 {
		// 	width: 90%;
		// 	margin: 40upx auto;
		// 	display: flex;
		// 	flex-direction: row;
		// 	flex-wrap: wrap;

		// 	.list {
		// 		width: 48%;
		// 		margin-bottom: 40upx;
		// 		margin-right: 15rpx;

		// 		.liimg {
		// 			margin-bottom: 20upx;

		// 			.szra_img {
		// 				max-width: 360upx;
		// 				width: 100%;
		// 				height: 210upx;
		// 				border-radius: 8upx;
		// 			}
		// 		}

		// 		.sztitle {
		// 			font-size: 32upx;
		// 			font-weight: 600;
		// 			color: #333333;
		// 			margin-bottom: 20upx;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;
		// 			white-space: nowrap;
		// 		}

		// 		.dsadk {
		// 			font-size: 24rpx;
		// 			font-weight: 500 !important;
		// 			line-height: 1.6;

		// 			&::before {
		// 				content: '';
		// 				display: inline-block;
		// 				width: 24rpx;
		// 				height: 26rpx;
		// 				margin-right: 10rpx;
		// 				background: url($url+'icon-add-xiao.png') no-repeat;
		// 				background-size: 100% 100% !important;
		// 			}
		// 		}
		// 	}

		// }

	}
 
	
</style>