generated from VLADIMIR/template_frontend
57 lines
923 B
Vue
57 lines
923 B
Vue
<script setup lang="ts"></script>
|
|
|
|
<template>
|
|
<div class="plate-block">
|
|
<div class="metal-plate-block">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="pin pin-top-left"></div>
|
|
<div class="pin pin-top-right"></div>
|
|
<div class="pin pin-bottom-right"></div>
|
|
<div class="pin pin-bottom-left"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.plate-block {
|
|
box-shadow: 0 0 10px black;
|
|
position: relative;
|
|
}
|
|
|
|
.metal-plate-block {
|
|
background-image: url('@/assets/images/metal.png');
|
|
background-size: cover;
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.pin {
|
|
background-image: url('@/assets/images/pin.png');
|
|
background-size: cover;
|
|
height: 7px;
|
|
position: absolute;
|
|
width: 7px;
|
|
}
|
|
|
|
.pin-top-left {
|
|
left: 3px;
|
|
top: 3px;
|
|
}
|
|
|
|
.pin-top-right {
|
|
right: 3px;
|
|
top: 3px;
|
|
}
|
|
|
|
.pin-bottom-right {
|
|
bottom: 3px;
|
|
right: 3px;
|
|
}
|
|
|
|
.pin-bottom-left {
|
|
bottom: 3px;
|
|
left: 3px;
|
|
}
|
|
</style>
|