77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<div class="phone-box">
|
|
<img class="phone-bg" src="@/public/simulator/ios-phone.png" alt="">
|
|
<div class="iphone-frame" :class="theme" id="capture-frame">
|
|
<slot></slot>
|
|
</div>
|
|
<div v-if="!isVip" class="watermark-overlay"></div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { storeToRefs } from 'pinia'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
defineProps({
|
|
theme: {
|
|
type: String,
|
|
default: 'light',
|
|
}
|
|
})
|
|
|
|
const userStore = useUserStore()
|
|
const { isVip } = storeToRefs(userStore)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$w: 375px;
|
|
|
|
.phone-box {
|
|
width: 395px;
|
|
height: 824px;
|
|
position: relative;
|
|
transform-origin: top center;
|
|
transform: scale(calc(285/395));
|
|
margin-bottom: calc(824px * (285 / 395) - 824px);
|
|
|
|
.iphone-frame {
|
|
position: relative;
|
|
width: 375px;
|
|
height: 812.98px;
|
|
border-radius: 40px;
|
|
background-color: var(--wx-bg-primary);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-bg {
|
|
position: absolute;
|
|
width: 395px;
|
|
height: 824px;
|
|
top: -6px;
|
|
left: -10px;
|
|
}
|
|
|
|
.watermark-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 375px;
|
|
height: 812.98px;
|
|
border-radius: 40px;
|
|
background-image: url('@/public/common/watermaker.png');
|
|
background-size: 125px 125px;
|
|
background-repeat: repeat;
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
}
|
|
|
|
}
|
|
</style>
|