55 行
1.2 KiB
Plaintext
55 行
1.2 KiB
Plaintext
<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" v-if="showMap">
|
||
<map class="map" :latitude="latitude" :longitude="longitude"></map>
|
||
<cover-view class="cover-view"><text>简单的cover-view</text></cover-view>
|
||
<cover-image class="cover-image" src="/static/test-image/logo.png"></cover-image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
const showMap = ref(false)
|
||
const latitude = ref(39.909)
|
||
const longitude = ref(116.39742)
|
||
onLoad(() => {
|
||
showMap.value = 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;
|
||
}
|
||
|
||
</style>
|