cec staking

src/components/layout/NavBar.vue

@@ -20,13 +20,16 @@
                     class="link-content"
                   >
                   <!-- @click="openThirdPartyLink(item.link)" -->
+                  <!-- target="_blank" -->
                     <a
+                      v-if="nav.name != 'STAKING'"
                       class="link-name"
                       :href="item.link"
-                      target="_blank"
                       rel="noopener noreferrer"
                       >{{ item.label }}</a
                     >
+                    <a v-else @click="itemPathLink(item.path)">{{ item.label }}</a>
+                    <!-- <span v-else @click="itemPathLink(item.path)">{{ item.label }}</span> -->
                   </div>
                 </li>
               </ul>
@@ -213,6 +216,21 @@ const navList = reactive([
     name: "CLAIM",
     path: "/claim",
   },
+  {
+    id: 8,
+    name: "STAKING",
+    path: "/staking",
+    submenu: [
+      {
+        label: "CEC Staking",
+        path: "/staking",
+      },
+      {
+        label: "esCEC Staking",
+        path: "/esCecStaking",
+      }
+    ]
+  },
 ]);
 function click(event) {
   router.push(event.key);
@@ -232,7 +250,7 @@ const handlHome = () => {
 };
 
 function handNavCurent(nav) {
-  // console.log(nav)
+  console.log(nav)
   // return
   activeIndex.value = nav.id;
   // if (nav.id == 1) {
@@ -257,6 +275,11 @@ function handNavCurent(nav) {
   } else if(nav.id == 7) {
     // window.open(`${location.origin}${nav.path}`, "_blank")
     router.push(nav.path);
+  // } else if(nav.id == 8) {
+  //   itemPathLink()
+    // window.open(`${location.origin}${nav.path}`, "_blank")
+    // router.push(nav.path);
+    // console.log(nav.submenu.length)
   }
   // if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
   //   window.open(nav.path, "_blank");
@@ -266,6 +289,9 @@ function handNavCurent(nav) {
   //   router.push(nav.path);
   // }
 }
+const itemPathLink = (path) => {
+  router.push(path)
+}
 function openThirdPartyLink(url) {
   window.open(url, "_blank");
 }

src/components/staking/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div class="content-header">
-
+      headers
     </div>
     content
   </div>
@@ -22,6 +22,8 @@ import { ref } from "vue"
     width: 100%;
     height: 120px;
     background: #2d2738;
+    padding: 20px;
+    border-radius: 15px;
   }
 }
 </style>

src/router/index.js

@@ -9,6 +9,8 @@ import PrivacyView from '../views/PrivacyView.vue';
 import TermsView from '../views/TermsView.vue';
 import CecActivityView from '../views/CecActivityView.vue';
 import ClaimView from '../views/ClaimView.vue';
+import CecStakingView from "../views/cecStakingView.vue";
+import EsCecStakingView from "../views/esCecStakingView.vue";
 const routes = [
   {
     path: "/",
@@ -101,6 +103,24 @@ const routes = [
       canonical: "https://.counterfire.games",
     },
   },
+  {
+    path: "/staking",
+    name: "staking",
+    component: CecStakingView,
+    meta: {
+      title: "staking",
+      canonical: "https://.counterfire.games",
+    },
+  },
+  {
+    path: "/esCecStaking",
+    name: "esCecStaking",
+    component: EsCecStakingView,
+    meta: {
+      title: "esCecStaking",
+      canonical: "https://.counterfire.games",
+    },
+  },
   {
     path: "/privacy",
     name: "Privacy",

src/views/cecStakingView.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="staking">1111111111111111111111
+    <Staking />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import Staking from "@/components/staking/index.vue"
+
+</script>
+
+<style lang="scss" scoped>
+.staking {
+  padding-top: 84px;
+  background: #16141b;
+  color: #fff;
+}
+</style>