优化样式

src/components/col-cropper/index.module.less

@@ -21,39 +21,58 @@
   }
 }
 
+.iconDelete {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  width: 18px;
+  height: 18px;
+  background: url('../col-upload/images/icon-delete.png') no-repeat center;
+  background-size: contain;
+  z-index: 9;
+  cursor: pointer;
+}
+
 .avatar-upload-preview_range,
 .avatar-upload-preview {
   width: 180px;
   height: 180px;
   box-shadow: 0 0 4px #ccc;
   overflow: hidden;
+
   img {
     background-color: #f7f7f7;
     height: 100%;
   }
 }
+
 .avatar-upload-preview_range {
   border-radius: 0;
 }
+
 .previewImg {
   padding-left: 50px;
   padding-top: 10px;
-  & > span {
+
+  &>span {
     display: block;
     color: #212121;
     font-size: 16px;
     padding-bottom: 15px;
   }
 }
+
 .operation {
   font-size: 24px;
   display: flex;
   align-items: center;
   margin-top: 20px;
-  & > i {
+
+  &>i {
     margin-left: 12px;
     cursor: pointer;
   }
+
   .icon-rate {
     display: inline-block;
     width: 20px;
@@ -62,27 +81,34 @@
     background-size: contain;
   }
 }
+
 .vue-cropper {
   border-radius: 5px;
   overflow: hidden;
 }
+
 :deep(.el-dialog) {
   margin-bottom: 10vh;
+
   .el-dialog__header {
     // background: #363d55;
     background: #fff;
     padding: 15px 20px 15px;
+
     .el-dialog__title {
       color: #212121;
     }
+
     .el-dialog__headerbtn .el-dialog__close {
       color: #212121;
     }
   }
+
   .el-dialog__body {
     padding-top: 0;
   }
 }
+
 :global {
   .before {
     max-width: 400px !important;

src/components/col-cropper/index.tsx

@@ -33,6 +33,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    delete: {
+      type: Boolean,
+      default: false
+    },
     bucket: {
       type: String,
       default: 'daya'
@@ -55,7 +59,7 @@ export default defineComponent({
     },
     cropUploadSuccess: {
       type: Function,
-      default: (data: string) => {}
+      default: (data: string) => ({})
     },
     domSize: {
       type: Object,
@@ -94,7 +98,7 @@ export default defineComponent({
     // 上传之前 格式与大小校验
     beforeUpload(file) {
       this.isStopRun = false
-      var fileType = file.type
+      const fileType = file.type
       if (fileType.indexOf('image') < 0) {
         ElMessage.warning('请上传图片')
         this.isStopRun = true
@@ -161,15 +165,27 @@ export default defineComponent({
             style={{ height: this.domSize.height, width: this.domSize.width }}
           >
             {this.modelValue ? (
-              <ElImage
-                src={this.modelValue}
-                fit="cover"
-                style={{
-                  height: this.domSize.height,
-                  width: this.domSize.width
-                }}
-                class={styles.uploadSection}
-              />
+              <div class="relative">
+                <ElImage
+                  src={this.modelValue}
+                  fit="cover"
+                  style={{
+                    height: this.domSize.height,
+                    width: this.domSize.width
+                  }}
+                  class={styles.uploadSection}
+                />
+                {this.delete && (
+                  <i
+                    class={styles.iconDelete}
+                    onClick={(e: any) => {
+                      console.log('11111')
+                      e.stopPropagation()
+                      this.onDelete()
+                    }}
+                  ></i>
+                )}
+              </div>
             ) : (
               <div
                 class={[

src/router/routes-admin.ts

@@ -185,7 +185,7 @@ export default [
         path: '/userInfo/musicClass',
         name: 'userInfoMusicClass',
         component: () => import('@/views/user-info/music-class'),
-        meta: { title: '上传曲谱', index: 5, isdark: true }
+        meta: { title: '上传曲谱', index: 6, isdark: true }
       },
       {
         path: '/userInfo/musicOperation',
@@ -193,7 +193,7 @@ export default [
         component: () => import('@/views/user-info/music-operation'),
         meta: {
           title: '上传曲谱',
-          index: 4,
+          index: 6,
           hidden: true,
           activeMenu: 'userInfoMusicClass',
           isdark: true

src/views/student-info/components/user-menu/index.module.less

@@ -1,26 +1,32 @@
 .menuItem {
   box-sizing: border-box;
   border-right: 4px solid transparent;
+
   .icon1 {
     background: url('./images/1.png') no-repeat center;
     background-size: contain;
   }
+
   .icon2 {
     background: url('./images/2.png') no-repeat center;
     background-size: contain;
   }
+
   .icon3 {
     background: url('./images/3.png') no-repeat center;
     background-size: contain;
   }
+
   .icon4 {
     background: url('./images/4.png') no-repeat center;
     background-size: contain;
   }
+
   .icon5 {
     background: url('./images/5.png') no-repeat center;
     background-size: contain;
   }
+
   &.active,
   &:hover {
     background-color: #e9fff8;
@@ -31,18 +37,22 @@
       background: url('./images/1-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon2 {
       background: url('./images/2-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon3 {
       background: url('./images/3-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon4 {
       background: url('./images/4-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon5 {
       background: url('./images/5-active.png') no-repeat center;
       background-size: contain;

src/views/user-info/components/user-menu/index.module.less

@@ -1,26 +1,37 @@
 .menuItem {
   box-sizing: border-box;
   border-right: 4px solid transparent;
+
   .icon1 {
     background: url('./images/1.png') no-repeat center;
     background-size: contain;
   }
+
   .icon2 {
     background: url('./images/2.png') no-repeat center;
     background-size: contain;
   }
+
   .icon3 {
     background: url('./images/3.png') no-repeat center;
     background-size: contain;
   }
+
   .icon4 {
     background: url('./images/4.png') no-repeat center;
     background-size: contain;
   }
+
   .icon5 {
     background: url('./images/5.png') no-repeat center;
     background-size: contain;
   }
+
+  .icon6 {
+    background: url('./images/6.png') no-repeat center;
+    background-size: contain;
+  }
+
   &.active,
   &:hover {
     background-color: #e9fff8;
@@ -31,21 +42,30 @@
       background: url('./images/1-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon2 {
       background: url('./images/2-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon3 {
       background: url('./images/3-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon4 {
       background: url('./images/4-active.png') no-repeat center;
       background-size: contain;
     }
+
     .icon5 {
       background: url('./images/5-active.png') no-repeat center;
       background-size: contain;
     }
+
+    .icon6 {
+      background: url('./images/6-active.png') no-repeat center;
+      background-size: contain;
+    }
   }
 }

src/views/user-info/music-operation/index.module.less

@@ -45,10 +45,11 @@
     }
 
     .el-select .el-select__tags .el-tag {
-      background-color: #dffff8;
-      border: 1px solid #4bb39e;
-      color: #4bb39e !important;
-      border-radius: 10px;
+      background: #F2FFFC;
+      border-radius: 4px;
+      border: 1px solid #9FE2DE;
+      font-size: 16px;
+      color: #00B2A7;
       margin: 0 6px 0 0;
       height: 30px;
     }
@@ -60,7 +61,9 @@
     }
 
     .el-tag .el-icon {
-      color: #4bb39e;
+      // width: 10px;
+      // height: 10px;
+      color: #00B2A7;
       background-color: transparent;
     }
   }
@@ -75,6 +78,15 @@
   }
 }
 
+.uploadCon {
+  :global {
+    .el-upload--text {
+      background-color: #fff;
+      border-radius: 10px;
+    }
+  }
+}
+
 .uploadTips {
   padding: 4px 12px;
   background: #2DC7AA;
@@ -142,6 +154,11 @@
   >p>span {
     color: #ff4e19;
     font-weight: bold;
+    font-size: 16px;
+
+    span {
+      font-size: 14px;
+    }
   }
 }
 

src/views/user-info/music-operation/index.tsx

@@ -84,6 +84,10 @@ export default defineComponent({
     }
   },
   async mounted() {
+    const isCatchTip = localStorage.getItem('isCatchTip')
+    if (!isCatchTip) {
+      this.visibleShow = true
+    }
     document.title = this.type === 'create' ? '新建曲谱' : '编辑曲谱'
     try {
       await request
@@ -473,10 +477,11 @@ export default defineComponent({
                           bucket={'cloud-coach'}
                           accept={'.mp3'}
                           uploadType={'file'}
+                          class={styles.uploadCon}
                           size={8}
                           type="music"
                           btnText="上传原音文件"
-                          extraTips="仅支持MP3格式文件，文件最大不能超过8"
+                          extraTips="仅支持MP3格式文件，文件最大不能超过8MB"
                         />
                       </ElFormItem>
                     ))}
@@ -539,11 +544,12 @@ export default defineComponent({
             ]}
           >
             <ColCropper
-              modelValue={this.form.musicCover}
+              v-model:modelValue={this.form.musicCover}
               bucket={'cloud-coach'}
               cropUploadSuccess={(data: any) => {
                 this.form.musicCover = data
               }}
+              delete
               domSize={{ height: '150px' }}
               options={{
                 title: '曲谱封面',
@@ -593,12 +599,12 @@ export default defineComponent({
             rules={[{ required: true, message: '请选择是否收费' }]}
           >
             <ElRadioGroup v-model={this.form.paymentType}>
-              <ElRadioButton label={'FREE'} class="mr-3 w-24">
-                否
-              </ElRadioButton>
-              <ElRadioButton label={'CHARGE'} class="w-24">
+              <ElRadioButton label={'CHARGE'} class="mr-3 w-24">
                 是
               </ElRadioButton>
+              <ElRadioButton label={'FREE'} class="w-24">
+                否
+              </ElRadioButton>
             </ElRadioGroup>
           </ElFormItem>
           {this.form.paymentType === 'CHARGE' && (
@@ -623,15 +629,14 @@ export default defineComponent({
 
               <ElFormItem>
                 <div class={styles.rule}>
-                  <p>扣除手续费后该曲目预计收入为：</p>
                   <p>
-                    每人：
+                    扣除手续费后该曲目预计收入为：
                     <span>
                       {((parseFloat(this.form.musicPrice || '0') || 0) *
                         (100 - this.music_sheet_service_fee)) /
                         100}
+                      <span>元/人</span>
                     </span>
-                    元/人
                   </p>
                   <p>
                     您的乐谱收入在学员购买后{this.music_account_period}
@@ -719,7 +724,10 @@ export default defineComponent({
           <MessageTip
             type={'upload'}
             title={'上传须知'}
-            onConfirm={() => (this.visibleShow = false)}
+            onConfirm={() => {
+              localStorage.setItem('isCatchTip', '1')
+              this.visibleShow = false
+            }}
           />
         </ElDialog>
         <ElDialog

src/views/user-info/music-operation/message-tip/index.module.less

@@ -73,6 +73,7 @@
         width: 100%;
         height: 8px;
         background: linear-gradient(to right, rgba(45, 199, 170, 1), rgba(91, 236, 255, 0.20));
+        opacity: 0.68;
       }
     }
   }
@@ -136,4 +137,4 @@
     color: #FFFFFF;
     line-height: 21px;
   }
-}
+}