723 lines
19 KiB
Vue
723 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header header-top">
|
|
<div class="header-left">
|
|
<div class="header-logo" @click="handlHome">
|
|
<img src="../../assets/img/home/game_logo01.png" alt="" />
|
|
</div>
|
|
<div class="nav">
|
|
<a
|
|
v-for="(nav, i) in navList"
|
|
:class="i === activeIndex ? 'active-nav-item' : 'nav-item'"
|
|
:key="i"
|
|
@click="handNavCurent(nav)"
|
|
>
|
|
{{ nav.name }}
|
|
<div class="dropdown">
|
|
<ul>
|
|
<li v-for="(item, index) in nav.submenu" :key="index">
|
|
<div
|
|
class="link-content"
|
|
>
|
|
<!-- @click="openThirdPartyLink(item.link)" -->
|
|
<a
|
|
class="link-name"
|
|
:href="item.link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>{{ item.label }}</a
|
|
>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="immutable-cart" v-if="isCart" @click="myCart">
|
|
<div class="immutable-cart-img">
|
|
<img src="@/assets/img/marketplace/Add_shopping_cart02.png" alt="">
|
|
</div>
|
|
<div v-if="localWalletStore.address" class="immutable-cart-amount">
|
|
<span v-if="marketplaceStore.getCartList">{{ marketplaceStore.getCartList.data?.length || 0 }}</span>
|
|
<span v-else>0</span>
|
|
</div>
|
|
</div>
|
|
<div class="metaMask-login" v-if="!localWalletStore.address" @click="immuTableLogin">Login</div>
|
|
<div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
|
|
<div class="metamask">
|
|
<div class="title">{{ localWalletStore.showAddress }}</div>
|
|
<svg @click="handleCopy" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
|
|
</svg>
|
|
</div>
|
|
<div class="menu" v-show="showMenu">
|
|
<div class="menu-item-icon" >
|
|
<div class="circle-btn" @click="showWalletWidget">
|
|
<svg viewBox="0 0 20 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M16.25 5.831a3.544 3.544 0 013.537 3.328l.007.216v6.25a3.544 3.544 0 01-3.328 3.537l-.216.007H3.75A3.544 3.544 0 01.213 15.84l-.007-.216V4.6c.002-.074 0-.15 0-.225A3.544 3.544 0 013.534.838L3.75.83h12.5a1.044 1.044 0 01.13 2.08l-.13.008H3.75a1.456 1.456 0 00-.159 2.904l.159.008h12.5z"></path></svg>
|
|
</div>
|
|
<div class="circle-btn" @click="showSwapWidget">
|
|
<svg viewBox="0 0 18 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1L1 5l4 4M1 5h16m-4 14l4-4-4-4m4 4H1"></path></svg>
|
|
</div>
|
|
<div class="circle-btn" @click="showBridgeWidget">
|
|
<svg viewBox="0 0 20 18" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 13l4 4 4-4m-4 4V1m14 4l-4-4-4 4m4-4v16"></path></svg>
|
|
</div>
|
|
<div class="circle-btn" @click="showOnrampWidget">
|
|
<svg viewBox="0 0 12 12" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.907.365c.48 0 .87.39.87.87l-.001 3.99 3.992.001a.87.87 0 010 1.74H6.776v3.991a.87.87 0 01-1.74 0V6.965h-3.99a.87.87 0 010-1.739h3.99V1.235c0-.48.39-.87.87-.87z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="menu-item" @click="immuTableLogout">Logout</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="wallet" class="wallet-widget"></div>
|
|
<Cart v-if="cartShow" @closeCart="closeCartBox" class="cart-con" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, onUnmounted, watchEffect, getCurrentInstance, watch, inject } from "vue";
|
|
const message = inject('$message')
|
|
const { proxy } = getCurrentInstance();
|
|
import { useAppStore } from "@/store/app";
|
|
import { hasMetamask } from "@/utils/chain.util";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";
|
|
import { useMarketplaceStore } from "@/store/marketplace"
|
|
|
|
import Cart from "@/components/cart/index.vue"
|
|
import { BlockChain } from "@/components/chain/BlockChain"
|
|
import {walletStore} from "@/store/wallet";
|
|
|
|
const localWalletStore = walletStore()
|
|
const marketplaceStore = useMarketplaceStore()
|
|
const AppModule = useAppStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const app = useAppStore();
|
|
const showMenu = ref(false);
|
|
const loginShowMenu = ref(false);
|
|
const dropdownVisible = ref(false);
|
|
const isCart = ref(false)
|
|
const cartShow = ref(false)
|
|
const activeIndex = ref(0);
|
|
const navList = reactive([
|
|
{ id: 0, name: "ABOUT", path: "/about" },
|
|
// { id: 1, name: "ASSETS", path: "https://pledge.kingsome.cn/" },
|
|
// { id: 1, name: "planet", path: "https://planet.kingsome.cn/" },
|
|
// {
|
|
// id: 2,
|
|
// name: "STAKE",
|
|
// path: "https://pledge.kingsome.cn",
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// name: "hashrate",
|
|
// path: "https://pledge.kingsome.cn",
|
|
// },
|
|
|
|
{
|
|
id: 1,
|
|
name: "COMMUNITY",
|
|
path: "/stake",
|
|
submenu: [
|
|
{ label: "Twitter", link: "https://x.com/playCounterFire" },
|
|
{
|
|
label: "Youtube",
|
|
link: "https://youtube.com/c/CryptoElitesBattlegrounds",
|
|
},
|
|
{
|
|
label: "Facebook",
|
|
link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d",
|
|
},
|
|
{ label: "Medium", link: "https://medium.com/@CounterFire" },
|
|
|
|
{ label: "Discord", link: "https://discord.gg/counterfire" },
|
|
],
|
|
},
|
|
// {
|
|
// id: 5,
|
|
// name: "EVENT",
|
|
// path: "/contact",
|
|
// submenu: [
|
|
// { label: "Badge", link: "https://badge.counterfire.games/" },
|
|
// {
|
|
// label: "Gacha",
|
|
// link: "https://gacha.counterfire.games/",
|
|
// },
|
|
// ],
|
|
// },
|
|
{
|
|
id: 2,
|
|
name: "MARKETPLACE",
|
|
path: "/marketplace",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "ASSETS",
|
|
path: "/assets",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "NOTICE",
|
|
path: "/notice",
|
|
}
|
|
]);
|
|
function click(event) {
|
|
router.push(event.key);
|
|
}
|
|
|
|
//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
|
|
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();
|
|
|
|
// const message = copied.value
|
|
// ? "Text copied!"
|
|
// : "Click the button to copy text.";
|
|
|
|
|
|
|
|
const handlHome = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
function handNavCurent(nav) {
|
|
activeIndex.value = nav.id;
|
|
// if (nav.id == 1) {
|
|
// window.open(nav.path, "_blank");
|
|
// } else
|
|
if(nav.id == 0) {
|
|
router.push(nav.path);
|
|
} else if(nav.id == 2) {
|
|
router.push(nav.path);
|
|
} else if(nav.id == 3) {
|
|
router.push(nav.path);
|
|
} else if(nav.id == 4) {
|
|
router.push(nav.path);
|
|
}
|
|
// if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
|
|
// window.open(nav.path, "_blank");
|
|
// } else if (nav.id == 5 || nav.id == 6) {
|
|
// dropdownVisible.value = true;
|
|
// } else {
|
|
// router.push(nav.path);
|
|
// }
|
|
}
|
|
function openThirdPartyLink(url) {
|
|
window.open(url, "_blank");
|
|
}
|
|
const handleCopy = (e) => {
|
|
e.stopPropagation();
|
|
const accountId = localWalletStore.address;
|
|
reset();
|
|
copyToClipboard(accountId).then(() => {
|
|
if (copied.value) {
|
|
message.success("address copied");
|
|
}
|
|
});
|
|
};
|
|
watchEffect(() => {
|
|
const index = navList.findIndex(
|
|
(navItem) => route.path.slice(0, 5) === navItem.path.slice(0, 5)
|
|
);
|
|
activeIndex.value = index !== -1 ? index : "";
|
|
});
|
|
|
|
const showWalletWidget = () => {
|
|
new BlockChain().widgets.showWallet();
|
|
};
|
|
const showSwapWidget = () => {
|
|
new BlockChain().widgets.showSwap();
|
|
};
|
|
const showOnrampWidget = () => {
|
|
new BlockChain().widgets.showOnramp();
|
|
};
|
|
const showBridgeWidget = () => {
|
|
new BlockChain().widgets.showBridge();
|
|
};
|
|
onUnmounted(() => {
|
|
new BlockChain().widgets.removeAll();
|
|
});
|
|
|
|
// --------------------------------
|
|
const immuTableLogin = async () => {
|
|
await new BlockChain().connect()
|
|
// try{
|
|
// const walletLogin = await new PassportWallet().connect()
|
|
// immutableStore.accessToken = walletLogin.accessToken
|
|
// immutableStore.accounts = walletLogin.accounts[0]
|
|
// localStorage.setItem('assessToken', walletLogin.accessToken)
|
|
// localStorage.setItem('assessAddress', walletLogin.accounts[0])
|
|
// // console.log(walletLogin)
|
|
// /*
|
|
// accessToken
|
|
// accounts
|
|
// profile:
|
|
|
|
// */
|
|
// // loginShowMenu.value = !loginShowMenu.value;
|
|
// // const list = await new PassportWallet().beginSellERC721({
|
|
// // contractAddress: '',
|
|
// // tokenId: ''
|
|
// // });
|
|
// // console.log(list)
|
|
// } catch (e) {
|
|
// console.log(e);
|
|
// }
|
|
}
|
|
//TODO::
|
|
const immuTableLogout = async () => {
|
|
try {
|
|
await new BlockChain().logout()
|
|
// localStorage.removeItem('assessToken')
|
|
// localStorage.removeItem('assessAddress')
|
|
// immutableStore.accessToken = ''
|
|
// immutableStore.accounts = ''
|
|
// await new PassportWallet().logout()
|
|
location.reload()
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
|
|
|
|
// 购物车
|
|
const myCart = async () => {
|
|
if(localWalletStore.address) {
|
|
cartShow.value = true
|
|
} else {
|
|
immuTableLogin()
|
|
}
|
|
}
|
|
|
|
const closeCartBox = () => {
|
|
cartShow.value = false
|
|
}
|
|
|
|
watch(() => route.path,(newPath, oldPath) => {
|
|
let routerPath = newPath.split('/')
|
|
if(routerPath[1] == 'marketplace' || routerPath[1] == 'assets' || routerPath[1] == 'detail' || routerPath[1] == 'notice') {
|
|
isCart.value = true
|
|
} else {
|
|
isCart.value = false
|
|
}
|
|
})
|
|
|
|
onMounted( async () => {
|
|
// if( immutableStore.accessToken) {
|
|
// await new PassportWallet().connect()
|
|
// }
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
position: fixed;
|
|
z-index: 19;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
// opacity: .6;
|
|
width: 100%;
|
|
height: 84px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 11px;
|
|
justify-content: space-between;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-logo {
|
|
margin-left: 64px;
|
|
width: 194px;
|
|
cursor: pointer;
|
|
height: 62px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
padding-left: 83px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// width: 830px;
|
|
a {
|
|
padding-top: 27px;
|
|
padding-bottom: 27px;
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 32px;
|
|
position: relative;
|
|
padding-left: 21px;
|
|
padding-right: 21px;
|
|
transition-property: color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: "Anton";
|
|
line-height: 30px;
|
|
color: #bb7fff !important;
|
|
cursor: pointer;
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 84px;
|
|
left: 50%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.84);
|
|
border-radius: 0px 0px 12px 12px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transform: translate(-50%, 0%);
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.dropdown ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dropdown li {
|
|
// padding-top: 10px;
|
|
// padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.link-content {
|
|
display: flex;
|
|
// width: 150px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.link-label {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li a {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
text-align: center; /* ensure text is centered */
|
|
width: 100%; /* make it span the full width */
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown li span {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.duration-200 {
|
|
transition-duration: 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
transition-property: color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: "Anton";
|
|
background-color: #bb7fff;
|
|
border-radius: 42px;
|
|
color: #000000 !important;
|
|
}
|
|
.nav-item:hover .dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.active-nav-item {
|
|
font-size: 32px;
|
|
font-family: "Anton";
|
|
position: relative;
|
|
padding-left: 21px;
|
|
padding-right: 21px;
|
|
line-height: 30px;
|
|
background-color: #bb7fff;
|
|
border-radius: 42px;
|
|
transition-property: color;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: #000000 !important;
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 84px;
|
|
left: 50%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.84);
|
|
border-radius: 0px 0px 12px 12px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transform: translate(-50%, 0%);
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.dropdown ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dropdown li {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.link-content {
|
|
display: flex;
|
|
// width: 150px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.link-label {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li a {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li span {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
// width: 228px;
|
|
// position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// right: 11px;
|
|
margin-right: 50px;
|
|
|
|
.metaMask-logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-left: 10px;
|
|
margin-right: 30px;
|
|
// padding-right:10px;
|
|
}
|
|
.metaMask-login {
|
|
width: 205px;
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #BB7FFF;
|
|
cursor: pointer;
|
|
background: #2d2738;
|
|
font-size: 24px;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
border: 2px solid #A767FF;
|
|
position: relative;
|
|
border-radius: 34px;
|
|
.menu {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 0px;
|
|
width: 218px;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
background-color: #252636;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
list-style: none;
|
|
border: 2px solid #A767FF;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.menu-item {
|
|
padding-left: 8px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
.login-icon {
|
|
width: 28px;
|
|
margin-right: 3px;
|
|
height: 28px;
|
|
}
|
|
.title {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
a:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
.metaMask-login-active {
|
|
width: 218px;
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #2d2738;
|
|
font-size: 20px;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
color: #BB7FFF;
|
|
border: 2px solid #A767FF;
|
|
border-radius: 34px;
|
|
.menu {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 0px;
|
|
width: 218px;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
background-color: #252636;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid #A767FF;
|
|
list-style: none;
|
|
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
|
|
}
|
|
.menu-item-icon {
|
|
height: 60px;
|
|
border-bottom: #bb7fff 1px solid;
|
|
margin: 5px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.circle-btn{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 2px solid #bb7fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.menu-item {
|
|
padding: 5px 15px;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
// padding-top: 10px;
|
|
justify-content: center;
|
|
height: 40px;
|
|
margin: 10px auto;
|
|
.title {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
a:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.metamask{
|
|
display: flex;
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
.immutable-cart {
|
|
color: #fff;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
.immutable-cart-img {
|
|
width: 53px;
|
|
height: 49px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.immutable-cart-amount {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: red;
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.immutable-login {
|
|
width: 120px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background: #bb7fff;
|
|
border-radius: 26px;
|
|
}
|
|
}
|
|
|
|
.link-name {
|
|
position: relative;
|
|
.link-img {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: -18px;
|
|
}
|
|
}
|
|
.cart-con {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 84px;
|
|
background: #1e1b23;
|
|
z-index: 999;
|
|
}
|
|
.wallet-widget {
|
|
position: fixed;
|
|
top: 84px;
|
|
right: 0;
|
|
z-index: 10000;
|
|
}
|
|
</style>
|