修改样式

src/teacher/music/upload/index.module.less

@@ -11,6 +11,7 @@
   position: absolute;
   top: -100px;
   right: -14px;
+  z-index: 101;
   font-weight: 500;
   font-size: 12px;
   color: #FFFFFF;
@@ -29,6 +30,19 @@
   height: 31px;
 }
 
+.bridSection {
+  position: relative;
+
+  .iconBrid {
+    position: absolute;
+    right: 23px;
+    width: 131px;
+    height: 135px;
+    top: -30px;
+
+  }
+}
+
 .area {
   position: relative;
   padding: 34px 0 12px;
@@ -36,7 +50,7 @@
   border-radius: 16px;
 
   &.topArea {
-    margin-top: 100px;
+    margin-top: 70px;
   }
 
   .section-title {
@@ -66,7 +80,7 @@
       font-size: 16px;
       color: #000;
       margin-right: 0;
-      flex: 1 auto;
+      flex: initial;
     }
 
     .van-field__value {
@@ -74,6 +88,10 @@
       flex: 1 auto;
     }
 
+    .van-field__control--min-height {
+      --van-field-text-area-min-height: 80px;
+    }
+
   }
 
   .hideValue {
@@ -137,6 +155,7 @@
       }
 
       .titleTip {
+        font-weight: 400;
         font-size: 12px;
         color: #AAAAAA;
       }
@@ -224,6 +243,13 @@
   >p>span {
     color: var(--strong--color);
     font-weight: bold;
+    font-size: 16px;
+    display: inline-flex;
+    align-items: center;
+
+    span {
+      font-size: 14px;
+    }
   }
 }
 
@@ -299,8 +325,10 @@
     }
 
     .van-tag--large {
-      width: 94px;
+      width: 80px;
       height: 30px;
+      padding-left: 0;
+      padding-right: 0;
       font-size: 16px;
       text-align: center;
       display: flex;
@@ -327,14 +355,14 @@
   margin-right: 5px;
   margin-bottom: 5px;
   // margin-top: 5px;
-  background: #F2FFFC;
+  background: #F2FFFC !important;
   border-radius: 4px;
   height: 28px;
   font-size: 14px;
   color: #00B2A7 !important;
   padding-top: 0;
   padding-bottom: 0;
-  border: 1px solid #9FE2DE;
+  border: 1px solid #9FE2DE !important;
 }
 
 .file {

src/teacher/music/upload/index.tsx

@@ -23,6 +23,7 @@ import request from '@/helpers/request'
 import requestOrigin from 'umi-request'
 import UploadIcon from './images/music-icon.png'
 import btnBg from './images/btn-bg.png'
+import iconBrid from './images/icon-brid.png'
 import iconTitleUpload from './images/icon-title-upload.png'
 import iconTitleUpdate from './images/icon-title-update.png'
 import ColUpload from '@/components/col-upload'
@@ -112,6 +113,10 @@ export default defineComponent({
     }
   },
   async mounted() {
+    const isCatchTip = localStorage.getItem('isCatchTip')
+    if (!isCatchTip) {
+      this.messageTipStatus = true
+    }
     // 获取基础数据
     request
       .get('/api-teacher/sysConfig/queryByParamNameList', {
@@ -385,12 +390,12 @@ export default defineComponent({
     },
     onFormatter2(val: any) {
       const num = verifiyNumberInteger(val)
-      if (num && Number(num) > 270) {
-        return '270'
-      }
-      if (num && Number(num) < 45) {
-        return '45'
-      }
+      // if (num && Number(num) > 270) {
+      //   return '270'
+      // }
+      // if (num && Number(num) < 45) {
+      //   return '45'
+      // }
       return num
     },
     fileName(name = '') {
@@ -485,6 +490,9 @@ export default defineComponent({
           border={false}
         />
 
+        <div class={styles.bridSection}>
+          <img src={iconBrid} class={styles.iconBrid} />
+        </div>
         <CellGroup class={[styles.area, styles.topArea]} border={false}>
           <div
             class={styles.uploadMessage}
@@ -503,7 +511,7 @@ export default defineComponent({
           />
 
           <div class={styles['section-title']}></div>
-          <Field required label="播放类型" center inputAlign="right">
+          <Field required label="播放模式" center inputAlign="right">
             {{
               input: () => (
                 <RadioGroup
@@ -544,7 +552,7 @@ export default defineComponent({
                   </div>
                 ),
                 input: () =>
-                  browser().isApp ? (
+                  !browser().isApp ? (
                     <div class={styles.btnSection}>
                       <Button
                         icon={UploadIcon}
@@ -601,7 +609,7 @@ export default defineComponent({
                   </div>
                 ),
                 input: () =>
-                  browser().isApp ? (
+                  !browser().isApp ? (
                     <div class={styles.btnSection}>
                       <Button
                         icon={UploadIcon}
@@ -660,7 +668,7 @@ export default defineComponent({
                 </div>
               ),
               input: () =>
-                browser().isApp ? (
+                !browser().isApp ? (
                   <div class={styles.btnSection}>
                     <Button
                       icon={UploadIcon}
@@ -742,7 +750,7 @@ export default defineComponent({
                       </div>
                     ),
                     input: () =>
-                      browser().isApp ? (
+                      !browser().isApp ? (
                         <div class={styles.btnSection}>
                           <Button
                             icon={UploadIcon}
@@ -855,20 +863,28 @@ export default defineComponent({
           <Field
             required
             label="曲目速度"
-            center
             name="playSpeed"
             inputAlign="right"
             rules={[{ required: true, message: '请输入曲目速度' }]}
             errorMessageAlign="right"
             v-model={this.playSpeed}
+            placeholder="请输入曲目速度，范围45-270"
             // class={styles.inputControl}
             formatter={this.onFormatter2}
+            onBlur={() => {
+              if (this.playSpeed && Number(this.playSpeed) > 270) {
+                this.playSpeed = '270'
+              }
+              if (this.playSpeed && Number(this.playSpeed) < 45) {
+                this.playSpeed = '45'
+              }
+            }}
             autocomplete="off"
           ></Field>
 
           <Field
             label="曲目标签"
-            placeholder=""
+            placeholder="请选择曲目标签"
             inputAlign="right"
             isLink
             required
@@ -959,8 +975,18 @@ export default defineComponent({
               />
 
               <div class={styles.rule}>
-                <p>扣除手续费后该曲目预计收入为：</p>
                 <p>
+                  扣除手续费后该曲目预计收入为：
+                  <span>
+                    {(
+                      ((parseFloat(this.musicPrice || '0') || 0) *
+                        (100 - this.music_sheet_service_fee)) /
+                      100
+                    ).toFixed(2)}
+                    <span>元/人</span>
+                  </span>
+                </p>
+                {/* <p>
                   每人：
                   <span>
                     {(
@@ -970,7 +996,7 @@ export default defineComponent({
                     ).toFixed(2)}
                   </span>
                   元/人
-                </p>
+                </p> */}
 
                 <p>
                   您的乐谱收入在学员购买后{this.music_account_period}
@@ -981,19 +1007,19 @@ export default defineComponent({
           )}
         </CellGroup>
 
-        <ColSticky position="bottom" background="transparent">
-          <div class={styles['button-area']}>
-            <Button
-              type="primary"
-              block
-              round
-              native-type="submit"
-              disabled={this.submitLoading}
-            >
-              <img src={btnBg} />
-            </Button>
-          </div>
-        </ColSticky>
+        {/* <ColSticky position="bottom" background="transparent"> */}
+        <div class={[styles['button-area']]}>
+          <Button
+            type="primary"
+            block
+            round
+            native-type="submit"
+            disabled={this.submitLoading}
+          >
+            <img src={btnBg} />
+          </Button>
+        </div>
+        {/* </ColSticky> */}
         {/* <Popup
           show={this.showPicker}
           round
@@ -1023,7 +1049,7 @@ export default defineComponent({
           round
           closeable
           position="bottom"
-          style={{ height: '60%' }}
+          style={{ height: '35%' }}
           teleport="body"
           onUpdate:show={val => (this.tagVisibility = val)}
         >
@@ -1043,6 +1069,9 @@ export default defineComponent({
           type={this.messageTipType}
           show={this.messageTipStatus}
           onConfirm={() => {
+            if (this.messageTipType === 'upload') {
+              localStorage.setItem('isCatchTip', '1')
+            }
             this.messageTipStatus = false
           }}
         />

src/teacher/music/upload/message-tip/index.module.less

@@ -29,7 +29,7 @@
   background-size: contain;
   border-radius: 20px;
   overflow: hidden;
-  padding-bottom: 16px;
+  padding-bottom: 20px;
 
   .title1 {
     padding-top: 57px;
@@ -46,11 +46,12 @@
         content: '';
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: 1px;
         z-index: -1;
         width: 100%;
         height: 8px;
         background: linear-gradient(to right, rgba(45, 199, 170, 1), rgba(91, 236, 255, 0.20));
+        opacity: 0.68;
       }
     }
   }
@@ -60,6 +61,7 @@
     font-size: 15px;
     color: #777777;
     line-height: 21px;
+    padding-bottom: 16px;
 
 
     // &::before {
@@ -92,6 +94,10 @@
       line-height: 24px;
       padding-bottom: 14px;
 
+      &.cContentBottom {
+        padding-bottom: 0;
+      }
+
       span {
         color: #14BC9C;
         cursor: pointer;

src/teacher/music/upload/message-tip/index.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
                     ，如果您上传了文件，即认为您完全同意并遵守该协议的内容。
                   </div>
                   <p class={styles.cTitle}>曲谱审核标准：</p>
-                  <div class={styles.cContent}>
+                  <div class={[styles.cContent, styles.cContentBottom]}>
                     1、文件大小不要超过5MB，不符合版面规范的乐谱，审核未通过的不予上架，详情参考
                     <span onClick={() => onDetail('music')}>
                       《曲谱排版规范》
@@ -122,7 +122,7 @@ export default defineComponent({
 
               {props.type === 'error' && (
                 <div class={styles.container}>
-                  <div class={styles.cContent}>
+                  <div class={[styles.cContent, styles.cContentBottom]}>
                     声轨名称解析失败，请对照
                     <span onClick={() => onDetail('music')}>
                       《曲谱排版规范》
@@ -134,7 +134,7 @@ export default defineComponent({
 
               {props.type === 'origin' && (
                 <div class={styles.container}>
-                  <div class={styles.cContent}>
+                  <div class={[styles.cContent, styles.cContentBottom]}>
                     1、同一首曲目不可重复上传，如有不同版本统一用“（）”补充。举例：人生的旋转木马（长笛二重奏版）
                     <br />
                     2、曲目名后可添加曲目信息备注，包含但不限于曲目类型等。曲目名《XXX》，举例：人声的旋转木马《哈尔的移动城堡》（长笛二重奏版）

src/teacher/music/upload/select-tag/index.module.less

@@ -19,6 +19,21 @@
   flex-wrap: wrap;
   text-align: center;
 
+  :global {
+    .van-tag {
+      background: #F6F6F6;
+      font-size: 14px;
+      color: #777777;
+      border-color: #F6F6F6;
+    }
+
+    .van-tag--primary {
+      background: #E9FFF8;
+      border-color: #2DC7AA;
+      color: #14BC9C;
+    }
+  }
+
   .item {
     display: block;
     margin-right: 5px;

src/teacher/music/upload/select-tag/index.tsx

@@ -53,13 +53,13 @@ export default defineComponent({
     )
 
     const resetTags = () => {
-      tagList.value = [...props.defaultValue]
-      emit('close')
+      tagList.value = []
+      // emit('close')
     }
     return () => {
       return (
         <div class={styles.select}>
-          <h4 class={styles.title}>全部声部</h4>
+          <h4 class={styles.title}>曲谱标签</h4>
           <div class={styles.content}>
             <CheckboxGroup
               class={classNames(styles.childContent, styles['radio-group'])}
@@ -84,8 +84,10 @@ export default defineComponent({
                 >
                   <Tag
                     class={classNames(styles.item, 'van-ellipsis')}
-                    plain={!tagList.value.includes(item.id)}
-                    type="primary"
+                    plain
+                    type={
+                      !tagList.value.includes(item.id) ? 'default' : 'primary'
+                    }
                     round
                     size="large"
                   >