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