页面修改

src/components/trip/style4.vue

 <style>
-.wl-section-block {
+  .wl-section-block {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
-}
-.section-tour {
+  }
+
+  .section-tour {
     margin-bottom: 30px !important;
     padding: 30px 30px 0;
     border: 1px solid #e5e5e5;
     background-color: #fff;
-}
-.section-tour .isHiden4{
-    height:450px;
+  }
+
+  .section-tour .isHiden4 {
+    height: 450px;
     overflow: hidden;
-}
-.toggle_down:before {
+  }
+
+  .toggle_down:before {
     content: "";
     width: 100%;
     position: absolute;
@@ -22,11 +25,12 @@
     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);
-}
+    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>
@@ -49,7 +53,8 @@
     props: ['dataList'],
     data() {
       return {
-        isShow:false
+        TripConfig: {},
+        isShow: false,
       };
     },
     created() {},
@@ -57,10 +62,10 @@
       if (localStorage.baseifo) {
         this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
       }
-      if(this.TripConfig.TripConfig.TripFeatureIsOpen==1){
-          this.isShow=false
-      }else{
-          this.isShow=true;
+      if (this.TripConfig.TripFeatureIsOpen == 1) {
+        this.isShow = false
+      } else {
+        this.isShow = true;
       }
     },
     methods: {

src/components/trip/style5.vue

@@ -60,10 +60,12 @@
     color: #666;
     text-align: left;
   }
-  .section-tour .isHiden5{
-    height:450px;
+
+  .section-tour .isHiden5 {
+    height: 450px;
     overflow: hidden;
-  }  
+  }
+
   .toggle_down:before {
     content: "";
     width: 100%;
@@ -72,11 +74,12 @@
     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);
-}
+    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>
@@ -166,7 +169,8 @@
     props: ['dataList'],
     data() {
       return {
-        isShow: false
+        TripConfig: {},
+        isShow: false,
       };
     },
     created() {},
@@ -174,10 +178,10 @@
       if (localStorage.baseifo) {
         this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
       }
-      if(this.TripConfig.TripConfig.NoticeItemIsOpen==1){
-          this.isShow=false;
-      }else{
-          this.isShow=true;
+      if (this.TripConfig.NoticeItemIsOpen == 1) {
+        this.isShow = false;
+      } else {
+        this.isShow = true;
       }
     },
     methods: {

src/components/trip/style6.vue

@@ -112,10 +112,12 @@
     cursor: pointer;
     text-align: center;
   }
-  .collapse-toggle6 i{
-      font-weight: bold;
-      color:black;
+
+  .collapse-toggle6 i {
+    font-weight: bold;
+    color: black;
   }
+
   .toggle_down:before {
     content: "";
     width: 100%;
@@ -177,18 +179,22 @@
     color: #fff;
     background: rgba(0, 0, 0, 0.5);
   }
-  .style6_val{
-    margin-left:30px;
+
+  .style6_val {
+    margin-left: 30px;
   }
-  @media only screen and (max-width: 900px){
+
+  @media only screen and (max-width: 900px) {
     .detail-card .detail-inner {
-        flex-direction: column;
+      flex-direction: column;
     }
   }
-  .isHiden6{
-    height:180px;
+
+  .isHiden6 {
+    height: 180px;
     overflow: hidden;
   }
+
 </style>
 <template>
   <div class="Style6_main">
@@ -238,20 +244,16 @@
                   {{getHotelSuffix(item)}}
                 </div>
                 <div class="style6_val" v-else>本日无酒店安排</div>
-
               </div>
             </div>
             <div class="detail-right">
-              <template>
-                  {{item.slide}}
-                <q-carousel v-model="item.slide" color="white" arrows height="300px">
-                  <q-carousel-slide :img-src="x.img" v-for="(x, i) in item.details" :name="i" :key="i">
-                    <div class="absolute-bottom custom-caption">
-                      <div class="q-headline">{{x.title}}</div>
-                    </div>
-                  </q-carousel-slide>
-                </q-carousel>
-              </template>
+              <q-carousel v-model="item.slide" color="white" arrows height="300px">
+                <q-carousel-slide :img-src="x.img" v-for="(x, i) in item.details" :name="i" :key="i">
+                  <div class="absolute-bottom custom-caption">
+                    <div class="q-headline">{{x.title}}</div>
+                  </div>
+                </q-carousel-slide>
+              </q-carousel>
             </div>
           </div>
         </div>
@@ -270,17 +272,16 @@
     },
     created() {},
     mounted() {
-      console.log(this.tripList, 'triplistt');
       this.init();
     },
     methods: {
-      getSideShow(item){
-          item.isShow=true;
-          this.$forceUpdate();
+      getSideShow(item) {
+        item.isShow = true;
+        this.$forceUpdate();
       },
-      getBtmShow(item){
-          item.isShow=false;
-          this.$forceUpdate();
+      getBtmShow(item) {
+        item.isShow = false;
+        this.$forceUpdate();
       },
 
       init() {
@@ -350,7 +351,6 @@
                 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) {
@@ -396,7 +396,6 @@
               tips.push(obj)
             }
             if (y.type == 3) {
-              // jiu2.push(y.childItem.hotelName)
               jiu2.push({
                 name: y.childItem.hotelName,
                 url: y.childItem.url
@@ -443,7 +442,6 @@
           } 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
@@ -484,16 +482,14 @@
               }
             }
           }
-          x.islast = (j + 1) == this.tripList.length
+          x.islast = (j + 1) == this.tripList.length;
+          x.slide = 0;
           this.$set(this.tripList, j, x)
           x.dateTime = this.setDate(j);
           x.myIndex = 1;
-          x.isShow=false;
-          x.slide = 0;
+          x.isShow = false;
         })
-        this.trips = this.tripList
-
-        console.log(this.trips, 'tripsss');
+        this.trips = JSON.parse(JSON.stringify(this.tripList));
       },
       setDate: function (j) {
         if (j === 0) {

src/pages/details.vue

 <style>
-  .quick-banner-block{
+  .quick-banner-block {
     position: fixed;
     display: flex;
     justify-content: center;
     /* top: 60px; */
-    top:0;
+    top: 0;
     left: 0;
     width: 100%;
     z-index: 99;
     text-align: center;
-    box-shadow: 0 3px 7px rgba(150,150,150,.38);
+    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%);
+    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.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{
+    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%;
@@ -45,22 +52,28 @@
     -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 {
+  }
+
+  .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);
-}
+  }
+
+  .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">
@@ -78,7 +91,8 @@
         <!-- <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>
+        <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>
@@ -107,27 +121,27 @@
 
 
   //出團表 group -Start
-  import travelList from "../components/group/travel-list";  
+  import travelList from "../components/group/travel-list";
   //出團表 group -End
 
   export default {
     props: [],
     data() {
       return {
-        msg:{
+        msg: {
           configId: '87O4zB6zOs0%3D',
           cityId: 0,
           preview: 0,
           tcid: '9353',
           teamType: 0
         },
-        isShow:false,
-        dataList:{},
-        dayList:[],
-        isDirect:1,
-        TripConfig:{},
-        isShowNav:false,
-        clickIndex:1
+        isShow: false,
+        dataList: {},
+        dayList: [],
+        isDirect: 1,
+        TripConfig: {},
+        isShowNav: false,
+        clickIndex: 1
       };
     },
     components: {
@@ -148,16 +162,21 @@
       }
       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');
+            console.log(this.dataList, 'resss');
+            if (this.dataList.dayList && this.dataList.dayList.length > 0) {
+              this.dataList.dayList.forEach(item => {
+                item.slide = 0;
+              });
+            }
             this.dayList = this.dataList.dayList;
-            this.isShow=true;
+            this.isShow = true;
             this.isDirect = this.dataList.isDirect;
           } else {
             this.$message.error(r.data.message)
@@ -166,14 +185,14 @@
       },
       menu() {
         this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
-        if(this.scroll>300){
-          this.isShowNav=true;
-        }else{
-          this.isShowNav=false;
+        if (this.scroll > 300) {
+          this.isShowNav = true;
+        } else {
+          this.isShowNav = false;
         }
       },
       goNavList(val) {
-        let newval="#"+val 
+        let newval = "#" + val
         document.querySelector(newval).scrollIntoView(true);
       },