changshu_other/other/virtual.vue

<template>
	<view class="centent">
		<back :info="info"></back>
		<view :style="{top:statusBarHeight+'px'}" class="cityicon" >{{city}}</view>
		<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 ">
			<!-- <view class="tboxbot" :style="{background: 'url('+'http://cscmp.tour-ma.com/'+el.typeImg+') no-repeat'}"
				@click="$getpage('./720sny?id='+el.link)"> -->
			<view class="tboxbot" :style="{background: 'url('+'http://cscmp.tour-ma.com/'+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 class="szra1">
			<view class="list" v-for="(el,ind) in alldata[xwwfind].list" :style="{'margin-right':ind%2==0?'0':'20rpx'}"
				v-if="ind>0" @click="$getpage('/pagesys/index/foodCard?uid='+el.uid)">
				<view class="liimg">
					<image class="szra_img" :src="$geturl(el.logo)" lazy-load="true" mode="aspectFill"></image>
				</view>
				<view class="sztitle text_overflow">{{el.name}}</view>
				<view class="sztitle text_overflow dsadk">{{el.address}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	var web = require('@/components/utils/request.js');
	export default {
		components: {
			back
		},
		data() {
			return {
				city:'720虚拟游',
				statusBarHeight: 0,
				info: {
					color: true,
					num: false,
					name:'720虚拟游'
				},
				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;
			}
		},
		// onShow(object) { //获取页面返回传递参数
		// 	this.getdata2();
		// },
		methods: {
			goto(link){
				uni.setStorageSync('linkUrl', link);
				uni.navigateTo({
					url:'./720sny'
				});
			},
			geturl(url) {
				return 'http://cscmp.tour-ma.com' + url;
			},
			ckxwwfind(ind, id) {
				this.xwwfind = ind;
			},
			getData() {
				var url = '/json/channel_get.jspx?id=' + this.id;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					if (res.statusCode == 200) {
						that.nowdata = res.data;
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			},
			getDatalist() {
				// uni.showToast({
				// 	title: '加载中...',
				// 	icon: "loading",
				// 	duration: 100000
				// });
				var url = '/json/content_list.jspx?channelIds=' + this.id + '&first=' + this.first + '&count=' + this
					.count ;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					uni.hideToast();
					if (res.statusCode == 200) {
						if (res.data.length == 0) {
							return
						}
						for (var i = 0; i < res.data.length; i++) {
							that.zslist.push(res.data[i]);
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	$url:'https://cs.tour-ma.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: 500rpx;
				position: absolute;
				z-index: -2;

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

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

				image {
					width: 100%;
					height: 400rpx;
				}
			}
		}
		.tbb{
			width: 100%;
			height: 100%;
			.tbboxs:nth-child(1)   {
			margin-top: 200rpx;
			}
		}
		.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>