Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
million
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
viitto
million
Commits
1df18cf4
Commit
1df18cf4
authored
Dec 04, 2024
by
youjie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
no message
parent
bd5570e2
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
349 additions
and
72 deletions
+349
-72
App.vue
src/App.vue
+3
-3
home.css
src/assets/css/home.css
+2
-2
indexNav.vue
src/components/home/indexNav.vue
+88
-31
indexRoll1.vue
src/components/home/indexRoll1.vue
+82
-8
indexRoll2.vue
src/components/home/indexRoll2.vue
+94
-9
indexSlider.vue
src/components/home/indexSlider.vue
+73
-16
city-category.vue
src/components/navs/city-category.vue
+4
-1
hor-big-one.vue
src/components/navs/hor-big-one.vue
+2
-2
HomeLayout.vue
src/layouts/HomeLayout.vue
+1
-0
No files found.
src/App.vue
View file @
1df18cf4
...
@@ -9,13 +9,13 @@ export default {
...
@@ -9,13 +9,13 @@ export default {
name
:
"App"
,
name
:
"App"
,
methods
:
{
methods
:
{
disableZoom
(
event
){
disableZoom
(
event
){
if
(
event
.
ctrlKey
&&
(
event
.
key
===
'+'
||
event
.
key
===
'-'
||
event
.
key
===
'='
))
{
if
(
(
event
.
metaKey
||
event
.
ctrlKey
)
&&
(
event
.
key
===
'+'
||
event
.
key
===
'-'
||
event
.
key
===
'='
))
{
event
.
preventDefault
();
// 阻止默认行为
event
.
preventDefault
();
// 阻止默认行为
console
.
log
(
'缩放功能已禁用'
);
console
.
log
(
'缩放功能已禁用'
);
}
}
},
},
disableZoomByWheel
(
event
)
{
disableZoomByWheel
(
event
)
{
if
(
event
.
ctrlKey
)
{
if
(
event
.
metaKey
||
event
.
ctrlKey
)
{
event
.
preventDefault
();
// 阻止缩放
event
.
preventDefault
();
// 阻止缩放
console
.
log
(
'鼠标滚轮缩放功能已禁用'
);
console
.
log
(
'鼠标滚轮缩放功能已禁用'
);
}
}
...
@@ -23,7 +23,7 @@ export default {
...
@@ -23,7 +23,7 @@ export default {
adjustZoom
()
{
adjustZoom
()
{
console
.
log
(
'execute...'
)
console
.
log
(
'execute...'
)
if
(
window
.
innerWidth
>
768
){
if
(
window
.
innerWidth
>
768
){
const
scale
=
window
.
devicePixelRatio
;
// 获取用户的系统缩放比例
const
scale
=
this
.
$q
.
platform
.
is
.
win
?
window
.
devicePixelRatio
:
1
;
// 获取用户的系统缩放比例
document
.
body
.
style
.
zoom
=
1
/
scale
;
// 设置缩放以抵消系统缩放
document
.
body
.
style
.
zoom
=
1
/
scale
;
// 设置缩放以抵消系统缩放
// 获取实际视口高度和宽度
// 获取实际视口高度和宽度
...
...
src/assets/css/home.css
View file @
1df18cf4
...
@@ -45,10 +45,10 @@ ul,li{
...
@@ -45,10 +45,10 @@ ul,li{
}
}
.remTetil
{
.remTetil
{
font-size
:
1
8
px
;
font-size
:
1
6
px
;
}
}
.remText
{
.remText
{
font-size
:
1
6
px
;
font-size
:
1
1
px
;
}
}
.remSubText
{
.remSubText
{
...
...
src/components/home/indexNav.vue
View file @
1df18cf4
...
@@ -87,13 +87,19 @@
...
@@ -87,13 +87,19 @@
<div
class=
"carousel1-right overflow-hidden relative"
<div
class=
"carousel1-right overflow-hidden relative"
:class=
"[$q.platform.is.desktop?'col':'col-12']"
@
mouseenter
.
stop
.
prevent=
"ClearData"
>
:class=
"[$q.platform.is.desktop?'col':'col-12']"
@
mouseenter
.
stop
.
prevent=
"ClearData"
>
<
template
v-if=
"windowWidth>=768"
>
<
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':'']"
:class=
"[oldCoverImg!=coverImg?'active':'']"
:src=
"coverImg"
fill=
"contain"
/>
:src=
"FileUrlList[slide-1].FileUrl"
fill=
"contain"
/>
<q-img
v-else
alt=
""
:ratio=
"16/9"
fill=
"cover"
>
<div
v-show=
"FileUrlList[slide-1].FileType==2"
class=
"carousel1-rightImg carousel1-rightV relative"
<q-video
class=
"carousel1-rightImg"
style=
"width: 100%;"
:src=
"coverImg"
frameborder=
"0"
:class=
"[oldCoverImg!=coverImg?'active':'']"
>
allowfullscreen
@
mouseenter=
"ClearData"
/>
<!-- :autoplay="PlayBack" -->
</q-img>
<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>
<
template
v-else
>
<
template
v-else
>
<q-carousel
<q-carousel
...
@@ -104,7 +110,7 @@
...
@@ -104,7 +110,7 @@
style=
"height: 100%;"
style=
"height: 100%;"
>
>
<template
v-for=
"(item,index) in FileUrlList"
>
<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
>
</
template
>
</q-carousel>
</q-carousel>
<div
class=
"MBgColorBox column justify-center items-center"
>
<div
class=
"MBgColorBox column justify-center items-center"
>
...
@@ -112,6 +118,8 @@
...
@@ -112,6 +118,8 @@
<p
class=
"font-serifEn fz20 q-pt-lg text-white opacity-80"
>
{{plugData.SubTitle}}
</p>
<p
class=
"font-serifEn fz20 q-pt-lg text-white opacity-80"
>
{{plugData.SubTitle}}
</p>
</div>
</div>
</template>
</template>
<div
class=
"absolute indexNavxcText cursor-pointer"
<div
class=
"absolute indexNavxcText cursor-pointer"
:class=
"[$q.platform.is.desktop?'':'writing-modes-vertical active']"
:class=
"[$q.platform.is.desktop?'':'writing-modes-vertical active']"
@
click=
"isMenu=true"
>
@
click=
"isMenu=true"
>
...
@@ -319,6 +327,7 @@ export default {
...
@@ -319,6 +327,7 @@ export default {
type1
:
''
,
type1
:
''
,
type2
:
''
,
type2
:
''
,
LinkUrl
:
''
,
LinkUrl
:
''
,
PlayBack
:
true
}
}
},
},
watch
:
{
watch
:
{
...
@@ -332,42 +341,84 @@ export default {
...
@@ -332,42 +341,84 @@ export default {
},
},
mounted
()
{
mounted
()
{
this
.
ImgObj
=
this
.
plugData
.
MenuList
[
0
]
let
arrList
=
function
(
list
){
this
.
coverImg
=
this
.
plugData
.
MenuList
[
0
].
FileUrl
list
.
forEach
(
x
=>
{
x
.
currentTime
=
0
})
}
arrList
(
this
.
plugData
.
MenuList
)
this
.
plugData
.
MenuList
.
forEach
(
x
=>
{
this
.
plugData
.
MenuList
.
forEach
(
x
=>
{
if
(
x
.
FileUrl
){
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
)
{
if
(
localStorage
.
baseifo
)
{
var
jObj
=
JSON
.
parse
(
window
.
localStorage
.
getItem
(
'baseifo'
))
var
jObj
=
JSON
.
parse
(
window
.
localStorage
.
getItem
(
'baseifo'
))
this
.
CategoryList
=
jObj
.
CategoryList
this
.
CategoryList
=
jObj
.
CategoryList
this
.
CategoryList
.
splice
(
0
,
1
)
this
.
CategoryList
.
splice
(
0
,
1
)
}
}
setTimeout
(()
=>
{
if
(
this
.
FileUrlList
[
this
.
slide
-
1
].
FileType
==
2
){
this
.
playVideo
(
'videoPlayer'
)
}
},
500
)
},
},
methods
:
{
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
(){
goUrl
(){
let
URL
=
''
let
URL
=
''
if
(
this
.
LinkUrl
)
{
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
:
''
}
`
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
)
this
.
OpenNewUrl
(
URL
)
}
}
else
{
else
{
this
.
OpenNewUrl
(
'http://www.oytour.com/#/searchProduct'
)
this
.
OpenNewUrl
(
'http://www.oytour.com/#/searchProduct'
)
// this.CommonJump('/searchProduct',{})
// setTimeout(()=>{
// window.location.reload()
// },300)
}
}
},
},
getType2
(
e
){
getType2
(
e
){
console
.
log
(
this
.
type2
,
'----type2222222'
)
//
console.log(this.type2,'----type2222222')
},
},
getType1
(
e
){
getType1
(
e
){
this
.
optionsList
=
[]
this
.
optionsList
=
[]
console
.
log
(
this
.
type1
,
'----type111111'
)
//
console.log(this.type1,'----type111111')
let
list
=
this
.
CategoryList
.
filter
(
x
=>
{
let
list
=
this
.
CategoryList
.
filter
(
x
=>
{
if
(
x
.
Id
==
e
){
if
(
x
.
Id
==
e
){
this
.
lineUrl
=
x
.
LinkUrl
this
.
lineUrl
=
x
.
LinkUrl
...
@@ -455,14 +506,16 @@ export default {
...
@@ -455,14 +506,16 @@ export default {
this
.
oldCoverImg
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
coverImg
))
this
.
oldCoverImg
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
coverImg
))
if
(
this
.
CurrentIndex
==
index
)
return
if
(
this
.
CurrentIndex
==
index
)
return
else
if
(
index
>=
0
)
{
else
if
(
index
>=
0
)
{
this
.
ImgObj
=
{}
this
.
CurrentIndex
=
null
this
.
CurrentIndex
=
null
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
CurrentIndex
=
index
this
.
CurrentIndex
=
index
if
(
this
.
plugData
.
MenuList
[
index
].
FileUrl
)
{
this
.
slide
=
index
+
1
this
.
coverImg
=
this
.
plugData
.
MenuList
[
index
].
FileUrl
this
.
coverImg
=
this
.
FileUrlList
[
index
].
FileUrl
this
.
ImgObj
=
this
.
plugData
.
MenuList
[
index
]
setTimeout
(()
=>
{
}
if
(
this
.
FileUrlList
[
index
].
FileType
==
2
){
this
.
playVideo
(
'videoPlayer'
)
}
},
500
)
},
300
)
},
300
)
}
}
},
},
...
@@ -472,7 +525,7 @@ export default {
...
@@ -472,7 +525,7 @@ export default {
}
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
lang=
"scss"
scoped
>
::v-deep
.indexNavxcBoxS
.q-field__control
{
::v-deep
.indexNavxcBoxS
.q-field__control
{
height
:
45px
;
height
:
45px
;
}
}
...
@@ -482,15 +535,18 @@ export default {
...
@@ -482,15 +535,18 @@ export default {
::v-deep
.indexNavxcBoxS
.q-field--auto-height
.q-field__control
{
::v-deep
.indexNavxcBoxS
.q-field--auto-height
.q-field__control
{
min-height
:
45px
;
min-height
:
45px
;
}
}
/* ::v-deep .indexNavxcBoxS.active .q-field__control
{
.carousel1-rightV
{
height:40px
;
background-color
:
$primary
;
}
}
::v-deep .indexNavxcBoxS.active .q-field--auto-height .q-field__native{
.carousel1-rightV
video
{
min-height: 40px;
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
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.indexNavxcBoxCenter
{
.indexNavxcBoxCenter
{
...
@@ -677,6 +733,7 @@ export default {
...
@@ -677,6 +733,7 @@ export default {
.carousel1-rightImg.active
{
.carousel1-rightImg.active
{
transform
:
scale
(
1
);
transform
:
scale
(
1
);
}
}
.MBgColorBox
{
.MBgColorBox
{
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
...
...
src/components/home/indexRoll1.vue
View file @
1df18cf4
...
@@ -44,9 +44,13 @@
...
@@ -44,9 +44,13 @@
</
template
>
</
template
>
</q-img>
</q-img>
</template>
</template>
<q-img
v-else
alt=
""
:ratio=
"16/9"
fill=
"cover"
>
<q-img
v-if=
"item.FileType==2"
:ratio=
"16/9"
class=
"carousel1-rightV"
<q-video
class=
""
style=
"width: 100%;"
:src=
"item.FileUrl"
frameborder=
"0"
@
click
.
stop=
"OpenUrl(item.LinkUrl,index)"
>
allowfullscreen
@
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>
</q-img>
<div
class=
"swipercomSubEnLen absolute bg-white row items-center justify-center"
>
<div
class=
"swipercomSubEnLen absolute bg-white row items-center justify-center"
>
<div
class=
"swipercomSubEnNum row"
v-if=
"windowWidth>=992"
>
<div
class=
"swipercomSubEnNum row"
v-if=
"windowWidth>=992"
>
...
@@ -142,7 +146,7 @@
...
@@ -142,7 +146,7 @@
//设置能够同时显示的数量(可设置 auto)
//设置能够同时显示的数量(可设置 auto)
speed
:
1000
,
speed
:
1000
,
autoplay
:
{
autoplay
:
{
delay
:
6000
,
delay
:
6000
0000
,
stopOnLastSlide
:
false
,
stopOnLastSlide
:
false
,
disableOnInteraction
:
false
disableOnInteraction
:
false
},
},
...
@@ -175,6 +179,7 @@
...
@@ -175,6 +179,7 @@
swiper
:
null
,
swiper
:
null
,
swiper2
:
null
,
swiper2
:
null
,
activeIndex
:
0
,
activeIndex
:
0
,
realIndex
:
1
,
}
}
},
},
watch
:
{
watch
:
{
...
@@ -182,10 +187,24 @@
...
@@ -182,10 +187,24 @@
handler
(
val
,
oldval
)
{
handler
(
val
,
oldval
)
{
}
}
},
realIndex
:{
handler
(
val
,
oldval
)
{
setTimeout
(()
=>
{
this
.
playVideo
(
`videoPlayerRoll1
${
val
}
`
)
},
500
)
},
immediate
:
false
}
}
},
},
created
()
{
created
()
{
let
arrList
=
function
(
list
){
list
.
forEach
(
x
=>
{
x
.
currentTime
=
0
})
}
arrList
(
this
.
plugData
.
NavList
)
this
.
plugData
.
NavList
.
forEach
(
x
=>
{
this
.
plugData
.
NavList
.
forEach
(
x
=>
{
if
(
x
.
FileUrl
){
if
(
x
.
FileUrl
){
this
.
FileUrlList
.
push
(
x
)
this
.
FileUrlList
.
push
(
x
)
...
@@ -193,15 +212,55 @@
...
@@ -193,15 +212,55 @@
})
})
},
},
mounted
()
{
mounted
()
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
swiper
=
this
.
$refs
.
mySwiper
.
swiper
this
.
swiper
=
this
.
$refs
.
mySwiper
.
swiper
let
swiperInstance
=
this
.
$refs
.
mySwiper
.
swiper
let
swiperInstance
=
this
.
$refs
.
mySwiper
.
swiper
swiperInstance
.
loopedSlides
=
this
.
FileUrlList
.
length
swiperInstance
.
loopedSlides
=
this
.
FileUrlList
.
length
swiperInstance
.
update
()
swiperInstance
.
update
()
this
.
playVideo
(
`videoPlayerRoll1
${
this
.
realIndex
}
`
)
},
500
);
},
500
);
},
},
methods
:
{
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
)
{
OpenUrl
(
URL
,
index
)
{
if
(
index
!=
this
.
slide
)
return
this
.
carousel
(
this
.
Current
)
if
(
index
!=
this
.
slide
)
return
this
.
carousel
(
this
.
Current
)
this
.
OpenNewUrl
(
URL
)
this
.
OpenNewUrl
(
URL
)
...
@@ -211,9 +270,15 @@
...
@@ -211,9 +270,15 @@
},
},
onSlideChange
(){
onSlideChange
(){
// 获取当前索引
// 获取当前索引
const
swiper
=
this
.
$refs
.
mySwiper
.
swiper
const
activeIndex
=
this
.
$refs
.
mySwiper
.
swiper
.
activeIndex
;
const
activeIndex
=
this
.
$refs
.
mySwiper
.
swiper
.
activeIndex
;
this
.
slide
=
activeIndex
this
.
slide
=
activeIndex
this
.
realIndex
=
swiper
.
realIndex
console
.
log
(
swiper
.
realIndex
,
'----'
)
// console.log('当前索引:', activeIndex);
// console.log('当前索引:', activeIndex);
setTimeout
(()
=>
{
this
.
playVideo
(
`videoPlayerRoll1
${
swiper
.
realIndex
+
1
}
`
)
},
500
)
},
},
carousel
(
text
){
carousel
(
text
){
if
(
this
.
windowWidth
<
768
)
return
if
(
this
.
windowWidth
<
768
)
return
...
@@ -252,12 +317,21 @@
...
@@ -252,12 +317,21 @@
}
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
lang=
"scss"
scoped
>
.activeL
{
.activeL
{
cursor
:
url('../../assets/svg/left.svg')
,
auto
;
cursor
:
url('../../assets/svg/left.svg')
35
35
,
auto
;
}
}
.activeR
{
.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
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
...
...
src/components/home/indexRoll2.vue
View file @
1df18cf4
...
@@ -45,12 +45,19 @@
...
@@ -45,12 +45,19 @@
</
template
>
</
template
>
</q-img>
</q-img>
</template>
</template>
<q-img
v-else
alt=
""
:ratio=
"0.64"
fill=
"cover"
>
<div
class=
"carousel1-rightV"
>
<q-video
class=
"cursor-pointer"
style=
"width: 100%;"
:src=
"item.FileUrl"
frameborder=
"0"
<q-img
v-show=
"item.FileType==2"
:ratio=
"0.64"
>
allowfullscreen
@
click
.
stop=
"OpenNewUrl(item.LinkUrl)"
/>
<!-- autoplay controls-->
</q-img>
<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"
>
</div>
<div
class=
"swipercomTvR2Bj absolute"
>
</div>
<div
class=
"swipercomTvR2 absolute"
>
<div
class=
"swipercomTvR2 absolute"
>
<div
class=
"h100 column justify-end text-left"
>
<div
class=
"h100 column justify-end text-left"
>
...
@@ -96,11 +103,11 @@
...
@@ -96,11 +103,11 @@
<
script
>
<
script
>
import
{
swiper
,
swiperSlide
}
from
"vue-awesome-swiper"
;
import
{
swiper
,
swiperSlide
}
from
"vue-awesome-swiper"
;
import
"swiper/dist/css/swiper.css"
;
import
"swiper/dist/css/swiper.css"
;
const
scale
=
1
/
window
.
devicePixelRatio
;
export
default
{
export
default
{
components
:
{
swiper
,
swiperSlide
},
components
:
{
swiper
,
swiperSlide
},
props
:
[
'plugData'
,
'windowWidth'
,
'top'
,
'currentHeight'
],
props
:
[
'plugData'
,
'windowWidth'
,
'top'
,
'currentHeight'
],
data
()
{
data
()
{
const
scale
=
1
/
this
.
$q
.
platform
.
is
.
win
?
window
.
devicePixelRatio
:
1
;
return
{
return
{
slide
:
1
,
slide
:
1
,
FileUrlList
:
[],
FileUrlList
:
[],
...
@@ -157,6 +164,7 @@
...
@@ -157,6 +164,7 @@
},
},
swiper
:
null
,
swiper
:
null
,
activeIndex
:
0
,
activeIndex
:
0
,
realIndex
:
0
,
}
}
},
},
watch
:
{
watch
:
{
...
@@ -164,10 +172,26 @@
...
@@ -164,10 +172,26 @@
handler
(
val
,
oldval
)
{
handler
(
val
,
oldval
)
{
}
}
},
realIndex
:{
handler
(
val
,
oldval
)
{
setTimeout
(()
=>
{
this
.
playVideo
(
`videoPlayerRoll1
${
val
}
`
)
},
500
)
},
immediate
:
false
}
}
},
},
created
()
{
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
=>
{
this
.
plugData
.
NavList
.
forEach
(
x
=>
{
if
(
x
.
FileUrl
){
if
(
x
.
FileUrl
){
this
.
FileUrlList
.
push
(
x
)
this
.
FileUrlList
.
push
(
x
)
...
@@ -176,17 +200,65 @@
...
@@ -176,17 +200,65 @@
},
},
mounted
()
{
mounted
()
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
swiper
=
this
.
$refs
.
mySwiper2
.
swiper
;
// this.swiper = this.$refs.mySwiper2.swiper;
if
(
this
.
windowWidth
<=
768
)
this
.
swiper
.
slidesPerView
=
1
// if(this.windowWidth
<=
768
)
this
.
swiper
.
slidesPerView
=
1
else
this
.
swiper
.
slidesPerView
=
1.5
// else this.swiper.slidesPerView = 1.5
this
.
playVideo
(
`videoPlayerRoll2
${
this
.
realIndex
}
`
)
},
500
);
},
500
);
},
},
methods
:
{
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
(){
onSlideChange
(){
// 获取当前索引
// 获取当前索引
const
swiper
=
this
.
$refs
.
mySwiper2
.
swiper
const
activeIndex
=
this
.
$refs
.
mySwiper2
.
swiper
.
activeIndex
;
const
activeIndex
=
this
.
$refs
.
mySwiper2
.
swiper
.
activeIndex
;
this
.
slide
=
activeIndex
this
.
slide
=
activeIndex
this
.
realIndex
=
swiper
.
realIndex
// console.log('当前索引:', activeIndex);
// console.log('当前索引:', activeIndex);
setTimeout
(()
=>
{
this
.
playVideo
(
`videoPlayerRoll2
${
swiper
.
realIndex
+
1
}
`
)
},
500
)
},
},
carousel
(
text
){
carousel
(
text
){
if
(
this
.
windowWidth
<
768
)
return
if
(
this
.
windowWidth
<
768
)
return
...
@@ -222,6 +294,19 @@
...
@@ -222,6 +294,19 @@
}
}
}
}
</
script
>
</
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"
>
<
style
lang=
"scss"
>
.indexRoll2Box
{
.indexRoll2Box
{
overflow
:
hidden
;
overflow
:
hidden
;
...
...
src/components/home/indexSlider.vue
View file @
1df18cf4
...
@@ -49,8 +49,12 @@
...
@@ -49,8 +49,12 @@
</div>
</div>
</
template
>
</
template
>
</q-img>
</q-img>
<q-img
v-else
:ratio=
"16/9"
>
<q-img
v-show=
"item.FileType==2"
:ratio=
"16/9"
class=
"cursor-pointer carousel1-rightV"
>
<q-video
class=
"cursor-pointer"
style=
"width: 100%;"
:src=
"item.FileUrl"
frameborder=
"0"
allowfullscreen
@
click
.
stop=
"OpenNewUrl(item.LinkUrl)"
/>
<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>
</q-img>
<div
class=
"inSliSubNameBox absolute cursor-pointer"
<div
class=
"inSliSubNameBox absolute cursor-pointer"
:style=
"{'background-color':windowWidth>=992?plugData.BgColor:''}"
:style=
"{'background-color':windowWidth>=992?plugData.BgColor:''}"
...
@@ -67,7 +71,7 @@
...
@@ -67,7 +71,7 @@
<div
class=
"inSliSubEnNameBox absolute cursor-pointer"
>
<div
class=
"inSliSubEnNameBox absolute cursor-pointer"
>
<p
class=
"text-secondary font-serifEn"
>
{{item.SubEnName}}
</p>
<p
class=
"text-secondary font-serifEn"
>
{{item.SubEnName}}
</p>
</div>
</div>
<div
class=
"inSliSubDescribeBox
no-wrap justify-between cursor-default"
<div
class=
"inSliSubDescribeBox no-wrap justify-between cursor-default"
:style=
"{'background-color':plugData.BgColor}"
:style=
"{'background-color':plugData.BgColor}"
:class=
"[windowWidth>=992?'absolute row':' column']"
>
:class=
"[windowWidth>=992?'absolute row':' column']"
>
<p
class=
"text-center font-serifEn
<p
class=
"text-center font-serifEn
...
@@ -123,20 +127,29 @@ export default {
...
@@ -123,20 +127,29 @@ export default {
X
:
0
,
X
:
0
,
Y
:
0
,
Y
:
0
,
Current
:
null
,
Current
:
null
,
slide
:
2
,
slide
:
1
,
autoplay
:
40000
000
,
autoplay
:
5
000
,
FileUrlList
:
[],
FileUrlList
:
[],
isRight
:
false
,
isRight
:
false
,
cursorUrlL
:
require
(
'../../assets/svg/left.svg'
),
cursorUrlL
:
require
(
'../../assets/svg/left.svg'
),
cursorUrlR
:
require
(
'../../assets/svg/right.svg'
),
cursorUrlR
:
require
(
'../../assets/svg/right.svg'
),
cursorSize
:
16
,
videoList
:
[],
// 视频列表数据
videoUpdateTime
:
[],
// 记录video播放的时长
}
}
},
},
watch
:
{
watch
:
{
windowWidth
:
{
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 {
...
@@ -147,6 +160,7 @@ export default {
let
arrList
=
function
(
list
){
let
arrList
=
function
(
list
){
list
.
forEach
(
x
=>
{
list
.
forEach
(
x
=>
{
x
.
SubDescribe2
=
''
x
.
SubDescribe2
=
''
x
.
currentTime
=
0
})
})
}
}
arrList
(
this
.
plugData
.
NavList
)
arrList
(
this
.
plugData
.
NavList
)
...
@@ -157,8 +171,45 @@ export default {
...
@@ -157,8 +171,45 @@ export default {
this
.
FileUrlList
.
push
(
x
)
this
.
FileUrlList
.
push
(
x
)
}
}
})
})
setTimeout
(()
=>
{
if
(
this
.
FileUrlList
[
this
.
slide
-
1
].
FileType
==
2
){
this
.
playVideo
(
`videoPlayerSli
${
this
.
slide
}
`
)
}
},
500
)
},
},
methods
:
{
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
){
carouselIndex
(
index
){
this
.
slide
=
index
+
1
this
.
slide
=
index
+
1
},
},
...
@@ -175,21 +226,18 @@ export default {
...
@@ -175,21 +226,18 @@ export default {
}
}
},
},
handleMouseMove
(
el
)
{
handleMouseMove
(
el
)
{
console
.
log
(
el
.
clientX
,
'-------------'
)
if
(
this
.
windowWidth
<
768
)
return
this
.
Current
=
null
if
(
this
.
windowWidth
<
768
)
return
this
.
Current
=
null
if
(
!
this
.
isRight
)
this
.
isRight
=
true
if
(
!
this
.
isRight
)
this
.
isRight
=
true
let
width
=
this
.
windowWidth
/
2
let
width
=
this
.
windowWidth
/
2
if
(
el
.
x
<
width
){
if
(
el
.
x
<
width
){
this
.
Current
=
'left'
this
.
Current
=
'left'
this
.
X
=
el
.
x
+
50
//
this.X = el.x+50
}
else
if
(
el
.
x
>
width
)
{
}
else
if
(
el
.
x
>
width
)
{
this
.
Current
=
'right'
this
.
Current
=
'right'
this
.
X
=
el
.
x
-
50
//
this.X = el.x-50
}
}
this
.
Y
=
el
.
y
+
(
document
.
documentElement
.
scrollTop
||
document
.
body
.
scrollTop
)
// this.Y = el.y+(document.documentElement.scrollTop || document.body.scrollTop)
// this.X = el.clientX
// this.Y = el.clientY
},
},
handleMouseLeave
(){
handleMouseLeave
(){
this
.
isRight
=
false
this
.
isRight
=
false
...
@@ -197,12 +245,21 @@ export default {
...
@@ -197,12 +245,21 @@ export default {
}
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
lang=
"scss"
scoped
>
.activeL
{
.activeL
{
cursor
:
url('../../assets/svg/left.svg')
,
auto
;
cursor
:
url('../../assets/svg/left.svg')
35
35
,
auto
;
}
}
.activeR
{
.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
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
...
...
src/components/navs/city-category.vue
View file @
1df18cf4
...
@@ -184,7 +184,8 @@
...
@@ -184,7 +184,8 @@
<q-separator
color=
"grey-2"
v-if=
"isHome"
/>
<q-separator
color=
"grey-2"
v-if=
"isHome"
/>
<div
class=
"header-box flex q-py-sm"
v-if=
"isHome"
>
<div
class=
"header-box flex q-py-sm"
v-if=
"isHome"
>
<q-tabs
align=
"center"
shrink
>
<q-tabs
align=
"center"
shrink
>
<div
<template
v-if=
"false"
>
<div
flat
flat
unelevated
unelevated
class=
"address-btn"
class=
"address-btn"
...
@@ -284,6 +285,8 @@
...
@@ -284,6 +285,8 @@
</q-menu>
</q-menu>
</div>
</div>
<q-separator
style=
"height: 16px; margin: auto 0"
vertical
/>
<q-separator
style=
"height: 16px; margin: auto 0"
vertical
/>
</
template
>
<div
<div
class=
"all-type category-btn"
class=
"all-type category-btn"
flat
flat
...
...
src/components/navs/hor-big-one.vue
View file @
1df18cf4
...
@@ -199,7 +199,7 @@
...
@@ -199,7 +199,7 @@
<!-- pc -->
<!-- pc -->
<div
v-if=
"$q.platform.is.desktop"
>
<div
v-if=
"$q.platform.is.desktop"
>
<q-btn
label=
"繁體中文"
flat
>
<
!--
<
q-btn
label=
"繁體中文"
flat
>
<q-menu>
<q-menu>
<q-list>
<q-list>
<q-item
clickable
v-close-popup
>
<q-item
clickable
v-close-popup
>
...
@@ -208,7 +208,7 @@
...
@@ -208,7 +208,7 @@
</q-list>
</q-list>
</q-menu>
</q-menu>
</q-btn>
</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>
<q-btn
v-if=
"LoginUser.id
<
=
0
"
label=
"注册"
flat
></q-btn>
<template
v-if=
"LoginUser.token"
>
<template
v-if=
"LoginUser.token"
>
<q-btn-dropdown
<q-btn-dropdown
...
...
src/layouts/HomeLayout.vue
View file @
1df18cf4
...
@@ -92,6 +92,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
...
@@ -92,6 +92,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
watch
:
{
watch
:
{
'$route'
:
function
()
{
'$route'
:
function
()
{
this
.
showUserInfo
=
Boolean
(
this
.
$route
.
meta
.
isUserCenter
)
this
.
showUserInfo
=
Boolean
(
this
.
$route
.
meta
.
isUserCenter
)
this
.
isSearch
=
this
.
$router
.
history
.
current
.
path
!=
"/"
&&
this
.
$router
.
history
.
current
.
path
!=
"/index"
}
}
},
},
destroyed
()
{
destroyed
()
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment