|
|
@@ -3,81 +3,188 @@ import styles from './index.module.less';
|
|
|
import MSearch from '@/components/m-search';
|
|
|
import icon_play from '@/common/images/icon_play.svg';
|
|
|
import { NoticeBar } from 'vant';
|
|
|
+import icon_back from './image/icon_back.svg';
|
|
|
import icon_down from '@/common/images/icon_down.svg';
|
|
|
import icon_jianpu from '@/common/images/icon_jianpu.svg';
|
|
|
+import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
|
|
|
import icon_start from '@/common/images/icon_start.svg';
|
|
|
-
|
|
|
+import icon_1 from './image/1.svg';
|
|
|
+import icon_2 from './image/2.svg';
|
|
|
+import icon_3 from './image/3.svg';
|
|
|
+import png_1 from './image/1.png';
|
|
|
+import png_2 from './image/2.png';
|
|
|
+import png_3 from './image/3.png';
|
|
|
+import png_4 from './image/4.png';
|
|
|
export default defineComponent({
|
|
|
name: 'co-ai',
|
|
|
setup() {
|
|
|
+ const icons = [icon_1, icon_2, icon_3];
|
|
|
+ const titles = [
|
|
|
+ {
|
|
|
+ name: '竖笛-上学歌',
|
|
|
+ auther: '人教版',
|
|
|
+ hot: 232,
|
|
|
+ img: png_1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最伟大的作品',
|
|
|
+ auther: '周杰伦',
|
|
|
+ hot: 132,
|
|
|
+ img: png_2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '夏天的风',
|
|
|
+ auther: '温岚',
|
|
|
+ hot: 112,
|
|
|
+ img: png_3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '慢生活',
|
|
|
+ auther: '李萌',
|
|
|
+ hot: 112,
|
|
|
+ img: png_4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '竖笛-上学歌',
|
|
|
+ auther: '人教版',
|
|
|
+ hot: 232,
|
|
|
+ img: png_1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最伟大的作品',
|
|
|
+ auther: '周杰伦',
|
|
|
+ hot: 132,
|
|
|
+ img: png_2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '夏天的风',
|
|
|
+ auther: '温岚',
|
|
|
+ hot: 112,
|
|
|
+ img: png_3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '慢生活',
|
|
|
+ auther: '李萌',
|
|
|
+ hot: 112,
|
|
|
+ img: png_4
|
|
|
+ }
|
|
|
+ ];
|
|
|
const data = reactive({
|
|
|
/** 教材Index */
|
|
|
typeIndex: 0,
|
|
|
/** 音乐Index */
|
|
|
- musicIndex: 0
|
|
|
+ musicIndex: 0,
|
|
|
+ /** 显示简谱 */
|
|
|
+ isShowJianpu: false
|
|
|
});
|
|
|
return () => (
|
|
|
<div class={styles.container}>
|
|
|
- <div class={styles.back}></div>
|
|
|
+ <div class={styles.back}>
|
|
|
+ <img src={icon_back} />
|
|
|
+ </div>
|
|
|
<div class={styles.content}>
|
|
|
- <div class={[styles.opacityBg, styles.types]}>
|
|
|
- {new Array(10).fill(1).map((item, index) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.type,
|
|
|
- data.typeIndex === index && styles.typeActive
|
|
|
- ]}
|
|
|
- onClick={() => (data.typeIndex = index)}></div>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
- <div class={[styles.opacityBg, styles.center]}>
|
|
|
- <MSearch
|
|
|
- shape="round"
|
|
|
- background="transparent"
|
|
|
- placeholder="请输入曲目名称"
|
|
|
- />
|
|
|
- <div class={styles.musicContent}>
|
|
|
+ <div class={[styles.opacityBg, styles.leftContent]}>
|
|
|
+ <div class={styles.leftBg}></div>
|
|
|
+ <div class={styles.types}>
|
|
|
{new Array(10).fill(1).map((item, index) => {
|
|
|
+ const icon = icons[index] ? icons[index] : icons[index % 3];
|
|
|
return (
|
|
|
<div
|
|
|
class={[
|
|
|
- styles.musicItem,
|
|
|
- data.musicIndex === index && styles.musicActive
|
|
|
+ styles.type,
|
|
|
+ data.typeIndex === index && styles.typeActive
|
|
|
]}
|
|
|
- onClick={() => (data.musicIndex = index)}>
|
|
|
- <img class={styles.musicAvtor} />
|
|
|
- <div class={styles.musicInfo}>
|
|
|
- <div class={styles.musicName}>
|
|
|
- <NoticeBar
|
|
|
- scrollable={data.musicIndex === index}
|
|
|
- text={'最伟大的作品-周杰伦'}
|
|
|
- color="#333"
|
|
|
- class={styles.noticeBar}
|
|
|
- background="none"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class={styles.musicDes}>
|
|
|
- <div class={styles.musicFavitor}>132收藏</div>
|
|
|
- <div class={[styles.musicAuthor, 'van-ellipsis']}>
|
|
|
- 周杰伦
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ onClick={() => (data.typeIndex = index)}>
|
|
|
+ <div class={styles.typeIndex}></div>
|
|
|
+ <div class={styles.typeImg}>
|
|
|
+ <img class={styles.typeIcon} src={icon} />
|
|
|
</div>
|
|
|
- <img class={[styles.musicIcon]} src={icon_play} />
|
|
|
</div>
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
+ <div class={styles.center}>
|
|
|
+ <MSearch
|
|
|
+ shape="round"
|
|
|
+ background="transparent"
|
|
|
+ placeholder="请输入曲目名称"
|
|
|
+ />
|
|
|
+ <div class={styles.musicContent}>
|
|
|
+ {titles.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.musicItem,
|
|
|
+ data.musicIndex === index
|
|
|
+ ? styles.musicActive
|
|
|
+ : styles.disableNotic
|
|
|
+ ]}
|
|
|
+ onClick={() => (data.musicIndex = index)}>
|
|
|
+ <img class={styles.musicAvtor} src={item.img} />
|
|
|
+ <div class={styles.musicInfo}>
|
|
|
+ <div class={styles.musicName}>
|
|
|
+ <NoticeBar
|
|
|
+ text={item.name}
|
|
|
+ color="#333"
|
|
|
+ class={styles.noticeBar}
|
|
|
+ background="none"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class={styles.musicDes}>
|
|
|
+ <div class={styles.musicFavitor}>{item.hot}</div>
|
|
|
+ <div class={[styles.musicAuthor, 'van-ellipsis']}>
|
|
|
+ {item.auther}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class={[styles.musicIcon]} src={icon_play} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class={[styles.opacityBg, styles.right]}>
|
|
|
- <img class={styles.staff} src='https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1675232853576-1.png' />
|
|
|
+ <div class={styles['right-musicName']}>{titles[data.musicIndex].name}</div>
|
|
|
+ {data.isShowJianpu ? (
|
|
|
+ <>
|
|
|
+ <img
|
|
|
+ style={{ display: data.musicIndex % 2 === 0 ? '' : 'none' }}
|
|
|
+ class={styles.staff}
|
|
|
+ src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{ display: data.musicIndex % 2 !== 0 ? '' : 'none' }}
|
|
|
+ class={styles.staff}
|
|
|
+ src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1675232855321-1.png"
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <img
|
|
|
+ style={{
|
|
|
+ display: data.musicIndex % 2 === 0 ? '' : 'none'
|
|
|
+ }}
|
|
|
+ class={styles.staff}
|
|
|
+ src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1687673062488-1.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style={{
|
|
|
+ display: data.musicIndex % 2 !== 0 ? '' : 'none'
|
|
|
+ }}
|
|
|
+ class={styles.staff}
|
|
|
+ src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1675232854483-2.png"
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+
|
|
|
<div class={styles.rightBtns}>
|
|
|
- <img src='' />
|
|
|
- <img src={icon_jianpu} />
|
|
|
- <img src={icon_down} />
|
|
|
- <img src={icon_start} />
|
|
|
+ <img
|
|
|
+ src={data.isShowJianpu ? icon_jianpuActive : icon_jianpu}
|
|
|
+ onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
|
|
|
+ />
|
|
|
+ <img src={icon_down} />
|
|
|
+ <img src={icon_start} />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
