diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 81d1fa0..d0f474b 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -885,6 +885,21 @@ body.light-mode .video-bg:before {
     background: var(--scrollbar-bg);
     border-radius: 10px;
 }
+
+.MyPopover{
+    max-width:200px;
+    max-height:100px;
+    /*overflow: auto;*/
+}
+.MyPopover::-webkit-scrollbar {
+    width: 10px;
+    background-color: #ffce9a;
+    border-radius: 5px;
+}
+.MyPopover::-webkit-scrollbar-thumb {
+    background-color: #676767;
+    border-radius: 5px;
+}
 *::-webkit-scrollbar {
     display: none;
 }
diff --git a/src/assets/img/FacPic.jpg b/src/assets/img/FacPic.jpg
new file mode 100644
index 0000000..c6a8797
Binary files /dev/null and b/src/assets/img/FacPic.jpg differ
diff --git a/src/assets/img/SkyPic.jpg b/src/assets/img/SkyPic.jpg
new file mode 100644
index 0000000..d1f3439
Binary files /dev/null and b/src/assets/img/SkyPic.jpg differ
diff --git a/src/assets/img/beauty.jpg b/src/assets/img/beauty.jpg
new file mode 100644
index 0000000..29197c3
Binary files /dev/null and b/src/assets/img/beauty.jpg differ
diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue
index 6aa4823..907489e 100644
--- a/src/components/detail/NavDetail.vue
+++ b/src/components/detail/NavDetail.vue
@@ -1,31 +1,157 @@
 <template>
   <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 style="display: flex;flex-direction: column;">
+      <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;width:200px;">
+          <span style="font-size:30px;">91视频网站</span><br/>
+          <div class="NavInfo">
+            <span>创建时间：2023年12月20日</span><br/>
+            <span>创建用户：答辩超人</span><br/>
+            <span>所属标签：｛小视频｝</span><br/>
+            <div style="display: flex;flex-direction: row">
+              <div class="little-Circle" id="readNum" style=" margin-left:15px;">
+                <el-tooltip  placement="top" width="150"
+                             trigger="hover"
+                             effect="dark" close-delay="2000">
+                  <div class="MyPopover" slot="content">
+                    <span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
+                    <div style="width:100% ;text-align: center">114514  次</div>
+                  </div>
+                  <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:6px;"></i>
+                </el-tooltip>
+              </div>
+              <div class="little-Circle" id="Rank" style="margin-left:15px;">
+                <el-tooltip  placement="top" width="150"
+                             trigger="hover"
+                             effect="dark" close-delay="2000">
+                  <div class="MyPopover" slot="content">
+                    <span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
+                    <div style="width:100% ;text-align: center;">
+                      <span style="font-size:20px">★★★☆☆</span>
+                      <br/>
+                      <span>评分： 3.8分</span>
+                    </div>
+                  </div>
+                  <i class="el-icon-star-on" id="little-Circle-content" style=" padding:7px; "></i>
+                </el-tooltip>
+              </div>
+              <div class="little-Circle" id="Rank" style="margin-left:15px;">
+                <el-tooltip  placement="top" width="150"
+                             trigger="hover"
+                             effect="dark" close-delay="2000">
+                  <div class="MyPopover" slot="content">
+                    <span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
+                  </div>
+                  <i class="el-icon-warning" id="little-Circle-content" style=" padding:7.5px; "></i>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="NavInfo" id="Rec" style="margin-top:45px;display: flex">
+          <div style="background-color: rgba(255,147,207,0.2);
+        width:100%;border-radius:10px;
+        font-size:25px">
+            <span style="padding-left:40px;"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
+          </div>
+          <div class="RecAll">
+            <div class="SingleLabel">
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+            </div>
+            <div class="SingleLabel" style="  margin-left:10px;">
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+              <div class="app-card" id="ALabel">
+                <!--                <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
+                <!--                </div>-->
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
+                  <img  class="little-Circle"  src="../../assets/img/beauty.jpg"/>
+                  <span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
-      <div>
-
+      <div class="content-wrapper" style="width:100%;height:150px;">
+        hyhyh
       </div>
+<!--      <img src=""/>-->
     </div>
 
+
   </div>
 </template>
+<!--[if lte IE 6]>
+<script src="js/png.js"></script>
+<script type="text/javascript">
+DD_belatedPNG.fix('img, .logo,.ico');
+</script>
+<![endif]-->
 <script>
 export default {
   name:"NavDetail",
   data() {
     return {
-
+      visible: false,
     }},
   mounted() {
 
@@ -43,6 +169,68 @@ export default {
 }
 </script>
 <style scoped>
+/** 总推荐标签 **/
+.RecAll{
+  display:flex;
+  flex-direction: row;
+}
+
+/** 单列推荐标签 **/
+.SingleLabel{
+  margin-top:2px;
+
+  //background-color: rgba(217, 217, 217, 0.5);
+  width:210px;
+  height: 100%;
+  border-radius:10px;
+}
+/** 单推荐标签 **/
+#ALabel{
+  margin-top:8px;
+  margin-left:5px;
+  width:210px;
+  height:55px;
+  border-radius:10px;
+}
+#ALabel :hover{
+  transform: scale(1.05);
+}
+
+
+
+#Rec{
+  margin-left:70px;
+  border-radius:10px;
+  height:300px;
+  width: 450px;
+  background-image: url("../../assets/img/FacPic.jpg");
+  background-color: rgba(255, 255, 255, 0.49);
+  background-position: center 0px;
+  background-size: 130% auto;
+}
+
+
+.little-Circle{
+  text-align: center;
+  width:40px;
+  height:40px;
+  border-radius:40px;
+  background-color: rgba(175, 175, 175, 0.5);
+}
+#little-Circle-content{
+  font-size:25px;
+  z-index:999;
+
+}
+
+#readNum :hover{
+  transform: scale(1.25);
+}
+#Rank :hover{
+  transform: scale(1.25);
+}
+
+
 .NavInfo{
   font-weight:550;
   display: flex;
@@ -104,16 +292,16 @@ body {
 
 .card::before {
   content: "";
-  width: 104%;
-  height: 102%;
+  width: 108%;
+  height: 108%;
   border-radius: 8px;
   background-image: linear-gradient(
       var(--rotate)
       , #5ddcff, #3c67e3 43%, #4e00c2);
   position: absolute;
   z-index: -1;
-  top: -1%;
-  left: -2%;
+  //top: -1%;
+  //left: -2%;
   animation: spin 2.5s linear infinite;
 }