享服务-一日游

src/router/index.js

@@ -90,6 +90,15 @@ 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/interact',
         name: 'interact',
         meta: {

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">