66 lines
1.2 KiB
Vue
66 lines
1.2 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: 280px;
|
||
|
|
height: 340px;
|
||
|
|
border-radius: 60% 60% 55% 55%;
|
||
|
|
background: radial-gradient(circle at 30% 0%, #ffe7ff, #ffc6f1);
|
||
|
|
box-shadow:
|
||
|
|
0 18px 40px rgba(0, 0, 0, 0.35),
|
||
|
|
inset 0 4px 10px rgba(255, 255, 255, 0.8);
|
||
|
|
padding-top: 38px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.device-title {
|
||
|
|
font-size: 14px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-wrapper {
|
||
|
|
width: 210px;
|
||
|
|
height: 160px;
|
||
|
|
border-radius: 18px;
|
||
|
|
background: #888;
|
||
|
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 16px;
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle at 30% 20%, #fff8e7, #f3a3af);
|
||
|
|
box-shadow:
|
||
|
|
0 4px 0 #c26c7a,
|
||
|
|
0 4px 8px rgba(0, 0, 0, 0.35);
|
||
|
|
}
|
||
|
|
</style>
|