188 lines
4.3 KiB
Vue
188 lines
4.3 KiB
Vue
<template>
|
|
<div class="hero-top">
|
|
<div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
|
|
<div class="hero-img">
|
|
<img
|
|
v-if="data.c_id"
|
|
:src="require('@/assets/mobile/market/hero/' + data.c_id + '.png')"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="gen" v-if="data.info.is_genesis">
|
|
<img width="31px" src="../../assets/market/hero/gen.png" alt="" />
|
|
</div>
|
|
<!-- <div class="hero-name">
|
|
{{ data.c_name }}
|
|
</div> -->
|
|
</div>
|
|
<div class="hero-right">
|
|
<div class="userinfo">
|
|
<div class="srabded">
|
|
<div>Srabded</div>
|
|
<div>ERC721</div>
|
|
</div>
|
|
<div class="token-id">
|
|
<div class="token-lable">Token-id</div>
|
|
<div>#{{ data.token_id }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="priece">
|
|
<div class="priece-btn">
|
|
<div class="priece-number">
|
|
{{ data.s_price ? data.s_price : " " }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["data"],
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.hero-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.hero-left {
|
|
width: 173px;
|
|
height: 192px;
|
|
background: url("../../../assets/market/chip/bg-there.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.hero-right {
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.userinfo {
|
|
.srabded {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-left: 19px;
|
|
width: 291px;
|
|
height: 75px;
|
|
padding-left: 18px;
|
|
padding-right: 19px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 18px;
|
|
align-items: center;
|
|
font-size: 38px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
justify-content: space-between;
|
|
}
|
|
.token-id {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 19px;
|
|
font-size: 33px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
width: 327px;
|
|
height: 112px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 18px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.token-lable {
|
|
font-size: 38px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.priece {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.priece-btn {
|
|
width: 231px;
|
|
height: 81px;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
margin-top: 22px;
|
|
position: relative;
|
|
line-height: 81px;
|
|
// text-align: center;
|
|
background: url("../../../assets/market/hero/price.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.priece-number {
|
|
margin-left: 75px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hero-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.piece-left {
|
|
width: 272px;
|
|
height: 303px;
|
|
position: relative;
|
|
background: url("../../../assets/market/hero/type-1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.hero-name {
|
|
// width: 46px;
|
|
height: 24px;
|
|
// max-width: 86px;
|
|
line-height: 24px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
background: url("../../../assets/market/hero/name-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: -1px;
|
|
text-align: center;
|
|
color: #fff;
|
|
bottom: 0px;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.piece-left-gen {
|
|
width: 272px;
|
|
height: 303px;
|
|
background: url("../../../assets/market/hero/type-0.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.gen {
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 6px;
|
|
}
|
|
.hero-name {
|
|
// width: 46px;
|
|
height: 24px;
|
|
// max-width: 86px;
|
|
line-height: 24px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
background: url("../../../assets/market/hero/name-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: -1px;
|
|
text-align: center;
|
|
color: #fff;
|
|
bottom: 0px;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|