使用clip-path替换原有的边框图片
This commit is contained in:
cebgcontract
parent
dc280a3344
commit
59afa144e6
@ -16,83 +16,105 @@
|
|||||||
LV.{{data.info.level}}
|
LV.{{data.info.level}}
|
||||||
</div>
|
</div>
|
||||||
<level-star :level="nftQuality"></level-star>
|
<level-star :level="nftQuality"></level-star>
|
||||||
<div class="owner-info">
|
<div class="owner-container">
|
||||||
<div class="owner">
|
<div class="owner-border"></div>
|
||||||
<div>Owner: </div>
|
<div class="owner-info">
|
||||||
<div>{{addressShow}}</div>
|
<div class="owner">
|
||||||
</div>
|
<div>Owner: </div>
|
||||||
<div class="mint">
|
<div>{{addressShow}}</div>
|
||||||
<div>Mint Time: </div>
|
</div>
|
||||||
<div>{{mintTime}}</div>
|
<div class="mint">
|
||||||
|
<div>Mint Time: </div>
|
||||||
|
<div>{{mintTime}}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-part">
|
<div class="right-part">
|
||||||
<div class="nft-id-desktop">#{{data.id}}</div>
|
<div class="nft-id-desktop">#{{data.id}}</div>
|
||||||
<div class="border basic-data">
|
<div class="card-container">
|
||||||
<div class="title">
|
<div class="card-border"></div>
|
||||||
Basic Data
|
<div class="border">
|
||||||
</div>
|
<div class="title">
|
||||||
<div class="info">
|
Basic Data
|
||||||
<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>
|
||||||
<div class="two-col-info">
|
<div class="info">
|
||||||
<div class="one-info">
|
<div class="two-col-info">
|
||||||
<div class="info-title">Attack</div>
|
<div class="one-info">
|
||||||
<div class="info-val">{{data.info.atk}}</div>
|
<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>
|
||||||
<div class="one-info">
|
<div class="two-col-info">
|
||||||
<div class="info-title">Defence</div>
|
<div class="one-info">
|
||||||
<div class="info-val">{{data.info.def}}</div>
|
<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>
|
<div class="one-col-info">
|
||||||
<div class="one-col-info">
|
<div class="one-info">
|
||||||
<div class="one-info">
|
<div class="info-title">Advanced Count</div>
|
||||||
<div class="info-title">Advanced Count</div>
|
<div class="info-val">{{data.info.advancedCount}}</div>
|
||||||
<div class="info-val">{{data.info.advancedCount}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="top-left"></div>
|
||||||
|
<div class="top-right"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border special-data">
|
|
||||||
<div class="title">
|
<div class="card-container">
|
||||||
Special Data
|
<div class="card-border"></div>
|
||||||
</div>
|
<div class="border special-data">
|
||||||
<div class="info">
|
<div class="title">
|
||||||
<div class="two-col-info">
|
Special Data
|
||||||
<div class="one-info">
|
</div>
|
||||||
<div class="info-title">Lucky</div>
|
<div class="info">
|
||||||
<div class="info-val">{{data.info.lucky}}</div>
|
<div class="two-col-info">
|
||||||
</div>
|
<div class="one-info">
|
||||||
<div class="one-info">
|
<div class="info-title">Lucky</div>
|
||||||
<div class="info-title font14">Success Rate</div>
|
<div class="info-val">{{data.info.lucky}}</div>
|
||||||
<div class="info-val">{{data.info.successRate}}</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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="top-left"></div>
|
||||||
|
<div class="top-right"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border price-data" v-if="data.priceDiscount">
|
|
||||||
<div class="title">
|
<div class="card-container">
|
||||||
Price
|
<div class="card-border"></div>
|
||||||
</div>
|
<div class="border price-data" v-if="data.priceDiscount">
|
||||||
<div class="info">
|
<div class="title">
|
||||||
<div class="one-col-info">
|
Price
|
||||||
<div class="one-info">
|
</div>
|
||||||
<div class="info-title price">{{data.currency}}</div>
|
<div class="info">
|
||||||
<div class="info-val price">{{data.priceDiscount}}</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="top-left"></div>
|
||||||
|
<div class="top-right"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-div" v-if="data.priceDiscount">
|
<div class="btn-div" v-if="data.priceDiscount">
|
||||||
<div class="buy-btn">
|
<div class="buy-btn">
|
||||||
<img v-if="canBuy" src="@/assets/main/detail/btn_buy.png" alt="btn-buy">
|
<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>
|
<style lang="scss" scoped>
|
||||||
@import '../../scss/breakpoints.scss';
|
@import '../../scss/breakpoints.scss';
|
||||||
@import '../../scss/tooltip.scss';
|
@import '../../scss/tooltip.scss';
|
||||||
|
.info-root{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
.container{
|
.container{
|
||||||
color: white;
|
color: white;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@ -178,6 +202,7 @@ export default class extends Vue {
|
|||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
.base-info {
|
.base-info {
|
||||||
|
margin-bottom: 24%;
|
||||||
.nft-id-mobile{
|
.nft-id-mobile{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -194,26 +219,37 @@ export default class extends Vue {
|
|||||||
color: #FFCF49;
|
color: #FFCF49;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.owner-info {
|
.owner-container{
|
||||||
display: flex;
|
width: 448px;
|
||||||
flex-direction: column;
|
position: relative;
|
||||||
background-image: url("../../assets/main/detail/border-bg-1.png");
|
.owner-border{
|
||||||
background-size: contain;
|
position: absolute;
|
||||||
background-repeat: no-repeat;
|
top: 0;
|
||||||
padding: 30px 60px 20px 30px;
|
left: 0;
|
||||||
height: 200px;
|
right: 0;
|
||||||
font-size: 20px;
|
bottom: 0;
|
||||||
div{
|
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;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
padding: 30px 60px 20px 30px;
|
||||||
margin-top: 10px;
|
font-size: 20px;
|
||||||
}
|
div{
|
||||||
.owner {
|
display: flex;
|
||||||
color: #FFC359
|
flex-direction: row;
|
||||||
}
|
justify-content: space-between;
|
||||||
.mint{
|
margin-top: 10px;
|
||||||
font-size: 17px;
|
}
|
||||||
|
.owner {
|
||||||
|
color: #FFC359
|
||||||
|
}
|
||||||
|
.mint{
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -246,17 +282,54 @@ export default class extends Vue {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
padding-bottom: 60px;
|
padding-bottom: 60px;
|
||||||
|
margin-right: 20px;
|
||||||
.nft-id-desktop{
|
.nft-id-desktop{
|
||||||
color: #46E0F4;
|
color: #46E0F4;
|
||||||
font-size: 26px;
|
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 {
|
.border {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
background-color: #0C1737;
|
background-color: #0C1737;
|
||||||
margin-top: 20px;
|
|
||||||
.title {
|
.title {
|
||||||
|
clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) 100%, 2px 100%, 2px 14px);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -265,14 +338,10 @@ export default class extends Vue {
|
|||||||
color: #E3AE50;
|
color: #E3AE50;
|
||||||
background-color: #070912;
|
background-color: #070912;
|
||||||
border: 20px solid #070912;
|
border: 20px solid #070912;
|
||||||
border-image-source: url('../../assets/main/detail/border-bg-t.png');
|
|
||||||
border-image-slice: 20 20 20 20;
|
|
||||||
}
|
}
|
||||||
.info{
|
.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;
|
margin-top: -20px;
|
||||||
|
padding: 20px;
|
||||||
.font14 {
|
.font14 {
|
||||||
font-size: 14px!important;
|
font-size: 14px!important;
|
||||||
}
|
}
|
||||||
@ -390,6 +459,7 @@ export default class extends Vue {
|
|||||||
}
|
}
|
||||||
.base-info{
|
.base-info{
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
|
margin-bottom: 20px;
|
||||||
.nft-id-mobile{
|
.nft-id-mobile{
|
||||||
color: #46E0F4;
|
color: #46E0F4;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -404,13 +474,16 @@ export default class extends Vue {
|
|||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.owner-info{
|
.owner-container{
|
||||||
padding: 0 40px 20px 20px;
|
width: 91vw;
|
||||||
font-size: 15px;
|
.owner-info{
|
||||||
width: 76vw;
|
padding: 0 40px 20px 20px;
|
||||||
height: 29vw;
|
font-size: 15px;
|
||||||
.mint{
|
width: 76vw;
|
||||||
font-size: 12px;
|
height: 29vw;
|
||||||
|
.mint{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -423,8 +496,10 @@ export default class extends Vue {
|
|||||||
.nft-id-desktop{
|
.nft-id-desktop{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.border{
|
.card-container{
|
||||||
width: 91%;
|
width: 91%;
|
||||||
|
}
|
||||||
|
.border{
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,8 +53,40 @@ export default class Item extends Vue {
|
|||||||
account: this.accountId,
|
account: this.accountId,
|
||||||
token_id: this.nftId
|
token_id: this.nftId
|
||||||
}
|
}
|
||||||
const res: any = await getNftDetail(reqData)
|
// const res: any = await getNftDetail(reqData)
|
||||||
const data = res.info
|
// 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
|
const nftInfo: INftAttr = data.info
|
||||||
nftInfo.mintTime = data.mint_time
|
nftInfo.mintTime = data.mint_time
|
||||||
nftInfo.owner = data.owner_address
|
nftInfo.owner = data.owner_address
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user