修改

src/components/Supplier/roomQuery2.vue

 <template>
-  <div class="roomQuery">
+  <div class="roomQuery" ref="wrap">
     <div class="query-box" style="border-bottom: none;">
       <ul style="position:relative;">
         <li>
@@ -20,6 +20,7 @@
         <div style="display:inline-block;color:red;display:none">注意事项:每次导出数据最好不要超过一个月。</div>
         <div class="rq_comSpan" style="display:inline-block;">颜色说明:
           <span class="rq_span1">新增团体</span><span class="rq_span2">取消团体</span>
+          <span class="rq_span3">取消团体</span>
         </div>
       </div><br />
       <table border="0" cellspacing="1" cellpadding="0" class="roomQuery_SupplierTable" v-loading='loading'>
@@ -192,7 +193,7 @@
               </div>
               <div class="rq_remark" v-if="item.SupplierHotelStatus==1||item.SupplierHotelStatus==2&&item.Numbers>=0">
                 <span class="rq_reSpan">酒店提醒</span>
-                <span class="rQ_HtList">
+                <span class="rQ_HTremark">
                   <span v-for="subItem in item.Numbers"></span>
                 </span>
               </div>
@@ -207,7 +208,11 @@
         </tbody>
       </table>
     </div>
-
+    <transition name="el-zoom-in-top">
+      <div class="page-component-up" v-show="top>100" @click="goTop">
+        <i class="el-icon-arrow-up"></i>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -217,6 +222,7 @@
         loading: false,
         hotelLoading: false,
         total: 0,
+        top:0,
         msg: {
           pageIndex: 1,
           pageSize: 5,
@@ -371,6 +377,13 @@
       //提取年月日
       getDateYear(date) {
         return date.split(' ')[0];
+      },
+      goTop(){
+        document.documentElement.scrollTop = 0
+        this.top=0
+      },
+      handleScroll(){
+        this.top=document.documentElement.scrollTop
       }
     },
     mounted() {
@@ -379,7 +392,7 @@
       var nowMonth = (new Date().getMonth() + 1).toString()
       var nowDay = new Date().getDate().toString();
       this.todayDate = new Date().getFullYear() + '-' + this.timeAdd0(nowMonth) + '-' + this.timeAdd0(nowDay);
-
+      document.addEventListener('scroll', this.handleScroll);
       this.getList();
     },
   }
@@ -453,7 +466,9 @@
   .roomQuery .rq_span2 {
     background-color: red;
   }
-
+  .roomQuery .rq_span3 {
+    background-color: #fb5f7a;
+  }
   .roomQuery .hotelLink {
     color: blue;
     text-decoration: underline;
@@ -558,18 +573,23 @@
     font-size: 12px;
   }
 
-  .rQ_HtList {
+  .rQ_HtList,.rQ_HTremark {
     position: relative;
     top:3px;
   }
-
+  .rQ_HTremark span{
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+    background-color: #fb5f7a;
+  }
   .rQ_HtList span {
     display: inline-block;
     width: 15px;
     height: 15px;
     margin-right: 5px;
     background-color: red;
-    border: 1px solid #d1d1d1;
   }
 
   .rq_importNote {
@@ -594,4 +614,27 @@
     width:75px;
     text-align: right;
   }
+  .roomQuery .page-component-up {
+    background-color: #fff;
+    position: fixed;
+    right: calc(8.3% - 60px);
+    bottom: 150px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition: .3s;
+    z-index: 5;
+    border:1px solid #ddd;
+    box-sizing: border-box;
+    line-height: 40px;
+    text-align: center;
+}
+  .roomQuery .page-component-up i{font-size: 36px;color: #bbb;}
+  .roomQuery .page-component-up:hover{
+    background-color: #EF4455;
+    border:1px solid #ec3346;
+  }
+  .roomQuery .page-component-up:hover i{
+    color: #F1f1f1;
+  }
 </style>