将市场两个header合并
This commit is contained in:
cebgcontract
parent
5f1630a193
commit
f6d9cd77ac
25
package-lock.json
generated
25
package-lock.json
generated
@ -8651,7 +8651,9 @@
|
||||
"deepmerge": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/deepmerge/download/deepmerge-4.2.2.tgz",
|
||||
"integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU="
|
||||
"integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"default-gateway": {
|
||||
"version": "5.0.5",
|
||||
@ -11347,11 +11349,6 @@
|
||||
"rimraf": "2"
|
||||
}
|
||||
},
|
||||
"fullpage.js": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/fullpage.js/download/fullpage.js-3.1.2.tgz",
|
||||
"integrity": "sha1-7mKJ9S7bKp+cJdCcQCIEO3AdPMA="
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "http://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
|
||||
@ -19033,14 +19030,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-fullpage.js": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmmirror.com/vue-fullpage.js/download/vue-fullpage.js-0.1.7.tgz",
|
||||
"integrity": "sha1-YrxTlI8iF/sU6lVQIbE/uZe04UE=",
|
||||
"requires": {
|
||||
"fullpage.js": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -19149,14 +19138,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-meta": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-meta/-/vue-meta-2.4.0.tgz",
|
||||
"integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
|
||||
"requires": {
|
||||
"deepmerge": "^4.2.2"
|
||||
}
|
||||
},
|
||||
"vue-property-decorator": {
|
||||
"version": "9.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-property-decorator/download/vue-property-decorator-9.1.2.tgz",
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
"vue": "^2.6.11",
|
||||
"vue-class-component": "^7.2.3",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-fullpage.js": "^0.1.7",
|
||||
"vue-property-decorator": "^9.1.2",
|
||||
"vue-router": "^3.2.0",
|
||||
"vue-youtube-embed": "^2.2.2",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<header class="header fixed">
|
||||
<div class="logo">
|
||||
<img src="@/assets/main/p1/icon_logo_t.png">
|
||||
<img src="@/assets/main/p1/icon_logo_t.png" alt="logo">
|
||||
</div>
|
||||
<ul class="menu-list">
|
||||
<li :class="{'active': currentSection === 'home'}"><a href="/">Home</a></li>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="filter-item">
|
||||
<div class="check-box hide">
|
||||
<div class="check-box" :class="{'hide': !checked}" @click="onClick">
|
||||
<img
|
||||
class="check hide"
|
||||
src="data:image/svg+xml,%3csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.3332 1L4.99984 8.33333L1.6665 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e %3c/svg%3e"
|
||||
class="check"
|
||||
:class="{'hide': !checked}"
|
||||
:src="img"
|
||||
/>
|
||||
</div>
|
||||
<span class="label">{{name}}</span>
|
||||
@ -17,8 +18,16 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
components: {
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
export default class FilterItem extends Vue {
|
||||
@Prop() private name!: string;
|
||||
@Prop() private checked?: boolean
|
||||
get img() {
|
||||
return 'data:image/svg+xml,%3csvg width=\'14\' height=\'10\' viewBox=\'0 0 14 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e %3cpath d=\'M12.3332 1L4.99984 8.33333L1.6665 5\' stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3e %3c/svg%3e'
|
||||
}
|
||||
|
||||
private onClick() {
|
||||
this.$emit('check-state-change', !this.checked)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mobile-header" style="">
|
||||
<a href="/"
|
||||
><img
|
||||
class="logo"
|
||||
src="@/assets/main/p1/icon_logo_b.png"
|
||||
/></a>
|
||||
<label class="mobile-menu-icon" @click="toggleMenu">
|
||||
<img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
|
||||
</div>
|
||||
<div class="nav overflow" :class="{'show': menuShow}">
|
||||
<a class="navItem" href="/">Home</a>
|
||||
<a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
|
||||
<a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
|
||||
<label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
|
||||
<!-- <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">-->
|
||||
<!-- <span>Connect Wallet</span>-->
|
||||
<!-- </button>-->
|
||||
<!-- <label class="navItem contact">Contact us</label>-->
|
||||
<!-- <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">-->
|
||||
<!-- <div>My Profile</div>-->
|
||||
<!-- <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">-->
|
||||
<!-- </label>-->
|
||||
<label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
|
||||
<div class="navChild" :class="{'show': subShow}">
|
||||
<label class="navItem profile" @click="subShow=!subShow">
|
||||
<img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
|
||||
<div class="lbl">My Profile</div>
|
||||
</label>
|
||||
<label class="navItem">Inventory</label>
|
||||
<label class="navItem">Account Setting</label>
|
||||
<label class="navItem">Wallet</label>
|
||||
<label class="navItem contact">Contact us</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
import ChainManager from '@/utils/ChainManager'
|
||||
|
||||
@Component({
|
||||
name: 'MobileTop',
|
||||
components: {
|
||||
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
menuShow = false
|
||||
subShow = false
|
||||
chainManager = new ChainManager()
|
||||
|
||||
get walletCollected() {
|
||||
return AppModule.walletConnected
|
||||
}
|
||||
|
||||
async created() {
|
||||
await this.chainManager.init()
|
||||
}
|
||||
|
||||
get logined() {
|
||||
return !!UserModule.token && !!AppModule.step
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.menuShow = !this.menuShow
|
||||
if (!this.menuShow) {
|
||||
this.subShow = false
|
||||
}
|
||||
}
|
||||
|
||||
async collectToWallet() {
|
||||
this.menuShow = false
|
||||
return this.chainManager.login()
|
||||
}
|
||||
|
||||
async disconnectWallet() {
|
||||
this.menuShow = false
|
||||
return this.chainManager.logout()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (max-width: 767px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(20,16,59,.8);
|
||||
box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
|
||||
backdrop-filter: blur(5em);
|
||||
z-index: 18;
|
||||
height: 4.75em;
|
||||
position: fixed;
|
||||
padding: 0 5%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
max-width: 50vw;
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
|
||||
}
|
||||
.nav {
|
||||
width: 292px;
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
background: #261858;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
transform: translateX(100%);
|
||||
display: flex;
|
||||
z-index: 17;
|
||||
opacity: 0;
|
||||
transition: transform linear 0.2s, opacity linear 0.2s;
|
||||
padding: 1.5em 1.5em;
|
||||
padding-top: 4.75em;
|
||||
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
|
||||
&.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
&.show{
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.connectButton {
|
||||
width: 100%;
|
||||
border-radius: 0.25em;
|
||||
background: radial-gradient(
|
||||
123.41% 70.85% at 47.63% 49.99%,
|
||||
#558ada 0%,
|
||||
#1b68db 100%
|
||||
) !important;
|
||||
cursor: pointer;
|
||||
height: 2.75em !important;
|
||||
padding: 0 1.688em;
|
||||
font-size: 1.125em !important;
|
||||
&.mobile {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.navItem {
|
||||
font-weight: bold;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #ffffff;
|
||||
padding: 1.5em 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #3d2a84;
|
||||
}
|
||||
|
||||
&.contact {
|
||||
border-top: none;
|
||||
color: #a796e1;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.profile {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
&.dash {
|
||||
border-bottom: 1px solid #3d2a84;
|
||||
}
|
||||
}
|
||||
|
||||
.navChild {
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding-top: 4.75em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #261858;
|
||||
// transition: transform linear 0.15s;
|
||||
&.show {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.navItem {
|
||||
font-weight: bold;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #ffffff;
|
||||
padding: 1.5em 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #3d2a84;
|
||||
}
|
||||
|
||||
&.contact {
|
||||
border-top: none;
|
||||
color: #a796e1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.profile {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.arrowIcon {
|
||||
transform: rotate(180deg);
|
||||
margin-right: 1.188em;
|
||||
}
|
||||
.lbl {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ipCkProfile {
|
||||
display: none;
|
||||
&:checked {
|
||||
~ .navChild {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="content" :class="{'collapsed': !rarityShow}">
|
||||
<div class="row">
|
||||
<filter-item name="Common"></filter-item>
|
||||
<filter-item name="Common" :checked="true"></filter-item>
|
||||
<filter-item name="Epic"></filter-item>
|
||||
<filter-item name="Legendary"></filter-item>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="top-header" style="">
|
||||
<div class="top-header" v-if="!mobile" style="">
|
||||
<div class="viewLogo">
|
||||
<a href="/">
|
||||
<img
|
||||
class="logo"
|
||||
alt="logo"
|
||||
src="@/assets/main/p1/icon_logo_b.png" />
|
||||
src="@/assets/main/p1/icon_logo_t.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<a class="menu-item" href="/">
|
||||
<div class="item" >
|
||||
Home
|
||||
</div>
|
||||
<div class="item" >Home</div>
|
||||
</a>
|
||||
<a class="menu-item" href="" @click.stop="comingSoon">
|
||||
<div class="item" :class="{'active': currentTab==='official'}">
|
||||
@ -54,13 +52,47 @@
|
||||
v-show="infoPanelShow && logined"
|
||||
v-on:close-self="onClose"
|
||||
></top-user-info>
|
||||
<div class="mobile-header" v-if="mobile" style="">
|
||||
<a href="/"
|
||||
><img
|
||||
class="logo"
|
||||
src="@/assets/main/p1/icon_logo_t.png"
|
||||
/></a>
|
||||
<label class="mobile-menu-icon" @click="toggleMenu">
|
||||
<img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
|
||||
</div>
|
||||
<div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
|
||||
<a class="navItem" href="/">Home</a>
|
||||
<a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
|
||||
<a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
|
||||
<label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
|
||||
<!-- <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">-->
|
||||
<!-- <span>Connect Wallet</span>-->
|
||||
<!-- </button>-->
|
||||
<!-- <label class="navItem contact">Contact us</label>-->
|
||||
<!-- <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">-->
|
||||
<!-- <div>My Profile</div>-->
|
||||
<!-- <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">-->
|
||||
<!-- </label>-->
|
||||
<label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
|
||||
<div class="navChild" :class="{'show': subShow}">
|
||||
<label class="navItem profile" @click="subShow=!subShow">
|
||||
<img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
|
||||
<div class="lbl">My Profile</div>
|
||||
</label>
|
||||
<label class="navItem">Inventory</label>
|
||||
<label class="navItem">Account Setting</label>
|
||||
<label class="navItem">Wallet</label>
|
||||
<label class="navItem contact">Contact us</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import TopUserInfo from '@/components/market/TopUserInfo.vue'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { AppModule, DeviceType } from '@/store/modules/app'
|
||||
import ChainManager from '@/utils/ChainManager'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
|
||||
@ -77,7 +109,12 @@ declare module 'vue/types/vue' {
|
||||
})
|
||||
export default class extends Vue {
|
||||
infoPanelShow = false
|
||||
menuShow = false
|
||||
subShow = false
|
||||
chainManager = new ChainManager()
|
||||
get mobile() {
|
||||
return AppModule.device === DeviceType.Mobile
|
||||
}
|
||||
|
||||
async created() {
|
||||
await this.chainManager.init()
|
||||
@ -95,6 +132,13 @@ export default class extends Vue {
|
||||
return this.chainManager.logout()
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.menuShow = !this.menuShow
|
||||
if (!this.menuShow) {
|
||||
this.subShow = false
|
||||
}
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.infoPanelShow = false
|
||||
}
|
||||
@ -235,7 +279,162 @@ export default class extends Vue {
|
||||
background-position: 0 17px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(20,16,59,.8);
|
||||
box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
|
||||
backdrop-filter: blur(5em);
|
||||
z-index: 18;
|
||||
height: 4.75em;
|
||||
position: fixed;
|
||||
padding: 0 5%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
max-width: 15vw;
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
|
||||
}
|
||||
.nav {
|
||||
width: 292px;
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
background: #261858;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
transform: translateX(100%);
|
||||
display: flex;
|
||||
z-index: 17;
|
||||
opacity: 0;
|
||||
transition: transform linear 0.2s, opacity linear 0.2s;
|
||||
padding: 1.5em 1.5em;
|
||||
padding-top: 4.75em;
|
||||
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
|
||||
&.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
&.show{
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.connectButton {
|
||||
width: 100%;
|
||||
border-radius: 0.25em;
|
||||
background: radial-gradient(
|
||||
123.41% 70.85% at 47.63% 49.99%,
|
||||
#558ada 0%,
|
||||
#1b68db 100%
|
||||
) !important;
|
||||
cursor: pointer;
|
||||
height: 2.75em !important;
|
||||
padding: 0 1.688em;
|
||||
font-size: 1.125em !important;
|
||||
&.mobile {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.navItem {
|
||||
font-weight: bold;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #ffffff;
|
||||
padding: 1.5em 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #3d2a84;
|
||||
}
|
||||
|
||||
&.contact {
|
||||
border-top: none;
|
||||
color: #a796e1;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.profile {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
&.dash {
|
||||
border-bottom: 1px solid #3d2a84;
|
||||
}
|
||||
}
|
||||
|
||||
.navChild {
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding-top: 4.75em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #261858;
|
||||
// transition: transform linear 0.15s;
|
||||
&.show {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.navItem {
|
||||
font-weight: bold;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5em;
|
||||
color: #ffffff;
|
||||
padding: 1.5em 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #3d2a84;
|
||||
}
|
||||
|
||||
&.contact {
|
||||
border-top: none;
|
||||
color: #a796e1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.profile {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.arrowIcon {
|
||||
transform: rotate(180deg);
|
||||
margin-right: 1.188em;
|
||||
}
|
||||
.lbl {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ipCkProfile {
|
||||
display: none;
|
||||
&:checked {
|
||||
~ .navChild {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<mobile-top class="mobile-top"></mobile-top>
|
||||
<top-menu class="desk-top"></top-menu>
|
||||
<div class="root">
|
||||
<nft-detail :data="nftData"></nft-detail>
|
||||
@ -12,7 +11,6 @@
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import ItemDetail from '@/components/market/ItemDetail.vue'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import MobileTop from '@/components/market/MoileTop.vue'
|
||||
import NftDetail from '@/components/market/NftDetail.vue'
|
||||
import { INftAttr, ISpineData } from '@/utils/SpineRender'
|
||||
import { defaultINftAttr, getNftDetail } from '@/api/Mall'
|
||||
@ -21,7 +19,6 @@ import { AppModule } from '@/store/modules/app'
|
||||
@Component({
|
||||
components: {
|
||||
NftDetail,
|
||||
MobileTop,
|
||||
ItemDetail,
|
||||
TopMenu
|
||||
}
|
||||
@ -108,9 +105,7 @@ export default class Item extends Vue {
|
||||
.mobile-top {
|
||||
display: block;
|
||||
}
|
||||
.desk-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@include media('>=desktop', '<wide'){
|
||||
.root {
|
||||
@ -153,9 +148,6 @@ export default class Item extends Vue {
|
||||
.mobile-top {
|
||||
display: block;
|
||||
}
|
||||
.desk-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show{
|
||||
display: flex!important;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<mobile-top class="mobile-top"></mobile-top>
|
||||
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
||||
<section class="root">
|
||||
<div class="container">
|
||||
@ -16,11 +15,9 @@ import { Component, Vue } from 'vue-property-decorator'
|
||||
import SearchPanel from '@/components/market/SearchPanel.vue'
|
||||
import SearchResult from '@/components/market/SearchResult.vue'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import MobileTop from '@/components/market/MoileTop.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
MobileTop,
|
||||
SearchResult,
|
||||
SearchPanel,
|
||||
TopMenu
|
||||
@ -125,12 +122,6 @@ export default class Market extends Vue {
|
||||
.searchResult {
|
||||
padding: 26px 20px;
|
||||
}
|
||||
.mobile-top {
|
||||
display: block;
|
||||
}
|
||||
.desk-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show{
|
||||
display: flex!important;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<mobile-top class="mobile-top"></mobile-top>
|
||||
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
||||
<section class="root">
|
||||
<div class="container">
|
||||
@ -15,7 +14,6 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import SearchPanel from '@/components/market/SearchPanel.vue'
|
||||
import SearchResult from '@/components/market/SearchResult.vue'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import MobileTop from '@/components/market/MoileTop.vue'
|
||||
import NftList from '@/components/market/NftList.vue'
|
||||
import { INftAttr, ISpineData } from '@/utils/SpineRender'
|
||||
import { getNftList } from '@/api/Mall'
|
||||
@ -24,7 +22,6 @@ import { AppModule } from '@/store/modules/app'
|
||||
@Component({
|
||||
components: {
|
||||
NftList,
|
||||
MobileTop,
|
||||
SearchResult,
|
||||
SearchPanel,
|
||||
TopMenu
|
||||
@ -187,12 +184,6 @@ export default class MyNft extends Vue {
|
||||
.searchResult {
|
||||
padding: 26px 20px;
|
||||
}
|
||||
.mobile-top {
|
||||
display: block;
|
||||
}
|
||||
.desk-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show{
|
||||
display: flex!important;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<mobile-top class="mobile-top"></mobile-top>
|
||||
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
||||
<section class="root">
|
||||
<div class="container">
|
||||
@ -15,13 +14,11 @@ import { Component, Vue } from 'vue-property-decorator'
|
||||
import SearchPanel from '@/components/market/SearchPanel.vue'
|
||||
import SearchResult from '@/components/market/SearchResult.vue'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import MobileTop from '@/components/market/MoileTop.vue'
|
||||
import NftList from '@/components/market/NftList.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
NftList,
|
||||
MobileTop,
|
||||
SearchResult,
|
||||
SearchPanel,
|
||||
TopMenu
|
||||
@ -129,10 +126,6 @@ export default class Official extends Vue {
|
||||
.mobile-top {
|
||||
display: block;
|
||||
}
|
||||
.desk-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show{
|
||||
display: flex!important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user