整合Box组件
This commit is contained in:
cebgcontract
parent
83b3215aac
commit
33c5df81bc
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="box-root">
|
||||
<div class="glow"></div>
|
||||
<img draggable="false"
|
||||
src="@/assets/market/box_01.png"
|
||||
alt="box"
|
||||
class="icon">
|
||||
<svg-icon name="normal_bg" class="header common"></svg-icon>
|
||||
|
||||
<div class="common"></div>
|
||||
<div class="background">
|
||||
<div class="name">
|
||||
<span class="spanName">Common box</span>
|
||||
</div>
|
||||
<div class="background">
|
||||
<div class="blur"></div>
|
||||
<img class="polygon"
|
||||
src="data:image/svg+xml,%3csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M24.424 1.22715C25.3646 0.684126 26.5234 0.684126 27.4639 1.22715L46.5006 12.218C47.4412 12.761 48.0206 13.7646 48.0206 14.8506V36.8323C48.0206 37.9183 47.4412 38.9219 46.5006 39.4649L27.4639 50.4558C26.5234 50.9988 25.3646 50.9988 24.4241 50.4558L5.38735 39.4649C4.44681 38.9219 3.86741 37.9183 3.86741 36.8323V14.8506C3.86741 13.7646 4.44681 12.761 5.38735 12.218L24.424 1.22715Z' fill='%235336D0'/%3e %3cg clip-path='url(%23clip0_2459_1131)'%3e %3cpath d='M19.8956 21.1501V24.1745H18.5994C18.141 24.1745 17.7014 24.3566 17.3773 24.6807C17.0532 25.0048 16.8711 25.4444 16.8711 25.9028V34.5441C16.8711 35.0024 17.0532 35.442 17.3773 35.7661C17.7014 36.0902 18.141 36.2723 18.5994 36.2723H32.4254C32.8838 36.2723 33.3234 36.0902 33.6475 35.7661C33.9716 35.442 34.1537 35.0024 34.1537 34.5441V25.9028C34.1537 25.4444 33.9716 25.0048 33.6475 24.6807C33.3234 24.3566 32.8838 24.1745 32.4254 24.1745H31.1292V21.1501C31.1292 19.6604 30.5375 18.2317 29.4841 17.1783C28.4307 16.125 27.0021 15.5332 25.5124 15.5332C24.0227 15.5332 22.594 16.125 21.5407 17.1783C20.4873 18.2317 19.8956 19.6604 19.8956 21.1501ZM22.0559 24.1745V21.1501C22.0559 20.2333 22.42 19.3541 23.0683 18.7059C23.7165 18.0577 24.5957 17.6935 25.5124 17.6935C26.4291 17.6935 27.3083 18.0577 27.9565 18.7059C28.6048 19.3541 28.9689 20.2333 28.9689 21.1501V24.1745H22.0559ZM23.7841 28.9272C23.7842 28.6278 23.862 28.3336 24.01 28.0733C24.158 27.813 24.3711 27.5957 24.6284 27.4425C24.8857 27.2894 25.1783 27.2057 25.4776 27.1997C25.777 27.1937 26.0728 27.2655 26.336 27.4082C26.5992 27.5509 26.8208 27.7595 26.9792 28.0136C27.1375 28.2677 27.2271 28.5586 27.2392 28.8577C27.2513 29.1569 27.1855 29.4541 27.0482 29.7201C26.9109 29.9862 26.7069 30.212 26.456 30.3755L26.4491 30.3798C26.4491 30.3798 26.6176 31.3995 26.8077 32.6006V32.6015C26.8077 32.7732 26.7395 32.9378 26.6182 33.0592C26.4968 33.1805 26.3322 33.2487 26.1605 33.2487H24.8626C24.6909 33.2487 24.5263 33.1805 24.4049 33.0592C24.2835 32.9378 24.2153 32.7732 24.2153 32.6015V32.6006L24.574 30.3798C24.3313 30.2232 24.1318 30.0082 23.9935 29.7546C23.8552 29.5011 23.7827 29.2169 23.7824 28.9281L23.7841 28.9272Z' fill='white'/%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0_2459_1131'%3e %3crect width='17.2826' height='20.7391' fill='white' transform='translate(16.8711 15.5332)'/%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
|
||||
<div class="title">
|
||||
<span class="spanTitle">COMING SOON</span>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span class="spanDescription">Stay tuned and enjoy new box soon!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: '',
|
||||
components: {
|
||||
}
|
||||
})
|
||||
export default class extends Vue {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../scss/breakpoints.scss';
|
||||
|
||||
.box-root {
|
||||
width: toEm(368px);
|
||||
height: toEm(470px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 3em;
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
top: 15%;
|
||||
bottom: 52%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
stroke: none;
|
||||
|
||||
&.common {
|
||||
fill: #4F62C4;
|
||||
}
|
||||
|
||||
&.epic {
|
||||
fill: #8C3DBA;
|
||||
}
|
||||
|
||||
&.legendary {
|
||||
fill: #874C32;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 75%;
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 79%;
|
||||
width: 93%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #0c0524;
|
||||
border-radius: toEm(8px);
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-end;
|
||||
|
||||
.polygon {
|
||||
height: toEm(59px);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: toEm(26px);
|
||||
.spanTitle {
|
||||
font-weight: bold;
|
||||
font-size: toEm(32px);
|
||||
line-height: 1.32;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: toEm(24px);
|
||||
.spanDescription {
|
||||
color: #c9c5db;
|
||||
font-weight: normal;
|
||||
font-size: toEm(16px);
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
.blur {
|
||||
background: #273dff;
|
||||
filter: blur(69px);
|
||||
height: toEm(158px);
|
||||
width: toEm(158px);
|
||||
margin-bottom: toEm(60px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Phone
|
||||
@include media('<=tablet') {
|
||||
.container {
|
||||
width: 318px;
|
||||
height: 406px;
|
||||
.header {
|
||||
top:10%
|
||||
}
|
||||
.background {
|
||||
.polygon {
|
||||
height: 50px;
|
||||
}
|
||||
.title {
|
||||
.spanTitle {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
.spanDescription {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -2,34 +2,51 @@
|
||||
<div class="box-root">
|
||||
<div class="glow" :class="boxData.level"></div>
|
||||
<img draggable="false"
|
||||
:src="require('@/assets/market/box_0'+boxData.id+'.png')"
|
||||
:src="require('@/assets/market/'+boxData.icon+'.png')"
|
||||
alt="box"
|
||||
class="icon">
|
||||
<svg-icon name="normal_bg" class="header" :class="boxData.level"></svg-icon>
|
||||
|
||||
<div :class="boxData.level"></div>
|
||||
<div class="background">
|
||||
<div class="background" v-if="boxData.open>0">
|
||||
<div class="name">
|
||||
<span class="spanName">Common box</span>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<div class="priceRow">
|
||||
<span class="title">Price</span>
|
||||
<div class="tokenPrice">
|
||||
<img draggable="false"
|
||||
src="@/assets/market/cec.png"
|
||||
alt="coin"
|
||||
class="cebgCoin">
|
||||
<span class="priceValue">1,000 </span>
|
||||
<span class="unit">THC</span></div>
|
||||
</div>
|
||||
<div class="fiatPrice">
|
||||
<span>$ 13.31 USD</span>
|
||||
</div>
|
||||
<div class="countDown">
|
||||
<span class="span">Price reloads in: <span class="countDownValue">37s</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<div class="priceRow">
|
||||
<span class="title">Price</span>
|
||||
<div class="tokenPrice">
|
||||
<img draggable="false"
|
||||
src="@/assets/market/cec.png"
|
||||
alt="coin"
|
||||
class="cebgCoin">
|
||||
<span class="priceValue">1,000 </span>
|
||||
<span class="unit">THC</span></div>
|
||||
</div>
|
||||
<div class="fiatPrice">
|
||||
<span>$ 13.31 USD</span>
|
||||
</div>
|
||||
<div class="countDown">
|
||||
<span class="span">Price reloads in: <span class="countDownValue">37s</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="background" v-if="boxData.open === 0">
|
||||
<div class="name">
|
||||
<span class="spanName">Common box</span>
|
||||
</div>
|
||||
<div class="background">
|
||||
<div class="blur"></div>
|
||||
<img class="polygon"
|
||||
alt = 'lock'
|
||||
src="data:image/svg+xml,%3csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M24.424 1.22715C25.3646 0.684126 26.5234 0.684126 27.4639 1.22715L46.5006 12.218C47.4412 12.761 48.0206 13.7646 48.0206 14.8506V36.8323C48.0206 37.9183 47.4412 38.9219 46.5006 39.4649L27.4639 50.4558C26.5234 50.9988 25.3646 50.9988 24.4241 50.4558L5.38735 39.4649C4.44681 38.9219 3.86741 37.9183 3.86741 36.8323V14.8506C3.86741 13.7646 4.44681 12.761 5.38735 12.218L24.424 1.22715Z' fill='%235336D0'/%3e %3cg clip-path='url(%23clip0_2459_1131)'%3e %3cpath d='M19.8956 21.1501V24.1745H18.5994C18.141 24.1745 17.7014 24.3566 17.3773 24.6807C17.0532 25.0048 16.8711 25.4444 16.8711 25.9028V34.5441C16.8711 35.0024 17.0532 35.442 17.3773 35.7661C17.7014 36.0902 18.141 36.2723 18.5994 36.2723H32.4254C32.8838 36.2723 33.3234 36.0902 33.6475 35.7661C33.9716 35.442 34.1537 35.0024 34.1537 34.5441V25.9028C34.1537 25.4444 33.9716 25.0048 33.6475 24.6807C33.3234 24.3566 32.8838 24.1745 32.4254 24.1745H31.1292V21.1501C31.1292 19.6604 30.5375 18.2317 29.4841 17.1783C28.4307 16.125 27.0021 15.5332 25.5124 15.5332C24.0227 15.5332 22.594 16.125 21.5407 17.1783C20.4873 18.2317 19.8956 19.6604 19.8956 21.1501ZM22.0559 24.1745V21.1501C22.0559 20.2333 22.42 19.3541 23.0683 18.7059C23.7165 18.0577 24.5957 17.6935 25.5124 17.6935C26.4291 17.6935 27.3083 18.0577 27.9565 18.7059C28.6048 19.3541 28.9689 20.2333 28.9689 21.1501V24.1745H22.0559ZM23.7841 28.9272C23.7842 28.6278 23.862 28.3336 24.01 28.0733C24.158 27.813 24.3711 27.5957 24.6284 27.4425C24.8857 27.2894 25.1783 27.2057 25.4776 27.1997C25.777 27.1937 26.0728 27.2655 26.336 27.4082C26.5992 27.5509 26.8208 27.7595 26.9792 28.0136C27.1375 28.2677 27.2271 28.5586 27.2392 28.8577C27.2513 29.1569 27.1855 29.4541 27.0482 29.7201C26.9109 29.9862 26.7069 30.212 26.456 30.3755L26.4491 30.3798C26.4491 30.3798 26.6176 31.3995 26.8077 32.6006V32.6015C26.8077 32.7732 26.7395 32.9378 26.6182 33.0592C26.4968 33.1805 26.3322 33.2487 26.1605 33.2487H24.8626C24.6909 33.2487 24.5263 33.1805 24.4049 33.0592C24.2835 32.9378 24.2153 32.7732 24.2153 32.6015V32.6006L24.574 30.3798C24.3313 30.2232 24.1318 30.0082 23.9935 29.7546C23.8552 29.5011 23.7827 29.2169 23.7824 28.9281L23.7841 28.9272Z' fill='white'/%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0_2459_1131'%3e %3crect width='17.2826' height='20.7391' fill='white' transform='translate(16.8711 15.5332)'/%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
|
||||
<div class="title">
|
||||
<span class="spanTitle">COMING SOON</span>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span class="spanDescription">Stay tuned and enjoy new box soon!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -38,7 +55,9 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
export interface IBoxData{
|
||||
level: string
|
||||
icon: string
|
||||
id: number
|
||||
open: number
|
||||
}
|
||||
@Component({
|
||||
name: 'OneBox',
|
||||
@ -118,8 +137,8 @@ export default class OneBox extends Vue {
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 15%;
|
||||
bottom: 52%;
|
||||
width: 100%;
|
||||
@ -218,6 +237,38 @@ export default class OneBox extends Vue {
|
||||
color: #fb9115;
|
||||
}
|
||||
}
|
||||
.polygon {
|
||||
height: toEm(59px);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: toEm(26px);
|
||||
.spanTitle {
|
||||
font-weight: bold;
|
||||
font-size: toEm(32px);
|
||||
line-height: 1.32;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: toEm(24px);
|
||||
.spanDescription {
|
||||
color: #c9c5db;
|
||||
font-weight: normal;
|
||||
font-size: toEm(16px);
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
.blur {
|
||||
background: #273dff;
|
||||
filter: blur(69px);
|
||||
height: toEm(158px);
|
||||
width: toEm(158px);
|
||||
margin-bottom: toEm(60px);
|
||||
}
|
||||
}
|
||||
|
||||
.inSale {
|
||||
|
||||
@ -20,8 +20,7 @@
|
||||
|
||||
</div>
|
||||
<div class="box-list">
|
||||
<one-box v-for="data in boxDatas" :key="data.level" :box-data="data"></one-box>
|
||||
<comming-box></comming-box>
|
||||
<one-box v-for="data in boxDatas" :key="data.id" :box-data="data"></one-box>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -34,11 +33,9 @@ import { Component, Vue } from 'vue-property-decorator'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import BaseFooter from '@/components/layout/BaseFooter.vue'
|
||||
import OneBox, { IBoxData } from '@/components/market/mall/OneBox.vue'
|
||||
import CommingBox from '@/components/market/mall/CommingBox.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
CommingBox,
|
||||
OneBox,
|
||||
BaseFooter,
|
||||
TopMenu
|
||||
@ -51,15 +48,27 @@ export default class Official extends Vue {
|
||||
private boxDatas: IBoxData[] = [
|
||||
{
|
||||
level: 'common',
|
||||
open: 1,
|
||||
icon: 'box_01',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
level: 'epic',
|
||||
open: 1,
|
||||
icon: 'box_02',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
level: 'legendary',
|
||||
open: 1,
|
||||
icon: 'box_03',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
level: 'legendary',
|
||||
icon: 'box_01',
|
||||
open: 0,
|
||||
id: 4
|
||||
}
|
||||
]
|
||||
|
||||
@ -209,6 +218,7 @@ export default class Official extends Vue {
|
||||
|
||||
.container {
|
||||
width: 375px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user