不使用NScrollbar组件

src/App.vue

@@ -130,7 +130,7 @@ body {
 
   .lmt-width {
     margin: 0 auto;
-    padding: 8px 12px 8px 8px;
+    padding: 8px 6px 8px 8px;
     max-width: 800px;
   }
 }

src/assets/css/common.css

@@ -20,3 +20,31 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+::-webkit-scrollbar {
+  /* 滚动条整体部分 */
+  width: 8px;
+  height: 8px;
+  background-color: #F5F5F5;
+}
+::-webkit-scrollbar-button {
+  /* 滚动条两端的按钮 */
+}
+::-webkit-scrollbar-track {
+  /* 外层轨道 */
+  border-radius: 6px;
+  background-color: #F5F5F5;
+}
+::-webkit-scrollbar-track-piece {
+  /* 内层轨道，滚动条中间部分（除去） */
+}
+::-webkit-scrollbar-thumb {
+  /* 滚动条里面可以拖动的那个 */
+  border-radius: 6px;
+  background-color: #dfdfdf;
+}
+::-webkit-scrollbar-corner {
+  /* 边角 */
+}
+::-webkit-resizer {
+  /* 定义右下角拖动块的样式 */
+}

src/assets/css/common.less

@@ -1,4 +1,4 @@
-.text-el-line{
+.text-el-line {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -6,12 +6,43 @@
   -webkit-box-orient: vertical;
 }
 
-.text-el-line1{
+.text-el-line1 {
   .text-el-line();
   -webkit-line-clamp: 1;
 }
 
-.text-el-line2{
+.text-el-line2 {
   .text-el-line();
   -webkit-line-clamp: 2;
 }
+
+::-webkit-scrollbar {
+  /* 滚动条整体部分 */
+    width: 8px;
+    height: 8px;
+    background-color: #F5F5F5;
+}
+::-webkit-scrollbar-button {
+  /* 滚动条两端的按钮 */
+}
+::-webkit-scrollbar-track {
+  /* 外层轨道 */
+  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  border-radius: 6px;
+  background-color: #F5F5F5;
+}
+::-webkit-scrollbar-track-piece {
+  /* 内层轨道，滚动条中间部分（除去） */
+}
+::-webkit-scrollbar-thumb {
+  /* 滚动条里面可以拖动的那个 */
+  border-radius: 6px;
+  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+  background-color: #dfdfdf;
+}
+::-webkit-scrollbar-corner {
+  /* 边角 */
+}
+::-webkit-resizer {
+  /* 定义右下角拖动块的样式 */
+}

src/components/ArtistsSpan.vue

@@ -4,7 +4,7 @@
 <template>
   <template v-for="(ar, idx) of artists" key="idx">
     <span
-      @click="$router.push('/songer/' + ar.id)"
+      @click="$router.push('/singer/' + ar.id)"
       style="margin-right: 4px; cursor: pointer"
       >{{ ar.name }}</span
     >

src/router/index.js

@@ -71,6 +71,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/played",
+    name: "played",
+    component: ()=> import('@/views/Played.vue'),
+  },
   {
     path: "/friends",
     name: "friends",

src/views/Played.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { h } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+import { NButton, NSpace, NIcon, NMenu } from "naive-ui";
+
+const menuOptions = [
+  {
+    label: '最近播放',
+    key: "/played",
+  },
+];
+
+const route = useRoute()
+
+</script>
+<template>
+  <div class="top-menu">
+    <n-menu
+      :options="menuOptions"
+      mode="horizontal"
+      class="zm-top-menu"
+      :value="route.path"
+    />
+  </div>
+  <div class="main-content">
+      <div class="ld-width">
+        <div class="lmt-width">
+          <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        <br> 发束带结发十多块放假啊来得及发司法局啊水电费家啊练腹肌
+        </div>
+        
+      </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/common/SongInfo.vue

@@ -12,9 +12,9 @@ import { getSongDetial } from "@/network/song";
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import duration from 'dayjs/plugin/duration'
-import ArtistsSpan from "../../components/ArtistsSpan.vue";
+import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
-const showInfo = ref(true);
+const showInfo = ref(false);
 const info = reactive({
   name: "",
   artists: "",

src/views/discover/Discover.vue

@@ -109,11 +109,11 @@ const route = useRoute();
     />
   </div>
   <div class="main-content">
-    <NScrollbar >
+    <!-- <NScrollbar > -->
       <div class="ld-width">
         <router-view />
       </div>
-    </NScrollbar>
+    <!-- </NScrollbar> -->
   </div>
 </template>