添加曲目列表

src/router/routes-common.ts

@@ -221,6 +221,13 @@ export default [
         meta: {
           title: '音乐家详情'
         }
+      },
+      {
+        path: '/hotMusicMore',
+        component: () => import('@/views/hot-music-more'),
+        meta: {
+          title: '曲谱列表'
+        }
       }
     ]
   },

src/views/hot-music-more/index.module.less

@@ -0,0 +1,73 @@
+.hotMusicMore {
+  min-height: 100vh;
+  background: url('./images/woring-bg.png') no-repeat top center;
+  background-size: contain;
+
+  :global {
+    .van-search {
+      padding-top: 20px;
+    }
+  }
+}
+
+.woringHeader {
+  display: flex;
+  align-items: center;
+  height: var(--van-nav-bar-height);
+
+  .leftArrow {
+    padding: 0 var(--k-padding-md);
+  }
+
+  .title {
+    position: relative;
+    z-index: 1;
+
+    i {
+      width: 78px;
+      height: 20px;
+      display: inline-block;
+      background: url('./images/woring-title.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      bottom: -2px;
+      width: 48px;
+      height: 6px;
+      background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%);
+      opacity: 0.5;
+      z-index: -1;
+    }
+  }
+}
+
+.searchContent {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.8);
+  line-height: 20px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+
+  span {
+    padding-right: 4px;
+  }
+
+  i {
+    display: inline-block;
+    background: url('./images/icon-arrow.png') no-repeat center;
+    background-size: contain;
+    width: 9px;
+    height: 5px;
+  }
+}
+
+// .hotMusicMoreTablet {
+//   background: url('./images/woring-bg-tablet.png') no-repeat top center;
+//   background-size: contain;
+// }

src/views/hot-music-more/index.tsx

@@ -0,0 +1,60 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { browser } from '@/helpers/utils';
+import MSticky from '@/components/m-sticky';
+import MHeader from '@/components/m-header';
+import { useRouter } from 'vue-router';
+import MSearch from '@/components/m-search';
+
+export default defineComponent({
+  name: 'hot-music-more',
+  setup() {
+    const router = useRouter();
+    return () => (
+      <div
+        class={[
+          styles.hotMusicMore,
+          browser().isTablet ? styles.hotMusicMoreTablet : ''
+        ]}>
+        <MSticky position="top">
+          <MHeader border={false} background="transparent">
+            {{
+              content: () => (
+                <div class={styles.woringHeader}>
+                  <i
+                    onClick={() => {
+                      if (browser().isApp) {
+                        postMessage({
+                          api: 'goBack'
+                        });
+                      } else {
+                        router.back();
+                      }
+                    }}
+                    class={[
+                      'van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow',
+                      styles.leftArrow
+                    ]}></i>
+                  <span class={styles.title}>
+                    <i></i>
+                  </span>
+                </div>
+              )
+            }}
+          </MHeader>
+
+          <MSearch background="transparent">
+            {{
+              left: () => (
+                <div class={styles.searchContent}>
+                  <span>筛选</span>
+                  <i></i>
+                </div>
+              )
+            }}
+          </MSearch>
+        </MSticky>
+      </div>
+    );
+  }
+});