<template>
	<view class="content">
		<view class="ystitle">
			<view :class="['dhl',ishowb?'':'nactive']" :style="{'padding-top':statusBarHeight+'px'}">
				<view class="top">
					<view class="tianqi" @click="$getpage('/other/tianqi')">
						<image mode="aspectFit" :src="$gettqimg(weather.allData.HeWeather6[0].now.cond_code)"></image>
						{{weather.data.now}} {{weather.data.weather}}
					</view>
					<view class="sskuang" @click="$getpage('/other/allSearch')">
						<image v-if="ishowb" class="sstb" :src="$getimg('icon-ssxinxgss.png')" mode="aspectFill">
						</image>
						<image v-else class="sstb" :src="$getimg('icon-ssxinxgss1.png')" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<swiper class="swiper" :autoplay="true" :interval="3500" :circular="true" :indicator-dots="true"
				:indicator-color="'rgba(255, 255, 255, 0.4)'" :indicator-active-color="'rgba(255, 255, 255, 1)'">
				<!-- 轮播 -->
				<swiper-item v-for="(bannerel,bannerind) in bannerdatas">
					<image :src="$geturl(bannerel.typeImg)" mode="" class="ystitleimg"></image>
					<view class="bantext">
						<view class="bantitle">{{bannerel.title}}</view>
						<view class="banms">{{bannerel.description}}</view>
					</view>
				</swiper-item>
			</swiper>
			<image :src="$getimg('ysxcx-banner-yy.png')" mode="" class="ystitlebjimg"></image>

		</view>
		<view class="yscenter">
			<view class="yscenterytt">
				<view class="yscenteryttleft" @click="$getpage('/other/detailList')">
					<image :src="$getimg('ysxcx-img-tz.png')" mode="" class="yscenteryttimg"></image>
				</view>
				<view class="yscenteryttright">
					<swiper class="swiper" :autoplay="true" :vertical="true" :interval="2000" :circular="true">
						<swiper-item v-for="(el,ind) in ysttData" @click="$getpage()">
							<view class="gonggao">
								<view class="yscenteryttrightname" @click="$getpage('/other/public?id='+el.id)">
									{{el.title}}
								</view>
								<view class="yscenteryttrightmore" @click="$getpage('/other/detailList')">
									查看更多
									<image :src="$getimg('ysxcx-icon-jt1.png')" mode="" class="yscenteryttrightimg">
									</image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="ysbtall">
				<view class="ysbtlist" v-if="ind<2" v-for="(el,ind) in ystopData" :key="ind" @click="$getpage(el.url)">
					<image :src="$getimg(el.img)" mode="" class="ysbtlistimg"></image>
					<view class="ysbtlistname">{{el.name}}</view>
				</view>
				<view class="ysbtlist" v-if="ind>1" v-for="(el,ind) in ystopData" :key="ind" @click="touziyd(el.appId,el.path)">
					<image :src="$getimg(el.img)" mode="" class="ysbtlistimg"></image>
					<view class="ysbtlistname">{{el.name}}</view>
				</view>
			</view>

			<view class="ysbtall cstopData">
				<view class="liest" v-for="(el,ind) in cstopData">
					<view class="ysbtlist" v-if="ind!=2"  :key="ind" @click="$getpage(el.url)">
						<image :src="$getimg(el.img)" mode="" class="ysbtlistimg"></image>
						<view class="ysbtlistname">{{el.name}}</view>
					</view>
					<view class="ysbtlist" v-if="ind==2" :key="ind" @click="touziyd(el.appId,el.path)">
						<image :src="$getimg(el.img)" mode="" class="ysbtlistimg"></image>
						<view class="ysbtlistname">{{el.name}}</view>
					</view>
				</view>
			</view>

			<!-- 旅游助手 -->
			<view class="">
				<view class="contitimg">
					<image :src="$getimg('title-lyzs.png')" mode="" class="img"></image>
				</view>
				<view class="lyzs">
					<view class="lyzs-left">
						<view class="lyzs-left-top" @click="$getpage('/other/foodList')">
							<image :src="$getimg('img-meis@2x.png')" mode="aspectFill" lazy-load="true"></image>
							<view class="lyzs-title">
								<view class="tb_name">街巷美食</view>
								<view class="tb_type">畅享常熟美味</view>
							</view>
						</view>
						<view class="lyzs-left-bottom" @click="$getpage('/pages/dydl')" >
							<image :src="$getimg('img-dydl.png')" mode="aspectFill" lazy-load="true"></image>
							<view class="lyzs-title">
								<view class="tb_name">导游导览</view>
								<view class="tb_type">立即出发</view>
							</view>
						</view>
					</view>
					<view class="lyzs-left">
						<view class="lyzs-left-top" v-for=" (el,ind) in zslist" :key="ind" @click="$getpage(el.url)">
							<image :src="$getimg(el.img)" mode="aspectFill" lazy-load="true"></image>
							<view class="lyzs-title">
								<view class="tb_name">{{el.name}}</view>
								<view class="tb_type">{{el.ename}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 主题线路 -->
			<view class="">
				<view class="contitimg">
					<image :src="$getimg('title-ztlx.png')" mode="" class="img"></image>
				</view>
				<view class="ztxl">
					<view class="ztxl_jj">
						<view class="ztxl_jj_top">
							<view class="jj_top" v-for="(el,ind) in ztimg" @click="qh(ind)">
								<image v-if="ind == allind" :src="$getimg(el.img)"  mode="aspectFill" class="img1"></image>
								<image v-else :src="$getimg(el.icon)"  mode="aspectFill" class="img2"></image>
							</view>
						</view>
					</view>
					<view class="ztxl_js">
						{{ztrj[allind].name}}
					</view>
					<view class="ztxl_list" v-for="(el,ind) in datas" :key="el.id" v-if="ind<3" @click="$getpage('/other/gftjedit?id='+el.id)">
						<view class="list_left">
							<image :src="$geturl(el.typeImg)" mode="" class="audio-uim"></image>
							<view class="list_tip">
								<text class="tip_name">{{el.browse}}</text>人已浏览
							</view>
						</view>
						<view class="list_right">
							<view class="right_name">{{el.journeyName}}</view>
							<view class="right_name_name">
								{{el.feature}}
							</view>
							<!-- <view class="lbrli">
								<view class="lbrliind" v-for="(el1,ind1) in el.scapeType">{{el1}}</view>
							</view> -->
						</view>
					</view>
					<view class="sz6mo" @click="$getpage('/other/theme')">查看更多</view>
					<!-- <view class=""></view> -->
				</view>
			</view>


			<!-- 公共服务 -->
			<view class="gonggfw">
				<view class="contitimg">
					<image :src="$getimg('ggfw.png')" mode="" class="img"></image>
				</view>
				<view class="fwcon">
					<view class="fwlist" v-if="ind!=4"  v-for="(el,ind) in gonggfwData" :key="ind"   @click="$getpage(el.url)">						
						<image :src="$getimg(el.img)" mode="" class="fwlistimg"></image>
						<view class="ggfwtext">
							<view class="fwlistname">{{el.name}}</view>
							<view class="fwlistdes">{{el.des}}</view>
						</view>
					</view>
					<view class="fwlist" v-if="ind==4"  v-for="(el,ind) in gonggfwData" :key="ind"  @click="touziyd(el.appId,el.path)">
						<image :src="$getimg(el.img)" mode="" class="fwlistimg"></image>
						<view class="ggfwtext">
							<view class="fwlistname">{{el.name}}</view>
							<view class="fwlistdes">{{el.des}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 线上商城 -->
			<view class="xianssc">
				<view class="contitimg">
					<image :src="$getimg('title-xssc.png')" mode="" class="img"></image>
				</view>
				<view class="sccon">
					<view class="sclist" v-for="(el,ind) in xiansscData" :key="ind" @click="touziyd(el.appId,el.path)">
						<image :src="$getimg(el.img)" mode="" class="sclistimg"></image>
						<view class="sclistname">{{el.name}}</view>
					</view>
					<!-- <view class="sz6mo" @click="$getpage()">查看更多</view> -->
				</view>
			</view>

			<!-- 热门活动 -->
			<view class="xianssc">
				<view class="contitimg contitimg-fjd">
					<image :src="$getimg('title-rmhd.png')" mode="" class="img"></image>
				</view>
				<!-- <view class="sccon boxcon">
					<view class="sccon_left"  @click="$getpage('/other/festival')">
						<view class="sccon_top">
							<image :src="$getimg('img-djhd.png')" mode="" class="top-img"></image>
							<image :src="$getimg('img-cgyd.png')" mode=""></image>
						</view>
						<view class="sccon_bottom">
							<view class="sccon_bottom_name">阅山轩假日休闲酒店</view>
							<view class="sccon_bottom_jkh">
								<text class="bottom_jkh">活动价</text>
								<text class="bottom_jkh1">￥</text>
								<text class="bottom_jkh2">398</text>
								<text class="bottom_jkh3">640</text>
							</view>
						</view>
					</view>
					<view class="sccon_right">
						<view class="sccon-top">
							<view class="sccon-top-tk">限时特惠</view>
							<view class="sccon-top-qg">超值抢购</view>
						</view>
						<view class="sccon-bottom">
							<view class="sccon-bottom-li" v-for="(el,ind) in xslist " key="ind">
								<image class="li-img" :src="$getimg(el.img)" mode=""></image>
								<view class="li-li">
									<view class="li-li-name">{{el.name}}</view>
									<view class="li-li-title">
										￥ <text class="li-kl"> {{el.num}}</text>
										<text class="li-kk">起</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				
				<view class="sccon boxcon">
					<view class="sccon_left"  @click="xiansth()">
						<image :src="$getimg('cs-jjhd01.png')" mode="scaleToFill" class="img"></image>
					</view>
					<view class="sccon_right" @click="jieqhd()">
						<image :src="$getimg('cs-jjhd02.png')" mode="scaleToFill" class="img"></image>
					</view>
				</view>
			</view>

		</view>


		<tabBar :info="info"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/html/tabBar.vue';
	var web = require('@/components/utils/request.js');
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				info: {
					ind: 0,
					scr: false
				},
				weather: {
					"data": {
						"date": " ",
						"now": " ",
						"weather": " ",
					},
					// allData.HeWeather6[0].now.cond_code
					"allData": {
						"HeWeather6": [{
							"now": {
								cond_code: ''
							},
							"daily_forecast": [{
								"cond_code_d": " ",
								"cond_code_n": " ",
								"date": " ",
							}],
						}]
					}
				},
				statusBarHeight: 0,
				x: 500,
				y: 500,
				ishowb: true,

				bannerdatas: [], //首页banner图
				ysttData: [], //通知公告
				ystopData: [{
						id: 1,
						name: '景点门票',
						img: 'icon-jdmp.png',
						url: '/other/scenic'
					},
					{
						id: 2,
						name: '酒店民宿',
						img: 'icon-jdms.png',
						url: '/other/hotel'
					},
					{
						id: 3,
						name: '虞城手礼',
						img: 'icon-ycsl.png',
						url: '',
						appId:'wxa09d35bb32b454c0',
						path:'packages/home/feature/index?alias=6bth3jpNwK&banner_id=f.94939801~image_ad.5~8~KdugXu97&components_style_show_method=7'
					},
					{
						id: 4,
						name: '研学常熟',
						img: 'icon-yxcs.png',
						url: '',
						appId:'wxa09d35bb32b454c0',
						path:'packages/home/feature/index?alias=V4fhzDKjeA&banner_id=f.94939801~image_ad.4~1~y6qAHwfc&components_style_show_method=7'
					},
				],
				cstopData: [{
						id: 1,
						name: '预约预订',
						img: 'icon-yyyd.png',
						url: '/pages/tab/index/index'
					},
					{
						id: 2,
						name: '主题线路',
						img: 'icon-ztlx.png',
						url: '/other/theme'
					},
					{
						id: 3,
						name: '年卡办理',
						img: 'icon-nkbl.png',
						url: '',
						appId:'wxcc56584b30a08d33',
						path:'pages/travelCard/cardList'
					},
					{
						id: 4,
						name: '非遗民俗',
						img: 'icon-yyyc.png',
						url: '/other/feiyi'
					},
					{
						id: 5,
						name: '夜游虞城',
						img: 'icon-fyms.png',
						url: './map'
					},
				],
				gonggfwData: [ //公共服务
					{
						id: 1,
						name: '找停车位',
						des: '立即查找',
						img: 'ggfw-icon01.png',
						url: './fjtcc?isyy=1'
					},
					{
						id: 2,
						name: '找厕所',
						des: '立即查找',
						img: 'ggfw-icon02.png',
						url: './fjtcc?isyy=2'
					},
					{
						id: 3,
						name: '公共交通',
						des: '便民出行',
						img: 'ggfw-icon03.png',
						url: '/other/gonggjt'
					},
					{
						id: 4,
						name: '咨询投诉',
						des: '官方通道',
						img: 'ggfw-icon04.png',
						url: '/other/consulting'
					},
					{
						id: 5,
						name: '投资引导',
						des: '产业政策',
						img: 'ggfw-icon05.png',
						url: '',
						appId:'wxcb021378e2a96647',
						path:'pages/home/index',
					},
					{
						id: 6,
						name: '舒适度指数',
						des: '舒适',
						img: 'ggfw-icon06.png',
						url: '/other/shusd'
					},
				],
				xiansscData: [ //线上商城
					{
						id: 1,
						name: '景区景点',
						img: 'xssc-icon01.png',
						url: '',
						appId:'wx408ea534cb79567e',
						path:'pages/webView/webView?url=https%3A%2F%2Fm.lvmama.com%2FlegoFront%3FtemplateId%3D739%26appDegrade%3D1%26hideAppHeader%3D1%26wxxcx%3Dzonghe%26isHideDB%3D1%26isHideHeader%3D1%26lvsessionid%3D82f51d25-6381-4c20-af29-4aeab25d54c4'
					},
					{
						id: 2,
						name: '常熟美食',
						img: 'xssc-icon02.png',
						url: '',
						appId:'wxa09d35bb32b454c0',
						path:'packages/home/feature/index?alias=UknAb0tqqu&banner_id=f.94939801~image_ad.4~4~y6qAHwfc&components_style_show_method=7'
					},
					{
						id: 3,
						name: '虞城手礼',
						img: 'xssc-icon03.png',
						url: '',
						appId:'wxa09d35bb32b454c0',
						path:'packages/home/feature/index?alias=6bth3jpNwK&banner_id=f.94939801~image_ad.5~8~KdugXu97&components_style_show_method=7'
					},
					{
						id: 4,
						name: '酒店住宿',
						img: 'xssc-icon04.png',
						url: '',
						appId:'wx408ea534cb79567e',
						path:'pages/webView/webView?url=https%3A%2F%2Fm.lvmama.com%2FlegoFront%3FtemplateId%3D739%26appDegrade%3D1%26hideAppHeader%3D1%26wxxcx%3Dzonghe%26isHideDB%3D1%26isHideHeader%3D1%26lvsessionid%3D82f51d25-6381-4c20-af29-4aeab25d54c4'
					},
				],
				xslist: [{
					img: 'banner.png',
					name: '山塘人家（书...',
					num: 209,
				}, {
					img: 'img-cgyd.png',
					name: '望虞台美食汇...',
					num: 439,
				}, {
					img: 'banner.png',
					name: '老街口·创意菜...',
					num: 131,
				}],
				zslist: [{
					img: 'img-xny.png',
					name: '虚拟游',
					ename: '让您身临其境',
					url:'/other/virtual'
				}, {
					img: 'img-yjgl.png',
					name: '精品美游',
					ename: '为您出行提供帮助',
					url:'/other/travelogue'
				}, {
					img: 'img-cgyd.png',
					name: '场馆预约',
					ename: '在线预约，便捷高效',
					url:'/pages/tab/index/index'
				}],
				allind:0,
				ztimg: [{
					img: 'chun-xz.png',
					icon: 'chun.png',
					ind:1
				}, {
					img: 'xia-xz.png',
					icon: 'xia.png',
					ind:2
				}, {
					img: 'qiu-xz.png',
					icon: 'qiu.png',
					ind:3
				}, {
					img: 'dong-xz.png',
					icon: 'dong.png',
					ind:4
				}],
				datas: [],
				pageNo: 1,
				totalPage: 1,
				ztrj:[
					{name:'	常熟的春天，芬芳无比。一年中最浪漫的时光已经到了，和煦的东风一拂面，万物生长，草芽也冒出了地面，油菜花、桃花、樱花纷纷登场。到哪儿寻找春天的影子呢？春风十里，我在常熟等你！'},
					{name:'常熟的夏天是缤纷多彩的，每一种颜色都能唤起常熟夏天的记忆！是夜市上让人垂涎欲滴的小龙虾麻辣十三香 ，勾走游人胃 。是沙家浜革命教育基地重温红色经典，珍惜现世岁月 。是从小摊买走的王庄西瓜配着一杯汽水，是宫崎骏漫画里的夏天。'},
					{name:'常熟的秋天是一年里最好的季节。首先，远远地朝着城外望，就望见原来黛色的山峦已经有了柔和的色彩。山，是一抹儿黄，一抹儿红。黄，有淡黄浓黄；红，也有浅红深红。满山的树叶像在魔术师手里，神奇地变换着色彩。'},
					{name:'常熟是江南宜居城市之一，小城风光秀美。冬日的尚湖湖面上，结了一层厚厚的冰，湖面像明亮的镜子。湖中的木桩上，挂着厚厚的冰块，成了有趣的冰柱，甚是壮观。岸边的岩石上也挂着厚厚的冰凌。看到这景象，你能相信这是江南水乡的冬天吗？'}
					
				]
			}
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage','shareTimeline']
			});
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					that.lat = res.latitude;
					that.lng = res.longitude;
					// that.getData(3); //餐饮
				}
			})
		},
		onPageScroll(e) {
			if(e.scrollTop>55){
				this.ishowb=false;
				this.info.scr=true;
			}else{
				this.ishowb=true;
				this.info.scr=false;
			}
		    if (e.scrollTop < 100) {
				this.gotop = false;
		    } else {
				this.gotop = true;
		    }
		},
		onShow() {
			this.getWeather();
			// this.getZt(1)
		},
		onReady() {
			this.getdata_xw(89); // 小程序banner
			this.getdata_xw(75); //通知公告
			this.getZt(1)
			
		},
		methods: {
			touziyd:function(appId,path){
				wx.navigateToMiniProgram({
				// appId:'wxcb021378e2a96647',
				// path:'pages/home/index',
				appId: appId,
				path: path,
				 envVersion:'release',
				 extraData: {
				 },
				 success(res) {
				  console.log("chenggong");
				 },
				 fail(e){
				  console.log(e);
				 }
				})
			},
			xiansth:function(appId,path){
				wx.navigateToMiniProgram({
				appId:'wxa09d35bb32b454c0',
				path:'packages/home/feature/index?alias=o770z3ChZ3&banner_id=f.94939801~image_ad.3~1~KdugXu97&components_style_show_method=5',
				 envVersion:'release',
				 extraData: {
				 },
				 success(res) {
				  console.log("chenggong");
				 },
				 fail(e){
				  console.log(e);
				 }
				})
			},
			jieqhd:function(appId,path){
				wx.navigateToMiniProgram({
				appId:'wxa09d35bb32b454c0',
				path:'packages/home/feature/index?alias=Xj3Feyyviq&banner_id=f.94939801~image_ad.3~2~KdugXu97&components_style_show_method=5',
				 envVersion:'release',
				 extraData: {
				 },
				 success(res) {
				  console.log("chenggong");
				 },
				 fail(e){
				  console.log(e);
				 }
				})
			},
			qh(ind) {
				this.allind = ind;
				var json= this.allind + 1
				this.getZt(json)
			},
			getdata_xw(id) { //新闻
				var url = 'json/content_list.jspx?channelIds=' + id;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					if (id == 75) {
						that.ysttData = res.data;
					} else if (id == 85) {
						that.tslist = res.data;
					} else if (id == 89) {
						// for(let i=0;i<res.data.length;i++){
						//     that.bannerdatas.push(res.data[i])
						// }
						that.bannerdatas = res.data;
					}
					
				});
			},
			getWeather() { //天气
				var url = 'weatherInfo/getWeatherInfo.jspx';
				var para = {}
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.success) {
						that.weather = res.data;
						console.log(that.weather, "that.weather")
					}
				})
			},
			getZt(json){
				var url = '/journey/v_list.jspx';
				var para = {
					pageNo: this.pageNo,
					isOfficial: 1,
					season:this.xlind,
					address:'',
					season:json
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if(res.data.status == 200) {
						that.datas=[];
						uni.showToast({title:res.data.message,icon:"none"});
						that.datas = res.data.data;
						console.log(that.datas,"hdfajsh")
						that.pageNo = res.data.pageNo;
						that.totalPage = res.data.totalPage;
						console.log(that.datas);
					}else{
						uni.showToast({title:res.data.message,icon:"none"});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.ystitle {
		width: 750rpx;
		height: 702rpx;
		position: relative;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.ystitleimg {
		width: 750rpx;
		height: 702rpx;
	}

	.ystitlebjimg {
		width: 750rpx;
		height: 702rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		pointer-events: none;
	}

	.ysbtall {
		width: 750rpx;
		margin: 30rpx 0 0 0;
		overflow: hidden;
	}

	.ysbtlist {
		float: left;
		width: 25%;
		text-align: center;
	}

	.ysbtlistimg {
		width: 100rpx;
		height: 100rpx;
		margin: 0rpx auto;
	}

	.ysbtlistname {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		margin: 10rpx 0 0 0;
	}

	.bantext {
		position: absolute;
		bottom: 45rpx;
		left: 50rpx;
		color: #ffffff;
	}

	.bantext .bantitle {
		font-size: 52rpx;
		font-weight: 700;
		letter-spacing: 5rpx;
	}

	.bantext .banms {
		font-size: 28rpx;
		line-height: 3;
		opacity: 0.75;
		letter-spacing: 4rpx;
	}

	.ysbtall.cstopData {
		margin: 30rpx 0 0 0;
	}

	.ysbtall.cstopData .ysbtlist {
		width: 20%;
	}

	.ysbtall.cstopData .ysbtlistimg {
		width: 60rpx;
		height: 60rpx;
	}

	.yscenterytt {
		width: 690rpx;
		height: 59rpx;
		background: #F0FCFC;
		box-shadow: 0rpx 8rpx 16rpx 0px rgba(69, 59, 44, 0.1);
		border-radius: 50rpx;
		margin: 40rpx auto 0rpx auto;
		overflow: hidden;
	}

	.yscenteryttleft {
		float: left;
		width: 65rpx;
		height: 58rpx;
		border-radius: 10rpx;
	}

	.yscenteryttimg {
		width: 40rpx;
		height: 40rpx;
		margin: 10rpx 0rpx 0rpx 20rpx;
	}

	.yscenteryttright {
		float: left;
		width: 605rpx;
		height: 58rpx;
		position: relative;
	}

	.gonggao {
		display: flex;
	}

	.yscenteryttrightname {
		width: 420rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin: 12rpx 0rpx 0rpx 18rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.yscenteryttrightimg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 10rpx;
		right: 0rpx;
	}

	.yscenteryttrightmore {
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin: 12rpx 0rpx 0rpx 21rpx;
		color: #3DB176;
	}

	.yscenter {
		height: auto;
		margin: 0 0 120rpx 0;
		padding: 0 0 120rpx 0;
	}

	.contitimg {
		width: 750rpx;
		text-align: center;
		margin: 80rpx auto 0 auto;
	}

	.contitimg .img {
		width: 70%;
		height: 160rpx;
		margin: 0 auto;
	}

	.gonggfw {}

	.fwcon,
	.sccon {
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
	}

	.fwlist {
		width: 30%;
		height: 160rpx;
		margin: 2% 1.5%;
		position: relative;
	}

	.fwlist .fwlistimg {
		width: 100%;
		height: 100%;
	}

	.ggfwtext {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		color: #fff;
	}

	.fwlistname {
		font-size: 32rpx;
		line-height: 1.8;
	}

	.fwlistdes {
		opacity: 0.7;
	}

	.xianssc {
		padding: 0 0 30rpx 0;
	}
	.contitimg-fjd{
		margin: 0rpx auto 0 auto !important;
	}
	.sclist {
		width: 22%;
		text-align: center;
		background: #FFFFFF;
		border: 1rpx solid #E3E3E3;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
		margin: 0 1.1%;
		border-radius: 24rpx;
	}

	.sclist .sclistimg {
		width: 100rpx;
		height: 100rpx;
		margin: 30rpx auto 0rpx auto;
	}

	.sclistname {
		color: #333333;
		padding: 10rpx 0 30rpx 0;
	}

	.lyzs {
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;

		.lyzs-left {
			width: 47%;
			margin: 0 1.2%;

			.lyzs-left-top {
				width: 100%;
				height: 210rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				.lyzs-title {
					position: relative;
					width: 100%;
					height: 172rpx;

					.tb_name {
						font-size: 32rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #FFFFFF;
						padding: 24rpx 40rpx 14rpx 40rpx;
						text-shadow: 0rpx 8rpx 14rpx rgba(1, 41, 82, 0.3);
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
					}

					.tb_type {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						opacity: 0.9;
						padding: 10rpx 0rpx;
						margin-left: 40rpx;
					}
				}
			}
			
			.lyzs-left-top:nth-child(2),
			.lyzs-left-top:nth-child(3) {
				margin-top: 14rpx;
			}

			.lyzs-left-bottom {
				width: 100%;
				height: 450rpx;
				position: relative;
				margin-top: 14rpx;
				border-radius: 14rpx;
				padding-top: 24rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.lyzs-title {
					position: relative;
					width: 100%;
					height: 172rpx;
					text-align: center;

					.tb_name {
						font-size: 42rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow: -2rpx 2rpx 0rpx rgba(12, 73, 213, 0.27);
						padding: 12rpx 0 16rpx;

					}

					.tb_type {
						width: 120rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #A9C8FD;
						background: #2054C7;
						border-radius: 24rpx;
						margin: 0 auto;
						padding: 10rpx 20rpx;

					}
				}
			}

		}
	}


	@function unit($num) {
		@return $num+0upx;
	}
	.nactive{
		color: #000 !important;
		background: #fff !important;
	}
	.dhl {
		width: 750rpx;
		padding: 0 0 0 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		justify-content: space-between;
		color: #fff;
	}

	.top {
		width: 490rpx;
		height: unit(88);
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		justify-content: space-between;
	}

	.sskuang {
		width: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 100%;
		align-items: center;
	}

	.tianqi {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tianqi image {
		width: 67rpx;
		height: 67rpx;
		margin-right: 20rpx;
	}

	.sstb {
		width: 30rpx;
		height: 30rpx;
	}

	.boxcon {
		padding-top: 20rpx;
		margin-bottom: 40rpx;
		image{
			display: block;
			width: 100%;
			height: 220rpx;
		}
	}

	.sccon .sccon_left {
		width: 47%;
		// height: 277px;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		margin: 0 1.1%;

		.sccon_top {
			width: 100%;
			height: 260rpx;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			position: relative;

			.top-img {
				width: 150rpx;
				height: 40rpx;
				position: absolute;
				top: 0rpx;
				left: calc(100% - 50%);
				transform: translate(-50%, 0);
			}

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

		.sccon_bottom {
			width: 100%;
			height: 200rpx;
			position: relative;
			background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/djhd-bg.png') no-repeat;
			// background-image: auto;
			background-size: 100% 100%;
			margin-top: -40rpx;
			z-index: 1;

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

			.sccon_bottom_name {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				text-align: center;
				padding-top: 62rpx;
			}

			.sccon_bottom_jkh {
				margin: 10rpx 0 0 0;
				display: flex;
				align-items: baseline;

				.bottom_jkh {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					opacity: 0.6;
					margin-left: 23rpx;
				}

				.bottom_jkh1 {
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF5400;
					font-size: 24rpx;
					margin-left: 2rpx;
				}

				.bottom_jkh2 {
					font-size: 34rpx;
					font-family: DIN;
					font-weight: 500;
					color: #FF5400;
				}

				.bottom_jkh3 {
					font-size: 26rpx;
					font-family: DIN;
					font-weight: 400;
					text-decoration: line-through;
					color: #000000;
					opacity: 0.5;
					margin-left: 12rpx;
				}
			}
		}

	}

	.ztxl {
		width: 91%;
		height: 1250rpx;
		margin-left: 32rpx;
		background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/bg-chun.png') no-repeat;
		background-size: 100% 100%;

		.ztxl_jj {
			width: 93%;
			margin: 0 auto;

			.ztxl_jj_top {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;

				.jj_top {
					width: 160rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.img1 {
						width: 160rpx;
						height: 90rpx;
					}

					.img2 {
						width: 50rpx;
						height: 50rpx;
					}
				}

				// .jj_top:nth-child(2) .img2{
				// 	margin-left:33rpx ;
				// }
				// .jj_top:nth-child(3) .img2{
				// 	margin-left:107rpx ;
				// }
				// .jj_top:nth-child(4) .img2{
				// 	margin-left:109rpx ;
				// }


			}

			.ztxl_jj_top:nth-child(1) {
				padding-top: 40rpx;
			}

		}

		.ztxl_js {
			width: 87%;
			margin: 0 auto;
			// height: 200rpx;
			background: #000000;
			opacity: 0.5;
			border-radius: 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			padding:30rpx 20rpx;
		}

		.ztxl_list {
			width: 93%;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;

			.list_left {
				width: 270rpx;
				height: 200rpx;
				position: relative;

				.audio-uim {
					width: 100%;
					height: 100%;
					border-radius: 14rpx 0rpx 0rpx 14rpx;
				}

				.list_tip {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 48rpx;
					background: linear-gradient(90deg, #E2602D, #00000000);
					opacity: 0.8;
					border-radius: 0rpx 0rpx 0rpx 14rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					.tip_name {
						font-size: 26rpx;
						font-family: DIN;
						font-weight: bold;
						color: #FFFFFF;
						margin-left: 20rpx;
						margin-right: 5rpx;

						&::before {
							content: '';
							display: inline-block;
							width: 22upx;
							height: 22upx;
							background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/icon-dz.png') no-repeat;
							background-size: 100%;
							margin-right: 7upx;
						}
					}
				}


			}

			.list_right {
				width: calc(100% - 270rpx);
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 0 14rpx 14rpx 0;

				.right_name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 550;
					color: #333333;
					line-height: 44rpx;
					padding: 24rpx 24rpx 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.right_name_name{
						padding: 12rpx 24rpx 0;
					    font-size: 26rpx;
					    font-family: Microsoft YaHei;
					    font-weight: 400;
					    color: #666;
					    line-height: 45rpx;
					    text-overflow: -o-ellipsis-lastline;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    display: -webkit-box;
					    -webkit-line-clamp: 2;
					    line-clamp: 2;
					    -webkit-box-orient: vertical;
				}
			}

			.lbrli {
				display: flex;
				white-space: nowrap;
				overflow-x: scroll;
				overflow-y: hidden;
				padding: 20rpx;

				.lbrliind {
					font-size: 24upx;
					font-weight: 500;
					color: #33AC59;
					border: 2upx solid #B3DBBE;
					border-radius: 6upx;
					padding: 5upx 10upx;
					margin-right: 16upx;
					background: #E9FBF7;
				}
			}
		}
	}

	.sz6mo {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #3DB176;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		margin: 58upx 0 48rpx;

		&::after {
			content: '';
			display: inline-block;
			width: 26upx;
			height: 26upx;
			background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/ysxcx-icon-jt1.png') no-repeat;
			background-size: 100%;
			margin-left: 16upx;
		}
	}

	.sccon_right {
		width: 47.2%;
		// height: 420rpx;
		background: linear-gradient(90deg, #AB9DF4 0%, #7A65F1 100%);
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(34, 25, 84, 0.18);
		border-radius: 14rpx;
		margin: 0 1.1%;

		.sccon {
			&-top {
				display: flex;
				margin: 24rpx 0 23rpx 18rpx;
				align-items: center;

				&-tk {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				&-qg {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.7;
					margin-left: 9rpx;
				}
			}
		}

		.sccon-bottom {
			width: 100%;
			height: calc(100% - 87rpx);
			background: #FFFFFF;
			border-radius: 14rpx;

			.sccon-bottom-li {
				display: flex;
				align-items: center;
				padding: 25rpx 0 0 20rpx;

				.li-img {
					width: 82rpx;
					height: 80rpx;
					border-radius: 6rpx;

				}

				.li-li {
					width: calc(100% - 120rpx);
					margin-left: 12rpx;

					.li-li-name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					.li-li-title {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF5400;

						.li-kl {
							font-size: 28rpx;
							font-family: DIN;
							font-weight: 500;
							color: #FF5400;
						}

						.li-kk {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							opacity: 0.35;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
