必玩景点

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/views/Serve/DontMiss.vue

@@ -1,5 +1,193 @@
 <template>
   <div class="dont-miss">
-    safsdf
+    <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>
+</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/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>