调整小班详情字段

src/components/amapnow.vue

@@ -12,6 +12,47 @@
     <div class="yun-wrap">
       <img class="yun yun3" src="../assets/img/云3.png" alt />
     </div>
+    <!-- <div class="info-small">
+      <h5 class="marker-title">
+        item.countyName +
+        item.smallNumber +
+      </h5>
+      <div class="marker-content">
+        <p>
+          小班号：' +
+          item.smallNumber +
+          '
+        </p>
+        <p>
+          样地数：' +
+          item.sampleCount +
+          '
+        </p>
+        <p>
+          小班蓄积量：' +
+          item.smallClassStock +
+          '(立方米)' +
+          '
+        </p>
+        <p>
+          小班占地面积：' +
+          item.landArea +
+          '(亩)' +
+          '
+        </p>
+        <p>
+          小班树种组成：' +
+          item.treeComp +
+          '
+        </p>
+        <p>
+          所在位置：' +
+          item.cityName +
+          item.countyName 
+          item.townName;
+        </p>
+      </div>
+    </div>-->
   </div>
 </template>
 <script>
@@ -966,7 +1007,10 @@ export default {
             if (item.longitude && item.latitude) {
               var lanLatArr = [];
               lanLatArr = [item.longitude, item.latitude];
-              if (this.$store.state.addr.mapLevel == 'district' || this.$store.state.addr.mapLevel == 'street') {
+              if (
+                this.$store.state.addr.mapLevel == 'district' ||
+                this.$store.state.addr.mapLevel == 'street'
+              ) {
                 this.smallClassN = new AMap.Text({
                   map: this.map,
                   position: lanLatArr,
@@ -983,14 +1027,16 @@ export default {
                 this.smallClassNArr.push(this.smallClassN);
               }
               smallClassPolygon.on('click', (e) => {
+                console.log(item);
                 let smallLabel =
-                  "<div class='info-small'>" +
+                  "<div class='info-details'>" +
                   "<h5 class='marker-title'>" +
                   item.countyName +
                   '-' +
                   item.smallNumber +
                   '</h5>' +
                   "<div class='marker-content'>" +
+                  '<div>' +
                   '<p>小班号：' +
                   item.smallNumber +
                   '</p>' +
@@ -1008,11 +1054,65 @@ export default {
                   '<p>小班树种组成：' +
                   item.treeComp +
                   '</p>' +
+                  '<p>地类：' +
+                  item.landType +
+                  '</p>' +
+                  '<p>林地权属：' +
+                  item.landOwner +
+                  '</p>' +
+                  '<p>林木权属：' +
+                  item.forestOwner +
+                  '</p>' +
+                  '<p>林种：' +
+                  item.forestClass +
+                  '</p>' +
+                  '<p>树种结构：' +
+                  item.treeStruct +
+                  '</p>' +
+                  '<p>起源：' +
+                  item.origin +
+                  '</p>' +
+                  '<p>优势树种：' +
+                  item.superTree +
+                  '</p>' +
+                  '</div>' +
+                  '<div>' +
+                  '<p>主要灌木名称：' +
+                  item.shrubName +
+                  '</p>' +
+                  '<p>地貌：' +
+                  item.landForm +
+                  '</p>' +
+                  '<p>海拔：' +
+                  item.altitude +
+                  '</p>' +
+                  '<p>坡位：' +
+                  item.slopePosit +
+                  '</p>' +
+                  '<p>坡向：' +
+                  item.slopeDirect +
+                  '</p>' +
+                  '<p>坡形：' +
+                  item.slopeForm +
+                  '</p>' +
+                  '<p>坡度：' +
+                  item.slope +
+                  '</p>' +
+                  '<p>森林健康度：' +
+                  item.forestHealth +
+                  '</p>' +
                   '<p>所在位置：' +
                   item.cityName +
                   item.countyName +
                   item.townName;
-                '</p>' + '</div>' + '</div>';
+                '</p>' +
+                  '<p>图片：' +
+                  item.treeComp +
+                  "<img src='' />"
+                  '</p>' +
+                  '</div>' +
+                  '</div>' +
+                  '</div>';
                 that.smallMarker = new AMap.Marker({
                   position: lanLatArr,
                   icon: require('@/assets/img/small-marker.png'),
@@ -1540,6 +1640,30 @@ export default {
     }
   }
 }
+/deep/ .info-details {
+  background-image: url('../assets/img/small-label.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 26rem;
+  // height: 10rem;
+  color: #fff;
+  .marker-title {
+    margin: 0 auto;
+    line-height: 50px;
+  }
+  .marker-content {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px 20px 20px;
+    p {
+      text-align: left;
+      font-size: 12px;
+      margin: 0;
+      line-height: 18px;
+    }
+  }
+}
+
 /deep/ .amap-marker-label {
   border: 0;
   background-color: transparent;