8 changed files with 187 additions and 24 deletions
@ -0,0 +1,86 @@
|
||||
<template> |
||||
<!-- a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e --> |
||||
<table class="table_outer"> |
||||
<thead class="table_header"> |
||||
<tr> |
||||
<th>Domain</th> |
||||
<th>Terms</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody class="table_content"> |
||||
<tr v-for="zone in zones" :key="zone.zone"> |
||||
<td> |
||||
<router-link :to="{name: 'Find' /*todo: specify zone here*/}" style="color: white"> |
||||
{{ zone.zone }} |
||||
</router-link> |
||||
</td> |
||||
<td></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</template> |
||||
|
||||
<script> |
||||
import {Zone} from "../zone"; |
||||
|
||||
export default { |
||||
name: "ZoneTable", |
||||
props: { |
||||
zones: { |
||||
type: Array[Zone], |
||||
default: [new Zone(".example.ton", 3, 5), new Zone(".agorata.ton", 3, 5)] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* |
||||
We want a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e |
||||
|
||||
The outer rounded box is table_outer |
||||
The inner box is table_content, it takes all of the space except for the header |
||||
*/ |
||||
.table_outer { |
||||
border-radius: 1rem; |
||||
min-height: 5rem; |
||||
background-color: #4e5a88; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
min-width: max(30rem, 50vw); |
||||
} |
||||
|
||||
.table_header { |
||||
padding: 0.5rem 1.3rem; |
||||
} |
||||
|
||||
thead > tr { |
||||
display: flex; |
||||
} |
||||
|
||||
tr > :last-child { /* place it on the right */ |
||||
justify-content: flex-end; |
||||
text-align: center; |
||||
width: 100%; |
||||
} |
||||
|
||||
tr > th:first-child { |
||||
text-align: center; |
||||
} |
||||
|
||||
tr > :first-child { /* place it on the left */ |
||||
text-align: left; |
||||
} |
||||
|
||||
tr:not(:first-child) > td { |
||||
border-top: 2px solid white; |
||||
} |
||||
|
||||
.table_content { |
||||
background-color: #363e5e; |
||||
border-radius: 1rem; |
||||
padding: 1rem; |
||||
min-height: 10rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,31 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<DomainBar/> |
||||
<ZoneTable/> |
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script> |
||||
import DomainBar from "../components/DomainBar.vue"; |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import ZoneTable from "../components/ZoneTable.vue"; |
||||
|
||||
export default { |
||||
name: "Find", |
||||
props: { |
||||
default_domain: { |
||||
type: String, |
||||
default: "example" |
||||
}, |
||||
zone: { |
||||
type: String, |
||||
default: ".ton" |
||||
} |
||||
}, |
||||
components: {ZoneTable, DarkLayout, DomainBar} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,27 @@
|
||||
/* Define type Zone with the string zone (like .example.ton) and terms (prices with different conditions) */ |
||||
export class Zone { |
||||
zone: string; |
||||
min_length: number; |
||||
length_1: number; |
||||
length_2: number; |
||||
price_buy_1?: number; |
||||
price_buy_2?: number; |
||||
price_auction_1?: number; |
||||
price_auction_2?: number; |
||||
|
||||
constructor(zone: string, |
||||
price_buy_1?: number, price_buy_2?: number, price_auction_1?: number, price_auction_2?: number, |
||||
min_length: number = 2, length_1: number = 3, length_2: number = 8 |
||||
) { |
||||
this.zone = zone; |
||||
this.min_length = min_length; |
||||
this.length_1 = length_1; |
||||
this.length_2 = length_2; |
||||
this.price_buy_1 = price_buy_1; |
||||
this.price_buy_2 = price_buy_2; |
||||
this.price_auction_1 = price_auction_1; |
||||
this.price_auction_2 = price_auction_2; |
||||
} |
||||
|
||||
|
||||
} |
||||
Loading…
Reference in new issue