享服务-出游政策-景点开放

src/router/index.js

@@ -134,6 +134,15 @@ const routes = [{
         },
         component: () => import('../views/Serve/DontMiss.vue')
       },
+      {
+        path: '/layout/serve/travel-plague',
+        name: 'TravelPlague',
+        meta: {
+          myInd: 2,
+          myTitle: '出游防疫',
+        },
+        component: () => import('../views/Serve/TravelPlague.vue')
+      },
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */

src/views/Serve/TravelPlague.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="dont-miss">
+    <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+    <TabbarSmall :tabList="['景点开放', '出行政策']" @change="onTabbarChange"></TabbarSmall>
+    <div class="card-wrap" v-show="activeTabbarIdx === 0">
+      <article
+        v-for="(item, index) in attractionList"
+        :key="index"
+      >
+        <img :src="item.img" alt="" draggable="false">
+        <h2>{{item.title}}</h2>
+        <div class="location">
+          <img class="icon" src="@/assets/img/service/address.png" alt="" draggable="false">
+          <span>{{item.location}}</span>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchBar from "@/components/SearchRedBtn.vue";
+import TabbarSmall from "@/components/TabbarSmall.vue";
+// import Select from "@/components/Select.vue";
+
+export default {
+  components: {
+    SearchBar,
+    TabbarSmall,
+    // Select,
+  },
+  data() {
+    return {
+      activeTabbarIdx: 0,
+      attractionList: [
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+        {
+          img: require(`@/assets/img/service/【西洋建筑】.png`),
+          title: '芜湖老海关',
+          location: '芜湖市新芜区滨江北路',
+        },
+      ],
+    }
+  },
+  computed: {
+  },
+  methods: {
+    onSearch() {
+
+    },
+    onTabbarChange(idx) {
+      this.activeTabbarIdx = idx
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.dont-miss {
+  background-color: #fff;
+  height: calc(100% - 80px);
+  overflow: auto;
+  padding: 3.3vw 4.5vw 4.5vw 4.5vw;
+  display: flex;
+  flex-direction: column;
+  > .search-bar {
+    flex: 0 0 auto;
+  }
+  > .select-wrap {
+    flex: 0;
+    margin: 3.5vw 0 4vw 0;
+    > .select {
+      width: 15vw;
+      display: inline-block;
+      margin-right: 12.5vw;
+    }
+  }
+  > .card-wrap {
+    flex: 1 0 1px;
+    overflow: auto;
+    margin-right: -4vw;
+    > article {
+      width: 43.6vw;
+      height: 62.7vw;
+      display: inline-block;
+      background: #F7F8FA;
+      border-radius: 1.1vw;
+      overflow: hidden;
+      margin-right: 3.5vw;
+      margin-bottom: 4vw;
+      > img {
+        width: 100%;
+        height: 44.5vw;
+        object-fit: cover;
+        margin-right: 1.7vw;
+      }
+      > h2 {
+        font-size: 3.2vwx;
+        font-family: Source Han Serif CN;
+        font-weight: bold;
+        color: #333333;
+        line-height: 40px;
+        margin-left: 2.3vw;
+        margin-right: 2.3vw;
+        margin-bottom: 4.4vw;
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #333333;
+        line-height: 4vw;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+      }
+      > .location {
+        margin-left: 2.3vw;
+        margin-right: 2.3vw;
+        display: flex;
+        align-items: center;
+        > img {
+          width: 3.2vw;
+          height: 3.2vw;
+          margin-right: 1.1vw;
+        }
+        > span {
+          font-size: 2.7vw;
+          color: #333333;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -58,7 +58,7 @@
 
     <div class="travel-plague">
       <h3>出游防疫</h3>
-      <router-link class="more" to="/">更多  》</router-link>
+      <router-link class="more" :to="{name: 'TravelPlague'}">更多  》</router-link>
       <TabbarSmall :tabList="['景区开放', '出行政策']" @change="onTravelPlageTabbarChange"></TabbarSmall>
       <div class="open-status" v-show="travelPlagueActiveIdx === 0">
         <div class="swiper-container">