caimei-authentic-www/components/SimpleMapNav/index.vue

<template>
  <div class="simple-map-nav">
    <van-popup v-model="show" :closeable="true" :position="position">
      <div class="title">地图导航</div>
      <div class="popup-content">
        <van-button
          class="btn"
          :size="size"
          :color="color"
          :round="round"
          @click="$emit('click', 'gaode')"
          >高德地图</van-button
        >
        <van-button
          class="btn"
          :size="size"
          :color="color"
          :round="round"
          @click="$emit('click', 'tx')"
          >腾讯地图</van-button
        >
        <van-button
          class="btn"
          :size="size"
          :color="color"
          :round="round"
          @click="$emit('click', 'baidu')"
          >百度地图</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    color: {
      type: String,
      default: '#bc1724',
    },
  },
  computed: {
    ...mapGetters(['isPc']),
    position() {
      return this.isPc ? 'center' : 'bottom'
    },
    round() {
      return !this.isPc
    },
    size() {
      return this.isPc ? 'normal' : 'small'
    },
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    close() {
      this.show = false
    },
    open() {
      this.show = true
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .simple-map-nav {
    .title {
      font-size: 18px;
      color: #666;
      text-align: center;
      padding: 24px 0;
    }
    .popup-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 360px;
      padding: 0 24px 24px;
    }
  }
}

@media screen and (max-width: 768px) {
  .simple-map-nav {
    .title {
      font-size: 3.6vw;
      color: #666;
      text-align: center;
      padding: 2.4vw 0;
    }
    .popup-content {
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 2.4vw;

      ::v-deep {
        .van-button {
          width: 100%;
          margin: 1.2vw 0;
        }
      }
    }
  }
}
</style>