✨ feat: 样式优化

src/views/list/index.vue

@@ -78,6 +78,8 @@ watch(
             <n-image
               class="recommend-item-img-img"
               :src="getImgUrl( (item.picUrl || item.coverImgUrl), '200y200')"
+              width="200"
+              height="200"
               lazy
               preview-disabled
             />

src/views/mv/index.vue

@@ -8,7 +8,7 @@
         <div class="mv-item" v-for="(item, index) in mvList" :key="item.id"
           :class="setAnimationClass('animate__bounceIn')" :style="setAnimationDelay(index, 30)">
           <div class="mv-item-img" @click="handleShowMv(item)">
-            <n-image class="mv-item-img-img" :src="getImgUrl((item.cover), '200y200')" lazy preview-disabled />
+            <n-image class="mv-item-img-img" :src="getImgUrl((item.cover), '200y112')" lazy preview-disabled width="200" height="112" />
             <div class="top">
               <div class="play-count">{{ formatNumber(item.playCount) }}</div>
               <i class="iconfont icon-videofill"></i>
@@ -85,16 +85,17 @@ const close = () => {
 
   .mv-item {
     @apply p-2 rounded-lg;
-    background-color: #454545;
+    background-color: #1f1f1f;
     &-img {
       @apply rounded-lg overflow-hidden relative;
+      line-height: 0;
 
       &:hover img {
         @apply hover:scale-110 transition-all duration-300 ease-in-out object-top;
       }
 
       &-img {
-        @apply h-full w-full rounded-xl overflow-hidden;
+        @apply w-full rounded-lg overflow-hidden;
       }
 
       .top {
@@ -118,7 +119,7 @@ const close = () => {
 
         .play-count {
           position: absolute;
-          top: 10px;
+          top: 20px;
           left: 10px;
           font-size: 14px;
         }

src/views/user/index.vue

@@ -17,7 +17,7 @@ const router = useRouter()
 const userDetail = ref<IUserDetail>()
 const playList = ref<any[]>([])
 const recordList = ref()
-const user = store.state.user
+let user = store.state.user
 
 const loadPage = async () => {
   if (!user) {
@@ -35,14 +35,14 @@ const loadPage = async () => {
   recordList.value = recordData.allData
 }
 
-loadPage()
-
-watch(() => router.currentRoute.value, (to) => {
-  if (to.path === "/user") {
+watchEffect(() => {
+    const localUser = localStorage.getItem('user')
+    store.state.user = localUser ? JSON.parse(localUser) : null
+    user = store.state.user
     loadPage()
-  }
 })
 
+
 const isShowList = ref(false)
 const list = ref<Playlist>()
 // 展示歌单
@@ -83,7 +83,7 @@ const handlePlay = (item: any) => {
       <div class="page">
         <div class="user-name">{{ user.nickname }}</div>
         <div class="user-info">
-          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl)" />
+          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl,'50y50')" />
           <div class="user-info-list">
             <div class="user-info-item">
               <div class="label">{{ userDetail.profile.followeds }}</div>
@@ -111,7 +111,7 @@ const handlePlay = (item: any) => {
               @click="showPlaylist(item.id)"
             >
               <n-image
-                :src="getImgUrl( item.coverImgUrl, '')"
+                :src="getImgUrl( item.coverImgUrl, '50y50')"
                 class="play-list-item-img"
                 lazy
                 preview-disabled