9 changed files with 237 additions and 12 deletions
@ -0,0 +1,73 @@
|
||||
<template> |
||||
<div class="get-domain"> |
||||
Get<br/> |
||||
<p class="domain">{{domain}}</p> |
||||
for<br/> |
||||
<span class="price"> |
||||
{{price}} |
||||
<img src="@/assets/icons/ton_bottom.svg" class="ton_img" alt="TON"/> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "GetDomainBtn", |
||||
props: { |
||||
domain: { |
||||
type: String, |
||||
required: true |
||||
}, |
||||
price: { |
||||
type: Number, |
||||
required: true |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* #0088cc rounded box with cursor: pointer */ |
||||
.get-domain { |
||||
border-radius: 1rem; |
||||
background-color: #0088cc; |
||||
color: white; |
||||
font-size: 1.5rem; |
||||
text-align: center; |
||||
padding: 2rem; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
@media only screen and (max-width: 800px) { |
||||
.get-domain { |
||||
width: 90vw; |
||||
/* allow multiple rows with 0.5 spacing */ |
||||
flex-wrap: wrap; |
||||
|
||||
} |
||||
} |
||||
|
||||
.domain { |
||||
font-family: 'Inconsolata', monospace; |
||||
font-weight: bold; |
||||
font-size: 2.5rem; |
||||
} |
||||
|
||||
@media only screen and (max-width: 800px) { |
||||
.domain { |
||||
font-size: 1.7rem; |
||||
} |
||||
} |
||||
|
||||
.price { |
||||
font-size: 3rem; |
||||
font-weight: bold; |
||||
font-family: 'Inconsolata', monospace; |
||||
} |
||||
|
||||
.price > img { |
||||
width: 2rem; |
||||
height: 2rem; |
||||
margin-left: -0.3rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,88 @@
|
||||
<template> |
||||
<div v-bind:style="styles" class="spinner spinner--rotate-square-2"></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
size: { |
||||
default: '40px' |
||||
}, |
||||
background: { |
||||
default: '#0000' |
||||
} |
||||
}, |
||||
computed: { |
||||
styles () { |
||||
return { |
||||
width: this.size, |
||||
height: this.size, |
||||
backgroundColor: this.background |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.spinner { |
||||
position: relative; |
||||
* { |
||||
line-height: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
&:before { |
||||
content: ''; |
||||
width: 100%; |
||||
height: 20%; |
||||
min-width: 5px; |
||||
background: #000; |
||||
opacity: 0.1; |
||||
position: absolute; |
||||
bottom: 0%; |
||||
left: 0; |
||||
border-radius: 50%; |
||||
animation: rotate-square-2-shadow .5s linear infinite; |
||||
} |
||||
&:after { |
||||
content: ''; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #834c6e; |
||||
animation: rotate-square-2-animate .5s linear infinite; |
||||
position: absolute; |
||||
bottom:40%; |
||||
left: 0; |
||||
border-radius: 3px; |
||||
} |
||||
} |
||||
|
||||
@keyframes rotate-square-2-animate { |
||||
17% { |
||||
border-bottom-right-radius: 3px; |
||||
} |
||||
25% { |
||||
transform: translateY(20%) rotate(22.5deg); |
||||
} |
||||
50% { |
||||
transform: translateY(40%) scale(1, .9) rotate(45deg); |
||||
border-bottom-right-radius: 50%; |
||||
} |
||||
75% { |
||||
transform: translateY(20%) rotate(67.5deg); |
||||
} |
||||
100% { |
||||
transform: translateY(0) rotate(90deg); |
||||
} |
||||
} |
||||
|
||||
|
||||
@keyframes rotate-square-2-shadow { |
||||
0%, 100% { |
||||
transform: scale(1, 1); |
||||
} |
||||
50% { |
||||
transform: scale(1.2, 1); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,46 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<div class="center"> |
||||
<DomainBar zone="" :value="query_" @search="search()" @input_d="query_ = $event"/> |
||||
<RotateSquare2 v-if="results === null"/> |
||||
<div v-for="result in results" :key="result"> |
||||
|
||||
</div> |
||||
</div> |
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script> |
||||
import DomainBar from "../components/DomainBar.vue"; |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import RotateSquare2 from "../components/RotateSquare2.vue"; |
||||
|
||||
export default { |
||||
name: "FindQ", |
||||
props: { |
||||
query: { |
||||
type: String, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
query_: this.query |
||||
} |
||||
}, |
||||
components: {RotateSquare2, DarkLayout, DomainBar}, |
||||
methods: { |
||||
search() { |
||||
this.$router.push({name: 'FindQ', params: {query: this.query_}}); |
||||
} |
||||
}, |
||||
computed: { |
||||
results() { |
||||
return []; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue