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.
862 lines
25 KiB
862 lines
25 KiB
<template>
|
|
<view>
|
|
<view class="home_pic_static">
|
|
<view class="home_pic" style="z-index: 0">
|
|
<image :src="image3" mode="aspectFill" class="swp_1_img"></image>
|
|
</view>
|
|
<view class="home_pic">
|
|
<image :src="image" mode="aspectFill" :class="cla"></image>
|
|
</view>
|
|
<view class="home_pic">
|
|
<image :src="image2" mode="aspectFill" :class="cla2"></image>
|
|
</view>
|
|
<view class="hua_jt">
|
|
<image src="/static/animg/index/jiant_up.png" mode="aspectFill" class="dong_j"></image>
|
|
</view>
|
|
<view class="home_nav">
|
|
<view class="dy_fx fx_warp_w h_nav_box">
|
|
<view class="w_25" hover-class="checkActive">
|
|
<view class="kua_nav" @click="goToPages('jingqu')">
|
|
<image src="/static/animg/index/jqmp.png" class="at_size_1"></image>
|
|
<view class="at_t">景区门票</view>
|
|
</view>
|
|
</view>
|
|
<view class="w_25" hover-class="checkActive">
|
|
<view class="kua_nav" @click="goToPages('hotel')">
|
|
<image src="/static/animg/index/jdms.png" class="at_size_1"></image>
|
|
<view class="at_t">酒店民宿</view>
|
|
</view>
|
|
</view>
|
|
<view class="w_25" hover-class="checkActive">
|
|
<view class="kua_nav" @click="goToPages('line')">
|
|
<image src="/static/animg/index/jpxl.png" class="at_size_1"></image>
|
|
<view class="at_t">精品线路</view>
|
|
</view>
|
|
</view>
|
|
<view class="w_25" hover-class="checkActive">
|
|
<view class="kua_nav" @click="goToPages('jiqiren')">
|
|
<image src="/static/animg/index/znkf.png" class="at_size_1"></image>
|
|
<view class="at_t">智能客服</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="home_serch_1">
|
|
<weather :show-location="false" ref="locationAndWeather" />
|
|
<view class="sch_2" @click="gotoSearch">
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-search_2.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-bankuai">
|
|
<view class="left" hover-class="opacity-pic" @click="goBankuai('hd')">
|
|
<view class="m-title">活动日历</view>
|
|
<view class="m-tip">更多活动敬请期待！</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="right-son meishi" hover-class="opacity-pic" @click="goBankuai('meishi')">
|
|
<view class="tit">特色美食</view>
|
|
</view>
|
|
<view class="right-son wenhua" hover-class="opacity-pic" @click="goBankuai('wenhua')">
|
|
<view class="tit">非遗文化</view>
|
|
</view>
|
|
<view class="right-son zhoubian" hover-class="opacity-pic" @click="goBankuai('zhoubian')">
|
|
<view class="tit">文创周边</view>
|
|
</view>
|
|
<view class="right-son tousu" hover-class="opacity-pic" @click="goBankuai('tousu')">
|
|
<!-- <view class="right-son tousu" hover-class="opacity-pic" > -->
|
|
<view class="tit">我要投诉</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="amt_30">
|
|
<view class="an_box an_sch">
|
|
<view class="dy_fx">
|
|
<view class="tips">鹿泉<span class="m-red">新闻</span></view>
|
|
<view class="fx_1 aml_30 amr_30 m-tips">
|
|
<swiper autoplay="true" class="ht_swp_xi" :duration="duration_hj" :indicator-dots="falseDots"
|
|
:interval="interval_hj" :vertical="trueVcal">
|
|
<swiper-item class="word_1 xi_txt" v-for="(item, index) in zxList" :key="index"
|
|
@click="goToZixunDetail(item.guid)">
|
|
<view class="m-title">{{ item.title }}</view>
|
|
<view class="more-ico">更多
|
|
<image class="more-icon" src="/static/animg/index/more.png" mode="scaleToFill" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 滑动nav -->
|
|
<view class="m-slide-nav">
|
|
<view :class="['m-slide-item', currIndex == index ? 'curr' : '']" v-for="(item, index) in slideNav"
|
|
@tap="changeIndex(index)">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
<!-- 景区 -->
|
|
<!-- <view class="amb_30">
|
|
<view class="an_box_2">
|
|
<view class="amt_30">
|
|
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
|
|
<custom-waterfalls-flow :value="currIndex == 0 ? scenicList : currIndex == 1 ? foodList : hotelList" :imageKey="currIndex == 0 ? 'slogo':currIndex == 1 ? 'logo' :'hlogo'" class="water-flow">
|
|
<view class="item" v-for="(item, index) in allDatas" :key="index" slot="slot{{index}}">
|
|
<view class="title h-name">{{ currIndex == 0 ? item.sname : currIndex == 1 ? item.title : item.hname }}</view>
|
|
</view>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="list-box">
|
|
<view class="mask-box" v-if="showLoading">
|
|
加载中...
|
|
</view>
|
|
<!-- 景区 -->
|
|
<view class="amb_30" v-if="scenicList && scenicList.length > 0 && currIndex == 0">
|
|
<view class="an_box_2">
|
|
<!-- <view class="an_t" @click="goToPages('jingqu')">
|
|
<view class="an_t_1">大美鹿泉</view>
|
|
<view class="an_t_2">特色文创和旅游商品</view>
|
|
</view> -->
|
|
<!-- 瀑布流 -->
|
|
<view class="amt_30">
|
|
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
|
|
<custom-waterfalls-flow @imageClick="goToDetail('scenic', $event)" :value="scenicList" imageKey="slogo"
|
|
class="water-flow">
|
|
<view class="item" v-for="(item, index) in scenicList" :key="index" slot="slot{{index}}">
|
|
<view class="title h-name">{{ item.sname }}</view>
|
|
</view>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 酒店 -->
|
|
<view class="amb_30" v-if="hotelList && hotelList.length > 0 && currIndex == 2">
|
|
<view class="an_box_2">
|
|
<!-- <view class="an_t" @click="goToPages('hotel')">
|
|
<view class="an_t_1">酒店</view>
|
|
<view class="an_t_2">特色文创和旅游商品</view>
|
|
</view> -->
|
|
<!-- 瀑布流 -->
|
|
<view class="amt_30">
|
|
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
|
|
<custom-waterfalls-flow @imageClick="goToDetail('xiadan', $event)" :value="hotelList" imageKey="hlogo"
|
|
class="water-flow">
|
|
<view class="item" v-for="(item, index) in hotelList" :key="index" slot="slot{{index}}">
|
|
<view class="title h-name">{{ item.hname }}</view>
|
|
</view>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 美食 -->
|
|
<view class="amb_30" v-if="foodList && foodList.length > 0 && currIndex == 1">
|
|
<view class="an_box_2">
|
|
<!-- <view class="an_t" @click="goToPages('meishi')">
|
|
<view class="an_t_1">鹿泉味道</view>
|
|
<view class="an_t_2">特色文创和旅游商品</view>
|
|
</view> -->
|
|
<!-- 瀑布流 -->
|
|
<view class="amt_30">
|
|
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
|
|
<custom-waterfalls-flow @imageClick="goToDetail('food', $event)" :value="foodList" imageKey="logo" class="water-flow">
|
|
<view class="item" v-for="(item, index) in foodList" :key="index" slot="slot{{index}}">
|
|
<view class="title h-name">{{ item.title }}</view>
|
|
</view>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<f-login></f-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import weather from "@/uni_modules/jr-weather/components/jr-weather/jr-weather.vue";
|
|
export default {
|
|
components: {
|
|
weather,
|
|
},
|
|
data() {
|
|
return {
|
|
currIndex: 0,
|
|
slideNav: ["怎么玩", "吃什么", "住哪里"],
|
|
|
|
trueVcal: true,
|
|
falseDots: false,
|
|
interval_hj: 4500,
|
|
duration_hj: 1000,
|
|
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 5000,
|
|
duration: 500,
|
|
//
|
|
current: 0,
|
|
swiperCurrent: 0,
|
|
|
|
video: null,
|
|
indexNum: 0,
|
|
old: {
|
|
scrollTop: 0,
|
|
markIndex: 0,
|
|
},
|
|
scenicList: [],
|
|
videoList: [],
|
|
SJZObject: {},
|
|
wcList: [],
|
|
foodList: [],
|
|
yzOneList: {},
|
|
yzList: [],
|
|
lineOneList: {},
|
|
lineList: [],
|
|
lbtList: [],
|
|
zxList: [],
|
|
|
|
feiyiList: [],//非遗
|
|
hotelList: [],//酒店
|
|
specialtyList: [],//特产
|
|
allDatas: [],
|
|
// 轮播图
|
|
image: "",
|
|
image2: "",
|
|
image3: "",
|
|
j: 0,
|
|
a: 0,
|
|
b: 1,
|
|
images: [],
|
|
cla: "swp_1_img dhua",
|
|
cla2: "swp_1_img dhua2",
|
|
clas: ["swp_1_img dhua", "swp_1_img dhua2"],
|
|
netType: true,
|
|
showLoading: false
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
var that = this;
|
|
this.$util.getNetworkType(
|
|
function (res) {
|
|
if (res.networkType === "none") {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
},
|
|
function () {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
);
|
|
if (!that.netType) {
|
|
return;
|
|
}
|
|
this.getRedisData();
|
|
this.getZiXunList();
|
|
let video = uni.createVideoContext("myVideo");
|
|
this.video = video;
|
|
setInterval(
|
|
function () {
|
|
if (that.j % 2 == 0) {
|
|
//这个为每次l轮换样式
|
|
that.cla = that.clas[1];
|
|
that.cla2 = that.clas[0];
|
|
|
|
that.a = that.a + 2;
|
|
if (that.a == that.images.length) {
|
|
that.a = 0;
|
|
} else if (that.a > that.images.length) {
|
|
that.a = that.a - that.images.length;
|
|
}
|
|
that.image = that.images[that.a];
|
|
} else {
|
|
that.cla = that.clas[0];
|
|
that.cla2 = that.clas[1];
|
|
|
|
that.b = that.b + 2;
|
|
if (that.b == that.images.length) {
|
|
that.b = 0;
|
|
} else if (that.b > that.images.length) {
|
|
that.b = that.b - that.images.length;
|
|
}
|
|
that.image2 = that.images[that.b];
|
|
}
|
|
that.j++;
|
|
},
|
|
1000 * 10,
|
|
that
|
|
);
|
|
},
|
|
methods: {
|
|
waterClick(val,ss){
|
|
console.log(val, ss,'maxNum')
|
|
},
|
|
//图跳转
|
|
goBankuai(val) {
|
|
switch (val) {
|
|
case 'hd':
|
|
uni.navigateTo({
|
|
url: "/subPageA/hotevent/hoteventlist/hoteventlist",
|
|
});
|
|
break;
|
|
case 'meishi':
|
|
uni.navigateTo({
|
|
url: "/subPageA/food/foodlist/foodlist",
|
|
});
|
|
break;
|
|
case 'wenhua':
|
|
uni.navigateTo({
|
|
url: "/subPageA/feiyi/feiyilist/feiyilist",
|
|
});
|
|
break;
|
|
case 'zhoubian':
|
|
uni.navigateTo({
|
|
url: "/subPageA/wenchuang/wenlist/wenlist",
|
|
});
|
|
break;
|
|
case 'tousu':
|
|
this.onTokenJump('/subPageB/suggest/sug_list?type=1', 'navigateTo')
|
|
// uni.navigateTo({
|
|
// url: "/subPageB/suggest/sug_list?type=1",
|
|
// });
|
|
break;
|
|
}
|
|
},
|
|
//切换tab
|
|
changeIndex(index) {
|
|
this.showLoading = true
|
|
this.currIndex = index;
|
|
setTimeout(() => {
|
|
this.showLoading = false
|
|
},500);
|
|
// switch(index){
|
|
// case 0:
|
|
// this.allDatas = this.scenicList;
|
|
// break;
|
|
// case 1:
|
|
// this.allDatas = this.foodList;
|
|
// break;
|
|
// case 2:
|
|
// this.allDatas = this.hotelList;
|
|
// break;
|
|
// }
|
|
// this.$refs.waterfallsFlowRef.refresh();
|
|
},
|
|
//
|
|
changeSwiper(e) {
|
|
this.swiperCurrent = e.detail.current;
|
|
},
|
|
scroll: function (e) {
|
|
this.old.scrollTop = e.detail.scrollTop;
|
|
},
|
|
getRedisData: function (mescroll) {
|
|
var data = {
|
|
key: this.$param.userkey + "_index",
|
|
};
|
|
this.$Request.post(this.$config.getRedisData, data).then((res) => {
|
|
console.log(res);
|
|
if (res.status == 200) {
|
|
//所有的数据
|
|
var initData = res.data;
|
|
|
|
//轮播图
|
|
var lbtList = initData.lbtList;
|
|
for (let i = 0; i < lbtList.length; i++) {
|
|
lbtList[i].logo = this.$config.ROOTPATH + lbtList[i].logo;
|
|
this.images[i] = lbtList[i].logo;
|
|
}
|
|
this.image = this.images[0];
|
|
this.image2 = this.images[1];
|
|
this.image3 = this.images[0];
|
|
//景区
|
|
var scenicList = initData.scenicList;
|
|
// var scLength = scenicList.length > 4 ? 4 : scenicList.length;
|
|
var scLength = scenicList.length;
|
|
var scdata = [];
|
|
for (let i = 0; i < scLength; i++) {
|
|
scenicList[i].slogo = this.$config.ROOTPATH + scenicList[i].slogo;
|
|
scdata.push(scenicList[i]);
|
|
}
|
|
this.scenicList = scdata;
|
|
//美食
|
|
var foodList = initData.foodList;
|
|
// var foodLength = foodList.length > 4 ? 4 : foodList.length;
|
|
var foodLength = foodList.length;
|
|
for (var i = 0; i < foodLength; i++) {
|
|
var item = {
|
|
logo: this.$config.ROOTPATH + foodList[i].logo,
|
|
region: foodList[i].bm,
|
|
guid: foodList[i].guid,
|
|
title: foodList[i].title,
|
|
content: foodList[i].content
|
|
};
|
|
this.foodList.push(item);
|
|
}
|
|
|
|
//酒店
|
|
var hotelList = initData.hotelList;
|
|
// var hotelLength = hotelList.length > 4 ? 4 : hotelList.length;
|
|
var hotelLength = hotelList.length;
|
|
var list1 = [];
|
|
for (var i = 0; i < hotelLength; i++) {
|
|
hotelList[i].hlogo = this.$config.ROOTPATH + hotelList[i].hlogo;
|
|
list1.push(hotelList[i]);
|
|
}
|
|
this.hotelList = list1;
|
|
} else {
|
|
this.getImgList(); //轮播图
|
|
this.getScenicList(); //景区
|
|
this.getFoodList(); //美食
|
|
}
|
|
});
|
|
},
|
|
getImgList: function () {
|
|
var data = {
|
|
pageno: "1",
|
|
pageSize: "5",
|
|
sort: "2",
|
|
type: this.$param.imgType,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
|
|
var lbtList = res.data;
|
|
for (var i = 0; i < lbtList.length; i++) {
|
|
this.images[i] = this.$config.ROOTPATH + lbtList[i].logo;
|
|
}
|
|
this.image = this.images[0];
|
|
this.image2 = this.images[1];
|
|
this.image3 = this.images[0];
|
|
});
|
|
},
|
|
getZiXunList: function () {
|
|
var data = {
|
|
pageno: "1",
|
|
pageSize: "3",
|
|
sort: "2",
|
|
type: this.$param.zixunType,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
|
|
this.zxList = res.data;
|
|
});
|
|
},
|
|
goToZixunDetail(guid) {
|
|
console.log(guid, 'guid')
|
|
uni.navigateTo({
|
|
url: "/subPageB/zixun/zixundetail/zixundetail?id=" + guid,
|
|
});
|
|
},
|
|
getScenicList: function () {
|
|
var data = {
|
|
pageno: "1",
|
|
pagesize: "4",
|
|
sort: "2",
|
|
timestamp: 0,
|
|
areacode: this.$config.ARER_CODE,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.post(this.$config.getscenicList, data).then((res) => {
|
|
if (res.status == 500) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
duration: 2000,
|
|
});
|
|
return;
|
|
}
|
|
var data = res.data;
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].slogo = this.$config.ROOTPATH + data[i].slogo;
|
|
}
|
|
this.scenicList = data;
|
|
});
|
|
},
|
|
getFoodList: function () {
|
|
this.onc = "meishi";
|
|
var data = {
|
|
pageno: "1",
|
|
pageSize: "4",
|
|
sort: "2",
|
|
region: this.$config.ARER_CODE,
|
|
type: this.$param.foodType,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
|
|
if (res.status == 500) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
duration: 2000,
|
|
});
|
|
return;
|
|
}
|
|
var data = res.data;
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].logo = this.$config.ROOTPATH + data[i].logo;
|
|
}
|
|
this.foodList = data;
|
|
});
|
|
},
|
|
goToPages: function (type) {
|
|
var that = this;
|
|
if (type == "jingqu") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/scenic/sceniclist/sceniclist",
|
|
});
|
|
// uni.navigateTo({
|
|
// url: "/subPageC/bookTicket/bookTicket",
|
|
// });
|
|
} else if (type == "meishi") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/food/foodlist/foodlist",
|
|
});
|
|
} else if (type == "line") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/travelroute/travelroutelist/travelroutelist",
|
|
});
|
|
} else if (type == "hotel") {
|
|
uni.navigateTo({
|
|
url: "/subPageB/hotel/hotellist/hotellist",
|
|
});
|
|
} else if (type == "more") {
|
|
uni.navigateTo({
|
|
url: "/pages/fuwu/fuwu",
|
|
});
|
|
} else if (type == "wenchuang") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/wenchuang/wenlist/wenlist",
|
|
});
|
|
} else if (type == "yuyue") {
|
|
switch (uni.getSystemInfoSync().platform) {
|
|
case "android":
|
|
//安卓授权
|
|
var that = this;
|
|
this.$util.bindGpsObj(that);
|
|
Android.gotoDetial("JumpApplet", "gh_03bcfb833a55");
|
|
break;
|
|
case "ios":
|
|
//ios授权
|
|
var that = this;
|
|
this.$util.bindGpsObj(that);
|
|
window.location.href =
|
|
"https://www.baidu.com?url=applet&value=gh_03bcfb833a55";
|
|
break;
|
|
}
|
|
} else if (type == "feiyi") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/feiyi/feiyilist/feiyilist",
|
|
});
|
|
} else if (type == "hotevent") {
|
|
uni.navigateTo({
|
|
url: "/subPageA/hotevent/hoteventlist/hoteventlist",
|
|
});
|
|
} else if (type == "jiqiren") {
|
|
that.$util.saveOperatorLog(that, "FUN", "机器人");
|
|
uni.navigateTo({
|
|
url: "/subPageB/jiqiren/jiqiren/zhinengjiqiren",
|
|
});
|
|
}
|
|
},
|
|
goToDetail: function (type, guid, region) {
|
|
if (type == "scenic") {
|
|
const list = JSON.stringify(this.scenicList)
|
|
console.log("list",list)
|
|
uni.navigateTo({
|
|
// url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid + `&listA=` + list,
|
|
url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid.guid,
|
|
});
|
|
} else if (type == "food") {
|
|
uni.navigateTo({
|
|
url:
|
|
"/subPageA/food/fooddetial/fooddetial?fid=" + guid.guid + "&fareacode=" + guid.region,
|
|
});
|
|
} else if (type == "line") {
|
|
uni.navigateTo({
|
|
url: "/pages/travelroute/travelroutedetail/travelroutedetail?id=" + guid,
|
|
});
|
|
} else if (type == "feiyi") {
|
|
uni.navigateTo({
|
|
url: '/subPageA/feiyi/feiyidetail/feiyidetail?guid=' + guid
|
|
});
|
|
} else if (type == "xiadan") {
|
|
uni.navigateTo({
|
|
url: '/subPageB/hotel/hoteldetail/hoteldetail?id=' + guid.guid + '®ion=' + guid.region
|
|
});
|
|
}
|
|
},
|
|
gotoSearch: function () {
|
|
var that = this;
|
|
that.$util.saveOperatorLog(that, "FUN", "搜索");
|
|
uni.navigateTo({
|
|
url: "/subPageA/search/search",
|
|
});
|
|
},
|
|
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.checkActive {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
box-shadow: 0upx 0upx 0upx rgba(255, 255, 255, 0.2) !important;
|
|
color: #3d3d3d !important;
|
|
transition: 0.1s ease !important;
|
|
}
|
|
|
|
.w_25 {
|
|
width: 24%;
|
|
margin: 0 0.5%;
|
|
background: #ffffff12;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx 0;
|
|
|
|
.kua_nav {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
background-image: url("@/static/animg/index/tips_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
padding: 5rpx 10rpx;
|
|
}
|
|
|
|
.m-tips {
|
|
height: 45rpx;
|
|
}
|
|
|
|
.m-slide-nav {
|
|
height: 100rpx;
|
|
overflow-x: scroll;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
|
|
.m-slide-item {
|
|
width: 33%;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
flex-shrink: 0;
|
|
transition: all ease-in-out 0.2s;
|
|
z-index: 1;
|
|
background-repeat: no-repeat;
|
|
background-size: 25%;
|
|
background-position: 50% 15px;
|
|
padding-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.curr {
|
|
scale: 1.1;
|
|
background-image: url("@/static/animg/index/active-nav-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 30%;
|
|
background-position: 50% 15px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.m-slide-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.m-slide-nav::before {
|
|
content: "";
|
|
width: 143rpx;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: url("@/static/animg/index/left-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.m-slide-nav::after {
|
|
content: "";
|
|
width: 340rpx;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/right-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.an_box {
|
|
margin-bottom: 0rpx !important;
|
|
}
|
|
|
|
.w-content {
|
|
padding: 0 20rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #1b1b1b;
|
|
}
|
|
|
|
.m-bankuai {
|
|
background-color: #f5f5f5;
|
|
padding: 16px;
|
|
border-radius: 13px 13px 0 0;
|
|
position: relative;
|
|
z-index: 9;
|
|
top: -10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 220rpx;
|
|
height: 320rpx;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/hd.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
.m-title {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
font-style: italic;
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 29rpx;
|
|
margin-bottom: 11rpx;
|
|
}
|
|
|
|
.m-tip {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #ffffff;
|
|
font-style: italic;
|
|
padding: 5rpx 10rpx;
|
|
border-radius: 15rpx;
|
|
border: solid 1rpx #fff;
|
|
text-align: center;
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: 24rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-self: flex-start;
|
|
|
|
.right-son {
|
|
width: 48%;
|
|
height: 150rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
|
|
.tit {
|
|
width: fit-content;
|
|
margin-top: 18rpx;
|
|
margin-left: 23rpx;
|
|
}
|
|
}
|
|
|
|
.meishi {
|
|
color: #fb8314;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/meishi.png");
|
|
}
|
|
|
|
.wenhua {
|
|
color: #fc5425;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/wenhua.png");
|
|
}
|
|
|
|
.zhoubian {
|
|
margin-top: 16rpx;
|
|
color: #4781fb;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/zhoubian.png");
|
|
}
|
|
|
|
.tousu {
|
|
color: #04a3da;
|
|
margin-top: 16rpx;
|
|
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tousu.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
.an_sch {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.amt_30 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.h-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 20rpx 12rpx;
|
|
}
|
|
|
|
.water-flow {
|
|
width: 100%;
|
|
}
|
|
|
|
.list-box {
|
|
position: relative;
|
|
|
|
.mask-box {
|
|
width: 100%;
|
|
min-height: 85vh;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 85vh;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
position: absolute;
|
|
z-index: 9;
|
|
font-size: 36rpx;
|
|
transition: all ease-in-out 0.2s;
|
|
}
|
|
}
|
|
</style>
|
|
|