66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div class="device">
|
|
<div class="device-title">PET EGG</div>
|
|
|
|
<div class="screen-wrapper">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<div class="btn"></div>
|
|
<div class="btn"></div>
|
|
<div class="btn"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 外殼 */
|
|
.device {
|
|
width: 448px;
|
|
height: 544px;
|
|
border-radius: 60% 60% 55% 55%;
|
|
background: radial-gradient(circle at 30% 0%, #ffe7ff, #ffc6f1);
|
|
box-shadow:
|
|
0 29px 64px rgba(0, 0, 0, 0.35),
|
|
inset 0 6px 16px rgba(255, 255, 255, 0.8);
|
|
padding-top: 61px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 29px;
|
|
}
|
|
|
|
.device-title {
|
|
font-size: 22px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
}
|
|
|
|
.screen-wrapper {
|
|
width: 336px;
|
|
height: 256px;
|
|
border-radius: 29px;
|
|
background: #888;
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
padding: 10px;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
gap: 26px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 20%, #fff8e7, #f3a3af);
|
|
box-shadow:
|
|
0 6px 0 #c26c7a,
|
|
0 6px 13px rgba(0, 0, 0, 0.35);
|
|
}
|
|
</style>
|