103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<h1 class="flex items-center justify-center min-h-screen">
|
|
<atropos-component class="my-atropos">
|
|
<span class="game-box-t" />
|
|
<span class="game-box-r" />
|
|
<span class="game-box-b" />
|
|
<span class="game-box-l" />
|
|
<div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-60" data-atropos-offset="-8" />
|
|
<img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover">
|
|
<img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover">
|
|
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0">
|
|
<img src="/play.svg" width="20%" class="absolute play">
|
|
</atropos-component>
|
|
</h1>
|
|
</template>
|
|
|
|
<script setup>
|
|
const id = 'ES01A'
|
|
</script>
|
|
|
|
<style>
|
|
/* .atropos-inner,
|
|
.game-box-bg {
|
|
width: 300px;
|
|
height: 300px;
|
|
} */
|
|
|
|
.game-box-t,
|
|
.game-box-r,
|
|
.game-box-b,
|
|
.game-box-l {
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
/* display: none; */
|
|
}
|
|
|
|
.game-box-t {
|
|
width: calc(100% + 8px);
|
|
height: var(--side-size);
|
|
background: var(--side-color);
|
|
left: 0;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateX(90deg);
|
|
transform-origin: center top;
|
|
}
|
|
|
|
.game-box-b {
|
|
width: calc(100% + 8px);
|
|
height: var(--side-size);
|
|
background: var(--side-color);
|
|
left: 0;
|
|
bottom: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateX(-90deg);
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.game-box-r {
|
|
width: var(--side-size);
|
|
height: calc(100% + 16px);
|
|
background: var(--side-color);
|
|
right: -8px;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateY(90deg);
|
|
transform-origin: right center;
|
|
}
|
|
|
|
.game-box-l {
|
|
width: var(--side-size);
|
|
height: calc(100% + 16px);
|
|
background: var(--side-color);
|
|
left: 0px;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateY(-90deg);
|
|
transform-origin: left center;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 10.4%;
|
|
background: #a5a5a5;
|
|
left: 0;
|
|
top: 9px;
|
|
}
|
|
}
|
|
|
|
.atropos-rotate {
|
|
position: relative;
|
|
}
|
|
|
|
.atropos-rotate:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: calc(100% + 8px);
|
|
height: calc(100% + 16px);
|
|
top: -8px;
|
|
background: #086ef4;
|
|
z-index: 1;
|
|
}
|
|
</style> |