作品编辑页

src/router/routes-common.ts

@@ -198,7 +198,7 @@ export default [
         path: '/creation-edit',
         component: () => import('@/views/creation/edit/index'),
         meta: {
-          title: '作品详情'
+          title: '编辑'
         }
       },
       {

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

@@ -1,3 +1,15 @@
+.editBg{
+  position: fixed;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: #F8F8F8;
+}
+.edit{
+  overflow: hidden;
+}
 .sectionVideo {
   position: relative;
   line-height: 0;
@@ -6,7 +18,7 @@
 
   .videoBg {
     width: 100%;
-    height: 160px;
+    height: 196px;
     object-fit: cover;
     border-radius: 10px;
   }
@@ -14,7 +26,7 @@
   .btnGroup {
     position: absolute;
     left: 50%;
-    bottom: -12px;
+    bottom: 10px;
     background: linear-gradient(180deg, rgba(128, 158, 200, 0.59) 0%, rgba(58, 101, 162, 0.59) 100%);
     border-radius: 15px;
     height: 30px;
@@ -48,6 +60,7 @@
         background: url('../images/icon-cropper.png') no-repeat center;
         background-size: contain;
         margin-right: 4px;
+        margin-top: -3px;
       }
     }
 
@@ -76,6 +89,7 @@
             background: url('../images/icon-image.png') no-repeat center;
             background-size: contain;
             margin-right: 4px;
+            margin-top: -2px;
           }
 
           &::after {
@@ -140,8 +154,7 @@
       left: 0;
       right: 0;
       z-index: 10;
-      background: #000000;
-      opacity: 0.37;
+      background: rgba(0,0,0,0.37);
       line-height: 20px;
       height: 20px;
       font-size: 13px;
@@ -211,4 +224,4 @@
 .btnGroup {
   margin: 32px 24px 12px;
 
-}
+}

src/views/creation/edit/index.tsx

@@ -6,7 +6,7 @@ import { Button, Field, showToast } from 'vant';
 import MUploader from '@/components/m-uploader';
 import { api_userMusicDetail, api_userMusicSave } from '../api';
 import { useRoute, useRouter } from 'vue-router';
-import videoBg from '../images/video-bg.png';
+import videoBg from '../images/videoBg.png';
 import { postMessage } from '@/helpers/native-message';
 
 export default defineComponent({
@@ -64,7 +64,6 @@ export default defineComponent({
         state.desc = data.desc;
         state.videoImg = data.videoImg;
         state.img = data.img ? [data.img] : [];
-
         if (data?.videoUrl.lastIndexOf('mp4') !== -1) {
           state.playType = 'Video';
         } else {
@@ -75,11 +74,27 @@ export default defineComponent({
       }
     });
     return () => (
-      <div>
+      <div class={styles.edit}>
         <MSticky position="top">
-          <MHeader border={false} />
+          <MHeader background={"#F1F1F1"} border={false} />
         </MSticky>
-
+        <div class={styles.editBg}></div>
+        <div class={[styles.section, styles.sectionFile]}>
+          <div class={styles.uploadImg}>
+            <MUploader
+              class={styles.muploader}
+              // native
+              cropper
+              deletable={false}
+              v-model:modelValue={state.img}
+            />
+            {/* <div class={styles.tip}>选封面</div> */}
+          </div>
+          <div class={styles.musicDetail}>
+            <p class={styles.musicName}>{state.musicDetail.musicSheetName}</p>
+            <p class={styles.username}>{state.musicDetail.username}</p>
+          </div>
+        </div>
         {state.playType === 'Video' && (
           <div class={[styles.section, styles.sectionVideo]}>
             <img src={state.videoImg || videoBg} class={styles.videoBg} />
@@ -115,30 +130,12 @@ export default defineComponent({
             v-model={state.desc}
           />
         </div>
-
-        <div class={[styles.section, styles.sectionFile]}>
-          <div class={styles.uploadImg}>
-            <MUploader
-              class={styles.muploader}
-              // native
-              cropper
-              deletable={false}
-              v-model:modelValue={state.img}
-            />
-            {/* <div class={styles.tip}>选封面</div> */}
-          </div>
-          <div class={styles.musicDetail}>
-            <p class={styles.musicName}>{state.musicDetail.musicSheetName}</p>
-            <p class={styles.username}>{state.musicDetail.username}</p>
-          </div>
-        </div>
-
         <div class={styles.btnGroup}>
           <Button
             type="primary"
             round
             block
-            color="linear-gradient(73deg, #5BECFF 0%, #259CFE 100%)"
+            color="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
             onClick={onSubmit}>
             {state.musicDetail.type === 'FORMAL' ? '保存' : '发布'}
           </Button>