40 lines
909 B
Vue
40 lines
909 B
Vue
<template>
|
|
<aside class="selection-sidebar">
|
|
<div class="info">
|
|
<div>Cells selected: <strong>{{ cellCount }}</strong></div>
|
|
<div>Price / cell: <strong>{{ pricePerCell }}</strong></div>
|
|
<div>Total: <strong>{{ total }}</strong></div>
|
|
</div>
|
|
<button class="btn" @click="$emit('open-upload')">Weiter</button>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
cellCount: { type: Number, default: 0 },
|
|
pricePerCell: { type: Number, default: 0 },
|
|
});
|
|
|
|
const total = computed(() => props.cellCount * props.pricePerCell);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.selection-sidebar {
|
|
width: 300px;
|
|
padding: 1rem;
|
|
border-left: 1px solid rgba(0,0,0,0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.btn {
|
|
background: #2563eb;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|