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,
				zslist:[]
			}
		},
		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>