diff --git a/src/components/PlayListDetail.vue b/src/components/PlayListDetail.vue
index 28043b4000f5c72736acf3473860e3e7b9acf8fa..0e99cab2a27e8990bffbef17d66cb2220df365fb 100644
--- a/src/components/PlayListDetail.vue
+++ b/src/components/PlayListDetail.vue
@@ -42,7 +42,13 @@ export default {
     emitter.on("sendId", async (id) => {
       let res = await GetArtistDesc("artist/desc", id);
       songerDec.value = res.data.briefDesc;
-      coverPic.value = res.data.topicData[0].coverUrl;
+      if (res.data.topicData) {
+        //当图片数据存在时
+        coverPic.value = res.data.topicData[0].coverUrl;
+      } else {
+        //当图片数据不存在时
+        coverPic.value = "";
+      }
     });
     return {
       songerDec,
@@ -66,6 +72,8 @@ export default {
   height: 200px;
   width: 200px;
   border-radius: 20px;
+  overflow: hidden; /** 弹性子元素的overflow失效问题 */
+  flex: 0 0 auto; /** 给弹性子元素加上 flex:0 0 auto; */
 }
 .detail-img .img {
   height: 200px;
diff --git a/src/components/PlayLists.vue b/src/components/PlayLists.vue
index 3333c43c28418891f6ddb4173036705ab083800e..2336ba1526923a059d7482dc7ec7267f67bac0bd 100644
--- a/src/components/PlayLists.vue
+++ b/src/components/PlayLists.vue
@@ -99,7 +99,7 @@ export default {
       getTopSongs("artist/top/song", id).then((res) => {
         playlists.length = 0; // 清空数组
         playlists.push(res.data.songs);
-        // console.log(playlists);
+        // console.log(playlists[0][0]);
         // 存储所有歌曲的 id
         playlists[0].forEach((item) => {
           ids.push(item.id);
diff --git a/src/components/Player.vue b/src/components/Player.vue
index b0dde80d189fcb2878a6c6ffbddc8f50d33c4ffa..24a1e91e79594844bf40dd2d83ca61190e6490ae 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,38 +1,146 @@
 <template>
   <div class="palyer">
-    <audio controls>
-      <source src="巫启贤.mp3" type="audio/mpeg" />
+    <audio controls ref="audio" @timeupdate="update" @ended="playerEnded">
+      <source src="./巫启贤.mp3" type="audio/mpeg" />
       您的浏览器不支持 audio 元素。
     </audio>
     <div class="audio">
       <section class="progress">
-        <progress value="23" max="100" min="0" style="height: 7px"></progress>
+        <progress
+          value="0"
+          max="322"
+          min="0"
+          style="height: 7px; width: 78vw"
+          ref="progress"
+          @mousedown="changeProgress"
+          @mouseup="stopChangeProgress"
+        ></progress>
       </section>
       <section class="components">
         <div class="pic">
           <img src="../assets/imgs/logo.jpg" alt="" />
         </div>
         <div class="name">
-          <span class="song">新地球</span> -
-          <span class="singer">林俊杰</span>
+          <span class="song">太傻</span> -
+          <span class="singer">巫启贤</span>
         </div>
         <div class="controller">
           <i class="iconfont icon-shangyishou"></i>
-          <i class="iconfont icon-zanting_o"></i>
+          <i
+            class="iconfont icon-zanting_o"
+            :class="isPlayed ? 'icon-zanting_o' : 'icon-bofangqi-bofangshu'"
+            @click="changeState"
+          ></i>
           <i class="iconfont icon-xiayishou"></i>
         </div>
-        <div class="info">02:03 / 5:00</div>
+        <div class="info">{{ nowTime }} / {{ durationTime }}</div>
       </section>
     </div>
   </div>
 </template>
 
 <script>
-import { GetMusic } from "@/api/request";
+import { computed, ref } from "vue";
+// import { Emitter } from "mitt"; // 全局事件总线
 export default {
   name: "MyPlayer",
   setup() {
-    GetMusic();
+    //获取音频标签
+    let audio = ref(null);
+    //获取进度条标签
+    let progress = ref(null);
+    // 歌曲是否播放
+    let isPlayed = ref(false);
+    // 音频的总时长
+    let duration = ref(322); // 假设是接口中的数据
+    // 音频当前播放的时间
+    let curTime = ref(0);
+
+    // 定位到任意位置
+    function moveAnyWhere(e) {
+      // console.log(e);
+      progress.value.value = parseInt(
+        (e.offsetX / document.documentElement.clientWidth) *
+          (100 / 78) *
+          progress.value.max
+      );
+      // console.log(progress.value.value);
+      audio.value.currentTime = parseInt(
+        (e.offsetX / document.documentElement.clientWidth) * (100 / 78) * 322
+      );
+    }
+    const changeProgress = (e) => {
+      moveAnyWhere(e);
+      // 鼠标点击之后不松开，进行滑动修改进度条
+      progress.value.addEventListener("mousemove", movIng);
+    };
+    // 鼠标滑动时，进度条改变的回调
+    function movIng(e) {
+      moveAnyWhere(e);
+    }
+    // 鼠标松开之后清楚鼠标移动事件的监听
+    function stopChangeProgress() {
+      progress.value.removeEventListener("mousemove", movIng);
+    }
+
+    //#region
+    // 音频播放时的回调
+    const update = () => {
+      progress.value.max = audio.value.duration;
+      progress.value.value = audio.value.currentTime;
+      curTime.value = audio.value.currentTime;
+      // console.log(progress.value.value);
+    };
+    // 音频结束时的回调，切换播放/暂停状态
+    const playerEnded = () => {
+      isPlayed.value = !isPlayed.value;
+    };
+    //切换歌曲状态 播放/暂停
+    function changeState() {
+      isPlayed.value = !isPlayed.value;
+      if (isPlayed.value) {
+        audio.value.play();
+      } else {
+        audio.value.pause();
+      }
+    }
+    //获取格式化的音频当前播放的时间
+    let nowTime = computed(() => {
+      let time = parseInt(curTime.value);
+      let sec = time % 60 > 9 ? `${time % 60}` : `0${time % 60}`;
+      let min =
+        time / 60 > 9 ? `${parseInt(time / 60)}` : `0${parseInt(time / 60)}`;
+      return min + ":" + sec;
+    });
+    // 获取歌曲格式化的总时间
+    let durationTime = computed(() => {
+      let min =
+        duration.value / 60 > 9
+          ? `${parseInt(duration.value / 60)}`
+          : `0${parseInt(duration.value / 60)}`;
+      let sec =
+        duration.value % 60 > 9
+          ? `${duration.value % 60}`
+          : `0${duration.value % 60}`;
+      return min + ":" + sec;
+    });
+    //#endregion
+    return {
+      audio,
+      progress,
+      moveAnyWhere,
+      changeProgress,
+      stopChangeProgress,
+      movIng,
+      duration,
+      curTime,
+      isPlayed,
+      durationTime,
+      nowTime,
+      changeState,
+      playerEnded,
+      update,
+    };
   },
 };
 </script>
@@ -40,8 +148,7 @@ export default {
 <style scoped>
 audio {
   position: absolute;
-  bottom: 100px;
-  width: 78vw;
+  z-index: -100;
 }
 .audio {
   position: fixed;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index cb79adc6abaa46fae240b3349cb9d84927fa65a8..73b15bf5628741a1ed19496a0ac5563f966dcf51 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -7,7 +7,10 @@
           alt="Workflow"
         />
       </div>
-      <span>Hello,{{ nickname }}</span>
+      <span>Hello,{{ nickname }}</span
+      ><br />
+      <span class="outlogin" @click="outLogin">退出登录</span>
+      <br />
     </div>
     <div class="list">
       <nav class="userlist">
@@ -30,6 +33,7 @@
               v-for="(item, index) in artists"
               :key="index"
               @click="transmitId(item)"
+              :class="item.id == idOfSinger ? 'active' : ''"
             >
               <img
                 style="height: 40px; width: 40px"
@@ -37,8 +41,7 @@
                 alt=""
               />
               <div class="playlistinfo">
-                <span>歌手：{{ item.name }}</span>
-                <!-- <span>歌曲数量:{{}}首</span> -->
+                <span>{{ item.name }}</span>
               </div>
             </div>
           </div>
@@ -52,29 +55,44 @@ import { getSongerList } from "../api/request.js";
 import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
 import emitter from "../bus/index";
-
+import { useRouter } from "vue-router";
 export default {
   name: "MySideBar",
   setup() {
+    // 定义路由器对象
+    const router = useRouter();
     let nickname = ref("uuid");
     let artists = ref([]);
+    //被选择的歌手的id
+    let idOfSinger = ref(0);
 
     //传递歌手Id
     const transmitId = (item) => {
       emitter.emit("sendId", item.id);
+      idOfSinger.value = item.id;
+    };
+
+    // 退出登录
+    const outLogin = () => {
+      localStorage.removeItem("token");
+      router.push("/login");
     };
 
     onMounted(() => {
       getSongerList("/artist/list").then((res) => {
         artists.value = res.data.artists;
+        idOfSinger.value = artists.value[0].id;
         //首次展示歌手
         emitter.emit("sendId", artists.value[0].id);
       });
     });
     return {
+      idOfSinger,
+      router,
       nickname,
       artists,
       transmitId,
+      outLogin,
       getSongerList,
     };
   },
@@ -92,9 +110,10 @@ export default {
   top: 0;
   background: #fff;
   font-size: 13px;
+  border-radius: 15px;
 }
 .userinfo {
-  height: 100px;
+  height: 120px;
   text-align: center;
 }
 .avatar img {
@@ -116,8 +135,11 @@ export default {
 .userplaylist span {
   padding: 0 5px;
 }
-a {
-  text-decoration: none;
+.outlogin {
+  cursor: pointer;
+}
+.outlogin:hover {
+  color: rgb(31, 210, 168);
 }
 .playlists {
   overflow-y: scroll;
@@ -129,8 +151,13 @@ a {
 }
 .playlistitems:hover {
   cursor: pointer;
-  background-color: rgba(214, 214, 214, 0.8);
-  color: rgb(255, 255, 255);
+  background-color: rgb(243, 243, 243);
+  color: rgb(31, 210, 168);
+}
+.active {
+  cursor: pointer;
+  background-color: rgb(243, 243, 243);
+  color: rgb(31, 210, 168);
 }
 .playlistitems img {
   height: 40px;
@@ -145,7 +172,7 @@ a {
 
 /* // 滚动条宽度 */
 div::-webkit-scrollbar {
-  width: 6px;
+  width: 3px;
 }
 /* // 滚动条轨道 */
 div::-webkit-scrollbar-track {
diff --git a/src/index.css b/src/index.css
index 7e1003b03a76da329fd5c73e4c5f2cd6e63098c4..bb61be12d8fb1c3b49863a456f7ef2a436e58f99 100644
--- a/src/index.css
+++ b/src/index.css
@@ -65,16 +65,16 @@
 
 ::-webkit-scrollbar {
     /* 对应纵向滚动条的宽度 */
-    width: 5px;
+    width: 3px;
     /* 对应横向滚动条的宽度 */
-    height: 5px;
+    height: 3px;
 }
 
 
 /* 滚动条上的滚动滑块 */
 
 ::-webkit-scrollbar-thumb {
-    background-color: rgba(45, 41, 41, 0.5);
+    background-color: rgba(45, 41, 41, 0.1);
     border-radius: 32px;
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index aeead613ec2f8daf859f9b6e18f12cc898a4cf89..851aefecada565e2b8e0c94ff8a7165e955efbdd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,4 +26,13 @@ const router = createRouter({
         }
     ]
 })
+router.beforeEach((to, from, next) => {
+    if (to.path == '/login' || localStorage.getItem('token')) {
+        next();
+    } else {
+        //清空本地存储，路由跳转到登录页面
+        localStorage.clear();
+        next('/login');
+    }
+});
 export default router
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 95aeb7336c6ead2ccae02ae63dc240a5bd657b5e..ca5c3e2f6a298b96f6389b2b9dab4a765d8bed97 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -63,7 +63,12 @@
                   密码
                 </label>
                 <div class="mt-1">
-                  <input type="password" v-model="password" class="input" />
+                  <input
+                    type="password"
+                    v-model="password"
+                    class="input"
+                    @keydown.enter="login"
+                  />
                 </div>
               </div>
 
@@ -81,16 +86,27 @@
 <script>
 import { defineComponent } from "@vue/runtime-core";
 import { ref } from "vue";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "MyLogin",
   setup() {
+    // 定义路由器对象
+    const router = useRouter();
     let password = ref("");
     let phone = ref("");
     const login = () => {
-      console.log("login");
+      localStorage.setItem(
+        "token",
+        JSON.stringify({
+          phone: phone.value,
+          password: password.value,
+        })
+      );
+      router.push("/home");
     };
     return {
+      router,
       password,
       phone,
       login,
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 74c8483a74fecfe66830ac3f4eb1f36d43ebe5bd..e5213ca0d38422177adc720666eb1e078bbfce19 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,18 +1,12 @@
 <template>
-  <div>
-    Player
-    <Player />
-  </div>
+  <div>Player</div>
 </template>
 
 <script>
-import Player from "../components/Player.vue";
 import { useRoute } from "vue-router";
 export default {
   name: "MyPlayer",
-  components: {
-    Player,
-  },
+  components: {},
   setup() {
     const route = useRoute();
     console.log(route.params);