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 class="sk-map12">
            <map style="width: 100%;height:500px; flex: 1" 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: relative;
        padding: 0px 3px;
        background-color: #f7f7f7;
        // max-height: calc(100vh - 40px);
        // overflow-y: auto;
        .project-basic{
            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>