联系我们

src/router/routes-teacher.ts

@@ -293,7 +293,7 @@ export default [
       {
         path: '/mySheetMusic',
         component: () =>
-          import('@/teacher/my-sheetMusic/index'),
+          import('@/teacher/my-sheetMusic'),
         meta: {
           title: '我的乐谱',
         }

src/views/contactus/index.module.less

@@ -0,0 +1,51 @@
+.container {
+  padding: 16px;
+  min-height: 100vh;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+.topWrap {
+  display: flex;
+  background: linear-gradient(180deg, #ffbd8d 0%, #ff835d 100%);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  .title {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 18px;
+    padding: 15px 0 15px 15px;
+  }
+  .img{
+    max-width: 88px;
+    align-self: flex-end;
+  }
+}
+.centerWrap{
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 25px 0 25px;
+    border-radius: 8px;
+    background-color: #F6F8F9;
+    .item{
+        flex-shrink: 0;
+        img{
+            display: block;
+            width: 132px;
+        }
+    }
+    .name{
+        margin-bottom: 10px;
+        font-size: 14Px;
+        color: #666;
+    }
+    .btn{
+        padding: 14px 20px;
+    }
+}
+
+.tips{
+    padding: 20px 18px;
+    color:#999;
+    line-height: 18Px;
+    font-size: 13Px;
+}

src/views/contactus/index.tsx

@@ -1,8 +1,38 @@
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconUs from './image/iconUs.png'
+import kefu1 from './image/kefu1.png'
+import kefu2 from './image/kefu2.png'
+import { Button } from 'vant'
 
 export default defineComponent({
   name: 'contactus',
   setup(props, ctx) {
-    return () => <div>联系我们</div>
+    const users = [{name: '客服人员 1', src:kefu1}, {name: '客服人员 2', src:kefu2}]
+    const onSaveImg = (src: string) => {
+      console.log(src)
+    }
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.topWrap}>
+          <div class={styles.title}>如您在使用酷乐秀学院时有任何问题或意见，可添加以下企业微信账号与我们取得联系，我们将竭诚为您服务。</div>
+          <img class={styles.img} src={iconUs} />
+        </div>
+
+        <div class={styles.centerWrap}>
+          {users.map((n) => (
+            <div class={styles.item}>
+              <div class={styles.name}>{n.name}</div>
+              <img src={n.src} />
+              <div class={styles.btn}>
+                <Button block round type='primary' size='small' onClick={() => onSaveImg(n.src)}>保存二维码</Button>
+              </div>
+            </div>
+          ))}
+        </div>
+        <a href={kefu1} download>下载</a>
+        <div class={styles.tips}>提示：点击保存二维码后会自动下载到相册，打开企业微信扫一扫即可添加企业微信联系客服喔～</div>
+      </div>
+    )
   }
 })