diff --git a/src/.env.development b/src/.env.development
index b8b6bd0f87f130b6a725ca7f83fd31ec28a7e033..4355ff68582168eb9a3cdf5ddceb3253d6729027 100644
--- a/src/.env.development
+++ b/src/.env.development
@@ -13,5 +13,5 @@ VITE_APP_BASE_API = 'http://localhost:3000'
 # proxy代理配置
 # 例如：VITE_APP_TARGET_URL = "http://vapi.youlai.tech"
 # VITE_APP_TARGET_URL = "http://localhost:5173" # 线上接口
-VITE_APP_TARGET_URL = "http://43.139.205.178:3000" # 线上接口
+VITE_APP_TARGET_URL = "http://123.57.181.60:3000" # 线上接口
 VITE_APP_TARGET_BASE_API = ''
\ No newline at end of file
diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 0b936801649535b3a87b720530e658fd231b536c..b2a3ff569340cec7bdcd2effd3967c7f4b996a76 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -8,6 +8,9 @@ const apiPath = {
     login: '/login/cellphone',
     logout: '/logout',
     code: '/captcha/sent',
+    qr: '/login/qr/key',
+    qrcreate: "/login/qr/create",
+    qrcheck: "/login/qr/check"
 }
 
 /**
@@ -67,3 +70,19 @@ export function logout(params: loginType.LogoutParams) {
 }
 
 
+/**
+ * 说明：调用此接，生成一个key
+ */
+export function qr() {
+    return request({
+        url: apiPath.qr,
+        method: "get"
+    })
+}
+export function qrcreate(){
+    return request({
+        url:apiPath.qrcheck,
+        method:"get"
+    })
+}
+111
\ No newline at end of file
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23d88bdc21b4a72d19b85a002a7f33f7ca8b280c
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,19 @@
+import request from "@/utils/request";
+
+// 用户相关api
+const apiPath = {
+    userList: "/user/detail", // 获取用户详情
+};
+
+/**
+ * 用户信息
+ * @说明 : 登录后调用此接口 , 传入用户 id, 可获取用户播放记录
+ * @必选参数 : uid : 用户 id
+ */
+export function getUserList(params: { uid: number; }) {
+    return request({
+        url: apiPath.userList,
+        method: "get",
+        params,
+    });
+}
diff --git a/src/components/createSongSheet.vue b/src/components/createSongSheet.vue
index 54eed2f2dc1ecb510b2e7bde81b191a28e54fdfa..2de5d17d151dc1487be63b0bf4fb8d80e1cf6f83 100644
--- a/src/components/createSongSheet.vue
+++ b/src/components/createSongSheet.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { ref, defineProps, defineEmits } from 'vue'
-import { createSongSheet } from '../api/songSheet/index'
+import { createSongSheet } from '@/api/songSheet/index'
 
 const emit = defineEmits(['cancel', 'createSongSheets'])
 defineProps({
diff --git a/src/router/index.ts b/src/router/index.ts
index 94ceddf11223ee39c8b261f341feace62a71b816..c04fdf43332cc3b579b0e5572704afe8f3c4451b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,8 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  // history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(),
   routes: [
     {
       path: "/",
@@ -53,6 +54,11 @@ const router = createRouter({
               path: "/home/like",
               component: () => import("@/views/home/myLike/index.vue"),
             },
+            {
+              //我的
+              path: "/home/my",
+              component: () => import("@/views/home/My/my.vue"),
+            },
             {
               //用户歌单页
               path: "/home/userSongSheet",
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
index 2c915fbda58ebd77243900a39c78132006b5f1a3..fba9aa145818390c20256eb0c1fe936d67a2f098 100644
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@@ -1,6 +1,6 @@
 import { ref, onMounted, watch } from "vue";
 import { defineStore } from "pinia";
-import { getPlayHistory, setPlayHistory } from "../utils/auth";
+import { getPlayHistory, setPlayHistory, getUser } from "../utils/auth";
 import { getMusicLikeList } from "@/api/music/index";
 
 interface songInfoType {
@@ -36,12 +36,10 @@ const useCounterStore = defineStore("counter", () => {
     playList.value = getPlayHistory() ? getPlayHistory() : [];
     if (playList.value.length > 0) {
       songInfo.value = playList.value[0];
-      console.log(songInfo.value);
-      
       playIndex.value = 0;
     }
     //获取我的喜欢中的歌曲id
-    const data = await getMusicLikeList();
+    const data = await getMusicLikeList(getUser().userId);
     if (data.code == "success") {
       if (data.data?.ids.length > 0) {
         musicLikeListId.value = data.data?.ids;
@@ -49,7 +47,7 @@ const useCounterStore = defineStore("counter", () => {
     }
   });
 
- // 功能：格式化数字，数字转换为万单位
+  // 功能：格式化数字，数字转换为万单位
   function formatNumber(num: number) {
     // 将num转换为数字
     num = Number(num);
@@ -63,10 +61,10 @@ const useCounterStore = defineStore("counter", () => {
     }
   }
   //将秒转化为时分秒
- // 函数formateTime，用于格式化时间
- // 参数time，表示时间
- // 将time转换为数字
- function formateTime(time: any) {
+  // 函数formateTime，用于格式化时间
+  // 参数time，表示时间
+  // 将time转换为数字
+  function formateTime(time: any) {
     time = Number(time);
     // 如果time的值大于3位，则表示为秒，需要除以1000
     if (time.toFixed(0).length > 3) {
@@ -83,9 +81,8 @@ const useCounterStore = defineStore("counter", () => {
     // 秒大于59，则表示为59
     const formatSecond = second > 59 ? 59 : second;
     // 返回格式化后的时间
-    return `${hours > 0 ? `${hours}:` : ""}${
-      minute < 10 ? "0" + minute : minute
-    }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
+    return `${hours > 0 ? `${hours}:` : ""}${minute < 10 ? "0" + minute : minute
+      }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
   }
   //点击搜索出来的歌曲放入songInfo里面和历史记录里面
   function handlePlaySong(val: any) {
@@ -107,7 +104,7 @@ const useCounterStore = defineStore("counter", () => {
     songInfo.value = val;
   }
   //时间戳转换为正常的时间
- // 获取时间戳转换
+  // 获取时间戳转换
   const getTimestampConversion = function (timestamp: number) {
     let timeStamp;
     // 获取时间戳长度
@@ -138,7 +135,7 @@ const useCounterStore = defineStore("counter", () => {
     // 返回转换后的时间戳
     return Y + M + D;
   };
- // 监听歌曲信息，当歌曲信息改变时，更新播放列表的播放索引
+  // 监听歌曲信息，当歌曲信息改变时，更新播放列表的播放索引
   watch(songInfo, () => {
     // 获取播放列表中与歌曲信息id相同的项的索引
     playIndex.value = playList.value.findIndex(
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 7aff99d60c02b42e6afbc0a840097ceda3755f01..6073814f625d7603c1af8f71f57572dd3e15aad0 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,23 +1,37 @@
-const TOKEN_NAME = 'music_token'
-const TOKEN_USER = 'music_user'
-const TOKEN_RECORD = 'music_record'
+const TOKEN_NAME = "music_token";
+const TOKEN_USER = "music_user";
+const TOKEN_RECORD = "music_record";
 /** 获取 token */
-const getToken = () => localStorage.getItem(TOKEN_NAME)
+const getToken = () => localStorage.getItem(TOKEN_NAME);
 /**设置 token */
-const setToken = (value: String) => localStorage.setItem(TOKEN_NAME, JSON.stringify(value))
+const setToken = (value: String) =>
+  localStorage.setItem(TOKEN_NAME, JSON.stringify(value));
 /** 删除 token */
-const removeToken = () => localStorage.removeItem(TOKEN_NAME)
+const removeToken = () => localStorage.removeItem(TOKEN_NAME);
 /**获取用户信息 */
-const getUser = () => JSON.parse(localStorage.getItem(TOKEN_USER))
+const getUser = () => JSON.parse(String(localStorage.getItem(TOKEN_USER)));
 /**设置用户 */
-const setUser = (value: Object) => localStorage.setItem(TOKEN_USER, JSON.stringify(value))
+const setUser = (value: Object) =>
+  localStorage.setItem(TOKEN_USER, JSON.stringify(value));
 /**删除用户 */
-const removeUser = () => localStorage.removeItem(TOKEN_USER)
+const removeUser = () => localStorage.removeItem(TOKEN_USER);
 /**是否登录（有权限） */
-const isAuth = () => !!getToken()
+const isAuth = () => !!getToken();
 /** 存入播放记录*/
-const setPlayHistory = (value: Object) => localStorage.setItem(TOKEN_RECORD, JSON.stringify(value))
+const setPlayHistory = (value: Object) =>
+  localStorage.setItem(TOKEN_RECORD, JSON.stringify(value));
 /**获取播放记录 */
-const getPlayHistory = () => JSON.parse(localStorage.getItem(TOKEN_RECORD))
+const getPlayHistory = () =>
+  JSON.parse(String(localStorage.getItem(TOKEN_RECORD)));
 
-export { getToken, setToken, removeToken, isAuth, removeUser, getUser, setUser, setPlayHistory, getPlayHistory }
+export {
+  getToken,
+  setToken,
+  removeToken,
+  isAuth,
+  removeUser,
+  getUser,
+  setUser,
+  setPlayHistory,
+  getPlayHistory,
+};
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 957d7b24b61e8f1e45d36763120ee30fb36f64b1..c535c015b8c0f884bcbe744f16229e7cd4ccc47a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -316,20 +316,31 @@ import CreateSongSheetVue from '@/components/createSongSheet.vue'
 import Recharge from '@/components/Recharge.vue'
 const router = useRouter()//路由
 const route = useRoute();
-const { playList, currentTime, totalDuration, playSchedule, songInfo, searchInput, userSongSheetId, userSongSheetName, playIndex, userSongSheetList } = toRefs(useCounterStore())
-const { formateTime } = useCounterStore()//获取pinia中的方法
-const transitionName = ref<string>('')//动画
-const dialogVisible = ref<boolean>(false)//登录弹出框
-const visible = ref<boolean>(false)//侧弹出框
-const inputRangeDom: any = ref(null)
-const switchLogin = ref(false)
-const phone = ref<number | string>()//手机号
-const code = ref<number | string>()//验证码
-const password = ref<number | string>()//密码
-const index_background = ref(0)//控制测导航栏的状态
-const search_border = ref<boolean>(false)//搜索框获取焦点后显示边框
-const my_music = ref<boolean>(false)//是否显示个人工具栏
-const urlAudeo = ref<any>()//音频url地址状态
+const {
+  playList,
+  currentTime,
+  totalDuration,
+  playSchedule,
+  songInfo,
+  searchInput,
+  userSongSheetId,
+  userSongSheetName,
+  playIndex,
+  userSongSheetList,
+} = toRefs(useCounterStore());
+const { formateTime } = useCounterStore(); //获取pinia中的方法
+const transitionName = ref<string>(""); //动画
+const dialogVisible = ref<boolean>(false); //登录弹出框
+const visible = ref<boolean>(false); //侧弹出框
+const inputRangeDom: any = ref(null);
+const switchLogin = ref(false);
+const phone = ref<number | string>(); //手机号
+const code = ref<number | string>(); //验证码
+const password = ref<number | string>(); //密码
+const index_background = ref(0); //控制测导航栏的状态
+const search_border = ref<boolean>(false); //搜索框获取焦点后显示边框
+const my_music = ref<boolean>(false); //是否显示个人工具栏
+const urlAudeo = ref<any>(); //音频url地址状态
 // const index = ref<number>(0)//播放列表的索引
 const isSingleLoop = ref<boolean>(false)//是否单曲循环
 const isPlay = ref<boolean>(true)//是否播放
@@ -343,9 +354,10 @@ const user = ref()//用户账号信息
 const isSingIapDeduct = ref<boolean>(false)//是否为Vip
 const isDrop = ref<boolean>(false)//是否需要充值
 const coordinate = reactive({
-    X: 20, Y: 0
-})
-const timer = ref()
+  X: 20,
+  Y: 0,
+});
+const timer = ref();
 // const userSongSheetList = ref<any>([])//用户歌单名称列表
 //初始化执行
 onMounted(() => {
@@ -386,43 +398,54 @@ const VipCenter=()=>{
 
 //获取用户歌单
 async function getUserSongSheet() {
-    if (!getUser()) return
-    const { data } = await getSongSheet(getUser().userId)
-    if (data.code === 200) {
-        userSongSheetList.value = data.playlist
-    }
+  // 判断用户是否登录
+  if (!getUser()) return;
+  // 获取用户歌曲表
+  const { data } = await getSongSheet(getUser().userId);
+  // 判断获取的用户歌曲表是否成功
+  if (data.code === 200) {
+    // 将获取的用户歌曲表赋值给userSongSheetList
+    userSongSheetList.value = data.playlist;
+  }
 }
 //关闭音量条显示
 function closeSound() {
-    timer.value = setTimeout(() => {
-        isSound.value = false
-    }, 500)
+  timer.value = setTimeout(() => {
+    isSound.value = false;
+  }, 500);
 }
 //进入音量条,清除timer里面的setTimeout定时器
 function showSound() {
-    clearTimeout(timer.value)
+  clearTimeout(timer.value);
 }
-//进入播放条触发
+// 进入播放条触发
+// 函数用于显示播放时间
 function displaysThePlaybackTime(e: any) {
-    slider.value = true
-    // 应用新的值到样式中
-    sliderStyle.value.style.setProperty('--sliderH', "4px");
-    if (e.clientX < 70) {
-        coordinate.X = 20
-        return
-    } else {
-        coordinate.X = e.clientX - 60
-    }
-    if ((e.clientX + 70) > document.body.clientWidth) return
+  // 设置滑块值为true
+  slider.value = true;
+  // 应用新的值到样式中
+  sliderStyle.value.style.setProperty("--sliderH", "4px");
+  // 如果鼠标的X坐标小于70，则设置X坐标为20，并返回
+  if (e.clientX < 70) {
+    coordinate.X = 20;
+    return;
+  } else {
+    // 否则，设置X坐标为鼠标的X坐标减去60
+    coordinate.X = e.clientX - 60;
+  }
+  // 如果鼠标的X坐标加上70大于文档的宽度，则返回
+  if (e.clientX + 70 > document.body.clientWidth) return;
 }
 //移除播放条触发
 function cancellationTime() {
-    sliderStyle.value.style.setProperty('--sliderH', " 2px");
-    slider.value = false
+  // 设置滑块样式
+  sliderStyle.value.style.setProperty("--sliderH", " 2px");
+  // 设置滑块值为false
+  slider.value = false;
 }
 //关闭歌单侧弹出框
 function cancel() {
-    isSongSheet.value = false
+  isSongSheet.value = false;
 }
 //关闭充值界面 
 function canelRe(el:boolean){
@@ -431,657 +454,679 @@ function canelRe(el:boolean){
 }
 //添加用户歌单
 function createSongSheets(item: any) {
-    userSongSheetList.value.push(item)
+  userSongSheetList.value.push(item);
 }
 //播放/暂停
 const handlePlayPause = () => {
-    if (isPlay.value) {
-        isPlay.value = false
-        urlAudeo.value.pause()
-    } else {
-        isPlay.value = true
-        urlAudeo.value.play()
-
-    }
-}
+  // 如果isPlay的值为true，则将isPlay的值设置为false，暂停urlAudeo的播放
+  if (isPlay.value) {
+    isPlay.value = false;
+    urlAudeo.value.pause();
+    // 否则将isPlay的值设置为true，继续播放urlAudeo
+  } else {
+    isPlay.value = true;
+    urlAudeo.value.play();
+  }
+};
 //修改侧弹出框
-const clickEven = () => visible.value = false
+const clickEven = () => (visible.value = false);
 //获取搜索结果，进行跳转
 const handleSearch = (e: any) => {
-    // 当按下回车键时，执行搜索
-    if (e.keyCode === 13) {
-        // 获取搜索框中的值
-        searchInput.value = e.target.value
-        // 跳转到搜索页面
-        router.push({ path: '/home/search' })
-    }
+  // 判断按下的是否是Enter键
+  if (e.keyCode === 13) {
+    // 获取搜索框的值
+    searchInput.value = e.target.value
+    // 跳转到搜索页面
+    router.push({ path: '/home/search' })
+  }
 }
 //跳转
 const getIndex_background = (val: number) => {
-    index_background.value = val
-    switch (val) {
-        case 0:
-            router.push('/home/recommend')
-            break;
-        case 1:
-            router.push('/home/find')
-            break;
-        case 2:
-            router.push('/home/video')
-            break;
-        case 3:
-            router.push('/home/like')
-            break;
-        case 5:
-            router.push('/home/record')
-            break;
-    }
-}
+  index_background.value = val;
+  switch (val) {
+    case 0:
+      router.push("/home/recommend");
+      break;
+    case 1:
+      router.push("/home/find");
+      break;
+    case 2:
+      router.push("/home/video");
+      break;
+    case 3:
+      router.push("/home/like");
+      break;
+    case 5:
+      router.push("/home/record");
+      break;
+  }
+};
 //歌单跳转
 const goSongSheet = (val: number, id: number, name: string) => {
-    // 设置背景索引
-    index_background.value = val
-    // 设置歌曲表id
-    userSongSheetId.value = id
-    // 设置歌曲表名
-    userSongSheetName.value = name
-    // 跳转到用户歌曲表页面
-    router.push("/home/userSongSheet")
-}
+  // 设置背景索引
+  index_background.value = val;
+  // 设置歌曲表id
+  userSongSheetId.value = id;
+  // 设置歌曲表名
+  userSongSheetName.value = name;
+  // 跳转到用户歌曲表页面
+  router.push("/home/userSongSheet");
+};
 // 用于判断是否需要登录
 function determineWhetherToLogIn() {
-    if (!getUser()) {
-        // 弹出提示框，提示用户去登录
-        ElMessage({
-            message: '请去登录，',
-        })
-        return
-    }
-    // 将isSongSheet的值设置为true
-    isSongSheet.value = true
+  if (!getUser()) {
+    // 弹出提示框，提示用户去登录
+    ElMessage({
+      message: "请去登录，",
+    });
+    return;
+  }
+  // 将isSongSheet的值设置为true
+  isSongSheet.value = true;
 }
 //获取歌曲总时长
 const handleCanplay = (e: any) => {
-    totalDuration.value = e.target.duration;
-    inputRangeDom.value.max = e.target.duration;
-}
+  totalDuration.value = e.target.duration;
+  inputRangeDom.value.max = e.target.duration;
+};
 //手动修改进度条
 const handleChangeRangeInput = (value: number) => {
-    // 设置当前时间
-    currentTime.value = value;
-    // 设置urlAudeo的当前时间
-    urlAudeo.value.currentTime = value;
+  currentTime.value = value;
+  urlAudeo.value.currentTime = value;
 }
 //修改歌曲当前的播放时间和进度条
-// <!--language: JavaScript-->
 const handleTimeupdate = (event: any) => {
-    // 更新当前时间
-    currentTime.value = event.target.currentTime;
+  currentTime.value = event.target.currentTime;
 }
 //歌曲结束后触发换歌操作
 const handleEnded = () => {
-    //当前播放的下标
-    if (isSingleLoop.value) return
-    if (playList.value.length === (playIndex.value + 1)) {
-        playIndex.value = 0
-        songInfo.value = playList.value[0]
-        return
-    }
-    songInfo.value = playList.value[playIndex.value + 1]
-    currentTime.value = 0
-}
+  //当前播放的下标
+  if (isSingleLoop.value) return;
+  if (playList.value.length === playIndex.value + 1) {
+    playIndex.value = 0;
+    songInfo.value = playList.value[0];
+    return;
+  }
+  songInfo.value = playList.value[playIndex.value + 1];
+  currentTime.value = 0;
+};
 //切换上一首歌
 const handlePreviousSong = () => {
-    // 如果playIndex大于等于0，则执行以下操作
-    if (playIndex.value >= 0) {
-        // 将songInfo的值设置为playList中playIndex-1的值
-        songInfo.value = playList.value[playIndex.value - 1]
-    }
-    // 将currentTime的值设置为0
-    currentTime.value = 0
-}
+  // 如果playIndex大于等于0，则执行以下操作
+  if (playIndex.value >= 0) {
+    // 将songInfo的值设置为playList中playIndex-1的值
+    songInfo.value = playList.value[playIndex.value - 1];
+  }
+  // 将currentTime的值设置为0
+  currentTime.value = 0;
+};
 //获取歌曲的url地址
 const getUrl = async () => {
-    // 通过id获取音乐信息
-    const musicRespone = await getMusicURLByIds({ id: Number(songInfo.value?.id), level: "lossless" })
-    // 判断是否获取到音乐信息
-    if (musicRespone.code === "error") {
-        console.log(musicRespone.error.message);
-    } else {
-        // 判断是否获取到音乐地址
-        if (musicRespone.data.code === 200) {
-            // 获取音乐地址
-            urlAudeo.value.src = musicRespone.data?.data[0]?.url
-            // 设置播放状态
-            isPlay.value = true
-        }
+  // 通过id获取音乐信息
+  const musicRespone = await getMusicURLByIds({
+    id: Number(songInfo.value?.id),
+    level: "lossless",
+  });
+  // 判断是否获取到音乐信息
+  if (musicRespone.code === "error") {
+    console.log(musicRespone.error.message);
+  } else {
+    // 判断是否获取到音乐地址
+    if (musicRespone.data.code === 200) {
+      // 获取音乐地址
+      urlAudeo.value.src = musicRespone.data?.data[0]?.url;
+      // 设置播放状态
+      isPlay.value = true;
     }
-}
+  }
+};
 
 //监听songId的变化，songId表示歌曲的Id
-watch(() => songInfo.value?.id, () => {
+watch(
+  () => songInfo.value?.id,
+  () => {
     // 当歌曲id发生变化时，调用getUrl函数
-    getUrl()
+    getUrl();
     // 将inputRangeDom的value值设置为0
-    inputRangeDom.value.value = 0
-})
+    inputRangeDom.value.value = 0;
+  }
+);
 //监听当前播放时间的变化，currentTime表示当前播放的时间
 watch(playSchedule, (newVal) => {
-    urlAudeo.value.currentTime = newVal
-})
+  urlAudeo.value.currentTime = newVal;
+});
 //监听路由变化切换背景色
 watch(route, () => {
-    // 当路由发生变化时，执行以下操作
-    if (route.path !== '/home/recommend') {
-        // 获取侧边栏元素
-        const aside: any = document.querySelector('aside')
-        // 设置侧边栏的背景色
-        aside.style.setProperty('--color-1', '38,38,38')
-        // 设置按钮图片为true
-        isButImg.value = true
-        // 设置过渡动画为空
-        transitionName.value = ''
-    } else {
-        // 设置按钮图片为false
-        isButImg.value = false
-        // 设置过渡动画为fadeTransform
-        transitionName.value = 'fadeTransform'
-    }
-})
-
+  // 当路由发生变化时，执行以下操作
+  if (route.path !== "/home/recommend") {
+    // 获取侧边栏元素
+    const aside: any = document.querySelector("aside");
+    // 设置侧边栏的背景色
+    aside.style.setProperty("--color-1", "38,38,38");
+    // 设置按钮图片为true
+    isButImg.value = true;
+    // 设置过渡动画为空
+    transitionName.value = "";
+  } else {
+    // 设置按钮图片为false
+    isButImg.value = false;
+    // 设置过渡动画为fadeTransform
+    transitionName.value = "fadeTransform";
+  }
+});
 
 //发送验证码事件
 const getCode = () => {
-    loginAPI.LoginCode({ phone: Number(phone.value) })
-}
+  loginAPI.LoginCode({ phone: Number(phone.value) });
+};
+
 //登录
 const getLogin = () => {
-    loginAPI.login({ phone: String(phone.value), password: String(password.value) }).then(({ data }) => {
-        if (data.code === 200) {
-            setToken(data.token)
-            setUser({
-                userId: data.account.id,
-                userName: data.profile.nickname,
-                avatarImgIdStr: data.profile.avatarUrl
-            })
-            dialogVisible.value = false
-            // 刷新页面
-            window.location.reload()
-        } else if (data.code === 502) {
-            ElMessage.error(data.message)
-        }
-    })
+  // 调用登录接口
+  loginAPI
+    .login({ phone: String(phone.value), password: String(password.value) })
+    .then(({ data }) => {
+      // 判断返回状态码
+      if (data.code === 200) {
+        // 设置token
+        setToken(data.token);
+        // 设置用户信息
+        setUser({
+          userId: data.account.id,
+          userName: data.profile.nickname,
+          avatarImgIdStr: data.profile.avatarUrl,
+        });
+        // 关闭弹窗
+        dialogVisible.value = false;
+        // 刷新页面
+        window.location.reload();
+      } else if (data.code === 502) {
+        // 弹出错误信息
+        ElMessage.error(data.message);
+      }
+    });
+};
+//退出登录
+function signOut() {
+  // 移除用户
+  removeUser();
+  // 移除token
+  removeToken();
+  // 刷新页面
+  window.location.reload();
 }
+//我的
+const goMy = () => {
+  // 设置我的音乐按钮为false
+  my_music.value = false
+  // 跳转到我的页面
+  router.push("/home/my");
+};
 </script>
 
 <style lang="scss" scoped>
 .fadeTransform-enter-active {
-    animation: enter 1s;
+  animation: enter 1s;
 }
 
 @keyframes enter {
-    0% {
-        transform: translateY(100%);
-        opacity: 0;
-    }
-
-    100% {
-        transform: translateY(0);
-        opacity: 1;
-    }
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 .home {
-    width: 100vw;
-    height: 100vh;
-    position: relative;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+
+  header {
+    width: 80vw;
+    height: 8vh;
+    position: absolute;
+    left: 20vw;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .login {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 7vw;
+      padding: 5px 0;
+      border-radius: 50px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 700;
+      background: rgba(255, 254, 254, 0.2);
+      cursor: pointer;
+
+      div {
+        margin-right: 4px;
+      }
+    }
 
-    header {
-        width: 80vw;
-        height: 8vh;
-        position: absolute;
-        left: 20vw;
-        top: 0;
+    .header_left {
+      width: 50%;
+    }
+
+    .header_right {
+      width: 40%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .search {
+        width: 25vw;
+        height: 5vh;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.2);
         display: flex;
         align-items: center;
-        justify-content: space-between;
-
-        .login {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 7vw;
-            padding: 5px 0;
-            border-radius: 50px;
-            color: #fff;
-            font-size: 14px;
-            font-weight: 700;
-            background: rgba(255, 254, 254, 0.2);
-            cursor: pointer;
-
-            div {
-                margin-right: 4px;
-            }
-        }
 
-        .header_left {
-            width: 50%;
+        input {
+          width: 20vw;
+          background: rgba(0, 0, 0, 0);
+          border: 0;
+          font-size: 10px;
         }
+      }
+
+      .search_border {
+        border: 1px solid #fff;
+      }
+
+      span {
+        color: #fff;
+        margin: 0 1.2vw;
+      }
+
+      .avatar {
+        width: 2.6vw;
+        height: 2.6vw;
+        cursor: pointer;
+
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50px;
+        }
+      }
 
-        .header_right {
-            width: 40%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            position: relative;
-
-            .search {
-                width: 25vw;
-                height: 5vh;
-                border-radius: 4px;
-                background: rgba(255, 255, 255, 0.2);
-                display: flex;
-                align-items: center;
-
-                input {
-                    width: 20vw;
-                    background: rgba(0, 0, 0, 0);
-                    border: 0;
-                    font-size: 10px;
-                }
-            }
-
-            .search_border {
-                border: 1px solid #fff;
-            }
-
-            span {
-                color: #fff;
-                margin: 0 1.2vw;
-            }
-
-            .avatar {
-                width: 2.6vw;
-                height: 2.6vw;
-                cursor: pointer;
-
-                img {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 50px;
-                }
-
-
-            }
-
-            .avatar_box {
-                position: absolute;
-                top: 8vh;
-                right: 2.5vw;
-                width: 18vw;
-                height: 28vh;
-                border-radius: 4px;
-                background: #292929;
-
-                div {
-                    display: flex;
-                    color: #fff;
-                    font-size: 12px;
-                    display: flex;
-                    align-items: center;
-                    margin: 6px;
-                    cursor: pointer;
-                }
-
-                div:hover {
-                    background: rgba(0, 0, 0, 0.5);
-                }
-            }
+      .avatar_box {
+        position: absolute;
+        top: 8vh;
+        right: 2.5vw;
+        width: 18vw;
+        height: 28vh;
+        border-radius: 4px;
+        background: #292929;
+
+        div {
+          display: flex;
+          color: #fff;
+          font-size: 12px;
+          display: flex;
+          align-items: center;
+          margin: 6px;
+          cursor: pointer;
         }
 
+        div:hover {
+          background: rgba(0, 0, 0, 0.5);
+        }
+      }
     }
+  }
 
-    main {
-        width: 100vw;
-        height: 88vh;
+  main {
+    width: 100vw;
+    height: 88vh;
+    display: flex;
+
+    aside {
+      width: 20vw;
+      height: 100%;
+      background: rgba(var(--color-1));
+      font-size: 12px;
+      color: #e8e6e3;
+      /* overflow: auto; */
+      padding-bottom: 2vh;
+
+      .tool {
         display: flex;
+        align-items: center;
+        width: 80%;
+        margin: 2px auto;
+        box-sizing: border-box;
+        padding: 0 6px;
+        cursor: pointer;
+      }
+
+      .My {
+        /* border: 1px solid red; */
+        height: 52vh;
+        overflow: auto;
+        width: 80%;
+        margin: 0 auto;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        >div {
+          display: flex;
+          align-items: center;
+          padding: 0 6px;
+        }
+      }
+
+      .My::-webkit-scrollbar {
+        display: none;
+      }
+
+      .selected {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 4px;
+      }
+
+      .aside_background_hover:hover {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+      }
+
+      .aside_item {
+        width: 100px;
+        margin: 10px;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 8vh;
+        margin-bottom: 6vh;
 
-        aside {
-            width: 20vw;
-            height: 100%;
-            background: rgba(var(--color-1));
-            font-size: 12px;
-            color: #E8E6E3;
-            /* overflow: auto; */
-            padding-bottom: 2vh;
-
-            .tool {
-                display: flex;
-                align-items: center;
-                width: 80%;
-                margin: 2px auto;
-                box-sizing: border-box;
-                padding: 0 6px;
-                cursor: pointer;
-            }
-
-            .My {
-                /* border: 1px solid red; */
-                height: 52vh;
-                overflow: auto;
-                width: 80%;
-                margin: 0 auto;
-                box-sizing: border-box;
-                cursor: pointer;
+        svg {
+          margin-right: 5px;
+        }
+      }
+
+      h2 {
+        font-size: 18px;
+        color: #e8e6e3;
+      }
+
+      p {
+        margin-top: 3vh;
+        margin-bottom: 2vh;
+        color: var(--color-1);
+      }
+    }
 
-                >div {
-                    display: flex;
-                    align-items: center;
-                    padding: 0 6px;
-                }
-            }
+    aside::-webkit-scrollbar {
+      display: none;
+    }
 
-            .My::-webkit-scrollbar {
-                display: none;
-            }
+    article {
+      width: 80vw;
+      height: 100%;
+      background: #121212;
+    }
+  }
 
-            .selected {
-                background: rgba(255, 255, 255, 0.2);
-                border-radius: 4px;
-            }
+  footer {
+    width: 100vw;
+    height: 12vh;
+    background: rgba(var(--color-1));
+    box-shadow: inset;
+    position: relative;
 
-            .aside_background_hover:hover {
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 4px;
-            }
+    .footerA {
+      position: absolute;
+      top: -0.5vh;
+      width: 100vw;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #b1aba2;
+
+      .time {
+        width: 120px;
+        position: absolute;
+        top: -4vh;
+        font-size: 18px;
+        color: #f3f3f3;
+      }
 
-            .aside_item {
-                width: 100px;
-                margin: 10px;
-                font-weight: 500;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
+      div {
+        width: 5vw;
+        text-align: center;
+      }
+    }
 
+    .footerB {
+      display: flex;
+      width: 100vw;
+      height: 12vh;
+      align-items: center;
+      justify-content: end;
+      padding-top: 1.5vh;
+      padding-right: 1vw;
+
+      >div {
+        width: 33vw;
+        height: 100%;
+      }
+
+      .footerB_too2 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .footerB_too2 svg {
+        border-radius: 20px;
+        padding: 2px 10px;
+        box-sizing: content-box;
+        cursor: pointer;
+      }
+
+      .footerB_too2 svg:nth-child(1):hover {
+        background: rgba(255, 254, 254, 0.2);
+      }
+
+      .footerB_too2 svg:nth-child(2) {
+        margin: 0 10px;
+        background: rgba(255, 254, 254, 0.2);
+        padding: 2px 15px;
+      }
+
+      .footerB_too2 svg:nth-child(2):hover {
+        margin: 0 10px;
+        background: rgba(255, 254, 254, 0.3);
+        padding: 2px 15px;
+      }
+
+      .footerB_too2 svg:nth-child(3):hover {
+        background: rgba(255, 254, 254, 0.2);
+      }
+
+      .footerB_tool {
+        /* height: 4vh; */
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        position: relative;
 
-            .logo {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: 8vh;
-                margin-bottom: 6vh;
+        .slider-demo-block {
+          height: 130px;
+          position: absolute;
+          bottom: 10vh;
+          right: 3.4vw;
+          background: #ccc;
+          border-radius: 10px;
+        }
 
-                svg {
-                    margin-right: 5px;
-                }
-            }
+        svg:hover {
+          cursor: pointer;
+          background: rgba(255, 254, 254, 0.2);
+          border-radius: 4px;
+        }
+      }
 
-            h2 {
-                font-size: 18px;
-                color: #E8E6E3;
-            }
+      .footerB_tool3 {
+        display: flex;
+        align-items: center;
+        padding-left: 1vw;
+        animation: Opacity 1s;
 
-            p {
-                margin-top: 3vh;
-                margin-bottom: 2vh;
-                color: var(--color-1);
-            }
+        img {
+          width: 8vh;
+          border-radius: 10px;
         }
 
-        aside::-webkit-scrollbar {
-            display: none;
+        span:hover {
+          cursor: pointer;
+          border-bottom: 1px solid #fff;
         }
+      }
 
-        article {
-            width: 80vw;
-            height: 100%;
-            background: #121212;
+      /* 动画 */
+      @keyframes Opacity {
+        0% {
+          opacity: 0;
         }
-    }
 
-    footer {
-        width: 100vw;
-        height: 12vh;
-        background: rgba(var(--color-1));
-        box-shadow: inset;
-        position: relative;
-
-        .footerA {
-            position: absolute;
-            top: -0.5vh;
-            width: 100vw;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #B1ABA2;
-
-            .time {
-                width: 120px;
-                position: absolute;
-                top: -4vh;
-                font-size: 18px;
-                color: #F3F3F3;
-            }
-
-            div {
-                width: 5vw;
-                text-align: center;
-            }
+        100% {
+          opacity: 1;
         }
+      }
+    }
+  }
 
-        .footerB {
-            display: flex;
-            width: 100vw;
-            height: 12vh;
-            align-items: center;
-            justify-content: end;
-            padding-top: 1.5vh;
-            padding-right: 1vw;
-
-            >div {
-                width: 33vw;
-                height: 100%;
-            }
-
-            .footerB_too2 {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-            }
-
-            .footerB_too2 svg {
-                border-radius: 20px;
-                padding: 2px 10px;
-                box-sizing: content-box;
-                cursor: pointer;
-            }
-
-            .footerB_too2 svg:nth-child(1):hover {
-                background: rgba(255, 254, 254, 0.2);
-            }
-
-            .footerB_too2 svg:nth-child(2) {
-                margin: 0 10px;
-                background: rgba(255, 254, 254, 0.2);
-                padding: 2px 15px;
-            }
-
-            .footerB_too2 svg:nth-child(2):hover {
-                margin: 0 10px;
-                background: rgba(255, 254, 254, 0.3);
-                padding: 2px 15px;
-            }
-
-            .footerB_too2 svg:nth-child(3):hover {
-                background: rgba(255, 254, 254, 0.2);
-            }
+  .dialog {
+    height: 35vh;
+    text-align: center;
+    padding-top: 3vh;
 
-            .footerB_tool {
-                /* height: 4vh; */
-                display: flex;
-                align-items: center;
-                justify-content: end;
-                position: relative;
-
-                .slider-demo-block {
-                    height: 130px;
-                    position: absolute;
-                    bottom: 10vh;
-                    right: 3.4vw;
-                    background: #ccc;
-                    border-radius: 10px;
-                }
-
-                svg:hover {
-                    cursor: pointer;
-                    background: rgba(255, 254, 254, 0.2);
-                    border-radius: 4px;
-                }
-            }
-
-            .footerB_tool3 {
-                display: flex;
-                align-items: center;
-                padding-left: 1vw;
-                animation: Opacity 1s;
-
-                img {
-                    width: 8vh;
-                    border-radius: 10px;
-                }
-
-                span:hover {
-                    cursor: pointer;
-                    border-bottom: 1px solid #fff;
-                }
-            }
+    .phone {
+      width: 100%;
+      text-align: center;
 
-            /* 动画 */
-            @keyframes Opacity {
-                0% {
-                    opacity: 0;
-                }
-
-                100% {
-                    opacity: 1;
-                }
-            }
-        }
+      input {
+        width: 50%;
+        height: 4vw;
+        border: 0;
+        border-radius: 6px;
+        padding: 10px;
+        margin: 10px;
+        background: #f3f3f3;
+      }
     }
 
-    .dialog {
-        height: 35vh;
-        text-align: center;
-        padding-top: 3vh;
-
-        .phone {
-            width: 100%;
-            text-align: center;
-
-            input {
-                width: 50%;
-                height: 4vw;
-                border: 0;
-                border-radius: 6px;
-                padding: 10px;
-                margin: 10px;
-                background: #F3F3F3;
-            }
-        }
-
-        .code {
-            width: 100%;
-            text-align: center;
-
-            input {
-                width: 33%;
-                height: 4vw;
-                border: 0;
-                border-top-left-radius: 6px;
-                border-bottom-left-radius: 6px;
-                padding: 10px;
-                background: #F3F3F3;
-            }
+    .code {
+      width: 100%;
+      text-align: center;
 
-            button {
-                width: 17%;
-                height: 4vw;
-                border: 0;
-                border-top-right-radius: 6px;
-                border-bottom-right-radius: 6px;
-                background: #F3F3F3;
-                cursor: pointer;
-                font-size: 12px;
-            }
-        }
+      input {
+        width: 33%;
+        height: 4vw;
+        border: 0;
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+        padding: 10px;
+        background: #f3f3f3;
+      }
+
+      button {
+        width: 17%;
+        height: 4vw;
+        border: 0;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+        background: #f3f3f3;
+        cursor: pointer;
+        font-size: 12px;
+      }
+    }
 
-        >button {
-            width: 50%;
-            height: 4vw;
-            background: #353535;
-            font-weight: 700;
-            color: #fff;
-            margin-top: 20px;
-            border-radius: 6px;
-            cursor: pointer;
-        }
+    >button {
+      width: 50%;
+      height: 4vw;
+      background: #353535;
+      font-weight: 700;
+      color: #fff;
+      margin-top: 20px;
+      border-radius: 6px;
+      cursor: pointer;
     }
+  }
 }
 
 .slider {
-    width: 100vw !important;
+  width: 100vw !important;
 }
 
 .el-slider__marks-text::after {
-    color: red;
+  color: red;
 }
 
 :deep(.slider-demo-block) {
-    .el-slider__bar {
-        background: #fff;
-    }
-
-    .el-slider__button {
-        width: 10px !important;
-        height: 10px !important;
-        background-color: #fff;
-        border: 0;
-    }
+  .el-slider__bar {
+    background: #fff;
+  }
+
+  .el-slider__button {
+    width: 10px !important;
+    height: 10px !important;
+    background-color: #fff;
+    border: 0;
+  }
 }
 
 // 滑块进度条穿透样式
 :deep(.slider) {
-    $sliderH: var(--sliderH);
-
-    .el-slider__bar {
-        height: $sliderH;
-        background: rgba(var(--color-2));
-    }
-
-    .el-slider__runway {
-        height: $sliderH;
-    }
-
-    .el-slider__button {
-        width: 8px !important;
-        height: 8px !important;
-        background-color: rgba(var(--color-2));
-        border: 0;
-    }
-
-    .el-slider__button-wrapper {
-        top: -16.2px;
-        opacity: 0;
-    }
-
-    .el-slider__runway {
-        &:hover .el-slider__button-wrapper {
-            /* top: -18px; */
-            opacity: 1;
-        }
+  $sliderH: var(--sliderH);
+
+  .el-slider__bar {
+    height: $sliderH;
+    background: rgba(var(--color-2));
+  }
+
+  .el-slider__runway {
+    height: $sliderH;
+  }
+
+  .el-slider__button {
+    width: 8px !important;
+    height: 8px !important;
+    background-color: rgba(var(--color-2));
+    border: 0;
+  }
+
+  .el-slider__button-wrapper {
+    top: -16.2px;
+    opacity: 0;
+  }
+
+  .el-slider__runway {
+    &:hover .el-slider__button-wrapper {
+      /* top: -18px; */
+      opacity: 1;
     }
+  }
 }
 
 // 进度条样式穿透，hover移入进度条变粗
@@ -1096,4 +1141,3 @@ const getLogin = () => {
     }
 } */
 </style>
-@/api/userVip
diff --git a/src/views/home/My/my.vue b/src/views/home/My/my.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bed9da203d4ade7833791841aac99c8097730bed
--- /dev/null
+++ b/src/views/home/My/my.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="MyBox">
+    <div class="head">
+      <img :src="getUser().avatarImgIdStr" alt="" />
+      <div class="headbox1">
+        <h2>{{ getUser()?.userName }}</h2>
+        <div class="headbox2">
+          {{ userDital.follows }}<span>关注</span> {{ userDital.followeds
+          }}<span>粉丝</span> {{ userDital.authority }}<span>获赞</span>
+        </div>
+        <div class="headbox3">{{ getAge(userDital.birthday) }}岁</div>
+      </div>
+    </div>
+    <div class="contenyBox">
+      <div class="header">创建的歌单</div>
+      <div class="box">
+        <div
+          class="item"
+          v-for="(item, index) in userSongSheetList"
+          :key="index"
+          @click="
+            goToPages('/home/userSongSheet', { id: item.id, name: item.name })
+          "
+        >
+          <div class="lbox">
+            <img :src="item.coverImgUrl" alt="" />
+          </div>
+          <div class="lfont">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, toRefs, ref } from "vue";
+import { getUser } from "@/utils/auth";
+import useCounterStore from "@/stores/counter";
+import { getUserList } from "@/api/user";
+import { useRouter } from "vue-router";
+const { userSongSheetList, userSongSheetId, userSongSheetName } = toRefs(
+  useCounterStore()
+);
+
+const userDital = ref();
+onMounted(async () => {
+  const { data } = await getUserList({ uid: getUser().userId });
+  userDital.value = data.profile;
+});
+
+const router = useRouter();
+console.log(userSongSheetList.value, 11111);
+function goToPages(url: string, obj = {} as { id: number; name: string }) {
+  if (obj.id) {
+    // 设置歌曲表id
+    userSongSheetId.value = obj.id;
+    // 设置歌曲表名
+    userSongSheetName.value = obj.name;
+  }
+  router.push(url);
+}
+function getAge(birthday) {
+  //出生时间 毫秒
+  var birthDayTime = new Date(birthday).getTime();
+  //当前时间 毫秒
+  var nowTime = new Date().getTime();
+  //一年毫秒数(365 * 86400000 = 31536000000)
+  return Math.ceil((nowTime - birthDayTime) / 31536000000);
+}
+</script>
+
+<style lang="scss" scoped>
+.MyBox::-webkit-scrollbar {
+  display: none;
+}
+.MyBox {
+  color: white;
+  padding: 1vw 2vw;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  max-height: 85vh;
+  .head {
+    width: 100%;
+    margin-top: 6vw;
+    display: flex;
+
+    img {
+      width: 8vw;
+      height: 8vw;
+      border-radius: 50%;
+      margin: 1vw;
+    }
+
+    .headbox1 {
+      margin-left: 1vw;
+      font-size: 1.2vw;
+
+      h2 {
+        font-weight: normal;
+        padding: 0.5vw 0;
+      }
+
+      .headbox2 {
+        color: #d7d7d7;
+        margin-bottom: 1vw;
+
+        span {
+          color: #c4c4c4;
+          margin: 0 0.5vw;
+        }
+      }
+
+      .headbox3 {
+        background: #2a2a2a;
+        color: #bbbbbb;
+        width: 4vw;
+        height: 2vw;
+        text-align: center;
+        line-height: 2vw;
+        font-size: 1.2vw;
+      }
+    }
+  }
+
+  .contenyBox {
+    width: 70vw;
+    margin-top: 1vw;
+    .header {
+      color: #808080;
+      padding: 1vw 0;
+    }
+
+    .box {
+      width: 100%;
+      .like,
+      .item {
+        display: inline-block;
+        width: 15vw;
+        height: 18vw;
+        margin-right: 2vw;
+
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 0.5vw;
+        }
+
+        .lbox {
+          width: 15vw;
+          height: 15vw;
+          background: paleturquoise;
+          border-radius: 0.5vw;
+        }
+
+        .lfont {
+          width: 15vw;
+          height: 3vw;
+          line-height: 3vw;
+          color: #d1d1d1;
+          font-size: 1.2vw;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/myLike/index.vue b/src/views/home/myLike/index.vue
index d32c0336341bd30856e52e6f7bd9f6be748a9c58..5ca0732af6a552730becfcf6568a7142208b0158 100644
--- a/src/views/home/myLike/index.vue
+++ b/src/views/home/myLike/index.vue
@@ -36,16 +36,18 @@ const loading = ref<boolean>(true)
 
 onMounted(async () => {
     // 获取音乐详情
+    console.log(musicLikeListId.value)
     const data = await getMusicDetail({ ids: musicLikeListId.value.join(",") })
+    console.log(data)
     // 判断返回状态
     if (data.code === "success") {
         // 判断返回状态码
         if (data.data.code === 200) {
             // 将返回的数据赋值给likeList
             likeList.value = data.data.songs ? data.data.songs : []
-            // 将loading设置为false
-            loading.value = false
         }
+        // 将loading设置为false
+        loading.value = false
     }
 })
 //播放当前全部历史歌曲