Profectus-Demo/src/components/features/MarkNode.vue

62 lines
1.3 KiB
Vue
Raw Normal View History

2021-06-12 04:38:16 +00:00
<template>
<div v-if="mark">
<div v-if="mark === true" class="mark star"></div>
<img v-else class="mark" :src="mark" />
</div>
2021-06-12 04:38:16 +00:00
</template>
2022-01-14 04:25:47 +00:00
<script setup lang="ts">
defineProps<{ mark: boolean | string | undefined }>();
2021-06-12 04:38:16 +00:00
</script>
<style scoped>
.mark {
position: absolute;
left: -25px;
top: -10px;
width: 30px;
height: 30px;
z-index: 1;
pointer-events: none;
2021-06-12 04:38:16 +00:00
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid transparent;
border-left: 0.3em solid transparent;
font-size: 10px;
}
.star {
left: -10px;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 0.3em solid transparent;
font-size: 10px;
pointer-events: none;
2021-06-12 04:38:16 +00:00
}
.star::before,
.star::after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0.6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 1em solid transparent;
transform: rotate(-35deg);
2021-06-12 04:38:16 +00:00
}
.star::after {
transform: rotate(35deg);
2021-06-12 04:38:16 +00:00
}
</style>