feat:修改滑动右侧样式

src/mock/homeData.ts

@@ -172,25 +172,6 @@ export const guardRecommendFarms = buildGuardFarms(guardRecommendFarmConfig, 'gu
 const AVATAR =
   'https://p3-pc.douyinpic.com/img/aweme-avatar/tos-cn-avt-0015_99d3a4923c94e1e27b16209743eaec24~c5_168x168.jpeg?from=2956013662'
 
-export const miniPrograms = [
-  {
-    id: 'mp1',
-    name: '飞鸟认养',
-    icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/tt-icon.png',
-  },
-  {
-    id: 'mp2',
-    name: '果园直播',
-    icon: 'https://gd-hbimg.huaban.com/65130a3e6a139530bb03bd118e21a2603af7df4e1303b-OOzcBu_fw658webp',
-  },
-]
-
-export const recentUsers = recommendVideos.slice(0, 6).map((v) => ({
-  uid: String(v.author?.uid || v.author_user_id),
-  nickname: v.author?.nickname || '用户',
-  avatar: v.author?.avatar_168x168?.url_list?.[0] || AVATAR,
-}))
-
 export const longVideos = recommendVideos.slice(0, 2).map((v, i) => ({
   id: `lv${i}`,
   title: v.desc?.slice(0, 20) || '长视频',

src/views/home/index.vue

@@ -2,93 +2,24 @@
   <div id="home-index" class="test-slide-wrapper">
     <SlideHorizontal v-model:index="state.baseIndex" name="first">
       <SlideItem class="sidebar">
-        <div class="header">
-          <div class="left">下午好</div>
-          <div class="right" @click="nav('/home/live')">
-            <Icon icon="iconamoon:scanner" />
-            <span>扫一扫</span>
-          </div>
-        </div>
-        <div class="card">
-          <div class="header">
-            <div class="left">常用小程序</div>
-            <div class="right">
-              <span>全部</span>
-              <Icon icon="icon-park-outline:right" />
-            </div>
-          </div>
-          <div class="content">
-            <div
-              v-for="mp in miniPrograms"
-              :key="mp.id"
-              class="item"
-              @click="_no"
-            >
-              <img class="xcx" :src="mp.icon" alt="" />
-              <span>{{ mp.name }}</span>
-            </div>
-          </div>
+        <div class="user-profile">
+          <img class="avatar" :src="sidebarUser.avatar" alt="" />
+          <span class="nickname">{{ sidebarUser.nickname }}</span>
         </div>
 
-        <div class="card">
-          <div class="header">
-            <div class="left">最近常看</div>
-            <div class="right">
-              <span>全部</span>
-              <Icon icon="icon-park-outline:right" />
-            </div>
-          </div>
-          <div class="content">
-            <div
-              v-for="user in recentUsers"
-              :key="user.uid"
-              class="item avatar"
-              @click="goUser(user)"
-            >
-              <img :src="user.avatar" alt="" />
-              <span>{{ user.nickname }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="card">
-          <div class="header">
-            <div class="left">常用功能</div>
-            <div class="right" />
-          </div>
-          <div class="content">
-            <div class="item" @click="_no">
-              <Icon icon="ion:wallet-outline" />
-              <span>我的钱包</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="mingcute:coupon-line" />
-              <span>券包</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="icon-park-outline:bytedance-applets" />
-              <span>小程序</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="solar:history-linear" />
-              <span>观看历史</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="fluent:content-settings-24-regular" />
-              <span>内容偏好</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="iconoir:cloud-download" />
-              <span>离线模式</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="ep:setting" />
-              <span>设置</span>
-            </div>
-            <div class="item" @click="_no">
-              <Icon icon="icon-park-outline:baggage-delay" />
-              <span>稍后再看</span>
-            </div>
+        <div class="menu-card">
+          <div
+            v-for="(item, index) in menuItems"
+            :key="item.id"
+            class="menu-item"
+            :class="{ 'is-last': index === menuItems.length - 1 }"
+            @click="onMenuClick(item)"
+          >
+            <span class="label">
+              {{ item.label }}
+              <Icon icon="icon-park-outline:right" class="arrow" />
+            </span>
+            <span v-if="item.badge" class="badge">{{ item.badge }}</span>
           </div>
         </div>
       </SlideItem>
@@ -137,7 +68,7 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
 import SlideItem from '@/components/slide/SlideItem.vue'
@@ -151,7 +82,7 @@ import Slide1 from './slide/Slide1.vue'
 import { _no, _notice } from '@/utils'
 import BaseMask from '@/components/BaseMask.vue'
 import BaseFooter from '@/components/BaseFooter.vue'
-import { miniPrograms, recentUsers, recommendVideos } from '@/mock/homeData'
+import { recommendVideos } from '@/mock/homeData'
 
 const route = useRoute()
 const nav = useNav()
@@ -172,10 +103,37 @@ const state = reactive({
   } as VideoItem & { isRequest: boolean; aweme_list: unknown[] },
 })
 
-function goUser(user: (typeof recentUsers)[number]) {
-  const video = recommendVideos.find((v) => v.author.uid === user.uid) || recommendVideos[0]
-  state.currentItem = { ...video, isRequest: false, aweme_list: [] }
-  state.baseIndex = 2
+const sidebarUser = computed(() => {
+  const author = recommendVideos[0]?.author
+  return {
+    nickname: author?.nickname || '周六周六周六',
+    avatar:
+      author?.avatar_168x168?.url_list?.[0] ||
+      'https://p3-pc.douyinpic.com/img/aweme-avatar/tos-cn-avt-0015_99d3a4923c94e1e27b16209743eaec24~c5_168x168.jpeg?from=2956013662',
+  }
+})
+
+type MenuItem = {
+  id: string
+  label: string
+  badge?: number
+  path?: string
+}
+
+const menuItems: MenuItem[] = [
+  { id: 'msg', label: '互动消息', badge: 9 },
+  { id: 'adopt', label: '我的认养', path: '/my-guard' },
+  { id: 'like', label: '我的点赞' },
+  { id: 'favorite', label: '我的收藏' },
+]
+
+function onMenuClick(item: MenuItem) {
+  if (item.path) {
+    nav(item.path)
+    state.baseIndex = 1
+    return
+  }
+  _no()
 }
 
 function setCurrentItem(val?: unknown) {
@@ -278,95 +236,65 @@ function closeComments() {
     width: 80%;
     height: calc(var(--vh, 1vh) * 100);
     overflow: auto;
-    background: rgb(22, 22, 22);
-    padding: 10rem;
-    padding-bottom: 20rem;
+    background: #ececec;
+    padding: 30rem 20rem;
     box-sizing: border-box;
 
-    & > .header {
-      font-size: 16rem;
+    .user-profile {
       display: flex;
-      color: white;
-      justify-content: space-between;
       align-items: center;
+      gap: 10rem;
 
-      .right {
-        border-radius: 20rem;
-        padding: 8rem 15rem;
-        background: rgb(36, 36, 36);
-        display: flex;
-        align-items: center;
-        font-size: 14rem;
-        gap: 10rem;
-        cursor: pointer;
+      .avatar {
+        width: 46rem;
+        height: 46rem;
+        border-radius: 50%;
+      }
 
-        svg {
-          font-size: 18rem;
-        }
+      .nickname {
+        font-size: 16rem;
+        font-weight: 500;
       }
     }
 
-    .card {
-      margin-top: 10rem;
-      border-radius: 12rem;
-      padding: 15rem;
-      background: rgb(29, 29, 29);
+    .menu-card {
+      background: #fff;
+      border-radius: 8rem;
+      margin-top: 18rem;
 
-      .header {
-        margin-bottom: 8rem;
-        font-size: 14rem;
+      .menu-item {
         display: flex;
-        color: white;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        padding: 15rem 10rem;
+        border-bottom: .5px solid rgba(0, 0, 0, 0.1);
+        cursor: pointer;
 
-        .right {
-          display: flex;
-          align-items: center;
-          font-size: 12rem;
-          gap: 4rem;
-          color: gray;
-          cursor: pointer;
-
-          svg {
-            font-size: 16rem;
-          }
+        &.is-last {
+          border-bottom: none;
         }
-      }
-
-      .content {
-        color: white;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
 
-        .item {
-          min-height: 20vw;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
+        .label {
+          display: inline-flex;
           align-items: center;
-          font-size: 14rem;
-          gap: 8rem;
-          cursor: pointer;
+          gap: 2rem;
+          font-size: 16rem;
 
-          svg {
-            font-size: 28rem;
-          }
-
-          .xcx {
-            border-radius: 12rem;
-            width: 50rem;
-            height: 50rem;
+          .arrow {
+            font-size: 14rem;
           }
         }
 
-        .avatar {
-          height: 25vw;
-
-          img {
-            border-radius: 50%;
-            width: 50rem;
-          }
+        .badge {
+          width: 20rem;
+          height: 20rem;
+          border-radius: 50%;
+          background: #FFA617;
+          color: #fff;
+          font-size: 12rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
     }

src/views/my-guard/components/GuardInfoBoard.vue

@@ -129,17 +129,18 @@ function onEdit() {
   }
   .info-cards {
     position: absolute;
-    left: 10rem;
-    right: 10rem;
+    left: 50%;
     bottom: calc(var(--footer-bottom-offset) + var(--footer-height) + 10rem);
     z-index: 2;
+    width: calc(100vw - 20rem);
+    transform: translateX(-50%);
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
     gap: 4rem;
 
     .info-card {
-      min-width: 0;
       width: 100%;
+      min-width: 0;
       height: 58rem;
       background: var(--card-border-bg) no-repeat center / 100% 100%;
       display: flex;
@@ -158,7 +159,6 @@ function onEdit() {
 
       .card-bottom {
         width: 100%;
-        font-family: SmileySans, sans-serif;
         font-size: 10rem;
       }