no message

.gitignore

@@ -4,7 +4,7 @@
 .nuxt
 .nitro
 .cache
-/dist
+
 
 # Node dependencies
 /node_modules

app.vue

@@ -79,28 +79,42 @@
                         <div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
                     </div>
                     <div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
-                        <a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
+                        <template v-for="(item, index) in list" :key="index">
+                            <a v-if="item['isrecom']" class="item grid-item flexflex" :style="itemStyle(index, item['content'], item['type'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" target="_blank" :href="item['url']">
+                                <img class="dot" src="./img/dot.svg" />
+                                <div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
+                                    <div class="issue-title flexcenter">
+                                        <div class="recommend flexcenter">推荐阅读</div>
+                                        <div class="issue ellipsis flex1" v-html="item['title']"></div>
+                                    </div>
+                                    <template v-if="item['type'] == 'thread'">
+                                        <div class="answer ellipsis" v-if="item['message']" v-html="item['message']"></div>
+                                    </template>
+                                    <div class="answer" style="height: auto;" v-else-if="item['type'] == 'vote'">
+                                        <div v-for="(ite, i) in item['option'].slice(0, 2)" :key="i">{{ replaceNumberObj[i] + ite }}</div>
+                                        <div>{{ replaceNumberObj[2] }} …</div>
+                                    </div>
+                                    <template v-else>
+                                        <div class="answer ellipsis flexacenter">
+                                            <div class="value-value" v-if="item['profession'] || item['professional']">{{ item["profession"] || item["professional"] }}</div>
+                                            <div class="value-value" v-if="item['project'] || item['degree']">{{ item["project"] || item["degree"] }}</div>
+                                            <div class="value-value" v-if="item['interviewtime'] || item['semester']">{{ item["interviewtime"] || item["semester"] }}</div>
+                                            <div class="value-value" v-if="item['apply_results']">{{ item["apply_results"] }}</div>
+                                        </div>
+                                    </template>
+                                    <div class="bottom flexacenter">
+                                        <div class="typename flexcenter">{{ item["typename"] }}</div>
+                                    </div>
+                                </div>
+                            </a>
+                            <a v-else class="item grid-item flexflex" :style="itemStyle(index, item['content'])" :class="[{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}, `item${index}`]" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
                                 <img class="dot" src="./img/dot.svg" />
                                 <div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
                                     <div class="issue-title flexcenter">
                                         <img class="hot-icon" v-if="item['ishot'] == 1" src="./img/hot-icon.png" />
-                                    <div class="recommend flexcenter" v-if="false">推荐阅读</div>
                                         <div class="issue ellipsis flex1" v-html="item['title']"></div>
                                     </div>
-                                <template v-if="true">
                                     <div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
-                                </template>
-                                <template v-else>
-                                    <div class="answer ellipsis flexacenter" v-if="item['content']">
-                                        Asian Studies
-                                        <div class="halving-line">|</div>
-                                        MPhil
-                                        <div class="halving-line">|</div>
-                                        23Fall
-                                        <div class="halving-line">|</div>
-                                        offer
-                                    </div>
-                                </template>
                                     <div class="bottom flexacenter">
                                         <div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
                                         <div v-else></div>
@@ -114,6 +128,7 @@
                                     </div>
                                 </div>
                             </a>
+                        </template>
                     </div>
 
                     <div class="bottom-tps" :style="bottomTpsStyle()" v-if="inTheEndState">- 到底了 -</div>
@@ -828,7 +843,7 @@ export default {
             type.value = "details"
 
             let data = detailsInfoDataVuex.value
-            console.log("data", data)
+            // console.log("data", data)
 
             detailsInfo.value = data["info"] || {}
             detailsIsanswered.value = data["isanswered"] || 0
@@ -849,6 +864,8 @@ export default {
 
             replaceState({uniqid: params["uniqid"]})
             seo.value = data.seo
+
+            getRecommend()
         }
 
         // 是否是后退 状态
@@ -1002,6 +1019,7 @@ export default {
         let keywordText = ref("") // 搜索的文本
 
         let list = ref([]) // 列表数据
+        let backupsList = [] // 备份列表数据
         let page = 1
         let total = ref(0) // 回答总数
         let loading = ref(false)
@@ -1027,6 +1045,8 @@ export default {
                     let data = res.data
 
                     list.value = list.value.concat(data.data || [])
+                    backupsList = backupsList.concat(data.data || [])
+
                     total.value = data.count || 0
 
                     keywordText.value = keyword.value || ""
@@ -1043,6 +1063,8 @@ export default {
 
                     if (keyword.value) isSearchMode.value = true
                     else isSearchMode.value = false
+
+                    if (type.value == "details") handleInsertRelatedlist()
                 })
                 .finally(() => (loading.value = false))
         }
@@ -1134,6 +1156,10 @@ export default {
 
                     // 默认 详情 div 滚动到顶部
                     nextTick(() => detailsAreaScrollTop())
+
+                    
+                    handleInsertRelatedlist()
+
                 })
                 .finally(() => (detailLoading.value = false))
         }
@@ -1893,12 +1919,19 @@ export default {
                 return
             }
             let list = document.querySelector(".list-box")
+            let item = list.querySelector(`.item${pitchIndex.value}`)
+            // let prevNode = list.previousElementSibling;  // 获取上一个节点
 
-            list.scrollTo({
+            // console.log(list.scrollTop, "list")
-                // top: 128 * pitchIndex.value -  pageListHeight.value / 2 - 385,
+            // console.log(item, "item")
-                top: 128 * pitchIndex.value + 68 - pageListHeight.value / 2,
+            // let top = item.offsetTop - prevNode.offsetTop
-                behavior: "smooth",
+
-            })
+            // list.scrollTo({
+            //     // top: 128 * pitchIndex.value -  pageListHeight.value / 2 - 385,
+            //     // top: 128 * pitchIndex.value + 68 - pageListHeight.value / 2,
+            //     top,
+            //     behavior: "smooth",
+            // })
 
             isNeedScrollMiddle = false
         }
@@ -1928,7 +1961,7 @@ export default {
         let itemHeightLeft = 0
         let itemHeightRight = 0
 
-        const itemStyle = (index, content) => {
+        const itemStyle = (index, content, typetype) => {
             if (index == 0) {
                 itemHeightLeft = 0
                 itemHeightRight = 0
@@ -1945,7 +1978,6 @@ export default {
                     obj["top"] = itemHeightLeft + "px"
 
                     itemHeightLeft += content == "" ? 107 : 136
-
                     obj["left"] = 0
                 } else {
                     obj["top"] = itemHeightRight + "px"
@@ -1955,13 +1987,21 @@ export default {
             } else {
                 obj["top"] = itemHeightLeft + "px"
 
+                if (!typetype) {
                     itemHeightLeft += content == "" ? 107 : 136
+
                     obj["height"] = content == "" ? 107 + "px" : 136 + "px"
+                } else {
+                    itemHeightLeft += typetype == "vote" ? 170 : 136
+
+                    obj["height"] = typetype == "vote" ? 170 + "px" : 136 + "px"
+                }
 
                 obj["left"] = 0
                 obj["width"] = "100%"
                 obj["paddingLeft"] = "calc((100vw - 1200px) / 2)"
             }
+            // 通过最后一个 算 列表的高度
             if (index + 1 == list.value.length) listHeight.value = Math.max(itemHeightLeft, itemHeightRight)
 
             return obj
@@ -2069,6 +2109,7 @@ export default {
             pitchIndex.value = null
             deleteState(["uniqid"])
             seo.value = {}
+            list.value = JSON.parse(JSON.stringify(backupsList))
         }
 
         // 全部的启动到底部
@@ -2219,7 +2260,6 @@ export default {
 
         let myModelState = ref(false) // 我的模式状态
         let myModelList = ref([]) // 我的模式列表
-        // let listlist = [] // 列表的临时存放
         let temporaryData = {} // 临时存放
 
         // 我的打开 详情
@@ -2230,16 +2270,23 @@ export default {
             }
             deleteState(["keyword"])
 
+            console.log(myModelState.value, "myModelState");
+            
             if (!myModelState.value) {
                 temporaryData = {
                     total: total.value,
                     keywordText: keywordText.value,
                     isSearchMode: isSearchMode.value,
+                    inTheEndState: inTheEndState.value,
                     type: type.value,
                     pitchIndex: pitchIndex.value,
                     listlist: JSON.parse(JSON.stringify(list.value)),
                 }
 
+                isSearchMode.value = false
+                inTheEndState.value = false
+                keyword.value = ""
+
                 list.value = JSON.parse(JSON.stringify(myModelList.value))
 
                 myModelState.value = true
@@ -2257,10 +2304,13 @@ export default {
 
             isSearchMode.value = temporaryData["isSearchMode"]
             keywordText.value = temporaryData["keywordText"]
+            keyword.value = temporaryData["keywordText"]
             total.value = temporaryData["total"]
             type.value = temporaryData["type"]
             pitchIndex.value = temporaryData["pitchIndex"]
+            inTheEndState.value = temporaryData["inTheEndState"]
             list.value = JSON.parse(JSON.stringify(temporaryData.listlist))
+
             myModelState.value = false
             let uniqid = list.value[pitchIndex.value]["uniqid"]
 
@@ -2309,6 +2359,9 @@ export default {
             } else deleteState(["tid", "uniqid"])
 
             getList()
+
+            // 创新请求 设置列表的高度 为0
+            listHeight.value = 0
         }
 
         // 打开举报
@@ -2366,7 +2419,7 @@ export default {
                 if (process.server) {
                     // const headers = useRequestHeaders(["cookie"])
                     await axios
-                        .post(baseURL + "/api/details", {uniqid: params["uniqid"]},)
+                        .post(baseURL + "/api/details", {uniqid: params["uniqid"]})
                         .then(response => {
                             let res = response.data
                             let data = res.data
@@ -2440,6 +2493,8 @@ export default {
                 let data = res.data
 
                 list.value = list.value.concat(data.data || [])
+                backupsList = backupsList.concat(data.data || [])
+
                 total.value = data.count || 0
 
                 keywordText.value = keyword.value || ""
@@ -2571,7 +2626,65 @@ export default {
             else setTimeout(() => openBottom(), 1000)
         }
 
+        let recommendList = [] // 推荐相关的数据
+        let recommendPage = 1
+
+        // 获取推荐数据
+        const getRecommend = () => {
+            $ajaxGET("/api/details/relatedlist", {page: recommendPage, limit: 20}).then(res => {
+                if (res.code != 200) return
+
+                let obj = {
+                    offer: "Offer",
+                    mj: "面经",
+                    vote: "投票",
+                    thread: "帖子",
+                }
+
+                let data = res.data
+                // 替换 类名
+                data.forEach(element => {
+                    element["typename"] = obj[element["type"]]
+                    element["isrecom"] = true
+                })
+                recommendList = recommendList.concat(data)
+                recommendPage++
+                handleInsertRelatedlist()
+            })
+        }
+
+        // 处理插入推荐数据
+        const handleInsertRelatedlist = () => {
+            // 计算需要插入元素的数量
+            let insertCount = Math.ceil(backupsList.length / 5)
+            // 检查数组B的长度是否足够
+            if (recommendList.length < insertCount) {
+                getRecommend()
+                return
+            }
+
+            let target = JSON.parse(JSON.stringify(backupsList))
+            let result = []
+            let j = 0
+
+            for (let i = 0; i < target.length; i++) {
+                result.push(target[i])
+                if ((i + 1) % 4 === 0 && j < recommendList.length) {
+                    result.push(recommendList[j])
+                    j++
+                }
+            }
+            list.value = JSON.parse(JSON.stringify(result))
+        }
+
+        const replaceNumberObj = {
+            0: "①",
+            1: "②",
+            2: "③",
+        }
+
         return {
+            replaceNumberObj,
             closeMyModel,
             myModelList,
             myModelState,

index.css

@@ -400,7 +400,6 @@ a {
   font-size: 12px;
   color: #72DB86;
   text-align: center;
-  width: 58px;
   height: 21px;
   background-color: rgba(114, 219, 134, 0.117647);
   padding: 0 5px;
@@ -422,6 +421,19 @@ a {
   margin: 0 10px;
   color: #D7D7D7;
 }
+#answer-app .main .list-box .list .item .content .answer .value-value:not(:last-of-type) {
+  padding-right: 10px;
+  position: relative;
+  margin-right: 10px;
+}
+#answer-app .main .list-box .list .item .content .answer .value-value:not(:last-of-type)::after {
+  content: "|";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  color: #D7D7D7;
+  transform: translateY(-50%);
+}
 #answer-app .main .list-box .list .item .content .bottom {
   margin-top: 18px;
   font-size: 12px;

index.less

@@ -518,7 +518,7 @@ a {
                                 font-size: 12px;
                                 color: #72DB86;
                                 text-align: center;
-                                width: 58px;
+                                // width: 58px;
                                 height: 21px;
                                 background-color: rgba(114, 219, 134, 0.117647);
                                 padding: 0 5px;
@@ -541,7 +541,23 @@ a {
 
                             .halving-line {
                                 margin: 0 10px;
-                                color:#D7D7D7;
+                                color: #D7D7D7;
+                            }
+
+                            .value-value {
+                                &:not(:last-of-type) {
+                                    padding-right: 10px;
+                                    position: relative;
+                                    margin-right: 10px;
+                                    &::after {
+                                        content: "|";
+                                        position: absolute;
+                                        right: 0;
+                                        top: 50%;
+                                        color: #D7D7D7;
+                                        transform: translateY(-50%);
+                                    }
+                                }
                             }
                         }