diff --git a/package-lock.json b/package-lock.json
index 7f5376c..a6a7e67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "love-nav-ui",
       "version": "0.1.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.6.2",
         "core-js": "^3.8.3",
         "element-plus": "^2.4.4",
@@ -1839,7 +1840,7 @@
     },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"
@@ -12649,7 +12650,7 @@
     },
     "@element-plus/icons-vue": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "requires": {}
     },
diff --git a/package.json b/package.json
index 4ed8242..8356801 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.4.4",
diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue
index c58d306..6aa4823 100644
--- a/src/components/detail/NavDetail.vue
+++ b/src/components/detail/NavDetail.vue
@@ -1,9 +1,23 @@
 <template>
-  <div class="content-wrapper">
-    <div class="card">
-      Magic Card
+  <div style="display:flex; flex-direction: column;width: 100%;">
+    <div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap">
+      <div class="card" style=" width: 150px;height:150px;margin-top:50px">
+        戳戳跳转
+      </div>
+      <div class="NavInfo" style="margin-top:45px;margin-left:50px;">
+        <span style="font-size:30px;">91视频网站</span><br/>
+        <el-icon><Star /></el-icon>
+        <div class="NavInfo">
+          <span>所属标签：</span><br/>
+          <span>创建时间：</span><br/>
+          <div style="width:40px;height:40px;border-radius:40px;background-color: white;"></div>
+        </div>
+      </div>
+      <div>
+
+      </div>
     </div>
-    <a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
+
   </div>
 </template>
 <script>
@@ -29,6 +43,13 @@ export default {
 }
 </script>
 <style scoped>
+.NavInfo{
+  font-weight:550;
+  display: flex;
+  flex-direction:column;
+}
+
+
 @property --rotate {
   syntax: "<angle>";
   initial-value: 132deg;
@@ -66,8 +87,9 @@ body {
   display: flex;
   font-size: 1.5em;
   color: rgb(88 199 250 / 0%);
+  font-weight: 700;
   cursor: pointer;
-  font-family: cursive;
+  font-family: fantasy;
 }
 
 .card:hover {