添加详情页

src/components/Detail/NavDetail.vue

@@ -1,9 +1,134 @@
 <template>
-    666
+  <div class="content-wrapper">
+    <div class="card">
+      Magic Card
+    </div>
+    <a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
+  </div>
 </template>
-<script setup>
+<script>
+export default {
+  name:"NavDetail",
+  data() {
+    return {
 
+    }},
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+
+}
 </script>
 <style scoped>
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 132deg;
+  inherits: false;
+}
 
+:root {
+  --card-height: 65vh;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+
+
+body {
+  min-height: 100vh;
+  background: #212534;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+
+.card {
+  background: #191c29;
+  width: var(--card-width);
+  height: var(--card-height);
+  padding: 3px;
+  position: relative;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  font-size: 1.5em;
+  color: rgb(88 199 250 / 0%);
+  cursor: pointer;
+  font-family: cursive;
+}
+
+.card:hover {
+  color: rgb(88 199 250 / 100%);
+  transition: color 1s;
+}
+.card:hover:before, .card:hover:after {
+  animation: none;
+  opacity: 0;
+}
+
+
+.card::before {
+  content: "";
+  width: 104%;
+  height: 102%;
+  border-radius: 8px;
+  background-image: linear-gradient(
+      var(--rotate)
+      , #5ddcff, #3c67e3 43%, #4e00c2);
+  position: absolute;
+  z-index: -1;
+  top: -1%;
+  left: -2%;
+  animation: spin 2.5s linear infinite;
+}
+
+.card::after {
+  position: absolute;
+  content: "";
+  top: calc(var(--card-height) / 6);
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(calc(var(--card-height) / 6));
+  background-image: linear-gradient(
+      var(--rotate)
+      , #5ddcff, #3c67e3 43%, #4e00c2);
+  opacity: 1;
+  transition: opacity .5s;
+  animation: spin 2.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+a {
+  color: #212534;
+  text-decoration: none;
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-top: 2rem;
+}
 </style>

src/components/Home/HomeHeader.vue

@@ -4,7 +4,7 @@
     <div class="header-menu">
       <router-link to="/home"><a class="menu-link is-active" >ALL</a></router-link>
       <router-link to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>
-      <a class="menu-link" href="#">Discover</a>
+      <router-link to="/navDetail"><a class="menu-link">Discover</a></router-link>
       <a class="menu-link notify" href="#">Market</a>
     </div>
     <div class="search-bar">

src/router/index.js

@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import index from '../views/Index.vue'
 import home from "@/components/Home/HomePage.vue";
 import hotNews from "@/components/HotNews/HotNews.vue";
-
+import navDetail from "@/components/Detail/NavDetail.vue";
 const routes = [
   {
     path: '/',
@@ -23,7 +23,11 @@ const routes = [
         path: '/hotNews',
         name: 'hotNews',
         component: hotNews
-      },
+      },{
+        path: '/navDetail',
+        name: 'navDetail',
+        component: navDetail
+      }
       ],
   },