修改NFT图片样式
This commit is contained in:
yuyongdong
parent
7c265ec2ad
commit
4d48b3df39
BIN
src/assets/img/marketplace/Arrows.png
Normal file
BIN
src/assets/img/marketplace/Arrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1005 B |
BIN
src/assets/img/marketplace/Links web icon.png
Normal file
BIN
src/assets/img/marketplace/Links web icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
@ -5,7 +5,6 @@
|
||||
<ImgCard :nftData="nftData" />
|
||||
<!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
|
||||
</div>
|
||||
<div>{{ nftData.token_id }}</div>
|
||||
<div class="card-name">
|
||||
<div>Cotnesford park</div>
|
||||
<div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
|
||||
@ -224,10 +223,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.card-name {
|
||||
display: flex;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<li class="cart-item" v-for="(item, index) in cartList" :key="index">
|
||||
<div class="cart-item-left">
|
||||
<div class="cart-item-left-img">
|
||||
<img :src="item.nft.image" alt="">
|
||||
<ImgCard :nftData="item.nft" />
|
||||
</div>
|
||||
<div class="cart-item-left-name">{{ item.nft.name }}</div>
|
||||
</div>
|
||||
@ -31,28 +31,33 @@
|
||||
<div v-else class="cart-not">
|
||||
<p>You have no items in your cart</p>
|
||||
</div>
|
||||
<!-- <div class="cart-price">
|
||||
</div>
|
||||
<div class="cart-total-price">
|
||||
<div class="top">
|
||||
<div class="left">Total Price</div>
|
||||
<div class="right">{{ completePrice(cartList) }} <img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>0.08 <img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
|
||||
<div>≈ {{ 200 }}$</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
|
||||
<div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
|
||||
<div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits, onMounted, watch } from "vue"
|
||||
import ImgCard from "@/components/common/imgCard.vue"
|
||||
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
|
||||
import BuyDialog from "@/components/Dialogs/buyDialog.vue"
|
||||
import { useRouter } from "vue-router";
|
||||
import { useMarketplaceStore } from "@/store/marketplace"
|
||||
import {priceCalculated} from "@/configs/priceCalculate.js"
|
||||
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
|
||||
import {priceCalculated, completePrice} from "@/configs/priceCalculate.js"
|
||||
import {createModal} from "@/utils/model.util";
|
||||
import BuyDialog from "@/components/Dialogs/buyDialog.vue"
|
||||
const marketplaceList = useMarketplaceStore()
|
||||
import {
|
||||
apiDelCartList,
|
||||
@ -174,6 +179,7 @@ onMounted(()=> {
|
||||
width: 570px;
|
||||
// height: 100%;
|
||||
color: #BB7FFF;
|
||||
border-radius: 30px;
|
||||
.cart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -203,8 +209,11 @@ onMounted(()=> {
|
||||
}
|
||||
}
|
||||
.cart-content {
|
||||
padding: 0 30px;
|
||||
padding: 0 15px;
|
||||
.cart-not {
|
||||
height: 183px;
|
||||
line-height: 183px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
@ -214,12 +223,38 @@ onMounted(()=> {
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px auto;
|
||||
width: 532px;
|
||||
padding: 15px;
|
||||
border-radius: 16px;
|
||||
margin: 0 auto;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
.cart-item-left {
|
||||
display: flex;
|
||||
.cart-item-left-img {
|
||||
width: 110px;
|
||||
height: 165px;
|
||||
:deep(.card-img-common) {
|
||||
.img-top {
|
||||
width: 35px;
|
||||
height: 12px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 8px;
|
||||
}
|
||||
.img-btm {
|
||||
bottom: 8px;
|
||||
left: 12px;
|
||||
>div {
|
||||
width: 35px;
|
||||
height: 12px;
|
||||
font-size: 8px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-item-left-name {
|
||||
font-family: 'Poppins';
|
||||
@ -271,21 +306,54 @@ onMounted(()=> {
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: #27232d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-btn {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.cart-total-price {
|
||||
width: 494px;
|
||||
margin: 0 auto;
|
||||
margin-top: 63px;
|
||||
>div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
background: #6336D7;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
color: #BB7FFF;
|
||||
}
|
||||
.left {
|
||||
font-size: 42px;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-btn {
|
||||
width: 494px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 40px;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
background: #6336D7;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="cards">
|
||||
<div class="card-top" v-if="nftData" @click="toDetail">
|
||||
<div class="card-img">
|
||||
<LazyLoadImg :src="nftData.nft.image" :src-placeholder="placeholderImg" alt="图片" />
|
||||
<ImgCard :nftData="nftData.nft" />
|
||||
</div>
|
||||
<div class="card-name">
|
||||
<div>Cotnesford park</div>
|
||||
@ -36,6 +36,7 @@
|
||||
<script setup>
|
||||
import { ref, toRaw, onMounted, getCurrentInstance, defineEmits } from "vue"
|
||||
import BuyDialog from "@/components/Dialogs/buyDialog.vue"
|
||||
import ImgCard from "@/components/common/imgCard.vue"
|
||||
import {priceCalculated} from "@/configs/priceCalculate.js"
|
||||
import {walletStore} from "@/store/wallet";
|
||||
import { BlockChain } from "@/components/chain/BlockChain"
|
||||
@ -134,9 +135,24 @@ onMounted(() => {
|
||||
width: 240px;
|
||||
height: 360px;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
:deep(.card-img-common) {
|
||||
.img-top {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
.img-btm {
|
||||
bottom: 12px;
|
||||
left: 20px;
|
||||
>div {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-name {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<template #default="{ text: nft }">
|
||||
<div class="nft">
|
||||
<div class="nft-img">
|
||||
<img :src="nft.image" alt="">
|
||||
<ImgCard :nftData="nft" />
|
||||
</div>
|
||||
<div class="nft-name">{{ nft.name }}</div>
|
||||
</div>
|
||||
@ -14,21 +14,21 @@
|
||||
<a-table-column title="Price" data-index="event">
|
||||
<template #default="{ text: event }">
|
||||
<div class="price">
|
||||
{{ event.data.buy[0].amount }}
|
||||
{{ priceCalculated(event.data.buy[0].amount) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="Create time" data-index="event">
|
||||
<template #default="{ text: event }">
|
||||
<div>
|
||||
{{ event.data.created_at }}
|
||||
{{ showTime(event.data.created_at) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="Expiry date" data-index="event">
|
||||
<template #default="{ text: event }">
|
||||
<div>
|
||||
{{ event.data.end_at }}
|
||||
{{ showTime(event.data.end_at) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
@ -46,6 +46,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import ImgCard from "@/components/common/imgCard.vue"
|
||||
import { priceCalculated, showTime } from "@/configs/priceCalculate"
|
||||
import { BlockChain } from "@/components/chain/BlockChain"
|
||||
|
||||
const props = defineProps({
|
||||
@ -98,6 +100,10 @@ div {
|
||||
vertical-align: middle;
|
||||
>div {
|
||||
text-align: center;
|
||||
font-family: 'Poppins';
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: #F3F0FF;
|
||||
}
|
||||
.nft {
|
||||
display: flex;
|
||||
@ -106,10 +112,26 @@ div {
|
||||
.nft-img {
|
||||
width: 213px;
|
||||
height: 100%;
|
||||
// display: none;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.card-img-common {
|
||||
.img-top {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.img-btm {
|
||||
bottom: 15px;
|
||||
left: 20px;
|
||||
>div {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nft-name {
|
||||
|
||||
@ -28,6 +28,10 @@ const props = defineProps({
|
||||
<style lang="scss" scoped>
|
||||
.card-img-common {
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.img-top {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -39,7 +43,6 @@ const props = defineProps({
|
||||
}
|
||||
.img-btm {
|
||||
position: absolute;
|
||||
// bottom: 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -52,23 +55,13 @@ const props = defineProps({
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div:nth-child(1) {
|
||||
// width: 66px;
|
||||
// height: 24px;
|
||||
// line-height: 25px;
|
||||
// margin-right: 6px;
|
||||
// margin-left: 30px;
|
||||
background: url('@/assets/img/marketplace/icon_wealth.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding-left: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
// width: 66px;
|
||||
// height: 24px;
|
||||
// line-height: 25px;
|
||||
background: url('@/assets/img/marketplace/icon_luck .png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<template #default="{ text: nft }">
|
||||
<div class="nft">
|
||||
<div class="nft-img">
|
||||
<img :src="nft.image" alt="">
|
||||
<ImgCard :nftData="nft" />
|
||||
</div>
|
||||
<div class="nft-name">{{ nft.name }}</div>
|
||||
</div>
|
||||
@ -22,9 +22,15 @@
|
||||
<template #default="{ text: event }">
|
||||
<div class="price">
|
||||
<div class="nft-price">{{ event.data.details.asset[0].amount }}</div>
|
||||
<div class="nft-img">
|
||||
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
||||
</div>
|
||||
<p>$ 400</p>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="" data-index="event">
|
||||
<template #default="{ text: event }">
|
||||
<div class="price-icon">
|
||||
<span>{{event}}</span>
|
||||
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
@ -38,28 +44,41 @@
|
||||
<a-table-column title="Sender" data-index="event" :width="400">
|
||||
<template #default="{ text: event }">
|
||||
<div class="sender">
|
||||
<div class="nft-sender">{{ event.data.details.from }}</div>
|
||||
<div class="nft-sender">{{ sliceAddress(event.data.details.from) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="" data-index="event">
|
||||
<template #default="{ text: event }">
|
||||
<div class="from-to-icon">
|
||||
<span>{{event}}</span>
|
||||
<img src="@/assets/img/marketplace/Arrows.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="recipient" data-index="event" :width="400">
|
||||
<template #default="{ text: event }">
|
||||
<div class="recipient">
|
||||
<div class="nft-recipient">{{ event.data.details.to }}</div>
|
||||
<div class="nft-recipient">{{ sliceAddress(event.data.details.to) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="Date" data-index="event" :width="400">
|
||||
<template #default="{ text: event }">
|
||||
<div class="date">
|
||||
<div class="nft-date">{{ event.data.indexed_at }}</div>
|
||||
<div class="nft-date">{{ showTime(event.data.indexed_at) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="Contract" data-index="nft" :width="400">
|
||||
<template #default="{ text: nft }">
|
||||
<div class="contract">
|
||||
<div class="nft-contract">{{ nft.meta_url }}</div>
|
||||
<div class="nft-contract">
|
||||
<a :href="nft.meta_url" target="_back">
|
||||
<span>Etherscan</span>
|
||||
<img src="@/assets/img/marketplace/Links web icon.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
@ -69,6 +88,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import ImgCard from "@/components/common/imgCard.vue"
|
||||
import { sliceAddress, showTime } from "@/configs/priceCalculate"
|
||||
|
||||
const props = defineProps({
|
||||
nftData: {
|
||||
@ -99,6 +120,7 @@ div {
|
||||
color: #B3B5DA;
|
||||
background: #16141b;
|
||||
border-color: #34354e;
|
||||
text-align: center;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
@ -111,6 +133,7 @@ div {
|
||||
td {
|
||||
border-color: #34354e;
|
||||
background: #16141b !important;
|
||||
overflow: visible !important;
|
||||
vertical-align: middle;
|
||||
>div {
|
||||
text-align: center;
|
||||
@ -126,9 +149,26 @@ div {
|
||||
.nft-img {
|
||||
width: 213px;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.card-img-common {
|
||||
.img-top {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.img-btm {
|
||||
bottom: 15px;
|
||||
left: 20px;
|
||||
>div {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nft-name {
|
||||
@ -138,36 +178,57 @@ div {
|
||||
}
|
||||
}
|
||||
.status {
|
||||
font-family: 'Poppins';
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: #FFC35B;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 140px;
|
||||
min-width: 80px;
|
||||
color: #BB7FFF;
|
||||
.nft-price {
|
||||
font-family: 'Anton';
|
||||
font-weight: 400;
|
||||
font-size: 42px;
|
||||
color: #BB7FFF;
|
||||
}
|
||||
.nft-img {
|
||||
width: 43px;
|
||||
// height: 43px;
|
||||
margin-left: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
p {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.quantity {
|
||||
width: 60px;
|
||||
.nft-quantity {
|
||||
|
||||
.price-icon {
|
||||
width: 43px;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
}
|
||||
.from-to-icon {
|
||||
width: 34px;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
width: 34px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.nft-date {
|
||||
width: 120px;
|
||||
}
|
||||
.nft-contract {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #9950FD;
|
||||
font-size: 15px;
|
||||
span {
|
||||
border-bottom: 2px solid #9950FD;
|
||||
}
|
||||
img {
|
||||
width: 21px;
|
||||
height: 20px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,9 +3,27 @@ import { ethers } from "ethers"
|
||||
|
||||
// 计算价格精度
|
||||
export const priceCalculated = (price) => {
|
||||
return ethers.utils.formatUnits(price, 18)
|
||||
let str = Number(ethers.utils.formatUnits(price, 18)).toFixed(5)
|
||||
return str
|
||||
}
|
||||
|
||||
// 计算购买总价格
|
||||
export const completePrice = (cartList) => {
|
||||
let str = cartList[0].event.data.buy[0].amount
|
||||
console.log(str)
|
||||
return 0.001
|
||||
}
|
||||
|
||||
// 处理地址
|
||||
export const sliceAddress = (address) => {
|
||||
if (!address) return "-";
|
||||
if (address.length >= 10) {
|
||||
return `${address.substring(0, 6)}......${address.slice(-4)}`;
|
||||
}
|
||||
return address;
|
||||
}
|
||||
|
||||
// 处理时间
|
||||
export const timeFormat = (value) => {
|
||||
return moment(value).format('YYYY/MM/DD HH:mm')
|
||||
}
|
||||
@ -21,3 +39,9 @@ export const feePrice = (price) => {
|
||||
export const totalPrice = (price) => {
|
||||
return Number(Number(price) + Number(price) * 0.02 + Number(price) * 0.0005)
|
||||
}
|
||||
|
||||
// 处理时间回显
|
||||
export const showTime = (time) => {
|
||||
let str = time.split('.')
|
||||
return str[0]
|
||||
}
|
||||
@ -5,7 +5,8 @@
|
||||
<div class="content">
|
||||
<div class="top-left">
|
||||
<div class="top-left-img">
|
||||
<LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" />
|
||||
<!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
|
||||
<ImgCard :nftData="detailData.nft" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
@ -93,7 +94,7 @@
|
||||
<div class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="btm-detail">
|
||||
<li v-for="(item, val, index) in detailData.detail" :key="index">
|
||||
<li v-for="(item, val, index) in nftAbilities" :key="index">
|
||||
<div v-show="val == 'quality'">
|
||||
<h5>Tier</h5>
|
||||
<p>{{ item }}</p>
|
||||
@ -142,6 +143,7 @@
|
||||
<script setup>
|
||||
import { ref, toRaw, onMounted } from "vue"
|
||||
import { useRouter } from "vue-router";
|
||||
import ImgCard from "@/components/common/imgCard.vue"
|
||||
import StarTimer from "@/components/common/starTimer.vue"
|
||||
import SellDialog from "@/components/Dialogs/sellDialog.vue"
|
||||
import { nftDetail, apiGetPrice } from "@/utils/marketplace"
|
||||
@ -244,11 +246,6 @@ const sliceAddress = (address) => {
|
||||
return address;
|
||||
}
|
||||
|
||||
// 处理货币
|
||||
const priceWei = (price) => {
|
||||
return priceCalculated(price)
|
||||
}
|
||||
|
||||
// 获取地板价
|
||||
const getFloorPrice = async () => {
|
||||
const data = {
|
||||
@ -323,9 +320,26 @@ onMounted(() => {
|
||||
width: 453px;
|
||||
.top-left-img {
|
||||
height: 678px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
:deep(.card-img-common) {
|
||||
.img-top {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.img-btm {
|
||||
bottom: 35px;
|
||||
left: 65px;
|
||||
>div {
|
||||
width: 120px;
|
||||
height: 43px;
|
||||
font-size: 18px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user