Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
Athena
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
华国豪
Athena
Commits
28e8b3ce
Commit
28e8b3ce
authored
Dec 31, 2019
by
黄奎
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
页面修改
parent
61562acc
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
427 additions
and
241 deletions
+427
-241
newTrip.vue
src/components/mall/newTrip.vue
+427
-241
No files found.
src/components/mall/newTrip.vue
View file @
28e8b3ce
<
style
>
.pageViewTrip
{
width
:
100%
;
height
:
100%
;
.pageViewTrip
{
width
:
100%
;
height
:
100%
;
color
:
#4F5A61
;
font-size
:
14px
;
font-family
:
"Chinese Quote"
,
-apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Lato
,
'PingFang SC'
,
"Hiragino Sans GB"
,
"Microsoft YaHei"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
;
font-family
:
"Chinese Quote"
,
-apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Lato
,
'PingFang SC'
,
"Hiragino Sans GB"
,
"Microsoft YaHei"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
;
}
.pageViewTrip
.tripContWrap
{
.pageViewTrip
.tripContWrap
{
position
:
relative
;
height
:
100%
;
height
:
100%
;
}
.pageViewTrip
.sideBar
{
position
:
fixed
;
width
:
250px
;
...
...
@@ -20,17 +22,22 @@
-moz-box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
.pageViewTrip
.sideBarBtns
.btnPage
{
cursor
:
pointer
;
margin-bottom
:
5px
;
}
.pageViewTrip
.sideBar
ul
,
.pageViewTrip
.sideBarBtns
{
.pageViewTrip
.sideBar
ul
,
.pageViewTrip
.sideBarBtns
{
position
:
relative
;
z-index
:
1
;
}
.pageViewTrip
.sideBarBtns
.btnPage.active
{
color
:
#00A4A8
;
}
.pageViewTrip
.sideBarBtns
.btnPage
i
{
display
:
inline-block
;
font-size
:
20px
;
...
...
@@ -38,12 +45,14 @@
vertical-align
:
middle
;
font-weight
:
bold
;
}
.pageViewTrip
.border
{
border-top
:
1px
#cfd2d5
solid
;
margin-top
:
15px
;
height
:
15px
;
max-width
:
140px
;
}
.pageViewTrip
.sideBar
ul
{
list-style
:
none
;
margin
:
0
;
...
...
@@ -52,6 +61,7 @@
width
:
190px
;
max-height
:
calc
(
100vh
-
220px
);
}
.pageViewTrip
.sideBar
ul
li
{
display
:
block
;
line-height
:
30px
;
...
...
@@ -65,40 +75,58 @@
-moz-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
}
.pageViewTrip
.sideBar
ul
li
i
:last-child
{
display
:
none
;
.pageViewTrip
.sideBar
ul
li
i
:last-child
{
display
:
none
;
}
.pageViewTrip
.sideBar
ul
li
.dayIndex
{
display
:
inline-block
;
width
:
45px
;
font-size
:
16px
;
font-weight
:
700
;
}
.pageViewTrip
.main
{
max-width
:
480px
;
margin-left
:
250px
;
}
.swiper-slide
{
position
:
relative
;
-webkit-overflow-scrolling
:
touch
;
}
.tripViewContainer
.inner
{
margin
:
15px
;
color
:
#869096
;
font-size
:
14px
;
}
.slideHeader
{
color
:
#00A4A8
;
font-weight
:
700
;
font-size
:
26px
;
overflow
:
hidden
;
}
#footer
:after
,
#footer
:before
,
#pageWrap
:after
,
#pageWrap
:before
,
.clear
:after
,
.clear
:before
,
.container980
:after
,
.container980
:before
,
.formRow
:after
,
.formRow
:before
,
.row
:after
,
.row
:before
{
#footer
:after
,
#footer
:before
,
#pageWrap
:after
,
#pageWrap
:before
,
.clear
:after
,
.clear
:before
,
.container980
:after
,
.container980
:before
,
.formRow
:after
,
.formRow
:before
,
.row
:after
,
.row
:before
{
display
:
table
;
content
:
" "
;
clear
:
both
;
}
.tripViewContainer
.cityDayList
.tripDay
{
padding
:
10px
0
10px
65px
;
box-sizing
:
border-box
;
...
...
@@ -106,6 +134,7 @@
border-bottom
:
1px
#DCDEE0
solid
;
min-height
:
60px
;
}
.tripViewContainer
.cityDayList
.tripDay
.left
{
position
:
absolute
;
left
:
0
;
...
...
@@ -117,6 +146,7 @@
transform
:
translateY
(
-50%
);
-moz-transform
:
translateY
(
-50%
);
}
.tripViewContainer
.cityDayList
.tripDay
.cities
{
font-size
:
18px
;
line-height
:
24px
;
...
...
@@ -129,30 +159,38 @@
-moz-box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
.tripViewContainer
.cityDayList
.tripDay
.left
.dayIndex
{
color
:
#00A4A8
;
font-size
:
20px
;
font-weight
:
700
;
}
.swiper-slide
,
.swiperMobile
.swiper-slide
{
.swiper-slide
,
.swiperMobile
.swiper-slide
{
background
:
#fff
;
}
.tripViewContainer
.inner
.articleCont
{
min-height
:
30px
;
margin-bottom
:
20px
;
font-size
:
16px
;
line-height
:
160%
;
}
.articleCont
p
{
margin
:
16px
0
;
}
.row
{
margin-right
:
-10px
;
margin-left
:
-10px
;
}
.col-md-12
{
width
:
100%
;
}
.noteSubHeader
.subTitle
{
display
:
inline-block
;
background
:
#fff
;
...
...
@@ -160,6 +198,7 @@
position
:
relative
;
z-index
:
2
;
}
.noteSubHeader
{
color
:
#4F5A60
;
font-weight
:
500
;
...
...
@@ -168,6 +207,7 @@
margin
:
25px
0
15px
;
position
:
relative
;
}
.noteSubHeader
:after
{
display
:
block
;
position
:
absolute
;
...
...
@@ -175,9 +215,11 @@
width
:
100%
;
z-index
:
0
;
}
.tripViewContainer
.notes
.col-md-6
{
width
:
100%
;
}
.noteBriefPiece
{
padding
:
10px
10px
10px
80px
;
box-sizing
:
border-box
;
...
...
@@ -187,20 +229,46 @@
border
:
1px
#eeeeee
solid
;
color
:
#455661
;
}
.col-md-1
,
.col-md-10
,
.col-md-11
,
.col-md-12
,
.col-md-2
,
.col-md-3
,
.col-md-4
,
.col-md-5
,
.col-md-6
,
.col-md-7
,
.col-md-8
,
.col-md-9
,
.col-sm-1
,
.col-sm-10
,
.col-sm-11
,
.col-sm-12
,
.col-sm-2
,
.col-sm-3
,
.col-sm-4
,
.col-sm-5
,
.col-sm-6
,
.col-sm-7
,
.col-sm-8
,
.col-sm-9
{
.col-md-1
,
.col-md-10
,
.col-md-11
,
.col-md-12
,
.col-md-2
,
.col-md-3
,
.col-md-4
,
.col-md-5
,
.col-md-6
,
.col-md-7
,
.col-md-8
,
.col-md-9
,
.col-sm-1
,
.col-sm-10
,
.col-sm-11
,
.col-sm-12
,
.col-sm-2
,
.col-sm-3
,
.col-sm-4
,
.col-sm-5
,
.col-sm-6
,
.col-sm-7
,
.col-sm-8
,
.col-sm-9
{
float
:
left
;
box-sizing
:
border-box
;
-moz-box-sizing
:
border-box
;
-webkit-box-sizing
:
border-box
;
}
.arrangementSubHeader
,
.noteSubHeader
{
.arrangementSubHeader
,
.noteSubHeader
{
font-weight
:
500
;
font-size
:
16px
;
line-height
:
20px
;
margin
:
25px
0
15px
;
position
:
relative
;
}
.arrangementSubHeader
.subTitle
{
display
:
inline-block
;
background
:
#fff
;
...
...
@@ -209,6 +277,7 @@
z-index
:
2
;
color
:
#4F5A60
;
}
.arrangementSubHeader
:after
{
display
:
block
;
position
:
absolute
;
...
...
@@ -217,19 +286,25 @@
z-index
:
0
;
bottom
:
1px
;
}
.arrangementSubHeader
:after
,
.noteSubHeader
:after
,
.tripMenuWrap
.btnDayHeader
:before
{
.arrangementSubHeader
:after
,
.noteSubHeader
:after
,
.tripMenuWrap
.btnDayHeader
:before
{
top
:
10px
;
content
:
" "
;
}
.swiper-slide
{
margin
:
30px
0
;
.swiper-slide
{
margin
:
30px
0
;
}
.arrangements
.arrangementSubContainer
{
border
:
1px
solid
#DBE0E4
;
border-radius
:
5px
;
margin
:
8px
0
;
min-height
:
40px
;
}
.arrangements
.arrangementSubContainer
.header
{
background-color
:
#EFF1F2
;
height
:
34px
;
...
...
@@ -238,23 +313,28 @@
padding
:
0
10px
;
line-height
:
34px
;
}
.arrangements
.arrangementSubContainer
.header
.dayIndex
{
color
:
#00B2B4
;
margin-right
:
10px
;
}
.arrangements
.arrangementSubContainer
.content
{
padding
:
5px
8px
;
}
.arrangements
.arrangementSubContainer
.content
.name
{
font-size
:
14px
;
color
:
#4F5A60
;
margin
:
5px
0
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
{
position
:
relative
;
overflow
:
hidden
;
height
:
70px
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.from
{
float
:
left
;
width
:
50%
;
...
...
@@ -262,22 +342,27 @@
padding-right
:
50px
;
color
:
#4F5A60
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.name
{
font-size
:
14px
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.time
{
font-size
:
10px
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.middle
{
position
:
absolute
;
text-align
:
center
;
width
:
100%
;
top
:
-3px
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.middle
.icon
{
font-size
:
24px
;
color
:
#4F5A60
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.to
{
float
:
left
;
width
:
50%
;
...
...
@@ -285,13 +370,16 @@
padding-left
:
50px
;
color
:
#4F5A60
;
}
.arrangements
.arrangementSubContainer
.content
.fromTo
.middle
.icon
{
font-size
:
30px
;
color
:
#4F5A60
;
}
.transit
{
.transit
{
font-weight
:
700
;
}
.arrangements
.arrangementSubContainer
.header
{
background-color
:
#EFF1F2
;
height
:
34px
;
...
...
@@ -300,10 +388,12 @@
padding
:
0
10px
;
line-height
:
34px
;
}
.arrangements
.arrangementSubContainer
.header.hotel
{
background-color
:
#FFF
;
display
:
flex
;
}
.arrangements
.arrangementSubContainer
.header.hotel
.city
{
color
:
#455661
;
font-size
:
14px
;
...
...
@@ -313,10 +403,12 @@
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
.arrangements
.arrangementSubContainer
.content
.name.hotel
{
position
:
relative
;
overflow
:
hidden
;
}
.arrangements
.arrangementSubContainer
.content
.name
.left
{
float
:
left
;
color
:
#00B2B4
;
...
...
@@ -325,15 +417,18 @@
box-sizing
:
border-box
;
padding-left
:
3px
;
}
.arrangements
.arrangementSubContainer
.content
.name
.right
{
margin-top
:
4px
;
float
:
left
;
width
:
90%
;
box-sizing
:
border-box
;
}
.dayAgenda
.slideHeader
{
padding
:
18px
0
2px
80px
;
}
.slideHeader
.dayNum
{
font-size
:
40px
;
font-weight
:
400
;
...
...
@@ -342,39 +437,50 @@
left
:
0
;
top
:
0
;
}
.slideHeader
.dayNumRight
{
font-size
:
16px
;
font-weight
:
400
;
color
:
#4F5A61
;
margin-left
:
90px
;
margin-left
:
90px
;
}
.slideHeader
.dateEleSpace
{
height
:
16px
;
}
.slideHeader
.dayNumRight
.cities
{
min-height
:
20px
;
}
.slideHeader
.date
span
,
.slideHeader
.dayNumRight
.cities
.arrow
,
.slideHeader
.dayNumRight
.cities
.city
{
.slideHeader
.date
span
,
.slideHeader
.dayNumRight
.cities
.arrow
,
.slideHeader
.dayNumRight
.cities
.city
{
display
:
inline-block
;
}
.slideHeader
.cities
i
{
font-size
:
14px
;
padding
:
0
5px
;
display
:
inline-block
;
color
:
#00A4A8
;
color
:
#00A4A8
;
}
.tripViewContainer
.inner
.articleCont
{
min-height
:
30px
;
margin-bottom
:
20px
;
}
.articleCont
{
font-size
:
16px
;
line-height
:
160%
;
}
.slideSubHeader
{
.slideSubHeader
{
position
:
relative
;
color
:
#00A4A8
;
color
:
#00A4A8
;
}
.slideSubHeader
:after
{
content
:
" "
;
display
:
block
;
...
...
@@ -384,6 +490,7 @@
top
:
10px
;
z-index
:
0
;
}
.slideSubHeader
.subTitle
{
display
:
inline-block
;
background
:
#fff
;
...
...
@@ -391,18 +498,22 @@
position
:
relative
;
z-index
:
2
;
}
.tripViewAgendaList
{
margin-top
:
30px
;
.tripViewAgendaList
{
margin-top
:
30px
;
}
.tripViewAgendaList
.agendaBox
{
background
:
#fff
;
position
:
relative
;
margin-bottom
:
60px
;
}
.tripViewAgendaList
.agendaBox
.indexNum.hotelPre
{
background
:
#F0AF37
;
color
:
#fff
;
}
.tripViewAgendaList
.agendaBox
.indexNum
{
font-size
:
18px
;
line-height
:
40px
;
...
...
@@ -414,6 +525,7 @@
left
:
20px
;
z-index
:
9
;
}
.tripViewAgendaList
.agendaBox
.coverWrap
{
text-align
:
right
;
height
:
150px
;
...
...
@@ -422,15 +534,18 @@
background-size
:
cover
;
background
:
url('../../assets/img/newtrip/hotel.jpg')
no-repeat
100%
100%
;
}
.tripViewAgendaList
.agendaBox
.txtCont
{
padding
:
10px
20px
;
box-shadow
:
rgba
(
0
,
0
,
0
,
.1
)
0
1px
1px
0
;
box-shadow
:
rgba
(
0
,
0
,
0
,
.1
)
0
1px
1px
0
;
white-space
:
pre-wrap
;
}
.tripViewAgendaList
.agendaBox
.agendaPoi
.bed
{
.tripViewAgendaList
.agendaBox
.agendaPoi
.bed
{
color
:
#3D4756
;
font-size
:
22px
;
font-size
:
22px
;
}
.tripViewAgendaList
.agendaBox
.txtCont
.title
{
font-size
:
22px
;
line-height
:
24px
;
...
...
@@ -438,20 +553,24 @@
overflow
:
hidden
;
font-weight
:
700
;
padding
:
0
12px
;
color
:
#3D4756
;
color
:
#3D4756
;
}
.tripViewAgendaList
.agendaBox
.detailBox
{
color
:
#626262
;
font-size
:
14px
;
}
.tripViewAgendaList
.agendaBox
.detailSection
{
border-top
:
1px
#eee
solid
;
padding
:
10px
0
;
margin-top
:
20px
;
margin-top
:
20px
;
}
.tripViewAgendaList
.agendaBox
.item
{
margin
:
8px
0
;
}
.tripViewAgendaList
.agendaBox
.label
{
display
:
inline-block
;
width
:
22%
;
...
...
@@ -460,18 +579,23 @@
padding-right
:
15px
;
text-align
:
right
;
}
.tripViewAgendaList
.agendaBox
.purchaseNote
,
.tripViewAgendaList
.agendaBox
.text
{
.tripViewAgendaList
.agendaBox
.purchaseNote
,
.tripViewAgendaList
.agendaBox
.text
{
display
:
-webkit-inline-box
;
width
:
72%
;
vertical-align
:
top
;
}
.subSection
{
border-top
:
1px
#eee
solid
;
.subSection
{
border-top
:
1px
#eee
solid
;
padding
:
20px
0
;
}
.tripViewAgendaList
.agendaBox
.table
.item
{
margin
:
8px
0
;
}
.tripViewAgendaList
.agendaBox
.table
.label
{
display
:
inline-block
;
width
:
22%
;
...
...
@@ -480,11 +604,14 @@
padding-right
:
15px
;
text-align
:
right
;
}
.tripViewAgendaList
.agendaBox
.table
.purchaseNote
,
.tripViewAgendaList
.agendaBox
.table
.text
{
.tripViewAgendaList
.agendaBox
.table
.purchaseNote
,
.tripViewAgendaList
.agendaBox
.table
.text
{
display
:
-webkit-inline-box
;
width
:
72%
;
vertical-align
:
top
;
}
.Divtriangle
{
position
:
absolute
;
left
:
26px
;
...
...
@@ -495,7 +622,8 @@
border-right
:
15px
solid
transparent
;
border-top
:
15px
solid
#DCDEDF
;
}
.Divtriangle
span
{
.Divtriangle
span
{
display
:
block
;
width
:
0
;
height
:
0
;
...
...
@@ -506,6 +634,7 @@
left
:
-28px
;
top
:
-29px
;
}
/* .xuxian{
position: absolute;
width:1px;
...
...
@@ -518,43 +647,52 @@
.tripViewAgendaList
.agendaBox
.numberList
{
background
:
#00A4A8
;
color
:
#fff
;
top
:
-16px
;
left
:
20px
;
top
:
-16px
;
left
:
20px
;
}
.tripViewAgendaList
.agendaPoi
{
margin-top
:
10px
;
.tripViewAgendaList
.agendaPoi
{
margin-top
:
10px
;
}
.tripViewAgendaList
.agendaBox
.food
{
color
:
#00A4A8
!important
;
.tripViewAgendaList
.agendaBox
.food
{
color
:
#00A4A8
!important
;
}
.tripViewAgendaList
.agendaBox
.food1
{
font-size
:
22px
!important
;
.tripViewAgendaList
.agendaBox
.food1
{
font-size
:
22px
!important
;
}
.tripAgendaTransitBox
{
overflow
:
hidden
;
margin-bottom
:
60px
;
}
.tripAgendaTransitBox
.transitIcon
{
float
:
left
;
margin
:
5px
0
0
60px
;
font-size
:
22px
;
}
.tripAgendaTransitBox
.transitIcon
{
float
:
left
;
margin
:
5px
0
0
60px
;
font-size
:
22px
;
}
.tripAgendaTransitBox
.transitInfoTxt
{
line-height
:
34px
;
position
:
relative
;
top
:
3px
;
margin-left
:
10px
;
top
:
3px
;
margin-left
:
10px
;
}
.tripViewAgendaList
{
margin-top
:
30px
;
background
:
url(../../assets/img/newtrip/agendaBorder.png)
40px
top
repeat-y
;
background-size
:
2px
auto
;
}
.pageViewTrip
.viewTripMap
{
position
:
fixed
;
top
:
0
;
...
...
@@ -563,20 +701,24 @@
height
:
100%
;
/* z-index:-1; */
}
.cityDayList
.tripDay
.cities
i
{
color
:
#00A4A8
;
margin
:
0
10px
;
font-size
:
18px
;
.cityDayList
.tripDay
.cities
i
{
color
:
#00A4A8
;
margin
:
0
10px
;
font-size
:
18px
;
}
.cityDayList
.tripDay
.cities
i
:last-child
{
display
:
none
;
.cityDayList
.tripDay
.cities
i
:last-child
{
display
:
none
;
}
.tripViewAgendaList
.agendaBox
.txtCont
{
padding
:
10px
20px
;
box-shadow
:
rgba
(
0
,
0
,
0
,
.1
)
0
1px
1px
0
;
box-shadow
:
rgba
(
0
,
0
,
0
,
.1
)
0
1px
1px
0
;
border
:
1px
solid
#DCDEDF
;
white-space
:
pre-wrap
;
}
.agendaBox
.longTransitPoi
.left
{
position
:
absolute
;
left
:
7px
;
...
...
@@ -584,37 +726,45 @@
margin-top
:
-10px
;
font-size
:
20px
;
}
.agendIndex
{
.agendIndex
{
background-color
:
#00A4A8
;
color
:
#fff
;
color
:
#fff
;
}
.tripViewAgendaList
.agendaBox
.city
{
color
:
#00A4A8
;
font-size
:
18px
;
font-size
:
18px
;
}
.agendaBox
.poiName
{
font-weight
:
700
;
color
:
#4B4E52
;
font-size
:
22px
;
}
.agendaBox
.time
{
color
:
#8F9296
;
font-size
:
14px
;
}
.agendaBox
.longTransitPoi
{
padding
:
10px
10px
10px
60px
;
position
:
relative
;
}
.agendaBox
.longTransitMethod
{
padding
:
10px
10px
10px
60px
;
position
:
relative
;
}
.agendaBox
.longTransitMethod
.left
{
position
:
absolute
;
left
:
0
;
top
:
50%
;
margin-top
:
-40px
;
}
.agendaBox
.longTransitMethod
.left
.frame
{
position
:
absolute
;
font-size
:
80px
;
...
...
@@ -625,6 +775,7 @@
top
:
-60px
;
padding-top
:
7px
;
}
.agendaBox
.longTransitMethod
.left
.method
{
position
:
absolute
;
z-index
:
1
;
...
...
@@ -636,21 +787,25 @@
line-height
:
86px
;
text-align
:
center
;
}
.agendaBox
.longTransitMethod
.name
{
font-weight
:
700
;
color
:
#4B4E52
;
font-size
:
22px
;
}
.agendaBox
.longTransitMethod
.time
{
color
:
#8F9296
;
font-size
:
14px
;
}
.frame
i
{
font-size
:
30px
;
.frame
i
{
font-size
:
30px
;
line-height
:
80px
;
}
.pageViewTrip
.active
{
color
:
#00A4A8
!important
;
.pageViewTrip
.active
{
color
:
#00A4A8
!important
;
}
</
style
>
<
template
>
...
...
@@ -670,14 +825,15 @@
<div
class=
"border"
></div>
</div>
<ul>
<li
v-for=
"(item,index) in dataList.dayList"
:class=
"crtnav=='dayList'+(index+1)?'active':''"
@
click=
"goScroll('dayList'+(index+1),index)"
>
<li
v-for=
"(item,index) in dataList.dayList"
:class=
"crtnav=='dayList'+(index+1)?'active':''"
@
click=
"goScroll('dayList'+(index+1),index)"
>
<span
class=
"dayIndex"
>
D
{{
index
+
1
}}
</span>
<template
v-for=
"suItem in item.dayArray"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"index==0"
>
<span
class=
"city"
>
{{
childItem
.
startCityName
}}
</span>
<i>
-
</i>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<span
class=
"city"
:key=
"index"
>
{{
childItem
.
startCityName
}}
</span>
<i
:key=
"index"
>
-
</i>
<span
class=
"city"
:key=
"index"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i>
-
</i>
</
template
>
<
template
v-else
>
...
...
@@ -704,7 +860,8 @@
</div>
<div
class=
"cities"
>
<
template
v-for=
"suItem in item.dayArray"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"index==0"
>
<span
class=
"city"
>
{{
childItem
.
startCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
...
...
@@ -747,7 +904,9 @@
<span
class=
"subTitle"
>
交通方案
</span>
</div>
</div>
<div
class=
"col-md-12 col-sm-12"
v-if=
"dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null"
v-for=
"(item,index) in dataList.currentPriceInfo.priceFlight"
>
<div
class=
"col-md-12 col-sm-12"
v-if=
"dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null"
v-for=
"(item,index) in dataList.currentPriceInfo.priceFlight"
>
<div
class=
"arrangementSubContainer"
>
<div
class=
"header"
><span
class=
"dayIndex"
>
D{{index+1}}
</span></div>
<div
class=
"content"
>
...
...
@@ -819,15 +978,32 @@
<div
class=
"dayNumRight"
>
<div
class=
"dateEleSpace"
></div>
<div
class=
"cities"
>
<span
class=
"city"
>
东京
</span>
<
template
v-for=
"suItem in item.dayArray"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"index==0"
>
<span
class=
"city"
>
{{
childItem
.
startCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
</
template
>
<
template
v-else
>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
</
template
>
</template>
</template>
<!-- <span class="city">东京</span>
<i class="iconfont icon-daoda"></i>
<span>
成都
</span>
<span>成都</span>
-->
</div>
</div>
</div>
<div
class=
"articleCont articleTxt"
>
<p>
今日推荐:
</p>
<p>
大涌谷--箱根强罗公园--雕刻之森美术馆--箱根湿生花园--箱根七汤
</p>
<
template
v-for=
"(subItem,subIndex) in item.dayArray"
v-if=
"subItem.type==7"
>
<p
:key=
"subIndex"
>
{{
subItem
.
childItem
.
title
}}
}
</p>
</
template
>
</div>
<div
class=
"agendaSection"
>
<div
class=
"slideSubHeader"
>
...
...
@@ -838,10 +1014,13 @@
<template
v-if=
"subItem.type==2"
>
<div
class=
"agendaBox"
>
<div
class=
"indexNum numberList"
>
{{
index
+
1
}}
</div>
<div
class=
"coverWrap"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"coverWrap"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"txtCont icon-triangle"
>
<div
class=
"detailBox"
>
<div
style=
"border-top:0;margin:20px 0;"
v-html=
'subItem.childItem.descriptionText'
></div>
<div
style=
"border-top:0;margin:20px 0;"
v-html=
'subItem.childItem.descriptionText'
></div>
</div>
<div
class=
"Divtriangle"
>
<span></span>
...
...
@@ -849,7 +1028,8 @@
<div
class=
"detailSection"
style=
"margin-top:0;"
>
<div
class=
"item"
>
<span
class=
"label"
>
建议游玩时间
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
playTimeMinutes
}}
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
playTimeMinutes
}}
</span>
</div>
</div>
</div>
...
...
@@ -901,8 +1081,11 @@
<div
class=
"indexNum tos-icon hotelPre "
>
<i
class=
"iconfont icon-sun"
></i>
</div>
<div
class=
"coverWrap"
v-if=
"subItem.childItem.imaArray.length>0"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"txtCont icon-triangle"
v-if=
"subItem.childItem.imaArray.length>0"
>
<div
class=
"coverWrap"
v-if=
"subItem.childItem.imaArray.length>0"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"txtCont icon-triangle"
v-if=
"subItem.childItem.imaArray.length>0"
>
<div
class=
"agendaPoi"
>
<i
class=
"iconfont icon-bed bed"
></i>
<span
class=
"title"
>
{{
subItem
.
childItem
.
hotelName
}}
</span>
...
...
@@ -912,19 +1095,23 @@
<div
class=
"item"
>
<span
class=
"label"
>
酒店星级
</span>
<span
class=
"text"
>
<el-rate
v-model=
"subItem.childItem.star"
disabled
></el-rate>
<el-rate
v-model=
"subItem.childItem.star"
disabled
></el-rate>
</span>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
设施服务
</span>
<span
class=
"text"
>
{{
getService
(
subItem
.
childItem
.
facilityServices
)
}}
</span>
<span
class=
"text"
>
{{
getService
(
subItem
.
childItem
.
facilityServices
)
}}
</span>
</div>
</div>
<div
class=
"subSection"
>
{{
subItem
.
childItem
.
descriptionText
}}
</div>
<div
class=
"subSection"
>
{{
subItem
.
childItem
.
descriptionText
}}
</div>
<div
class=
"detailSection"
style=
"margin-top:0;"
>
<div
class=
"item"
>
<span
class=
"label"
>
地址
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
hotelAddress
}}
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
hotelAddress
}}
</span>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
网址
</span>
...
...
@@ -1028,30 +1215,30 @@
</div>
</template>
<
script
>
import
tripMap
from
'../global/tripMap'
// import HTMap from '../global/HTMap'
export
default
{
data
()
{
return
{
import
tripMap
from
'../global/tripMap'
// import HTMap from '../global/HTMap'
export
default
{
data
()
{
return
{
defaultImg
:
'this.src="'
+
require
(
'../../assets/img/newtrip/hotel.jpg'
)
+
'"'
,
travelLngLat
:
[],
travelLngLat
:
[],
//请求参数
msg
:
{
ID
:
0
,
tcid
:
0
msg
:
{
ID
:
0
,
tcid
:
0
},
dataList
:
{},
dataList
:
{},
scrollobj
:
null
,
crtnav
:
''
,
isShow
:
false
,
dataindex
:
0
crtnav
:
''
,
isShow
:
false
,
dataindex
:
0
}
},
mounted
()
{
this
.
msg
.
ID
=
this
.
$route
.
query
.
ID
;
this
.
msg
.
tcid
=
this
.
$route
.
query
.
tcid
;
mounted
()
{
this
.
msg
.
ID
=
this
.
$route
.
query
.
ID
;
this
.
msg
.
tcid
=
this
.
$route
.
query
.
tcid
;
this
.
crtnav
=
'tripLine'
;
this
.
crtnav
=
'tripLine'
;
this
.
scrollobj
=
document
.
getElementsByClassName
(
'el-scrollbar__wrap'
)[
0
];
this
.
scrollobj
.
addEventListener
(
'scroll'
,
this
.
handleScroll
);
this
.
getTrip
();
...
...
@@ -1059,14 +1246,14 @@ export default {
components
:
{
tripMap
},
watch
:
{
watch
:
{
//滚动检测day滚动
dataindex
(
newValue
,
old
)
{
dataindex
(
newValue
,
old
)
{
this
.
getDayPoint
(
this
.
dataindex
);
},
//滚动检测头部三个
crtnav
(
newValue
,
old
)
{
if
(
newValue
==
'tripLine'
||
newValue
==
'aboutTrip'
||
newValue
==
'tripArrange'
)
{
crtnav
(
newValue
,
old
)
{
if
(
newValue
==
'tripLine'
||
newValue
==
'aboutTrip'
||
newValue
==
'tripArrange'
)
{
this
.
getAllPoint
();
}
}
...
...
@@ -1074,12 +1261,13 @@ export default {
methods
:
{
//加载数据
getTrip
()
{
getTrip
()
{
this
.
apipost
(
'b2b_get_GetB2BTravelInfoV1'
,
this
.
msg
,
res
=>
{
console
.
log
(
res
);
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
dataList
=
res
.
data
.
data
;
this
.
isShow
=
true
;
this
.
dataList
=
res
.
data
.
data
;
console
.
log
(
" this.dataList "
,
this
.
dataList
);
this
.
isShow
=
true
;
this
.
getAllPoint
();
// this.$refs.tripMap.mapBuild();
...
...
@@ -1089,45 +1277,45 @@ export default {
},
null
)
},
//遍历设施服务
getService
(
item
)
{
getService
(
item
)
{
let
Obj
=
JSON
.
parse
(
item
);
let
str
=
''
let
str
=
''
Obj
[
0
].
list
.
forEach
(
x
=>
{
str
+=
x
.
Content
+
' '
;
str
+=
x
.
Content
+
' '
;
});
return
str
;
},
//滚动定位
goScroll
(
id
,
index
)
{
if
(
id
==
'tripLine'
||
id
==
'aboutTrip'
||
id
==
'tripArrange'
)
{
goScroll
(
id
,
index
)
{
if
(
id
==
'tripLine'
||
id
==
'aboutTrip'
||
id
==
'tripArrange'
)
{
this
.
$refs
.
tripMap
.
mapBuild
();
}
if
(
index
>=
0
&&
index
!=
''
)
{
if
(
index
>=
0
&&
index
!=
''
)
{
this
.
getDayPoint
(
index
);
this
.
$refs
.
tripMap
.
mapBuild
();
}
this
.
crtnav
=
id
;
this
.
crtnav
=
id
;
this
.
scrollobj
.
scrollTop
=
document
.
getElementById
(
id
).
offsetTop
;
},
//加载所有坐标点
getAllPoint
()
{
let
Arr
=
[];
this
.
dataList
.
dayList
.
forEach
(
x
=>
{
x
.
dayArray
.
forEach
(
y
=>
{
if
(
y
.
type
==
1
)
{
y
.
childItem
.
subTraffic
.
forEach
(
z
=>
{
let
obj1
=
{
lat
:
z
.
startCityPoint
[
1
],
lng
:
z
.
startCityPoint
[
0
],
name
:
z
.
arrivalCityName
,
type
:
1
}
let
obj2
=
{
lat
:
z
.
arrivalCityPoint
[
1
],
lng
:
z
.
arrivalCityPoint
[
0
],
name
:
z
.
startCityName
,
type
:
1
getAllPoint
()
{
let
Arr
=
[];
this
.
dataList
.
dayList
.
forEach
(
x
=>
{
x
.
dayArray
.
forEach
(
y
=>
{
if
(
y
.
type
==
1
)
{
y
.
childItem
.
subTraffic
.
forEach
(
z
=>
{
let
obj1
=
{
lat
:
z
.
startCityPoint
[
1
],
lng
:
z
.
startCityPoint
[
0
],
name
:
z
.
arrivalCityName
,
type
:
1
}
let
obj2
=
{
lat
:
z
.
arrivalCityPoint
[
1
],
lng
:
z
.
arrivalCityPoint
[
0
],
name
:
z
.
startCityName
,
type
:
1
}
Arr
.
push
(
obj1
);
Arr
.
push
(
obj2
);
...
...
@@ -1135,43 +1323,43 @@ export default {
}
})
})
console
.
log
(
Arr
,
'Arrrr'
);
this
.
travelLngLat
=
Arr
;
console
.
log
(
Arr
,
'Arrrr'
);
this
.
travelLngLat
=
Arr
;
},
//加载当日坐标点
getDayPoint
(
index
)
{
let
Arr
=
[];
this
.
dataList
.
dayList
[
index
].
dayArray
.
forEach
(
x
=>
{
if
(
x
.
type
==
1
)
{
x
.
childItem
.
subTraffic
.
forEach
(
z
=>
{
let
obj1
=
{
lat
:
z
.
startCityPoint
[
1
],
lng
:
z
.
startCityPoint
[
0
],
name
:
z
.
arrivalCityName
,
type
:
1
}
let
obj2
=
{
lat
:
z
.
arrivalCityPoint
[
1
],
lng
:
z
.
arrivalCityPoint
[
0
],
name
:
z
.
startCityName
,
type
:
1
getDayPoint
(
index
)
{
let
Arr
=
[];
this
.
dataList
.
dayList
[
index
].
dayArray
.
forEach
(
x
=>
{
if
(
x
.
type
==
1
)
{
x
.
childItem
.
subTraffic
.
forEach
(
z
=>
{
let
obj1
=
{
lat
:
z
.
startCityPoint
[
1
],
lng
:
z
.
startCityPoint
[
0
],
name
:
z
.
arrivalCityName
,
type
:
1
}
let
obj2
=
{
lat
:
z
.
arrivalCityPoint
[
1
],
lng
:
z
.
arrivalCityPoint
[
0
],
name
:
z
.
startCityName
,
type
:
1
}
Arr
.
push
(
obj1
);
Arr
.
push
(
obj2
);
})
}
})
console
.
log
(
Arr
,
'day加载'
);
this
.
travelLngLat
=
Arr
;
console
.
log
(
Arr
,
'day加载'
);
this
.
travelLngLat
=
Arr
;
},
//滚动选中
handleScroll
()
{
try
{
let
navs
=
[
'tripLine'
,
'aboutTrip'
,
'tripArrange'
];
this
.
dataList
.
dayList
.
forEach
((
x
,
index
)
=>
{
navs
.
push
(
'dayList'
+
(
index
+
1
))
let
navs
=
[
'tripLine'
,
'aboutTrip'
,
'tripArrange'
];
this
.
dataList
.
dayList
.
forEach
((
x
,
index
)
=>
{
navs
.
push
(
'dayList'
+
(
index
+
1
))
})
let
current
=
''
navs
.
forEach
(
x
=>
{
...
...
@@ -1184,9 +1372,9 @@ export default {
// if(current=='tripLine'||current=='aboutTrip'||current=='tripArrange'){
// this.getAllPoint();
// }
if
(
current
.
indexOf
(
"dayList"
)
!=
-
1
)
{
let
index
=
current
.
split
(
'dayList'
)[
1
];
this
.
dataindex
=
index
;
if
(
current
.
indexOf
(
"dayList"
)
!=
-
1
)
{
let
index
=
current
.
split
(
'dayList'
)[
1
];
this
.
dataindex
=
index
;
}
}
catch
(
error
)
{
...
...
@@ -1194,7 +1382,5 @@ export default {
},
}
}
}
</
script
>
\ No newline at end of file
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