Skip to content

A
Athena
Commit c537e89e authored by zhengke's avatar zhengke
Browse files
Options

增加新版行程

parent f2fe7465
Hide whitespace changes
Inline Side-by-side
Showing with 741 additions and 1 deletion
src/App.vue
View file @ c537e89e
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_gfxa4q9jlne.css'; @import '//at.alicdn.com/t/font_863923_fcbdh6pkoc8.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
@import './assets/css/common.css'; @import './assets/css/common.css';
body,html{ body,html{
......
src/components/mall/detailTwo.vue
View file @ c537e89e
...@@ -245,6 +245,11 @@ ...@@ -245,6 +245,11 @@
<i class="iconfont icon-hangchenganpai"></i> <i class="iconfont icon-hangchenganpai"></i>
PDF下载 PDF下载
</li> </li>
<li @click="goUrlTrip()" style="display:none;">
<i class="iconfont icon-hangchenganpai"></i>
行程
</li>
</ul> </ul>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
...@@ -1071,6 +1076,13 @@ export default { ...@@ -1071,6 +1076,13 @@ export default {
goScroll(id){ goScroll(id){
this.scrollobj.scrollTop=document.getElementById(id).offsetTop+screen.availHeight-350; this.scrollobj.scrollTop=document.getElementById(id).offsetTop+screen.availHeight-350;
}, },
//跳转至新行程
goUrlTrip(){
this.$router.push({
name: "newTrip",
query: {}
})
},
handleScroll(){ handleScroll(){
try { try {
if(this.scrollobj.scrollTop>this.$refs.nav.offsetTop){ if(this.scrollobj.scrollTop>this.$refs.nav.offsetTop){
......
src/components/mall/newTrip.vue 0 → 100644
View file @ c537e89e
<style>
.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";
}
.pageViewTrip .tripContWrap{
position: relative;
height:100%;
}
.pageViewTrip .sideBar {
position: absolute;
width: 250px;
top: 0;
height: 800px;
padding: 15px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pageViewTrip .sideBarBtns .btnPage {
cursor: pointer;
margin-bottom: 5px;
}
.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;
width: 45px;
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;
padding: 0;
overflow-y: auto;
width: 190px;
max-height: calc(100vh - 220px);
}
.pageViewTrip .sideBar ul li {
display: block;
line-height: 30px;
height: 30px;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.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 {
display: table;
content: " ";
clear: both;
}
.tripViewContainer .cityDayList .tripDay {
padding: 10px 0 10px 65px;
box-sizing: border-box;
position: relative;
border-bottom: 1px #DCDEE0 solid;
min-height: 60px;
}
.tripViewContainer .cityDayList .tripDay .left {
position: absolute;
left: 0;
width: 65px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.tripViewContainer .cityDayList .tripDay .cities {
font-size: 18px;
line-height: 24px;
min-height: 40px;
width: 100%;
color: #455661;
border-left: 1px #DCDEE0 solid;
padding: 10px 0 10px 15px;
-webkit-box-sizing: border-box;
-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 {
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;
padding-right: 10px;
position: relative;
z-index: 2;
}
.noteSubHeader {
color: #4F5A60;
font-weight: 500;
font-size: 16px;
line-height: 20px;
margin: 25px 0 15px;
position: relative;
}
.noteSubHeader:after {
display: block;
position: absolute;
border-bottom: 1px #eee solid;
width: 100%;
z-index: 0;
}
.tripViewContainer .notes .col-md-6 {
width: 100%;
}
.noteBriefPiece {
padding: 10px 10px 10px 80px;
box-sizing: border-box;
position: relative;
margin-bottom: 10px;
cursor: pointer;
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 {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.arrangementSubHeader, .noteSubHeader {
font-weight: 500;
font-size: 16px;
line-height: 20px;
margin: 25px 0 15px;
position: relative;
}
.arrangementSubHeader .subTitle {
display: inline-block;
background: #fff;
padding-right: 10px;
position: relative;
z-index: 2;
color: #4F5A60;
}
.arrangementSubHeader:after {
display: block;
position: absolute;
border-bottom: 1px #DBE0E4 solid;
width: 100%;
z-index: 0;
bottom: 1px;
}
.arrangementSubHeader:after, .noteSubHeader:after, .tripMenuWrap .btnDayHeader:before {
top: 10px;
content: " ";
}
.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;
font-size: 14px;
border-bottom: #DBE0E4 dotted 1px;
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%;
box-sizing: border-box;
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%;
box-sizing: border-box;
padding-left: 50px;
color: #4F5A60;
}
.arrangements .arrangementSubContainer .content .fromTo .middle .icon {
font-size: 30px;
color: #4F5A60;
}
.transit{
font-weight: 700;
}
.arrangements .arrangementSubContainer .header {
background-color: #EFF1F2;
height: 34px;
font-size: 14px;
border-bottom: #DBE0E4 dotted 1px;
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;
font-weight: 700;
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.arrangements .arrangementSubContainer .content .name.hotel {
position: relative;
overflow: hidden;
}
.arrangements .arrangementSubContainer .content .name .left {
float: left;
color: #00B2B4;
font-size: 20px;
width: 10%;
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;
line-height: 40px;
position: absolute;
left: 0;
top: 0;
}
.slideHeader .dayNumRight {
font-size: 16px;
font-weight: 400;
color: #4F5A61;
margin-left:90px;
}
.slideHeader .dateEleSpace {
height: 16px;
}
.slideHeader .dayNumRight .cities {
min-height: 20px;
}
.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;
}
.tripViewContainer .inner .articleCont {
min-height: 30px;
margin-bottom: 20px;
}
.articleCont {
font-size: 16px;
line-height: 160%;
}
.slideSubHeader{
position: relative;
color:#00A4A8;
}
.slideSubHeader:after {
content: " ";
display: block;
position: absolute;
border-bottom: 1px #00B2B4 solid;
width: 100%;
top: 10px;
z-index: 0;
}
.slideSubHeader .subTitle {
display: inline-block;
background: #fff;
padding-right: 10px;
position: relative;
z-index: 2;
}
.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;
text-align: center;
width: 40px;
border-radius: 40px;
position: absolute;
top: -20px;
left: 20px;
z-index: 9;
}
.tripViewAgendaList .agendaBox .coverWrap {
text-align: right;
height: 150px;
color: #fff;
position: relative;
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;
border: 1px solid #DCDEDF;
white-space: pre-wrap;
}
.tripViewAgendaList .agendaBox .agendaPoi .bed{
color: #3D4756;
font-size:22px;
}
.tripViewAgendaList .agendaBox .txtCont .title {
font-size: 22px;
line-height: 24px;
max-height: 48px;
overflow: hidden;
font-weight: 700;
padding: 0 12px;
color:#3D4756;
}
.tripViewAgendaList .agendaBox .detailBox {
color: #626262;
font-size: 14px;
}
.tripViewAgendaList .agendaBox .detailSection {
border-top: 1px #eee solid;
padding: 10px 0;
}
.tripViewAgendaList .agendaBox .item {
margin: 8px 0;
}
.tripViewAgendaList .agendaBox .label {
display: inline-block;
width: 22%;
color: #959595;
vertical-align: top;
padding-right: 15px;
text-align: right;
}
.tripViewAgendaList .agendaBox .purchaseNote, .tripViewAgendaList .agendaBox .text {
display: -webkit-inline-box;
width: 72%;
vertical-align: top;
}
</style>
<template>
<div class="pageViewTrip">
<div class="tripContWrap">
<div class="sideBar mobileHide">
<div class="sideBarBtns sideTop">
<div class="btnPage active">
<i class="iconfont icon-huozhuduanchaxunxianlu"></i>行程线路
</div>
<div class="btnPage">
<i class="iconfont icon-message"></i>关于这次旅行
</div>
<div class="btnPage">
<i class="iconfont icon-order_icon"></i>行程安排
</div>
<div class="border"></div>
</div>
<ul>
<li>
<span class="dayIndex">D1</span>
<span class="city">东京</span>
</li>
<li>
<span class="dayIndex">D2</span>
<span class="city">东京</span>
<i>-</i>
<span class="city">箱根</span>
</li>
</ul>
<div class="border"></div>
</div>
<div class="tripViewContainer main ">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">
<div class="slideHeader">行程路线</div>
<div>
<div class="cityDayList clear">
<div class="tripDay">
<div class="left">
<div class="dayIndex">D1</div>
</div>
<div class="cities">
<span class="city">东京</span>
</div>
</div>
<div class="tripDay">
<div class="left">
<div class="dayIndex">D1</div>
</div>
<div class="cities">
<span class="city">东京</span>
</div>
</div>
<div class="tripDay">
<div class="left">
<div class="dayIndex">D1</div>
</div>
<div class="cities">
<span class="city">东京</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="slideHeader">关于这次旅行</div>
<div class="articleCont articleTxt">
<p>清风捎信，大地为书，寄往不愿沉迷世俗，探求时间奥妙的你，为此，我将带你走进神秘的樱之国度。</p>
<p>写在前面的话：</p>
<p>&nbsp;&nbsp;亲爱的旅行家，你好呀，我是你路途中最忠实的朋友。在清闲午后，在落日黄昏，一杯清茶，你翻开手中书卷，悄无声息中和我踏上美妙的旅途，我们时常作伴，把酒言欢，在异域街头，我为你收集温暖❤&nbsp;</p>
<p>&nbsp;&nbsp;所以，就让这一切变成一条路，你去走走看看.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner slideQuote">
<div class="slideHeader">行程安排</div>
<div class="arrangements">
<div class="row">
<div class="col-md-12 arrangementHeader">
<div class="arrangementSubHeader">
<span class="subTitle">交通方案</span>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer">
<div class="header"><span class="dayIndex">D1</span></div>
<div class="content">
<div class="name transit">KE808</div>
<div class="fromTo">
<div class="from">
<div class="name">西安咸阳国际机场</div>
<div class="time">出发时间 12:40</div>
</div>
<div class="middle">
<div>
<i class="iconfont icon-daoda icon"></i>
</div>
</div>
<div class="to">
<div class="name">仁川国际机场</div>
<div class="time">到达时间 16:50</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer">
<div class="header"><span class="dayIndex">D2</span></div>
<div class="content">
<div class="name transit">KE808</div>
<div class="fromTo">
<div class="from">
<div class="name">西安咸阳国际机场</div>
<div class="time">出发时间 12:40</div>
</div>
<div class="middle">
<div>
<i class="iconfont icon-daoda icon"></i>
</div>
</div>
<div class="to">
<div class="name">仁川国际机场</div>
<div class="time">到达时间 16:50</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="arrangements">
<div class="row">
<div class="col-md-12 arrangementHeader">
<div class="arrangementSubHeader">
<span class="subTitle">酒店安排</span>
</div>
<div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer">
<div class="header hotel">
<span class="dayIndex">D1-D2</span>
<div class="city"><span>东京</span></div>
</div>
<div class="content">
<div class="name hotel">
<span class="left"><i class="iconfont icon-bed"></i></span>
<span class="right">皇家花园酒店-THE羽田</span>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer">
<div class="header hotel">
<span class="dayIndex">D1-D2</span>
<div class="city"><span>东京</span></div>
</div>
<div class="content">
<div class="name hotel">
<span class="left"><i class="iconfont icon-bed"></i></span>
<span class="right">皇家花园酒店-THE羽田</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<div class="slideHeader" style="position:relative;">
<div class="dayNum">D2</div>
<div class="dayNumRight">
<div class="dateEleSpace"></div>
<div class="cities">
<span class="city">东京</span>
<i class="iconfont icon-daoda"></i>
<span>成都</span>
</div>
</div>
</div>
<div class="articleCont articleTxt">
<p>今日推荐：</p>
<p>大涌谷--箱根强罗公园--雕刻之森美术馆--箱根湿生花园--箱根七汤</p>
</div>
<div class="agendaSection">
<div class="slideSubHeader">
<span class="subTitle">D3 日程安排</span>
</div>
<div class="tripViewAgendaList">
<div class="agendaBox">
<div class="indexNum tos-icon hotelPre ">
<i class="iconfont icon-sun"></i>
</div>
<!-- <div class="coverWrap" :style="`background: url(${defaultImg}) no-repeat 100% 100%`"></div> -->
<div class="coverWrap"></div>
<div class="txtCont icon-triangle">
<div class="agendaPoi">
<i class="iconfont icon-bed bed"></i>
<span class="title">皇家花园酒店-THE羽田</span>
</div>
<div class="detailBox">
<div class="detailSection">
<div class="item">
<span class="label">酒店星级</span>
<span class="text">
<i class="iconfont "></i>
</span>
</div>
<div class="item">
<span class="label">设施服务</span>
<span class="text">
<i class="iconfont"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
defaultImg: 'this.src="' + require('../../assets/img/newtrip/hotel.jpg') + '"',
}
},
mounted () {
},
methods: {
}
}
</script>
src/router.js
View file @ c537e89e
...@@ -29,6 +29,15 @@ export default new Router({ ...@@ -29,6 +29,15 @@ export default new Router({
name: "login", name: "login",
component: loginRed component: loginRed
}, },
{
path: '/newTrip',
name: 'newTrip',
component: resolve => require(['@/components/mall/newTrip'], resolve),
meta: {
title: '行程'
}
},
{ {
path: "/", path: "/",
name: "index", name: "index",
......
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