Skip to content

M
million
Commit 7711cc7b authored by youjie's avatar youjie
Browse files
Options

no message

parent c63ec54e
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 81 deletions
src/assets/css/home.css
View file @ 7711cc7b
......@@ -387,6 +387,22 @@ ul,li{
}
}
@media (min-width: 1440px) {
.MenuListItem{
bottom: 49px;
}
.MenuListLi.active .MenuListItem{
opacity: 1;
bottom: 70px;
}
.SubMenuListBox{
height: 186px;
}
.MenuListLi.active .SubMenuListBox{
height: 206px;
}
.carousel1-leftImg{
width: 101px;
}
.swipercomSubEnLenR2{
font-size: 1.8rem;
}
......@@ -451,6 +467,9 @@ ul,li{
}
}
@media (min-width: 1800px) {
.MenuListBox li{
padding-top: 40px;
}
.swipercomSubEnLenR2{
font-size: 2rem;
}
......
src/components/home/indexNav.vue
View file @ 7711cc7b
<template>
<!-- @mouseleave="ClearData" -->
<q-page class="relative gap-1 overflow-hidden" @mouseleave="ClearData"
<q-page class="relative gap-1 overflow-hidden animate__animated" @mouseleave="ClearData"
:style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}" style="height: 100vh;">
<div class="absolute top0 right0 bottom0 left0 indexNavFormP row">
<div class="col column carousel1-left relative" @mouseenter="ClearData">
<div class="col column carousel1-left relative" @mouseenter="ClearData">
<div class="row justify-center" @mouseenter="ClearData">
<q-img class="carousel1-leftImg" width="8rem" :src="plugData.Logo"/>
<q-img class="carousel1-leftImg" :src="plugData.Logo"/>
</div>
<div class="p-x40 col row justify-center" @mouseenter="ClearData">
<ul class="row no-wrap MenuListBox row justify-center">
<template v-for="(item,index) in plugData.MenuList">
<li class="MenuListLi row justify-center cursor-pointer animate__animated"
:class="[CurrentIndex>=0&&CurrentIndex==index?'animate__bounceInUp active':'animate__bounceOutUp']"
<li class="MenuListLi row justify-center cursor-pointer"
:class="[CurrentIndex>=0&&CurrentIndex==index?' active':'']"
>
<div class="cursor-pointer flex flex-col items-center relative justify-end"
<div class="cursor-pointer flex flex-col items-center relative"
v-on:mouseenter="handleMouseEnter($event,index)">
<div class="row min-w-50px">
<div class="font-serifEn writing-modes-vertical p text-gray-700">
......@@ -26,11 +26,11 @@
<span class="inline-block tracking-normal fontW100 remText">{{item.MenuSubName}}</span>
</p>
</div>
<div class="MenuListItem animate__animated"
:class="[CurrentIndex==index?'animate__bounceInUp':'animate__bounceOutUp']"></div>
<div class="MenuListItem"
:class="[CurrentIndex==index?'':'']"></div>
</div>
<div class="row justify-center items-center SubMenuListBox q-py-lg"
:class="[CurrentIndex==index?'animate__bounceInUp':'animate__bounceOutUp']">
:class="[CurrentIndex==index?'':'']">
<div class="row justify-center">
<template v-for="(items,i) in item.SubMenuList">
<a class="SubMenuListText relative writing-modes-vertical
......@@ -59,8 +59,8 @@
<div class="carousel1-right overflow-hidden relative"
:class="[windowWidth>1280?'col':'col-12']" @mouseenter="ClearData">
<template v-if="windowWidth>=768">
<q-img class="carousel1-rightImg animate__animated" @mouseenter="ClearData"
:class="[oldCoverImg!=coverImg?'active animate__bounceInUp':'animate__bounceOutUp']"
<q-img class="carousel1-rightImg" @mouseenter="ClearData"
:class="[oldCoverImg!=coverImg?'active':'']"
:src="coverImg" fill="contain"/>
</template>
<template v-else>
......@@ -79,6 +79,40 @@
<q-img class="MBgColorImg" :src="plugData.MLogo" fill="contain"></q-img>
</div>
</template>
<template v-if="windowWidth<1280">
<span class="absolute indexNavxcText writing-modes-vertical cursor-pointer" @click="isMenu=true">行程线路</span>
<div class="absolute indexNavxcBox" v-if="isMenu">
<div class="relative" style="height: 100vh;">
<i class="iconfont absolute indexNavxcIcon cursor-pointer" style="right: 20px;top: 20px;font-size: 25px; "
@click.stop="isMenu=false">×</i>
<div class="q-pb-lg">
<div class="text-center indexNavxcT">
<p class="font-serifEn text-stone q-pb-sm">Travel Line</p>
<p class="font-serif h3 text-gray-900">
<span class="inline-block">行程线路</span></p></div>
</div>
<!-- <ul class="q-px-sm row indexNavxcTitleM">
<template v-for="(item,index) in plugData.MenuList">
<li @click="CurrentIndex=index">{{item.MenuName}}</li>
</template>
</ul> -->
<ul class="row indexNavxcTM">
<template v-for="(item,index) in plugData.MenuList">
<li v-for="(items,i) in item.SubMenuList" @click.stop="OpenNewUrl(items.LinkUrl)">{{items.MenuName}}</li>
</template>
</ul>
<ul class="BottomListBox absolute row justify-center" style="bottom: 0;">
<li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
@click.stop="OpenNewUrl(item.LinkUrl)">
<a class="text-grey-7 transition-base">
<span class="text-xs font-serif tracking-1 pointer-events-none">{{item.LinkTitle}}</span>
</a>
</li>
</ul>
</div>
</div>
</template>
</div>
</div>
......@@ -86,9 +120,10 @@
</template>
<script>
export default {
props: ['plugData','Current','windowWidth'],
props: ['plugData','Current','windowWidth','top','currentHeight'],
data() {
return {
isMenu: false,
CurrentIndex: null,
coverImg: '',
oldCoverImg: '',
......@@ -134,6 +169,50 @@ export default {
}
</script>
<style lang="scss">
.indexNavxcTitleM{
font-size: 15px;
}
.indexNavxcTM{
font-size: 15px;
}
.indexNavxcTM li {
border-radius: 3px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0 5px;
background: $secondary;
color: #fff;
}
.indexNavxcT p:nth-child(2){
font-size: 25px;
}
.indexNavxcT p:first-child{
font-size: 18px;
}
.indexNavxcT{
padding-top: 50%;
}
.indexNavxcIcon{
color: $secondary;
}
.indexNavxcBox{
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
background: #fff;
}
.indexNavxcText{
right: 0;
top: 50%;
z-index: 3;
letter-spacing: 3px;
background: $secondary;
padding: 8px 8px;
color: #fff;
}
@media only screen and (max-width: 1280px) {
.carousel1-left{
display: none;
......@@ -151,6 +230,7 @@ export default {
}
.carousel1-leftImg{
width: 128px;
display: block;
margin-top: 6rem;
}
......@@ -167,7 +247,7 @@ export default {
}
.MenuListItem{
position: absolute;
bottom: -3.5rem;
bottom: -65px;
left: 10px;
opacity: 0;
transition: .4s;
......@@ -183,7 +263,7 @@ export default {
}
.SubMenuListBox{
width: 100%;
height: 16rem;
height: 196px;
transition: .4s;
opacity: 0;
position: absolute;
......@@ -194,12 +274,12 @@ export default {
}
.MenuListLi.active .MenuListItem{
opacity: 1;
bottom: -1rem;
bottom: -16px;
}
.MenuListLi.active .SubMenuListBox{
position: absolute;
z-index: 999;
height: 18.5rem;
height: 296px;
opacity: 1;
}
......
src/components/home/indexRoll1.vue
View file @ 7711cc7b
......@@ -29,14 +29,12 @@
@slideChangeTransitionEnd="slideChangeTransitionEnd">
<template v-for="(item, index) in plugData.NavList">
<swiper-slide :key="index" :index="index"
class="cursor-pointer">
class="">
<div class="relative" :style="{'background':`url(${item.FileUrl})no-repeat`,'background-size':'cover'}"
style="border-radius:10px;" @click.stop="OpenNewUrl(item.LinkUrl)" @mousemove.stop="handleMouseLeave">
<q-img alt="image" :ratio="16/9" fill="cover"/>
<!-- <template v-if="item.FileType==1">
<template v-if="item.FileType==1">
<q-img :src="item.FileUrl" no-default-spinner alt="image" :ratio="16/9" fill="cover"
v-if="index==0||index==(plugData.NavList.length-1)"
@click.stop="OpenNewUrl(item.LinkUrl)">
@click.stop="OpenNewUrl(item.LinkUrl)" class="cursor-pointer">
<template v-slot:error>
<div class="absolute inSliMLogo">
<q-img v-if="plugData.MLogo" :src="plugData.MLogo"
......@@ -44,21 +42,19 @@
</div>
</template>
</q-img>
<q-img v-else :src="item.FileUrl" alt="image" :ratio="16/9" fill="cover"
@click.stop="OpenNewUrl(item.LinkUrl)"/>
</template>
<q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="cursor-pointer" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
</q-img> -->
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
</q-img>
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center" @mousemove.stop="handleMouseLeave">
<div class="swipercomSubEnNum row" v-if="windowWidth>=992">
<span class="swipercomSubEnN relative block font-serifEn">{{index>9?index+1:'0'+(index+1)}}</span>
<div class="relative" style="top: -1px;"></div>
<span class="swipercomSubEnT relative block font-serifEn text-right">{{plugData.NavList.length>9?plugData.NavList.length:'0'+plugData.NavList.length}}</span>
</div>
<template v-else>
<i class="swipercomSubEnR iconfont iconpreviewright text-secondary cursor-pointer" ></i>
<i class="swipercomSubEnR iconfont iconpreviewright text-secondary cursor-pointer" @click.stop="OpenNewUrl(item.LinkUrl)"></i>
</template>
</div>
</div>
......@@ -115,7 +111,7 @@
swiper,
swiperSlide,
mouse },
props: ['plugData','windowWidth'],
props: ['plugData','windowWidth','top','RollingHeight'],
data() {
return {
X: 0,
......@@ -237,7 +233,9 @@
let width = this.windowWidth/2
if(el.x<width){
this.Current = 'left'
}else if(el.x>width) this.Current = 'right'
}else if(el.x>width) {
this.Current = 'right'
}
this.X = el.x
this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
},
......
src/components/home/indexRoll2.vue
View file @ 7711cc7b
......@@ -95,7 +95,7 @@
import "swiper/dist/css/swiper.css";
export default {
components: { swiper, swiperSlide },
props: ['plugData','windowWidth'],
props: ['plugData','windowWidth','top','currentHeight'],
data() {
return {
slide: 1,
......
src/components/home/indexSlider.vue
View file @ 7711cc7b
<template>
<div class="no-course" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
<div class="no-course animate__animated duration2" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
@click="carousel(Current)">
<div class="relative gap-1 overflow-hidden"
:style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}">
:style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}"
:class="[currentHeight+top>=top?'':'']">
<div class="homeContainer indexSliderContainer" @click.stop="carousel(Current)"
:class="[windowWidth<=768?'active':'']">
<div
......@@ -23,8 +24,9 @@
{{plugData.Describe}}
</div>
</div>
<div v-if="FileUrlList&&FileUrlList.length>0" class="indexSlider-right h100 animate__fadeInUp" @click.stop="">
<!-- animated -->
<div v-if="FileUrlList&&FileUrlList.length>0" class="indexSlider-right h100" @click.stop=""
>
<q-carousel
v-model="slide"
infinite
......@@ -35,10 +37,9 @@
:swipeable="windowWidth>=992?false:true"
>
<template v-for="(item,index) in FileUrlList">
<!-- :class="[slide==index+1?'animate__bounceInUp':'animate__bounceOutUp']" -->
<q-carousel-slide :key="index" :name="index+1" class="indexSliderImgC">
<div class="col relative h100"
:class="[slide==index+1?'animate__bounceInUp':'animate__bounceOutUp']">
:class="[slide==index+1?'':'']">
<q-img class="cursor-pointer" :ratio="16/9" v-if="item.FileType==1" :src="item.FileUrl" fill="cover" @click.stop="OpenNewUrl(item.LinkUrl)">
<template v-slot:error>
<div class="absolute inSliMLogo">
......@@ -113,7 +114,7 @@
import mouse from "./mouse";
export default {
components: { mouse },
props: ['plugData','windowWidth'],
props: ['plugData','windowWidth','top','currentHeight'],
data() {
return {
X: 0,
......@@ -170,15 +171,15 @@ export default {
handleMouseMove(el) {
if(this.windowWidth<768) return
if(!this.isRight) this.isRight = true
// let x = el.x+(document.documentElement.scrollLeft || document.body.scrollLeft)
// let y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
// if(y<950||y>1620) this.isRight = false
// else this.isRight = true
let width = this.windowWidth/2
if(el.x<width){
this.Current = 'left'
}else if(el.x>width) this.Current = 'right'
this.X = el.x-50
this.X = el.x+50
}else if(el.x>width) {
this.Current = 'right'
this.X = el.x-50
}
this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
},
handleMouseLeave(){
......
src/components/navs/city-category.vue
View file @ 7711cc7b
......@@ -543,24 +543,17 @@ export default {
this.CommonJump("/city/" + item.Id);
},
handleCategoryChage(item) {
if(this.$route.path==='searchProduct'){
this.CommonJump("/searchProduct", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
categoryId: item.Id,
});
}else{
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
categoryId: item.Id,
});
}
if(this.isSearch) {
window.location.reload()
}
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
categoryId: item.Id,
});
setTimeout(()=>{
if(this.isSearch) {
window.location.reload()
}
},300)
},
mouseenterAddress() {
this.menuFocusAll = 0;
......
src/layouts/HomeLayout.vue
View file @ 7711cc7b
......@@ -28,7 +28,7 @@
</style>
<template>
<q-layout view="hHh lpr fFf">
<hor-big-one v-if="isSearch" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<hor-big-one v-if="isSearch&&windowWidth>1280" :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
<q-page-container>
<div class="flex justify-between" v-if="showUserInfo" :style="$q.platform.is.desktop ? 'width: 1200px; margin: 0 auto' : ''">
......@@ -85,7 +85,8 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
RB_Group_Id: 0,
//当天
ToDay: "",
isShowTop: false
isShowTop: false,
windowWidth: window.innerWidth,
};
},
watch: {
......@@ -93,7 +94,11 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
this.showUserInfo = Boolean(this.$route.meta.isUserCenter)
}
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
created() {
window.addEventListener('resize', this.handleResize);
this.showUserInfo = Boolean(this.$route.meta.isUserCenter)
var nowDay = this.formatDate2(new Date());
this.ToDay = nowDay.CYear + "-" + nowDay.CMonth + "-" + nowDay.CDay;
......@@ -102,7 +107,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
})
},
mounted() {
this.isSearch = this.$router.history.current.path === "/searchProduct"||this.$router.history.current.path === "/search"
this.isSearch = this.$router.history.current.path != "/"&&this.$router.history.current.path != "/index"
window.addEventListener('scroll', this.getScrollHeight, false);
//判断是不是同一天
if (localStorage.ToDay) {
......@@ -138,6 +143,9 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
}
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
},
//点击回到顶部
hangleGoUp() {
let nowTop = document.body.scrollTop || document.documentElement.scrollTop; // 获取当前滚动条位置
......
src/pages/home/index.vue
View file @ 7711cc7b
<template>
<q-page>
<el-scrollbar ref="scrollRef"
@scroll="onChange" name="scrollRef" style="width: 100%;height: 100%;overflow: hidden;">
<div>
<div style="width: 100%;overflow: hidden;" @wheel="handleScroll">
<!-- <el-scrollbar ref="scrollRef"
@scroll="onChange" name="scrollRef">
<div></div>
</el-scrollbar> -->
<template v-for="(item, index) in HomeData">
<indexNav :key="index" v-if="item.Id == 'index_nav'" class="homeRefs"
:plugData="item.plugData" :windowWidth="windowWidth"></indexNav>
<indexSlider :key="index" v-if="item.Id == 'index_slider1'" class="homeRefs"
:plugData="item.plugData" :windowWidth="windowWidth"></indexSlider>
<indexRoll1 :key="index" v-if="item.Id == 'index_roll1'" class="homeRefs"
:plugData="item.plugData" :windowWidth="windowWidth"></indexRoll1>
<indexRoll2 :key="index" v-if="item.Id == 'index_roll2'" class="homeRefs"
:plugData="item.plugData" :windowWidth="windowWidth"></indexRoll2>
<indexNav :key="index" v-if="item.Id == 'index_nav'" :id="`homeRefs_${index}`"
:plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexNav>
<indexSlider :key="index" v-if="item.Id == 'index_slider1'" :id="`homeRefs_${index}`"
:plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexSlider>
<indexRoll1 :key="index" v-if="item.Id == 'index_roll1'" :id="`homeRefs_${index}`"
:plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexRoll1>
<indexRoll2 :key="index" v-if="item.Id == 'index_roll2'" :id="`homeRefs_${index}`"
:plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexRoll2>
</template>
</div>
</el-scrollbar>
</q-page>
</div>
</template>
<script>
import indexNav from "../../components/home/indexNav";
......@@ -46,6 +46,7 @@ export default {
isScrolling: false,
top: 0,
activeMenu: 0,
currentHeight: 0,
}
},
watch: {
......@@ -60,14 +61,37 @@ export default {
window.addEventListener('resize', this.handleResize);
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
this.init()
this.timer = setInterval(() => {
this.init()
}, 100)
},
methods: {
handleScroll(e) {
let temp = this.getScroll();
this.currentHeight = temp.top
let isScroll = this.$route.path!='/index'&&this.$route.path!='/'
if (isScroll) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
},
onChange(e){
console.log(e.scrollTop,'----')
// console.log(e.scrollTop,'----')
const isDictionDown = e.scrollTop-this.lastScrollTop>0
this.scrollArea.isDictionDown = isDictionDown
this.scrollArea.pagesTopO = e.scrollTop
......@@ -132,12 +156,29 @@ export default {
(res) => {
if (res.data.resultCode == 1) {
if (res.data.data) {
let arrList = function(list){
list.forEach(x => {
x.top = 0
});
}
arrList(res.data.data)
this.HomeData = res.data.data;
var jsonData = JSON.stringify(res.data.data);
window.localStorage.setItem("HomeData", jsonData);
setTimeout(()=>{
this.$q.loading.hide()
},500)
setTimeout(()=>{
this.HomeData.forEach((x,index)=>{
var object = document.getElementById(`homeRefs_${index}`);
x.top = object.getBoundingClientRect().top
// console.log(object,'---top')
// x.top = this.$refs[`homeRefs_${index}`].getBoundingClientRect().top
})
// console.log(this.$refs.scrollRef,'=========')
},1000)
}
}
this.$nextTick(()=>{
......
src/router/routes.js
View file @ 7711cc7b
......@@ -4,13 +4,13 @@ const routes = [{
import ('layouts/HomeLayout.vue'),
children: [{
path: '',
meta: { title: '首页' },
meta: { title: '' },
component: () =>
import ('pages/home/index.vue')
},
{
path: '/index',
meta: { title: '首页' },
meta: { title: '' },
component: () =>
import ('pages/home/index.vue')
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment