1

src/components/TabbarSmall.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="tabbar-small">
+    <ul>
+      <li
+        v-for="(item, index) in tabList"
+        :key="item"
+        :class="{
+          active: index === activeTabIdx,
+        }"
+        @click="activeTabIdx = index"
+      >
+        {{item}}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabList: {
+      type: Array,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      activeTabIdx: 0,
+    }
+  },
+  watch: {
+    activeTabIdx: {
+      handler(vNew) {
+        this.$emit('change', vNew)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tabbar-small {
+  > ul {
+    display: flex;
+    align-items: center;
+    > li {
+      margin-right: 12vw;
+      position: relative;
+      font-size: 3.2vw;
+      font-weight: 600;
+      color: #333333;
+      &.active {
+        font-weight: bold;
+        &::after {
+          content: '';
+          display: absolute;
+          top: calc(100% + 0.9vw);
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 10.1vw;
+          height: 1.3vw;
+          background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%);
+          border-radius: 0.7vw;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -50,13 +50,31 @@
       <h3>推荐路线</h3>
       <router-link class="more" to="/">更多  》</router-link>
       <div class="grid-wrap">
+        <div class="left-wrap card">
+          <img src="@/assets/img/service/一日游.png" alt="" draggable="false">
+          <h4>一日游</h4>
+        </div>
+        <div class="right-wrap">
+          <div class="card">
+            <img src="@/assets/img/service/【快速浏览】.png" alt="" draggable="false">
+            <h4>【快速浏览】</h4>
+          </div>
+          <div class="card">
+            <img src="@/assets/img/service/【西洋建筑】.png" alt="" draggable="false">
+            <h4>【西洋建筑】</h4>
+          </div>
+          <div class="card">
+            <img src="@/assets/img/service/【古建筑】.png" alt="" draggable="false">
+            <h4>【古建筑】</h4>
+          </div>
+        </div>
       </div>
     </div>
 
     <div class="travel-plague">
       <h3>出游防疫</h3>
       <router-link class="more" to="/">更多  》</router-link>
-      <!-- todo tab -->
+      <TabbarSmall :tabList="['景区开放', '出行政策']"></TabbarSmall>
       <div class="swiper">
         <!-- todo -->
       </div>
@@ -91,10 +109,12 @@
 
 <script>
 import BackTop from "@/components/BackTop.vue";
+import TabbarSmall from "@/components/TabbarSmall.vue";
 
 export default {
 components: {
-  BackTop
+  BackTop,
+  TabbarSmall,
 },
 data() {
   return {
@@ -233,6 +253,65 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
       font-size: 2.7vw;
       color: #333333;
     }
+    .grid-wrap {
+      margin-top: 3.1rem;
+      .left-wrap {
+        display: inline-block;
+        position: relative;
+        width: 41.9vw;
+        height: 56.8vw;
+        border-radius: 1.3vw;
+        margin-right: 2vw;
+        > img {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+        }
+        > h4 {
+          position: absolute;
+          left: 3.9vw;
+          top: 3.1vw;
+          font-size: 6.4vw;
+          letter-spacing: 0.3em;
+          font-weight: bold;
+          color: #FFFFFF;
+          text-shadow: 0px 4px 4px #3A180F;
+          writing-mode: vertical-rl;
+        }
+      }
+      .right-wrap {
+        display: inline-block;
+        > .card {
+          position: relative;
+          width: 47.5vw;
+          height: 18.4vw;
+          margin-bottom: 0.8vw;
+          &:last-of-type {
+            margin-bottom: initial;
+          }
+          > img {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+          }
+          > h4 {
+            position: absolute;
+            right: 1.1vw;
+            height: 100%;
+            font-size: 2.7vw;
+            font-weight: 500;
+            color: #FEFEFE;
+            writing-mode: vertical-rl;
+            text-align: center;
+            letter-spacing: 0.12em;
+          }
+        }
+      }
+    }
   }
 
   > .travel-plague {