|
@@ -24,6 +24,8 @@ import Image2 from './icons/4.svg'
|
|
import Image3 from './icons/3.svg'
|
|
import Image3 from './icons/3.svg'
|
|
import Image4 from './icons/2.svg'
|
|
import Image4 from './icons/2.svg'
|
|
import Image5 from './icons/1.svg'
|
|
import Image5 from './icons/1.svg'
|
|
|
|
+import iconShare from './icons/icon-share.svg'
|
|
|
|
+import iconUpload from './icons/icon-upload.svg'
|
|
import { useOriginSearch } from '../../uses'
|
|
import { useOriginSearch } from '../../uses'
|
|
import { onChangeModelType } from '../../buttons'
|
|
import { onChangeModelType } from '../../buttons'
|
|
|
|
|
|
@@ -36,7 +38,7 @@ const scoreInfos: any = {
|
|
2: {
|
|
2: {
|
|
img: Image2,
|
|
img: Image2,
|
|
tips: '你的演奏还不熟练,音准和完整性还需加强,加紧训练才能有好成绩哦~',
|
|
tips: '你的演奏还不熟练,音准和完整性还需加强,加紧训练才能有好成绩哦~',
|
|
- mome: '还要加油哦~',
|
|
|
|
|
|
+ mome: '还要加油哦',
|
|
},
|
|
},
|
|
3: {
|
|
3: {
|
|
img: Image3,
|
|
img: Image3,
|
|
@@ -74,7 +76,7 @@ export default defineComponent({
|
|
const shareLoadedPngData = ref('')
|
|
const shareLoadedPngData = ref('')
|
|
const { data } = toRefs(props)
|
|
const { data } = toRefs(props)
|
|
const pathname =
|
|
const pathname =
|
|
- location.origin.indexOf('localhost') > -1 || location.origin.indexOf('192.168') > -1 ? '' : '/accompany'
|
|
|
|
|
|
+ location.origin.indexOf('localhost') > -1 || location.origin.indexOf('192.168') > -1 ? '' : '/orchestra-music-score'
|
|
const getShareUrl = () => {
|
|
const getShareUrl = () => {
|
|
const shareData: any = {
|
|
const shareData: any = {
|
|
id: data.value?.recordId,
|
|
id: data.value?.recordId,
|
|
@@ -159,77 +161,77 @@ export default defineComponent({
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
<div class={styles.box}>
|
|
<div class={styles.box}>
|
|
- {/* <img class={styles.bg} src={bg} /> */}
|
|
|
|
<div class={styles.wrap}>
|
|
<div class={styles.wrap}>
|
|
- <div class={styles.top}>
|
|
|
|
- {info === 5 && <img class={styles.iconLeft} src={iconBadge} />}
|
|
|
|
- <div class={styles.title}>
|
|
|
|
- <div style={{ position: 'relative', zIndex: 1, 'white-space': 'nowrap' }}>
|
|
|
|
- <span class={styles.num}>{data.value?.score}</span>
|
|
|
|
- <span class={styles.txt}>
|
|
|
|
- 分 <span>{scoreInfos[info].mome}</span>
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div class={styles.wrapContainer}>
|
|
|
|
+ <div class={styles.top}>
|
|
|
|
+ {/* {info === 5 && <img class={styles.iconLeft} src={iconBadge} />} */}
|
|
|
|
+ <div class={styles.title}>
|
|
|
|
+ <div style={{ position: 'relative', zIndex: 1, 'white-space': 'nowrap' }}>
|
|
|
|
+ <span class={styles.num}>{data.value?.score}</span>
|
|
|
|
+ <span class={styles.txt}>分 {scoreInfos[info].mome}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class={styles.line}></div>
|
|
</div>
|
|
</div>
|
|
- <div class={styles.line}></div>
|
|
|
|
|
|
+ <img class={styles.iconTop} src={scoreInfos[info].img} />
|
|
|
|
+ </div>
|
|
|
|
+ <div class={styles.evaluatWrap}>
|
|
|
|
+ <Grid>
|
|
|
|
+ <GridItem
|
|
|
|
+ vSlots={{
|
|
|
|
+ icon: () => (
|
|
|
|
+ <div>
|
|
|
|
+ <img class={styles.evaluatIcon} src={IntonationIcon} />
|
|
|
|
+ <span class={styles.evaluatTitle}>音准</span>
|
|
|
|
+ </div>
|
|
|
|
+ ),
|
|
|
|
+ text: () => (
|
|
|
|
+ <span class={styles.fraction}>
|
|
|
|
+ {data.value?.intonation}
|
|
|
|
+ <span>分</span>
|
|
|
|
+ </span>
|
|
|
|
+ ),
|
|
|
|
+ }}
|
|
|
|
+ ></GridItem>
|
|
|
|
+ <div class={styles.line}></div>
|
|
|
|
+ <GridItem
|
|
|
|
+ vSlots={{
|
|
|
|
+ icon: () => (
|
|
|
|
+ <div>
|
|
|
|
+ <img class={styles.evaluatIcon} src={CadenceIcon} />
|
|
|
|
+ <span class={styles.evaluatTitle}>节奏</span>
|
|
|
|
+ </div>
|
|
|
|
+ ),
|
|
|
|
+ text: () => (
|
|
|
|
+ <span class={styles.fraction}>
|
|
|
|
+ {data.value?.cadence}
|
|
|
|
+ <span>分</span>
|
|
|
|
+ </span>
|
|
|
|
+ ),
|
|
|
|
+ }}
|
|
|
|
+ ></GridItem>
|
|
|
|
+ <div class={styles.line}></div>
|
|
|
|
+ <GridItem
|
|
|
|
+ vSlots={{
|
|
|
|
+ icon: () => (
|
|
|
|
+ <div>
|
|
|
|
+ <img class={styles.evaluatIcon} src={IntegrityIcon} />
|
|
|
|
+ <span class={styles.evaluatTitle}>完整性</span>
|
|
|
|
+ </div>
|
|
|
|
+ ),
|
|
|
|
+ text: () => (
|
|
|
|
+ <span class={styles.fraction}>
|
|
|
|
+ {data.value?.integrity}
|
|
|
|
+ <span>分</span>
|
|
|
|
+ </span>
|
|
|
|
+ ),
|
|
|
|
+ }}
|
|
|
|
+ ></GridItem>
|
|
|
|
+ </Grid>
|
|
</div>
|
|
</div>
|
|
- <img class={styles.iconTop} src={scoreInfos[info].img} />
|
|
|
|
- </div>
|
|
|
|
- <div class={styles.evaluatWrap}>
|
|
|
|
- <Grid>
|
|
|
|
- <GridItem
|
|
|
|
- vSlots={{
|
|
|
|
- icon: () => (
|
|
|
|
- <div>
|
|
|
|
- <img class={styles.evaluatIcon} src={IntonationIcon} />
|
|
|
|
- <span class={styles.evaluatTitle}>音准</span>
|
|
|
|
- </div>
|
|
|
|
- ),
|
|
|
|
- text: () => (
|
|
|
|
- <span class={styles.fraction}>
|
|
|
|
- {data.value?.intonation}
|
|
|
|
- <span>分</span>
|
|
|
|
- </span>
|
|
|
|
- ),
|
|
|
|
- }}
|
|
|
|
- ></GridItem>
|
|
|
|
- <div class={styles.line}></div>
|
|
|
|
- <GridItem
|
|
|
|
- vSlots={{
|
|
|
|
- icon: () => (
|
|
|
|
- <div>
|
|
|
|
- <img class={styles.evaluatIcon} src={CadenceIcon} />
|
|
|
|
- <span class={styles.evaluatTitle}>节奏</span>
|
|
|
|
- </div>
|
|
|
|
- ),
|
|
|
|
- text: () => (
|
|
|
|
- <span class={styles.fraction}>
|
|
|
|
- {data.value?.cadence}
|
|
|
|
- <span>分</span>
|
|
|
|
- </span>
|
|
|
|
- ),
|
|
|
|
- }}
|
|
|
|
- ></GridItem>
|
|
|
|
- <div class={styles.line}></div>
|
|
|
|
- <GridItem
|
|
|
|
- vSlots={{
|
|
|
|
- icon: () => (
|
|
|
|
- <div>
|
|
|
|
- <img class={styles.evaluatIcon} src={IntegrityIcon} />
|
|
|
|
- <span class={styles.evaluatTitle}>完整性</span>
|
|
|
|
- </div>
|
|
|
|
- ),
|
|
|
|
- text: () => (
|
|
|
|
- <span class={styles.fraction}>
|
|
|
|
- {data.value?.integrity}
|
|
|
|
- <span>分</span>
|
|
|
|
- </span>
|
|
|
|
- ),
|
|
|
|
- }}
|
|
|
|
- ></GridItem>
|
|
|
|
- </Grid>
|
|
|
|
- </div>
|
|
|
|
|
|
|
|
- <div class={styles.tips}>{scoreInfos[info].tips}</div>
|
|
|
|
|
|
+ <div class={styles.tips}>{scoreInfos[info].tips}</div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
<div class={styles.btns}>
|
|
<div class={styles.btns}>
|
|
{detailState.frozenMode ? null : (
|
|
{detailState.frozenMode ? null : (
|
|
<Button onClick={() => {
|
|
<Button onClick={() => {
|
|
@@ -246,6 +248,16 @@ export default defineComponent({
|
|
<img class={styles.btnIcon} src={iconReport} alt="查看报告" />
|
|
<img class={styles.btnIcon} src={iconReport} alt="查看报告" />
|
|
</Button>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class={styles.rigthBtns}>
|
|
|
|
+ <div class={styles.skepBtn} onClick={() => emit('upload')}>
|
|
|
|
+ <img src={iconUpload} />
|
|
|
|
+ 上传
|
|
|
|
+ </div>
|
|
|
|
+ <div class={styles.skepBtn} onClick={() => (shareShow.value = true)}>
|
|
|
|
+ <img src={iconShare} />
|
|
|
|
+ 分享
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<Popup
|
|
<Popup
|
|
teleport="body"
|
|
teleport="body"
|
|
@@ -275,12 +287,7 @@ export default defineComponent({
|
|
</Popup>
|
|
</Popup>
|
|
<Button class={styles.button} icon={backIcon} onClick={() => emit('restart')}></Button>
|
|
<Button class={styles.button} icon={backIcon} onClick={() => emit('restart')}></Button>
|
|
|
|
|
|
- <Button class={styles.skepBtn} onClick={() => emit('upload')}>
|
|
|
|
- 保存演奏
|
|
|
|
- </Button>
|
|
|
|
- <Button class={[styles.skepBtn, styles.sharBtn]} onClick={() => (shareShow.value = true)}>
|
|
|
|
- 分享
|
|
|
|
- </Button>
|
|
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|