53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div class="hud-wrapper">
|
|
<div class="profile">
|
|
<img src="/assets/avatar/default/head.png" />
|
|
</div>
|
|
<div class="hud">
|
|
<div class="stats"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts"></script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/assets/scss/main';
|
|
|
|
.hud-wrapper {
|
|
position: relative;
|
|
.profile {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background-color: rgba($white, 0.8);
|
|
border-radius: 100%;
|
|
border: 2px solid $white;
|
|
z-index: 1;
|
|
img {
|
|
width: 2rem;
|
|
position: absolute;
|
|
left: calc(50% - 1rem);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
.hud {
|
|
position: absolute;
|
|
left: 2rem;
|
|
top: 2rem;
|
|
width: 15rem;
|
|
height: 5rem;
|
|
background-image: url('/assets/clouds.png');
|
|
background-position: center;
|
|
background-size: cover;
|
|
// background-color: rgba(127, 127, 127, 0.7);
|
|
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
|
|
border-radius: 1rem;
|
|
border: 2px solid $white;
|
|
}
|
|
}
|
|
</style>
|