You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1432 lines
32 KiB

7 months ago
<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>