更新打包

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

@@ -10,6 +10,7 @@
 
   .friendLink {
     display: flex;
+    justify-content: space-between;
   }
 
   .link {
@@ -39,4 +40,10 @@
     padding: 16px 0 calc(20px);
     text-align: center;
   }
+
+  .logoUrl {
+    margin-right: 24px;
+    width: 60px;
+    height: 60px;
+  }
 }

src/components/m-footer/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import styles from './index.module.less';
 import logoBottom from '@common/assets/logo-bottom.png';
+import qrcode from '@common/assets/qrcode.png';
 
 export default defineComponent({
   name: 'm-footer',
@@ -18,7 +19,9 @@ export default defineComponent({
               中国音协管乐学会低音铜管
             </p>
           </div>
-          <div class={styles.logoUrl}></div>
+          <div class={styles.logoUrl}>
+            <img src={qrcode} class="w100" />
+          </div>
         </div>
 
         <div class={styles.copyright}>

src/components/m-header/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
 import logoLarge from '@common/assets/logo-large.png';
 import { Cell, Popup } from 'vant';
@@ -18,6 +18,16 @@ export default defineComponent({
       isActive.value = false;
       router.push(path);
     };
+
+    onMounted(() => {
+      if (
+        ['/music-classroom', '/colexiu-tenant', '/colexiu-person'].includes(
+          route.path
+        )
+      ) {
+        arrowStatus.value = true;
+      }
+    });
     return () => (
       <div class={styles.headerSection} id="headerSection">
         <div class={styles.header}>
@@ -47,9 +57,17 @@ export default defineComponent({
               title={'首页'}
               border={false}
               clickable
-              class={['/', '/home'].includes(route.path) && styles['is-active']}
+              class={
+                ['/', '/colexiu-technology'].includes(route.path) &&
+                styles['is-active']
+              }
               onClick={() => onGoDetail('/')}></Cell>
-            <Cell title={'产品'} clickable border={false}></Cell>
+            <Cell
+              title={'产品'}
+              clickable
+              border={false}
+              class={['/home'].includes(route.path) && styles['is-active']}
+              onClick={() => onGoDetail('/home')}></Cell>
             <Cell
               title={'解决方案'}
               isLink
@@ -59,12 +77,33 @@ export default defineComponent({
               onClick={() => (arrowStatus.value = !arrowStatus.value)}></Cell>
             <div
               class={[styles.subCell, arrowStatus.value && styles.arrowActive]}>
-              <Cell title={'数字化音乐课堂'} clickable border={false}></Cell>
+              <Cell
+                title={'数字化音乐课堂'}
+                clickable
+                border={false}
+                class={
+                  ['/music-classroom'].includes(route.path) &&
+                  styles['is-active']
+                }
+                onClick={() => onGoDetail('/music-classroom')}></Cell>
               <Cell
                 title={'器乐教培行业解决方案'}
                 clickable
-                border={false}></Cell>
-              <Cell title={'音乐达人展示平台'} clickable border={false}></Cell>
+                border={false}
+                class={
+                  ['/colexiu-tenant'].includes(route.path) &&
+                  styles['is-active']
+                }
+                onClick={() => onGoDetail('/colexiu-tenant')}></Cell>
+              <Cell
+                title={'音乐达人展示平台'}
+                clickable
+                border={false}
+                class={
+                  ['/colexiu-person'].includes(route.path) &&
+                  styles['is-active']
+                }
+                onClick={() => onGoDetail('/colexiu-person')}></Cell>
             </div>
             <Cell
               title={'渠道合作'}

src/components/m-img-code/index.tsx

@@ -29,9 +29,9 @@ export default defineComponent({
   data() {
     // const origin = window.location.origin;
     return {
-      isSuffix: '/api-student',
+      isSuffix: '/api-admin',
       showStatus: false,
-      identifyingCode: '/api-student/code/getImageCode?phone=' + this.phone,
+      identifyingCode: '/api-admin/code/getImageCode?phone=' + this.phone,
       code: ''
     };
   },

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

@@ -42,7 +42,7 @@
   }
 
   .btnSubmit {
-    width: 268px;
+    width: 286px;
     margin: 23px auto 0;
     height: 38px;
     font-size: 16px;
@@ -64,4 +64,40 @@
     background: linear-gradient(to right, #FF75A6, #FF3C81);
     color: #fff;
   }
+}
+
+.fieldClassroom {
+  :global {
+    .van-field {
+      border: 1px solid #DFEDF7;
+    }
+  }
+
+  .smsField .sendCms {
+    color: #1CACF1;
+  }
+
+
+  .btnSubmit {
+    background: linear-gradient(to right, #19ADFF, #1BD2FF);
+    color: #fff;
+  }
+}
+
+.fieldTechnology {
+  :global {
+    .van-field {
+      border: 1px solid #DFEDF7;
+    }
+  }
+
+  .smsField .sendCms {
+    color: #1CACF1;
+  }
+
+
+  .btnSubmit {
+    background: linear-gradient(to right, #0E88A1, #03C3B9);
+    color: #fff;
+  }
 }

src/components/the-submit/index.tsx

@@ -10,7 +10,7 @@ export default defineComponent({
   props: {
     /** 类型 */
     type: {
-      type: String as PropType<'tenant' | ''>,
+      type: String as PropType<'tenant' | 'classroom' | 'technology' | ''>,
       default: ''
     }
   },
@@ -71,7 +71,7 @@ export default defineComponent({
           return showToast('请输入验证码');
         }
 
-        await request.post('/api-student/open/cooperateTenant/save', {
+        await request.post('/api-admin/open/cooperateTenant/save', {
           data: {
             cooperateTenantName: state.cooperateTenantName,
             cooperateTenantNature: state.cooperateTenantNature,
@@ -80,6 +80,17 @@ export default defineComponent({
             code: state.code
           }
         });
+
+        setTimeout(() => {
+          showToast('信息提交成功，我们会尽快与您联系');
+
+          state.cooperateTenantName = null;
+          state.cooperateTenantNature = null;
+          state.cooperateTenantNatureTxt = null;
+          state.contacts = null;
+          state.phone = null;
+          state.code = null;
+        }, 100);
       } catch {
         //
       }
@@ -89,7 +100,9 @@ export default defineComponent({
         <div
           class={[
             styles.fieldGroup,
-            props.type === 'tenant' && styles.fieldTenant
+            props.type === 'tenant' && styles.fieldTenant,
+            props.type === 'classroom' && styles.fieldClassroom,
+            props.type === 'technology' && styles.fieldTechnology
           ]}>
           <Field
             readonly
@@ -137,7 +150,7 @@ export default defineComponent({
               button: () =>
                 state.countDownStatus ? (
                   <span class={styles.sendCms} onClick={onSendCode}>
-                    发送短信
+                    发送验证码
                   </span>
                 ) : (
                   <CountDown

src/router/index.ts

@@ -5,7 +5,7 @@ const router: Router = createRouter({
   routes: [
     {
       path: '/',
-      component: () => import('@/views/home'),
+      component: () => import('@/views/colexiu-technology'),
       meta: {
         title: '首页'
       }
@@ -43,12 +43,36 @@ const router: Router = createRouter({
       }
     },
     {
+      path: '/music-classroom',
+      name: 'music-classroom',
+      component: () => import('@/views/music-classroom'),
+      meta: {
+        title: '音乐数字课堂'
+      }
+    },
+    {
+      path: '/colexiu-technology',
+      name: 'colexiu-technology',
+      component: () => import('@/views/colexiu-technology'),
+      meta: {
+        title: '酷乐秀科技'
+      }
+    },
+    {
       path: '/about-us',
       name: 'about-us',
       component: () => import('@/views/about-us'),
       meta: {
         title: '关于我们'
       }
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      // component: () => import('@/views/colexiu-technology'),
+      redirect: '/',
+      meta: {
+        title: '首页'
+      }
     }
   ],
   scrollBehavior(to, form, savedPosition) {

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

@@ -0,0 +1,333 @@
+.banner {
+  width: 100%;
+  min-height: 381px;
+  line-height: 0;
+
+  .bannerImg {
+    width: 100%;
+    min-height: 381px;
+    object-fit: cover;
+  }
+}
+
+.title {
+  position: relative;
+  text-align: center;
+  font-size: 19px;
+  font-weight: 600;
+  color: #000000;
+  line-height: 30px;
+
+  &>span {
+    position: relative;
+    z-index: 9;
+    display: inline-block;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 50%;
+      width: 72px;
+      height: 15px;
+      transform: translate(-50%, 50%);
+      background: url('./images/title-1.png') no-repeat center;
+      background-size: contain;
+      z-index: -1;
+    }
+  }
+}
+
+.subTitle {
+  padding-top: 9px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #000000;
+  line-height: 24px;
+
+  span::before,
+  span::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    background: url('./images/title-2.png') no-repeat center;
+    background-size: contain;
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  span::after {
+    transform: rotate(180deg);
+  }
+
+}
+
+
+.tabGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 99;
+
+  span {
+    display: block;
+    width: 92px;
+    line-height: 27px;
+    background: #FFFFFF;
+    border-radius: 15px;
+    border: 2px solid #D7F8EF;
+    font-size: 14px;
+
+    color: #000000;
+    text-align: center;
+    margin: 0 5px;
+
+    &.active {
+      font-weight: 500;
+      color: #FFFFFF;
+      background: #07B1B2 linear-gradient(124deg, #0E86A0 0%, #03C5BA 100%);
+
+    }
+  }
+}
+
+.content {
+  padding: 22px 24px;
+  font-size: 13px;
+  color: #50616A;
+  line-height: 24px;
+}
+
+.green {
+  color: #0FC1C5;
+}
+
+.section1 {
+  background-color: #fff;
+  padding: 30px 0;
+
+  :global {
+    .van-swipe {
+      margin: 30px 24px 0;
+    }
+
+    .van-swipe__track {
+      margin-bottom: 35px;
+
+    }
+
+    .van-swipe__indicators {
+      bottom: 0;
+
+      .van-swipe__indicator {
+        background: #C6E2E6;
+      }
+
+      .van-swipe__indicator--active {
+        width: 12px;
+        height: 5px;
+        background: #0088C5 linear-gradient(124deg, #008FAD 0%, #00AEA5 100%);
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .imgGroup {
+    line-height: 0;
+    font-size: 0;
+
+    img {
+      width: 102px;
+      height: 154px;
+      margin-right: 10px;
+
+      &:nth-child(3) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.section2 {
+  padding: 25px 0 44px;
+  background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 21%, #FFFFFF 88%, #DDF0F2 100%);
+
+
+  .teaching {
+    padding-top: 34px;
+
+    img {
+      padding: 0 27px;
+    }
+  }
+
+  .study {
+    padding-top: 30px;
+
+    img {
+      padding: 0 20px;
+    }
+  }
+
+  .trial {
+    padding-top: 25px;
+
+    img {
+      padding: 0 39px;
+    }
+  }
+}
+
+.section3 {
+  position: relative;
+  background-color: #fff;
+  padding: 32px 0;
+
+
+  .tabGroup {
+    padding-top: 20px;
+
+    div {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 34px;
+      color: #000000;
+      width: 113px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.active {
+        width: 113px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 6px 0px rgba(171, 207, 224, 1);
+        border-radius: 17px;
+      }
+    }
+
+    .icon {
+      width: 20px;
+      height: 21px;
+      display: inline-block;
+      margin-right: 4px;
+    }
+
+    .icon1 {
+      background: url('./images/icon-1.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .icon2 {
+      background: url('./images/icon-2.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .icon3 {
+      background: url('./images/icon-3.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .tabBg {
+    background: url('./images/img2-bg.png') no-repeat center;
+    background-size: contain;
+    width: 327px;
+    height: 159px;
+    margin: 20px auto 0;
+    position: relative;
+    z-index: 9;
+  }
+
+  &::before {
+    content: '';
+    width: 62px;
+    height: 97px;
+    background: #E4F7FF;
+    filter: blur(42px);
+    position: absolute;
+    left: 0;
+    top: 107px;
+  }
+
+  &::after {
+    content: '';
+    width: 116px;
+    height: 133px;
+    background: #F0FFFC;
+    filter: blur(42px);
+    position: absolute;
+    right: 0;
+    top: 156px;
+  }
+}
+
+.section4 {
+  padding: 19px 0 26px;
+  background: linear-gradient(180deg, #EDFDFF 0%, #FFFFFF 21%, #FFFFFF 88%, #DDF0F2 100%);
+
+  .tabGroup {
+    padding: 20px 0 25px;
+  }
+
+  img {
+    padding: 0 24px;
+  }
+
+  .live img {
+    padding: 0 20px;
+  }
+}
+
+.section5 {
+  background-color: #fff;
+  padding: 30px 0 42px;
+
+  img {
+    padding: 26px 41px 0;
+  }
+}
+
+.section6 {
+  padding: 26px 0;
+  background: linear-gradient(180deg, #CDFBF1 0%, #FFFFFF 39%, #FFFFFF 77%, #DDF0F2 100%);
+
+  img {
+    padding: 29px 22px 0 15px;
+  }
+}
+
+.section7 {
+  padding: 26px 0 17px;
+  background: #fff;
+
+  img {
+    padding: 13px 18px 0;
+  }
+}
+
+.section8 {
+  line-height: 0;
+}
+
+.section9 {
+  padding: 32px 0 23px;
+  background: url('./images/img-submit-bg.png') no-repeat top center;
+  background-size: cover;
+
+  .title9 {
+    font-size: 19px;
+    font-weight: 600;
+    color: #000000;
+    line-height: 32px;
+    text-align: center;
+  }
+
+  .content {
+    font-size: 12px;
+    color: #50616A;
+    text-align: center;
+    padding: 10px 0 22px;
+  }
+}

src/views/colexiu-technology/index.tsx

@@ -0,0 +1,261 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import MFooter from '@/components/m-footer';
+import MHeader from '@/components/m-header';
+import TheSubmit from '@/components/the-submit';
+import { Swipe, SwipeItem } from 'vant';
+import banner from './images/banner.png';
+import img11 from './images/img1-1.png';
+import img12 from './images/img1-2.png';
+import img13 from './images/img1-3.png';
+import img1 from './images/img3-1.png';
+import img2 from './images/img3-2.png';
+import img4 from './images/img4.png';
+import img5 from './images/img5.png';
+import img6 from './images/img6.png';
+import img7 from './images/img7.png';
+import i1 from './images/i1.png';
+import i2 from './images/i2.png';
+import i3 from './images/i3.png';
+import i4 from './images/i4.png';
+import i5 from './images/i5.png';
+import i6 from './images/i6.png';
+import i7 from './images/i7.png';
+import i8 from './images/i8.png';
+import i9 from './images/i9.png';
+import i10 from './images/i10.png';
+import i11 from './images/i11.png';
+import i12 from './images/i12.png';
+import i13 from './images/i13.png';
+
+export default defineComponent({
+  name: 'colexiu-technology',
+  setup() {
+    const activeTab = ref<'trial' | 'teaching' | 'study'>('teaching');
+    const productTab = ref<'practice' | 'follow' | 'evaluating'>('practice');
+    const classTab = ref<'network' | 'live'>('network');
+    return () => (
+      <div class={styles.technology}>
+        <MHeader />
+
+        <div class={styles.banner}>
+          <img class={styles.bannerImg} src={banner} />
+        </div>
+
+        <div class={styles.section1}>
+          <div class={[styles.title]}>
+            <span>多种器乐音频处理</span>
+          </div>
+
+          <Swipe loop={false}>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img src={i1} class="w100" />
+                <img src={i2} class="w100" />
+                <img src={i3} class="w100" />
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img src={i4} class="w100" />
+                <img src={i5} class="w100" />
+                <img src={i6} class="w100" />
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img src={i7} class="w100" />
+                <img src={i8} class="w100" />
+                <img src={i9} class="w100" />
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img src={i10} class="w100" />
+                <img src={i11} class="w100" />
+                <img src={i12} class="w100" />
+              </div>
+            </SwipeItem>
+            <SwipeItem>
+              <div class={styles.imgGroup}>
+                <img src={i13} class="w100" />
+              </div>
+            </SwipeItem>
+          </Swipe>
+        </div>
+
+        <div class={styles.section2}>
+          <div class={[styles.title]}>
+            <span>酷乐秀数字音乐体系</span>
+          </div>
+
+          <div class={styles.subTitle}>
+            <span>教 / 学 / 练 / 演</span>
+          </div>
+
+          <div class={styles.content}>
+            在乐器学习过程中，教学、学习、练习和表演四个环节，这四个环节是紧密相连、不可或缺的
+          </div>
+
+          <div class={styles.tabGroup}>
+            <span
+              onClick={() => (activeTab.value = 'teaching')}
+              class={[activeTab.value === 'teaching' && styles.active]}>
+              备课授课
+            </span>
+            <span
+              onClick={() => (activeTab.value = 'study')}
+              class={[activeTab.value === 'study' && styles.active]}>
+              练习自学
+            </span>
+            <span
+              onClick={() => (activeTab.value = 'trial')}
+              class={[activeTab.value === 'trial' && styles.active]}>
+              表演比赛
+            </span>
+          </div>
+
+          <div
+            class={styles.teaching}
+            style={{
+              display: activeTab.value === 'teaching' ? 'block' : 'none'
+            }}>
+            <img src={img11} class="w100" />
+          </div>
+          <div
+            class={styles.study}
+            style={{ display: activeTab.value === 'study' ? 'block' : 'none' }}>
+            <img src={img12} class="w100" />
+          </div>
+          <div
+            class={styles.trial}
+            style={{ display: activeTab.value === 'trial' ? 'block' : 'none' }}>
+            <img src={img13} class="w100" />
+          </div>
+        </div>
+
+        <div class={styles.section3}>
+          <div class={[styles.title]}>
+            <span>酷乐秀数字音乐体系</span>
+          </div>
+
+          <div class={styles.subTitle}>
+            <span>小酷Ai</span>
+          </div>
+
+          <div class={styles.tabGroup}>
+            <div
+              onClick={() => (productTab.value = 'practice')}
+              class={[productTab.value === 'practice' && styles.active]}>
+              <i class={[styles.icon, styles.icon1]}></i>
+              练习模式
+            </div>
+            <div
+              onClick={() => (productTab.value = 'follow')}
+              class={[productTab.value === 'follow' && styles.active]}>
+              <i class={[styles.icon, styles.icon2]}></i>
+              跟练模式
+            </div>
+            <div
+              onClick={() => (productTab.value = 'evaluating')}
+              class={[productTab.value === 'evaluating' && styles.active]}>
+              <i class={[styles.icon, styles.icon3]}></i>
+              评测模式
+            </div>
+          </div>
+          <div class={[styles.tabBg, styles.practice]}></div>
+
+          {/* <div
+            class={styles.practice}
+            style={{
+              display: productTab.value === 'practice' ? 'block' : 'none'
+            }}>
+            <img src={img11} class="w100" />
+          </div>
+          <div
+            class={styles.follow}
+            style={{ display: productTab.value === 'follow' ? 'block' : 'none' }}>
+            <img src={img12} class="w100" />
+          </div>
+          <div
+            class={styles.evaluating}
+            style={{ display: productTab.value === 'evaluating' ? 'block' : 'none' }}>
+            <img src={img13} class="w100" />
+          </div> */}
+        </div>
+
+        <div class={styles.section4}>
+          <div class={styles.subTitle}>
+            <span>直播教室</span>
+          </div>
+
+          <div class={styles.tabGroup}>
+            <span
+              onClick={() => (classTab.value = 'network')}
+              class={[classTab.value === 'network' && styles.active]}>
+              网络教室
+            </span>
+            <span
+              onClick={() => (classTab.value = 'live')}
+              class={[classTab.value === 'live' && styles.active]}>
+              直播授课
+            </span>
+          </div>
+
+          <div
+            class={styles.network}
+            style={{
+              display: classTab.value === 'network' ? 'block' : 'none'
+            }}>
+            <img src={img1} class="w100" />
+          </div>
+          <div
+            class={styles.live}
+            style={{ display: classTab.value === 'live' ? 'block' : 'none' }}>
+            <img src={img2} class="w100" />
+          </div>
+        </div>
+
+        <div class={styles.section5}>
+          <div class={[styles.title]}>
+            <span>数字课堂解决方案</span>
+          </div>
+
+          <img src={img4} class="w100" />
+        </div>
+
+        <div class={styles.section6}>
+          <div class={[styles.title]}>
+            <span>美育培训解决方案</span>
+          </div>
+
+          <img src={img5} class="w100" />
+        </div>
+
+        <div class={styles.section7}>
+          <div class={[styles.title]}>
+            <span>音乐学习分享平台</span>
+          </div>
+
+          <img src={img6} class="w100" />
+        </div>
+
+        <div class={styles.section8}>
+          <img src={img7} class="w100" />
+        </div>
+
+        <div class={styles.section9}>
+          <div class={[styles.title9]}>
+            <span class={styles.green}>提交</span>合作信息
+          </div>
+
+          <div class={styles.content}>我们将在提交后尽快与您取得联系</div>
+
+          <TheSubmit type="technology" />
+        </div>
+
+        <MFooter />
+      </div>
+    );
+  }
+});

src/views/cooperate-channels/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, nextTick, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import banner from './images/banner.png';
 import bannerCenter from './images/banner-center.png';
@@ -6,22 +6,94 @@ import MHeader from '@/components/m-header';
 import MFooter from '@/components/m-footer';
 import img1 from './images/img1.png';
 import img2 from './images/img2.png';
-import { Button, CountDown, Field } from 'vant';
+import { Button, CountDown, Field, Picker, Popup, showToast } from 'vant';
+import request from '@/helpers/request';
+import { checkPhone } from '@/helpers/utils';
+import MImgCode from '@/components/m-img-code';
 
 export default defineComponent({
   name: 'about-us',
   setup() {
     const countDownRef = ref();
     const state = reactive({
+      typeStatus: false,
       countDownTime: 60 * 1000,
-      countDownStatus: true
+      countDownStatus: true,
+      imgCodeStatus: false,
+      cooperateTenantName: null,
+      cooperateTenantNature: null,
+      cooperateTenantNatureTxt: null as any,
+      contacts: null,
+      phone: null as any,
+      code: null
     });
 
+    const onCodeSend = () => {
+      state.countDownStatus = false;
+      nextTick(() => {
+        countDownRef.value.start();
+      });
+    };
+
+    const onSendCode = () => {
+      // 发送验证码
+      console.log(state.phone, 'state.phone');
+      if (!checkPhone(state.phone)) {
+        return showToast('请输入正确的手机号码');
+      }
+      state.imgCodeStatus = true;
+    };
     //
     const onFinished = () => {
-      //
+      state.countDownStatus = true;
+      countDownRef.value.reset();
     };
 
+    const onSubmit = async () => {
+      try {
+        if (!state.cooperateTenantNature) {
+          return showToast('请选择机构性质');
+        }
+        if (!state.cooperateTenantName) {
+          return showToast('请填写机构名称');
+        }
+        if (!state.contacts) {
+          return showToast('请填写联系人');
+        }
+        if (!state.phone) {
+          return showToast('请输入联系电话');
+        }
+        if (!checkPhone(state.phone)) {
+          return showToast('请输入正确的手机号码');
+        }
+        if (!state.code) {
+          return showToast('请输入验证码');
+        }
+
+        await request.post('/api-admin/open/cooperateTenant/save', {
+          data: {
+            cooperateTenantName: state.cooperateTenantName,
+            cooperateTenantNature: state.cooperateTenantNature,
+            contacts: state.contacts,
+            phone: state.phone,
+            code: state.code
+          }
+        });
+
+        setTimeout(() => {
+          showToast('信息提交成功，我们会尽快与您联系');
+
+          state.cooperateTenantName = null;
+          state.cooperateTenantNature = null;
+          state.cooperateTenantNatureTxt = null;
+          state.contacts = null;
+          state.phone = null;
+          state.code = null;
+        }, 100);
+      } catch {
+        //
+      }
+    };
     return () => (
       <div class={styles.aboutUs}>
         <MHeader />
@@ -73,19 +145,24 @@ export default defineComponent({
               placeholder="机构性质"
               border={false}
               autocomplete="off"
+              modelValue={state.cooperateTenantNatureTxt}
+              onClick={() => (state.typeStatus = true)}
             />
-
             <Field
               type="text"
               border={false}
               placeholder="机构名称"
               autocomplete="off"
+              maxlength={20}
+              v-model={state.cooperateTenantName}
             />
             <Field
               type="text"
               border={false}
               placeholder="联系人"
               autocomplete="off"
+              maxlength={20}
+              v-model={state.contacts}
             />
             <Field
               type="number"
@@ -93,6 +170,7 @@ export default defineComponent({
               border={false}
               placeholder="联系电话"
               autocomplete="off"
+              v-model={state.phone}
             />
             <Field
               class={styles.smsField}
@@ -100,14 +178,17 @@ export default defineComponent({
               maxlength={6}
               border={false}
               placeholder="短信验证码"
-              autocomplete="off">
+              autocomplete="off"
+              v-model={state.code}>
               {{
                 button: () =>
                   state.countDownStatus ? (
-                    <Button size="small">发送短信</Button>
+                    <Button size="small" onClick={onSendCode}>
+                      发送短信
+                    </Button>
                   ) : (
                     <CountDown
-                      ref={(el: any) => (countDownRef.value = el)}
+                      ref={el => (countDownRef.value = el)}
                       auto-start={false}
                       time={state.countDownTime}
                       onFinish={onFinished}
@@ -119,13 +200,43 @@ export default defineComponent({
 
             <p class={styles.fieldTips}>我们将在提交后尽快与您联系</p>
 
-            <Button block round class={styles.btnSubmit}>
+            <Button block round class={styles.btnSubmit} onClick={onSubmit}>
               确认提交
             </Button>
           </div>
         </div>
 
         <MFooter />
+
+        <Popup v-model:show={state.typeStatus} position="bottom" round>
+          <Picker
+            columns={[
+              { text: '中小学学校', value: 'PRIMARY_AND_SECONDARY_SCHOOLS' },
+              { text: '教培机构', value: 'EDUCATIONAL_INSTITUTIONS' },
+              { text: '音乐达人', value: 'PLAYERS' },
+              { text: '代理商', value: 'AGENT' }
+            ]}
+            showToolbar
+            onCancel={() => (state.typeStatus = false)}
+            onConfirm={val => {
+              const selectedOptions = val.selectedOptions[0];
+              state.cooperateTenantNature = selectedOptions.value;
+              state.cooperateTenantNatureTxt = selectedOptions.text;
+              state.typeStatus = false;
+            }}
+          />
+        </Popup>
+
+        {state.imgCodeStatus ? (
+          <MImgCode
+            v-model:value={state.imgCodeStatus}
+            phone={state.phone}
+            onClose={() => {
+              state.imgCodeStatus = false;
+            }}
+            onSendCode={onCodeSend}
+          />
+        ) : null}
       </div>
     );
   }

src/views/music-classroom/index.module.less

@@ -0,0 +1,215 @@
+.banner {
+  width: 100%;
+  min-height: 381px;
+  line-height: 0;
+
+  .bannerImg {
+    width: 100%;
+    min-height: 381px;
+    object-fit: cover;
+  }
+}
+
+.title {
+  position: relative;
+  text-align: center;
+  font-size: 19px;
+  font-weight: 600;
+  color: #000000;
+  line-height: 30px;
+
+  &>span {
+    position: relative;
+    z-index: 9;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -8px;
+      right: -7px;
+      width: 111px;
+      height: 39px;
+      background: url('./images/title-1.png') no-repeat center;
+      background-size: contain;
+      z-index: -1;
+    }
+  }
+}
+
+
+.tabGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 99;
+
+  span {
+    display: block;
+    width: 106px;
+    line-height: 27px;
+    background: #FFFFFF;
+    border-radius: 15px;
+    border: 2px solid #DCF0FB;
+    font-size: 14px;
+    color: #000000;
+    text-align: center;
+    margin: 0 5px;
+
+    &.active {
+      font-weight: 500;
+      color: #FFFFFF;
+      background: linear-gradient(270deg, #1BD2FF 0%, #1AADFF 100%);
+
+    }
+  }
+}
+
+.sectionBg::before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  right: 0;
+  display: inline-block;
+  min-height: 241px;
+  background: url('./images/point-bg.png') no-repeat top center;
+  background-size: contain;
+}
+
+.content {
+  padding: 8px 22px 0 27px;
+  font-size: 13px;
+  color: #50616A;
+  line-height: 24px;
+}
+
+.blue {
+  color: #1CACF1;
+}
+
+.section1 {
+  padding: 38px 0 59px;
+  background: #fff;
+
+  .content {
+    padding-bottom: 28px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  img {
+    padding: 0 33px;
+  }
+}
+
+.section2 {
+  padding: 31px 0 47px;
+  background: linear-gradient(202deg, #F4FCFD 0%, #FAF8F8 24%, #F3FAFF 47%, #D9F0FF 100%);
+
+  img {
+    padding: 28px 20px 0;
+  }
+}
+
+.section3 {
+  position: relative;
+  padding: 30px 0 33px;
+  background: #fff;
+
+  &.sectionBg::before {
+    top: 83px;
+  }
+
+  .title {
+    padding-top: 38px;
+    padding-bottom: 22px;
+  }
+
+  img {
+    padding: 0 44px;
+  }
+
+  .content {
+    padding-top: 8px;
+  }
+
+  .instrument {
+    .title {
+      padding-bottom: 47px;
+    }
+
+    img {
+      padding: 0 11px 36px;
+    }
+  }
+
+  .service {
+    .title {
+      padding-bottom: 30px;
+    }
+
+    img {
+      padding: 0 40px 23px;
+    }
+  }
+}
+
+.section4 {
+  position: relative;
+  padding: 53px 0 31px;
+  background: linear-gradient(202deg, #FFEFEF 0%, #FAF8F8 24%, #F3FAFF 47%, #D9F0FF 100%);
+
+  &.sectionBg::before {
+    top: 43px;
+  }
+
+  img {
+    position: relative;
+    padding: 0 49px;
+  }
+
+  .cotnent {
+    position: relative;
+    padding-top: 27px;
+  }
+}
+
+.section5 {
+  padding: 73px 0 48px;
+  background: linear-gradient(202deg, #FFEFEF 0%, #FAF8F8 24%, #F3FAFF 47%, #D9F0FF 100%);
+
+  img {
+    padding: 0 20px 43px;
+  }
+}
+
+.section6 {
+  padding: 32px 0 23px;
+  background: url('./images/img-submit-bg.png') no-repeat top center;
+  background-size: cover;
+
+  .title6 {
+    font-size: 19px;
+    font-weight: 600;
+    color: #000000;
+    line-height: 32px;
+    text-align: center;
+  }
+
+  .content {
+    font-size: 12px;
+    color: #50616A;
+    text-align: center;
+    padding: 10px 0 22px;
+  }
+}
+
+.section7 {
+  padding: 23px 0 40px;
+  background-color: #fff;
+
+  img {
+    padding: 0 60px;
+  }
+}

src/views/music-classroom/index.tsx

@@ -0,0 +1,166 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import TheSubmit from '@/components/the-submit';
+import MHeader from '@/components/m-header';
+import MFooter from '@/components/m-footer';
+import banner from './images/banner.png';
+import img1 from './images/img1.png';
+import img2 from './images/img2.png';
+import img311 from './images/img3-1-1.png';
+import img312 from './images/img3-1-2.png';
+import img321 from './images/img3-2-1.png';
+import img331 from './images/img3-3-1.png';
+import img332 from './images/img3-3-2.png';
+import img4 from './images/img4.png';
+
+export default defineComponent({
+  name: 'music-classroom',
+  setup() {
+    const activeTab = ref<'room' | 'instrument' | 'service'>('room');
+    return () => (
+      <div class={styles.musicClassroom}>
+        <MHeader />
+
+        <div class={styles.banner}>
+          <img class={styles.bannerImg} src={banner} />
+        </div>
+
+        <div class={styles.section1}>
+          <div class={[styles.title]}>
+            <span>
+              <span class={styles.blue}>数字化课堂</span>建设解决方案
+            </span>
+          </div>
+
+          <div class={styles.content}>
+            构建网络化、数字化、个性化、终身化的教育体系，实现“人人皆学、处处能学、时时能学”的学习型社会目标。
+          </div>
+
+          <img src={img1} class="w100" />
+        </div>
+
+        <div class={styles.section2}>
+          <div class={[styles.title]}>
+            <span>
+              <span class={styles.blue}>变革</span>传统课堂教学方式
+            </span>
+          </div>
+
+          <img src={img2} class="w100" />
+        </div>
+
+        <div class={[styles.section3, styles.sectionBg]}>
+          <div class={styles.tabGroup}>
+            <span
+              onClick={() => (activeTab.value = 'room')}
+              class={[activeTab.value === 'room' && styles.active]}>
+              音乐数字课堂
+            </span>
+            <span
+              onClick={() => (activeTab.value = 'instrument')}
+              class={[activeTab.value === 'instrument' && styles.active]}>
+              器乐进课堂
+            </span>
+            <span
+              onClick={() => (activeTab.value = 'service')}
+              class={[activeTab.value === 'service' && styles.active]}>
+              课后延时服务
+            </span>
+          </div>
+
+          <div
+            class={styles.room}
+            style={{ display: activeTab.value === 'room' ? 'block' : 'none' }}>
+            <div class={[styles.title]}>
+              <span>
+                <span class={styles.blue}>数字化课堂</span>建设解决方案
+              </span>
+            </div>
+
+            <img src={img311} class="w100" />
+
+            <div class={styles.content}>
+              运用现代信息技术和互联网平台，为学生提供音乐教育的新型教学模式。它将传统的音乐教学与现代科技相结合，为学生创造更加生动、直观、个性化的学习体验。
+            </div>
+          </div>
+
+          <div
+            class={styles.instrument}
+            style={{
+              display: activeTab.value === 'instrument' ? 'block' : 'none'
+            }}>
+            <div class={[styles.title]}>
+              <span>
+                <span class={styles.blue}>解决</span>新课标器乐进课堂问题
+              </span>
+            </div>
+
+            <img src={img321} class="w100" />
+
+            <div class={styles.content}>
+              《义务教育音乐课程标准 （2011年版）》对我国小学音
+              乐课程提出了明确的要求。激发学生对乐器的兴趣，培养音乐欣赏能力和创作能力。使学生掌握基本的乐器演奏技巧，具备一定的乐器演奏水平。学生可以利用小酷Al进行器乐学习，提高音乐技能。实现
+              “每个孩子会一门乐器”的目标，让更多学生在音乐教育中受益。同时，也有助于提高我国整体音乐教育水平，培养更多音乐人才。
+            </div>
+          </div>
+
+          <div
+            class={styles.service}
+            style={{
+              display: activeTab.value === 'service' ? 'block' : 'none'
+            }}>
+            <div class={[styles.title]}>
+              <span>
+                <span class={styles.blue}>解决</span>课后四点半课后服务问题
+              </span>
+            </div>
+
+            <img src={img331} class="w100" />
+
+            <div class={styles.content}>
+              新增课后服务的音乐课程设置，让学生在多样化的课程中找到自己的兴趣所在。
+            </div>
+          </div>
+        </div>
+
+        <div
+          class={[styles.section4, styles.sectionBg]}
+          style={{ display: activeTab.value === 'room' ? 'block' : 'none' }}>
+          <img src={img312} class="w100" />
+
+          <div class={styles.content}>
+            音乐数字课堂拥有海量的教学资源，包括乐曲、音频、视频、图片；音乐数字课堂可以根据学生的学习进度、兴趣和能力制定个性化的教学方案，有助于提高学生的学习兴趣和成就感。音乐数字课堂可以收集学生的学习数据，对学生的学习情况进行分析，为教师提供有针对性的教学指导。
+          </div>
+        </div>
+
+        <div
+          class={[styles.section5, styles.sectionBg]}
+          style={{ display: activeTab.value === 'service' ? 'block' : 'none' }}>
+          <img src={img312} class="w100" />
+
+          <div class={styles.content}>
+            采用创新的教学手段，如线上线下相结合、实践与理论相结合等，激发学生的学习兴趣，提高教学效果。
+          </div>
+        </div>
+
+        <div class={styles.section6}>
+          <div class={[styles.title6]}>
+            <span class={styles.blue}>提交</span>合作信息
+          </div>
+
+          <div class={styles.content}>我们将在提交后尽快与您取得联系</div>
+
+          <TheSubmit type="classroom" />
+        </div>
+
+        <div class={styles.section7}>
+          <div class={[styles.title7]}></div>
+
+          <img src={img4} class={'w100'} />
+        </div>
+
+        <MFooter />
+      </div>
+    );
+  }
+});

vite.config.ts

@@ -68,7 +68,7 @@ export default defineConfig({
     cors: true,
     https: false,
     proxy: {
-      '/api-student': {
+      '/api-admin': {
         target: proxyUrl,
         changeOrigin: true
       }