EveryLike/pages/component/cover-view/cover-view.uvue

<template>
  <view>
    <page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
    <view class="uni-padding-wrap uni-common-mb">
      <text class="uni-subtitle-text">注意：Web和App需正确配置地图SDK的Key才能正常显示地图组件</text>
    </view>
    <view class="cover-content">
      <map class="map" :latitude="latitude" :longitude="longitude"></map>
      <cover-view class="cover-view">简单的cover-view</cover-view>
      <cover-image class="cover-image" src="/static/uni.png"></cover-image>
    </view>
  </view>
</template>

<script lang="uts">
  export default {
    data() {
      return {
        showMap: false,
        latitude: 39.909,
        longitude: 116.39742
      };
    },
    onLoad() {
      this.showMap = true
    }
  }
</script>

<style>
  .map {
    width: 100%;
    height: 600px;
  }

  .cover-content {
    position: relative;
  }

  .cover-view {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 188px;
    text-align: center;
    background-color: #DDDDDD;
  }

  .cover-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 96px;
    height: 96px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>