Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/components/m-empty/index.tsx

@@ -5,6 +5,7 @@ import iconEmpty from './images/empty.png';
 import iconNetwork from './images/network.png';
 import icon404 from './images/404.png';
 import icon_empty from './images/icon_empty.png';
+import icon_empty2 from './images/icon_empty2.png';
 import icon_list_emtry from './images/icon_list_emtry.png';
 
 export default defineComponent({
@@ -16,7 +17,7 @@ export default defineComponent({
     },
     image: {
       type: String as PropType<
-        'empty' | 'network' | '404' | 'icon_empty' | 'list'
+        'empty' | 'network' | '404' | 'icon_empty' | 'list' | "empty2"
       >,
       default: 'icon_empty'
     },
@@ -42,6 +43,8 @@ export default defineComponent({
         forms.image = icon404;
       } else if (props.image === 'list') {
         forms.image = icon_list_emtry;
+      } else if( props.image === "empty2"){
+        forms.image = icon_empty2;
       }
     });
     return () => (

src/views/creation/edit/index.module.less

@@ -152,6 +152,11 @@
       border-radius: 0 0 8px 8px;
       pointer-events: none;
     }
+    :global{
+      .van-uploader .van-image{
+        border-radius: 8px !important;
+      }
+    }
   }
 
   .uploadImg {

src/views/creation/index-share.tsx

@@ -4,7 +4,8 @@ import {
   onUnmounted,
   reactive,
   ref,
-  watch
+  watch,
+  nextTick
 } from 'vue';
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
@@ -24,7 +25,7 @@ import videoLabel from './share-model/images/videoLabel.png';
 import musicBg from './share-model/images/music-bg.png';
 import playImg from './images/play.png';
 import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
   api_openUserMusicDetail,
   api_openUserMusicPage,
@@ -32,7 +33,6 @@ import {
   api_verification
 } from './api';
 import MEmpty from '@/components/m-empty';
-import { nextTick } from 'process';
 import MVideo from '@/components/m-video';
 import LoginModel from './login-model';
 import { removeAuth } from '../student-register/layout/utils';
@@ -48,8 +48,11 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
+import audioBga1 from "./images/leftCloud.json";
+import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import audioVisualDraw from "./audioVisualDraw"
+import playProgressData from "./playCreation/playProgress"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -57,7 +60,10 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
+    const creationHeight = ref(0)
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -158,6 +164,8 @@ export default defineComponent({
     };
 
     const onDetail = (item: any) => {
+      playProgressData.playProgress = 0
+      playProgressData.playState = false
       router.push({
         path: '/shareCreation',
         query: {
@@ -176,6 +184,8 @@ export default defineComponent({
       // 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
       player.on('loadedmetadata', () => {
         plyrState.loaded = true
+        player.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
       });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
@@ -219,10 +229,14 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         player.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
@@ -234,10 +248,13 @@ export default defineComponent({
     }
     function handlerLandscapeScreen(event:any){
       event.stopPropagation()
+      playProgressData.playState = !!state._plrl?.playing
+      playProgressData.playProgress = state._plrl?.currentTime || 0
       router.push({
         path:"/playCreation",
         query:{
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
+          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
           musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
@@ -309,6 +326,7 @@ export default defineComponent({
     };
     // 滚动事件
     const cleanScrollEvent = useEventListener('scroll', () => {
+      creationHeight.value = window.innerHeight
       const height =
         window.scrollY ||
         document.documentElement.scrollTop
@@ -333,8 +351,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -430,6 +448,13 @@ export default defineComponent({
       staffState.height = "initial"
       __init();
     });
+    onBeforeRouteLeave((to, from, next)=>{
+      if(to.path !== "/playCreation"){
+        playProgressData.playProgress = 0
+        playProgressData.playState = false
+      }
+      next()
+    })
     return () => (
       <div
         style={
@@ -442,7 +467,7 @@ export default defineComponent({
           browser().isTablet ? styles.creationTablet : '',
           isScreenScroll.value && styles.isShareScreenScroll
         ]}>
-        <div class={styles.creationBg}></div>
+        <div style={ creationHeight.value ? {"--creationHeight":creationHeight.value + "px"} : {}} class={styles.creationBg}></div>
         <MSticky position="top"
           onBarHeight={(height: any) => {
             console.log(height, 'height', height)
@@ -457,7 +482,7 @@ export default defineComponent({
         {
           state.isEmpty ?
           <div class={styles.isEmpty}>
-            <MEmpty description="作品已删除～" />
+            <MEmpty image={"empty2"} description="作品已删除～" />
           </div> :
           <>
             <div class={styles.singerBox}>
@@ -478,6 +503,8 @@ export default defineComponent({
                       <div class={styles.audioBox}>
                         <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
                         <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                         <audio
                           crossorigin="anonymous"
                           id="audioMediaSrc"
@@ -494,7 +521,7 @@ export default defineComponent({
                         id="videoMediaSrc"
                         class={styles.videoBox}
                         src={state.musicDetail?.videoUrl}
-                        data-poster={videobg}
+                        data-poster={ state.musicDetail?.videoImg || videobg}
                         preload="metadata"
                         playsinline
                       />
@@ -611,7 +638,7 @@ export default defineComponent({
                   ))}
                 </List>
               ) : (
-                <MEmpty description="暂无数据" />
+                <MEmpty image={"empty2"} description="暂无作品" />
               )}
             </div>
             {

src/views/creation/index.module.less

@@ -2,7 +2,7 @@
   position: fixed;
   z-index: -1;
   width: 100vw;
-  height: 100vh;
+  height: var(--creationHeight, 100vh);
   top: 0;
   left: 0;
   background: url("./images/bg.png") no-repeat;
@@ -38,9 +38,10 @@
       .plyr {
           width: 100%;
           height: 100%;
+          z-index: initial;
           .plyr__controls{
               background: initial;
-              padding: 0 12px;
+              padding: 0 12px 2px;
               opacity: 1 !important;
               transform: translateY(0) !important;
               pointer-events: initial !important;
@@ -53,9 +54,10 @@
                       height: 2px;
                   }
                   input[type="range"]::-webkit-slider-thumb {
-                      width: 8px;
-                      height: 8px;
-                      margin-top: -3px;
+                      width: 6px;
+                      height: 6px;
+                      margin-top: -2px;
+                      box-shadow: initial;
                   }
                   .plyr__progress__buffer{
                       height: 2px;
@@ -77,12 +79,26 @@
       background: url("./images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
-      .audioBga{
+      .audioBga {
         position: absolute;
         left: 0;
-        bottom: 0;
+        top: 0;
         width: 100%;
-        height: 100%;
+        height: 82%;
+      }
+
+      .audioBga1 {
+          position: absolute;
+          left: 0;
+          top: 16px;
+          width: 94px;
+      }
+
+      .audioBga2 {
+          width: 192px;
+          position: absolute;
+          right: -24px;
+          top: 0;
       }
       :global {
           .plyr {
@@ -90,6 +106,7 @@
               height: initial;
               left: 0;
               bottom: 0;
+              z-index: 2;
           }
       }
       .audioVisualizer{
@@ -155,10 +172,13 @@
   }
   .staffBox{
     width: 100%;
-    height: var(--staffBoxHeight);
+    height: calc(var(--staffBoxHeight) + 12px);
     position: absolute;
-    bottom: 10px;
+    bottom: 0;
+    padding-bottom: 12px;
     visibility: hidden;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+    z-index: 1;
     &.staffBoxShow{
       visibility: initial;
     }
@@ -515,7 +535,7 @@
       z-index: 1;
       width: 100%;
       height: 100%;
-      border-radius: 6px;
+      border-radius: 8px;
     }
     .imgLabel{
       position: absolute;
@@ -540,6 +560,7 @@
       margin-top: 6px;
       .likeNum{
         display: flex;
+        align-items: center;
         border-radius: 3px;
         background-color: rgba(255,255,255,.22);
         padding: 1px 2px 1px 1px;
@@ -551,7 +572,7 @@
           font-weight: 400;
           font-size: 10px;
           color: #FFFFFF;
-          line-height: 14px;
+          line-height: 1;
           margin-left: 2px;
         }
       }

src/views/creation/index.tsx

@@ -38,7 +38,7 @@ import iconPlay from './images/icon-play.png';
 import iconPause from './images/icon-pause.png';
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
 import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
   api_userMusicDetail,
   api_userMusicRemove,
@@ -53,7 +53,10 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
+import audioBga1 from "./images/leftCloud.json";
+import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
+import playProgressData from "./playCreation/playProgress"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -62,6 +65,8 @@ export default defineComponent({
     const router = useRouter();
     const isScreenScroll = ref(false)
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const state = reactive({
       id: route.query.id,
       deleteStatus: false,
@@ -195,13 +200,21 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         player.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
+      player.on('loadedmetadata', () => {
+        player.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
+      });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
       })
@@ -344,10 +357,13 @@ export default defineComponent({
     }
     function handlerLandscapeScreen(event:any){
       event.stopPropagation()
+      playProgressData.playState = !!state._plrl?.playing
+      playProgressData.playProgress = state._plrl?.currentTime || 0
       router.push({
         path:"/playCreation",
         query:{
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
+          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
           musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
@@ -360,7 +376,7 @@ export default defineComponent({
     // 初始化五线谱
     function initStaff(){
       const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -485,6 +501,13 @@ export default defineComponent({
       setStatusBarTextColor(false)
       cleanScrollEvent()
     });
+    onBeforeRouteLeave((to, from, next)=>{
+      if(to.path !== "/playCreation"){
+        playProgressData.playProgress = 0
+        playProgressData.playState = false
+      }
+      next()
+    })
     return () => (
       <div
         style={
@@ -522,6 +545,8 @@ export default defineComponent({
               <div class={styles.audioBox}>
                 <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
                 <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                 <audio
                   crossorigin="anonymous"
                   id="audioMediaSrc"
@@ -538,7 +563,7 @@ export default defineComponent({
                 id="videoMediaSrc"
                 class={styles.videoBox}
                 src={state.musicDetail?.videoUrl}
-                data-poster={videobg}
+                data-poster={ state.musicDetail?.videoImg || videobg}
                 preload="metadata"
                 playsinline
               />
@@ -637,7 +662,7 @@ export default defineComponent({
               ))}
             </List>
           ) : (
-            <MEmpty class={styles.mEmpty} description="暂无数据" />
+            <MEmpty class={styles.mEmpty} image={"empty2"} description="暂无点赞记录" />
           )}
         </div>
         {

src/views/creation/playCreation/index.module.less

@@ -27,9 +27,13 @@
       .plyr {
           width: 100%;
           height: 100%;
+          z-index: initial;
           .plyr__controls{
               background: initial;
               padding: 0 20px 20px;
+              opacity: 1 !important;
+              transform: translateY(0) !important;
+              pointer-events: initial !important;
               .plyr__controls__item.plyr__control{
                   padding: 0;
                   width: 18px;
@@ -69,6 +73,7 @@
                       width: 12px;
                       height: 12px;
                       margin-top: -4px;
+                      box-shadow: initial;
                   }
                   .plyr__progress__buffer{
                       height: 4px;
@@ -103,17 +108,34 @@
       background: url("../images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
-      .audioBga{
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-      }
+      .audioBga {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 82%;
+    }
+
+    .audioBga1 {
+        position: absolute;
+        left: 0;
+        top: 60px;
+        width: 146px;
+    }
+
+    .audioBga2 {
+        width: 268px;
+        position: absolute;
+        right: -24px;
+        top: 0;
+    }
       :global {
           .plyr {
               position: absolute;
               height: initial;
               left: 0;
               bottom: 0;
+              z-index: 2;
           }
       }
       .audioVisualizer{
@@ -170,10 +192,13 @@
   }
   .staffBox{
     width: 100%;
-    height: var(--staffBoxHeight);
+    height: calc(var(--staffBoxHeight) + 44px);
     position: absolute;
-    bottom: 44px;
+    bottom: 0;
+    padding-bottom: 44px;
     visibility: hidden;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+    z-index: 1;
     &.staffBoxShow{
       visibility: initial;
     }

src/views/creation/playCreation/index.tsx

@@ -6,12 +6,15 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "../images/audioBga.json";
+import audioBga1 from "../images/leftCloud.json";
+import audioBga2 from "../images/rightCloud.json";
 import videobg from "../images/videobg.png";
 import backImg from "../images/back.png";
 import {
   postMessage
 } from '@/helpers/native-message';
 import { usePageVisibility } from '@vant/use';
+import playProgressData from "./playProgress"
 
 export default defineComponent({
   name: 'playCreation',
@@ -23,8 +26,11 @@ export default defineComponent({
     const musicSheetName = decodeURIComponent(route.query.musicSheetName as string || '');
     const username = decodeURIComponent(route.query.username as string || '');
     const musicSheetId = decodeURIComponent(route.query.musicSheetId as string || '');
+    const videoBgUrl = decodeURIComponent(route.query.videoBgUrl as string || '');
     const playType = resourceUrl.lastIndexOf('mp4') !== -1 ? 'Video' : 'Audio'
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const landscapeScreen = ref(false)
     let _plrl:any
     const playIngShow = ref(true)
@@ -57,6 +63,8 @@ export default defineComponent({
       // 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
       _plrl.on('loadedmetadata', () => {
         loaded.value = true
+        _plrl.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
       });
       _plrl.on('play', () => {
         playIngShow.value = false
@@ -232,10 +240,12 @@ export default defineComponent({
     }
     function handlerBack(event:MouseEvent){
       event.stopPropagation()
+      playProgressData.playState = !!_plrl?.playing
+      playProgressData.playProgress = _plrl?.currentTime || 0
       router.back()
     }
     //点击改变播放状态
-    function handlerClickPlay(event:MouseEvent){
+    function handlerClickPlay(event?:MouseEvent){
       //由于ios低版本必须在用户操作之后才能初始化 createMediaElementSource 所以必须在用户操作之后初始化
       if(!isInitAudioVisualDraw && playType === "Audio"){
         isInitAudioVisualDraw = true
@@ -245,16 +255,20 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         _plrl.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         _plrl.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
       // 原生 播放暂停按钮 点击的时候 不触发
       // @ts-ignore
-      if(event.target?.matches('button.plyr__control')){
+      if(event?.target?.matches('button.plyr__control')){
         return
       }
       if (_plrl.playing) {
@@ -297,7 +311,7 @@ export default defineComponent({
     // 初始化五线谱
     function initStaff(){
       const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -395,7 +409,7 @@ export default defineComponent({
         <img class={styles.backImg} src={backImg} onClick={handlerBack} />
         <div class={styles.musicDetail}>
           <div class={styles.musicSheetName}>{musicSheetName}</div>
-          <div class={styles.username}>{username}</div>
+          <div class={styles.username}>演奏：{username}</div>
         </div>
       </div>
       {
@@ -403,6 +417,8 @@ export default defineComponent({
           <div class={styles.audioBox}>
             <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
             <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
             <audio
               crossorigin="anonymous"
               id="audioMediaSrc"
@@ -417,7 +433,7 @@ export default defineComponent({
             id="videoMediaSrc"
             class={styles.videoBox}
             src={resourceUrl}
-            data-poster={videobg}
+            data-poster={ videoBgUrl || videobg}
             preload="metadata"
             playsinline
           />

src/views/creation/playCreation/playProgress.ts

@@ -0,0 +1,6 @@
+
+const playProgressData = {
+  playState: false,
+  playProgress: 0
+}
+export default playProgressData

src/views/creation/share-model/index.module.less

@@ -51,7 +51,7 @@
     width: 56px;
     height: 56px;
     object-fit: cover;
-    border-radius: 6px;
+    border-radius: 8px;
   }
 
   .uploadImg {

src/views/creation/share-model/index.tsx

@@ -255,7 +255,7 @@ export default defineComponent({
             onClick={() => emit('close')}
           />
           <div class={styles.share__header}>海报已生成！快来分享吧！</div>
-          <Grid columnNum={5} border={false} class={styles.gridSection}>
+          <Grid columnNum={4} border={false} class={styles.gridSection}>
             <GridItem
               icon={iconDownload}
               text="保存本地"

src/views/download/index.module.less

@@ -3,7 +3,7 @@
   background: url('./images/download_bg.png') no-repeat top center;
   background-size: cover;
   min-height: 100vh;
-  padding: 0 15px 0 23px;
+  padding: 6px 15px 0 23px;
   text-align: center;
 
   :global {
@@ -45,4 +45,4 @@
 .downImg {
   // width: 275px;
   padding-top: 25px;
-}
+}