修改

src/pages/usercenter/orderinfo.vue

@@ -3,7 +3,7 @@
     margin: 0 auto 20px;
     width: 100%;
     max-width: 800px;
-    padding: 40px 20px;
+    /* padding: 40px 20px; */
   }
 
   .order_content {

src/pages/usercenter/passengerList.vue

@@ -82,6 +82,7 @@
     margin-bottom: 15px;
     font-size: 22px;
     font-weight: bold;
+    word-break: break-all;
   }
 
   .tour-desc {
@@ -144,7 +145,7 @@
     font-size: 14px;
     color: #ff9800;
     display: flex;
-    align-items: center;
+    /* align-items: center; */
   }
 
   .order-info-block .buy-title {
@@ -187,8 +188,6 @@
     height: 46px;
   }
 
-  .buy_aside {}
-
   .aside-title {
     font-size: 18px;
     margin-bottom: 10px;
@@ -257,6 +256,51 @@
     height:0;
     padding:0!important;
   }
+
+  @media only screen and (max-width: 980px){
+    .order-info {
+        margin-right: 0;
+        width: 100%;
+    }
+    .order-right{
+      display:none;
+    }
+  }
+  @media only screen and (max-width: 768px){
+    .order-buy .tour-desc .tour-cover{
+      width:100%;
+      margin:0 0 20px 0;
+    }
+    .order-buy .tour_content {
+        width: 100%;
+        padding-bottom: 15px;
+        border-bottom: 1px dashed #ddd;
+    }
+    .order-buy .row .col-6{
+      width:100%;
+    }
+    .order-buy .row .account_labelName{
+      margin-top:10px;
+    }
+    .order-buy .data-content .q-col-gutter-y-lg{
+      margin-top:5px;
+    }
+    .order-buy .row .account-group{
+      padding-top:0!important;
+    }
+    .order-buy .data-content{
+      padding-top:5px;
+    }
+    .isFixed{
+      position: fixed;
+      top:60px;
+      right:0;
+      z-index:9999;
+    }
+  }
+  .order-buy .Order_content .q-gutter-md{
+    margin-left:0;
+  }
 </style>
 <template>
   <q-page>
@@ -295,13 +339,13 @@
             </div>
           </div>
           <div class="warning-bar">
-            <q-icon name="warning" class="text-orange" style="font-size: 1.5rem;" />
+            <q-icon name="warning" class="text-orange" style="font-size: 1.2rem;" />
             所有資料確認送出後將無法修改，如需修改資料請洽客服。
           </div>
           <!-- 旅客资料开始 -->
           <div class="order-info-block" v-if="shape==1">
             <div class="buy-title">旅客資料
-              <q-btn color="amber" @click="getConnect()" type="submit" style="float:right;font-size:17px;font-weight:bold;"
+              <q-btn color="amber" @click="getConnect()" id="home-tab" :class="{'isFixed':isFixed}" type="submit" style="float:right;font-size:17px;font-weight:bold;"
                 label="儲存" />
             </div>
             <q-form ref="myForm" class="q-gutter-md">
@@ -589,6 +633,9 @@
           }
         ],
         GuestObj: {}, //旅客信息
+        scrollTop:0,
+        tabOffsetTop:0,
+        isFixed:false
       };
     },
     created() {
@@ -598,8 +645,19 @@
     },
     mounted() {
       this.getTravelGuest();
+      let tabEle = document.getElementById('home-tab');
+      this.tabOffsetTop = tabEle.offsetTop
+      window.addEventListener('scroll', this.handleScroll)
     },
     methods: {
+      handleScroll(){
+        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || document.scrollingElement.scrollTop || 0
+        if(this.scrollTop>this.tabOffsetTop){
+          this.isFixed=true;
+        }else{
+          this.isFixed=false;
+        }
+      },
       getShow(item){
         item.isShow=!item.isShow;
         this.$forceUpdate();