fix:曲谱列表去云教练

src/views/co-ai/index.module.less

@@ -38,29 +38,43 @@
 .leftContent {
     position: relative;
     width: 55%;
-    padding-left: 100px;
+    display: flex;
+
 }
 
 .leftBg {
     position: absolute;
-    left: -2px;
-    top: -2px;
-    width: 104px;
-    height: calc(100% + 4px);
+    left: 0;
+    top: 0;
+    width: 102px;
+    height: 100%;
     background: linear-gradient(48deg, #43B2FF 0%, #159AF7 100%);
     border: 2px solid #fff;
     border-radius: 18px;
+    z-index: 1;
 }
 
-.types {
+.leftBg2 {
     position: absolute;
     left: 0;
     top: 0;
+    width: calc(100% - 12px);
+    height: 100%;
+    background: linear-gradient(134deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.34) 100%);
+    border-radius: 18px;
+    border: 2px solid #fff;
+}
+
+.types {
+    position: relative;
     width: 102px;
     height: 100%;
     padding: 4px 0;
+    overflow-x: hidden;
     overflow-y: auto;
     border-radius: 18px;
+    z-index: 1;
+    flex-shrink: 0;
 
     &::-webkit-scrollbar {
         width: 0;
@@ -120,8 +134,9 @@
 }
 
 .center {
+    flex: 1;
+    // width: calc(100% - 98px);
     position: relative;
-    padding-top: calc(var(--van-search-input-height) + 12px);
     height: 100%;
 
     :global {
@@ -129,19 +144,20 @@
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
             padding: 6px 9px;
+            width: calc(100% - 12px);
+            z-index: 1;
         }
     }
 }
 
 .musicContent {
-    width: calc(100% + 14px);
-    padding: 12px;
-    padding-right: 28px;
-    height: 100%;
+    width: 100%;
+    height: calc(100% - var(--van-search-input-height) - 12px - 2px);
+    margin-top: calc(var(--van-search-input-height) + 12px);
+    padding: 12px 24px 12px 12px;
+    overflow-x: hidden;
     overflow-y: auto;
-
     &::-webkit-scrollbar {
         width: 0;
         display: none;
@@ -162,7 +178,7 @@
     &::after {
         content: '';
         position: absolute;
-        right: -26px;
+        right: -24px;
         border: 10px solid transparent;
         border-right-color: #fff;
         opacity: 0;
@@ -256,7 +272,6 @@
     overflow: hidden;
     border: none;
     width: 45%;
-    margin-left: 12px;
 }
 
 .right-musicName {

src/views/co-ai/index.tsx

@@ -15,6 +15,7 @@ import png_1 from './image/1.png';
 import png_2 from './image/2.png';
 import png_3 from './image/3.png';
 import png_4 from './image/4.png';
+import { postMessage } from '@/helpers/native-message';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -77,13 +78,32 @@ export default defineComponent({
       /** 显示简谱 */
       isShowJianpu: false
     });
+    // 返回
+    const goback = () => {
+      postMessage({ api: 'goBack' });
+    };
+    /** 去云教练 */
+    const handleGoto = () => {
+      let src = `https://dev.kt.colexiu.com/instrument?id=43539&Authorization=bearer 529d1359-20c6-4ea2-b2ba-2694cdeda8a4`;
+      postMessage({
+        api: 'openAccompanyWebView',
+        content: {
+          url: src,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true
+        }
+      });
+    };
     return () => (
       <div class={styles.container}>
-        <div class={styles.back}>
+        <div class={styles.back} onClick={goback}>
           <img src={icon_back} />
         </div>
         <div class={styles.content}>
-          <div class={[styles.opacityBg, styles.leftContent]}>
+          <div class={[styles.leftContent]}>
+            <div class={styles.leftBg2}></div>
             <div class={styles.leftBg}></div>
             <div class={styles.types}>
               {new Array(10).fill(1).map((item, index) => {
@@ -145,7 +165,9 @@ export default defineComponent({
             </div>
           </div>
           <div class={[styles.opacityBg, styles.right]}>
-            <div class={styles['right-musicName']}>{titles[data.musicIndex].name}</div>
+            <div class={styles['right-musicName']}>
+              {titles[data.musicIndex].name}
+            </div>
             {data.isShowJianpu ? (
               <>
                 <img
@@ -184,7 +206,7 @@ export default defineComponent({
                 onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
               />
               <img src={icon_down} />
-              <img src={icon_start} />
+              <img src={icon_start} onClick={() => handleGoto()} />
             </div>
           </div>
         </div>