Tuzki
/
CjyTravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(static): 调整首页轮播图和搜索框样式- 移除轮播图固定高度，改为自适应

Browse Source 
-调整导航条高度和背景透明度
- 将搜索框改为固定在顶部
-调整搜索框高度和样式
lu_quan_dev
Tuzki 12 months ago
parent 853a6b02c6
commit 3ec5097bdf
11 changed files with 1750 additions and 1403 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      pages.json
  2. 384
      pages/fuwu/fuwu.vue
  3. 846
      pages/index/index.vue
  4. 294
      pages/personcenter/personcenter.vue
  5. 125
      pages/welcome/welcome.vue
  6. 1459
      pages/zhoubian/zhoubian/zhoubian.vue
  7. 17
      static/ancss/an.css
  8. BIN
      static/animg/index/hotel.png
  9. BIN
      static/animg/index/strategy-guide.png
  10. 4
      uni_modules/uview-ui/components/u-swiper/props.js
  11. 14
      uni_modules/uview-ui/components/u-swiper/u-swiper.vue

10
pages.json
Unescape View File

@ -1,5 +1,13 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/welcome/welcome",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index",
"style": {
@ -12,7 +20,7 @@
{
"path": "pages/zhoubian/zhoubian/zhoubian",
"style": {
"navigationStyle": "custom"
"navigationBarTitleText": "附近"
}
},
{

384
pages/fuwu/fuwu.vue
View File

File diff suppressed because one or more lines are too long

846
pages/index/index.vue
Unescape View File

@ -1,101 +1,119 @@
<template>
<view>
<view>
<scroll-view class="scroll-boxs" @scroll="onScroll" scroll-y="true">
<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 class="swiper-box">
<u-swiper :interval="5000" :blur="blur" @change="e => current = e.current" :height="500" :list="images" :autoplay="autoplay"
@click="clickSwiper" :circular='true' :indicator="true" :easingFunction="'easeOutCubic'">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in images" :key="index"
:class="[index === current && 'indicator__dot--active']">
</view>
</view>
</u-swiper>
</view>
<view class="home_pic">
<image :src="image2" mode="aspectFill" :class="cla2"></image>
</view>
<view class="home_serch_1"
:style="{ '-webkit-backdrop-filter': 'blur(' + blur + ')', 'backdrop-filter': 'blur(' + blur + ')', 'height': height }">
<view class="weather-box">
<weather :show-location="false" ref="locationAndWeather" />
</view>
<view class="hua_jt">
<image src="/static/animg/index/jiant_up.png" mode="aspectFill" class="dong_j"></image>
<view class="sch_2" @click="gotoSearch">
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-search_2.png"></image>
<span>景区/酒店/美食</span>
</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 class="no-fixed-box">
<view class="m-bankuai">
<view class="home_nav">
<view class="dy_fx fx_warp_n 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>
<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 class="w_25" hover-class="checkActive">
<view class="kua_nav" @click="goToPages('hotel')">
<image src="/static/animg/index/hotel.png" class="at_size_1"></image>
<view class="at_t">酒店住宿</view>
</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 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>
<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 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 class="w_25" hover-class="checkActive">
<view class="kua_nav" @click="goToPages('default')">
<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('youji')">
<image src="/static/animg/index/strategy-guide.png" class="at_size_1"></image>
<view class="at_t">攻略游记</view>
</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 class="left" hover-class="opacity-pic" @click="goBankuai('hd')">
<view class="m-title">活动日历</view>
<view class="m-tip">更多活动敬请期待！</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 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>
<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 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>
</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 }}
<!-- 滑动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>
<!-- 景区 -->
<!-- <view class="amb_30">
<!-- 景区 -->
<!-- <view class="amb_30">
<view class="an_box_2">
<view class="amt_30">
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
@ -109,88 +127,93 @@
</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="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 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>
<!-- 酒店 -->
<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="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 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>
<!-- 美食 -->
<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="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 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>
</view>
</view>
</scroll-view>
</view>
<f-login></f-login>
</view>
<f-login></f-login>
</view>
</template>
<script>
import weather from "@/uni_modules/jr-weather/components/jr-weather/jr-weather.vue";
import Uswiper from "@/uni_modules/uview-ui/components/u-swiper/u-swiper.vue"
export default {
components: {
weather,
Uswiper
},
data() {
return {
currIndex: 0,
slideNav: ["怎么玩", "吃什么", "住哪里"],
slideNav: ["人气景区", "特色美食", "酒店民宿"],
trueVcal: true,
falseDots: false,
@ -239,9 +262,18 @@ export default {
cla2: "swp_1_img dhua2",
clas: ["swp_1_img dhua", "swp_1_img dhua2"],
netType: true,
showLoading: false
showLoading: false,
scrollTop: 0,
blur: 0,
height: 'fit-content',
};
},
onReady() {
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.height = menuButtonInfo.height + menuButtonInfo.top + "px";
},
onLoad(option) {
var that = this;
this.$util.getNetworkType(
@ -304,8 +336,26 @@ export default {
);
},
methods: {
waterClick(val,ss){
console.log(val, ss,'maxNum')
clickSwiper(e) {
console.log('点击轮播图', e)
},
onScroll(event) {
this.scrollTop = event.detail.scrollTop;
if(this.scrollTop > 150){
this.autoplay = false;
}else{
this.autoplay = true;
}
this.updateBackgroundColor();
},
updateBackgroundColor() {
// 假设当滚动超过100px时，背景逐渐变为透明
const opacity = Math.max(0, Math.min(1, this.scrollTop / 500));
this.blur = `${opacity * 15}px`
},
waterClick(val, ss) {
console.log(val, ss, 'maxNum')
},
//图跳转
goBankuai(val) {
@ -344,7 +394,7 @@ export default {
this.currIndex = index;
setTimeout(() => {
this.showLoading = false
},500);
}, 500);
// switch(index){
// case 0:
// this.allDatas = this.scenicList;
@ -540,22 +590,6 @@ export default {
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",
@ -569,14 +603,24 @@ export default {
uni.navigateTo({
url: "/subPageB/jiqiren/jiqiren/zhinengjiqiren",
});
} else if (type == "youji") {
uni.navigateTo({
url: "/subPageA/method/methodlist/methodlist",
});
} else if (type == "default") {
uni.showToast({
title: "功能正在开发中~",
icon: "none",
duration: 2000,
});
}
},
goToDetail: function (type, guid, region) {
if (type == "scenic") {
uni.navigateTo({
// url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid + `&listA=` + list,
url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid.guid ,
url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid.guid,
});
} else if (type == "food") {
uni.navigateTo({
@ -609,253 +653,333 @@ export default {
},
};
</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;
<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: 22%;
margin: 0 1%;
background: #ffffff12;
border-radius: 20rpx;
padding: 30rpx 0;
flex: none;
.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%;
.tips {
font-family: Source Han Sans SC;
font-weight: 400;
font-weight: bold;
font-size: 30rpx;
color: #333333;
flex-shrink: 0;
transition: all ease-in-out 0.2s;
z-index: 1;
background-image: url("@/static/animg/index/tips_bg.png");
background-repeat: no-repeat;
background-size: 25%;
background-position: 50% 15px;
padding-bottom: 10px;
text-align: center;
background-size: cover;
padding: 5rpx 10rpx;
}
.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-tips {
height: 45rpx;
}
}
.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-slide-nav {
height: 100rpx;
overflow-x: scroll;
display: flex;
align-items: center;
padding: 0 20rpx;
position: relative;
margin-top: 20rpx;
.m-tip {
.m-slide-item {
width: 33%;
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;
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;
width: fit-content;
margin: 0 auto;
}
.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;
}
}
.right {
margin-left: 24rpx;
flex: 1;
.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: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
align-self: flex-start;
.right-son {
width: 48%;
height: 150rpx;
.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;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 26rpx;
border-radius: 12rpx;
overflow: hidden;
.tit {
.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: 18rpx;
margin-left: 23rpx;
margin-top: 29rpx;
margin-bottom: 11rpx;
}
}
.meishi {
color: #fb8314;
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/meishi.png");
.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;
}
}
.wenhua {
color: #fc5425;
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/wenhua.png");
}
.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;
font-weight: bolder;
}
}
.meishi {
color: #fb8314;
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/meishi.png");
}
.zhoubian {
margin-top: 16rpx;
color: #4781fb;
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/zhoubian.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;
}
.tousu {
color: #04a3da;
margin-top: 16rpx;
background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tousu.png");
.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;
}
}
}
.an_sch {
margin-top: 0;
}
::v-deep .u-swiper {
.amt_30 {
margin-top: 0;
}
.u-swiper__indicator {
bottom: 130px;
right: 15px;
}
.h-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 20rpx 12rpx;
}
.indicator {
width: 100px;
height: 4px;
display: flex;
justify-content: space-evenly;
flex-wrap: nowrap;
.indicator__dot {
background-color: #ffffff87;
height: 100%;
margin: 0 5px;
border-radius: 8px;
width: 10px;
height: 4px;
transition: all linear 0.2s;
position: relative;
overflow: hidden;
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
transform: scaleX(0);
transform-origin: left;
transition-property: all;
transition-timing-function: linear;
background-color: #fff;
border-radius: 8px;
.water-flow {
width: 100%;
}
}
}
.list-box {
position: relative;
.indicator__dot--active {
flex: 1;
.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;
&::after {
animation: middle 5s forwards linear;
}
@keyframes middle {
0% {
transform: scaleX(0);
left: 0;
}
100% {
transform: scaleX(1);
left: 0;
}
}
}
}
}
.scroll-boxs {
height: 100vh;
overflow-y: scroll;
}
.no-fixed-box {
position: relative;
top: 500px;
background-color: #fff
}
}
</style>

294
pages/personcenter/personcenter.vue
Unescape View File

@ -1,182 +1,186 @@
<template>
<view class="m-content" :style="{ 'background-image': `url(${haedBg})` }">
<view class="headBox">
<!-- #ifdef MP -->
<!-- 登录 -->
<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30 user-head-box">
<view class="user-head" v-if="userInfo.accessToken">
<view class="u-m-r-20">
<view class="avatar u-flex" style="justify-content: center">
<image class="head-head" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/touxiang.png"></image>
</view>
</view>
<view class="u-flex-1">
<view class="nickName u-flex">
<view class="name u-m-r-10" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
<view class="name u-m-r-10" v-else>游客</view>
</view>
<view class="detail" v-if="userInfo.phone">手机号：{{ userInfo.phone | phone }}</view>
<view class="detail" v-else>手机号:未绑定</view>
<view class="m-content" :style="{ 'background-image': `url(${haedBg})` }">
<view class="headBox">
<!-- #ifdef MP -->
<!-- 登录 -->
<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30 user-head-box">
<view class="user-head" v-if="userInfo.accessToken">
<view class="u-m-r-20">
<view class="avatar u-flex" style="justify-content: center">
<image class="head-head" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/touxiang.png">
</image>
</view>
</view>
<view class="user-head" v-else>
<view class="u-m-r-20">
<view class="avatar u-flex" style="justify-content: center">
<image class="head-head" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/touxiang.png"></image>
</view>
<view class="u-flex-1">
<view class="nickName u-flex">
<view class="name u-m-r-10" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
<view class="name u-m-r-10" v-else>游客</view>
</view>
<view class="u-flex-1" @click="openLogin">
<view class="u-font-lg" style=" font-weight: bold">请点击登录</view>
<view class="detail">登录后享受更好的服务体验</view>
<view class="detail" v-if="userInfo.phone">手机号：{{ userInfo.phone | phone }}</view>
<view class="detail" v-else>手机号:未绑定</view>
</view>
</view>
<view class="user-head" v-else>
<view class="u-m-r-20">
<view class="avatar u-flex" style="justify-content: center">
<image class="head-head" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/touxiang.png">
</image>
</view>
</view>
<view class="u-flex-1" @click="openLogin">
<view class="u-font-lg" style=" font-weight: bold">请点击登录</view>
<view class="detail">登录后享受更好的服务体验</view>
</view>
</view>
<!-- #endif -->
</view>
<view class="order-btn-box">
<view class="left" @click="goPage('ticketOrder')">
<image src="/static/animg/personCenter/senceDd.png"></image>
<view class="top">景区订单</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
<!-- #endif -->
</view>
<view class="my-order">我的订单</view>
<view class="order-btn-box">
<view class="left" @click="goPage('ticketOrder')">
<image src="/static/animg/personCenter/senceDd.png"></image>
<view class="top">景区订单</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
<view class="left rights" @click="goPage('hotelOrder')">
<image src="/static/animg/personCenter/hotelDd.png"></image>
</view>
<view class="left rights" @click="goPage('hotelOrder')">
<image src="/static/animg/personCenter/hotelDd.png"></image>
<view class="top">酒店订单</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
<view class="top">酒店订单</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
</view>
<view class="m-my-menu-list">
<view class="btn-item" hover-class="active-btn" @click="goPage('yijian')">
<view class="btn-img">
<image src="/static/animg/personCenter/jianyi.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">我的建议</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
<view class="m-my-menu-list">
<view class="btn-item" :hover-class="active - btn" @click="goPage('yijian')">
<view class="btn-img">
<image src="/static/animg/personCenter/jianyi.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">我的建议</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
<view class="btn-item" hover-class="active-btn" @click="goPage('tousu')">
<view class="btn-img">
<image src="/static/animg/personCenter/tousu.png" mode="widthFix"></image>
</view>
<view class="btn-item" :hover-class="active - btn" @click="goPage('tousu')">
<view class="btn-img">
<image src="/static/animg/personCenter/tousu.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">我的投诉</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
<view class="btn-left">
<view class="btn-text">我的投诉</view>
</view>
<view class="btn-item" :hover-class="active - btn" @click="makeCall">
<view class="btn-img">
<image src="/static/animg/personCenter/kefu.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">客服电话</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
<view class="btn-item" hover-class="active-btn" @click="makeCall">
<view class="btn-img">
<image src="/static/animg/personCenter/kefu.png" mode="widthFix"></image>
</view>
<view class="btn-item">
<button class="btns" open-type="share" plain>
<view class="btn-img">
<image src="/static/animg/personCenter/fenxiang.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">分享推荐</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</button>
<view class="btn-left">
<view class="btn-text">客服电话</view>
</view>
<view class="btn-item" :hover-class="active - btn" @click="goPage('about')">
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
<view class="btn-item" hover-class="active-btn">
<button class="btns" open-type="share" plain>
<view class="btn-img">
<image src="/static/animg/personCenter/about.png" mode="widthFix"></image>
<image src="/static/animg/personCenter/fenxiang.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">关于“E鹿悦游”</view>
<view class="btn-text">分享推荐</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</button>
</view>
<view class="btn-item" hover-class="active-btn" @click="goPage('about')">
<view class="btn-img">
<image src="/static/animg/personCenter/about.png" mode="widthFix"></image>
</view>
<view class="btn-left">
<view class="btn-text">关于“E鹿悦游”</view>
</view>
<view class="right"><u-icon name="arrow-right" size="13"></u-icon></view>
</view>
<f-login></f-login>
</view>
<f-login></f-login>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
haedBg: this.$config.ROOTPATH + "/upload/image/2024/mapIcon/daolan/mybg.png"
};
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: 'E鹿悦游',
path: '/pages/index/index'
}
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
haedBg: this.$config.ROOTPATH + "/upload/image/2024/mapIcon/daolan/mybg.png"
};
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: 'E鹿悦游',
path: '/pages/index/index'
}
},
computed: {
...mapState(['PrimaryColor', 'userInfo']),
freeSpecsButtonBackground() {
return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
}
},
methods: {
...mapMutations(['setLoginPopupShow']),
openLogin() {
this.judgeLogin();
},
computed: {
...mapState(['PrimaryColor', 'userInfo']),
freeSpecsButtonBackground() {
return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
}
makeCall() {
uni.makePhoneCall({
phoneNumber: '0311-83886677' //仅为示例
});
},
methods: {
...mapMutations(['setLoginPopupShow']),
openLogin() {
this.judgeLogin();
},
makeCall() {
uni.makePhoneCall({
phoneNumber: '0311-83886677' //仅为示例
});
},
goPage(val) {
switch (val) {
case 'ticketOrder':
this.onTokenJump('/subPageC/order/order', 'navigateTo')
break;
case 'yijian':
this.onTokenJump('/subPageB/suggest/sug_list?type=2', 'navigateTo')
break;
case 'tousu':
this.onTokenJump('/subPageB/suggest/sug_list?type=1', 'navigateTo')
break;
case 'about':
uni.navigateTo({
url: '/subPageA/personcenter/aboutus'
});
break;
}
goPage(val) {
switch (val) {
case 'ticketOrder':
this.onTokenJump('/subPageC/order/order', 'navigateTo')
break;
case 'yijian':
this.onTokenJump('/subPageB/suggest/sug_list?type=2', 'navigateTo')
break;
case 'tousu':
this.onTokenJump('/subPageB/suggest/sug_list?type=1', 'navigateTo')
break;
case 'about':
uni.navigateTo({
url: '/subPageA/personcenter/aboutus'
});
break;
}
}
};
}
};
</script>
<style lang="scss" scoped>
<style lang="scss"
scoped>
.myInfo {
// 这里设置高度，上拉显示菜单栏---正式环境删除
min-height: 2000rpx;
}
.headBox {
padding-top: 128rpx;
padding-top: 190rpx;
border-radius: 50% / 0 0 5% 5%;
overflow: hidden;
.avatar {
width: 150rpx;
height: 150rpx;
width: 180rpx;
height: 180rpx;
border-radius: 50%;
margin-right: 25rpx;
@ -387,14 +391,14 @@
box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(9, 131, 255, 0.1);
border-radius: 20rpx;
height: fit-content;
padding: 40rpx;
padding: 40rpx 10rpx;
margin: 0 20rpx;
.btn-item {
display: flex;
align-items: center;
padding: 10rpx 0;
border-radius: 25rpx;
padding: 30rpx 30rpx;
.btns {
background-color: unset;
@ -446,7 +450,7 @@
.btn-left {
display: flex;
flex:1;
flex: 1;
align-items: center;
justify-content: space-between;
padding: 10rpx 20rpx 10rpx 0;
@ -464,8 +468,18 @@
}
.active-btn {
background-color: #eee;
background-color: #f9f9f9;
}
}
}
.my-order {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 32rpx;
color: #1B1B1B;
margin-left: 40rpx;
margin-top: 32rpx;
margin-bottom: 28rpx;
}
</style>

125
pages/welcome/welcome.vue
Unescape View File

@ -0,0 +1,125 @@
<template>
<view class="welcome-page" v-if="imgSrc">
<image @click="gotoDetail" :src="imgSrc" mode="aspectFill"></image>
<view class="bottom-box">
<view>{{ time }}</view>
<view @click="gotoIndex">跳过</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc: '',
time: 5,
timer: null
}
},
onLoad() {
this.getImgSrc()
this.countDown()
},
onUnload() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
methods: {
/**
* 模拟接口请求
*/
mockApi() {
return new Promise(resolve => {
setTimeout(() => {
resolve({
code: 200,
data: "https://img.zcool.cn/community/0110a9585f82dea8012060c88fe75c.jpg@1280w_1l_2o_100sh.jpg"
})
}, 200)
})
},
/**
* 获取图片地址
*/
getImgSrc() {
// try {
// const res = await this.mockApi()
this.imgSrc = this.$config.ROOTPATH + "/upload/image/2024/mapIcon/daolan/welcome.png"
// } catch (e) {
// //TODO handle the exception
// console.log(e);
// }
},
/**
* 跳转到首页
*/
gotoIndex() {
uni.reLaunch({
url: '/pages/index/index'
});
},
gotoDetail(){
},
/**
* 倒计时
*/
countDown() {
this.time = 5
this.timer = setInterval(() => {
this.time--;
if (this.time < 1) {
clearInterval(this.timer)
this.time = 0
this.gotoIndex()
}
}, 1000)
}
}
}
</script>
<style lang="scss"
scoped>
.welcome-page {
position: relative;
width: 100vw;
height: 100vh;
image {
display: block;
width: 100%;
height: 100%;
}
.bottom-box {
position: absolute;
left: 0;
bottom: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 60rpx;
box-sizing: border-box;
view {
width: 120rpx;
height: 64rpx;
background-color: rgba(0, 0, 0, .3);
border-radius: 999rpx;
text-align: center;
line-height: 64rpx;
color: #fff;
font-size: 28rpx;
}
}
}
</style>

1459
pages/zhoubian/zhoubian/zhoubian.vue
View File

File diff suppressed because it is too large Load Diff

17
static/ancss/an.css
Unescape View File

@ -288,7 +288,6 @@ page {
/* 轮播图 */
.home_pic_static {
width: 100%;
height: 94vh;
position: relative;
}
@ -349,10 +348,10 @@ s首页菜单
position: absolute;
z-index: 6;
width: 100%;
height: 305rpx;
height: 280rpx;
bottom: 0;
left: 0;
background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.05));
background: linear-gradient(0deg, #0000008a, rgba(0, 0, 0, 0.05));
}
.home_nav_tu {
@ -383,15 +382,16 @@ s首页菜单
.home_serch_1 {
position: absolute;
position: fixed;
z-index: 10;
top: 100rpx;
top: 0;
left: 0;
width: 100%;
height: 50rpx;
border-radius: 60rpx;
height: 145rpx;
padding-bottom: 25rpx;
border-radius: 0rpx;
display: flex;
align-items: center;
align-items: flex-end;
}
.home_serch_2 {
@ -414,6 +414,7 @@ s首页菜单
justify-content: space-around;
background-color: rgb(0 0 0 / 12%);
border-radius: 30rpx;
top: -3px;
}
.sch_2 image {

BIN
static/animg/index/hotel.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 B

BIN
static/animg/index/strategy-guide.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 669 B

4
uni_modules/uview-ui/components/u-swiper/props.js
Unescape View File

@ -120,6 +120,10 @@ export default {
showTitle: {
type: Boolean,
default: uni.$u.props.swiper.showTitle
},
blur:{
type:String,
default:'0px'
}
}
}

14
uni_modules/uview-ui/components/u-swiper/u-swiper.vue
Unescape View File

@ -33,10 +33,11 @@
:easingFunction="easingFunction"
>
<swiper-item
class="u-swiper__wrapper__item"
class="u-swiper__wrapper__item"
v-for="(item, index) in list"
:key="index"
>
<view class="blur-box" :style="{ '-webkit-backdrop-filter': 'blur(' + blur + ')', 'backdrop-filter': 'blur(' + blur + ')'}" @tap="clickHandler(index)"></view>
<view
class="u-swiper__wrapper__item__wrapper"
:style="[itemStyle(index)]"
@ -252,4 +253,15 @@
bottom: 10px;
}
}
.blur-box{
width: 100%;
height: 100%;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
</style>

Write Preview
Loading…
Cancel
Save