修改样式细节
This commit is contained in:
yuyongdong
parent
e0e11a7a4b
commit
1220c32c3a
@ -4,10 +4,10 @@ VUE_APP_BASE_API2='https://invitation.counterfire.games'
|
||||
VUE_APP_GPAL_API='https://game2006api.cebggame.com/'
|
||||
# VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-test-8c2FAlWxWAoRITk1v9rH
|
||||
VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-test-eRr-kyOKaZ0jIdrvrPCn
|
||||
VUE_APP_PASSPORT_REDIRECT_URI=https://market.kingsome.cn
|
||||
VUE_APP_PASSPORT_LOGOUT_URI=https://market.kingsome.cn
|
||||
VUE_APP_PASSPORT_CLIENT_ID=eTmUah69p7ZdRhRYzBta6lZRKXXeXDYj
|
||||
# VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
|
||||
VUE_APP_PASSPORT_REDIRECT_URI=http://localhost:4000
|
||||
VUE_APP_PASSPORT_LOGOUT_URI=http://localhost:4000
|
||||
# VUE_APP_PASSPORT_CLIENT_ID=eTmUah69p7ZdRhRYzBta6lZRKXXeXDYj
|
||||
VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
|
||||
VUE_APP_PASSPORT_MARKET_ADDRESS=0x7d117aA8BD6D31c4fa91722f246388f38ab1942c
|
||||
VUE_APP_MKT_API='https://market-test.kingsome.cn'
|
||||
VUE_APP_NET_ID='13473'
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite --host --mode dev",
|
||||
"task": "vite --host --mode dev",
|
||||
"dev": "vite --host --mode development",
|
||||
"build:task": "vite build --mode dev",
|
||||
"build:dev": "vite build --mode development",
|
||||
"build:test": "vite build --mode test",
|
||||
|
||||
BIN
src/assets/img/marketplace/Icon_!.png
Normal file
BIN
src/assets/img/marketplace/Icon_!.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -14,8 +14,6 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, toRaw } from "vue";
|
||||
import { BlockChain } from "@/components/chain/BlockChain"
|
||||
// const passProd = ref(new PassportWallet())
|
||||
const props = defineProps({
|
||||
loadingDialogVisible: {
|
||||
type: Boolean,
|
||||
@ -29,17 +27,6 @@ const handleOk = (e) => {
|
||||
emit('handleClose')
|
||||
};
|
||||
|
||||
|
||||
const buyConfirm = async () => {
|
||||
const bc = new BlockChain()
|
||||
let ids = []
|
||||
ids.push(toRaw(props.buyDataArr)[0].nft.token_id)
|
||||
// console.log(ids)
|
||||
// return
|
||||
let res = await bc.market.beginBuy(toRaw(props.buyDataArr)[0].nft.token_id)
|
||||
console.log('购买', res)
|
||||
}
|
||||
|
||||
const handleCancel = (e) => {
|
||||
emit('handleClose')
|
||||
}
|
||||
@ -51,7 +38,8 @@ emit('handleClose')
|
||||
:deep(.buyDia) {
|
||||
width: 500px !important;
|
||||
color: #fff;
|
||||
top: 50%;
|
||||
// top: 50%;
|
||||
margin-top: 500px;
|
||||
.ant-modal-content {
|
||||
padding: 0px;
|
||||
background: rgba(0,0,0,0);
|
||||
|
||||
@ -124,12 +124,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- <LoadingDialog :loadingDialogVisible="loadingDialogVisible" /> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref, toRaw, onMounted, inject} from "vue";
|
||||
const message = inject("$message");
|
||||
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
|
||||
// import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
|
||||
import {priceCalculated, timeFormat, royaltiesPrice, feePrice, totalPrice} from "@/configs/priceCalculate.js";
|
||||
import {BlockChain} from "@/components/chain/BlockChain";
|
||||
const props = defineProps({
|
||||
@ -147,6 +149,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["handleClose"]);
|
||||
const loadingDialogVisible = ref(false)
|
||||
const optionsDay = ref([
|
||||
{
|
||||
value: "86400000",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="assets-user">
|
||||
<div class="assets-user-img" :style="{background: bgCor[bgCorFloor]}">
|
||||
<img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
|
||||
<img src="./../../assets/img/marketplace/0000.png" alt="Dynamic Image">
|
||||
<img v-else src="./../../assets/img/marketplace/0000.png" alt="Dynamic Image">
|
||||
</div>
|
||||
<div class="assets-user-name">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
|
||||
<div>
|
||||
|
||||
@ -130,8 +130,6 @@ const addCart = async (val) => {
|
||||
message.error('already in the shopping cart')
|
||||
return
|
||||
}
|
||||
console.log(val, res)
|
||||
return
|
||||
const currency = res.data[0].event?.data?.buy[0].contract_address || ''
|
||||
const type = res.data[0].event?.data?.buy[0].item_type || ''
|
||||
const currentCurrency = val.event?.data?.buy[0].contract_address || ''
|
||||
|
||||
@ -1,356 +0,0 @@
|
||||
<template>
|
||||
<div class="mkt-content">
|
||||
<div class="mkt-content-left">
|
||||
<OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
|
||||
<Sort @clickSortChild="sortChild" />
|
||||
<Price @clickPriceChild="priceChild" />
|
||||
<h2>Type</h2>
|
||||
<Hero :heroValue="marketplaceList.hero" @clickHeroChild="heroChild" />
|
||||
<Rank @clickRankChild="rankChild" />
|
||||
<Gold @clickGoldChild="goldChild" />
|
||||
</div>
|
||||
<div class="mkt-content-right">
|
||||
<div class="mkt-content-right-header">
|
||||
<div class="bg-cor"></div>
|
||||
<div class="results-total"><span v-if="nftList">{{ nftList.length }}</span><span v-else>0 </span> Results</div>
|
||||
<div class="search-list">
|
||||
<li v-if="marketplaceList.overview">
|
||||
<span>Overview: </span>
|
||||
<span>{{ marketplaceList.overview }}</span>
|
||||
<span v-if="marketplaceList.overview" @click="clearOverviewAll">×</span>
|
||||
</li>
|
||||
<li v-if="marketplaceList.sort">
|
||||
<span>Sort By: </span>
|
||||
<span>{{ marketplaceList.sort == '-1' ? 'From low to high' : 'From high to low'}}</span>
|
||||
<span v-if="marketplaceList.sort" @click="clearSortAll">×</span>
|
||||
</li>
|
||||
<li v-if="marketplaceList.minPrice || marketplaceList.maxPrice">
|
||||
<span>Price: </span>
|
||||
<span v-if="!marketplaceList.maxPrice">{{ `>` }}</span>
|
||||
<span>{{ marketplaceList.minPrice }}</span>
|
||||
<span v-if="marketplaceList.minPrice && marketplaceList.maxPrice">~</span>
|
||||
<span v-if="!marketplaceList.minPrice">{{ `<` }}</span>
|
||||
<span>{{ marketplaceList.maxPrice }}</span>
|
||||
<span v-if="marketplaceList.minPrice || marketplaceList.maxPrice" @click="clearPriceAll">×</span>
|
||||
</li>
|
||||
<li v-if="marketplaceList.hero.length != undefined && marketplaceList.hero.length > 0">
|
||||
<span v-if="marketplaceList.hero.length != undefined && marketplaceList.hero.length > 0">Hero: </span>
|
||||
<span v-for="(item,index) in marketplaceList.hero" :key="item">
|
||||
<span>{{ searchName(item) }}</span>
|
||||
<span v-if="marketplaceList.hero.length != index+1">/</span>
|
||||
</span>
|
||||
<span v-if="marketplaceList.hero != undefined && marketplaceList.hero.length > 0" @click="clearHeroAll">×</span>
|
||||
</li>
|
||||
<li v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">
|
||||
<span v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">Tier: </span>
|
||||
<span v-for="(item, index) in marketplaceList.rank" :key="index">
|
||||
{{ searchName(item) }}
|
||||
<span v-if="marketplaceList.rank.length != index+1">/</span>
|
||||
</span>
|
||||
<span v-if="marketplaceList.rank != undefined && marketplaceList.rank.length > 0" @click="clearRankAll">×</span>
|
||||
</li>
|
||||
<li v-if="marketplaceList.gold.length != undefined && marketplaceList.gold.length > 0">
|
||||
<span v-if="marketplaceList.gold.length != undefined && marketplaceList.gold.length > 0">Gold: </span>
|
||||
<span v-for="(item, index) in marketplaceList.gold" :key="item">
|
||||
{{ searchName(item) }}
|
||||
<span v-if="marketplaceList.gold.length != index+1">/</span>
|
||||
</span>
|
||||
<span v-if="marketplaceList.gold != undefined && marketplaceList.gold.length > 0" @click="clearGoldAll">×</span>
|
||||
</li>
|
||||
<li v-if="isClearAll" class="clear-all" @click="clearAll">Clear All</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mkt-content-right-content">
|
||||
<div class="pages" v-if="nftList != undefined && nftList.length > 0">
|
||||
<li v-for="(item, index) in nftList" :key="index">
|
||||
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
|
||||
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
|
||||
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
|
||||
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
|
||||
</li>
|
||||
</div>
|
||||
<div class="pages-no" v-else>
|
||||
<div>
|
||||
<img src="@/assets/img/marketplace/Empty_state.png" alt="">
|
||||
</div>
|
||||
<p>No NFT yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRaw, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
import OverView from "@/components/common/searchView/Overview.vue"
|
||||
import Sort from "@/components/common/searchView/Sort.vue"
|
||||
import Price from "@/components/common/searchView/Price.vue"
|
||||
import Card from '@/components/common/card.vue'
|
||||
import Hero from "@/components/common/searchView/hero.vue"
|
||||
import Rank from "@/components/common/searchView/rank.vue"
|
||||
import Gold from "@/components/common/searchView/gold.vue"
|
||||
import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
|
||||
import NftId from "@/configs/item.json"
|
||||
import {apiMarketplaceState} from "@/utils/marketplace.js"
|
||||
import { useMarketplaceStore } from "@/store/marketplace"
|
||||
const marketplaceList = useMarketplaceStore()
|
||||
|
||||
|
||||
|
||||
const loadingDialogVisible = ref(false)
|
||||
const nftList = ref([])
|
||||
|
||||
const isClearAll = ref(false)
|
||||
|
||||
const clearOverviewAll = () => {
|
||||
marketplaceList.overview = ''
|
||||
toRaw(marketplaceList.getParamsData).search.name = ''
|
||||
getHeroData()
|
||||
}
|
||||
const overviewChild = (val) => {
|
||||
marketplaceList.overview = val
|
||||
toRaw(marketplaceList.getParamsData).search.name = val
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const clearSortAll = () => {
|
||||
marketplaceList.sort = ''
|
||||
toRaw(marketplaceList.getParamsData).sort.fields[0].type = ''
|
||||
getHeroData()
|
||||
}
|
||||
const sortChild = (val) => {
|
||||
nftList.value = []
|
||||
marketplaceList.sort = val
|
||||
toRaw(marketplaceList.getParamsData).sort.fields[0].type = val
|
||||
console.log(toRaw(marketplaceList.getParamsData).sort.fields[0].name)
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
|
||||
const clearPriceAll = () => {
|
||||
marketplaceList.minPrice = ''
|
||||
marketplaceList.maxPrice = ''
|
||||
toRaw(marketplaceList.getParamsData).filter.price_min = ''
|
||||
toRaw(marketplaceList.getParamsData).filter.price_max = ''
|
||||
getHeroData()
|
||||
}
|
||||
const priceChild = (minPrice, maxPrice) => {
|
||||
toRaw(marketplaceList.getParamsData).filter.price_min = minPrice
|
||||
toRaw(marketplaceList.getParamsData).filter.price_max = maxPrice
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const clearHeroAll = () => {
|
||||
marketplaceList.hero = []
|
||||
toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
|
||||
getHeroData()
|
||||
}
|
||||
const heroChild = (val) => {
|
||||
marketplaceList.hero = val
|
||||
toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const clearRankAll = () => {
|
||||
marketplaceList.rank = []
|
||||
toRaw(marketplaceList.getParamsData).filter.hero_ranks = []
|
||||
getHeroData()
|
||||
}
|
||||
const rankChild = (val) => {
|
||||
marketplaceList.rank = val
|
||||
toRaw(marketplaceList.getParamsData).filter.hero_ranks = val
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const clearGoldAll = () => {
|
||||
marketplaceList.gold = []
|
||||
toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
|
||||
getHeroData()
|
||||
}
|
||||
const goldChild = (val) => {
|
||||
marketplaceList.gold = val
|
||||
toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const clearAll = () => {
|
||||
marketplaceList.overview = ''
|
||||
marketplaceList.sort = ''
|
||||
marketplaceList.minPrice = ''
|
||||
marketplaceList.maxPrice = ''
|
||||
marketplaceList.hero = []
|
||||
marketplaceList.rank = []
|
||||
marketplaceList.gold = []
|
||||
marketplaceList.getParamsData = {
|
||||
page_size: 20,
|
||||
cursor: '',
|
||||
search: {
|
||||
name: '',
|
||||
},
|
||||
filter: {
|
||||
price_min: '',
|
||||
price_max: '',
|
||||
item_ids: [],
|
||||
hero_ranks: [],
|
||||
},
|
||||
sort: {
|
||||
fields: [
|
||||
{
|
||||
name: 'price',
|
||||
type: 0,
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
getHeroData()
|
||||
}
|
||||
|
||||
const searchName = (id) => {
|
||||
return NftId[id].name
|
||||
}
|
||||
|
||||
// 更新数据
|
||||
const renewNft = async() => {
|
||||
let timer = setTimeout(() => {
|
||||
getHeroData()
|
||||
clearTimeout(timer);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
const getHeroData = async () => {
|
||||
loadingDialogVisible.value = false;
|
||||
try {
|
||||
let res = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
|
||||
nftList.value = res.rows
|
||||
console.log(res,'-----')
|
||||
// loadingDialogVisible.value = false;
|
||||
} catch(e) {
|
||||
// console.log(e)
|
||||
// loadingDialogVisible.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 监听筛选变化
|
||||
watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPrice,marketplaceList.maxPrice,marketplaceList.hero,marketplaceList.rank,marketplaceList.gold],
|
||||
([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6, preTest7],
|
||||
[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6, oldTest7]) => {
|
||||
if(toRaw(preTest1) || toRaw(preTest2) || toRaw(preTest3) || toRaw(preTest4) || (toRaw(preTest5) !=[] && preTest5.length > 0 ) || (toRaw(preTest6) !=[] && toRaw(preTest6).length > 0 ) || (toRaw(preTest7) !=[] && toRaw(preTest7).length > 0 )) {
|
||||
isClearAll.value = true
|
||||
} else {
|
||||
isClearAll.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getHeroData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mkt-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: -600px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.mkt-content-left {
|
||||
width: 300px;
|
||||
padding: 0 35px;
|
||||
h2 {
|
||||
font-family: "Poppins";
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #bb7fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.mkt-content-right {
|
||||
width: calc(100% - 300px);
|
||||
// box-sizing: border-box;
|
||||
padding-right: 40px;
|
||||
.mkt-content-right-header {
|
||||
width: calc(100% - 10px);
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #3a3b57;
|
||||
.bg-cor {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #18ff00;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.results-total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #b3b5da;
|
||||
}
|
||||
.search-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
li {
|
||||
margin-left: 10px;
|
||||
background: #2d2738;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clear-all {
|
||||
background: #5a4a6d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mkt-content-right-content {
|
||||
margin-top: 30px;
|
||||
.pages {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
clear: both;
|
||||
li {
|
||||
width: calc(25% - 10px);
|
||||
// height: 360px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pages-no {
|
||||
position: relative;
|
||||
margin-top: 150px;
|
||||
div {
|
||||
margin: 0 auto;
|
||||
width: 401px;
|
||||
height: 322px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
top: 260px;
|
||||
left: 52%;
|
||||
transform: translateX(-50%);
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
color: #8587B2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -281,7 +281,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #16141b;
|
||||
box-shadow: 0 -10px 10px #16141b;
|
||||
box-shadow: 0 -80px 80px #16141b;
|
||||
.mkt-content-left {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
||||
@ -44,7 +44,7 @@ export const feePrice = (price) => {
|
||||
}
|
||||
|
||||
export const totalPrice = (price) => {
|
||||
return Number(Number(price) + Number(price) * 0.02).toFixed(5)
|
||||
return Number(Number(price) + Number(price) * 0.02 + Number(price) * 0.02).toFixed(5)
|
||||
}
|
||||
|
||||
// 处理时间回显
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<div class="top-left-img">
|
||||
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
||||
<ImgCard :nftData="detailData.nft" />
|
||||
<!-- <img src="" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
@ -90,7 +91,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="btm-left">
|
||||
<div v-if="detailData.nft.type == 1" class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="btm-detail">
|
||||
<li v-for="(item, val, index) in nftAbilities" :key="index">
|
||||
@ -133,6 +134,23 @@
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="gold-content">
|
||||
<div class="left">
|
||||
<h4>Gold coins</h4>
|
||||
<p>1000</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-img">
|
||||
<img src="@/assets/img/marketplace/Icon_!.png" alt="">
|
||||
</div>
|
||||
<div class="right-tips">
|
||||
It can be enabled on your home page and you will receive 100,000 gold coins in counter Fire.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SellDialog v-if="detailData" :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="detailData.nft" @handleClose="sellHandleClose" />
|
||||
@ -651,6 +669,63 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.gold-content {
|
||||
width: 455px;
|
||||
height: 84px;
|
||||
background: #2D2738;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
padding: 10px 19px;
|
||||
font-family: 'Poppins';
|
||||
font-size: 22px;
|
||||
h4 {
|
||||
height: 18px;
|
||||
font-weight: 400;
|
||||
color: #B3B5DA;
|
||||
}
|
||||
p {
|
||||
height: 20px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-top: 9px;
|
||||
margin-right: 10px;
|
||||
.right-img {
|
||||
width: 34px;
|
||||
height: 33px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.right-tips {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: -20px;
|
||||
width: 313px;
|
||||
height: 82px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background: #1A1821;
|
||||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #B966FF;
|
||||
}
|
||||
&:hover {
|
||||
.right-tips {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
|
||||
@ -49,7 +49,7 @@ onUnmounted(() => {
|
||||
.market {
|
||||
width: 100%;
|
||||
.header {
|
||||
height: 480px;
|
||||
height: 440px;
|
||||
background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user