Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/YFYC-H5 into master

src/components/Select.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="select" v-click-outside.click="onClickOutside">
+    <button
+      class="menu-cover"
+      :class="{
+        active: isExpand,
+      }"
+      @click="isExpand = !isExpand"
+    >
+      {{value ? value : placeholder}}
+      <img
+        class="pulldown-icon"
+        :src="isExpand ? require('@/assets/img/service/arrow-down-active.png') : require('@/assets/img/service/arrow-down.png')"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <div class="menu" v-show="isExpand">
+      <button v-for="(item, index) of valueList" :key="index"
+        :class="{
+          active: item === value,
+        }"
+        @click="onSelect(item)"
+      >
+        {{item}}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    valueList: {
+      type: Array,
+      default: function() {
+        return [
+        '111',
+        '222',
+        ]
+      },
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '111'
+    }
+  },
+  data() {
+    return {
+      isExpand: false,
+    }
+  },
+  methods: {
+    onClickOutside() {
+      if (this.isExpand) {
+        this.isExpand = false
+      }
+    },
+    onSelect(item) {
+      this.isExpand = false
+      this.$emit('input', item)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.select {
+  height: 7vw;
+  position: relative;
+  > button.menu-cover {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #666666;
+    > .pulldown-icon {
+      margin-left: 1.5vw;
+      width: 3.1vw;
+      height: 1.9vw;
+    }
+  }
+  > button.menu-cover.active {
+    color: #FE6E69;
+    > .pulldown-icon {
+      transform: rotate(180deg);
+    }
+  }
+  > .menu {
+    position: absolute;
+    left: -4.3vw;
+    top: 100%;
+    width: 25.5vw;
+    background: #FDFDFD;
+    box-shadow: 0.1vw 0.1vw 1.1vw 0vw rgba(109,128,166,0.29);
+    > button {
+      width: calc(100% - 2.7vw * 2);
+      height: 13.2vw;
+      margin-left: 2.7vw;
+      margin-right: 2.7vw;
+      border-bottom: 1px solid #D9D9D9;
+      font-size: 3.2vw;
+      font-weight: 500;
+      color: #666666;
+      &:last-of-type {
+        border-bottom: initial;
+      }
+      &.active {
+        width: 100%;
+        margin-left: initial;
+        margin-right: initial;
+        border-bottom: initial;
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #FDFDFD;
+        background: linear-gradient(137deg, #FF615C 0%, #FF9877 100%);
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -94,6 +94,10 @@ const routes = [{
         },
         component: () => import('../views/Construct/index.vue')
       },
+      /**
+       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+       * 享服务
+       */
       {
         path: '/layout/serve',
         name: 'serve',
@@ -113,6 +117,36 @@ const routes = [{
         component: () => import('../views/Serve/RecommendedPath.vue')
       },
       {
+        path: '/layout/serve/one-day-tour',
+        name: 'OneDayTour',
+        meta: {
+          myInd: 2,
+          myTitle: '一日游',
+        },
+        component: () => import('../views/Serve/OneDayTour.vue')
+      },
+      {
+        path: '/layout/serve/dont-miss',
+        name: 'DontMiss',
+        meta: {
+          myInd: 2,
+          myTitle: '必玩景点',
+        },
+        component: () => import('../views/Serve/DontMiss.vue')
+      },
+      {
+        path: '/layout/serve/travel-plague',
+        name: 'TravelPlague',
+        meta: {
+          myInd: 2,
+          myTitle: '景点开放',
+        },
+        component: () => import('../views/Serve/TravelPlague.vue')
+      },
+      /**
+       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+       */
+      {
         path: '/layout/interact',
         name: 'interact',
         meta: {

src/views/Serve/DontMiss.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="dont-miss">
+    <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+    <div class="select-wrap">
+      <Select
+        class="select"
+        :valueList="typeList"
+        v-model="type"
+        :placeholder="'分类'"
+      ></Select>
+      <Select
+        class="select"
+        v-model="area"
+        :valueList="areaList"
+        :placeholder="'区域'"
+      ></Select>
+    </div>
+    <div class="card-wrap">
+      <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 Select from "@/components/Select.vue";
+
+export default {
+  components: {
+    SearchBar,
+    Select,
+  },
+  data() {
+    return {
+      type: '',
+      area: '',
+      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: {
+    typeList() {
+      return [
+        '分类一',
+        '分类二',
+        '分类三',
+      ]
+    },
+    areaList() {
+      return [
+        '镜湖区',
+        '弋江区',
+        '鸠江区',
+        '繁昌区',
+      ]
+    },
+  },
+  methods: {
+    onSearch() {
+
+    },
+  }
+}
+</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/OneDayTour.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="one-day-tour" id="back-top-target">
+    <h1>【一日游】方特欢乐世界 + 梦幻王国 + 中江塔 + 老海关</h1>
+    <ul class="tag-list">
+      <li
+        class="tag"
+        v-for="(item, index) in tagList"
+        :key="index"
+      >
+        {{item}}
+      </li>
+    </ul>
+    <article
+      v-for="(item, index) in landscapeList"
+      :key="index"
+    >
+      <img :src="item.img" alt="" draggable="false">
+      <h2>{{item.title}}</h2>
+      <p>{{item.content}}</p>
+      <div class="bottom-wrap">
+        <div class="address-wrap">
+          <img src="@/assets/img/service/address.png" alt="" draggable="false">
+          <span>{{item.address}}</span>
+        </div>
+        <div class="phone-wrap">
+          <img src="@/assets/img/service/phone.png" alt="" draggable="false">
+          <span>{{item.phone}}</span>
+        </div>
+      </div>
+    </article>
+
+    <BackTop class="back-top" :targetId="'back-top-target'">
+      <img src="@/assets/img/service/back-top.png" alt="" draggable="false">
+    </BackTop>
+  </div>
+</template>
+
+<script>
+import BackTop from "@/components/BackTop.vue";
+
+export default {
+  components: {
+    BackTop,
+  },
+  data() {
+    return {
+      tagList: [
+        '梦幻游乐王国',
+        '古建筑',
+        '美食',
+      ],
+      landscapeList: [
+        {
+          img: require('@/assets/img/service/【西洋建筑】.png'),
+          title: '方特欢乐世界',
+          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
+          address: '安徽省芜湖市镜湖区银湖北路80号',
+          phone: '400-166-0006',
+        },
+        {
+          img: require('@/assets/img/service/【西洋建筑】.png'),
+          title: '方特欢乐世界',
+          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
+          address: '安徽省芜湖市镜湖区银湖北路80号',
+          phone: '400-166-0006',
+        },
+        {
+          img: require('@/assets/img/service/【西洋建筑】.png'),
+          title: '方特欢乐世界',
+          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
+          address: '安徽省芜湖市镜湖区银湖北路80号',
+          phone: '400-166-0006',
+        },
+        {
+          img: require('@/assets/img/service/【西洋建筑】.png'),
+          title: '方特欢乐世界',
+          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
+          address: '安徽省芜湖市镜湖区银湖北路80号',
+          phone: '400-166-0006',
+        },
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.one-day-tour {
+  background-color: #fff;
+  height: calc(100% - 80px);
+  overflow: auto;
+  > h1 {
+    margin-top: 3.2vw;
+    margin-bottom: 3.2vw;
+    margin-left: 4.5vw;
+    margin-right: 4.5vw;
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #000000;
+  }
+  > .tag-list {
+    margin-bottom: 5.1vw;
+    margin-left: 4.5vw;
+    display: block;
+    > .tag {
+      background: #F4F4F4;
+      border-radius: 0.5vw;
+      padding: 2.5vw 4vw;
+      font-size: 2.7vw;
+      color: #333333;
+      margin-right: 4.5vw;
+      margin-bottom: 3.2vw;
+      display: inline-block;
+      overflow: hidden;
+    }
+  }
+  > article {
+    margin: 0 4.5vw 8.1vw 4.5vw;
+    background: #F7F8FA;
+    box-shadow: 0px 0.5vw 1.1vw 0px rgba(109,128,166,0.29);
+    border-radius: 1.1vw;
+    overflow: hidden;
+    > img {
+      width: 100%;
+      margin-bottom: 3.1vw;
+    }
+    > h2 {
+      margin: 0 2.1vw 2.8vw 2.1vw;
+      font-size: 3.2vw;
+      font-weight: bold;
+      color: #333333;
+    }
+    > p {
+      margin: 0 2.1vw 7.6vw 2.1vw;
+      font-size: 2.9vw;
+      line-height: 6.7vw;
+      color: #535353;
+      text-indent: 2em;
+    }
+    > .bottom-wrap {
+      margin: 0 2.1vw 4.7vw 2.1vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > .address-wrap, .phone-wrap {
+        display: flex;
+        align-items: center;
+        margin-right: 3vw;
+        > img {
+          width: 3.2vw;
+          height: 3.2vw;
+          margin-right: 0.9vw;
+        }
+        > span {
+          font-size: 2.7vw;
+          color: #FE6E69;
+        }
+      }
+    }
+  }
+  > .back-top {
+    position: fixed;
+    bottom: calc(1.7vw + 80px);
+    right: 1.7vw;
+    width: 9.3vw;
+    height: 9.3vw;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/Serve/RecommendedPath.vue

@@ -16,6 +16,7 @@
       <article
         v-for="n in 10"
         :key="n"
+        @click="$router.push({name: 'OneDayTour'})"
       >
         <div class="left">
           <img src="@/assets/img/service/一日游.png" alt="" draggable="false">

src/views/Serve/TravelPlague.vue

@@ -0,0 +1,302 @@
+<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 class="policy" v-show="activeTabbarIdx === 1">
+      <div class="banner-wrap">
+        <img class="banner" src="@/assets/img/service/plague-banner.jpg" alt="" draggable="false">
+      </div>
+      <ul class="tag-list">
+        <li
+          class="tag"
+          v-for="(item, index) in policyTagList"
+          :key="index"
+        >
+          {{item}}
+        </li>
+      </ul>
+      <div class="article-wrap">
+        <article
+          v-for="(item, index) in policyList"
+          :key="index"
+        >
+          <div class="left-wrap">
+            <h2>{{item.title}}</h2>
+            <span class="time">{{item.time}}</span>
+          </div>
+          <div class="right-wrap">
+            <img :src="item.img" alt="" draggable="false">
+          </div>
+        </article>
+      </div>
+    </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: '芜湖市新芜区滨江北路',
+        },
+      ],
+      policyTagList: [
+        '来（返）芜湖政策',
+        '离芜出行政策',
+        '核酸检测',
+      ],
+      policyList: [
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+        {
+          title: '来（返）芜湖人员健康管理风险提醒',
+          time: '20222-10-10       17:00:52',
+          img: require('@/assets/img/service/plague-banner.jpg')
+        },
+      ]
+    }
+  },
+  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;
+        }
+      }
+    }
+  }
+  > .policy {
+    > .banner-wrap {
+      border-radius: 1.1vw;
+      overflow: hidden;
+      margin-bottom: 5.6vw;
+      > .banner {
+        width: 100%;
+      }
+    }
+    > .tag-list {
+      display: block;
+      margin-top: calc(9.2vw - 3.2vw);
+      > .tag {
+        background: #F4F4F4;
+        border-radius: 0.5vw;
+        padding: 2.5vw 4vw;
+        font-size: 2.7vw;
+        color: #333333;
+        margin-right: 4.5vw;
+        margin-bottom: 3.2vw;
+        display: inline-block;
+        overflow: hidden;
+      }
+    }
+    > .article-wrap {
+      height: 28vw;
+      > article {
+        background: #F7F8FA;
+        border-radius: 1.1vw;
+        display: flex;
+        overflow: hidden;
+        margin-bottom: 6vw;
+        > .left-wrap {
+          flex: 0 1 auto;
+          width: 47.7vw;
+          padding: 5.2vw 3.5vw;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          > h2 {
+            font-size: 3.2vw;
+            font-weight: bold;
+            color: #333333;
+            line-height: 4vw;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+          > .time {
+            font-size: 2.7vw;
+            color: #333333;
+          }
+        }
+        > .right-wrap {
+          flex: 0 1 auto;
+          width: 43.6vw;
+          > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -9,7 +9,7 @@
         <img src="@/assets/img/service/路线.png" alt="" draggable="false">
         <div>推荐路线</div>
       </router-link>
-      <router-link class="entry" to="/">
+      <router-link class="entry" :to="{name: 'DontMiss'}">
         <img src="@/assets/img/service/景点.png" alt="" draggable="false">
         <div>必玩景点</div>
       </router-link>
@@ -58,8 +58,8 @@
 
     <div class="travel-plague">
       <h3>出游防疫</h3>
-      <router-link class="more" to="/">更多  》</router-link>
-      <TabbarSmall :tabList="['景区开放', '出行政策']" @change="onTravelPlageTabbarChange"></TabbarSmall>
+      <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">
           <div class="swiper-wrapper">