1

src/views/Serve/index.vue

@@ -43,18 +43,19 @@
     </menu>
 
     <div class="travel-route-1">
-      <router-link>一日游推荐路线</router-link>
+      <router-link class="entry" to="/">一日游推荐路线</router-link>
     </div>
 
     <div class="travel-route-2">
       <h3>推荐路线</h3>
-      <router-link>更多  》</router-link>
-      <!-- todo -->
+      <router-link class="more" to="/">更多  》</router-link>
+      <div class="grid-wrap">
+      </div>
     </div>
 
     <div class="travel-plague">
       <h3>出游防疫</h3>
-      <router-link>更多  》</router-link>
+      <router-link class="more" to="/">更多  》</router-link>
       <!-- todo tab -->
       <div class="swiper">
         <!-- todo -->
@@ -64,7 +65,7 @@
 
     <div class="help-center">
       <h3>帮助中心</h3>
-      <router-link>更多  》</router-link>
+      <router-link class="more" to="/">更多  》</router-link>
       <!-- todo tab -->
       <ul class="questions">
         <li v-for="n in 10" :key="n">
@@ -82,7 +83,9 @@
       </ul>
     </div>
 
-    <BackTop class="back-top" :targetId="'service-first-page'"></BackTop>
+    <BackTop class="back-top" :targetId="'service-first-page'">
+      <img src="@/assets/img/service/back-top.png" alt="" draggable="false">
+    </BackTop>
   </div>
 </template>
 
@@ -124,12 +127,14 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 <style lang='less' scoped>
 .service {
   background-color: #f0f0f0;
-
+  height: calc(100% - 40px);
+  overflow: auto;
   .banner {
     height: 31.9vw;
     background-image: url(~@/assets/img/service/banner.png);
     background-size: cover;
     background-repeat: no-repeat;
+    background-position: center center;
     overflow: hidden;
     margin-bottom: 3.3vw;
     .search-wrap {
@@ -187,5 +192,101 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
       }
     }
   }
+
+  > .travel-route-1 {
+    margin: 0 0 4vw 0;
+    height: 41.5vw;
+    background-image: url(~@/assets/img/service/travel-route-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    overflow: hidden;
+    position: relative;
+    .entry {
+      position: absolute;
+      top: 1.5vw;
+      right: 0.7vw;
+      padding: 3.1vw 1.5vw;
+      background: rgba(15, 5, 9, 0.39);
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #FFFAFA;
+    }
+  }
+
+  > .travel-route-2 {
+    border-radius: 1.1vw;
+    margin: 0 0.7vw 4vw 0.7vw;
+    overflow: hidden;
+    position: relative;
+    padding: 1.9vw 3.5vw 4.5vw;
+    background: #fff;
+    > h3 {
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #000000;
+    }
+    .more {
+      position: absolute;
+      top: 2.7vw;
+      right: 3.6vw;
+      font-size: 2.7vw;
+      color: #333333;
+    }
+  }
+
+  > .travel-plague {
+    border-radius: 1.1vw;
+    margin: 0 0.7vw 4vw 0.7vw;
+    overflow: hidden;
+    position: relative;
+    padding: 1.9vw 3.5vw 4.5vw;
+    background: #fff;
+    > h3 {
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #000000;
+    }
+    .more {
+      position: absolute;
+      top: 2.7vw;
+      right: 3.6vw;
+      font-size: 2.7vw;
+      color: #333333;
+    }
+  }
+
+  > .help-center {
+    border-radius: 1.1vw;
+    margin: 0 0.7vw 4vw 0.7vw;
+    overflow: hidden;
+    position: relative;
+    padding: 1.9vw 3.5vw 4.5vw;
+    background: #fff;
+    > h3 {
+      font-size: 3.5vw;
+      font-weight: bold;
+      color: #000000;
+    }
+    .more {
+      position: absolute;
+      top: 2.7vw;
+      right: 3.6vw;
+      font-size: 2.7vw;
+      color: #333333;
+    }
+  }
+  
+  > .back-top {
+    position: fixed;
+    bottom: calc(1.7vw + 40px);
+    right: 1.7vw;
+    width: 9.3vw;
+    height: 9.3vw;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>