tsg-app/pages/skInfo/detail/basicInfo.vue

<template>
  <view class="project-cotent">
    <view class="total-des">
      <view style="opacity:0.5">工程概况：</view>
      <view>{{skInfo.projOverview}}</view>
    </view>
    <view class="project-basic">
      <view class="project-loc">
        <text style="opacity:0.5">水库水位定位信息</text>
        <view class="sk-location">
          <image src='../../../static/images/loc.png' style="width:20px;height:20px"></image>
          <text style="margin-left:10px">{{skInfo.resLoc}}</text>
        </view>
      </view>

    </view>
    <view >

    <map style="width: 100%;" id="container" :latitude="lnglat[1]" :longitude="lnglat[0]"
      :markers="markers" scale="13"></map>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      skInfo: {
        type: Object,
        default: {}
      }

    },
    data() {
      return {
        lnglat: [114.76, 31.52],
        markers: [{
          latitude: 31.52,
          longitude: 114.76,
          iconPath: '../../../static/tabs/add.png',
          width: 25,
          height: 25
        }]
      }
    },

  }
</script>
<style lang="scss">
  .project-cotent {
    position: absolute;
    padding: 0px 3px;
    background-color: #f7f7f7;
    overflow: hidden;
    // max-height: calc(100vh - 40px);
    // overflow-y: auto;
    .project-basic {
      // position: relative;
      background-color: #ffffff;
      padding: 5px;
      margin-top: 5px;
    }

    .project-des {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #f2f2f2;
      background-color: #ffffff;
      padding: 0 10px;

      .circle-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #409eff;
        margin-left: 10px;
      }

      .label-name {
        display: flex;
        flex-direction: column;
        align-items: center;

        flex: 1
      }
    }
  }

  .total-des {
    margin-top: 10px;
    background-color: #ffffff;
    padding: 10px;
  }

  .sk-location {
    display: flex;
    align-items: center;

  }

  .sk-map12 {
    //   height: 400px;
  }

  .amap-logo {
    opacity: 0 !important;
  }

  .amap-copyright {
    opacity: 0 !important;
  }
</style>