<template>
  <div class="mapboxBottomitem win">
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>

    <div :style="styleLy" class="mapboxBottomContent">
      <slot>内容 </slot>
    </div>
  </div>
</template>

<script>
import titileLine from "@/components/titileLine";
export default {
  name: "boxmapboxitem",
  props: {
    styleLy: {
      type: Object,
      default: () => {
        return {
          padding: "4px",
        };
      },
    },
  },
  components: {
    titileLine,
  },
};
</script>

<style scoped>
.mapboxBottomContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.win {
  position: relative;
  display: inline-block;
  border: 1px solid #dddddd;
  margin-top: 10px;
}
.main {
  width: 200px;
  height: 200px;
  border: 1px solid rgb(153, 204, 255);
  border-radius: 4px;
}
.border_corner {
  z-index: 2500;
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0);
  border: 2px solid #2f7f9d;
}
.border_corner_left_top {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}
.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 4px;
}
.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 4px;
}
.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;

  border-bottom-right-radius: 4px;
}
.mapboxBottomitem {
  display: flex;
  //margin-right: 4px;
  //margin-left: 4px;
  align-items: center;
  flex-direction: column;
  width: 100%;
  flex: 1;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
}
</style>
