更新样式

src/components/m-footer/index.module.less

@@ -13,8 +13,11 @@
     justify-content: space-between;
   }
 
+  .friendCode {}
+
   .link {
     padding: 0 24px 20px;
+    width: 100%;
 
     .linkTitle {
       font-size: 12px;
@@ -24,18 +27,26 @@
     }
 
     .linkContent {
-      font-size: 12px;
+      font-size: 13px;
       font-weight: 500;
       color: #FFFFFF;
       line-height: 20px;
       letter-spacing: 1px;
 
       a {
-        display: inline-block;
+        display: block;
         color: #fff;
         padding-top: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
       }
     }
+
+    .linkContent2 {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .copyright {
@@ -48,8 +59,9 @@
   }
 
   .logoUrl {
-    margin-right: 24px;
-    width: 58px;
-    height: 71px;
+    margin-top: 6px;
+    margin-right: 16px;
+    width: 74px;
+    height: 86px;
   }
 }

src/components/m-footer/index.tsx

@@ -2,6 +2,8 @@ import { defineComponent } from 'vue';
 import styles from './index.module.less';
 import logoBottom from '@common/assets/logo-bottom.png';
 import qrcode from '@common/assets/qr-code.png';
+import qrcode2 from '@common/assets/qr-code2.png';
+import { Icon } from 'vant';
 
 export default defineComponent({
   name: 'm-footer',
@@ -15,19 +17,30 @@ export default defineComponent({
             <p class={styles.linkTitle}>友情链接</p>
             <p class={styles.linkContent}>
               <a href="https://www.chnmusic.org/" target="_blank">
-                中国音乐家协会
+                <span class={styles.name}>中国音乐家协会</span>
+                <Icon name="arrow" />
               </a>
-              <br />
               <a
                 href="https://www.cnorch.com/leaderInfo/list?leaderType=2"
                 target="_blank">
-                中国音协管乐学会低音铜管
+                <span class={styles.name}>中国音协管乐学会低音铜管</span>
+                <Icon name="arrow" />
               </a>
             </p>
           </div>
-          <div class={styles.logoUrl}>
-            <img src={qrcode} class="w100" />
-            <p class={styles.qrText}></p>
+        </div>
+
+        <div class={[styles.friendLink, styles.friendCode]}>
+          <div class={styles.link}>
+            <p class={styles.linkTitle}>关注公众号</p>
+            <p class={styles.linkContent2}>
+              <div class={styles.logoUrl}>
+                <img src={qrcode2} class="w100" />
+              </div>
+              <div class={styles.logoUrl}>
+                <img src={qrcode} class="w100" />
+              </div>
+            </p>
           </div>
         </div>
 

src/components/the-submit/index.module.less

@@ -96,7 +96,8 @@
   }
 }
 
-.fieldTechnology {
+.fieldTechnology,
+.fieldPerson {
   :global {
     .van-field {
       border: 1px solid #DFEDF7;

src/components/the-submit/index.tsx

@@ -10,7 +10,9 @@ export default defineComponent({
   props: {
     /** 类型 */
     type: {
-      type: String as PropType<'tenant' | 'classroom' | 'technology' | ''>,
+      type: String as PropType<
+        'tenant' | 'classroom' | 'technology' | 'person' | ''
+      >,
       default: ''
     }
   },
@@ -101,7 +103,8 @@ export default defineComponent({
             styles.fieldGroup,
             props.type === 'tenant' && styles.fieldTenant,
             props.type === 'classroom' && styles.fieldClassroom,
-            props.type === 'technology' && styles.fieldTechnology
+            props.type === 'technology' && styles.fieldTechnology,
+            props.type === 'person' && styles.fieldPerson
           ]}>
           <Field
             readonly

src/views/colexiu-person/index.module.less

@@ -206,58 +206,36 @@
   }
 }
 
+.blue {
+  color: #2DC7AA;
+}
+
 .section6 {
-  background: url('https://oss.dayaedu.com/klx/1699511873679img-b.png') no-repeat top center;
+  padding: 32px 0 23px;
+  background: url('./images/img_bg.png') no-repeat top center;
   background-size: cover;
-  min-height: 165px;
-  display: flex;
-  flex-direction: column;
 
-  .sTitle {
+  .title6 {
     font-size: 19px;
     font-weight: 600;
-    color: #249E87;
-    line-height: 28px;
+    color: #000000;
+    line-height: 32px;
     text-align: center;
-    padding: 17px 0 22px;
   }
 
-  .btnGroup {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn {
-    width: 125px;
-    height: 46px;
-    background-color: red;
-    margin: 0 9px 0;
-
-  }
-
-  .btnIos {
-    background: url('./images/btn-student.png') no-repeat center;
-    background-size: contain;
-  }
-
-  .btnAndroid {
-    background: url('./images/btn-teacher.png') no-repeat center;
-    background-size: contain;
+  .content {
+    font-size: 12px;
+    color: #50616A;
+    text-align: center;
+    padding: 10px 0 22px;
   }
 }
 
-.wxpopup {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+.section7 {
+  padding: 23px 0 40px;
+  background-color: #fff;
 
   img {
-    width: 88%;
-    margin: 0 6%;
+    padding: 0 60px;
   }
 }

src/views/colexiu-person/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import styles from './index.module.less';
 import MHeader from '@/components/m-header';
 import img1 from './images/img1.png';
@@ -7,86 +7,14 @@ import img13 from './images/img-1-3.png';
 import img14 from './images/img-1-4.png';
 import img21 from './images/img-2-1.png';
 import img22 from './images/img-2-2.png';
-import wxBg from './images/wx_bg.png';
+import img3 from './images/img3.png';
 import MFooter from '@/components/m-footer';
-import request from '@/helpers/request';
-import { browser } from '@/helpers/utils';
-import { showToast } from 'vant';
+import TheSubmit from '@/components/the-submit';
 
 export default defineComponent({
   name: 'colexiu-person',
   setup() {
     const activeTab = ref<'love' | 'music'>('love');
-    const wxStatus = ref(false);
-    const studentAndroidUrl = ref('');
-    const teacherAndroidUrl = ref('');
-
-    onMounted(async () => {
-      try {
-        const studentRes = await request.get(
-          '/api-website/open/appVersionInfo/queryLatestByPlatform',
-          {
-            params: {
-              platform: 'android-student',
-              status: 'history'
-            }
-          }
-        );
-        studentAndroidUrl.value = studentRes.data?.downloadUrl;
-
-        const teacherRes = await request.get(
-          '/api-website/open/appVersionInfo/queryLatestByPlatform',
-          {
-            params: {
-              platform: 'android-teacher',
-              status: 'history'
-            }
-          }
-        );
-        teacherAndroidUrl.value = teacherRes.data?.downloadUrl;
-      } catch (e) {
-        console.log(e);
-      }
-    });
-
-    // 下载
-    const onDownload = (type: string) => {
-      if (browser().weixin || navigator.userAgent.indexOf('DingTalk') > -1) {
-        wxStatus.value = true;
-        return;
-      }
-
-      let urlIos = '';
-      let urlAndroid = '';
-      if (location.origin.indexOf('m.colexiu.com') > -1) {
-        if (type === 'student') {
-          urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8';
-          urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
-        } else {
-          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8';
-          urlAndroid = teacherAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-teacher-domain.apk'
-        }
-      } else {
-        if (type === 'student') {
-          urlIos = 'https://www.pgyer.com/powy';
-          urlAndroid = studentAndroidUrl.value; // 'https://www.pgyer.com/70e7'
-        } else {
-          urlIos = 'https://www.pgyer.com/iO0m';
-          urlAndroid = teacherAndroidUrl.value; // 'https://www.pgyer.com/N2U3'
-        }
-      }
-
-      if (
-        browser().ios ||
-        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
-      ) {
-        window.location.href = urlIos;
-      } else if (/(Android)/i.test(navigator.userAgent)) {
-        window.location.href = urlAndroid;
-      } else {
-        showToast('请用手机或移动设备打开');
-      }
-    };
 
     return () => (
       <div class={styles.person}>
@@ -225,24 +153,24 @@ export default defineComponent({
           </div>
         </div>
 
-        <div class={[styles.section6]}>
-          <div class={styles.sTitle}>
-            立即加入
-            <br />
-            与器乐爱好者们分享音乐吧！
-          </div>
-          <div class={styles.btnGroup}>
-            <div
-              class={[styles.btn, styles.btnIos]}
-              onClick={() => onDownload('student')}></div>
-            <div
-              class={[styles.btn, styles.btnAndroid]}
-              onClick={() => onDownload('teacher')}></div>
+        <div class={styles.section6}>
+          <div class={[styles.title6]}>
+            <span class={styles.blue}>提交</span>合作信息
           </div>
+
+          <div class={styles.content}>我们将在提交后尽快与您取得联系</div>
+
+          <TheSubmit type="person" />
+        </div>
+
+        <div class={styles.section7}>
+          <div class={[styles.title7]}></div>
+
+          <img src={img3} class={'w100'} />
         </div>
         <MFooter />
 
-        {wxStatus.value && (
+        {/* {wxStatus.value && (
           <div
             class={styles.wxpopup}
             onClick={() => {
@@ -250,7 +178,7 @@ export default defineComponent({
             }}>
             <img src={wxBg} alt="" />
           </div>
-        )}
+        )} */}
       </div>
     );
   }

src/views/colexiu-technology/index.module.less

@@ -60,7 +60,20 @@
   span::after {
     transform: rotate(180deg);
   }
+}
 
+.btnMore {
+  position: relative;
+  margin: 0 auto;
+  padding: 4px 0;
+  width: 120px;
+  text-align: center;
+  margin-top: 24px;
+  background: linear-gradient(to right, rgba(14, 134, 160, 1), rgba(3, 197, 186, 1));
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #FFFFFF;
 }
 
 
@@ -176,7 +189,7 @@
 .section3 {
   position: relative;
   background-color: #fff;
-  padding: 32px 0;
+  padding: 32px 0 24px;
 
   &.sectionBg1::before {
     content: '';
@@ -256,7 +269,7 @@
 }
 
 .section4 {
-  padding: 19px 0 26px;
+  padding: 19px 0 24px;
   background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 21%, #FFFFFF 88%, #DDF0F2 100%);
 
   .tabGroup {
@@ -274,11 +287,15 @@
 
 .section5 {
   background-color: #fff;
-  padding: 30px 0 42px;
+  padding: 30px 0 30px;
 
   img {
     padding: 26px 41px 0;
   }
+
+  .btnMore {
+    margin-top: 30px;
+  }
 }
 
 .section6 {
@@ -288,6 +305,11 @@
   img {
     padding: 29px 22px 0 15px;
   }
+
+  .btnMore {
+    margin-top: 13px;
+    margin-bottom: 30px;
+  }
 }
 
 .section7 {
@@ -297,6 +319,11 @@
   img {
     padding: 13px 18px 0;
   }
+
+  .btnMore {
+    margin-top: 22px;
+    margin-bottom: 30px;
+  }
 }
 
 .section8 {

src/views/colexiu-technology/index.tsx

@@ -25,13 +25,31 @@ import i10 from './images/i10.png';
 import i11 from './images/i11.png';
 import i12 from './images/i12.png';
 import i13 from './images/i13.png';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'colexiu-technology',
   setup() {
+    const router = useRouter();
     const activeTab = ref<'trial' | 'teaching' | 'study'>('teaching');
     const productTab = ref<'practice' | 'follow' | 'evaluating'>('practice');
     const classTab = ref<'network' | 'live'>('network');
+
+    const onDetail = (type: string) => {
+      if (type === 'ai') {
+        router.push('/home');
+      } else if (type === 'live') {
+        //
+        router.push('/home?tab=2');
+      } else if (type === 'type') {
+        router.push('/music-classroom');
+      } else if (type === 'bt') {
+        //
+        router.push('/colexiu-tenant');
+      } else if (type === 'person') {
+        router.push('/colexiu-person');
+      }
+    };
     return () => (
       <div class={styles.technology}>
         <MHeader />
@@ -195,6 +213,10 @@ export default defineComponent({
               class="w100"
             />
           </div>
+
+          <div class={styles.btnMore} onClick={() => onDetail('ai')}>
+            更多
+          </div>
         </div>
 
         <div class={styles.section4}>
@@ -230,6 +252,9 @@ export default defineComponent({
             style={{ display: classTab.value === 'live' ? 'block' : 'none' }}>
             <img src={img2} class="w100" />
           </div>
+          <div class={styles.btnMore} onClick={() => onDetail('live')}>
+            更多
+          </div>
         </div>
 
         <div class={styles.section5}>
@@ -238,6 +263,10 @@ export default defineComponent({
           </div>
 
           <img src={img4} class="w100" />
+
+          <div class={styles.btnMore} onClick={() => onDetail('type')}>
+            更多
+          </div>
         </div>
 
         <div class={styles.section6}>
@@ -246,6 +275,10 @@ export default defineComponent({
           </div>
 
           <img src={img5} class="w100" />
+
+          <div class={styles.btnMore} onClick={() => onDetail('bt')}>
+            更多
+          </div>
         </div>
 
         <div class={styles.section7}>
@@ -254,6 +287,10 @@ export default defineComponent({
           </div>
 
           <img src={img6} class="w100" />
+
+          <div class={styles.btnMore} onClick={() => onDetail('person')}>
+            更多
+          </div>
         </div>
 
         <div class={styles.section8}>

src/views/home/co-person/index.module.less

@@ -75,4 +75,58 @@
     text-align: center;
     padding-bottom: 20px;
   }
+}
+
+.section5 {
+  background: url('../images/co-person/download_bg.png') no-repeat bottom center;
+  background-size: cover;
+  min-height: 232px;
+  position: relative;
+  overflow: hidden;
+
+  .stitle {
+    display: block;
+    margin: 28px auto 24px;
+    width: 255px;
+    height: 81px;
+  }
+
+  .btnGroup {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn {
+    width: 125px;
+    height: 46px;
+    background-color: red;
+    margin: 0 9px 0;
+
+  }
+
+  .btnIos {
+    background: url('../images/co-person/btn-student.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .btnAndroid {
+    background: url('../images/co-person/btn-teacher.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+.wxpopup {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
 }

src/views/home/co-person/index.tsx

@@ -1,9 +1,84 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
+import request from '@/helpers/request';
+import { browser } from '@/helpers/utils';
+import { showToast } from 'vant';
+import wxBg from '@common/assets/wx_bg.png';
+import downloadText from '../images/co-person/download_text.png';
 
 export default defineComponent({
   name: 'music-room',
   setup() {
+    const wxStatus = ref(false);
+    const studentAndroidUrl = ref('');
+    const teacherAndroidUrl = ref('');
+
+    onMounted(async () => {
+      try {
+        const studentRes = await request.get(
+          '/api-website/open/appVersionInfo/queryLatestByPlatform',
+          {
+            params: {
+              platform: 'android-student',
+              status: 'history'
+            }
+          }
+        );
+        studentAndroidUrl.value = studentRes.data?.downloadUrl;
+
+        const teacherRes = await request.get(
+          '/api-website/open/appVersionInfo/queryLatestByPlatform',
+          {
+            params: {
+              platform: 'android-teacher',
+              status: 'history'
+            }
+          }
+        );
+        teacherAndroidUrl.value = teacherRes.data?.downloadUrl;
+      } catch (e) {
+        console.log(e);
+      }
+    });
+
+    // 下载
+    const onDownload = (type: string) => {
+      if (browser().weixin || navigator.userAgent.indexOf('DingTalk') > -1) {
+        wxStatus.value = true;
+        return;
+      }
+
+      let urlIos = '';
+      let urlAndroid = '';
+      if (location.origin.indexOf('m.colexiu.com') > -1) {
+        if (type === 'student') {
+          urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8';
+          urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
+        } else {
+          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8';
+          urlAndroid = teacherAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-teacher-domain.apk'
+        }
+      } else {
+        if (type === 'student') {
+          urlIos = 'https://www.pgyer.com/powy';
+          urlAndroid = studentAndroidUrl.value; // 'https://www.pgyer.com/70e7'
+        } else {
+          urlIos = 'https://www.pgyer.com/iO0m';
+          urlAndroid = teacherAndroidUrl.value; // 'https://www.pgyer.com/N2U3'
+        }
+      }
+
+      if (
+        browser().ios ||
+        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
+      ) {
+        window.location.href = urlIos;
+      } else if (/(Android)/i.test(navigator.userAgent)) {
+        window.location.href = urlAndroid;
+      } else {
+        showToast('请用手机或移动设备打开');
+      }
+    };
     return () => (
       <div class={styles.coPerson}>
         <div class={styles.section1}>
@@ -60,6 +135,28 @@ export default defineComponent({
             class={'w100'}
           />
         </div>
+
+        <div class={[styles.section5]}>
+          <img src={downloadText} class={styles.stitle} />
+          <div class={styles.btnGroup}>
+            <div
+              class={[styles.btn, styles.btnIos]}
+              onClick={() => onDownload('student')}></div>
+            <div
+              class={[styles.btn, styles.btnAndroid]}
+              onClick={() => onDownload('teacher')}></div>
+          </div>
+        </div>
+
+        {wxStatus.value && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              wxStatus.value = false;
+            }}>
+            <img src={wxBg} alt="" />
+          </div>
+        )}
       </div>
     );
   }

src/views/home/co-tenant/index.module.less

@@ -149,4 +149,8 @@
   .content {
     padding-bottom: 15px;
   }
+}
+
+.section5 {
+  line-height: 0;
 }

src/views/home/co-tenant/index.tsx

@@ -5,6 +5,7 @@ import styles from './index.module.less';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 // Import Swiper styles
 import 'swiper/css';
+import downloadBg from '../images/co-tenant/download_bg.png';
 
 // import { Vue3Lottie } from 'vue3-lottie';
 // import request from 'umi-request';
@@ -141,6 +142,9 @@ export default defineComponent({
             class={'w100'}
           />
         </div>
+        <div class={styles.section5}>
+          <img src={downloadBg} style={{ width: '100%' }} />
+        </div>
       </div>
     );
   }

src/views/home/index.tsx

@@ -17,16 +17,35 @@ import PianoRoom from './piano-room';
 import MusicRoom from './music-room';
 import CoTenant from './co-tenant';
 import CoPerson from './co-person';
+import { useRoute } from 'vue-router';
 // import { useResizeObserver, useWindowScroll } from '@vueuse/core';
 
 export default defineComponent({
   name: 'home-page',
   setup() {
+    const route = useRoute();
+    const changeBanner = (val: number) => {
+      if (val === 1) {
+        return aiBanner;
+      } else if (val === 2) {
+        return 'https://oss.dayaedu.com/klx/1699519482956single1.png';
+      } else if (val === 3) {
+        return musicBanner;
+      } else if (val === 4) {
+        return 'https://oss.dayaedu.com/klx/1699439591804banner.png';
+      } else if (val === 5) {
+        return 'https://oss.dayaedu.com/klx/1699439359542banner.png';
+      } else {
+        return aiBanner;
+      }
+    };
+
     const state = reactive({
-      activeTab: 1,
-      banner: aiBanner,
+      activeTab: route.query.tab ? Number(route.query.tab) : 1,
+      banner: changeBanner(route.query.tab ? Number(route.query.tab) : 1),
       headerHeight: 0
     });
+
     // const headerRef = ref<HTMLElement | null>(null);
     // const tabRef = ref<HTMLElement | null>(null);
     // const { x, y } = useWindowScroll();
@@ -77,20 +96,7 @@ export default defineComponent({
           // sticky
           // swipeable
           onUpdate:active={(val: number) => {
-            if (val === 1) {
-              state.banner = aiBanner;
-            } else if (val === 2) {
-              state.banner =
-                'https://oss.dayaedu.com/klx/1699519482956single1.png';
-            } else if (val === 3) {
-              state.banner = musicBanner;
-            } else if (val === 4) {
-              state.banner =
-                'https://oss.dayaedu.com/klx/1699439591804banner.png';
-            } else if (val === 5) {
-              state.banner =
-                'https://oss.dayaedu.com/klx/1699439359542banner.png';
-            }
+            state.banner = changeBanner(val);
           }}>
           <Tab title={'小酷Ai'} name={1}>
             <CoAi />

src/views/home/music-room/index.module.less

@@ -78,4 +78,47 @@
     padding-top: 8px;
     padding-bottom: 12px;
   }
+}
+
+.section5 {
+  background: url('../images/music-room/download_bg.png') no-repeat bottom center;
+  background-size: cover;
+  min-height: 220px;
+  position: relative;
+  overflow: hidden;
+
+  .stitle {
+    display: block;
+    margin: 28px auto 24px;
+    width: 255px;
+    height: 81px;
+  }
+
+  .btnGroup {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn {
+    width: 192px;
+    height: 48px;
+    background: url('../images/music-room/btn-bg.png') no-repeat center center;
+    background-size: contain;
+  }
+}
+
+.wxpopup {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
 }

src/views/home/music-room/index.tsx

@@ -1,13 +1,68 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
 import img1 from '../images/music-room/img1.png';
 import img2 from '../images/music-room/img2.png';
 import img3 from '../images/music-room/img3.png';
 import img4 from '../images/music-room/img4.png';
+import downloadText from '../images/music-room/download_text.png';
+import request from '@/helpers/request';
+import { browser } from '@/helpers/utils';
+import { showToast } from 'vant';
+import wxBg from '@common/assets/wx_bg.png';
 
 export default defineComponent({
   name: 'music-room',
   setup() {
+    const wxStatus = ref(false);
+    const studentAndroidUrl = ref('');
+    const teacherAndroidUrl = ref('');
+
+    onMounted(async () => {
+      try {
+        const studentRes = await request.get(
+          'https://kt.colexiu.com/edu-app/open/appVersionInfo/queryLatestByPlatform',
+          {
+            params: {
+              platform: 'android-kt',
+              status: 'history'
+            }
+          }
+        );
+        studentAndroidUrl.value = studentRes.data?.downloadUrl;
+      } catch (e) {
+        console.log(e);
+      }
+    });
+
+    // 下载
+    const onDownload = () => {
+      if (browser().weixin || navigator.userAgent.indexOf('DingTalk') > -1) {
+        wxStatus.value = true;
+        return;
+      }
+
+      let urlIos = '';
+      let urlAndroid = '';
+      if (location.origin.indexOf('m.colexiu.com') > -1) {
+        urlIos =
+          'https://apps.apple.com/us/app/%E9%9F%B3%E4%B9%90%E6%95%B0%E5%AD%97%E8%AF%BE%E5%A0%82/id6452725878';
+        urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
+      } else {
+        urlIos = 'https://www.pgyer.com/dzRRNN';
+        urlAndroid = studentAndroidUrl.value; // 'https://www.pgyer.com/N2U3'
+      }
+
+      if (
+        browser().ios ||
+        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
+      ) {
+        window.location.href = urlIos;
+      } else if (/(Android)/i.test(navigator.userAgent)) {
+        window.location.href = urlAndroid;
+      } else {
+        showToast('请用手机或移动设备打开');
+      }
+    };
     return () => (
       <div class={styles.musicRoom}>
         <div class={styles.section1}>
@@ -53,6 +108,22 @@ export default defineComponent({
 
           <img src={img4} class={'w100'} />
         </div>
+        <div class={[styles.section5]}>
+          <img src={downloadText} class={styles.stitle} />
+          <div class={styles.btnGroup}>
+            <div class={[styles.btn]} onClick={() => onDownload()}></div>
+          </div>
+        </div>
+
+        {wxStatus.value && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              wxStatus.value = false;
+            }}>
+            <img src={wxBg} alt="" />
+          </div>
+        )}
       </div>
     );
   }

src/views/music-classroom/index.tsx

@@ -77,7 +77,8 @@ export default defineComponent({
             style={{ display: activeTab.value === 'room' ? 'block' : 'none' }}>
             <div class={[styles.title]}>
               <span>
-                <span class={styles.blue}>数字化课堂</span>建设解决方案
+                <span class={styles.blue}>解决</span>
+                音乐课堂数字化问题
               </span>
             </div>
 

vite.config.ts

@@ -14,7 +14,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://dev.colexiu.com';
+const proxyUrl = 'https://test.colexiu.com';
 export default defineConfig({
   base: './',
   plugins: [
@@ -78,7 +78,7 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0',
-    port: 9005,
+    port: 9010,
     strictPort: true,
     cors: true,
     https: false,