Commit 1df18cf4 authored by youjie's avatar youjie

no message

parent bd5570e2
......@@ -9,13 +9,13 @@ export default {
name: "App",
methods: {
disableZoom(event){
if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
if ((event.metaKey||event.ctrlKey) && (event.key === '+' || event.key === '-' || event.key === '=')) {
event.preventDefault(); // 阻止默认行为
console.log('缩放功能已禁用');
}
},
disableZoomByWheel(event) {
if (event.ctrlKey) {
if (event.metaKey||event.ctrlKey) {
event.preventDefault(); // 阻止缩放
console.log('鼠标滚轮缩放功能已禁用');
}
......@@ -23,7 +23,7 @@ export default {
adjustZoom() {
console.log('execute...')
if(window.innerWidth>768){
const scale = window.devicePixelRatio; // 获取用户的系统缩放比例
const scale = this.$q.platform.is.win?window.devicePixelRatio:1; // 获取用户的系统缩放比例
document.body.style.zoom = 1 / scale; // 设置缩放以抵消系统缩放
// 获取实际视口高度和宽度
......
......@@ -45,10 +45,10 @@ ul,li{
}
.remTetil{
font-size: 18px;
font-size: 16px;
}
.remText{
font-size: 16px;
font-size: 11px;
}
.remSubText{
......
......@@ -87,13 +87,19 @@
<div class="carousel1-right overflow-hidden relative"
:class="[$q.platform.is.desktop?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
<template v-if="windowWidth>=768">
<q-img v-if="ImgObj.FileType!=2" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
<template v-if="FileUrlList[slide-1]&&FileUrlList[slide-1].FileType">
<q-img v-show="FileUrlList[slide-1].FileType==1" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
:class="[oldCoverImg!=coverImg?'active':'']"
:src="coverImg" fill="contain"/>
<q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="carousel1-rightImg" style="width: 100%;" :src="coverImg" frameborder="0"
allowfullscreen @mouseenter="ClearData"/>
</q-img>
:src="FileUrlList[slide-1].FileUrl" fill="contain"/>
<div v-show="FileUrlList[slide-1].FileType==2" class="carousel1-rightImg carousel1-rightV relative"
:class="[oldCoverImg!=coverImg?'active':'']">
<!-- :autoplay="PlayBack" -->
<video :src="FileUrlList[slide-1].FileUrl" muted controls
ref="videoPlayer"
@timeupdate="(event)=>handleTimeUpdate(event,`videoPlayer`)"
@ended="(event)=>handleEnded(event,`videoPlayer`)"></video>
</div>
</template>
</template>
<template v-else>
<q-carousel
......@@ -104,7 +110,7 @@
style="height: 100%;"
>
<template v-for="(item,index) in FileUrlList">
<q-carousel-slide :name="index+1" :img-src="item" />
<q-carousel-slide :name="index+1" :img-src="item.FileUrl" />
</template>
</q-carousel>
<div class="MBgColorBox column justify-center items-center">
......@@ -112,6 +118,8 @@
<p class="font-serifEn fz20 q-pt-lg text-white opacity-80">{{plugData.SubTitle}}</p>
</div>
</template>
<div class="absolute indexNavxcText cursor-pointer"
:class="[$q.platform.is.desktop?'':'writing-modes-vertical active']"
@click="isMenu=true">
......@@ -319,6 +327,7 @@ export default {
type1: '',
type2: '',
LinkUrl: '',
PlayBack: true
}
},
watch: {
......@@ -332,42 +341,84 @@ export default {
},
mounted() {
this.ImgObj = this.plugData.MenuList[0]
this.coverImg = this.plugData.MenuList[0].FileUrl
let arrList = function(list){
list.forEach(x=>{
x.currentTime = 0
})
}
arrList(this.plugData.MenuList)
this.plugData.MenuList.forEach(x=>{
if(x.FileUrl){
this.FileUrlList.push(x.FileUrl)
this.FileUrlList.push(x)
}
})
this.ImgObj = this.plugData.MenuList[0]
this.coverImg = this.plugData.MenuList[0].FileUrl
if (localStorage.baseifo) {
var jObj = JSON.parse(window.localStorage.getItem('baseifo'))
this.CategoryList = jObj.CategoryList
this.CategoryList.splice(0,1)
}
setTimeout(()=>{
if(this.FileUrlList[this.slide-1].FileType==2){
this.playVideo('videoPlayer')
}
},500)
},
methods: {
// 监听视频播放进度的回调
handleTimeUpdate(event,formName) {
const audio = event.target;
if (!audio.duration) return;
let video = this.$refs[formName]
if(video&&!video.paused){
this.FileUrlList[this.slide-1].currentTime = audio.currentTime
}
},
// 视频播放结束调用的回调
handleEnded(event,formName) {
if(this.FileUrlList[this.slide-1].currentTime) this.FileUrlList[this.slide-1].currentTime = 0
},
playVideo(formName){
let i = this.slide-1
// console.log(this.FileUrlList[i],'----')
// return
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[formName]
if(video){
if(video.paused) {
if(this.FileUrlList[i].currentTime){
video.currentTime = this.FileUrlList[i].currentTime
}
// console.log('继续播放')
video.play()
}else {
// console.log('暂停')
video.pause()
}
}
}
},
goUrl(){
let URL = ''
if(this.LinkUrl) {
URL = `${this.LinkUrl.indexOf('/#/searchProduct')!=-1?this.LinkUrl:this.LinkUrl+'?'}${this.searchKey?'&qsearchKey='+this.searchKey:''}${this.searchDate?'&qsearchDate='+this.searchDate:''}${this.searchEndDate?'&qsearchEndDate='+this.searchEndDate:''}${this.type1&&this.type2?'&categoryId='+this.type2:this.type1&&!this.type2?'&categoryId='+this.type1:''}`
console.log(URL,'----')
// console.log(URL,'----')
this.OpenNewUrl(URL)
}
else {
this.OpenNewUrl('http://www.oytour.com/#/searchProduct')
// this.CommonJump('/searchProduct',{})
// setTimeout(()=>{
// window.location.reload()
// },300)
}
},
getType2(e){
console.log(this.type2,'----type2222222')
// console.log(this.type2,'----type2222222')
},
getType1(e){
this.optionsList = []
console.log(this.type1,'----type111111')
// console.log(this.type1,'----type111111')
let list = this.CategoryList.filter(x=>{
if(x.Id==e){
this.lineUrl = x.LinkUrl
......@@ -455,14 +506,16 @@ export default {
this.oldCoverImg = JSON.parse(JSON.stringify(this.coverImg))
if(this.CurrentIndex==index) return
else if(index>=0) {
this.ImgObj = {}
this.CurrentIndex = null
setTimeout(()=>{
this.CurrentIndex = index
if(this.plugData.MenuList[index].FileUrl) {
this.coverImg = this.plugData.MenuList[index].FileUrl
this.ImgObj = this.plugData.MenuList[index]
}
this.slide = index+1
this.coverImg = this.FileUrlList[index].FileUrl
setTimeout(()=>{
if(this.FileUrlList[index].FileType==2){
this.playVideo('videoPlayer')
}
},500)
},300)
}
},
......@@ -472,7 +525,7 @@ export default {
}
}
</script>
<style scoped>
<style lang="scss" scoped>
::v-deep .indexNavxcBoxS .q-field__control{
height: 45px;
}
......@@ -482,15 +535,18 @@ export default {
::v-deep .indexNavxcBoxS .q-field--auto-height .q-field__control{
min-height: 45px;
}
/* ::v-deep .indexNavxcBoxS.active .q-field__control{
height:40px;
.carousel1-rightV{
background-color: $primary;
}
::v-deep .indexNavxcBoxS.active .q-field--auto-height .q-field__native{
min-height: 40px;
.carousel1-rightV video{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
::v-deep .indexNavxcBoxS.active .q-field--auto-height .q-field__control{
min-height: 40px;
} */
</style>
<style lang="scss">
.indexNavxcBoxCenter{
......@@ -677,6 +733,7 @@ export default {
.carousel1-rightImg.active{
transform: scale(1);
}
.MBgColorBox{
position: absolute;
top: 0;
......
......@@ -44,9 +44,13 @@
</template>
</q-img>
</template>
<q-img v-else alt="" :ratio="16/9" fill="cover">
<q-video class="" style="width: 100%;" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenUrl(item.LinkUrl,index)"/>
<q-img v-if="item.FileType==2" :ratio="16/9" class="carousel1-rightV"
@click.stop="OpenUrl(item.LinkUrl,index)">
<!-- autoplay -->
<video :src="item.FileUrl" muted
:ref="`videoPlayerRoll1${index}`"
@timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerRoll1${index}`,index)"
@ended="(event)=>handleEnded(event,`videoPlayerRoll1${index}`,index)"></video>
</q-img>
<div class="swipercomSubEnLen absolute bg-white row items-center justify-center">
<div class="swipercomSubEnNum row" v-if="windowWidth>=992">
......@@ -142,7 +146,7 @@
//设置能够同时显示的数量(可设置 auto)
speed: 1000,
autoplay: {
delay: 6000,
delay: 60000000,
stopOnLastSlide: false,
disableOnInteraction: false
},
......@@ -175,6 +179,7 @@
swiper: null,
swiper2: null,
activeIndex: 0,
realIndex: 1,
}
},
watch: {
......@@ -182,10 +187,24 @@
handler(val, oldval) {
}
},
realIndex:{
handler(val, oldval) {
setTimeout(()=>{
this.playVideo(`videoPlayerRoll1${val}`)
},500)
},
immediate: false
}
},
created() {
let arrList = function(list){
list.forEach(x=>{
x.currentTime = 0
})
}
arrList(this.plugData.NavList)
this.plugData.NavList.forEach(x=>{
if(x.FileUrl){
this.FileUrlList.push(x)
......@@ -193,15 +212,55 @@
})
},
mounted() {
setTimeout(() => {
this.swiper = this.$refs.mySwiper.swiper
let swiperInstance = this.$refs.mySwiper.swiper
swiperInstance.loopedSlides = this.FileUrlList.length
swiperInstance.update()
this.playVideo(`videoPlayerRoll1${this.realIndex}`)
}, 500);
},
methods: {
// 监听视频播放进度的回调
handleTimeUpdate(event,formName,index) {
const audio = event.target;
if (!audio.duration) return;
let video = this.$refs[formName]
if(video&&video[0]&&!video[0].paused){
this.FileUrlList[index].currentTime = audio.currentTime
}
},
// 视频播放结束调用的回调
handleEnded(event,formName,index) {
if(this.FileUrlList[index].currentTime) this.FileUrlList[index].currentTime = 0
},
playVideo(formName){
for(let i=0;i<this.FileUrlList.length;i++){
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[`videoPlayerRoll1${i}`]
if(video&&video[0]&&!video[0].paused){
video[0].pause()
}
}
}
let i = this.realIndex
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[formName]
if(video&&video[0]){
if(video[0].paused) {
if(this.FileUrlList[i].currentTime){
video[0].currentTime = this.FileUrlList[i].currentTime
}
// console.log('继续播放')
video[0].play()
}else {
// console.log('暂停')
video[0].pause()
}
}
}
},
OpenUrl(URL,index) {
if(index!=this.slide) return this.carousel(this.Current)
this.OpenNewUrl(URL)
......@@ -211,9 +270,15 @@
},
onSlideChange(){
// 获取当前索引
const swiper = this.$refs.mySwiper.swiper
const activeIndex = this.$refs.mySwiper.swiper.activeIndex;
this.slide = activeIndex
this.realIndex = swiper.realIndex
console.log(swiper.realIndex,'----')
// console.log('当前索引:', activeIndex);
setTimeout(()=>{
this.playVideo(`videoPlayerRoll1${swiper.realIndex+1}`)
},500)
},
carousel(text){
if(this.windowWidth<768) return
......@@ -252,12 +317,21 @@
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.activeL{
cursor: url('../../assets/svg/left.svg'),auto;
cursor: url('../../assets/svg/left.svg')35 35,auto;
}
.activeR{
cursor: url('../../assets/svg/right.svg'),auto;
cursor: url('../../assets/svg/right.svg')35 35,auto;
}
.carousel1-rightV{
width: 100%;
height: 100%;
background-color: $primary;
}
.carousel1-rightV video{
width: 100%;
height: 100%;
}
</style>
<style lang="scss" >
......
......@@ -45,12 +45,19 @@
</template>
</q-img>
</template>
<q-img v-else alt="" :ratio="0.64" fill="cover">
<q-video class="cursor-pointer" style="width: 100%;" :src="item.FileUrl" frameborder="0"
allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
</q-img>
<div class="carousel1-rightV">
<q-img v-show="item.FileType==2" :ratio="0.64">
<!-- autoplay controls-->
<video :src="item.FileUrl" muted
:ref="`videoPlayerRoll2${index}`"
@timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerSli${index}`,index)"
@ended="(event)=>handleEnded(event,`videoPlayerSli${index}`,index)"
@play="item.videoPlaying = true"
@pause="item.videoPlaying = false"></video>
</q-img>
</div>
<div class="swipercomTvR2BjBox">
<div class="swipercomTvR2BjBox" @click.stop="item.FileType==2?playVideo(`videoPlayerRoll2${index}`):''">
<div class="swipercomTvR2Bj absolute">&nbsp;</div>
<div class="swipercomTvR2 absolute">
<div class="h100 column justify-end text-left">
......@@ -96,11 +103,11 @@
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
const scale = 1 / window.devicePixelRatio;
export default {
components: { swiper, swiperSlide },
props: ['plugData','windowWidth','top','currentHeight'],
data() {
const scale = 1 / this.$q.platform.is.win?window.devicePixelRatio:1;
return {
slide: 1,
FileUrlList: [],
......@@ -157,6 +164,7 @@
},
swiper: null,
activeIndex: 0,
realIndex: 0,
}
},
watch: {
......@@ -164,10 +172,26 @@
handler(val, oldval) {
}
},
realIndex:{
handler(val, oldval) {
setTimeout(()=>{
this.playVideo(`videoPlayerRoll1${val}`)
},500)
},
immediate: false
}
},
created() {
let arrList = function(list){
list.forEach(x=>{
x.currentTime = 0
x.videoPlaying = false
x.videoPlaying = false
})
}
arrList(this.plugData.NavList)
this.plugData.NavList.forEach(x=>{
if(x.FileUrl){
this.FileUrlList.push(x)
......@@ -176,17 +200,65 @@
},
mounted() {
setTimeout(() => {
this.swiper = this.$refs.mySwiper2.swiper;
if(this.windowWidth<=768) this.swiper.slidesPerView = 1
else this.swiper.slidesPerView = 1.5
// this.swiper = this.$refs.mySwiper2.swiper;
// if(this.windowWidth<=768) this.swiper.slidesPerView = 1
// else this.swiper.slidesPerView = 1.5
this.playVideo(`videoPlayerRoll2${this.realIndex}`)
}, 500);
},
methods: {
// 监听视频播放进度的回调
handleTimeUpdate(event,formName,index) {
const audio = event.target;
if (!audio.duration) return;
let video = this.$refs[formName]
if(video&&video[0]&&!video[0].paused){
this.FileUrlList[index].currentTime = audio.currentTime
}
},
// 视频播放结束调用的回调
handleEnded(event,formName,index) {
if(this.FileUrlList[index].currentTime) this.FileUrlList[index].currentTime = 0
},
playVideo(formName){
for(let i=0;i<this.FileUrlList.length;i++){
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[`videoPlayerRoll2${i}`]
if(video&&video[0]&&!video[0].paused){
video[0].pause()
}
}
}
let i = this.realIndex
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[formName]
if(video&&video[0]){
if(video[0].paused&&this.FileUrlList[i].videoPlaying==false) {
if(this.FileUrlList[i].currentTime){
video[0].currentTime = this.FileUrlList[i].currentTime
}
// console.log('继续播放')
this.FileUrlList[i].videoPlaying = true
video[0].play()
}else {
// console.log('暂停')
this.FileUrlList[i].videoPlaying = false
video[0].pause()
}
}
}
},
onSlideChange(){
// 获取当前索引
const swiper = this.$refs.mySwiper2.swiper
const activeIndex = this.$refs.mySwiper2.swiper.activeIndex;
this.slide = activeIndex
this.realIndex = swiper.realIndex
// console.log('当前索引:', activeIndex);
setTimeout(()=>{
this.playVideo(`videoPlayerRoll2${swiper.realIndex+1}`)
},500)
},
carousel(text){
if(this.windowWidth<768) return
......@@ -222,6 +294,19 @@
}
}
</script>
<style lang="scss" scoped>
.carousel1-rightV{
width: 100%;
height: 100%;
padding: 0;
border-radius: 10px;
background: $primary ;
}
.carousel1-rightV video{
width: 100%;
height: 100%;
}
</style>
<style lang="scss">
.indexRoll2Box{
overflow: hidden;
......
......@@ -49,8 +49,12 @@
</div>
</template>
</q-img>
<q-img v-else :ratio="16/9">
<q-video class="cursor-pointer" style="width: 100%;" :src="item.FileUrl" frameborder="0" allowfullscreen @click.stop="OpenNewUrl(item.LinkUrl)"/>
<q-img v-show="item.FileType==2" :ratio="16/9" class="cursor-pointer carousel1-rightV">
<video :src="item.FileUrl" muted controls
:ref="`videoPlayerSli${index+1}`"
@timeupdate="(event)=>handleTimeUpdate(event,`videoPlayerSli${index+1}`,index)"
@ended="(event)=>handleEnded(event,`videoPlayerSli${index+1}`,index)"
></video>
</q-img>
<div class="inSliSubNameBox absolute cursor-pointer"
:style="{'background-color':windowWidth>=992?plugData.BgColor:''}"
......@@ -67,7 +71,7 @@
<div class="inSliSubEnNameBox absolute cursor-pointer">
<p class="text-secondary font-serifEn">{{item.SubEnName}}</p>
</div>
<div class="inSliSubDescribeBox no-wrap justify-between cursor-default"
<div class="inSliSubDescribeBox no-wrap justify-between cursor-default"
:style="{'background-color':plugData.BgColor}"
:class="[windowWidth>=992?'absolute row':' column']">
<p class="text-center font-serifEn
......@@ -123,20 +127,29 @@ export default {
X: 0,
Y: 0,
Current: null,
slide: 2,
autoplay: 40000000,
slide: 1,
autoplay: 5000,
FileUrlList: [],
isRight: false,
cursorUrlL: require('../../assets/svg/left.svg'),
cursorUrlR: require('../../assets/svg/right.svg'),
cursorSize: 16,
videoList: [], // 视频列表数据
videoUpdateTime: [], // 记录video播放的时长
}
},
watch: {
windowWidth: {
handler: function (val, oldval) {
handler(val, oldval) {
}
},
slide:{
handler(val, oldval) {
setTimeout(()=>{
this.playVideo(`videoPlayerSli${val}`)
},500)
},
immediate: false
}
},
......@@ -147,6 +160,7 @@ export default {
let arrList = function(list){
list.forEach(x=>{
x.SubDescribe2 = ''
x.currentTime = 0
})
}
arrList(this.plugData.NavList)
......@@ -157,8 +171,45 @@ export default {
this.FileUrlList.push(x)
}
})
setTimeout(()=>{
if(this.FileUrlList[this.slide-1].FileType==2){
this.playVideo(`videoPlayerSli${this.slide}`)
}
},500)
},
methods: {
// 监听视频播放进度的回调
handleTimeUpdate(event,formName,index) {
const audio = event.target;
if (!audio.duration) return;
let video = this.$refs[formName]
if(video&&video[0]&&!video[0].paused){
this.FileUrlList[index].currentTime = audio.currentTime
}
},
// 视频播放结束调用的回调
handleEnded(event,formName,index) {
if(this.FileUrlList[index].currentTime) this.FileUrlList[index].currentTime = 0
},
playVideo(formName){
let i = this.slide-1
if(this.FileUrlList[i].FileType==2){
let video = this.$refs[formName]
if(video&&video[0]){
if(video[0].paused) {
if(this.FileUrlList[i].currentTime){
video[0].currentTime = this.FileUrlList[i].currentTime
}
// console.log('继续播放')
video[0].play()
}else {
// console.log('暂停')
video[0].pause()
}
}
}
},
carouselIndex(index){
this.slide = index+1
},
......@@ -175,21 +226,18 @@ export default {
}
},
handleMouseMove(el) {
console.log(el.clientX,'-------------')
if(this.windowWidth<768) return this.Current = null
if(!this.isRight) this.isRight = true
let width = this.windowWidth/2
if(el.x<width){
this.Current = 'left'
this.X = el.x+50
// this.X = el.x+50
}else if(el.x>width) {
this.Current = 'right'
this.X = el.x-50
// this.X = el.x-50
}
this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
// this.X = el.clientX
// this.Y = el.clientY
// this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
},
handleMouseLeave(){
this.isRight = false
......@@ -197,12 +245,21 @@ export default {
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.activeL{
cursor: url('../../assets/svg/left.svg'),auto;
cursor: url('../../assets/svg/left.svg') 35 35,auto;
}
.activeR{
cursor: url('../../assets/svg/right.svg'),auto;
cursor: url('../../assets/svg/right.svg') 35 35,auto;
}
.carousel1-rightV{
width: 100%;
height: 100%;
background-color: $primary;
}
.carousel1-rightV video{
width: 100%;
height: 100%;
}
</style>
<style lang="scss">
......
......@@ -184,7 +184,8 @@
<q-separator color="grey-2" v-if="isHome" />
<div class="header-box flex q-py-sm" v-if="isHome">
<q-tabs align="center" shrink>
<div
<template v-if="false">
<div
flat
unelevated
class="address-btn"
......@@ -284,6 +285,8 @@
</q-menu>
</div>
<q-separator style="height: 16px; margin: auto 0" vertical />
</template>
<div
class="all-type category-btn"
flat
......
......@@ -199,7 +199,7 @@
<!-- pc -->
<div v-if="$q.platform.is.desktop">
<q-btn label="繁體中文" flat>
<!-- <q-btn label="繁體中文" flat>
<q-menu>
<q-list>
<q-item clickable v-close-popup>
......@@ -208,7 +208,7 @@
</q-list>
</q-menu>
</q-btn>
<q-btn label="帮助中心" flat></q-btn>
<q-btn label="帮助中心" flat></q-btn> -->
<q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
<template v-if="LoginUser.token">
<q-btn-dropdown
......
......@@ -92,6 +92,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
watch: {
'$route': function() {
this.showUserInfo = Boolean(this.$route.meta.isUserCenter)
this.isSearch = this.$router.history.current.path != "/"&&this.$router.history.current.path != "/index"
}
},
destroyed() {
......
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