修改海洋牧场左右移出效果

src/views/components/seedling/place-list.vue

@@ -6,7 +6,7 @@
         </i-col>
       </Row>
       <m-scroll :length="model.length" :limit="12">
-        <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
+        <Row @click.native="$emit('select')" class="row item" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
           <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
             <!-- <div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
               <m-count :value="row[col.key]" :decimal="0"/>
@@ -73,6 +73,10 @@ export default {
       font-size 1rem
     &:nth-child(2n)
       background-color $color-map(0.15)
+    &.item
+      cursor pointer
+      &:hover
+        color $edgeColor
   .col
     padding 0 .5rem
     display flex

src/views/ocean-farm.vue

 <template>
-<m-grid
-  area="grid"
-  :template="[
-    'left . right',
-  ]"
-  columns="1fr 2fr 1fr"
-  rows="1fr"
-  gap="0.5rem">
+<div class="ocean-farm">
   <div id="oceanMap"/>
   <div v-if="showDetail" class="back-btn" @click="handleBack">
     <Icon type="md-arrow-round-back" /> 返回
@@ -86,7 +79,7 @@
       </m-card>
     </div>
   </m-animate>
-</m-grid>
+</div>
 </template>
 
 <script>
@@ -297,16 +290,16 @@ export default {
                 <p><span>建设类型：</span>${type}</p>
               </div>
             `
-          }).open(this.map, location)
+          })
+          this.markerInfo.open(this.map, location)
         })
         return marker
       })
       this.map.add(this.mapMarker)
     },
     handleBack() {
-      this.showDetail = false
-      this.polygonInfo && this.polygonInfo.close()
       this.markerInfo && this.markerInfo.close()
+      this.showDetail = false
       if (this.mapMarker.length > 0) {
         this.mapMarker.forEach(marker => {
           marker.setIcon(this.preIcon)
@@ -338,6 +331,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.ocean-farm
+  position relative
 #oceanMap
   z-index 9
   width 100%
@@ -351,7 +346,7 @@ export default {
   height @width
   cursor pointer
   z-index 9999
-  transition all 1s ease-in-out
+  transition all .5s ease-in-out
   transform-origin center
   &.on
     right 1rem
@@ -376,13 +371,17 @@ export default {
       font-family $font-pang !important
       font-size 1.5rem !important
 .content
+  width 25%
+  height auto
   display flex
   flex-direction column
-  width 100%
-  height 100%
   overflow hidden
+  position absolute
+  z-index 10
+  top .5rem
+  bottom 0
   >div
-    margin-top .5rem
+    margin-bottom .5rem
   &.part-left,
   &.part-right
     >div
@@ -390,7 +389,11 @@ export default {
         flex 1
       &:nth-child(2)
         flex 2
+  &.part-right
+    right .5rem
+  &.part-left,
   &.part-left2
+    left .5rem
     >div
       flex 1
 </style>

src/views/seedling.vue

@@ -34,7 +34,7 @@
           <AreaCount v-if="showProvince" :data="areaData"/>
         </m-card>
         <m-card title="良种场列表">
-          <PlaceList v-if="showProvince" />
+          <PlaceList @select="handleMapChoice" v-if="showProvince" />
         </m-card>
       </div>
     </m-animate>
@@ -189,6 +189,7 @@ export default {
     },
     handleMapChoice() {
       this.showCompany = true
+      this.showProvince = false
     }
   }
 }