crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用clip-path替换原有的边框图片

Browse Source
This commit is contained in:
cebgcontract 2022-03-19 12:16:57 +08:00
parent dc280a3344
commit 59afa144e6
2 changed files with 199 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
src/components/market/NftDetail.vue
View File

@ -16,83 +16,105 @@
LV.{{data.info.level}}
</div>
<level-star :level="nftQuality"></level-star>
<div class="owner-info">
<div class="owner">
<div>Owner: </div>
<div>{{addressShow}}</div>
</div>
<div class="mint">
<div>Mint Time: </div>
<div>{{mintTime}}</div>
<div class="owner-container">
<div class="owner-border"></div>
<div class="owner-info">
<div class="owner">
<div>Owner: </div>
<div>{{addressShow}}</div>
</div>
<div class="mint">
<div>Mint Time: </div>
<div>{{mintTime}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-part">
<div class="nft-id-desktop">#{{data.id}}</div>
<div class="border basic-data">
<div class="title">
Basic Data
</div>
<div class="info">
<div class="two-col-info">
<div class="one-info">
<div class="info-title">HP</div>
<div class="info-val">{{data.info.hp}}</div>
</div>
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{data.info.speed}}</div>
</div>
<div class="card-container">
<div class="card-border"></div>
<div class="border">
<div class="title">
Basic Data
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{data.info.atk}}</div>
<div class="info">
<div class="two-col-info">
<div class="one-info">
<div class="info-title">HP</div>
<div class="info-val">{{data.info.hp}}</div>
</div>
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{data.info.speed}}</div>
</div>
</div>
<div class="one-info">
<div class="info-title">Defence</div>
<div class="info-val">{{data.info.def}}</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{data.info.atk}}</div>
</div>
<div class="one-info">
<div class="info-title">Defence</div>
<div class="info-val">{{data.info.def}}</div>
</div>
</div>
</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{data.info.advancedCount}}</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{data.info.advancedCount}}</div>
</div>
</div>
</div>
</div>
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="border special-data">
<div class="title">
Special Data
</div>
<div class="info">
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Lucky</div>
<div class="info-val">{{data.info.lucky}}</div>
</div>
<div class="one-info">
<div class="info-title font14">Success Rate</div>
<div class="info-val">{{data.info.successRate}}</div>
<div class="card-container">
<div class="card-border"></div>
<div class="border special-data">
<div class="title">
Special Data
</div>
<div class="info">
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Lucky</div>
<div class="info-val">{{data.info.lucky}}</div>
</div>
<div class="one-info">
<div class="info-title font14">Success Rate</div>
<div class="info-val">{{data.info.successRate}}</div>
</div>
</div>
</div>
</div>
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="border price-data" v-if="data.priceDiscount">
<div class="title">
Price
</div>
<div class="info">
<div class="one-col-info">
<div class="one-info">
<div class="info-title price">{{data.currency}}</div>
<div class="info-val price">{{data.priceDiscount}}</div>
<div class="card-container">
<div class="card-border"></div>
<div class="border price-data" v-if="data.priceDiscount">
<div class="title">
Price
</div>
<div class="info">
<div class="one-col-info">
<div class="one-info">
<div class="info-title price">{{data.currency}}</div>
<div class="info-val price">{{data.priceDiscount}}</div>
</div>
</div>
</div>
</div>
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="btn-div" v-if="data.priceDiscount">
<div class="buy-btn">
<img v-if="canBuy" src="@/assets/main/detail/btn_buy.png" alt="btn-buy">
@ -157,7 +179,9 @@ export default class extends Vue {
<style lang="scss" scoped>
@import '../../scss/breakpoints.scss';
@import '../../scss/tooltip.scss';
.info-root{
position: relative;
}
.container{
color: white;
width: 100vw;
@ -178,6 +202,7 @@ export default class extends Vue {
padding-top: 20px;
z-index: 2;
.base-info {
margin-bottom: 24%;
.nft-id-mobile{
display: none;
}
@ -194,26 +219,37 @@ export default class extends Vue {
color: #FFCF49;
}
}
.owner-info {
display: flex;
flex-direction: column;
background-image: url("../../assets/main/detail/border-bg-1.png");
background-size: contain;
background-repeat: no-repeat;
padding: 30px 60px 20px 30px;
height: 200px;
font-size: 20px;
div{
.owner-container{
width: 448px;
position: relative;
.owner-border{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #24E0C8;
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 60px, 100% 100%, 0 100%, 0 2px,
2px 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 60px, calc(100% - 40px) 2px, 2px 2px
);
}
.owner-info {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.owner {
color: #FFC359
}
.mint{
font-size: 17px;
flex-direction: column;
padding: 30px 60px 20px 30px;
font-size: 20px;
div{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.owner {
color: #FFC359
}
.mint{
font-size: 17px;
}
}
}
}
@ -246,17 +282,54 @@ export default class extends Vue {
flex-direction: column;
justify-content: end;
padding-bottom: 60px;
margin-right: 20px;
.nft-id-desktop{
color: #46E0F4;
font-size: 26px;
}
.card-container{
width: 100%;
position: relative;
margin-top: 20px;
.card-border{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #24E0C8;
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 14px,
2px 12px, 2px calc(100% - 14px), 14px calc(100% - 2px), calc(100% - 14px) calc(100% - 2px), calc(100% - 2px) calc(100% - 14px),
calc(100% - 2px) 14px, calc(100% - 14px) 2px, 14px 2px, 2px 14px, 0 14px
);
}
.top-left{
position: absolute;
left: 6px;
top: 6px;
width: 9px;
height: 9px;
background: #24E0C8;
clip-path: polygon(9px 0, 9px 9px, 0 9px);
}
.top-right{
position: absolute;
right: 6px;
top: 6px;
width: 9px;
height: 9px;
background: #24E0C8;
clip-path: polygon(0 0, 9px 9px, 0 9px);
}
}
.border {
display: flex;
flex-direction: column;
line-height: 60px;
background-color: #0C1737;
margin-top: 20px;
.title {
clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) 100%, 2px 100%, 2px 14px);
display: flex;
justify-content: center;
align-items: center;
@ -265,14 +338,10 @@ export default class extends Vue {
color: #E3AE50;
background-color: #070912;
border: 20px solid #070912;
border-image-source: url('../../assets/main/detail/border-bg-t.png');
border-image-slice: 20 20 20 20;
}
.info{
border: 20px solid #070912;
border-image-source: url('../../assets/main/detail/border-bg-b.png');
border-image-slice: 20 20 20 20;
margin-top: -20px;
padding: 20px;
.font14 {
font-size: 14px!important;
}
@ -390,6 +459,7 @@ export default class extends Vue {
}
.base-info{
margin-top: 100px;
margin-bottom: 20px;
.nft-id-mobile{
color: #46E0F4;
font-size: 20px;
@ -404,13 +474,16 @@ export default class extends Vue {
font-size: 36px;
}
}
.owner-info{
padding: 0 40px 20px 20px;
font-size: 15px;
width: 76vw;
height: 29vw;
.mint{
font-size: 12px;
.owner-container{
width: 91vw;
.owner-info{
padding: 0 40px 20px 20px;
font-size: 15px;
width: 76vw;
height: 29vw;
.mint{
font-size: 12px;
}
}
}
}
@ -423,8 +496,10 @@ export default class extends Vue {
.nft-id-desktop{
display: none;
}
.border{
.card-container{
width: 91%;
}
.border{
.title {
font-size: 24px;
}

36
src/views/desktop/Item.vue
View File

@ -53,8 +53,40 @@ export default class Item extends Vue {
account: this.accountId,
token_id: this.nftId
}
const res: any = await getNftDetail(reqData)
const data = res.info
// const res: any = await getNftDetail(reqData)
// const data = res.info
const data = {
id: '100000000001',
token_id: 100000000001,
type: 0,
skelName: 'n_aoi',
name: 'miffy',
price: 10,
priceDiscount: 10,
decimals: 0,
currency: 'BNB',
class: 0,
repeat: false,
showBuy: false,
mint_time: 1647652513621,
owner_address: '',
currency_list: [
{
discount_rate: 1,
original_price: 1,
discount_price: 1,
contract_address: '0x111',
name: 'cec'
}
],
info: {
level: 1,
advanced_count: 1,
success_rate: 2,
name: 'astral',
job: '1'
}
}
const nftInfo: INftAttr = data.info
nftInfo.mintTime = data.mint_time
nftInfo.owner = data.owner_address