13 changed files with 398 additions and 42 deletions
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 106 KiB |
@ -0,0 +1,29 @@
|
||||
<template> |
||||
<button class="b darkish"> |
||||
<span><slot></slot></span> |
||||
<img src="@/assets/icons/ton_bottom.svg" alt="Next"/> |
||||
</button> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "TonButton" |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
button.b.darkish { |
||||
width: 4rem; |
||||
height: 2rem; |
||||
padding: 0.3rem; |
||||
font-family: 'Inconsolata', monospace; |
||||
font-weight: bold; |
||||
font-size: 1.15rem; |
||||
} |
||||
|
||||
button > img:not(:first-child) { |
||||
width: 0.8rem; |
||||
height: 0.8rem; |
||||
margin-left: 0.4rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,102 @@
|
||||
<template> |
||||
<!-- div with vertical centering flex --> |
||||
<div style="display: flex; align-items: center; place-items: center"> |
||||
<!-- |
||||
It's a table: |
||||
| | {icon @/assets/icons/buy.svg} | {icon @/assets/icons/instant_buy.svg} | |
||||
| ---------- | ---------------------------- | ------------------------------------- | |
||||
| {{'*' * zone.length_1 + zone.zone}} | <TonButton>{{zone.price_auction_1}}</TonButton> | <TonButton>{{zone.price_buy_1}}</TonButton> | |
||||
| {{'*' * zone.length_2 + zone.zone}} | <TonButton>{{zone.price_auction_2}}</TonButton> | <TonButton>{{zone.price_buy_2}}</TonButton> | |
||||
--> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th></th> |
||||
<th v-if="zone.canAuction()"> |
||||
<Popper content="Buy on auction" placement="left" hover="true" arrow="true"> |
||||
<img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/> |
||||
</Popper> |
||||
</th> |
||||
<th v-if="zone.canBuy()"> |
||||
<Popper content="Buy instantly" placement="right" hover="true" arrow="true"> |
||||
<img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/> |
||||
</Popper> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>{{ '*'.repeat(zone.length_1) + zone.zone }}</td> |
||||
<td v-if="zone.canAuction()"> |
||||
<TonButton>{{ zone.price_auction_1 }}</TonButton> |
||||
</td> |
||||
<td v-if="zone.canBuy()"> |
||||
<TonButton>{{ zone.price_buy_1 }}</TonButton> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{{ '*'.repeat(zone.length_2) + zone.zone }}</td> |
||||
<td v-if="zone.canAuction()"> |
||||
<TonButton>{{ zone.price_auction_2 }}</TonButton> |
||||
</td> |
||||
<td v-if="zone.canBuy()"> |
||||
<TonButton>{{ zone.price_buy_2 }}</TonButton> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<router-link :to="{name: 'Get', params: {domain: 'example' + zone.zone}}"> |
||||
<div v-if="has_get" class="get_b"> |
||||
Get |
||||
</div> |
||||
</router-link> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {Zone} from "../zone"; |
||||
import Popper from "vue3-popper"; |
||||
import TonButton from "./TonButton.vue"; |
||||
|
||||
export default { |
||||
name: "ZonePricing", |
||||
components: {TonButton, Popper}, |
||||
props: { |
||||
zone: { |
||||
type: Zone, |
||||
default: new Zone(".example.ton", 3, 5) |
||||
}, |
||||
// Whether to show the "Get" button |
||||
has_get: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
tr > td:first-child { |
||||
font-family: 'Inconsolata', monospace; |
||||
padding-right: 1rem; |
||||
padding-left: 3rem; |
||||
} |
||||
|
||||
tr > th { |
||||
padding-bottom: -10px; |
||||
} |
||||
|
||||
.buy_img { |
||||
margin-bottom: -15px; |
||||
} |
||||
|
||||
.get_b { |
||||
background-color: #e36464; |
||||
color: #363e5e; |
||||
border-radius: 0.5rem; |
||||
padding: 0.2rem 0.8rem; |
||||
margin-left: 0.9rem; |
||||
margin-top: 2.1rem; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue