

<script>
/* eslint-disable */
// sd-skip-auto-import
import components from"./_import-components/sd-phone-frame-import";var _render=function e(){var r=this,t=r._self._c;return t("div",{class:r.$style.wrapper},[t("div",{class:r.$style.inner},[t("div",{class:r.$style.notch}),t("div",{class:r.$style.homeBar}),r._t("default")],2)])};var staticRenderFns=[];_render._withStripped=true;export default{name:"SdPhoneFrame",components:components,data(){return{}},methods:{},render:_render,staticRenderFns:staticRenderFns};</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  box-sizing: content-box;
  width: 375px;
  height: 812px;
  overflow: hidden;
  background: #fdfdfd;
  border: 12px solid black;
  border-radius: 45px;
}
.inner {
  position: relative;
  height: 100%;
}
.notch {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: 210px;
  height: 30px;
  background: black;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
  transform: translateX(-50%);
  &::before {
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 8px;
    content: '';
    background: radial-gradient(
      circle at bottom right,
      transparent 0,
      transparent 70%,
      black 70%,
      black 100%
    );
  }
  &::after {
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 8px;
    content: '';
    background: radial-gradient(
      circle at bottom left,
      transparent 0,
      transparent 70%,
      black 70%,
      black 100%
    );
  }
}
.home-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: 1;
  width: 35%;
  height: 4px;
  content: '';
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  transform: translateX(-50%);
}
</style>
