54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div class="token-input">
|
|
<div class="sarcrifice-from-input">
|
|
<input
|
|
@input="emit('update:modelValue', $event.target.value)"
|
|
v-model="props.modelValue"
|
|
:placeholder="0"
|
|
/>
|
|
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
|
|
</div>
|
|
<div class="value-adder">
|
|
<slot class="value-adder" name="message"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: Number,
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.sarcrifice-from-input
|
|
display: flex
|
|
margin-bottom: 8px
|
|
// height: 60px
|
|
input
|
|
width: 100%
|
|
height: 45px
|
|
font-size: 24px
|
|
border-radius: 16px
|
|
padding: 0 16px
|
|
@media (min-width: 992px)
|
|
font-size: 32px
|
|
height: auto
|
|
.value-adder
|
|
display: flex
|
|
gap: 8px
|
|
.stake-adder-step
|
|
padding: 4px 16px
|
|
color: var(--black)
|
|
font-size: 14px
|
|
border-width: 1px
|
|
border-color: transparent
|
|
border-style: solid
|
|
&:hover,&:active, &:focus
|
|
color: var(--white)
|
|
border-color: var(--white)
|
|
background-color: var(--black)
|
|
</style>
|