Commit 28e8b3ce authored by 黄奎's avatar 黄奎

页面修改

parent 61562acc
<style> <style>
.pageViewTrip{ .pageViewTrip {
width:100%; width: 100%;
height:100%; height: 100%;
color: #4F5A61; color: #4F5A61;
font-size: 14px; 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; position: relative;
height:100%; height: 100%;
} }
.pageViewTrip .sideBar { .pageViewTrip .sideBar {
position: fixed; position: fixed;
width: 250px; width: 250px;
...@@ -20,17 +22,22 @@ ...@@ -20,17 +22,22 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.pageViewTrip .sideBarBtns .btnPage { .pageViewTrip .sideBarBtns .btnPage {
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
} }
.pageViewTrip .sideBar ul, .pageViewTrip .sideBarBtns {
.pageViewTrip .sideBar ul,
.pageViewTrip .sideBarBtns {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.pageViewTrip .sideBarBtns .btnPage.active { .pageViewTrip .sideBarBtns .btnPage.active {
color: #00A4A8; color: #00A4A8;
} }
.pageViewTrip .sideBarBtns .btnPage i { .pageViewTrip .sideBarBtns .btnPage i {
display: inline-block; display: inline-block;
font-size: 20px; font-size: 20px;
...@@ -38,12 +45,14 @@ ...@@ -38,12 +45,14 @@
vertical-align: middle; vertical-align: middle;
font-weight: bold; font-weight: bold;
} }
.pageViewTrip .border { .pageViewTrip .border {
border-top: 1px #cfd2d5 solid; border-top: 1px #cfd2d5 solid;
margin-top: 15px; margin-top: 15px;
height: 15px; height: 15px;
max-width: 140px; max-width: 140px;
} }
.pageViewTrip .sideBar ul { .pageViewTrip .sideBar ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
...@@ -52,6 +61,7 @@ ...@@ -52,6 +61,7 @@
width: 190px; width: 190px;
max-height: calc(100vh - 220px); max-height: calc(100vh - 220px);
} }
.pageViewTrip .sideBar ul li { .pageViewTrip .sideBar ul li {
display: block; display: block;
line-height: 30px; line-height: 30px;
...@@ -65,40 +75,58 @@ ...@@ -65,40 +75,58 @@
-moz-transition: all .3s ease; -moz-transition: all .3s ease;
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 { .pageViewTrip .sideBar ul li .dayIndex {
display: inline-block; display: inline-block;
width: 45px; width: 45px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
} }
.pageViewTrip .main { .pageViewTrip .main {
max-width: 480px; max-width: 480px;
margin-left: 250px; margin-left: 250px;
} }
.swiper-slide { .swiper-slide {
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.tripViewContainer .inner { .tripViewContainer .inner {
margin: 15px; margin: 15px;
color: #869096; color: #869096;
font-size: 14px; font-size: 14px;
} }
.slideHeader { .slideHeader {
color: #00A4A8; color: #00A4A8;
font-weight: 700; font-weight: 700;
font-size: 26px; font-size: 26px;
overflow: hidden; 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; display: table;
content: " "; content: " ";
clear: both; clear: both;
} }
.tripViewContainer .cityDayList .tripDay { .tripViewContainer .cityDayList .tripDay {
padding: 10px 0 10px 65px; padding: 10px 0 10px 65px;
box-sizing: border-box; box-sizing: border-box;
...@@ -106,6 +134,7 @@ ...@@ -106,6 +134,7 @@
border-bottom: 1px #DCDEE0 solid; border-bottom: 1px #DCDEE0 solid;
min-height: 60px; min-height: 60px;
} }
.tripViewContainer .cityDayList .tripDay .left { .tripViewContainer .cityDayList .tripDay .left {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -117,6 +146,7 @@ ...@@ -117,6 +146,7 @@
transform: translateY(-50%); transform: translateY(-50%);
-moz-transform: translateY(-50%); -moz-transform: translateY(-50%);
} }
.tripViewContainer .cityDayList .tripDay .cities { .tripViewContainer .cityDayList .tripDay .cities {
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
...@@ -129,30 +159,38 @@ ...@@ -129,30 +159,38 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.tripViewContainer .cityDayList .tripDay .left .dayIndex { .tripViewContainer .cityDayList .tripDay .left .dayIndex {
color: #00A4A8; color: #00A4A8;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.swiper-slide, .swiperMobile .swiper-slide {
.swiper-slide,
.swiperMobile .swiper-slide {
background: #fff; background: #fff;
} }
.tripViewContainer .inner .articleCont { .tripViewContainer .inner .articleCont {
min-height: 30px; min-height: 30px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
line-height: 160%; line-height: 160%;
} }
.articleCont p { .articleCont p {
margin: 16px 0; margin: 16px 0;
} }
.row { .row {
margin-right: -10px; margin-right: -10px;
margin-left: -10px; margin-left: -10px;
} }
.col-md-12 { .col-md-12 {
width: 100%; width: 100%;
} }
.noteSubHeader .subTitle { .noteSubHeader .subTitle {
display: inline-block; display: inline-block;
background: #fff; background: #fff;
...@@ -160,6 +198,7 @@ ...@@ -160,6 +198,7 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.noteSubHeader { .noteSubHeader {
color: #4F5A60; color: #4F5A60;
font-weight: 500; font-weight: 500;
...@@ -168,6 +207,7 @@ ...@@ -168,6 +207,7 @@
margin: 25px 0 15px; margin: 25px 0 15px;
position: relative; position: relative;
} }
.noteSubHeader:after { .noteSubHeader:after {
display: block; display: block;
position: absolute; position: absolute;
...@@ -175,9 +215,11 @@ ...@@ -175,9 +215,11 @@
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
.tripViewContainer .notes .col-md-6 { .tripViewContainer .notes .col-md-6 {
width: 100%; width: 100%;
} }
.noteBriefPiece { .noteBriefPiece {
padding: 10px 10px 10px 80px; padding: 10px 10px 10px 80px;
box-sizing: border-box; box-sizing: border-box;
...@@ -187,20 +229,46 @@ ...@@ -187,20 +229,46 @@
border: 1px #eeeeee solid; border: 1px #eeeeee solid;
color: #455661; 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; float: left;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
.arrangementSubHeader, .noteSubHeader {
.arrangementSubHeader,
.noteSubHeader {
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 25px 0 15px; margin: 25px 0 15px;
position: relative; position: relative;
} }
.arrangementSubHeader .subTitle { .arrangementSubHeader .subTitle {
display: inline-block; display: inline-block;
background: #fff; background: #fff;
...@@ -209,6 +277,7 @@ ...@@ -209,6 +277,7 @@
z-index: 2; z-index: 2;
color: #4F5A60; color: #4F5A60;
} }
.arrangementSubHeader:after { .arrangementSubHeader:after {
display: block; display: block;
position: absolute; position: absolute;
...@@ -217,19 +286,25 @@ ...@@ -217,19 +286,25 @@
z-index: 0; z-index: 0;
bottom: 1px; bottom: 1px;
} }
.arrangementSubHeader:after, .noteSubHeader:after, .tripMenuWrap .btnDayHeader:before {
.arrangementSubHeader:after,
.noteSubHeader:after,
.tripMenuWrap .btnDayHeader:before {
top: 10px; top: 10px;
content: " "; content: " ";
} }
.swiper-slide{
margin:30px 0; .swiper-slide {
margin: 30px 0;
} }
.arrangements .arrangementSubContainer { .arrangements .arrangementSubContainer {
border: 1px solid #DBE0E4; border: 1px solid #DBE0E4;
border-radius: 5px; border-radius: 5px;
margin: 8px 0; margin: 8px 0;
min-height: 40px; min-height: 40px;
} }
.arrangements .arrangementSubContainer .header { .arrangements .arrangementSubContainer .header {
background-color: #EFF1F2; background-color: #EFF1F2;
height: 34px; height: 34px;
...@@ -238,23 +313,28 @@ ...@@ -238,23 +313,28 @@
padding: 0 10px; padding: 0 10px;
line-height: 34px; line-height: 34px;
} }
.arrangements .arrangementSubContainer .header .dayIndex { .arrangements .arrangementSubContainer .header .dayIndex {
color: #00B2B4; color: #00B2B4;
margin-right: 10px; margin-right: 10px;
} }
.arrangements .arrangementSubContainer .content { .arrangements .arrangementSubContainer .content {
padding: 5px 8px; padding: 5px 8px;
} }
.arrangements .arrangementSubContainer .content .name { .arrangements .arrangementSubContainer .content .name {
font-size: 14px; font-size: 14px;
color: #4F5A60; color: #4F5A60;
margin: 5px 0; margin: 5px 0;
} }
.arrangements .arrangementSubContainer .content .fromTo { .arrangements .arrangementSubContainer .content .fromTo {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 70px; height: 70px;
} }
.arrangements .arrangementSubContainer .content .fromTo .from { .arrangements .arrangementSubContainer .content .fromTo .from {
float: left; float: left;
width: 50%; width: 50%;
...@@ -262,22 +342,27 @@ ...@@ -262,22 +342,27 @@
padding-right: 50px; padding-right: 50px;
color: #4F5A60; color: #4F5A60;
} }
.arrangements .arrangementSubContainer .content .fromTo .name { .arrangements .arrangementSubContainer .content .fromTo .name {
font-size: 14px; font-size: 14px;
} }
.arrangements .arrangementSubContainer .content .fromTo .time { .arrangements .arrangementSubContainer .content .fromTo .time {
font-size: 10px; font-size: 10px;
} }
.arrangements .arrangementSubContainer .content .fromTo .middle { .arrangements .arrangementSubContainer .content .fromTo .middle {
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 100%; width: 100%;
top: -3px; top: -3px;
} }
.arrangements .arrangementSubContainer .content .fromTo .middle .icon { .arrangements .arrangementSubContainer .content .fromTo .middle .icon {
font-size: 24px; font-size: 24px;
color: #4F5A60; color: #4F5A60;
} }
.arrangements .arrangementSubContainer .content .fromTo .to { .arrangements .arrangementSubContainer .content .fromTo .to {
float: left; float: left;
width: 50%; width: 50%;
...@@ -285,13 +370,16 @@ ...@@ -285,13 +370,16 @@
padding-left: 50px; padding-left: 50px;
color: #4F5A60; color: #4F5A60;
} }
.arrangements .arrangementSubContainer .content .fromTo .middle .icon { .arrangements .arrangementSubContainer .content .fromTo .middle .icon {
font-size: 30px; font-size: 30px;
color: #4F5A60; color: #4F5A60;
} }
.transit{
.transit {
font-weight: 700; font-weight: 700;
} }
.arrangements .arrangementSubContainer .header { .arrangements .arrangementSubContainer .header {
background-color: #EFF1F2; background-color: #EFF1F2;
height: 34px; height: 34px;
...@@ -300,10 +388,12 @@ ...@@ -300,10 +388,12 @@
padding: 0 10px; padding: 0 10px;
line-height: 34px; line-height: 34px;
} }
.arrangements .arrangementSubContainer .header.hotel { .arrangements .arrangementSubContainer .header.hotel {
background-color: #FFF; background-color: #FFF;
display: flex; display: flex;
} }
.arrangements .arrangementSubContainer .header.hotel .city { .arrangements .arrangementSubContainer .header.hotel .city {
color: #455661; color: #455661;
font-size: 14px; font-size: 14px;
...@@ -313,10 +403,12 @@ ...@@ -313,10 +403,12 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.arrangements .arrangementSubContainer .content .name.hotel { .arrangements .arrangementSubContainer .content .name.hotel {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.arrangements .arrangementSubContainer .content .name .left { .arrangements .arrangementSubContainer .content .name .left {
float: left; float: left;
color: #00B2B4; color: #00B2B4;
...@@ -325,15 +417,18 @@ ...@@ -325,15 +417,18 @@
box-sizing: border-box; box-sizing: border-box;
padding-left: 3px; padding-left: 3px;
} }
.arrangements .arrangementSubContainer .content .name .right { .arrangements .arrangementSubContainer .content .name .right {
margin-top: 4px; margin-top: 4px;
float: left; float: left;
width: 90%; width: 90%;
box-sizing: border-box; box-sizing: border-box;
} }
.dayAgenda .slideHeader { .dayAgenda .slideHeader {
padding: 18px 0 2px 80px; padding: 18px 0 2px 80px;
} }
.slideHeader .dayNum { .slideHeader .dayNum {
font-size: 40px; font-size: 40px;
font-weight: 400; font-weight: 400;
...@@ -342,39 +437,50 @@ ...@@ -342,39 +437,50 @@
left: 0; left: 0;
top: 0; top: 0;
} }
.slideHeader .dayNumRight { .slideHeader .dayNumRight {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #4F5A61; color: #4F5A61;
margin-left:90px; margin-left: 90px;
} }
.slideHeader .dateEleSpace { .slideHeader .dateEleSpace {
height: 16px; height: 16px;
} }
.slideHeader .dayNumRight .cities { .slideHeader .dayNumRight .cities {
min-height: 20px; 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; display: inline-block;
} }
.slideHeader .cities i { .slideHeader .cities i {
font-size: 14px; font-size: 14px;
padding: 0 5px; padding: 0 5px;
display: inline-block; display: inline-block;
color:#00A4A8; color: #00A4A8;
} }
.tripViewContainer .inner .articleCont { .tripViewContainer .inner .articleCont {
min-height: 30px; min-height: 30px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.articleCont { .articleCont {
font-size: 16px; font-size: 16px;
line-height: 160%; line-height: 160%;
} }
.slideSubHeader{
.slideSubHeader {
position: relative; position: relative;
color:#00A4A8; color: #00A4A8;
} }
.slideSubHeader:after { .slideSubHeader:after {
content: " "; content: " ";
display: block; display: block;
...@@ -384,6 +490,7 @@ ...@@ -384,6 +490,7 @@
top: 10px; top: 10px;
z-index: 0; z-index: 0;
} }
.slideSubHeader .subTitle { .slideSubHeader .subTitle {
display: inline-block; display: inline-block;
background: #fff; background: #fff;
...@@ -391,18 +498,22 @@ ...@@ -391,18 +498,22 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.tripViewAgendaList{
margin-top:30px; .tripViewAgendaList {
margin-top: 30px;
} }
.tripViewAgendaList .agendaBox { .tripViewAgendaList .agendaBox {
background: #fff; background: #fff;
position: relative; position: relative;
margin-bottom: 60px; margin-bottom: 60px;
} }
.tripViewAgendaList .agendaBox .indexNum.hotelPre { .tripViewAgendaList .agendaBox .indexNum.hotelPre {
background: #F0AF37; background: #F0AF37;
color: #fff; color: #fff;
} }
.tripViewAgendaList .agendaBox .indexNum { .tripViewAgendaList .agendaBox .indexNum {
font-size: 18px; font-size: 18px;
line-height: 40px; line-height: 40px;
...@@ -414,6 +525,7 @@ ...@@ -414,6 +525,7 @@
left: 20px; left: 20px;
z-index: 9; z-index: 9;
} }
.tripViewAgendaList .agendaBox .coverWrap { .tripViewAgendaList .agendaBox .coverWrap {
text-align: right; text-align: right;
height: 150px; height: 150px;
...@@ -422,15 +534,18 @@ ...@@ -422,15 +534,18 @@
background-size: cover; background-size: cover;
background: url('../../assets/img/newtrip/hotel.jpg') no-repeat 100% 100%; background: url('../../assets/img/newtrip/hotel.jpg') no-repeat 100% 100%;
} }
.tripViewAgendaList .agendaBox .txtCont { .tripViewAgendaList .agendaBox .txtCont {
padding: 10px 20px; 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; white-space: pre-wrap;
} }
.tripViewAgendaList .agendaBox .agendaPoi .bed{
.tripViewAgendaList .agendaBox .agendaPoi .bed {
color: #3D4756; color: #3D4756;
font-size:22px; font-size: 22px;
} }
.tripViewAgendaList .agendaBox .txtCont .title { .tripViewAgendaList .agendaBox .txtCont .title {
font-size: 22px; font-size: 22px;
line-height: 24px; line-height: 24px;
...@@ -438,20 +553,24 @@ ...@@ -438,20 +553,24 @@
overflow: hidden; overflow: hidden;
font-weight: 700; font-weight: 700;
padding: 0 12px; padding: 0 12px;
color:#3D4756; color: #3D4756;
} }
.tripViewAgendaList .agendaBox .detailBox { .tripViewAgendaList .agendaBox .detailBox {
color: #626262; color: #626262;
font-size: 14px; font-size: 14px;
} }
.tripViewAgendaList .agendaBox .detailSection { .tripViewAgendaList .agendaBox .detailSection {
border-top: 1px #eee solid; border-top: 1px #eee solid;
padding: 10px 0; padding: 10px 0;
margin-top:20px; margin-top: 20px;
} }
.tripViewAgendaList .agendaBox .item { .tripViewAgendaList .agendaBox .item {
margin: 8px 0; margin: 8px 0;
} }
.tripViewAgendaList .agendaBox .label { .tripViewAgendaList .agendaBox .label {
display: inline-block; display: inline-block;
width: 22%; width: 22%;
...@@ -460,18 +579,23 @@ ...@@ -460,18 +579,23 @@
padding-right: 15px; padding-right: 15px;
text-align: right; text-align: right;
} }
.tripViewAgendaList .agendaBox .purchaseNote, .tripViewAgendaList .agendaBox .text {
.tripViewAgendaList .agendaBox .purchaseNote,
.tripViewAgendaList .agendaBox .text {
display: -webkit-inline-box; display: -webkit-inline-box;
width: 72%; width: 72%;
vertical-align: top; vertical-align: top;
} }
.subSection{
border-top:1px #eee solid; .subSection {
border-top: 1px #eee solid;
padding: 20px 0; padding: 20px 0;
} }
.tripViewAgendaList .agendaBox .table .item { .tripViewAgendaList .agendaBox .table .item {
margin: 8px 0; margin: 8px 0;
} }
.tripViewAgendaList .agendaBox .table .label { .tripViewAgendaList .agendaBox .table .label {
display: inline-block; display: inline-block;
width: 22%; width: 22%;
...@@ -480,11 +604,14 @@ ...@@ -480,11 +604,14 @@
padding-right: 15px; padding-right: 15px;
text-align: right; text-align: right;
} }
.tripViewAgendaList .agendaBox .table .purchaseNote, .tripViewAgendaList .agendaBox .table .text {
.tripViewAgendaList .agendaBox .table .purchaseNote,
.tripViewAgendaList .agendaBox .table .text {
display: -webkit-inline-box; display: -webkit-inline-box;
width: 72%; width: 72%;
vertical-align: top; vertical-align: top;
} }
.Divtriangle { .Divtriangle {
position: absolute; position: absolute;
left: 26px; left: 26px;
...@@ -495,7 +622,8 @@ ...@@ -495,7 +622,8 @@
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-top: 15px solid #DCDEDF; border-top: 15px solid #DCDEDF;
} }
.Divtriangle span{
.Divtriangle span {
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
...@@ -506,6 +634,7 @@ ...@@ -506,6 +634,7 @@
left: -28px; left: -28px;
top: -29px; top: -29px;
} }
/* .xuxian{ /* .xuxian{
position: absolute; position: absolute;
width:1px; width:1px;
...@@ -518,43 +647,52 @@ ...@@ -518,43 +647,52 @@
.tripViewAgendaList .agendaBox .numberList { .tripViewAgendaList .agendaBox .numberList {
background: #00A4A8; background: #00A4A8;
color: #fff; color: #fff;
top:-16px; top: -16px;
left:20px; 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 { .tripAgendaTransitBox {
overflow: hidden; overflow: hidden;
margin-bottom: 60px; margin-bottom: 60px;
} }
.tripAgendaTransitBox .transitIcon { .tripAgendaTransitBox .transitIcon {
float: left; float: left;
margin: 5px 0 0 60px; margin: 5px 0 0 60px;
font-size: 22px; font-size: 22px;
} }
.tripAgendaTransitBox .transitIcon { .tripAgendaTransitBox .transitIcon {
float: left; float: left;
margin: 5px 0 0 60px; margin: 5px 0 0 60px;
font-size: 22px; font-size: 22px;
} }
.tripAgendaTransitBox .transitInfoTxt { .tripAgendaTransitBox .transitInfoTxt {
line-height: 34px; line-height: 34px;
position: relative; position: relative;
top:3px; top: 3px;
margin-left:10px; margin-left: 10px;
} }
.tripViewAgendaList { .tripViewAgendaList {
margin-top: 30px; margin-top: 30px;
background: url(../../assets/img/newtrip/agendaBorder.png) 40px top repeat-y; background: url(../../assets/img/newtrip/agendaBorder.png) 40px top repeat-y;
background-size: 2px auto; background-size: 2px auto;
} }
.pageViewTrip .viewTripMap { .pageViewTrip .viewTripMap {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -563,20 +701,24 @@ ...@@ -563,20 +701,24 @@
height: 100%; height: 100%;
/* z-index:-1; */ /* z-index:-1; */
} }
.cityDayList .tripDay .cities i{
color:#00A4A8; .cityDayList .tripDay .cities i {
margin:0 10px; color: #00A4A8;
font-size:18px; 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 { .tripViewAgendaList .agendaBox .txtCont {
padding: 10px 20px; 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; border: 1px solid #DCDEDF;
white-space: pre-wrap; white-space: pre-wrap;
} }
.agendaBox .longTransitPoi .left { .agendaBox .longTransitPoi .left {
position: absolute; position: absolute;
left: 7px; left: 7px;
...@@ -584,37 +726,45 @@ ...@@ -584,37 +726,45 @@
margin-top: -10px; margin-top: -10px;
font-size: 20px; font-size: 20px;
} }
.agendIndex{
.agendIndex {
background-color: #00A4A8; background-color: #00A4A8;
color:#fff; color: #fff;
} }
.tripViewAgendaList .agendaBox .city { .tripViewAgendaList .agendaBox .city {
color: #00A4A8; color: #00A4A8;
font-size:18px; font-size: 18px;
} }
.agendaBox .poiName { .agendaBox .poiName {
font-weight: 700; font-weight: 700;
color: #4B4E52; color: #4B4E52;
font-size: 22px; font-size: 22px;
} }
.agendaBox .time { .agendaBox .time {
color: #8F9296; color: #8F9296;
font-size: 14px; font-size: 14px;
} }
.agendaBox .longTransitPoi { .agendaBox .longTransitPoi {
padding: 10px 10px 10px 60px; padding: 10px 10px 10px 60px;
position: relative; position: relative;
} }
.agendaBox .longTransitMethod { .agendaBox .longTransitMethod {
padding: 10px 10px 10px 60px; padding: 10px 10px 10px 60px;
position: relative; position: relative;
} }
.agendaBox .longTransitMethod .left { .agendaBox .longTransitMethod .left {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
margin-top: -40px; margin-top: -40px;
} }
.agendaBox .longTransitMethod .left .frame { .agendaBox .longTransitMethod .left .frame {
position: absolute; position: absolute;
font-size: 80px; font-size: 80px;
...@@ -625,6 +775,7 @@ ...@@ -625,6 +775,7 @@
top: -60px; top: -60px;
padding-top: 7px; padding-top: 7px;
} }
.agendaBox .longTransitMethod .left .method { .agendaBox .longTransitMethod .left .method {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
...@@ -636,21 +787,25 @@ ...@@ -636,21 +787,25 @@
line-height: 86px; line-height: 86px;
text-align: center; text-align: center;
} }
.agendaBox .longTransitMethod .name { .agendaBox .longTransitMethod .name {
font-weight: 700; font-weight: 700;
color: #4B4E52; color: #4B4E52;
font-size: 22px; font-size: 22px;
} }
.agendaBox .longTransitMethod .time { .agendaBox .longTransitMethod .time {
color: #8F9296; color: #8F9296;
font-size: 14px; font-size: 14px;
} }
.frame i{
font-size:30px; .frame i {
font-size: 30px;
line-height: 80px; line-height: 80px;
} }
.pageViewTrip .active{
color:#00A4A8!important; .pageViewTrip .active {
color: #00A4A8 !important;
} }
</style> </style>
<template> <template>
...@@ -670,17 +825,18 @@ ...@@ -670,17 +825,18 @@
<div class="border"></div> <div class="border"></div>
</div> </div>
<ul> <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> <span class="dayIndex">D{{index+1}}</span>
<template v-for="suItem in item.dayArray"> <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"> <template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span> <span class="city" :key="index">{{childItem.startCityName}}</span>
<i>-</i> <i :key="index">-</i>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city" :key="index">{{childItem.arrivalCityName}}</span>
<i>-</i> <i>-</i>
</template> </template>
<template v-else> <template v-else>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
</template> </template>
...@@ -704,14 +860,15 @@ ...@@ -704,14 +860,15 @@
</div> </div>
<div class="cities"> <div class="cities">
<template v-for="suItem in item.dayArray"> <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"
<template v-if="index==0"> v-for="(childItem,index) in suItem.childItem.subTraffic">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span> <span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
</template> </template>
<template v-else> <template v-else>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
</template> </template>
...@@ -747,7 +904,9 @@ ...@@ -747,7 +904,9 @@
<span class="subTitle">交通方案</span> <span class="subTitle">交通方案</span>
</div> </div>
</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="arrangementSubContainer">
<div class="header"><span class="dayIndex">D{{index+1}}</span></div> <div class="header"><span class="dayIndex">D{{index+1}}</span></div>
<div class="content"> <div class="content">
...@@ -783,13 +942,13 @@ ...@@ -783,13 +942,13 @@
<div class="header hotel"> <div class="header hotel">
<span class="dayIndex">D1-D2</span> <span class="dayIndex">D1-D2</span>
<div class="city"><span>东京</span></div> <div class="city"><span>东京</span></div>
</div> </div>
<div class="content"> <div class="content">
<div class="name hotel"> <div class="name hotel">
<span class="left"><i class="iconfont icon-bed"></i></span> <span class="left"><i class="iconfont icon-bed"></i></span>
<span class="right">皇家花园酒店-THE羽田</span> <span class="right">皇家花园酒店-THE羽田</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12"> <div class="col-md-12 col-sm-12">
...@@ -797,13 +956,13 @@ ...@@ -797,13 +956,13 @@
<div class="header hotel"> <div class="header hotel">
<span class="dayIndex">D1-D2</span> <span class="dayIndex">D1-D2</span>
<div class="city"><span>东京</span></div> <div class="city"><span>东京</span></div>
</div> </div>
<div class="content"> <div class="content">
<div class="name hotel"> <div class="name hotel">
<span class="left"><i class="iconfont icon-bed"></i></span> <span class="left"><i class="iconfont icon-bed"></i></span>
<span class="right">皇家花园酒店-THE羽田</span> <span class="right">皇家花园酒店-THE羽田</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -819,15 +978,32 @@ ...@@ -819,15 +978,32 @@
<div class="dayNumRight"> <div class="dayNumRight">
<div class="dateEleSpace"></div> <div class="dateEleSpace"></div>
<div class="cities"> <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> <i class="iconfont icon-daoda"></i>
<span>成都</span> <span>成都</span> -->
</div> </div>
</div> </div>
</div> </div>
<div class="articleCont articleTxt"> <div class="articleCont articleTxt">
<p>今日推荐:</p> <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>
<div class="agendaSection"> <div class="agendaSection">
<div class="slideSubHeader"> <div class="slideSubHeader">
...@@ -838,10 +1014,13 @@ ...@@ -838,10 +1014,13 @@
<template v-if="subItem.type==2"> <template v-if="subItem.type==2">
<div class="agendaBox"> <div class="agendaBox">
<div class="indexNum numberList">{{index+1}}</div> <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="txtCont icon-triangle">
<div class="detailBox"> <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>
<div class="Divtriangle"> <div class="Divtriangle">
<span></span> <span></span>
...@@ -849,7 +1028,8 @@ ...@@ -849,7 +1028,8 @@
<div class="detailSection" style="margin-top:0;"> <div class="detailSection" style="margin-top:0;">
<div class="item"> <div class="item">
<span class="label">建议游玩时间</span> <span class="label">建议游玩时间</span>
<span class="text">{{subItem.childItem.playTimeMinutes}}</span> <span
class="text">{{subItem.childItem.playTimeMinutes}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -901,8 +1081,11 @@ ...@@ -901,8 +1081,11 @@
<div class="indexNum tos-icon hotelPre "> <div class="indexNum tos-icon hotelPre ">
<i class="iconfont icon-sun"></i> <i class="iconfont icon-sun"></i>
</div> </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="coverWrap" v-if="subItem.childItem.imaArray.length>0"
<div class="txtCont icon-triangle" 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"> <div class="agendaPoi">
<i class="iconfont icon-bed bed"></i> <i class="iconfont icon-bed bed"></i>
<span class="title">{{subItem.childItem.hotelName}}</span> <span class="title">{{subItem.childItem.hotelName}}</span>
...@@ -912,19 +1095,23 @@ ...@@ -912,19 +1095,23 @@
<div class="item"> <div class="item">
<span class="label">酒店星级</span> <span class="label">酒店星级</span>
<span class="text"> <span class="text">
<el-rate v-model="subItem.childItem.star" disabled></el-rate> <el-rate v-model="subItem.childItem.star"
disabled></el-rate>
</span> </span>
</div> </div>
<div class="item"> <div class="item">
<span class="label">设施服务</span> <span class="label">设施服务</span>
<span class="text">{{getService(subItem.childItem.facilityServices)}}</span> <span
class="text">{{getService(subItem.childItem.facilityServices)}}</span>
</div> </div>
</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="detailSection" style="margin-top:0;">
<div class="item"> <div class="item">
<span class="label">地址</span> <span class="label">地址</span>
<span class="text">{{subItem.childItem.hotelAddress}}</span> <span
class="text">{{subItem.childItem.hotelAddress}}</span>
</div> </div>
<div class="item"> <div class="item">
<span class="label">网址</span> <span class="label">网址</span>
...@@ -943,7 +1130,7 @@ ...@@ -943,7 +1130,7 @@
</div> </div>
</template> </template>
</template> </template>
<!-- <div class="agendaBox"> <!-- <div class="agendaBox">
<div class="indexNum numberList">1</div> <div class="indexNum numberList">1</div>
<div class="coverWrap"></div> <div class="coverWrap"></div>
...@@ -1015,7 +1202,7 @@ ...@@ -1015,7 +1202,7 @@
</div> </div>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -1028,173 +1215,172 @@ ...@@ -1028,173 +1215,172 @@
</div> </div>
</template> </template>
<script> <script>
import tripMap from '../global/tripMap' import tripMap from '../global/tripMap'
// import HTMap from '../global/HTMap' // import HTMap from '../global/HTMap'
export default { export default {
data(){ data() {
return{ return {
defaultImg: 'this.src="' + require('../../assets/img/newtrip/hotel.jpg') + '"', defaultImg: 'this.src="' + require('../../assets/img/newtrip/hotel.jpg') + '"',
travelLngLat:[], travelLngLat: [],
//请求参数 //请求参数
msg:{ msg: {
ID:0, ID: 0,
tcid:0 tcid: 0
}, },
dataList:{}, dataList: {},
scrollobj: null, scrollobj: null,
crtnav:'', crtnav: '',
isShow:false, isShow: false,
dataindex:0 dataindex: 0
}
},
mounted () {
this.msg.ID= this.$route.query.ID;
this.msg.tcid= this.$route.query.tcid;
this.crtnav='tripLine';
this.scrollobj = document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getTrip();
},
components: {
tripMap
},
watch:{
//滚动检测day滚动
dataindex(newValue,old){
this.getDayPoint(this.dataindex);
},
//滚动检测头部三个
crtnav(newValue,old){
if(newValue=='tripLine'||newValue=='aboutTrip'||newValue=='tripArrange'){
this.getAllPoint();
} }
} },
}, mounted() {
this.msg.ID = this.$route.query.ID;
methods: { this.msg.tcid = this.$route.query.tcid;
//加载数据
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.getAllPoint();
// this.$refs.tripMap.mapBuild();
} else { this.crtnav = 'tripLine';
this.Error(res.data.message) this.scrollobj = document.getElementsByClassName('el-scrollbar__wrap')[0];
} this.scrollobj.addEventListener('scroll', this.handleScroll);
}, null) this.getTrip();
}, },
//遍历设施服务 components: {
getService(item){ tripMap
let Obj = JSON.parse(item);
let str=''
Obj[0].list.forEach(x => {
str+= x.Content+' ';
});
return str;
}, },
//滚动定位 watch: {
goScroll(id,index) { //滚动检测day滚动
if(id=='tripLine'||id=='aboutTrip'||id=='tripArrange'){ dataindex(newValue, old) {
this.$refs.tripMap.mapBuild(); this.getDayPoint(this.dataindex);
} },
if(index>=0&&index!=''){ //滚动检测头部三个
this.getDayPoint(index); crtnav(newValue, old) {
this.$refs.tripMap.mapBuild(); if (newValue == 'tripLine' || newValue == 'aboutTrip' || newValue == 'tripArrange') {
this.getAllPoint();
}
} }
this.crtnav=id;
this.scrollobj.scrollTop = document.getElementById(id).offsetTop;
}, },
//加载所有坐标点
getAllPoint(){ methods: {
let Arr=[]; //加载数据
this.dataList.dayList.forEach(x=>{ getTrip() {
x.dayArray.forEach(y=>{ this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => {
if(y.type==1){
y.childItem.subTraffic.forEach(z=>{ if (res.data.resultCode == 1) {
let obj1={ this.dataList = res.data.data;
lat:z.startCityPoint[1], console.log( " this.dataList " ,this.dataList );
lng:z.startCityPoint[0], this.isShow = true;
name:z.arrivalCityName, this.getAllPoint();
type:1 // this.$refs.tripMap.mapBuild();
} else {
this.Error(res.data.message)
}
}, null)
},
//遍历设施服务
getService(item) {
let Obj = JSON.parse(item);
let str = ''
Obj[0].list.forEach(x => {
str += x.Content + ' ';
});
return str;
},
//滚动定位
goScroll(id, index) {
if (id == 'tripLine' || id == 'aboutTrip' || id == 'tripArrange') {
this.$refs.tripMap.mapBuild();
}
if (index >= 0 && index != '') {
this.getDayPoint(index);
this.$refs.tripMap.mapBuild();
}
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
}
Arr.push(obj1);
Arr.push(obj2);
})
}
})
})
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={ let obj2 = {
lat:z.arrivalCityPoint[1], lat: z.arrivalCityPoint[1],
lng:z.arrivalCityPoint[0], lng: z.arrivalCityPoint[0],
name:z.startCityName, name: z.startCityName,
type:1 type: 1
} }
Arr.push(obj1); Arr.push(obj1);
Arr.push(obj2); Arr.push(obj2);
}) })
} }
}) })
}) console.log(Arr, 'day加载');
console.log(Arr,'Arrrr'); this.travelLngLat = Arr;
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
}
Arr.push(obj1);
Arr.push(obj2);
})
}
})
console.log(Arr,'day加载');
this.travelLngLat=Arr;
},
//滚动选中 //滚动选中
handleScroll() { handleScroll() {
try { try {
let navs=['tripLine','aboutTrip','tripArrange']; let navs = ['tripLine', 'aboutTrip', 'tripArrange'];
this.dataList.dayList.forEach((x,index)=>{ this.dataList.dayList.forEach((x, index) => {
navs.push('dayList'+(index+1)) navs.push('dayList' + (index + 1))
}) })
let current = '' let current = ''
navs.forEach(x => { navs.forEach(x => {
let t = document.getElementById(x).offsetTop let t = document.getElementById(x).offsetTop
if (t <= this.scrollobj.scrollTop) { if (t <= this.scrollobj.scrollTop) {
current = x current = x
}
})
this.crtnav = current
// if(current=='tripLine'||current=='aboutTrip'||current=='tripArrange'){
// this.getAllPoint();
// }
if (current.indexOf("dayList") != -1) {
let index = current.split('dayList')[1];
this.dataindex = index;
} }
}) } catch (error) {
this.crtnav = current
// if(current=='tripLine'||current=='aboutTrip'||current=='tripArrange'){
// this.getAllPoint();
// }
if(current.indexOf("dayList") != -1){
let index=current.split('dayList')[1];
this.dataindex=index;
}
} catch (error) {
} }
}, },
}
} }
} </script>
</script> \ No newline at end of file
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