diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 741c2c4..d08f156 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -5,9 +5,9 @@
 }
 
 :root {
-
+    --theme-comment-color: rgba(178, 188, 250, 0.4);
     --theme-bg-color: rgba(16 18 27 / 40%);
-    --border-color: rgba(113 119 144 / 25%);
+    --border-color: rgba(28, 32, 37, 0.25);
     --theme-color: #f9fafb;
     --inactive-color: rgb(113 119 144 / 78%);
     --body-font: "Poppins", sans-serif;
@@ -24,6 +24,7 @@
 }
 
 .light-mode {
+    --theme-comment-color: rgba(255, 202, 145, 0.4);
     --theme-bg-color: rgb(255 255 255 / 31%);
     --theme-color: #3c3a3a;
     --inactive-color: #333333;
@@ -913,7 +914,7 @@ body.light-mode .video-bg:before {
 
 /*main-container结构下的标头格式*/
   .HeadLine{
-      margin-left:20px;
+      margin-left:5px;
       font-size:30px;
       display:flex;
       flex-direction:row;
@@ -923,7 +924,8 @@ body.light-mode .video-bg:before {
 /*main-container结构下的标头字体格式*/
   .TitleFont{
       margin-left:10px;
-      font-weight:600;
+      font-weight:550;
+      font-family: STHupo;
   }
 /*main-container结构下的标头矩形图案样式*/
   .HeadSquare{
@@ -933,3 +935,107 @@ body.light-mode .video-bg:before {
       margin-top:3px;
       background-color: #59a2a3;
   }
+/*详情页左侧部分*/
+.LeftPart{
+    display: flex;
+    flex-direction: column;
+}
+
+/*背景板*/
+.JustBack{
+    display: flex;
+    flex-direction: column;
+    color: var(--theme-color);
+    padding: 20px 40px;
+    height: 100%;
+    background-color: var(--theme-bg-color);
+}
+
+/** 总推荐标签 **/
+.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{
+    font-family: STXihei;
+    font-weight:600;
+    font-size:13px;
+    margin-top:8px;
+    margin-left:5px;
+    width:155px;
+    height:30px;
+    border-radius:10px;
+    color: var(--theme-color);
+}
+#ALabel :hover{
+    transform: scale(1.05);
+}
+
+
+
+#Rec{
+    border-color:var(--border-color);
+    border-width:5px;
+    border-style:solid;
+    height:250px;
+    width: 340px;
+    background-color: var(--theme-bg-color);
+}
+
+.little-Triangle{
+    text-align:center;
+    width:100px;
+    height:40px;
+    border-color:var(--border-color);
+    border-style:solid;
+    border-width: 5px;
+    border-radius:5px;
+    background-color: rgba(175, 175, 175, 0.31);
+}
+
+.little-Triangle :hover{
+    transform: scale(1.07);
+}
+
+.little-Circle{
+    text-align: center;
+    width:40px;
+    height:40px;
+    border-radius:40px;
+    border-color:var(--border-color);
+    border-style:solid;
+    background-color: rgba(175, 175, 175, 0.32);
+}
+#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;
+    flex-direction:column;
+}
+
+
+
+
diff --git a/src/assets/img/Like.svg b/src/assets/img/Like.svg
new file mode 100644
index 0000000..edd63b9
--- /dev/null
+++ b/src/assets/img/Like.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703249893507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1710" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.636364 418.909091a124.276364 124.276364 0 0 0-101.934546-52.829091h-162.909091l36.072728-153.134545V209.454545a139.636364 139.636364 0 0 0-40.727273-98.676363A136.145455 136.145455 0 0 0 538.298182 69.818182a138.24 138.24 0 0 0-134.516364 134.981818l-3.490909 15.592727a186.181818 186.181818 0 0 1-180.829091 145.454546A128 128 0 0 0 93.090909 494.778182v330.472727A127.767273 127.767273 0 0 0 219.461818 954.181818h482.909091a126.370909 126.370909 0 0 0 120.32-90.065454l102.167273-330.24A130.094545 130.094545 0 0 0 907.636364 418.909091z" p-id="1711" data-spm-anchor-id="a313x.collections_detail.0.i3.3c4e3a81j8Ox83" class=""></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/likeHover.svg b/src/assets/img/likeHover.svg
new file mode 100644
index 0000000..e2038c0
--- /dev/null
+++ b/src/assets/img/likeHover.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703250378460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.636364 418.909091a124.276364 124.276364 0 0 0-101.934546-52.829091h-162.909091l36.072728-153.134545V209.454545a139.636364 139.636364 0 0 0-40.727273-98.676363A136.145455 136.145455 0 0 0 538.298182 69.818182a138.24 138.24 0 0 0-134.516364 134.981818l-3.490909 15.592727a186.181818 186.181818 0 0 1-180.829091 145.454546A128 128 0 0 0 93.090909 494.778182v330.472727A127.767273 127.767273 0 0 0 219.461818 954.181818h482.909091a126.370909 126.370909 0 0 0 120.32-90.065454l102.167273-330.24A130.094545 130.094545 0 0 0 907.636364 418.909091z" p-id="1865" data-spm-anchor-id="a313x.collections_detail.0.i5.3c4e3a81j8Ox83" class="selected" fill="#faf25f"></path></svg>
\ No newline at end of file
diff --git a/src/components/detail/HotRecomment.vue b/src/components/detail/HotRecomment.vue
new file mode 100644
index 0000000..e759c55
--- /dev/null
+++ b/src/components/detail/HotRecomment.vue
@@ -0,0 +1,108 @@
+<template>
+  <div style="width:340px;height:auto;display: flex;">
+    <div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
+      <div style="background-color: rgba(255,147,207,0.2);
+          width:100%;border-radius:10px;
+          font-size:25px;border-color:var(--border-color) ;border-width: 5px">
+        <span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:3px;">
+          <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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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>
+</template>
+<script>
+export default {
+  name:"HotRecomment",
+  data() {
+    return {
+      visible: false,
+    }},
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue
index d1b4471..def09aa 100644
--- a/src/components/detail/NavDetail.vue
+++ b/src/components/detail/NavDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="DefinedPage">
-    <div style="display: flex;flex-direction: column;">
-      <div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
+    <div class="LeftPart" style="overflow: auto">
+      <div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
         <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
-          <div class="card" style=" width: 150px;height:150px;margin-top:50px">
+          <div class="card" style=" width: 180px;height:180px;margin-top:50px">
             戳戳跳转
           </div>
           <div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
@@ -31,10 +31,8 @@
             </div>
           </div>
         </div>
-
-
         <div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
-          <span style="font-size:30px;">91视频网站</span><br/>
+          <span style="font-size:30px;font-family: STHupo">91视频网站</span><br/>
           <div class="NavInfo" >
             <span style="width:200px">创建时间：2023年12月20日</span><br/>
             <span style="width:200px">创建用户：答辩超人</span><br/>
@@ -79,128 +77,96 @@
             </div>
           </div>
         </div>
-
-        <div class="NavInfo" id="Rec" style="margin-left:20px;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:20px;"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
+      </div>
+      <!--  标签详情-->
+      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
+        <!--文章详情-->
+        <div style="width:670px;color: var(--theme-color)">
+          <div class="HeadLine">
+            <div class="HeadSquare"></div>
+            <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
           </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:3px;">
-              <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="ArticleContent">
+                  <span>91视频一款免费、高清视频在线观看软件。内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
+                  全网视频大收罗；收费电影免费看；美剧、动漫、电影、电视剧迷们的福利社<br/>
+                  畅享移动高清
+                  为移动用户量身打造，操作界面清新友好内容丰富多元。
+                  快速发现内容
+                  分频道视频浏览，分类更合理，高效。
+                  更小、更快、更流畅
+                  安装包小、CPU占用少、播放更加流畅清晰。<br/>
+                  使用91视频观看视频需要具备怎样的网络条件
+                  支持无线网络WIFI（WLAN）及3G网络在线观看视频，播放清晰、流畅。其他2G等更低速度的移动网络播放视频时会出现速度慢、无法加载等异常情况，因此不建议使用。
+                  91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
+          </div>
+        </div>
+        <!--导航评论-->
+      </div>
+      <!--热度趋势-->
+      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
+        <div style="width:670px;color: var(--theme-color)">
+          <div class="HeadLine" style="margin-top:50px">
+            <div class="HeadSquare"></div>
+            <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
+          </div>
+          <div class="ArticleContent">
+            <div ref="ManuEchart" style="width:550px;height:300px;"></div>
           </div>
-
         </div>
       </div>
-      <div style="width:100%;background-color: var(--theme-bg-color);color: var(--theme-color)">
-        <div class="HeadLine">
-          <div class="HeadSquare"></div>
-          <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
-        </div>
-        <div class="ArticleContent">
-            <span>91视频一款免费、高清视频在线观看软件。内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
-            全网视频大收罗；收费电影免费看；美剧、动漫、电影、电视剧迷们的福利社<br/>
-            畅享移动高清
-            为移动用户量身打造，操作界面清新友好内容丰富多元。
-            快速发现内容
-            分频道视频浏览，分类更合理，高效。
-            更小、更快、更流畅
-            安装包小、CPU占用少、播放更加流畅清晰。<br/>
-            使用91视频观看视频需要具备怎样的网络条件
-            支持无线网络WIFI（WLAN）及3G网络在线观看视频，播放清晰、流畅。其他2G等更低速度的移动网络播放视频时会出现速度慢、无法加载等异常情况，因此不建议使用。
-            91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
-        </div>
-      </div>
-      <div style="width:100%;background-color: var(--theme-bg-color);color: var(--theme-color)">
-        <div class="HeadLine" style="margin-top:50px">
-          <div class="HeadSquare"></div>
-          <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
-        </div>
-        <div class="ArticleContent">
+      <!--用户评论-->
+      <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
+        <div style="width:670px;color: var(--theme-color)">
+          <div class="HeadLine" style="margin-top:30px">
+            <div class="HeadSquare"></div>
+            <div class="TitleFont"><i class="el-icon-s-comment"></i>用户评论</div>
+          </div>
+          <div class="ArticleContent" style="margin-left:6px !important;width:580px !important;">
+            <el-card style="background-color: var(--theme-comment-color)">
 
+              <UserComment></UserComment>
+
+            </el-card>
+
+          </div>
         </div>
       </div>
     </div>
-
-
+    <div class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
+      <hot-recomment></hot-recomment>
+      <NewRecomment></NewRecomment>
+      <RandomRecomment></RandomRecomment>
+    </div>
   </div>
+
+
 </template>
 <script>
+import HotRecomment from "@/components/detail/HotRecomment.vue";
+import NewRecomment from "@/components/detail/NewRecomment.vue";
+import RandomRecomment from "@/components/detail/RandomRecomment.vue";
+import UserComment from "@/components/detail/UserComment.vue";
+import Vue from "vue";
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
 export default {
   name:"NavDetail",
+  // eslint-disable-next-line vue/no-unused-components
+  components: {HotRecomment,NewRecomment,RandomRecomment,UserComment},
   data() {
     return {
       visible: false,
+    //返回数据：时间列表
+      TimeList:[],
+    //返回数据：浏览量
+      PageView:[],
+    //Echart图
+      ManuChart:null,
+    // Echart图设置项：
+      MyOption:{},
     }},
   mounted() {
-
+      this.initPage();
   },
   created() {
 
@@ -209,7 +175,83 @@ export default {
 
   },
   methods: {
-
+      // 初始化页面
+      initPage(){
+        var that = this;
+        // Echart图元素绑定Dom
+        this.ManuChart = this.$echarts.init(this.$refs.ManuEchart);
+        that.MyOption={
+          tooltip: {
+            trigger: 'item',
+            axisPointer: {
+              type: 'shadow'
+            },
+            backgroundColor: '#fff', // 悬浮框背景色
+            borderColor: '#000', // 悬浮框边框颜色
+            borderWidth: 1, // 悬浮框边框宽度
+            textStyle: { // 悬浮框文字样式
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisLine:{
+              show: true,
+              lineStyle: {
+                color: '#76aaff',
+                width: 2,
+                type: "solid"
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine:{
+              lineStyle:{
+                color:'#76aaff',
+              }
+            },
+            axisLine:{
+              show: true,
+              lineStyle: {
+                color: '#76aaff',
+                width: 2,
+                type: "solid"
+              }
+            },
+            axisLabel: {//y轴文字的配置
+              textStyle: {
+                color: '#76aaff',
+                margin: 15
+              },
+              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
+            }
+          },
+          series: [
+            {
+              data: [150, 230, 224, 218, 135, 147, 260],
+              type: 'line',
+              label: {//文字的显示
+                show: true, //默认  显示文字
+              }
+            },
+            {
+              data: [150, 230, 224, 218, 135, 147, 260],
+              type: 'bar'
+            },
+          ],
+          dataZoom: {
+            yAxisIndex: [0],
+            type:'inside',
+            start: 0,
+            end: 100,
+            zoomLock:true,
+          }
+        }
+        that.ManuChart.setOption(that.MyOption,true);
+      }
   }
 
 }
@@ -217,7 +259,7 @@ export default {
 <style lang="css">
 .DefinedPage{
   display:flex;
-  flex-direction: column;
+  flex-direction: row;
   width:100%;
   overflow: auto;
 }
@@ -228,7 +270,7 @@ export default {
 /**标签详情**/
 .ArticleContent{
   width:80%;
-  margin-left:60px;
+  margin-left:50px;
   margin-top:15px;
   font-weight:550;
   font-size:18px;
@@ -245,86 +287,9 @@ export default {
 }
 
 
-/** 总推荐标签 **/
-.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:202px;
-  height:55px;
-  border-radius:10px;
-}
-#ALabel :hover{
-  transform: scale(1.05);
-}
 
 
 
-#Rec{
-  margin-left:70px;
-  border-radius:10px;
-  height:300px;
-  width: 450px;
-  background-color: var(--theme-bg-color);
-}
-
-.little-Triangle{
-  text-align:center;
-  width:100px;
-  height:40px;
-  border-color:var(--border-color);
-  border-style:solid;
-  border-width: 5px;
-  border-radius:5px;
-  background-color: rgba(175, 175, 175, 0.31);
-}
-
-.little-Triangle :hover{
-  transform: scale(1.07);
-}
-
-.little-Circle{
-  text-align: center;
-  width:40px;
-  height:40px;
-  border-radius:40px;
-  border-color:var(--border-color);
-  border-style:solid;
-  background-color: rgba(175, 175, 175, 0.32);
-}
-#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;
-  flex-direction:column;
-}
 
 
 @property --rotate {
diff --git a/src/components/detail/NewRecomment.vue b/src/components/detail/NewRecomment.vue
new file mode 100644
index 0000000..8de7ba4
--- /dev/null
+++ b/src/components/detail/NewRecomment.vue
@@ -0,0 +1,110 @@
+<template>
+  <div style="width:340px;height:auto;display: flex;">
+    <div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
+      <div style="background-color: rgba(255,147,207,0.2);
+          width:100%;border-radius:10px;
+          font-size:25px;border-color:var(--border-color) ;border-width: 5px">
+        <span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-flag"></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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:3px;">
+          <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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+              <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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>
+</template>
+<script>
+export default {
+  name:"NewRecomment",
+  data() {
+    return {
+      visible: false,
+    }},
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/detail/RandomRecomment.vue b/src/components/detail/RandomRecomment.vue
new file mode 100644
index 0000000..1f8dc0e
--- /dev/null
+++ b/src/components/detail/RandomRecomment.vue
@@ -0,0 +1,109 @@
+
+  <template>
+    <div style="width:340px;height:auto;display: flex;">
+      <div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
+        <div style="background-color: rgba(255,147,207,0.2);
+          width:100%;border-radius:10px;
+          font-size:25px;border-color:var(--border-color) ;border-width: 5px">
+        <span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-data"></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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:3px;">
+            <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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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:-10px;margin-top:-18px">
+                <img class="little-Circle" style="width:35px !important;height: 35px !important;"  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>
+  </template>
+  <script>
+    export default {
+      name:"RandomRecomment",
+      data() {
+        return {
+          visible: false,
+        }},
+      mounted() {
+
+      },
+      created() {
+
+      },
+      computed: {
+
+      },
+      methods: {
+
+      }
+
+    }
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/detail/UserComment.vue b/src/components/detail/UserComment.vue
new file mode 100644
index 0000000..3ec1840
--- /dev/null
+++ b/src/components/detail/UserComment.vue
@@ -0,0 +1,157 @@
+<template>
+  <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+    <!-- 发布评论 -->
+    <el-card style="background-color: var(--theme-comment-color) !important">
+      <form style="width:560px;">
+        <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+          <span style="font-family: STHupo;color:var(--theme-color)">请输入评分</span>
+          <el-rate style="margin-top:5px" ></el-rate>
+          <div style="display: flex;flex-direction: row;margin-top:5px">
+            <img class="little-Circle" style="width:60px !important;height: 60px !important;"  src="../../assets/img/beauty.jpg"/>
+            <el-input style="width:350px;margin-top:12px;margin-left:10px;" type="textarea" placeholder="请输入一条友善的评论~"></el-input>
+            <el-button type="success" plain style="height:40px;width:70px;margin-left:10px;margin-top:12px">
+              <span style="font-family: STHupo;font-size:20px;margin-left:-5px;">提交</span>
+            </el-button>
+          </div>
+
+        </div>
+      </form>
+    </el-card>
+    <!--评论-->
+    <el-card style="background-color: var(--theme-comment-color) !important;margin-top:10px">
+      <div style="display: flex;flex-direction: column;">
+        <span style="font-family: STHupo;font-size:25px;margin-left:-10px;color:var(--theme-color)">评论广场</span>
+        <!--单条评论-->
+        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top:40px">
+          <img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:20px;"  src="../../assets/img/beauty.jpg"/>
+          <div style="display: flex;flex-direction: column">
+            <div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
+              <span style="font-family: STHupo;width:50px">用户:</span><span style="font-size:13px;margin-left:5px;width:100px">JK少女</span>
+              <span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:2px;width:150px">2023年12月22日</span>
+              <div style="display: flex;flex-direction: row-reverse;width:0%">
+                <el-button type="success" icon="el-icon-thumb" size="small" circle style="margin-top:-7px;"></el-button>
+              </div>
+            </div>
+            <div class='arrow-box popper border arrow-left'
+                 style="background-color: var(--theme-comment-color);margin-left:10px;margin-top:7px;width:430px;border: 3px solid var(--border-color)">
+              <div style="margin-left:10px;margin-top:5px;color:var(--theme-color);font-size:15px">
+                8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    </el-card>
+  </div>
+
+</template>
+<script>
+export default {
+  name:"UserComment",
+  data() {
+    return {
+      visible: false,
+    }},
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+
+}
+</script>
+
+
+<style scoped>
+
+#likeMe{
+  width:10px;
+  height:10px;
+  font-size:35px;
+  color: #fc9090;
+}
+
+#likeMe :hover{
+  color:yellow !important;
+}
+
+
+$popper-border-color: #f00;
+$popper-background-color: #000;
+
+.popper {
+  display: inline-block;
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 18px;
+  max-width: 288px;
+  position: relative;
+  border-radius: 5px;
+  background: $popper-background-color;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+}
+
+.arrow-box {
+  z-index: 5;
+  position: relative;
+  background: $popper-background-color;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+  &.arrow-left {
+    &::after,
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      content: " ";
+      height: 0;
+      width: 0;
+      pointer-events: none;
+      border: solid transparent;
+      box-sizing: border-box;
+      transform-origin: 0 0;
+      transform: translateY(-8px) rotate(45deg);
+    }
+
+    &::after {
+      z-index: 4;
+
+      border-width: 6px;
+      border-style: solid;
+      border-color: transparent transparent $popper-background-color $popper-background-color;
+    }
+
+    &::before {
+      z-index: 3;
+
+      left: -1px;
+
+      border-width: 6px;
+      border-style: solid;
+      border-color: transparent transparent $popper-border-color $popper-border-color;
+
+      box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+.popper,
+.arrow-box {
+  &.border {
+    border: 1px solid $popper-border-color;
+  }
+}
+
+
+</style>
\ No newline at end of file