no message

src/components/LeaveGroupDownload/index.vue

 <template>
-  <div id="pdf_1" v-if="orderMsg">
+  <div id="pdf_1" v-if="orderMsg&&dataAll">
+    <div class="UpgradedVersion-box UpgradedVersion-homebj relative">
+      <div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;">
+        <Header :TripColor="dataAll&&dataAll.tripColor" :orderMsg="orderMsg"></Header>
+        <div class="travelDaysTitlle row-aic">
+          <div class="travelDaysTitlle-left">
+            <div class="travelDaysTitlle-left-text column-ajc">
+              <div class="travelDaysTitlle-left-textOne">
+                <span></span>
+              </div>
+              <div class="travelDaysTitlle-left-textTwo">
+                <span></span>
+              </div>
+            </div>
+          </div>
+          <div class="travelDaysTitlle-right">
+            <div class="travelDaysTitlle-right-text row-aic"
+            :style="{'background': dataAll&&dataAll.tripColor,'font-size': getFontSize(orderMsg.lineteamName+orderMsg.dayNum),'color':textColor}">
+              {{ orderMsg.lineteamName }}{{ orderMsg.dayNum }}日游
+            </div>
+          </div>
+        </div>
         <div class="trip-adviser">
-      <h1 class="trip-nav-title">
+          <!-- <h1 class="trip-nav-title">
             <span>{{ vshowL ? "出团通知书：" : "" }}</span>
             {{ orderMsg.lineteamName }}{{ orderMsg.dayNum }}日游
-      </h1>
+          </h1> -->
           <p>
             尊敬的旅客：<br />感谢您选择我们的旅游服务。为了确保各位旅客有更好的旅游体验，请详细阅读《出团通知书》的各项内容。如有任何问题，请拨打通知书内的本团领队电话或机场服务人员电话。
             在此，预祝您旅途愉快！希望您在本次旅程中留下此生中最美好的回忆！
@@ -182,12 +203,19 @@
         </template>
         <div style="width: 100%;height:40px;"></div>
       </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
+  import Header from "./components/header";
   export default {
-    components: {},
+    components: {
+      Header
+    },
     props: [
+      "dataAll",
       "vshowJ",
       "vshowL",
       "orderMsg",
@@ -198,12 +226,42 @@
       "lineId"
     ],
     data() {
-      return {};
+      return {
+        backgroundColor: '',
+        textColor: '',
+        textColorOne: '',
+      };
     },
 
-    methods: {},
+    methods: {
+      getFontSize(title){
+        if(title.length+2>60){
+          return 929/60 +'px'
+        }else{
+          return '30px'
+        }
+      },
+    },
     computed: {},
     watch: {
+      dataAll: {
+        handler(val, oldVal) {
+          if(val&&val.tripColor){
+            this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
+            let rgba = this.hexToRgb(val.tripColor, 1)
+            rgba = rgba.split(',')
+            let rgba0 = rgba[0].split('(')
+            let arr = [rgba0[1],rgba[1],rgba[2]]
+            if(this.getRgbLevel(arr)>50){
+              this.textColor = "#fff"
+            }else{
+              this.textColor = "#333"
+            }
+          }
+        },
+        deep: true,
+        immediate: true
+      },
       orderMsg: {
         handler(val, oldVal) {},
         deep: true,

src/components/confirmationOrderDownLoadNew.vue

@@ -59,7 +59,7 @@
     <div id="pdfNode" class="LeaveGroupDownload-form">
       <div id="pdfDom" style="padding:0 20px;">
         <!-- 首页 -->
-        <LeaveGroupDownload :vshowJ="vshowJ" :vshowL="vshowL" :WeiXinShareImgSrc="WeiXinShareImgSrc"
+        <LeaveGroupDownload :dataAll="dataAll" :vshowJ="vshowJ" :vshowL="vshowL" :WeiXinShareImgSrc="WeiXinShareImgSrc"
           :orderMsg="orderMsg" :orderTripdiff="orderTripdiff" :vshowLLR="vshowLLR" :vshowB="vshowB" :lineId="lineId">
         </LeaveGroupDownload>