<template>
  <div v-show="visible" class="dialog-layout" >
    <div class="mark"/>
    <div class="dlalog">
      <img class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
      个人中心
      <Load>
        个人中心
      </Load>
    </div>
  </div>
</template>

<script>
import Load from '@/components/layout/load'
export default {
  components: {
    Load,
  },
  data() {
    const imagesList = [
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-sel.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/small-nor.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-nor.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2018.png', // 滑块
    ]
    return {
      visible: false,
    }
  },
  methods: {
    show() {
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped>

.dialog-layout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.3;
  }

  .dlalog {
    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png);
    background-size: 100% 100%;
    width: 620px;
    height: 350px;
    position: relative;
    .close {
      width: 34px;
      height: 34px;
      position: absolute;
      right: -17px;
      top: -17px;
      z-index: 1;
      border-radius: 100px;
      border: 3px solid white;
    }
  }
}

</style>
