feat:实现首页推荐帖子功能 (#49)

src/assets/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4414354 */
-  src: url('iconfont.woff2?t=1707288951155') format('woff2'),
-       url('iconfont.woff?t=1707288951155') format('woff'),
-       url('iconfont.ttf?t=1707288951155') format('truetype');
+  src: url('iconfont.woff2?t=1707791197944') format('woff2'),
+       url('iconfont.woff?t=1707791197944') format('woff'),
+       url('iconfont.ttf?t=1707791197944') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gengduo-2:before {
+  content: "\e641";
+}
+
 .icon-xiangji:before {
   content: "\e672";
 }

src/assets/icons/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1311988",
+      "name": "更多",
+      "font_class": "gengduo-2",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
     {
       "icon_id": "658053",
       "name": "相机",

src/store/index.ts

@@ -61,6 +61,15 @@ export const useStore = defineStore('user', {
             localStorage.setItem("LongToken", longToken)
             localStorage.setItem("isAutoLogin", "true")
         },
+        getUserLongToken () {
+            if (sessionStorage.getItem("LongToken") !== null) {
+                this.longToken = sessionStorage.getItem("LongToken") as string
+            }
+            else if (localStorage.getItem("LongToken") !== null) {
+                this.longToken = localStorage.getItem("LongToken") as string
+            }
+            return this.longToken
+        },
 
         loginOut () {
             localStorage.removeItem("UserId")

src/views/home/announced.vue

@@ -1,9 +1,14 @@
 <template>
-    <div></div>
+    <div class="main-box"></div>
 </template>
 
 <script setup lang="ts">
 </script>
 
 <style scoped lang="css">
+.main-box {
+    width: 400px;;
+    height: 360px;
+    background-color: #fff;
+}
 </style>

src/views/home/home.vue

@@ -151,32 +151,33 @@ onMounted(() => {
         .section-bottom {
             width: 100%;
             padding: 0 2% 0;
+            margin-bottom: 20px;
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            margin-bottom: 20px;
 
             .recommend {
-                max-width: 740px;
+                width: 790px;
                 height: 780px;
                 margin-right: 10px;
             }
 
             .right {
+                width: 400px;
                 height: 780px;
                 display: flex;
                 flex-direction: column;
 
                 .rank {
-                    width: 450px;
+                    max-width: 400px;
                     height: 520px;
                     background-color: #fff;
                     margin-bottom: 10px;
                 }
 
                 .announced {
-                    width: 450px;
+                    max-width: 400px;
                     height: 250px;
                     background-color: #fff;
                 }
@@ -193,4 +194,32 @@ onMounted(() => {
         }
     }
 }
+
+@media screen and (max-width: 1000px){
+
+    .section-top {
+        width: 100%;
+    }
+    .section-bottom {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+
+        display: flex;
+        flex-direction:  column;
+
+        .recommend {
+            width: 100%;
+            margin-right: 0;
+        }
+
+        .rank {
+            width: 100%;
+        }
+
+        .announced {
+            width: 100%;
+        }
+    }
+}
 </style>

src/views/home/rank.vue

@@ -7,7 +7,7 @@
 
 <style scoped lang="css">
 .main-box {
-    width: 450px;
+    width: 400px;
     height: 520px;
     background-color: #fff;
 }

src/views/home/recommend.vue

@@ -1,14 +1,213 @@
 <template>
-    <div class="main-box"></div>
+    <div class="main-box">
+        <header class="header">
+            <div class="select-box">
+                <div class="option">
+                    <input 
+                        type="radio" 
+                        id="hot" 
+                        name="select" 
+                        v-model="selectMain"
+                        value="hot"
+                        checked
+                    >  
+                    <label for="hot">热门</label>
+                </div>
+                <div class="option">
+                    <input 
+                        type="radio" 
+                        id="new" 
+                        name="select"
+                        v-model="selectMain"
+                        value="new"
+                    >
+                    <label for="new">最新</label>
+                </div>
+                <div class="option">
+                    <input 
+                        type="radio" 
+                        id="recommend" 
+                        name="select"
+                        v-model="selectMain"
+                        value="recommend"
+                    >
+                    <label for="recommend">猜你喜欢</label>
+                </div>
+            </div>
+            <div class="more">
+                <i 
+                    class="iconfont icon-gengduo-2"
+                    @mouseover="() => { isShowClassify = true }"
+                    @mouseleave="mouseleaveClassifyPop"
+                ></i>
+                <div class="more-box" v-show="isShowClassify">
+                    <div>
+                        <input 
+                            id="goods"
+                            type="radio"
+                            name="select-classify"
+                            v-model="selectClassify"
+                            value="goods"
+                            checked
+                        >
+                        <label for="goods">商品</label>
+                    </div>
+                    <div>
+                        <input 
+                            id="file"
+                            type="radio" 
+                            name="select-classify"
+                            v-model="selectClassify"
+                            value="file"
+                        >
+                        <label for="file">文件</label>
+                    </div>
+                    <div>
+                        <input 
+                            id="posts"
+                            type="radio"
+                            name="select-classify"
+                            v-model="selectClassify"
+                            value="posts"
+                        >
+                        <label for="posts">帖子</label>
+                    </div>
+                    <div>
+                        <input 
+                            id="user"
+                            type="radio"
+                            name="select-classify"
+                            v-model="selectClassify"
+                            value="user"
+                        >
+                        <label for="user">用户</label>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <section class="section">
+            <div v-show="selectMain === 'hot'">
+                <ShowRecommend 
+                    class="hot" 
+                    :classify="selectClassify"
+                    :mainClassify="selectMain"
+                ></ShowRecommend>
+            </div>
+        </section>
+    </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import ShowRecommend from './show-recommend.vue'
+
+const isShowClassify = ref(false)
+const selectMain = ref('hot')
+const selectClassify = ref('goods')
+
+const mouseleaveClassifyPop = () => {
+    const popup = document.querySelector('.more-box') as Element
+    popup.addEventListener('mouseleave', () => {
+        isShowClassify.value = false
+    })
+    const more = document.querySelector('.more') as Element
+    more.addEventListener('mouseleave', () => {
+        isShowClassify.value = false
+    })
+}
 </script>
 
 <style scoped lang="css">
 .main-box {
-    width: 740px;
+    width: 790px;
     height: 780px;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+        width: 100%;
+        height: 50px;
+        padding: 0 10px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #e5e5e583;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .select-box {
+            display: flex;
+
+            .option {
+                label {
+                    margin-right: 20px;
+                    cursor: pointer;
+                    user-select: none;
+                }
+                
+                input {
+                    display: none;
+                }
+                input:checked + label {
+                    color: #275187;
+                    font-weight: 700;
+                }
+            }
+
+        }
+
+        .more {
+            i {
+                font-size: 20px;
+                cursor: pointer;
+            }
+
+            .more-box {
+                position: absolute;
+                width: 120px;
+                height: 120px;
+                border-radius: 10px;
+                background-color: #fff;
+                box-shadow: 0 0 15px 1px #dadada;
+                padding: 5px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                div {
+                    width: 100%;
+                    height: 30px;
+                    cursor: pointer;
+                    user-select: none;
+                    padding-left: 10px;
+                    display: flex;
+                    align-items: center;
+
+                    input {
+                        display: none;
+                    }
+                    
+                    input:checked + label {
+                        color: rgb(139, 165, 199);
+                        font-weight: 700;
+                    }
+                }
+                div:hover {
+                    background-color: #d7d7d736;
+                }
+            }
+        }
+    }
+
+    .section {
+        width: 100%;
+        height: 100%;
+
+        .hot {
+            width: 100%;
+            height: 720px;
+            overflow-y: auto;
+        }   
+    }
 }
 </style>