小酷AI教材

src/views/xiaoku-ai/image/index.tsx

@@ -1,5 +0,0 @@
-const icons = import.meta.glob("./*", { import: "default", eager: true });
-export const getImage = (name: string) => {
-    const src = icons[`./${name}`] as unknown as string || ''
-	return src;
-};

src/views/xiaoku-ai/index.module.less

@@ -9,7 +9,7 @@
 .tools {
     padding: 32Px 32Px 20Px 32Px;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex-shrink: 0;
 
     :global {
@@ -17,6 +17,17 @@
             margin-left: auto;
             width: 361Px;
         }
+        .n-button.n-button--disabled{
+            cursor: initial;
+        }
+    }
+
+    .tagWrap{
+        flex: 1;
+        margin-right: 20Px;
+    }
+    .tags{
+        padding: 12px 0;
     }
 }
 
@@ -58,14 +69,55 @@
         height: 223Px;
         margin: auto;
         background-color: antiquewhite;
-        box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+        // overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 4Px;
+            right: -4Px;
+            width: 20Px;
+            height: calc(100% - 8Px);
+            background-color: #C5C5C5;
+            z-index: 1;
+            
+
+        }
+
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 2Px;
+            right: -2Px;
+            width: 20Px;
+            height: calc(100% - 4Px);
+            background-color: #E7E7E7;
+            z-index: 2;
+        }
+
+        .itemBg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 4;
+            background-repeat: no-repeat;
+            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
+            background-size: 50% 100%, 50% 100%;
+            background-position: 0% top, 9% top;
+        }
 
         :global {
             .n-image {
+                position: relative;
                 width: 100%;
                 height: 100%;
+                z-index: 3;
             }
         }
+
         img {
             transition: opacity .3s;
             opacity: 0;
@@ -74,9 +126,11 @@
         img[data-loaded="true"] {
             opacity: 1;
         }
+
+
     }
 
-    .itemName{
+    .itemName {
         margin-top: 16Px;
         font-size: 16Px;
         font-weight: 500;

src/views/xiaoku-ai/index.tsx

@@ -1,5 +1,6 @@
 import {
   TransitionGroup,
+  computed,
   defineComponent,
   onMounted,
   reactive,
@@ -8,8 +9,8 @@ import {
 import styles from './index.module.less';
 import TheSearch from '@/components/TheSearch';
 import { NButton, NImage, NSpace } from 'naive-ui';
-import { getImage } from './image';
 import { useRouter } from 'vue-router';
+import mock from './mock.json';
 
 export default defineComponent({
   name: 'XiaokuAi',
@@ -17,46 +18,75 @@ export default defineComponent({
     const router = useRouter();
     const data = reactive({
       tags: [
-        { name: '全部', id: 0 },
-        { name: '人教版', id: 1 },
-        { name: '声部训练', id: 2 },
-        { name: '小曲目', id: 3 },
-        { name: '考级曲目', id: 4 }
+        { name: '全部', id: '0' },
+        { name: '人教版', id: '1' },
+        { name: '人音版', id: '2' }
       ],
-      tagIndex: 0,
-      list: [
-        {
-          name: '一年级上册人教版（2013版）',
-          src: ''
-        }
-      ]
+      tagIndex: '0',
+      list: mock.list
+    });
+    const _list = computed(() => {
+      if (data.tagIndex === '0') return data.list;
+      return data.list.filter(item => data.tagIndex === item.category);
     });
     return () => (
       <div class={styles.container}>
         <div class={styles.tools}>
-          <div class={styles.tags}>
-            <NSpace size={[24, 12]}>
-              {data.tags.map((item, index) => (
-                <NButton
-                  round
-                  secondary={data.tagIndex !== index}
-                  type={data.tagIndex === index ? 'primary' : 'default'}
-                  class={[
-                    styles.tag,
-                    data.tagIndex === index ? styles.active : ''
-                  ]}
-                  onClick={() => (data.tagIndex = index)}>
-                  {item.name}
+          <div class={styles.tagWrap}>
+            <div class={styles.tags}>
+              <NSpace size={[24, 12]}>
+                <NButton quaternary disabled>
+                  类型
+                </NButton>
+                {data.tags.map((item, index) => (
+                  <NButton
+                    round
+                    secondary={data.tagIndex !== item.id}
+                    type={data.tagIndex === item.id ? 'primary' : 'default'}
+                    class={[
+                      styles.tag,
+                      data.tagIndex === item.id ? styles.active : ''
+                    ]}
+                    onClick={() => (data.tagIndex = item.id)}>
+                    {item.name}
+                  </NButton>
+                ))}
+              </NSpace>
+            </div>
+            <div class={styles.tags}>
+              <NSpace size={[24, 12]}>
+                <NButton quaternary disabled>
+                  学段
+                </NButton>
+                <NButton round secondary type={'default'}>
+                  小学
+                </NButton>
+                <NButton round secondary type={'default'}>
+                  初中
+                </NButton>
+                <NButton round secondary type={'default'}>
+                  高中
+                </NButton>
+              </NSpace>
+            </div>
+            <div class={styles.tags}>
+              <NSpace size={[24, 12]}>
+                <NButton quaternary disabled>
+                  年级
                 </NButton>
-              ))}
-            </NSpace>
+                {['一', '二', '三', '四', '五', '六'].map((item, index) => (
+                  <NButton secondary round>
+                    {item}年级
+                  </NButton>
+                ))}
+              </NSpace>
+            </div>
           </div>
           <TheSearch round />
         </div>
         <div class={styles.content}>
           <NSpace size={[50, 40]}>
-            {new Array(30).fill(data.list[0]).map((item, index) => {
-              const _index = index > 5 ? index % 5 : index;
+            {_list.value.map((item, index) => {
               return (
                 <div
                   class={styles.item}
@@ -64,9 +94,10 @@ export default defineComponent({
                   onClick={() => router.push({ path: '/xiaoku-music' })}>
                   <div class={styles.cover}>
                     <div class={styles.itemImg}>
+                      <div class={styles.itemBg}></div>
                       <NImage
                         objectFit="contain"
-                        src={getImage(`${_index}.png`)}
+                        src={item.src}
                         lazy
                         previewDisabled={true}
                         onLoad={e => {

src/views/xiaoku-ai/mock.json

@@ -0,0 +1,124 @@
+{
+    "list": [
+        {
+            "name": "一年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879396909941.png"
+        },
+        {
+            "name": "一年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397066202.png"
+        },
+        {
+            "name": "一年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399237211.png"
+        },
+        {
+            "name": "一年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399268072.png"
+        },
+        {
+            "name": "二年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397152383.png"
+        },
+        {
+            "name": "二年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397257464.png"
+        },
+        {
+            "name": "三年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397333805.png"
+        },
+        {
+            "name": "三年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397403546.png"
+        },
+        {
+            "name": "四年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397449747.png"
+        },
+        {
+            "name": "四年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397477658.png"
+        },
+        {
+            "name": "三年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399375956.png"
+        },
+        {
+            "name": "四年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399407587.png"
+        },
+        {
+            "name": "四年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399431318.png"
+        },
+        {
+            "name": "五年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399462639.png"
+        },
+        {
+            "name": "五年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879397501719.png"
+        },
+        {
+            "name": "五年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793975222810.png"
+        },
+        {
+            "name": "六年级上册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793975447311.png"
+        },
+        {
+            "name": "六年级下册（简谱）",
+            "category": "1",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793975664712.png"
+        },
+        {
+            "name": "二年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399291733.png"
+        },
+        {
+            "name": "二年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399318924.png"
+        },
+        {
+            "name": "三年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/16879399348525.png"
+        },
+        {
+            "name": "五年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793994852610.png"
+        },
+        {
+            "name": "六年级上册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793995083811.png"
+        },
+        {
+            "name": "六年级下册",
+            "category": "2",
+            "src": "https://daya.ks3-cn-beijing.ksyuncs.com/168793995297612.png"
+        }
+    ]
+}

src/views/xiaoku-music/index.tsx

@@ -109,7 +109,7 @@ export default defineComponent({
           <NBreadcrumb separator="">
             <NBreadcrumbItem
               onClick={() => router.push({ path: '/xiaoku-ai' })}>
-              选择教材
+              曲谱列表
             </NBreadcrumbItem>
             <img class={styles.separator} src={icon_separator} />
             <NBreadcrumbItem>一年级上册人教版（2013版）</NBreadcrumbItem>