init

xhs-mini-demos/component-case/cover-view/cover-view.css

@@ -0,0 +1,28 @@
+.cover-view {
+  position: absolute;
+  top: calc(50% - 75px);
+  left: calc(50% - 150px);
+  /* opacity: .7; */
+}
+
+.flex-wrp{
+  display:flex;
+}
+
+.flex-item{
+  width: 100px;
+  height: 150px;
+  font-size: 13px;
+}
+
+.demo-text-1 {
+  background: rgba(26, 173, 25, 0.7);
+}
+
+.demo-text-2 {
+  background: rgba(39, 130, 215, 0.7);
+}
+
+.demo-text-3 {
+  background: rgba(255, 255, 255, 0.7);
+}

xhs-mini-demos/component-case/cover-view/cover-view.js

@@ -0,0 +1,13 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'cover-view',
+      path: 'page/component/pages/cover-view/cover-view',
+    };
+  },
+
+  data: {
+    latitude: 23.099994,
+    longitude: 113.324520,
+  },
+});

xhs-mini-demos/component-case/cover-view/cover-view.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "cover-view"
+}

xhs-mini-demos/component-case/cover-view/cover-view.xhsml

@@ -0,0 +1,21 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section page-section-gap">
+      <map
+        style="width: 100%; height: 300px;"
+        latitude="{{latitude}}"
+        longitude="{{longitude}}"
+      >
+        <cover-view class="cover-view">
+          <cover-view class="container">
+            <cover-view class="flex-wrp" style="flex-direction:row;">
+              <cover-view class="flex-item demo-text-1"></cover-view>
+              <cover-view class="flex-item demo-text-2"></cover-view>
+              <cover-view class="flex-item demo-text-3"></cover-view>
+            </cover-view>
+          </cover-view>
+        </cover-view>
+      </map>
+    </view>
+  </view>
+</view>