marketplace
This commit is contained in:
yuyongdong
parent
5ad8d77a70
commit
b5ac4c6cc9
78
src/App.vue
78
src/App.vue
@ -69,4 +69,82 @@ html {
|
||||
position: relative;
|
||||
//background: #0c0c18;
|
||||
}
|
||||
div,
|
||||
span,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
abbr,
|
||||
address,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
samp,
|
||||
small,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
var,
|
||||
b,
|
||||
i,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
list-style: none;
|
||||
word-break: keep-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
@ -14,7 +14,7 @@
|
||||
<img src="@/assets/img/about/gameWeb_aboutP4_news1.png" />
|
||||
</div>
|
||||
<div class="news-footer">
|
||||
<a href="https://twitter.com/_CounterFire">More news follow our twitter>></a>
|
||||
<a href="https://twitter.com/_CounterFire" target="_blank">More news follow our twitter>></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-item right">
|
||||
|
||||
50
src/components/common/card.vue
Normal file
50
src/components/common/card.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="cards">
|
||||
<div class="card-top">
|
||||
{{nftData.name}}
|
||||
<div class="card-img">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-btn"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, getCurrentInstance } from "vue"
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
nftData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
// const nftData = proxy.props.nftData
|
||||
onMounted(() => {
|
||||
console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cards {
|
||||
background: #2d2738;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
// padding: 20px;
|
||||
overflow: hidden;
|
||||
.card-top {
|
||||
padding: 20px 30px;
|
||||
background: rgba(0,0,0, .5);
|
||||
}
|
||||
.card-btn {
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
// padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
background: #1778f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/components/common/searchView/Overview.vue
Normal file
0
src/components/common/searchView/Overview.vue
Normal file
0
src/components/common/searchView/Price.vue
Normal file
0
src/components/common/searchView/Price.vue
Normal file
@ -113,6 +113,7 @@ const blueChipList = [
|
||||
// background-color: #000;
|
||||
color: #fff;
|
||||
padding-left: 50px;
|
||||
padding-top: 84px;
|
||||
.chip-title{
|
||||
width: 459px;
|
||||
height: 94px;
|
||||
|
||||
@ -204,6 +204,7 @@ const selectChange = (index) => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 51px;
|
||||
padding-top: 84px;
|
||||
position: relative;
|
||||
.hero-shadow-bg {
|
||||
position: absolute;
|
||||
@ -345,7 +346,6 @@ const selectChange = (index) => {
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
font-size: 90px;
|
||||
font-weight: 700;
|
||||
font-family: 'Anton';
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
@ -194,7 +194,7 @@ const changeContent = () => {};
|
||||
// padding: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
// padding-top: 84px;
|
||||
padding-left: 110px;
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -173,6 +173,7 @@ const onSlideChange = (swiper) => {
|
||||
padding-left: 50px;
|
||||
padding-right: 280px;
|
||||
padding-bottom: 100px;
|
||||
padding-top: 84px;
|
||||
position: relative;
|
||||
.weapon_title {
|
||||
width: 816px;
|
||||
|
||||
@ -58,15 +58,15 @@
|
||||
<div>
|
||||
{{
|
||||
isPveTab !== true
|
||||
? " In Counter Fire's MOBA mode, two teams of 4 heroes battle strategically on a traditional MOBA map."+
|
||||
" Points are scored by defeating opponents, and the first team to reach 12 points or the highest score within"+
|
||||
" 3 minutes wins. Players gain experience by defeating foes and monsters, reaching a maximum level of 10. "+
|
||||
"Upgrades are exclusive to the current match, enabling players to craft unique skills and tactics."
|
||||
: " In the Honor Battle, 20 players skydive onto the map, kicking off an intense battle royale. "+
|
||||
? "In the Honor Battle, 20 players skydive onto the map, kicking off an intense battle royale. "+
|
||||
"Upon landing, they quickly scavenge for weapons and gear, vying for resources. "+
|
||||
"The map progressively shrinks, pushing players into tighter spaces and adding time pressure. "+
|
||||
"Red warning zones and airstrikes heighten the intensity, forcing players to navigate survival within a 3-minute window. "+
|
||||
"Each battle royale offers a gripping and exhilarating digital survival experience. "
|
||||
: " In Counter Fire's MOBA mode, two teams of 4 heroes engage in strategic battles on a traditional MOBA map. "+
|
||||
"Points are scored by defeating opponents, and the team with the higher score at the end of the 6-minute match wins. "+
|
||||
"Players gain experience by defeating foes and monsters, reaching a maximum level of 10. "+
|
||||
"Upgrades are exclusive to the current match, allowing players to craft unique skills and tactics. "
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
@ -205,8 +205,7 @@ const handTabActive = (value) => {
|
||||
font-size: 42px;
|
||||
// gap: 34px;
|
||||
align-items: center;
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
font-family: "Anton";
|
||||
color: #000000;
|
||||
}
|
||||
.pve {
|
||||
@ -219,8 +218,7 @@ const handTabActive = (value) => {
|
||||
// gap: 34px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
font-family: "Anton";
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ const downloadGame = (platform) => {
|
||||
|
||||
.background-img {
|
||||
width: 100%;
|
||||
padding-top: 84px;
|
||||
// padding-top: 84px;
|
||||
height: 100%;
|
||||
// background: url('../../assets/img/home/gameWeb_KV.png') no-repeat;
|
||||
background: url('../../assets/img/home/new-img/gameWeb_KV.png') no-repeat;
|
||||
@ -91,7 +91,7 @@ const downloadGame = (platform) => {
|
||||
.overlay {
|
||||
position: absolute;
|
||||
// top: 204px;
|
||||
bottom: -250px;
|
||||
bottom: -220px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -90,8 +90,8 @@ const loginShowMenu = ref(false);
|
||||
const dropdownVisible = 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: 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,
|
||||
@ -106,7 +106,7 @@ const navList = reactive([
|
||||
|
||||
{
|
||||
id: 4,
|
||||
name: "Community",
|
||||
name: "COMMUNITY",
|
||||
path: "/stake",
|
||||
submenu: [
|
||||
{ label: "Twitter", link: "https://twitter.com/_CounterFire" },
|
||||
@ -125,7 +125,7 @@ const navList = reactive([
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "event",
|
||||
name: "EVENT",
|
||||
path: "/contact",
|
||||
submenu: [
|
||||
{ label: "Badge", link: "https://badge.counterfire.games/" },
|
||||
@ -135,6 +135,11 @@ const navList = reactive([
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Marketplace",
|
||||
path: "/marketplace",
|
||||
}
|
||||
]);
|
||||
|
||||
function click(event) {
|
||||
@ -187,6 +192,8 @@ function handNavCurent(nav) {
|
||||
window.open(nav.path, "_blank");
|
||||
} else if(nav.id == 0) {
|
||||
router.push(nav.path);
|
||||
} else if(nav.id == 6) {
|
||||
router.push(nav.path);
|
||||
}
|
||||
// if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
|
||||
// window.open(nav.path, "_blank");
|
||||
@ -233,7 +240,8 @@ const immuTableLogin = async () => {
|
||||
z-index: 19;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #19151E;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
// opacity: .6;
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
display: flex;
|
||||
@ -269,13 +277,12 @@ const immuTableLogin = async () => {
|
||||
.nav-item {
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
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: "Big John";
|
||||
font-family: "Anton";
|
||||
line-height: 30px;
|
||||
color: #bb7fff !important;
|
||||
.dropdown {
|
||||
@ -343,7 +350,7 @@ const immuTableLogin = async () => {
|
||||
transition-property: color;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-family: "Big John";
|
||||
font-family: "Anton";
|
||||
background-color: #bb7fff;
|
||||
border-radius: 42px;
|
||||
color: #000000 !important;
|
||||
@ -355,9 +362,8 @@ const immuTableLogin = async () => {
|
||||
|
||||
.active-nav-item {
|
||||
font-size: 32px;
|
||||
font-family: "Big John";
|
||||
font-family: "Anton";
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
padding-left: 21px;
|
||||
padding-right: 21px;
|
||||
line-height: 30px;
|
||||
@ -441,14 +447,14 @@ const immuTableLogin = async () => {
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
color: #9588AC;
|
||||
color: #BB7FFF;
|
||||
cursor: pointer;
|
||||
background: #2d2738;
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
border: 2px solid #A767FF;
|
||||
position: relative;
|
||||
border-radius: 34px;
|
||||
.menu {
|
||||
@ -460,10 +466,10 @@ const immuTableLogin = async () => {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
background-color: #252636;
|
||||
border-radius: 5px;
|
||||
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 {
|
||||
@ -476,6 +482,8 @@ const immuTableLogin = async () => {
|
||||
padding-bottom: 10px;
|
||||
color: #f5f5f5;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
.login-icon {
|
||||
width: 28px;
|
||||
margin-right: 3px;
|
||||
@ -495,26 +503,27 @@ const immuTableLogin = async () => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background: #2a2b3e;
|
||||
background: #2d2738;
|
||||
font-size: 20px;
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
color: #eeecff;
|
||||
border-radius: 10px;
|
||||
color: #BB7FFF;
|
||||
border: 2px solid #A767FF;
|
||||
border-radius: 34px;
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
top: 75px;
|
||||
right: 0px;
|
||||
width: 218px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: #252636;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
@ -528,7 +537,8 @@ const immuTableLogin = async () => {
|
||||
padding: 5px 15px;
|
||||
color: #f5f5f5;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
// padding-top: 10px;
|
||||
justify-content: center;
|
||||
.title {
|
||||
|
||||
136
src/components/marketplace/mktContent.vue
Normal file
136
src/components/marketplace/mktContent.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="mkt-content">
|
||||
|
||||
<div class="mkt-content-left">
|
||||
搜索
|
||||
</div>
|
||||
<div class="mkt-content-right">
|
||||
<div class="mkt-content-right-header">
|
||||
<div class="bg-cor"></div>
|
||||
<div class="results-total">13 results</div>
|
||||
<div class="search-list">
|
||||
<li>Hero: Hill/Yamada <span>×</span></li>
|
||||
<li class="clear-all">Clear All</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mkt-content-right-content">
|
||||
<div class="pages">
|
||||
<li v-for="(item, index) in nftList" :key="index">
|
||||
<Card :nftData="item" />
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import Card from '@/components/common/card.vue'
|
||||
const nftList = ref([
|
||||
{
|
||||
name: '1111',
|
||||
id: '1111',
|
||||
},
|
||||
{
|
||||
name: '2222',
|
||||
id: '2222',
|
||||
},
|
||||
{
|
||||
name: '3333',
|
||||
id: '3333',
|
||||
},
|
||||
{
|
||||
name: '4444',
|
||||
id: '4444',
|
||||
},
|
||||
{
|
||||
name: '5555',
|
||||
id: '5555',
|
||||
},
|
||||
{
|
||||
name: '6666',
|
||||
id: '6666',
|
||||
},
|
||||
{
|
||||
name: '7777',
|
||||
id: '7777',
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mkt-content {
|
||||
background: #666;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.mkt-content-left {
|
||||
width: 300px;
|
||||
background: greenyellow;
|
||||
}
|
||||
.mkt-content-right {
|
||||
width: calc(100% - 300px);
|
||||
padding-right: 40px;
|
||||
.mkt-content-right-header {
|
||||
width: calc(100% - 10px);
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #3a3b57;
|
||||
.bg-cor {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #18ff00;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.results-total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #b3b5da;
|
||||
}
|
||||
.search-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
li {
|
||||
margin-left: 10px;
|
||||
background: #2d2738;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clear-all {
|
||||
background: #5a4a6d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mkt-content-right-content {
|
||||
margin-top: 30px;
|
||||
.pages {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
clear: both;
|
||||
li {
|
||||
width: calc(25% - 10px);
|
||||
// height: 360px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/components/marketplace/mktHeader.vue
Normal file
17
src/components/marketplace/mktHeader.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="mkt-header">
|
||||
12121
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mkt-header {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import AboutView from "../views/AboutView.vue";
|
||||
import MarketplaceView from "../views/MarketplaceView.vue";
|
||||
import PrivacyView from '../views/PrivacyView.vue';
|
||||
import TermsView from '../views/TermsView.vue';
|
||||
const routes = [
|
||||
@ -22,6 +23,15 @@ const routes = [
|
||||
canonical: "https://.counterfire.games",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/marketplace",
|
||||
name: "Marketplace",
|
||||
component: MarketplaceView,
|
||||
meta: {
|
||||
title: "Counter Fire-Marketplace",
|
||||
canonical: "https://.counterfire.games",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/privacy",
|
||||
name: "Privacy",
|
||||
|
||||
23
src/views/MarketplaceView.vue
Normal file
23
src/views/MarketplaceView.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="market">
|
||||
<MktHeader />
|
||||
<MktContent class="content" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 引入想要效果模块
|
||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import MktHeader from '@/components/marketplace/mktHeader.vue'
|
||||
import MktContent from '@/components/marketplace/mktContent.vue'
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.market {
|
||||
padding-top: 84px;
|
||||
}
|
||||
</style>
|
||||
@ -5,11 +5,13 @@ import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
import prerender from 'vite-plugin-prerender'
|
||||
import nodePolyfills from 'rollup-plugin-polyfill-node';
|
||||
// import {nodePolyfills} from 'vite-plugin-node-polyfills'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
nodePolyfills()
|
||||
// requireTransform({
|
||||
// fileRegex: /.js$|.vue$/,
|
||||
// }),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user