Feat: 地标好物（服务）

(cherry picked from commit d3957be379)

pages/home/components/serviec.vue

@@ -1,17 +1,100 @@
 <template>
   <view class="service">
-    服务
+    <view class="map-cont">
+      <map
+        :longitude="info.longitude"
+        :latitude="info.latitude"
+        style="width: 100%;height: 400rpx; border-radius: 20rpx;"
+      />
+    </view>
+    <view class="v12-mt-3 info-wrap">
+      <view>
+        <view class="v12-font-32 v12-font-bold v12-mb-2">{{ info.name }}</view>
+        <view class="v12-font-24 v12-mb-1 v12-dark1-text">办公时间:{{ info.officeTime }}</view>
+        <view class="v12-font-24 v12-mb-1 v12-dark1-text">{{ info.address }}</view>
+      </view>
+      <view class="action-wrap">
+        <view>
+          <view>
+            <image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
+          </view>
+          <view class="text-center">导航</view>
+        </view>
+        <view>
+          <view>
+            <image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
+          </view>
+          <view class="text-center">客服</view>
+        </view>
+      </view>
+    </view>
+    <view style="padding: 0 20rpx;"><u-divider></u-divider></view>
+    <view class="intro-wrap">
+      <view class="v12-dark-text v12-font-bold">
+        简介
+      </view>
+      <view class="intro-text">
+        {{ info.intro }}
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
   props: {
-    landmarkDataId: null
-  }
+    info: {
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+    }
+  },
+  mounted() {
+    console.log(this.info);
+  },
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.intro-text{
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 20rpx;
+}
+.intro-wrap{
+  padding: 0 20rpx 20rpx;
+}
+.action-wrap{
+  display: flex;
+  align-items: center;
+  .text-center{
+    text-align: center;
+    font-size: 24rpx;
+    color: #666;
+  }
+}
+.info-wrap{
+  display: flex;
+  justify-content: space-around;
+  padding: 40rpx 0 0;
+}
+.service{
+  position: relative;
+}
+.map-cont {
+  height: 400rpx;
+  border-radius: 20rpx;
+  background: #f2f1ed;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.img{
+  display: block;
+  width: 64rpx;
+  height: 64rpx;
+  margin: 0 0 16rpx 16rpx;
+}
 </style>