huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加弹窗提示，中心化资产详情

Browse Source
This commit is contained in:
yuyongdong 2024-07-18 15:58:59 +08:00
parent bcdfbb107f
commit 7644281227
10 changed files with 222 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/marketplace/totalContribution.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

53
src/components/assets/assetsHeader.vue
View File

@ -5,7 +5,17 @@
<img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image"> <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
<img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image"> <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
</div> </div>
<div class="assets-user-name">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div> <div class="assets-user-name">
<div>{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
<div class="total">
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
<span>Total contribution:&nbsp; 999999999</span>
</div>
<div class="day">
<span>Contribution are expected daily:&nbsp;&nbsp; +150000/d</span>
<img @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
</div>
</div>
<div> <div>
</div> </div>
</div> </div>
@ -164,6 +174,11 @@
</div> </div>
</a-modal> </a-modal>
</div> </div>
<div ref="rulesModel">
<a-modal :class="'rulesModal'" :getContainer="() => $refs.rulesModel" v-model:open="rulesDialogVisible" :footer="null" :maskClosable="false">
<div>1212121</div>
</a-modal>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -207,6 +222,8 @@ const confirmCec = () => {
} }
const rulesDialogVisible = ref(false)
const cecInfo = ref({ const cecInfo = ref({
total: 0, total: 0,
available: '', available: '',
@ -303,6 +320,37 @@ onMounted(() => {
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 30px;
color: #FFFFFF; color: #FFFFFF;
background: rgba(26,24,33, .5);
border-radius: 40px;
padding: 20px;
>div {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.total {
font-family: 'Poppins';
font-weight: bold;
font-size: 18px;
color: #00DEFF;
img {
width: 27px;
height: 23px;
margin-right: 10px;
}
}
.day {
font-family: 'Poppins';
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
img {
width: 30px;
height: 30px;
margin-left: 10px;
cursor: pointer;
}
}
} }
} }
.uaw-listing { .uaw-listing {
@ -656,5 +704,8 @@ onMounted(() => {
} }
} }
} }
:deep(.rulesModal) {
background: #1a1821;
}
} }
</style> </style>

43
src/components/assets/cenCard.vue
View File

@ -1,15 +1,12 @@
<template> <template>
<div class="cards"> <div class="cards">
<div class="card-top" v-if="nftData"> <div class="card-top" v-if="nftData">
<div class="card-img"> <div class="card-img" @click="toDetail">
<!-- @click="toDetail" -->
<ImgCard :nftData="nftData" /> <ImgCard :nftData="nftData" />
<!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
</div> </div>
<div class="card-name"> <div class="card-name">
<div> <div>
<span v-if="nftData.type == 1">HERO</span> <span v-if="nftData.type == 1">HERO</span>
<span v-if="nftData.type == 11">GOLD CARD</span>
</div> </div>
<div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)"> <div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
<img src="@/assets/img/marketplace/On_SeLL.png" alt=""> <img src="@/assets/img/marketplace/On_SeLL.png" alt="">
@ -20,16 +17,13 @@
<div v-show="nftData.on_sale == 1"> <div v-show="nftData.on_sale == 1">
<span> <span>
{{ nftPrice }} {{ nftPrice }}
<!-- {{cardPrice(nftData)}} -->
</span> </span>
<img :src="icon" alt=""> <img :src="icon" alt="">
</div> </div>
</div> </div>
<div class="link-below" @click="mintHero()"> <div class="link-below" @click="mintHero()">
<!-- Convert -->
<img src="@/assets/img/marketplace/Off-Chain.png" alt=""> <img src="@/assets/img/marketplace/Off-Chain.png" alt="">
</div> </div>
<!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
</div> </div>
</div> </div>
<div class="card-btn"> <div class="card-btn">
@ -52,6 +46,7 @@ import LazyLoadImg from "@/components/lazyloadimg"
import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png' import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
import {createModal} from "@/utils/model.util"; import {createModal} from "@/utils/model.util";
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue" import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
import { useMarketplaceStore } from "@/store/marketplace"
import { timeFormat } from "@/configs/priceCalculate" import { timeFormat } from "@/configs/priceCalculate"
const emit = defineEmits(['renewMyNft']) const emit = defineEmits(['renewMyNft'])
import {formatPrice} from "@/components/chain/utils" import {formatPrice} from "@/components/chain/utils"
@ -66,6 +61,7 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const marketplaceStore = useMarketplaceStore()
// 获取地板价 // 获取地板价
const floorPrice = ref('0') const floorPrice = ref('0')
@ -154,15 +150,19 @@ const lockToGame = async(type) => {
} }
// mint一个英雄 // mint一个英雄
const mintHero = async () => { const mintHero = async () => {
// const confirmResult = await createModal(ConfirmDialog, { try {
// title: '',
// message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
// }).show()
// if (confirmResult.errcode == 0) {
// loadingDialogVisible.value = true
const res = await new BlockChain().locker.mintNft([toRaw(props.nftData).uniid]) const res = await new BlockChain().locker.mintNft([toRaw(props.nftData).uniid])
console.log(res) message.success('Mint success.')
// } emit('renewMyNft')
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else if (e.message.indexOf('select wallet') > -1) {
message.error('user cancel select wallet')
} else {
message.error('Mint Failed.')
}
}
} }
const lockToGameConfirm = async () => { const lockToGameConfirm = async () => {
try { try {
@ -187,21 +187,12 @@ const lockToGameConfirm = async () => {
// 获取出售中价格价格 // 获取出售中价格价格
const nftPrice = ref('-') const nftPrice = ref('-')
const icon = ref('') const icon = ref('')
const cardPrice = async (val) => {
let nftData = await getNftData(toRaw(val))
// console.log(nftData)
if (nftData?.event?.data) {
const data = formatPrice(nftData?.event?.data)
icon.value = data.icon
nftPrice.value = data.tokenAmount
}
}
// 去详情页面 // 去详情页面
const toDetail = () => { const toDetail = () => {
router.push(`/detail/${props.nftData.contract_address}/${props.nftData.token_id}`) marketplaceStore.detailData = {nft: props.nftData}
router.push('/detail')
} }
// 关闭弹窗 // 关闭弹窗

16
src/components/assets/centralization.vue
View File

@ -103,14 +103,14 @@ const getMyAssets = async () => {
// console.log(res,'----------------------') // console.log(res,'----------------------')
// return // return
nftList.value = [...nftList.value, ...res.rows] nftList.value = [...nftList.value, ...res.rows]
nftListBox = nftList.value.reduce((acc, obj) => { // nftListBox = nftList.value.reduce((acc, obj) => {
const existingObj = acc.find(item => item.token_id == obj.token_id) // const existingObj = acc.find(item => item.uniid == obj.uniid)
if(!existingObj) { // if(!existingObj) {
acc.push(obj) // acc.push(obj)
} // }
return acc // return acc
},[]) // },[])
nftList.value = nftListBox // nftList.value = nftListBox
// marketplaceStore.cursorObj = res.page // marketplaceStore.cursorObj = res.page
// next_cursor.value = res.page.next_cursor // next_cursor.value = res.page.next_cursor
} catch(e) { } catch(e) {

27
src/components/assets/imgs.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="imgs"> <div class="imgs">
<div class="imgs-bg"> <div class="imgs-bg">
<img :src="heroBgImageUrl" alt=""> <img :src="qualityImgList[props.nftData.detail.quality].bgImg" alt="">
</div> </div>
<div class="imgs-img"> <div class="imgs-img">
<img :src="heroImageUrl" alt=""> <img :src="heroImg[props.nftData.name].img" alt="">
</div> </div>
<div class="imgs-day"> <div class="imgs-day">
{{ nftData.detail.max_mining_days }} {{ nftData.detail.max_mining_days }}
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="imgs-quality"> <div class="imgs-quality">
<img :src="qualityImageUrl" alt=""> <img :src="qualityImgList[props.nftData.detail.quality].qualityImg" alt="">
</div> </div>
<div class="imgs-name"> <div class="imgs-name">
{{ nftData.name }} {{ nftData.name }}
@ -30,32 +30,13 @@
<script setup> <script setup>
import { ref, computed, toRaw } from "vue" import { ref, computed, toRaw } from "vue"
import { heroImg, qualityImgList } from "@/configs/cenImg"
const props = defineProps({ const props = defineProps({
nftData: { nftData: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
console.log(props.nftData, '----------------------nftDatanftDatanftDatanftData')
const heroImageUrl = computed(() => {
// let imgUrl = `https://res.counterfire.games/headimg/0001.png`
let imgUrl = `./../../assets/img/marketplace/hero/${toRaw(props.nftData).name}.png`
return new URL(imgUrl, import.meta.url).href;
});
const heroBgImageUrl = computed(() => {
// let imgUrl = `https://res.counterfire.games/headimg/0001.png`
let imgUrl = `./../../assets/img/marketplace/hero/hero_cardBg0${toRaw(props.nftData).detail.quality}.png`
return new URL(imgUrl, import.meta.url).href;
});
const qualityImageUrl = computed(() => {
// let imgUrl = `https://res.counterfire.games/headimg/0001.png`
let imgUrl = `./../../assets/img/marketplace/hero/rarityLevel_bg${toRaw(props.nftData).detail.quality}.png`
return new URL(imgUrl, import.meta.url).href;
});
</script> </script>

35
src/components/assets/myCard.vue
View File

@ -23,16 +23,20 @@
</span> </span>
<img :src="icon" alt=""> <img :src="icon" alt="">
</div> </div>
<div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()">
<span>22</span>
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
</div>
</div> </div>
<div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)"> <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)">
<img src="@/assets/img/marketplace/Staking.png" alt=""> <img src="@/assets/img/marketplace/Staking.png" alt="">
</div> </div>
<!-- <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')"> <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
Redeem Redeem
</div> </div>
<div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')"> <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
Convert Convert
</div> --> </div>
<!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> --> <!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
</div> </div>
</div> </div>
@ -198,14 +202,25 @@ const cardPrice = async (val) => {
// 赎回 // 赎回
const unStake = async (data) => { const unStake = async (data) => {
const bc = new BlockChain() try {
let res = await bc.locker.unlockOrMintGameNft(toRaw(data).contract_address,[toRaw(data).token_id]) const bc = new BlockChain()
if(res) { let res = await bc.locker.unlockOrMintGameNft(toRaw(data).contract_address,[toRaw(data).token_id])
let timer = setTimeout(() => { if(res) {
message.success('Unstake success.') let timer = setTimeout(() => {
emit('renewMyNft') message.success('Unstake success.')
clearTimeout(timer); emit('renewMyNft')
}, 2000); clearTimeout(timer);
}, 2000);
}
} catch (e) {
console.log(e)
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else if (e.message.indexOf('select wallet') > -1) {
message.error('user cancel select wallet')
} else {
message.error('Unstake fail')
}
} }
} }

55
src/configs/cenImg.js Normal file
View File

@ -0,0 +1,55 @@
export const heroImg = {
Aoi: {
img: new URL("@/assets/img/marketplace/hero/Aoi.png",import.meta.url).href,
},
Astral: {
img: new URL("@/assets/img/marketplace/hero/Astral.png",import.meta.url).href,
},
Canoe: {
img: new URL("@/assets/img/marketplace/hero/Canoe.png",import.meta.url).href,
},
Dragonscale: {
img: new URL("@/assets/img/marketplace/hero/Dragonscale.png",import.meta.url).href,
},
Hill: {
img: new URL("@/assets/img/marketplace/hero/Hill.png",import.meta.url).href,
},
Kurosawa: {
img: new URL("@/assets/img/marketplace/hero/Kurosawa.png",import.meta.url).href,
},
Lazar: {
img: new URL("@/assets/img/marketplace/hero/Lazar.png",import.meta.url).href,
},
Mariana: {
img: new URL("@/assets/img/marketplace/hero/Mariana.png",import.meta.url).href,
},
Miffy: {
img: new URL("@/assets/img/marketplace/hero/Miffy.png",import.meta.url).href,
},
Yamada: {
img: new URL("@/assets/img/marketplace/hero/Yamada.png",import.meta.url).href,
}
}
export const qualityImgList = {
1: {
bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg01.png",import.meta.url).href,
qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg1.png",import.meta.url).href,
},
2: {
bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg02.png",import.meta.url).href,
qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg2.png",import.meta.url).href,
},
3: {
bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg03.png",import.meta.url).href,
qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg3.png",import.meta.url).href,
},
4: {
bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg04.png",import.meta.url).href,
qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg4.png",import.meta.url).href,
},
5: {
bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg05.png",import.meta.url).href,
qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg5.png",import.meta.url).href,
}
}

3
src/router/index.js
View File

@ -37,8 +37,9 @@ const routes = [
}, },
{ {
path: "/detail", path: "/detail",
name: "Detail", name: "CDetail",
component: Detail, component: Detail,
props: true,
meta: { meta: {
title: "Counter Fire-Detail", title: "Counter Fire-Detail",
canonical: "https://.counterfire.games", canonical: "https://.counterfire.games",

2
src/store/marketplace.js
View File

@ -40,6 +40,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
] ]
} }
}) })
const detailData = ref()
const updateOverviewStatus = (_connected) => { const updateOverviewStatus = (_connected) => {
overview.value = _connected; overview.value = _connected;
@ -101,6 +102,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
addCartListState, addCartListState,
delCartListState, delCartListState,
currencyPrice,priceDatas, currencyPrice,priceDatas,
detailData,
} }
}, },
{ {

68
src/views/DetailView.vue
View File

@ -13,7 +13,7 @@
<h2>{{ detailData.nft.name }}</h2> <h2>{{ detailData.nft.name }}</h2>
<div class="top-right-owner"> <div class="top-right-owner">
<div>Owner:</div> <div>Owner:</div>
<div class="address">{{ detailData.nft.owner_address }}</div> <div class="address">{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</div>
</div> </div>
<div class="top-right-price" v-if="detailData.event"> <div class="top-right-price" v-if="detailData.event">
<li> <li>
@ -39,6 +39,9 @@
<div v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()"> <div v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
<div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div> <div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div>
</div> </div>
<div v-else>
<div class="mint" @click="mintHero">Mint</div>
</div>
<!-- <!--
1、添加购物车 1、添加购物车
2、移除购物车 2、移除购物车
@ -80,12 +83,12 @@
<li> <li>
<div>Token ID</div> <div>Token ID</div>
<div> <div>
<a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id }}</a> <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
</div> </div>
</li> </li>
<li> <li>
<div>Blockchain</div> <div>Blockchain</div>
<div>lmmutascan</div> <div>{{ detailData.nft.token_id ? 'lmmutascan' : '-' }}</div>
</li> </li>
<li> <li>
<div>Metadata</div> <div>Metadata</div>
@ -93,7 +96,7 @@
</li> </li>
<li> <li>
<div>Royalties</div> <div>Royalties</div>
<div>2%</div> <div>{{ detailData.nft.token_id ? '2%' : '-' }}</div>
</li> </li>
</div> </div>
</div> </div>
@ -170,9 +173,9 @@
</template> </template>
<script setup> <script setup>
import { ref, toRaw, onMounted , inject} from "vue" import { ref, toRefs, toRaw, onMounted , inject} from "vue"
const message = inject('$message') const message = inject('$message')
import { useRouter } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import BuyDialog from "@/components/Dialogs/buyDialog.vue" import BuyDialog from "@/components/Dialogs/buyDialog.vue"
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue" import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
import LoadingDialog from "@/components/Dialogs/loadingDialog.vue" import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
@ -189,6 +192,7 @@ import LazyLoadImg from "@/components/lazyloadimg"
import {formatPrice} from "@/components/chain/utils" import {formatPrice} from "@/components/chain/utils"
import {createModal} from "@/utils/model.util"; import {createModal} from "@/utils/model.util";
const router = useRouter(); const router = useRouter();
const route = useRoute();
const localWalletStore = walletStore() const localWalletStore = walletStore()
const marketplaceList = useMarketplaceStore() const marketplaceList = useMarketplaceStore()
const props = defineProps({ const props = defineProps({
@ -197,6 +201,7 @@ const props = defineProps({
}) })
import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png' import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
const detailData = ref(null) const detailData = ref(null)
const assetsDetailData = ref(null)
const myAddress = localWalletStore.address const myAddress = localWalletStore.address
const contractBlankUrl = ref() const contractBlankUrl = ref()
const contractTokenUrl = ref() const contractTokenUrl = ref()
@ -329,8 +334,26 @@ const lockToGameConfirm = async () => {
} }
// 赎回 // 赎回
const backStaking = () => { const backStaking = async () => {
console.log('---') try {
const bc = new BlockChain()
let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
if(res) {
let timer = setTimeout(() => {
message.success('Unstake success.')
router.go(-1)
clearTimeout(timer);
}, 2000);
}
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else if (e.message.indexOf('select wallet') > -1) {
message.error('user cancel select wallet')
} else {
message.error('Unstake fail')
}
}
} }
@ -417,6 +440,23 @@ const sellHandleClose = (val) => {
} }
} }
// mint上链
const mintHero = async () => {
try {
const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid])
message.success('Mint success.')
router.go(-1)
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else if (e.message.indexOf('select wallet') > -1) {
message.error('user cancel select wallet')
} else {
message.error('Mint Failed.')
}
}
}
const getDetail = async () => { const getDetail = async () => {
let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid) let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}` contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`
@ -437,11 +477,14 @@ const getDetail = async () => {
price.value = _data.tokenAmount price.value = _data.tokenAmount
} }
// console.log(detailData.value,contractBlankUrl.value,import.meta.env.VUE_APP_NET_ID,import.meta.env.VUE_APP_GPAL_API,`${import.meta.env.VUE_APP_EXPLORER_URL}${data.nft.contract_address}`,'----')
} }
onMounted(() => { onMounted(() => {
getDetail() if(location.pathname.length > 8) {
getDetail()
} else {
detailData.value = marketplaceList.detailData
nftAbilities.value = marketplaceList.detailData.nft.detail
}
}) })
</script> </script>
@ -652,6 +695,9 @@ onMounted(() => {
width: 348px; width: 348px;
background: #1778f1; background: #1778f1;
} }
.mint {
background: #6336d7;
}
} }
} }
.info { .info {