修改

src/App.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 <style>
-@import url("//at.alicdn.com/t/font_1890699_863y2y4jxon.css");
+@import url("//at.alicdn.com/t/font_1890699_p3f17tlsn3.css");
 @font-face {
   font-family: "oswald";
   src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");

src/components/trip/style1.vue

+<style>
+  .Style_main_Top {
+    height: 460px;
+    overflow: hidden;
+  }
+
+  .Style_main_Top .detOne_top {
+    display: inline-block;
+    width: calc(100% + 20px);
+    height: 100%;
+    margin-left: -10px;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    z-index: 0;
+    filter: blur(5px);
+  }
+
+  .Style_main_Top .detOneModel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    z-index: 2;
+    width: 50%;
+    height: 450px;
+    float: left;
+    text-align: center;
+  }
+
+  .detOneModel label {
+    position: relative;
+    display: inline-block;
+    width: 400px;
+    height: 100%;
+    background-color: rgba(255, 255, 255, .55);
+    padding: 60px 40px 40px;
+    text-align: left;
+  }
+
+  .detOneModel>* {
+    display: inline-block;
+    letter-spacing: 2px;
+  }
+
+  .Style_main_Top .main-title {
+    font-size: 55px;
+    font-weight: bold;
+    color: #000;
+    -webkit-writing-mode: vertical-lr;
+    writing-mode: vertical-lr;
+    height: 100%;
+  }
+
+  .Style_main_Top .sub-title {
+    font-size: 24px;
+    font-weight: lighter;
+    padding-top: 74px;
+    -webkit-writing-mode: vertical-lr;
+    writing-mode: vertical-lr;
+    height: 100%;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .Style_main_Top .detOneModel {
+      width: 100%;
+      height: 280px;
+      top:80px;
+    }
+    .Style_main_Top .main-title{
+      font-size:30px;
+    }
+    .Style_main_Top .sub-title{
+      font-size:15px;
+    }
+    .detOneModel label {
+        width: 100%;
+        padding-top: 50px;
+    }
+  }
+
+</style>
+<template>
+  <div class="Style_main_Top">
+    <div class="detOne_top" v-if="imgCover.length>0"
+      :style="{backgroundImage:'url('+imgCover[0].Url+')'}">
+    </div>
+    <div class="detOneModel">
+      <label>
+        <b class="main-title">{{dataList.countryName}}</b>
+        <span class="sub-title">{{dataList.placeName}}</span>
+      </label>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['dataList'],
+    data() {
+      return {
+        imgCover:[]
+      };
+    },
+    created() {},
+    mounted() {
+      this.imgCover = JSON.parse(this.dataList.imgCover);
+    },
+    methods: {
+
+    },
+  };
+
+</script>

src/components/trip/style2.vue

+<style>
+    .Style2_main{
+        position: relative;
+        margin-bottom: 60px;
+        margin-top: -10px;
+        padding: 40px 0;
+        background-color: #fff;
+        border-bottom: 1px solid #e5e5e5;
+        z-index: 3;
+    }
+    .Style2_main .wl-section-block{
+        width: 100%;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        display:flex;
+    }
+    .Style2_main .wl-section-block>*{
+        flex:1;
+    }
+    .Style2_main .tour-intro{
+        padding-left:30px;
+    }
+    .Style2_main .tour_Nmae{
+        margin-bottom: 10px;
+        font-size: 24px;
+        font-weight: bold;
+    }
+    .Style2_main .drop-wrap{
+        position: relative;
+        margin-bottom:10px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .drop-wrap a,.print_box{
+        margin-right: 10px;
+        margin-bottom: 10px;
+        display: inline-block;
+        font-size: 14px;
+        color: #006be2;
+        padding: 4px 8px;
+        transition: .15s ease-in;
+    }
+    .Style2_main .tour-detail-list{
+        padding: 0 0 20px;
+        font-size: 14px;
+        color: #999;
+        list-style: none;
+    }
+    .Style2_main .tour-detail-list li{
+        line-height:2;
+    }
+    .Style2_main .tour-cover2 img{
+        width:100%;
+        height:auto;
+    }
+    @media only screen and (max-width: 768px){
+        .Style2_main .wl-section-block {
+            padding: 0;
+            display: block;
+        }
+        .Style2_main{
+            padding:0;
+        }
+    }
+</style>
+<template>
+  <div class="Style2_main">
+    <div class="wl-section-block">
+        <div class="tour-cover2" v-if="imgCover.length>0">
+            <img :src="imgCover[0].Url"/>
+        </div>
+        <div class="tour-intro">
+            <div class="tour_Nmae">{{dataList.title}}</div>
+            <div class="drop-wrap">
+                <a>分享</a>
+                <a class="print_box" @click="window.print()">打印</a>
+            </div>
+            <ul class="tour-detail-list">
+                <li>行程編號：{{dataList.currentPriceInfo.tcnum}}</li>   
+                <li>旅遊地點：{{dataList.countryName}}</li>
+                <li>旅遊天數：{{dataList.dayNum}}天</li>
+                <li>出團日期：{{dataList.currentPriceInfo.startDate}}</li>
+            </ul>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['dataList'],
+    data() {
+      return {
+        imgCover:[]
+      };
+    },
+    created() {},
+    mounted() {
+        this.imgCover = JSON.parse(this.dataList.imgCover);
+    },
+    methods: {
+
+    },
+  };
+
+</script>

src/components/trip/style4.vue

+<style>
+.wl-section-block {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.section-tour {
+    margin-bottom: 30px !important;
+    padding: 30px 30px 0;
+    border: 1px solid #e5e5e5;
+    background-color: #fff;
+}
+.section-tour .isHiden4{
+    height:450px;
+    overflow: hidden;
+}
+.toggle_down:before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    top: -100px;
+    left: 0;
+    z-index: 2;
+    height: 100px;
+    background-image: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: -moz-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: linear-gradient(180deg,rgba(255,255,255,0),#fff);
+}
+</style>
+<template>
+  <div>
+    <section class="section-tour wl-section-block">
+      <div class="todayTitle">行程特色</div>
+      <div class="featureBox">
+        <div class="feature-inner" v-html="dataList.feature.featureContent" :class="{'isHiden4':isShow}"></div>
+        <div class="collapse_toggle" v-if="!isShow">
+          <i class="iconfont iconarrow-top" @click="isShow=true"></i>
+        </div>
+        <div class="collapse_toggle toggle_down" v-else>
+          <i class="iconfont iconarrowdown" @click="isShow=false"></i>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['dataList'],
+    data() {
+      return {
+        isShow:false
+      };
+    },
+    created() {},
+    mounted() {
+      if (localStorage.baseifo) {
+        this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
+      }
+      if(this.TripConfig.TripConfig.TripFeatureIsOpen==1){
+          this.isShow=false
+      }else{
+          this.isShow=true;
+      }
+    },
+    methods: {
+
+    },
+  };
+
+</script>

src/components/trip/style5.vue

+<style>
+  .wl-section-block {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .section-tour {
+    margin-bottom: 30px !important;
+    padding: 30px 30px 0;
+    border: 1px solid #e5e5e5;
+    background-color: #fff;
+  }
+
+  .style5_item_title {
+    padding: 20px 0;
+    text-align: center;
+    width: 100%;
+  }
+
+  .fee_title {
+    color: #333;
+    font-size: 18px;
+    font-family: PingFangR;
+  }
+
+  .fee_line {
+    text-align: center;
+    color: #ccc;
+    font-size: 12px;
+    width: 100%;
+  }
+
+  .fee_line {
+    width: 32px;
+    height: 2px;
+    background: #ee4454;
+    display: inline-block;
+  }
+
+  .expense {
+    display: flex;
+    margin: 30px auto;
+    width: 100%;
+  }
+
+  .detail-box .expense .left {
+    width: 120px;
+    text-align: center;
+    font-size: "18px";
+    font-family: PingFangR;
+  }
+
+  .detail-box .expense .right {
+    -webkit-box-flex: 1;
+    flex: 1;
+    overflow: hidden;
+    font-size: 16px;
+    line-height: 25px;
+    color: #666;
+    text-align: left;
+  }
+  .section-tour .isHiden5{
+    height:450px;
+    overflow: hidden;
+  }  
+  .toggle_down:before {
+    content: "";
+    width: 100%;
+    position: absolute;
+    top: -100px;
+    left: 0;
+    z-index: 2;
+    height: 100px;
+    background-image: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: -moz-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0),#fff);
+    background-image: linear-gradient(180deg,rgba(255,255,255,0),#fff);
+}
+</style>
+<template>
+  <div>
+    <section class="section-tour wl-section-block">
+      <div class="style5_item_title detail-box">
+        <div :class="{'isHiden5':isShow}">
+          <div class="fee_title">费用</div>
+          <div class="fee_line">
+            <small class="s"></small>
+          </div>
+          <div style="color:#ccc">Expense</div>
+          <div class="expense">
+            <div class="left">费用包含</div>
+            <div class="right">
+              <div v-html="dataList.feature.feeInclude"></div>
+            </div>
+          </div>
+          <div class="expense">
+            <div class="left">自理费用</div>
+            <div class="right">
+              <div v-html="dataList.feature.feeNonInclude"></div>
+            </div>
+          </div>
+          <div class="fee_title">购物说明</div>
+          <div class="fee_line">
+            <small class="s"></small>
+          </div>
+          <div style="color:#ccc">Expense</div>
+          <div class="expense">
+            <div class="left"></div>
+            <div class="right">
+              <div v-html="dataList.feature.shopRemark"></div>
+            </div>
+          </div>
+          <div class="fee_title">预订须知</div>
+          <div class="fee_line">
+            <small class="s"></small>
+          </div>
+          <div style="color:#ccc">Tips</div>
+          <div class="expense">
+            <div class="left">重要提示</div>
+            <div class="right">
+              <div v-html="dataList.feature.importantTip"></div>
+            </div>
+          </div>
+          <div class="expense">
+            <div class="left">温馨提示</div>
+            <div class="right">
+              <div v-html="dataList.feature.warmTip"></div>
+            </div>
+          </div>
+          <div class="fee_title">签证</div>
+          <div class="fee_line">
+            <small class="s"></small>
+          </div>
+          <div style="color:#ccc">Visa</div>
+          <div class="expense">
+            <div class="left">签证须知</div>
+            <div class="right">
+              <div v-html="dataList.feature.visaRemark"></div>
+            </div>
+          </div>
+          <div class="fee_title">同行备注</div>
+          <div class="fee_line">
+            <small class="s"></small>
+          </div>
+          <div style="color:#ccc">Remark</div>
+          <div class="expense">
+            <div class="left"></div>
+            <div class="right">
+              <div v-html="dataList.feature.b2BRemark"></div>
+            </div>
+          </div>
+        </div>
+        <div class="collapse_toggle" v-if="!isShow">
+          <i class="iconfont iconarrow-top" @click="isShow=true"></i>
+        </div>
+        <div class="collapse_toggle toggle_down" v-else>
+          <i class="iconfont iconarrowdown" @click="isShow=false"></i>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['dataList'],
+    data() {
+      return {
+        isShow: false
+      };
+    },
+    created() {},
+    mounted() {
+      if (localStorage.baseifo) {
+        this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
+      }
+      if(this.TripConfig.TripConfig.NoticeItemIsOpen==1){
+          this.isShow=false;
+      }else{
+          this.isShow=true;
+      }
+    },
+    methods: {
+
+    },
+  };
+
+</script>

src/components/trip/style6.vue

+<style>
+    .section-tour{
+        margin-bottom: 30px;
+        padding: 30px 30px 0;
+        border: 1px solid #e5e5e5;
+        background-color: #fff;
+    }
+    .wl-section-block{
+        width:100%;
+    }
+    .todayTitle{
+        font-size: 23px;
+        color: #666;
+        font-weight: bold;
+    }
+    .tour-detail-timeline{
+        padding:15px 0;
+    }
+    .tour-detail-timeline .detail-card {
+        position: relative;
+        min-height: 100px;
+        padding: 16px 0 16px 90px;
+        line-height: 1.8;
+    }
+</style>
+<template>
+  <div class="Style6_main">
+    <section class="section-tour wl-section-block">
+      <div class="todayTitle">每日行程</div>
+      <div class="tour-detail-timeline">
+        <div class="detail-card">
+
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['tripList', 'isDirect'],
+    data() {
+      return {
+        trips: [],
+        slide: 0,
+      };
+    },
+    created() {},
+    mounted() {
+      console.log(this.tripList, 'triplistt');
+      this.init();
+    },
+    methods: {
+      init() {
+        this.tripList.forEach((x, j) => {
+          let useDinnerTypeBy = ''
+          let jin = [],
+            jiu = [],
+            jiu2 = [],
+            jiao = [],
+            dadian = [],
+            tips = [],
+            activy = [],
+            can = {
+              breakfirst: '敬请自理',
+              lanuch: '敬请自理',
+              dinner: '敬请自理'
+            }
+          x.dayArray.forEach((y, index) => {
+            if (y.type == 7 && y.childItem.title != '') {
+              let obj = {
+                title: y.childItem.title,
+                content: y.childItem.description,
+                img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y.childItem.imaArray[0].url :
+                  '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null,
+                url: ''
+              }
+              dadian.push(obj)
+            } else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
+              let title = ''
+              y.childItem.subTraffic.forEach((z, i) => {
+                title += z.startCityName
+                if (z.arrivalType == 1) {
+                  title += '<i class="iconfont icon-feiji"></i>'
+                } else if (z.arrivalType == 2) {
+                  title += '<i class="iconfont icon-bus"></i>'
+                } else if (z.arrivalType == 3) {
+                  title += '<i class="iconfont icon-icon31"></i>'
+                } else {
+                  title += '<i class="iconfont icon-gaotiedongche"></i>'
+                }
+                if (i + 1 == y.childItem.subTraffic.length) {
+                  title += z.arrivalCityName
+                }
+              })
+              let obj = {
+                title: title,
+                content: y.childItem.description,
+                img: '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null,
+                url: ''
+              }
+              jiao.push(obj)
+            } else if (y.type == 2 && y.childItem.imaArray.length > 0) {
+              let obj = {
+                title: y.childItem.couponsName,
+                content: y.childItem.description,
+                img: y.childItem.imaArray[0].url,
+                ticketName: y.childItem.couponsTicketName,
+                playTimeHour: y.childItem.playTimeHour,
+                playTimeMinutes: y.childItem.playTimeMinutes,
+                url: y.childItem.url,
+                scenicJson: y.childItem.scenicJson,
+                videoPath: y.childItem.imaArray[0].videoPath,
+                fileType: y.childItem.imaArray[0].fileType,
+
+              }
+              jin.push(obj)
+            } else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray.length > 0) {
+              let obj = {
+                title: y.childItem.hotelName,
+                content: y.childItem.description,
+                img: y.childItem.imaArray[0].url,
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null,
+                url: y.childItem.url
+              }
+              jiu.push(obj)
+            } else if (y.type == 4) {
+              if (y.childItem.useDinnerType == "1") {
+                can.breakfirst = y.childItem.dinnerName
+              } else if (y.childItem.useDinnerType == "2") {
+                can.lanuch = y.childItem.dinnerName
+              } else if (y.childItem.useDinnerType == "3") {
+                can.dinner = y.childItem.dinnerName
+              }
+            } else if (y.type == 5) {
+              let obj = {
+                title: '自由活动',
+                content: y.childItem.description,
+                img: '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null,
+                url: ''
+              }
+              activy.push(obj)
+            } else if (y.type == 6) {
+              let obj = {
+                title: y.childItem.title,
+                content: y.childItem.description,
+                img: '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null,
+                url: ''
+              }
+              tips.push(obj)
+            }
+            if (y.type == 3) {
+              // jiu2.push(y.childItem.hotelName)
+              jiu2.push({
+                name: y.childItem.hotelName,
+                url: y.childItem.url
+              });
+              useDinnerTypeBy = y.childItem.useDinnerType
+            }
+          })
+          if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) {
+            can.breakfirst = '酒店内享用早餐'
+          } else if (can.breakfirst == '') {
+            can.breakfirst = '方便游玩敬请自理'
+          }
+          if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) {
+            can.lanuch = '酒店自助'
+          } else if (can.lanuch == '') {
+            can.lanuch = '方便游玩敬请自理'
+          }
+          if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) {
+            can.dinner = '酒店自助'
+          } else if (can.dinner == '') {
+            can.dinner = '方便游玩敬请自理'
+          }
+          x.can = can
+          let details = [];
+          x.tips = tips
+          x.jiu2 = jiu2
+          if (jin.length > 0) {
+            details = jin
+          } else if (jiu.length > 0) {
+            details = jiu
+          } else if (dadian.length > 0) {
+            details = dadian
+          } else if (jiao.length > 0) {
+            if (j == this.tripList.length - 1) {
+              let obj = {
+                title: '温暖的家',
+                content: '感谢您参加本次行程，期待下次与您相遇',
+                img: ''
+              }
+              details.push(obj)
+            } else {
+              details = jiao
+            }
+          } else if (activy.length > 0) {
+            details = activy
+          }
+
+          x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title : (jiao.length >
+            0 ? jiao[0].title : '集合出发')
+          x.details = details
+
+          if (x.details.length == 0) {
+            if (j == 0) {
+              let obj = {
+                title: '集合出发',
+                content: '向着远方的目标出发起飞',
+                img: '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null
+              }
+              details.push(obj)
+            } else if (j == this.tripList.length - 1) {
+              let obj = {
+                title: '温暖的家',
+                content: '感谢您参加本次行程，期待下次与您相遇',
+                img: '',
+                ticketName: '',
+                playTimeHour: null,
+                playTimeMinutes: null
+              }
+              details.push(obj)
+            }
+          } else {
+            if (x.title == '集合出发') {
+              x.details.forEach(xc => {
+                if (xc.title !== undefined)
+                  x.title = xc.title + '~'
+              })
+              if (x.title == '集合出发') {
+                if (j > 0 && j < tripList.length - 1)
+                  x.title = '自由活动'
+              } else {
+                x.title = x.title.substring(0, x.title.length - 1)
+              }
+            }
+          }
+          x.islast = (j + 1) == this.tripList.length
+          this.$set(this.tripList, j, x)
+          x.dateTime = this.setDate(j);
+          x.myIndex=1;
+        })
+        this.trips = this.tripList
+
+        console.log(this.trips, 'tripsss');
+      },
+      setDate: function (j) {
+        if (j === 0) {
+          return this.clickDate
+        } else {
+          let d = new Date(this.clickDate)
+          d = d.getTime(d);
+          let add = d + ((24 * 60 * 60 * 1000) * j)
+          let date = new Date(add); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+          let Y = date.getFullYear() + '-';
+          let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+          let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
+          return Y + M + D;
+        }
+      },
+    },
+  };
+
+</script>

src/pages/details.vue

+<style>
+  .quick-banner-block{
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    /* top: 60px; */
+    top:0;
+    left: 0;
+    width: 100%;
+    z-index: 99;
+    text-align: center;
+    box-shadow: 0 3px 7px rgba(150,150,150,.38);
+  }
+  .quick-banner-block.orange {
+      background-image: linear-gradient(-60deg,rgba(245,112,112,.9) 0,rgba(245,168,57,.87843137) 100%);
+  }
+  .quick-banner-block.blue{
+    background-image: linear-gradient(-60deg,rgba(74,216,190,.92) 0,rgba(31,161,228,.91) 100%);
+  }
+  .quick-banner-block.green {
+    background-image: linear-gradient(-20deg,rgba(78,78,78,.95) 0,#7da5a3 100%);
+}
+.quick-banner-block.dark {
+    background-image: linear-gradient(-225deg,rgba(78,69,119,.87058824) 0,rgba(51,135,173,.89) 51%,rgba(43,216,195,.89019608) 100%);
+}
+.quick-banner-block.yellow {
+    background-image: linear-gradient(80deg,rgba(255,193,19,.9) 0,rgba(93,183,121,.9) 100%);
+}
+  .quick-banner-block .quick-item{
+    display: flex;
+    justify-content: space-around;
+    color: #fff;
+    width: 100%;
+  }
+  .quick-banner-block .quick-item>* {
+    display: inline-block;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: #fff;
+    font-weight: 700;
+    -webkit-transition: background-color .3s;
+    -moz-transition: background-color .3s;
+    -o-transition: background-color .3s;
+    transition: background-color .3s;
+    text-decoration: none;
+}
+.quick-banner-block.orange .quick-item>.active {
+    background-color: rgba(65,130,160,.82);
+}
+.quick-banner-block.blue .quick-item>.active {
+    background-color: #057ea2;
+}
+.quick-banner-block.green .quick-item>.active {
+    background-color: rgba(30,69,78,.82);
+}
+.quick-banner-block.dark .quick-item>.active {
+    background-color: rgba(4,70,101,.82);
+}
+.quick-banner-block.yellow .quick-item>.active {
+    background-color: rgba(102,162,121,.82);
+}
+</style>
+<template>
+  <q-page ref="orderview">
+    <template v-if="isShow">
+      <!-- 顶部大图 -->
+      <headStyle1 :dataList="dataList" v-if="TripConfig.TripConfig.IsShowBgImg==1"></headStyle1>
+      <!-- 行程介绍 -->
+      <headStyle2 :dataList="dataList" id="tour_intro" ref="tour_intro" v-if="TripConfig.TripConfig.IsShowBgImg==1"></headStyle2>
+      <template v-for="(item,index) in TripConfig.TripConfig.SortList">
+        <!-- 行程資訊 -->
+        <!-- TripListStyle 1月历 2列表 -->
+        <travelList v-if="item.Id=='TripList'" :key="index+10"></travelList>
+        <!-- 每日行程 -->
+        <!-- TripDayStyle 1竖起排 2横起 -->
+        <headStyle3 v-if="item.Id=='TripDay'" id="tour_detail" ref="tour_detail" :tripList="dayList" :isDirect="isDirect" :key="index+3"></headStyle3>
+        <!-- <headStyle6 v-if="item.Id=='TripDay'" :tripList="dayList" :key="index+3"></headStyle6> -->
+        <!-- 行程特色 -->
+        <headStyle4 v-if="item.Id=='TripFeature'" ref="feature" id="feature" :dataList="dataList" :key="index+4"></headStyle4>
+        <!-- 注意事项 -->
+        <headStyle5 v-if="item.Id=='Notice'" id="note" ref="note" :dataList="dataList" :key="index+5"></headStyle5>
+      </template>
+    </template>
+    <div class="quick-banner-block" v-if="isShowNav" :class="{'orange':TripConfig.TripConfig.TripBottonStyle==1
+    ,'blue':TripConfig.TripConfig.TripBottonStyle==2,'green':TripConfig.TripConfig.TripBottonStyle==3
+    ,'dark':TripConfig.TripConfig.TripBottonStyle==4,'yellow':TripConfig.TripConfig.TripBottonStyle==5}">
+      <div class="quick-item">
+        <a class="scroll-link" :class="{'active':clickIndex==1}" @click="clickIndex=1,goNavList('tour_intro')">行程介紹</a>
+        <a class="scroll-link" :class="{'active':clickIndex==2}" @click="clickIndex=2,goNavList('tour_detail')">每日行程</a>
+        <a class="scroll-link" :class="{'active':clickIndex==3}" @click="clickIndex=3,goNavList(3)">立即預訂</a>
+        <a class="scroll-link" :class="{'active':clickIndex==4}" @click="clickIndex=4,goNavList('feature')">行程特色</a>
+        <a class="scroll-link" :class="{'active':clickIndex==5}" @click="clickIndex=5,goNavList('note')">注意事項</a>
+      </div>
+    </div>
+  </q-page>
+</template>
+<script>
+  import headStyle1 from "../components/trip/style1";
+  import headStyle2 from "../components/trip/style2";
+  import headStyle3 from "../components/trip/style3";
+  import headStyle4 from "../components/trip/style4";
+  import headStyle5 from "../components/trip/style5";
+  //每日行程横放组件
+  import headStyle6 from "../components/trip/style6";
+
+
+  //出團表 group -Start
+  import travelList from "../components/group/travel-list";  
+  //出團表 group -End
+
+  export default {
+    props: [],
+    data() {
+      return {
+        msg:{
+          configId: '87O4zB6zOs0%3D',
+          cityId: 0,
+          preview: 0,
+          tcid: '9353',
+          teamType: 0
+        },
+        isShow:false,
+        dataList:{},
+        dayList:[],
+        isDirect:1,
+        TripConfig:{},
+        isShowNav:false,
+        clickIndex:1
+      };
+    },
+    components: {
+      headStyle1,
+      headStyle2,
+      headStyle3,
+      headStyle4,
+      headStyle5,
+      headStyle6,
+      travelList
+    },
+    created() {
+
+    },
+    mounted() {
+      if (localStorage.baseifo) {
+        this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
+      }
+      this.getData();
+      window.addEventListener('scroll', this.menu)
+      
+    },
+    methods: {
+      getData() {
+        this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, r => {
+          if (r.data.resultCode == 1) {
+            this.dataList = r.data.data;
+            console.log(this.dataList,'resss');
+            this.dayList = this.dataList.dayList;
+            this.isShow=true;
+            this.isDirect = this.dataList.isDirect;
+          } else {
+            this.$message.error(r.data.message)
+          }
+        }, null)
+      },
+      menu() {
+        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
+        if(this.scroll>300){
+          this.isShowNav=true;
+        }else{
+          this.isShowNav=false;
+        }
+      },
+      goNavList(val) {
+        let newval="#"+val 
+        document.querySelector(newval).scrollIntoView(true);
+      },
+
+    },
+  };
+
+</script>

src/router/routes.js

@@ -24,6 +24,10 @@ const routes = [{
         path: '/tour_visa', //签证护照管理
         component: () =>
           import('pages/tour_visa.vue')
+      }, {  //行程
+        path: '/details',
+        component: () =>
+        import('pages/details.vue')
       }
     ]
   },