<template>
  <div class="w-phone">
    <div class="w-phone-content">
      <el-scrollbar height="var(--h)" @scroll="onscroll">
        <slot></slot>
      </el-scrollbar>
    </div>

  </div>
</template>

<script setup>
const emit = defineEmits(['scroll']);
const onscroll = (e)=>{
  emit("scroll",e);
}
</script>

<style lang="scss" scoped>
.w-phone {
  --w: var(--width, 390px);
  --h: var(--height, 800px);
  --b: var(--border, 10px);
  --br: var(--border-radius, 30px);
  --c: var(--color, #000);
  box-sizing: content-box;
  position: relative;
  width: var(--w);
  height: var(--h);
  border: solid var(--b) var(--c);
  border-radius: var(--br);
  overflow: visible;

  &-content {
    width: var(--w);
    height: var(--h);
    border: none;
    border-radius: calc(var(--br) - var(--b));
    overflow: hidden;
  }

  &::before,&::after {
    content: '';
    position: absolute;
    background-color: var(--c);
    right: calc(-3px - var(--b));
    width:  var(--b);
    border-radius: 5px;
    height: 60px;
    top: calc(var(--h) / 10 + var(--br));
  }

  &::after {
    height: 30px;
    top: calc(var(--h) / 10 + var(--br) + 80px);
  }
}
</style>