marketplace

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>

src/components/about/LatestNew.vue

@@ -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">

src/components/common/card.vue

@@ -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>

src/components/home/ChipCard.vue

@@ -113,6 +113,7 @@ const blueChipList = [
   //   background-color: #000;
   color: #fff;
   padding-left: 50px;
+  padding-top: 84px;
   .chip-title{
     width: 459px;
     height: 94px;

src/components/home/HeroCard.vue

@@ -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;
   }

src/components/home/HeroWeaponChipSelector.vue

@@ -194,7 +194,7 @@ const changeContent = () => {};
     // padding: 20px;
     width: 100%;
     height: 100%;
-    padding-top: 84px;
+    // padding-top: 84px;
     padding-left: 110px;
     position: relative;
 

src/components/home/WeaponCard.vue

@@ -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;

src/components/home/WhatCounterFire.vue

@@ -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."+
+                ? "In the Honor Battle, 20 players skydive onto the map, kicking off an intense battle royale. "+
-                " 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. "+
                 "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-family: "Anton";
-        font-weight: 400;
         color: #000000;
       }
       .pve {
@@ -219,8 +218,7 @@ const handTabActive = (value) => {
         // gap: 34px;
         align-items: center;
         justify-content: center;
-        font-family: "Poppins";
+        font-family: "Anton";
-        font-weight: 400;
         color: #fff;
       }
     }

src/components/home/banner.vue

@@ -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%;

src/components/layout/NavBar.vue

@@ -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: 0, name: "ABOUT", path: "/about" },
-  { id: 1, name: "assets", path: "https://pledge.kingsome.cn/" },
+  { 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;
+    color: #BB7FFF;
-    border-radius: 10px;
+    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 {

src/components/marketplace/mktContent.vue

@@ -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>

src/components/marketplace/mktHeader.vue

@@ -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>

src/router/index.js

@@ -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",

src/views/MarketplaceView.vue

@@ -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>

vite.config.js

@@ -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$/,
     // }),