fix

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

@@ -288,6 +288,7 @@
   overflow: hidden;
   border: none;
   width: 55%;
+  border-radius: 18px;
 }
 
 .right-musicName {
@@ -302,6 +303,12 @@
 .staff {
   width: 100%;
 }
+.rightBox{
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  overflow: hidden;
+}
 
 .rightBtns {
   position: absolute;

src/views/co-ai/index.tsx

@@ -34,7 +34,7 @@ import html2canvas from 'html2canvas';
 import { api_musicSheetCategoriesPage, api_musicSheetPage } from './api';
 import { state } from '@/state';
 import MEmpty from '@/components/m-empty';
-import Coaiguide from '@/custom-plugins/guide-page/coai-guide'
+import Coaiguide from '@/custom-plugins/guide-page/coai-guide';
 import { usePageVisibility } from '@vant/use';
 import TheVip from '@/components/the-vip';
 import request from '@/helpers/request';
@@ -79,7 +79,7 @@ export default defineComponent({
       vipMember: state.user.data?.vipMember
     });
     const downRef = ref();
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     // 返回
     const goback = () => {
       postMessage({ api: 'goBack' });
@@ -117,6 +117,7 @@ export default defineComponent({
         })
           .then(async canvas => {
             var dataURL = canvas.toDataURL('image/png', 1); //可选取多种模式
+            // console.log('🚀 ~ dataURL:', dataURL);
             setTimeout(() => {
               showToast('保存成功');
             }, 500);
@@ -167,7 +168,7 @@ export default defineComponent({
           data.musics = [...data.musics, ...res.data.rows];
           data.finshed = !res.data.next;
         }
-        showGuide.value = true
+        showGuide.value = true;
       } catch (error) {
         console.log('🚀 ~ error:', error);
       }
@@ -218,16 +219,15 @@ export default defineComponent({
         if (res?.code === 200) {
           data.vipMember = res.data.vipMember;
         }
-      }
+      };
       listenerMessage('webViewOnResume', () => {
-        console.log('页面显示')
-        getUserInfo()
+        console.log('页面显示');
+        getUserInfo();
         data.typeIndex = 0;
         data.musicIndex = 0;
         handleReset();
       });
       setSearchBox();
-      
     });
 
     return () => (
@@ -246,7 +246,7 @@ export default defineComponent({
                     class={[
                       styles.type,
                       musicForms.musicSheetCategoriesId === item.id &&
-                      styles.typeActive
+                        styles.typeActive
                     ]}
                     onClick={() => {
                       musicForms.musicSheetCategoriesId = item.id;
@@ -270,14 +270,16 @@ export default defineComponent({
               <div class={styles.centerSearch}>
                 <div id="coai-0">
                   <MSearch
-
-                    class={["searchNotice", data.searchNoticeShow ? styles.searchNoticeShow : '']}
+                    class={[
+                      'searchNotice',
+                      data.searchNoticeShow ? styles.searchNoticeShow : ''
+                    ]}
                     shape="round"
                     background="transparent"
                     clearable={false}
                     placeholder="请输入关键字"
                     onFocus={() => (data.searchNoticeShow = false)}
-                    onBlur={(val) => {
+                    onBlur={val => {
                       musicForms.keyword = val;
                       requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
@@ -290,7 +292,8 @@ export default defineComponent({
                       handleReset();
                     }}
                   />
-                </div></div>
+                </div>
+              </div>
               <div class={styles.musicContent}>
                 {data.musics.map((item: any, index: number) => {
                   return (
@@ -343,44 +346,47 @@ export default defineComponent({
             </div>
           </div>
           <div class={[styles.opacityBg, styles.right]}>
-            <div ref={downRef}>
-              <div class={styles['right-musicName']}>
-                {data.musics[data.musicIndex]?.musicSheetName}
+            <div class={styles.rightBox}>
+              <div ref={downRef}>
+                <div class={styles['right-musicName']}>
+                  {data.musics[data.musicIndex]?.musicSheetName}
+                </div>
+                {data.isShowJianpu ? (
+                  <>
+                    <TransitionGroup name="van-fade">
+                      {data.musics[data.musicIndex]?.musicSvg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item + '?v=' + Date.now()}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </TransitionGroup>
+                  </>
+                ) : (
+                  <>
+                    <TransitionGroup name="van-fade">
+                      {data.musics[data.musicIndex]?.musicImg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item + '?v=' + Date.now()}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </TransitionGroup>
+                  </>
+                )}
               </div>
-              {data.isShowJianpu ? (
-                <>
-                  <TransitionGroup name="van-fade">
-                    {data.musics[data.musicIndex]?.musicSvg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                          />
-                        );
-                      })}
-                  </TransitionGroup>
-                </>
-              ) : (
-                <>
-                  <TransitionGroup name="van-fade">
-                    {data.musics[data.musicIndex]?.musicImg
-                      ?.split(',')
-                      .map((item: any, index: number) => {
-                        return (
-                          <img
-                            class={styles.staff}
-                            src={item + '?v=' + Date.now()}
-                            key={item}
-                            crossorigin="anonymous"
-                          />
-                        );
-                      })}
-                  </TransitionGroup>
-                </>
-              )}
             </div>
 
             <div class={styles.rightBtns}>
@@ -393,9 +399,6 @@ export default defineComponent({
               <div class={styles.rightBtnsRight} id="coai-3">
                 <img src={icons.icon_start} onClick={() => handleGoto()} />
               </div>
-
-
-
             </div>
           </div>
         </div>
@@ -409,7 +412,7 @@ export default defineComponent({
             />
           </div>
         )}
-        { showGuide.value&& <Coaiguide ></Coaiguide>}
+        {showGuide.value && <Coaiguide></Coaiguide>}
 
         <Popup
           class="popup-custom van-scale"
@@ -423,7 +426,7 @@ export default defineComponent({
                   api: 'openWebView',
                   content: {
                     url: `${location.origin}${location.pathname}#/member-center`,
-                    orientation: 1,
+                    orientation: 1
                   }
                 });
               }