+
- ![]()
- ![]()
-
@@ -18,6 +21,9 @@
@@ -77,6 +103,7 @@ $height: 18.33em;
background-repeat: no-repeat;
justify-content: space-between;
}
+
.class-div{
position: absolute;
top: 8px;
@@ -94,6 +121,15 @@ $height: 18.33em;
right: $width * 9 / 297;
bottom: $height * 100 / 389;
}
+.name-label {
+ font-family: 'title',serif;
+ color: white;
+ text-transform:capitalize;
+ font-size: $width * 40 / 390;
+ position: absolute;
+ right: $width * 20 / 297;
+ bottom: $height * 70 / 389;
+}
.price-label {
color: black;
height: $height * 29 / 389;
@@ -105,12 +141,24 @@ $height: 18.33em;
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
margin-right: $width * 40 / 297;
margin-bottom: $width * 10 / 297;
}
.price-label span {
font-size: $width * 20 / 297;
}
+.price-label .price{
+ color: red;
+ margin-top: 9px;
+ text-shadow: black 0.1em 0.1em 0.2em
+}
+.price-label .price-old{
+ text-decoration:line-through;
+ font-size: $width * 15 / 297;
+ color: white;
+ text-shadow: black 0.1em 0.1em 0.2em
+}
.buy-icon {
width: $width * 44 / 297;
height: $height * 52 / 389;
@@ -118,4 +166,14 @@ $height: 18.33em;
margin-bottom: $height * 12 / 389;
}
+.gray {
+ -webkit-filter: grayscale(100%);
+ -moz-filter: grayscale(100%);
+ -ms-filter: grayscale(100%);
+ -o-filter: grayscale(100%);
+
+ filter: grayscale(100%);
+
+}
+
diff --git a/src/components/market/NftList.vue b/src/components/market/NftList.vue
index 79fe293..4a63834 100644
--- a/src/components/market/NftList.vue
+++ b/src/components/market/NftList.vue
@@ -25,7 +25,7 @@ export default class extends Vue {
created() {
for (let i = 0; i < 10; i++) {
- this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: '10', class: 0, repeat: false })
+ this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: 10, class: 0, repeat: false })
}
}
}
diff --git a/src/components/market/TopUserInfo.vue b/src/components/market/TopUserInfo.vue
index 739b2fd..dd6da0d 100644
--- a/src/components/market/TopUserInfo.vue
+++ b/src/components/market/TopUserInfo.vue
@@ -39,7 +39,6 @@
import { Component, Vue } from 'vue-property-decorator'
import { BlockChain } from '@/utils/blockchain'
import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
import { Message } from 'element-ui'
@Component({
@@ -58,11 +57,11 @@ export default class extends Vue {
}
get showAccount() {
- return UserModule.accountShow
+ return AppModule.accountShow
}
get account() {
- return UserModule.account
+ return AppModule.accountId
}
async disconnectWallet() {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 3cb93ce..217a984 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -11,6 +11,8 @@ export interface IAppState {
device: DeviceType
size: string
walletConnected: boolean
+ accountId?: string
+ chainId?: number
}
@Module({ dynamic: true, store, name: 'app' })
@@ -18,6 +20,8 @@ class App extends VuexModule implements IAppState {
public device = DeviceType.Desktop;
public size = getSize() || 'medium'
public walletConnected = false;
+ public accountId = ''
+ public chainId = 0
@Action
public ToggleDevice(device: DeviceType) {
@@ -34,6 +38,16 @@ class App extends VuexModule implements IAppState {
this.SET_WALLETSTATUS(val)
}
+ @Action
+ public updateAccount(val: string) {
+ this.UPDATE_ACCOUNT(val)
+ }
+
+ @Action
+ public updateChainID(val: number) {
+ this.UPDATE_CHAINID(val)
+ }
+
@Mutation
private TOGGLE_DEVICE(device: DeviceType) {
this.device = device
@@ -49,6 +63,26 @@ class App extends VuexModule implements IAppState {
private SET_WALLETSTATUS(val: boolean) {
this.walletConnected = val
}
+
+ @Mutation
+ private UPDATE_ACCOUNT(val: string) {
+ this.accountId = val
+ }
+
+ @Mutation
+ private UPDATE_CHAINID(val: number) {
+ this.chainId = val
+ }
+
+ public get accountShow() {
+ if (this.accountId.length >= 10) {
+ return this.accountId.substring(0, 8) + '...' + this.accountId.substring(this.accountId.length - 8)
+ } else if (this.accountId.length > 0 && this.accountId.length < 10) {
+ return this.accountId
+ } else {
+ return ''
+ }
+ }
}
export const AppModule = getModule(App)
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index e8bff24..4f5d7ba 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -146,14 +146,6 @@ class User extends VuexModule implements IUserState {
}
this.permissions = results
}
-
- public get accountShow() {
- if (this.account.length > 0) {
- return this.account.substring(0, 8) + '...' + this.account.substring(this.account.length - 8)
- } else {
- return ''
- }
- }
}
export const UserModule = getModule(User)
diff --git a/src/utils/SpineRender.ts b/src/utils/SpineRender.ts
index 9bdc085..1203942 100644
--- a/src/utils/SpineRender.ts
+++ b/src/utils/SpineRender.ts
@@ -5,9 +5,16 @@ export interface ISpineData {
name?: string
repeat?: boolean
scale?: number
- price?: string
- class?: number
+ class?: number|string
type?: number
+ price?: number
+ priceDiscount?: number
+ currency?: string
+ discount?: number
+ recordId?: string
+ coinAddress?: string
+ directBuy?: boolean
+ stopBuy?: boolean
}
export class SpineRender {
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index cde19f9..9481d65 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -2,7 +2,6 @@ import { singleton } from '@/decorators/singleton.decorator'
import WalletConnectProvider from '@walletconnect/web3-provider'
import Web3Modal, { isMobile } from 'web3modal'
import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
import Web3 from 'web3'
@singleton
@@ -51,9 +50,11 @@ export class BlockChain {
this.subscribeToEvents()
this.web3 = new Web3(
- 
- ![]()
+
- {{data.price}}
+ {{data.name}}
+
+
+
+
+ {{data.priceDiscount || data.price}} {{data.currency}}
+ {{data.price}} {{data.currency}}
+
- ![]()
+ ![]()