<template>
  <div>
    <!-- 成功获得奖品弹窗 -->
    <el-dialog class="Explore-dialog" :visible.sync="ruleDialogVisible" :modal="false" :before-close="ExploreDialog">
        <div class="top">
          <div class="top-title"></div>
          <div class="top-close" @click="ExploreDialog">
            <img src="./../../assets/common/CloseButton.png" alt="">
          </div>
        </div>
        <div class="content">
          <div class="points-title">{{ title }}</div>
          <div v-html="desc">
          </div>
        </div>
        <div class="btn" @click="ExploreDialog">Confirm</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    ruleDialogVisible: Boolean,
    title: String,
    desc: String,
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    ExploreDialog() {
      this.$emit('handleClose')
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  ::v-deep .el-dialog {
      border: 1px solid #924df2;
      // box-shadow: 0px 0px 20px #924df2;
      background: #1a1821;
      border-radius: 80px;
      padding: 0px 50px;
      .el-dialog__header {
        padding: 0;
      }
      .el-dialog__body {
        position: relative;
        color: #fff;
        .top {
          display: flex;
          
          .top-title {
            color: #fff;
            font-size: 28px;
            font-family: "Anton-Regular";
          }
          .top-close {
            position: absolute;
            top: -8%;
            right: -9%;
            width: 100px;
            height: 100px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .content {
          margin: 20px 0;
          line-height: 1.5;
          // height: 420px;
          .points-title {
            font-size: 28px;
            font-weight: 700;
            font-family: "Anton-Regular";
            text-align: center;
            margin-bottom: 20px;
          }
          div {
            width: 580px;
            text-align: left;
            margin: 0 auto;
          }
        }
        .btn {
          width: 200px;
          height: 50px;
          line-height: 50px;
          margin: 0 auto;
          color: #000;
          background: url('./../../assets/home/explore map button.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
}
</style>