feat(详情页): 重构详情页头部样式并添加标签展示功能

- 新增精华和推荐图标资源文件
- 修改详情页头部布局，从水平排列改为垂直排列
- 添加标签展示区域，支持分类和标签跳转
- 调整详情区域组件布局，移除部分评论相关功能
- 更新http.js中的开发环境session值
- 添加新的JS脚本引用

components/DetailsArea.vue

@@ -18,24 +18,25 @@
                     <img class="icon" src="@/assets/img/eye-icon-black.svg" />
                     <div>{{ info["views"] }}</div>
                 </div>
-                <!-- <div class="item flexacenter" style="cursor: auto;">
-                    <img class="icon" src="@/assets/img/riposte-icon.png" />
-                    {{ ripostecount["total"] }}
-                </div> -->
                 <div class="item flexacenter" @click="handleLike">
                     <img class="icon pitch" v-if="islike == 1" src="@/assets/img/like-red-pitch.png" />
                     <img class="icon" v-else src="@/assets/img/like-icon.png" />
                     <div>{{ info["likes"] || "" }}</div>
                 </div>
-                <div class="item flexacenter" style="cursor: auto">
-                    <img class="icon" src="@/assets/img/discuss-icon.png" />
-                    <div>{{ commentComments }}</div>
-                </div>
+              
                 <div class="item flexacenter" @click="handleCollect()">
                     <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
                     <img class="icon" v-else src="@/assets/img/collect-icon.png" />
                     <div>{{ info["favs"] || "收藏" }}</div>
                 </div>
+                <div class="item flexacenter" style="cursor: auto">
+                    <img class="icon" src="@/assets/img/discuss-icon.png" />
+                    <div>{{ commentComments }}</div>
+                </div>
+                  <div class="item flexacenter" style="cursor: auto">
+                    <img class="icon" src="@/assets/img/discuss-icon.png" />
+                    <div>{{ commentComments }}</div>
+                </div>
                 <ClientOnly>
                     <el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
                         <template #reference>
@@ -66,7 +67,7 @@
                     </el-popover>
                 </ClientOnly>
             </div>
-            <div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
+            <!-- <div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
                 <div v-if="!respondShowState" class="flexacenter comment-box">
                     <img v-if="userInfoWin?.avatar" class="avatar" :src="userInfoWin?.avatar" />
                     <el-input class="comment-input flex1" name="14752869" v-model="floorCommentInput" placeholder="说说你的想法或疑问…" @keydown.enter="floorCommentBtn('input')" maxlength="500" show-word-limit autocomplete="off" @focus="closeMouseOver()"></el-input>
@@ -81,7 +82,7 @@
                     </div>
                     <RespondAdd type="bottom" :respondShowState="respondShowState" @update:respondShowState="respondShowState = $event"></RespondAdd>
                 </div>
-            </div>
+            </div> -->
         </div>
     </div>
     <Like v-if="isLikeGif"></Like>
@@ -295,7 +296,7 @@ const jointriposte = inject("jointriposte");
         justify-content: space-between;
         .floor-left {
             margin-left: 30px;
-            flex: 1;
+            // flex: 1;
             justify-content: space-between;
 
             .item {