<template>
  <el-dialog class="marker-dialog" :visible.sync="visible">
    <div class="marker-dialog-header">
      1212121
      <!-- <img
        :src="require('@/assets/img/bigScreen/module/dialog-point-icon.png')"
      /> -->
      <!-- <span class="marker-dialog-title">标记点位</span> -->
    </div>
    <div>
      <section-title type="line" title="基础信息"></section-title>
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '../components/sectionTitle.vue'
export default {
  name: 'markerDialog',
  components: {SectionTitle},
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
    width: 600px !important;
    height: 440px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: url('~@/assets/img/bigScreen/module/marker-dilog-bg.png') no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    .el-dialog__header{
        padding: 0!important;
    }
    .el-dialog__headerbtn{
        top: -2px;
        right: -5px;
    }
    .el-icon-close:before{
        font-size: 20px!important;
        color: #fff;
    }
    .el-dialog__body{
        padding: 0 20px!important;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: initial!important;
        
        box-sizing: border-box;
    }
    .marker-dialog-header{
        position: absolute;
        top: -40px;
        left:  20px;
        width: 240px;
        height: 28px;
        background-color: #fff;
        overflow: hidden;
        img{
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }
        .marker-dialog-title{
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
        }
    }
}
</style>