行程特色调整

src/pages/detailsNew.vue

 <template>
-  <div style="min-height: 80vh">
+  <div style="min-height: 80vh;overflow: hidden;">
     <div v-if="dataList && !$q.loading.isActive">
       <div
         style="
@@ -405,22 +405,28 @@
 
       <div
         v-if="dataList"
-        style="max-width: 1200px; margin-left: auto; margin-right: auto"
-        class="q-mt-xl row"
+        style="width: 1200px; margin-left: auto; margin-right: auto"
+        class="q-mt-xl row relative"
         :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
       >
-        <div
-          class="col q-ml-xl position-relative"
-          v-if="
-            dataList.priceList.length > 0 &&
+        <!-- col q-ml-xl position-relative -->
+        <!-- dataList.priceList.length > 0 &&
             !(dataList.priceList && dataList.priceList[0].teamType == 2) &&
             !(dataList.currentPrice && dataList.currentPrice.teamType == 2) &&
             currentHeight > days[0].top - 60 &&
             currentHeight < navs[2].top &&
-            $q.platform.is.desktop
+            $q.platform.is.desktop -->
+        <div
+          :class="{'fixed':$q.platform.is.desktop}"
+          :style="{'top':currentHeight>navs[1].top?'200px':'200px',
+          'left':currentHeight>navs[1].top?'180px':'180px',}"
+          v-if="
+            dataList.priceList.length > 0&&$q.platform.is.desktop&&currentHeight>navs[1].top-400
+            &&currentHeight<navs[2].top
           "
         >
-          <div style="position: sticky; top: 100px">
+        <!--  style="position: sticky; top: 100px" -->
+          <div>
             <div
               class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
               v-for="(x, i) in days"
@@ -437,8 +443,9 @@
           </div>
         </div>
         <div
+          style="width: 100%;"
           :class="{
-            'col-8': $q.platform.is.desktop,
+            'col': $q.platform.is.desktop,
             col: $q.platform.is.mobile,
           }"
         >
@@ -452,8 +459,10 @@
           >
             行程特色
           </div>
-          <div
+          <div class="relative">
+            <div
             class="q-mt-md trip-text q-pb-xl line-feature large-feature"
+            ref="diyContext"
             v-html="dataList.feature.featureContent"
             v-if="dataList.feature.featureContent != ''"
           ></div>
@@ -464,9 +473,18 @@
             v-html="dataList.feature.featureHtml"
             v-if="dataList.feature.featureHtml != '' && (!tripImages || tripImages.length==0)"
           ></div>
-          <div v-else-if="tripImages.length>0">
-            <img :src="x" width="100%" v-for="(x,i) in tripImages" :key="i">
+          <div v-else-if="tripImages&&tripImages.length>0"
+            ref="diyContext">
+            <div v-for="(x,i) in tripImages">
+              <!-- <img class="block" :src="x.header" width="100%"> -->
+              <img class="block" :src="x.page" width="100%">
+              <div class="tripImages-footer">
+                <img class="block" :src="x.footer" width="100%">
+              </div>
+            </div>
+          </div>
           </div>
+
           <div
             class="text-h5 text-weight-bold text-left q-mt-xl"
             ref="product"
@@ -631,11 +649,16 @@
             </div>
           </div> -->
         </div>
-
-        <template v-if="$q.platform.is.desktop">
-          <div class="col-1"></div>
-          <div class="col q-ml-xl position-relative">
-            <div style="position: sticky; top: 100px">
+        <template v-if="$q.platform.is.desktop&&currentHeight>130&&currentHeight<navs[4].top">
+          <!-- <div class="col-1"></div> -->
+          <!-- col q-ml-xl position-relative -->
+          <div
+          :class="{'absolute':currentHeight<1000,
+          'fixed':currentHeight>1000}"
+          :style="{'top':currentHeight<1000?'0':'100px',
+          'right':currentHeight<1000?'-150px':'170px',}">
+            <!--  style="position: sticky; top: 100px" -->
+            <div>
               <div
                 class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
                 v-for="(x, i) in navs"
@@ -775,7 +798,8 @@ export default {
       priceListHeight: 0,
       stickyHeight: 0,
       zoomDiyContext: 1,
-      tripImages:[]
+      detailsImageList:[],
+      tripImages:[],
     };
   },
   components: {
@@ -844,7 +868,31 @@ export default {
       this.$axios.get("http://upload.oytour.com/Home/GetTripImage?configId="+configId).then(r=>{
         console.log(r.data,'r.data.data.id')
         if(r.data.OtherFile){
-          this.tripImages=r.data.OtherFile
+          this.tripImages = []
+          let OtherFile = r.data.OtherFile
+          let length = OtherFile.length
+          let header = OtherFile[length-1]
+          let footer = OtherFile[length-2]
+          if(OtherFile[0].indexOf('footer')!=-1){
+            header = OtherFile[1]
+            footer = OtherFile[0]
+          }
+          OtherFile.forEach((x,i)=>{
+            let obj = {
+              header: header,
+              page: x,
+              footer: footer,
+            }
+            if(OtherFile[0].indexOf('footer')!=-1){
+              if(i>1){
+                this.tripImages.push(obj)
+              }
+            }else{
+              if(i<length-2){
+                this.tripImages.push(obj)
+              }
+            }
+          })
           this.$forceUpdate();
         }
       })
@@ -1009,7 +1057,22 @@ export default {
         (r) => {
           try {
             if (r.data.resultCode == 1 && r.data.data.id>0) {
-              this.getTripFeatureImageHandler(r.data.data.id)
+              if(r.data.data.feature.tripImageList.length>0){
+                let OtherFile = r.data.data.feature.tripImageList
+                let header = r.data.data.feature.headerImage
+                let footer = r.data.data.feature.footerImage
+                OtherFile.forEach((x,i)=>{
+                  let obj = {
+                    header: header,
+                    page: x,
+                    footer: footer,
+                  }
+                  this.tripImages.push(obj)
+                })
+              }
+              console.log(this.tripImages,'=---')
+              //  detailsImageList tripImageList headerImage footerImage
+              // this.getTripFeatureImageHandler(r.data.data.id)
               this.dataList = r.data.data;
               if (this.dataList.dayList && this.dataList.dayList.length > 0) {
                 this.dataList.dayList.forEach((item) => {
@@ -1065,6 +1128,7 @@ export default {
                   }
 
                   this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
+
                 }
                 setTimeout(() => {
                   this.navs.forEach((x) => {
@@ -1093,6 +1157,7 @@ export default {
                   document
                     .querySelector("#scrollId .q-page-container")
                     .addEventListener("scroll", this.handleScrollDay);
+
                 } catch (error) {
                   // console.log(document.querySelector('#scrollId .q-page-container'))
                   // console.log('异常信息', error)
@@ -1325,4 +1390,8 @@ export default {
 .large-feature img{
   width:100% !important
 }
+.tripImages-footer{
+  background: url('../assets/img/trip/otherBjThree.jpg') repeat;
+  padding: 115px 0 32px 0;
+}
 </style>