|
@@ -1,4 +1,4 @@
|
|
-import { defineComponent, onMounted, reactive, ref } from 'vue';
|
|
|
|
|
|
+import { defineComponent, ref } from 'vue';
|
|
|
|
|
|
import styles from './index.module.less';
|
|
import styles from './index.module.less';
|
|
// Import Swiper Vue.js components
|
|
// Import Swiper Vue.js components
|
|
@@ -6,33 +6,24 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
// Import Swiper styles
|
|
// Import Swiper styles
|
|
import 'swiper/css';
|
|
import 'swiper/css';
|
|
|
|
|
|
-import { Vue3Lottie } from 'vue3-lottie';
|
|
|
|
-import request from 'umi-request';
|
|
|
|
-
|
|
|
|
|
|
+// import { Vue3Lottie } from 'vue3-lottie';
|
|
|
|
+// import request from 'umi-request';
|
|
|
|
+import img1 from '../images/co-tenant/img1.png';
|
|
|
|
+import img2 from '../images/co-tenant/img2.png';
|
|
|
|
+import img3 from '../images/co-tenant/img3.png';
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'music-room',
|
|
name: 'music-room',
|
|
setup() {
|
|
setup() {
|
|
const swipeIndex = ref(1);
|
|
const swipeIndex = ref(1);
|
|
- const animation = reactive({
|
|
|
|
- animaRef1: null as any,
|
|
|
|
- animaRef2: null as any,
|
|
|
|
- animaRef3: null as any,
|
|
|
|
- subjectJSON: '',
|
|
|
|
- ensembleJSON: '',
|
|
|
|
- soloJSON: ''
|
|
|
|
- });
|
|
|
|
|
|
+ // const animation = reactive({
|
|
|
|
+ // animaRef1: null as any,
|
|
|
|
+ // animaRef2: null as any,
|
|
|
|
+ // animaRef3: null as any,
|
|
|
|
+ // subjectJSON: '',
|
|
|
|
+ // ensembleJSON: '',
|
|
|
|
+ // soloJSON: ''
|
|
|
|
+ // });
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
|
- await request(location.pathname + 'data/ensemble.json').then(res => {
|
|
|
|
- animation.ensembleJSON = res;
|
|
|
|
- });
|
|
|
|
- await request(location.pathname + 'data/solo.json').then(res => {
|
|
|
|
- animation.soloJSON = res;
|
|
|
|
- });
|
|
|
|
- await request(location.pathname + 'data/subject.json').then(res => {
|
|
|
|
- animation.subjectJSON = res;
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
return () => (
|
|
return () => (
|
|
<div class={styles.coTenant}>
|
|
<div class={styles.coTenant}>
|
|
<div class={styles.section1}>
|
|
<div class={styles.section1}>
|
|
@@ -50,36 +41,10 @@ export default defineComponent({
|
|
centeredSlides={true}
|
|
centeredSlides={true}
|
|
onSlideChange={swiper => {
|
|
onSlideChange={swiper => {
|
|
swipeIndex.value = swiper.activeIndex;
|
|
swipeIndex.value = swiper.activeIndex;
|
|
- if (swiper.activeIndex === 0) {
|
|
|
|
- // animation.animPlay = true;
|
|
|
|
- // animation.animPlay2 = false;
|
|
|
|
- // animation.animPlay3 = false;
|
|
|
|
- animation.animaRef1?.play();
|
|
|
|
- animation.animaRef2?.stop();
|
|
|
|
- animation.animaRef3?.stop();
|
|
|
|
- } else if (swiper.activeIndex === 1) {
|
|
|
|
- // animation.animPlay = false;
|
|
|
|
- // animation.animPlay2 = true;
|
|
|
|
- // animation.animPlay3 = false;
|
|
|
|
- animation.animaRef1?.stop();
|
|
|
|
- animation.animaRef2?.play();
|
|
|
|
- animation.animaRef3?.stop();
|
|
|
|
- } else if (swiper.activeIndex === 2) {
|
|
|
|
- // animation.animPlay = false;
|
|
|
|
- // animation.animPlay2 = false;
|
|
|
|
- // animation.animPlay3 = true;
|
|
|
|
- console.log(animation.animaRef3);
|
|
|
|
- animation.animaRef1?.stop();
|
|
|
|
- animation.animaRef2?.stop();
|
|
|
|
- animation.animaRef3?.play();
|
|
|
|
- }
|
|
|
|
}}>
|
|
}}>
|
|
<SwiperSlide>
|
|
<SwiperSlide>
|
|
<div class={styles.swipeContainer}>
|
|
<div class={styles.swipeContainer}>
|
|
- <Vue3Lottie
|
|
|
|
- ref={el => (animation.animaRef1 = el)}
|
|
|
|
- animationData={animation.subjectJSON}
|
|
|
|
- autoPlay={false}></Vue3Lottie>
|
|
|
|
|
|
+ <img src={img1} class="w100" />
|
|
<div class={styles.desc}>
|
|
<div class={styles.desc}>
|
|
<p>
|
|
<p>
|
|
声部教材全量制作为练习曲目,课堂所学即课后所练。让学生循序渐进逐步掌握器乐演奏技能
|
|
声部教材全量制作为练习曲目,课堂所学即课后所练。让学生循序渐进逐步掌握器乐演奏技能
|
|
@@ -89,10 +54,7 @@ export default defineComponent({
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<SwiperSlide>
|
|
<div class={styles.swipeContainer}>
|
|
<div class={styles.swipeContainer}>
|
|
- <Vue3Lottie
|
|
|
|
- ref={el => (animation.animaRef2 = el)}
|
|
|
|
- animationData={animation.ensembleJSON}
|
|
|
|
- autoPlay={true}></Vue3Lottie>
|
|
|
|
|
|
+ <img src={img2} class="w100" />
|
|
|
|
|
|
<div class={styles.desc}>
|
|
<div class={styles.desc}>
|
|
<p>
|
|
<p>
|
|
@@ -103,12 +65,7 @@ export default defineComponent({
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<SwiperSlide>
|
|
<div class={styles.swipeContainer}>
|
|
<div class={styles.swipeContainer}>
|
|
- <Vue3Lottie
|
|
|
|
- ref={el => {
|
|
|
|
- animation.animaRef3 = el;
|
|
|
|
- }}
|
|
|
|
- animationData={animation.soloJSON}
|
|
|
|
- autoPlay={false}></Vue3Lottie>
|
|
|
|
|
|
+ <img src={img3} class="w100" />
|
|
<div class={styles.desc}>
|
|
<div class={styles.desc}>
|
|
<p>
|
|
<p>
|
|
每首合奏曲目都包含多分轨和对应分轨伴奏。同一教学体系下的合奏训练,合排更容易,演出更出彩
|
|
每首合奏曲目都包含多分轨和对应分轨伴奏。同一教学体系下的合奏训练,合排更容易,演出更出彩
|