148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="piece-top">
|
|
<div class="piece-left">
|
|
<div class="piece-img">
|
|
<img
|
|
v-if="data.item_id"
|
|
width="97px"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
data.item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="name">{{ data.detail.chip_name }}</div>
|
|
</div>
|
|
<div class="piece-right">
|
|
<div class="userinfo">
|
|
<div class="srabded">
|
|
<div>Srabded</div>
|
|
<div>ERC721</div>
|
|
</div>
|
|
<div class="token-id">
|
|
<div>Token id</div>
|
|
<div>#{{ data.token_id }}</div>
|
|
</div>
|
|
<div class="amount">
|
|
<div>Amount</div>
|
|
<div>721</div>
|
|
</div>
|
|
</div>
|
|
<div class="sellers">
|
|
Sellers pay 5% fee to platform for completing the transaction.
|
|
</div>
|
|
<div class="service-fee">
|
|
<div class="service-title">Service Fee</div>
|
|
<div class="service-img">
|
|
<img
|
|
width="83px"
|
|
src="../../assets/market/dialog/serve-icon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="service-usdt">
|
|
<span class="usdt-number"> 10.8</span> USDT
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["data"],
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.piece-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.piece-right {
|
|
.userinfo {
|
|
width: 351px;
|
|
height: 100px;
|
|
margin-left: 5px;
|
|
background: #28c1ed;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
border: 2px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 20px;
|
|
.srabded,
|
|
.token-id,
|
|
.amount {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
// margin-top: 9px;
|
|
}
|
|
.srabded {
|
|
margin-top: 9px;
|
|
}
|
|
.token-id {
|
|
margin-top: 7px;
|
|
}
|
|
.amount {
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
.sellers {
|
|
width: 299px;
|
|
// height: 24px;
|
|
// text-align: center;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
font-size: 13px;
|
|
margin-top: 12px;
|
|
margin-left: 19px;
|
|
margin-bottom: 12px;
|
|
font-weight: 600;
|
|
color: #fc3b57;
|
|
}
|
|
.service-fee {
|
|
width: 341px;
|
|
height: 29px;
|
|
display: flex;
|
|
background: #28c1ed;
|
|
color: #fff;
|
|
margin-left: 5px;
|
|
align-items: center;
|
|
font-size: 17px;
|
|
border: 2px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 20px;
|
|
.service-title {
|
|
margin-left: 20px;
|
|
}
|
|
.service-img {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 17px;
|
|
margin-right: 45px;
|
|
}
|
|
.usdt-number {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.piece-left {
|
|
width: 137px;
|
|
height: 150px;
|
|
background: url("../../assets/market/chip/bg-there.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.piece-img {
|
|
margin-top: 20px;
|
|
margin-left: 21px;
|
|
}
|
|
.name{
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|