no message

src/assets/css/tripIndexNew.css

@@ -184,9 +184,11 @@
   background: url('https://imgfile.oytour.com/Static/NewTripFeature/Shape.png')no-repeat center;
   background-size: 100% 100%;
 }
+.travelDaysTitlle-left-text span{
+  font-family: FZCuSong-B09S !important;
+}
 .travelDaysTitlle-left-textOne{
   font-size: 79px;
-  font-family: FZCuSong-B09S !important;
   font-weight: 400;
   color: #2A2A2A;
   line-height: 55px;
@@ -194,12 +196,14 @@
 }
 .travelDaysTitlle-left-textTwo{
   font-size: 47px;
-  font-family: PingFang SC !important;
   font-weight: 800;
   color: #2A2A2A;
   line-height: 55px;
   margin-top: 10px;
 }
+.travelDaysTitlle-left-textTwo span{
+  font-family: PingFang SC !important;
+}
 .travelDaysTitlle-right{
   flex-grow: 1;
   margin-left: 21px;
@@ -215,8 +219,9 @@
   -o-border-radius: 100px 0px 0px 100px;
 }
 .travelDaysMasterMap{
-  height: 632px;
   margin-top: 14px;
+  margin-bottom: 41px;
+  height: 632px;
   overflow: hidden;
 }
 .travelDaysMasterMap img{
@@ -249,8 +254,8 @@
   right: 50px;
 }
 .travelDaysMasterMap-twoImg{
-  width: 335px;
-  height: 189px;
+  max-width: 335px;
+  max-height: 189px;
   overflow: hidden;
   border: 2px solid #FFFFFF;
   border-radius: 18px;
@@ -262,11 +267,10 @@
   line-height: 34px;
 }
 .travelDaysContent{
-  max-height: 468px;
+  /* flex-grow: 1; */
   line-height: 38px;
   padding: 0 44px 0 44px;
-  margin: 41px 0 47px 0;
-  overflow: hidden;
+  /* margin: 41px 0 47px 0; */
 }
 .travelDaysContent-text{
   font-size: 21px;
@@ -279,7 +283,7 @@
   font-weight: bold;
 }
 .travelDaysdetails{
-  padding: 0 36px 115px 36px;
+  padding: 47px 36px 115px 36px;
 }
 .travelDaysdetailsBJ{
   border-radius: 100px;
@@ -331,6 +335,52 @@
   margin: 0  !important;
   line-height: 160%;
 }
+.UpgradedVersion-header {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.UpgradedVersion-header-left {
+  width: 341px;
+  height: 65px;
+  border-radius: 0px 0px 18px 0px;
+  position: relative;
+}
+
+.header-leftImg {
+  width: 292px;
+  height: auto;
+  display: block;
+  margin-left: 19px;
+}
+
+.header-leftBj {
+  left: 314px;
+  top: 0;
+  width: 27px;
+  height: 100%;
+  background-size: 100% 100%;
+}
+
+.UpgradedVersion-header-title {
+  padding: 12px 19px 10px 19px;
+  margin-right: 53px;
+  margin-top: 20px;
+  border: 2px dashed #000;
+  border-radius: 14px;
+  -webkit-border-radius: 14px;
+  -moz-border-radius: 14px;
+  -ms-border-radius: 14px;
+  -o-border-radius: 14px;
+}
+
+.UpgradedVersion-header .edit_div {
+  font-size: 38px;
+  font-weight: 400;
+  font-family: FZCuSong-B09S;
+  color: #2A2A2A;
+}
 .UpgradedVersion-box{
   width: 1123px;
   height: 1588px;

src/components/LeaveGroupDownload/components/header.vue

 <template>
-  <div class="UpgradedVersion-header absolute row-sb z-index1">
+  <div class="UpgradedVersion-header row-sb">
     <div class="UpgradedVersion-header-left relative row-aic" :style="{'background':TripColor}">
       <img class="header-leftBj absolute z-index2" :src="backgroundImgBj2" />
       <img class="header-leftImg" src="https://imgfile.oytour.com/Static/NewTripFeature/headerLogoTwo.png" />
@@ -57,51 +57,6 @@
 </script>
 
 <style>
-  .UpgradedVersion-header {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
 
-  .UpgradedVersion-header-left {
-    width: 341px;
-    height: 65px;
-    border-radius: 0px 0px 18px 0px;
-    position: relative;
-  }
-
-  .header-leftImg {
-    width: 292px;
-    height: auto;
-    display: block;
-    margin-left: 19px;
-  }
-
-  .header-leftBj {
-    left: 314px;
-    top: 0;
-    width: 27px;
-    height: 100%;
-    background-size: 100% 100%;
-  }
-
-  .UpgradedVersion-header-title {
-    padding: 12px 19px 10px 19px;
-    margin-right: 53px;
-    margin-top: 20px;
-    border: 2px dashed #000;
-    border-radius: 14px;
-    -webkit-border-radius: 14px;
-    -moz-border-radius: 14px;
-    -ms-border-radius: 14px;
-    -o-border-radius: 14px;
-  }
-
-  .UpgradedVersion-header .edit_div {
-    font-size: 38px;
-    font-weight: 400;
-    font-family: FZCuSong-B09S;
-    color: #2A2A2A;
-  }
 
 </style>

src/components/LeaveGroupDownload/travelDays.vue

@@ -11,37 +11,38 @@
     </div> -->
     <div class="UpgradedVersion-box UpgradedVersion-homebj relative"
     v-for="(item,index) in tripList">
+    <div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;">
       <Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header>
-      <div class="travelDays-form absolute column z-index1">
-        <div class="travelDaysTitlle row-aic">
-          <div class="travelDaysTitlle-left">
-            <div class="travelDaysTitlle-left-text column-ajc">
-              <div class="travelDaysTitlle-left-textOne">
-                <span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span>
-              </div>
-              <div class="travelDaysTitlle-left-textTwo">
-                <span>{{day}}</span>
-              </div>
+      <div class="travelDaysTitlle row-aic">
+        <div class="travelDaysTitlle-left">
+          <div class="travelDaysTitlle-left-text column-ajc">
+            <div class="travelDaysTitlle-left-textOne">
+              <span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span>
             </div>
-          </div>
-          <div class="travelDaysTitlle-right">
-            <div class="travelDaysTitlle-right-text row-aic"
-            :style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}">
-              {{item.title}}
+            <div class="travelDaysTitlle-left-textTwo">
+              <span>{{day}}</span>
             </div>
           </div>
         </div>
-
-        <div class="travelDaysMasterMap relative">
-          <div class="travelDaysMasterMap-one" :style="{'color':getImgColor(item.details[0].img,'travelDaysImg_one'+index)}">
+        <div class="travelDaysTitlle-right">
+          <div class="travelDaysTitlle-right-text row-aic"
+          :style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}">
+            {{item.title}}
+          </div>
+        </div>
+      </div>
+      <div :id="'travelDaysMasterMap_'+index" class="travelDaysMasterMap relative">
+        <div style="display: none;">{{getHeigthNum('travelDaysMasterMap_'+index,item)}}</div>
+          <div class="travelDaysMasterMap-one" :style="{'color':'#fff'}">
             <div class="travelDaysMasterMap-oneImg bjF6" :id="'travelDaysImg_one'+index">
               <img class="absolute" :src="item.details[0].img">
             </div>
             <div class="travelDaysMasterMap-text absolute z-index2">{{item.details[0].title}}</div>
           </div>
           <div class="travelDaysMasterMap-two absolute z-index2">
+            <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgOne">
             <div class="travelDaysMasterMap-twoImg relative bjF6"
-            :style="{'color':getImgColor(item.details[0].img,'travelDaysImg_two'+index)}"
+            :style="{'color':'#fff'}"
             :id="'travelDaysImg_two'+index"
             v-if="(item.details&&item.details.length>1&&item.details[1].img)||(item.jiu2&&item.jiu2.length>0&&item.jiu2[0].url)">
               <template v-if="item.details.length>1&&item.details[1].img">
@@ -60,8 +61,10 @@
                 </template>
               </template>
             </div>
+            </template>
+            <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgTwo">
             <div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;"
-            :style="{'color':getImgColor(item.details[0].img,'travelDaysImg_three'+index)}"
+            :style="{'color':'#fff'}"
             :id="'travelDaysImg_three'+index"
             v-if="(item.details&&item.details.length>2&&item.details[2].img)||(item.jiu2&&item.jiu2.length>1&&item.jiu2[0].url)">
             <template v-if="item.details.length>2&&item.details[2].img">
@@ -80,54 +83,56 @@
               </template>
             </template>
             </div>
+            </template>
           </div>
-        </div>
+      </div>
 
-        <div class="travelDaysContent">
-          <div class="travelDaysContent-text" v-for="(jindian,j) in item.details">
-            <span>【{{jindian.title}}】</span>
-            {{jindian.content}}
-          </div>
+      <div class="travelDaysContent column">
+        <!-- <template v-for="i in 1"></template> -->
+        <div class="travelDaysContent-text" v-for="(jindian,j) in item.details">
+          <span>【{{jindian.title}}】</span>
+          {{jindian.content}}
         </div>
+      </div>
 
-        <div class="travelDaysdetails">
-          <div class="travelDaysdetailsBJ row"
-          :style="{'background':backgroundColor}">
-            <div class="travelDaysdetails-text row">
-              <span>早餐：</span>
-              <div><p>{{item.can.breakfirst}}</p></div>
-            </div>
-            <div class="travelDaysdetails-text row">
-              <span>午餐：</span>
-              <div><p>{{item.can.lanuch}}</p></div>
-            </div>
-            <div class="travelDaysdetails-text row">
-              <span>晚餐：</span>
-              <div><p>{{item.can.dinner}}</p></div>
-            </div>
-            <div class="travelDaysdetails-text row">
-              <span>住宿：</span>
-              <div><p>{{item.jiu2[0].name}}</p></div>
-            </div>
+      <div class="travelDaysdetails">
+        <div class="travelDaysdetailsBJ row"
+        :style="{'background':backgroundColor}">
+          <div class="travelDaysdetails-text row">
+            <span>早餐：</span>
+            <div><p>{{item.can.breakfirst}}</p></div>
           </div>
-        </div>
-        <!-- otherJourney-footer -->
-        <div>
-          <div class="otherJourney-introduceFooter absolute z-index1 row-aic"
-            :style="{'background':''}">
-              <div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
-              <div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
-              <div class="introduceFooter-text row-aic">
-                <img src="http://imgfile.oytour.com/Static/NewTripFeature/footerLogo.png" />
-                <div class="edit_div">{{dataAll.lineShortName}}</div>
-              </div>
-              <div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div>
-              <div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div>
+          <div class="travelDaysdetails-text row">
+            <span>午餐：</span>
+            <div><p>{{item.can.lanuch}}</p></div>
+          </div>
+          <div class="travelDaysdetails-text row">
+            <span>晚餐：</span>
+            <div><p>{{item.can.dinner}}</p></div>
+          </div>
+          <div class="travelDaysdetails-text row">
+            <span>住宿：</span>
+            <div><p>{{item.jiu2[0].name}}</p></div>
           </div>
         </div>
-
+      </div>
+      <!-- otherJourney-footer -->
+      <div>
+        <div class="otherJourney-introduceFooter z-index1 row-aic"
+          :style="{'background':''}">
+            <div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
+            <div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
+            <div class="introduceFooter-text row-aic">
+              <img src="http://imgfile.oytour.com/Static/NewTripFeature/footerLogo.png" />
+              <div class="edit_div">{{dataAll.lineShortName}}</div>
+            </div>
+            <div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div>
+            <div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div>
+        </div>
       </div>
     </div>
+
+    </div>
   </div>
 
 </template>
@@ -150,6 +155,32 @@
     },
 
     methods: {
+      getShow(Id,HeightNum,item){
+        item.imgMapId = Id
+        if(HeightNum>=243){
+          item.showImgOne = true
+        }else{
+          item.showImgOne = false
+        }
+        if(HeightNum>=478){
+          item.showImgTwo = true
+        }else{
+          item.showImgTwo = false
+        }
+        this.$forceUpdate()
+        return
+      },
+      getHeigthNum(Id,item){
+        let that = this
+        setTimeout(()=>{
+          var Height = document.getElementById(Id);
+          if(Height){
+            let HeightNum = Height.offsetHeight
+            that.getShow(Id,HeightNum,item)
+          }
+        },300)
+
+      },
       getFontSize(title){
         if(title.length>60){
           return 929/60 +'px'
@@ -256,7 +287,14 @@
       },
       tripList: {
         handler(val, oldVal) {
-
+          let arrlist = function(arr){
+            arr.forEach(x=>{
+              x.showImgOne = true
+              x.showImgTwo = true
+              x.imgMapId = null
+            })
+          }
+          arrlist(this.tripList)
         },
         deep: true,
         immediate: true