From 0de746e55bdb989fd87389fb7479aad1bd5af962 Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Mon, 18 Oct 2021 18:30:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E4=BD=BF=E7=94=A8NScrollbar=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  2 +-
 src/assets/css/common.css       | 28 +++++++++++
 src/assets/css/common.less      | 39 ++++++++++++++--
 src/components/ArtistsSpan.vue  |  2 +-
 src/router/index.js             |  5 ++
 src/views/Played.vue            | 83 +++++++++++++++++++++++++++++++++
 src/views/common/SongInfo.vue   |  4 +-
 src/views/discover/Discover.vue |  4 +-
 8 files changed, 157 insertions(+), 10 deletions(-)
 create mode 100644 src/views/Played.vue

diff --git a/src/App.vue b/src/App.vue
index 3e9fd1a..05fe9f7 100644
--- a/src/App.vue
+++ b/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;
   }
 }
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 0149ec9..5ecef0c 100644
--- a/src/assets/css/common.css
+++ b/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 {
+  /* 定义右下角拖动块的样式 */
+}
diff --git a/src/assets/css/common.less b/src/assets/css/common.less
index aa05605..612b99c 100644
--- a/src/assets/css/common.less
+++ b/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;
-}
\ No newline at end of file
+}
+
+::-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 {
+  /* 定义右下角拖动块的样式 */
+}
diff --git a/src/components/ArtistsSpan.vue b/src/components/ArtistsSpan.vue
index a7d98e7..ff4d770 100644
--- a/src/components/ArtistsSpan.vue
+++ b/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
     >
diff --git a/src/router/index.js b/src/router/index.js
index 3ec8867..00eb77f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,6 +71,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/played",
+    name: "played",
+    component: ()=> import('@/views/Played.vue'),
+  },
   {
     path: "/friends",
     name: "friends",
diff --git a/src/views/Played.vue b/src/views/Played.vue
new file mode 100644
index 0000000..7bd4b20
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue
index 5909f0d..35fa435 100644
--- a/src/views/common/SongInfo.vue
+++ b/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: "",
diff --git a/src/views/discover/Discover.vue b/src/views/discover/Discover.vue
index 04d8009..bd657ef 100644
--- a/src/views/discover/Discover.vue
+++ b/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>