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

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

assets/css/details.css

@@ -14,22 +14,39 @@
 }
 .content .header {
   width: 100%;
-  height: 80px;
-  padding: 0 30px;
+  padding: 30px;
   border-bottom: 1px solid #ebebeb;
   font-weight: 650;
   font-size: 20px;
   color: #000000;
   line-height: 20px;
-  justify-content: space-between;
+  flex-direction: column;
 }
-.content .header .views {
-  font-size: 12px;
-  color: #aaa;
-  font-weight: 400;
+.content .header .label {
+  flex-wrap: wrap;
+  margin-bottom: 15px;
 }
-.content .header .views .eye-icon {
-  margin-right: 5px;
+.content .header .label .item {
+  font-size: 14px;
+  color: #555555;
+  padding: 0 9px;
+  height: 24px;
+  line-height: 24px;
+  background-color: #f2f2f2;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+.content .header .label .item.icon {
+  padding: 0;
+}
+.content .header .label .item:not(:last-child) {
+  margin-right: 10px;
+}
+.content .header .label .item.blue {
+  color: #ffffff;
+  background-color: #04b0d5;
 }
 .content .left {
   width: 658px;

assets/css/details.less

@@ -15,20 +15,42 @@
 
     .header {
         width: 100%;
-        height: 80px;
-        padding: 0 30px;
+        padding: 30px;
         border-bottom: 1px solid #ebebeb;
         font-weight: 650;
         font-size: 20px;
         color: #000000;
         line-height: 20px;
-        justify-content: space-between;
-        .views {
-            font-size: 12px;
-            color: #aaa;
-            font-weight: 400;
-            .eye-icon {
-                margin-right: 5px;
+        flex-direction: column;
+
+        .label {
+            flex-wrap: wrap;
+            margin-bottom: 15px;
+
+            .item {
+                font-size: 14px;
+                color: #555555;
+                padding: 0 9px;
+                height: 24px;
+                line-height: 24px;
+                background-color: rgba(242, 242, 242, 1);
+                border-radius: 6px;
+                margin-bottom: 10px;
+                cursor: pointer;
+                margin-bottom: 5px;
+
+                &.icon {
+                    padding: 0;
+                }
+
+                &:not(:last-child) {
+                    margin-right: 10px;
+                }
+
+                &.blue {
+                    color: #ffffff;
+                    background-color: #04b0d5;
+                }
             }
         }
     }

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 {

pages/details/[id].vue

@@ -6,7 +6,13 @@
     </Head>
     <TopHead ref="topHeadRef"></TopHead>
     <div class="content flexflex" :style="{ '--main-color': colourValue[uniqidIndex]['main'], '--bg-color': colourValue[uniqidIndex]['bg'], '--bc-color': colourValue[uniqidIndex]['bc'] }">
-        <div class="header flexacenter">
+        <div class="header flexflex">
+            <div class="label flexflex" v-if="sectionn?.length || tags?.length || info.recommend == 1 || info.best == 1">
+                <img class="item icon" v-if="info.recommend == 1" src="@/assets/img/recommend-icon.png" />
+                <img class="item icon" v-if="info.best == 1" src="@/assets/img/essence-icon.png" />
+                <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a>
+                <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a>
+            </div>
             <span>{{ info.title }}</span>
         </div>
         <div class="left">
@@ -163,7 +169,7 @@
 </template>
 
 <script setup>
-useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=vote" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] });
+useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=vote" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }, { src: "https://app.gter.net/image/gter/commonCom/bi/bi.js" }] });
 
 import { useRoute, useRouter } from "vue-router";
 import { ElMessage } from "element-plus";

utils/http.js

@@ -11,7 +11,7 @@ axios.interceptors.request.use(
     async (config) => {
         // 开发时登录用的，可以直接替换小程序的 authorization
         if (process.env.NODE_ENV !== "production") {
-            const miucms_session = "921d45d85b2b50503704123611232948";
+            const miucms_session = "20c7981bcd7b24e373e462ee60a8d326";
             document.cookie = "miucms_session=" + miucms_session;
             config["headers"]["authorization"] = miucms_session;
         }