声轨弹窗样式修改

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -1,119 +1,77 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  width: 50vw;
-  height: 80vh;
-  max-height: 500px;
-  background-color: #fff;
-  overflow: hidden;
-
-  .top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 10px;
-    position: relative;
-    font-size: 14Px;
-    z-index: 999;
-    &::before {
-      content: '';
-      position: absolute;
-      left: 4px;
-      top: 50%;
-      height: 30%;
-      transform: translateY(-50%);
-      width: 2px;
-      background-color: var(--van-primary-color);
-      border-radius: 2px;
-    }
-  }
-
-  .closeIcon{
-    width: 15px;
-    height: 15px;
-    margin: 0 10px;
-    position: relative; 
-    cursor: pointer;
-  }
-  .closeIcon::before,
-  .closeIcon::after{
-      content: "";
-      position: absolute;
-      height: 15px;
-      width: 1.5px;
-      top: 4px;
-      right: 9px;
-      background: #000;
+  .head {
+      background: url("../../../../page-instrument/header-top/image/headImg.png") no-repeat;
+      background-size: 100% 100%;
+      width: 372px;
+      height: 57px;
+      position: relative;
+      .headTit{
+          position: absolute;
+          bottom: 9px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 38px;
+          height: 18px;
+      }        
+      .closeImg{
+          position: absolute;
+          top: 0;
+          right: -38px;
+          width: 32px;
+          height: 32px;
+          cursor: pointer;
+      }
   }
-  .closeIcon::before{
-      transform: rotate(45deg);
+  .pickerCon{
+    width: 354px;
+    height: 284px;
+    background: #B0D8FF;
+    box-shadow: 0px 4px 0px 0px #7AAEE0;
+    border-radius: 0px 0px 24px 24px;
+    margin: 0 auto;
+    padding: 10px;
+    .pickerBox{
+      width: 100%;
+      height: 100%;
+      background: #EAF2FB;
+      border-radius: 12px;
+    }
   }
-  .closeIcon::after{
-      transform: rotate(-45deg);
-  }   
-
   .picker {
-    flex: 1;
-    height: 100px;
+    height: 204px;
+    overflow: hidden;
+    background-color: initial;
     display: flex;
     align-items: center;
-    justify-content: center;
-    :global {
-      .van-picker__columns {
-        //height: 80% !important;
+    :global{
+      .van-picker__mask {
+        background-image: initial;
       }
-    }
-    &.pcPicker {
-      :global {
-        .van-ellipsis {
-          font-size: 20PX;
-        }
-        .van-picker-column__item {
-          height: 60px;
+      .van-picker__columns{
+        width: 100%;
+      }
+      .van-picker-column__wrapper{
+        padding: 0 16px;
+      }
+      .van-picker-column__item{
+        font-weight: 600;
+        font-size: 15px;
+        color: rgba(0,0,0,0.2);
+        &.van-picker-column__item--selected{
+          border-top: 1px solid #D5E0ED;
+          border-bottom: 1px solid #D5E0ED;
+          color: rgb(0,0,0);
         }
       }
     }
   }
-
   .button {
-    width: 50%;
-    height: 40Px;
-    margin: 10Px auto;
-    position: relative;
+    cursor: pointer;
+    width: 118px;
+    height: 40px;
+    margin: 10px auto 0;
     z-index: 9;
-  }
-  &.pcContainer {
-    width: 500PX;
-    height: 380PX;
-    border-radius: 16PX;
-    .button {
-      width: 40%;
-      margin-bottom: 30PX;
-    }
-    .title {
-      font-size: 20PX;
-    }
-    .closeIcon {
-      margin: initial !important;
-      top: -6PX;
-    }
-    .top {
-      padding-left: 30PX;
-      &::before { 
-        left: 20PX;
-      }
-    }
-    :global {
-      .van-button__content {
-        font-size: 20PX;
-      }
-    }
-  }
-}
-.pcPartTop {
-  z-index: 9999;
-  height: 12px;
-  &.pcPartTopZIndex {
-    z-index: 1;
+    background: url("./imgs/okBtn.png") no-repeat;
+    background-size: 100% 100%;
   }
 }

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -2,6 +2,8 @@ import { PropType, computed, defineComponent, ref, toRefs, onMounted } from 'vue
 import { Picker, Button, Icon } from 'vant'
 import styles from './index.module.less'
 import state, { IPlatform } from "/src/state";
+import changeName from "./imgs/changeName.png"
+import { headImg } from "/src/page-instrument/header-top/image";
 
 export default defineComponent({
   name: 'choosePartName',
@@ -38,37 +40,38 @@ export default defineComponent({
 		});
     return () => (
       <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer]}>
+        <div class={styles.head}>
+          <img class={styles.headTit} src={changeName} />
+          <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={() => emit("close")} />
+        </div>
         { state.platform === IPlatform.PC && <div class={[!state.guideInfo?.teacherDrag && styles.pcPartTopZIndex ,styles.pcPartTop,'top_drag']}></div> }
-        <div class={styles.top}>
-          <div class={styles.title}>请选择您练习的乐器</div>
-          {/* <Icon name="cross" size={24} onClick={() => emit('close')} /> */}
-          <span class={styles.closeIcon} onClick={() => emit("close")}></span>
+        <div class={styles.pickerCon}>
+          <div class={styles.pickerBox}>
+            <Picker
+              ref={myPicker}
+              class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
+              defaultIndex={props.partIndex}
+              v-model={selValues.value}
+              showToolbar={false}
+              columns={columns.value}
+              visibleItemCount={Math.ceil(document.body.clientHeight / 40 / 3)}
+              onChange={(row) => {
+                // console.log(1111,'选择的索引', row)
+                if (!partIndexChanged.value) partIndexChanged.value = true
+                selectIndex.value = row.selectedValues[0]
+              }}
+            />
+            <div class={styles.button} onClick={() => {
+                // console.log(1111,selectIndex.value)
+                if (partIndexChanged.value) {
+                  emit('close', selectIndex.value)
+                } else {
+                  emit('close', partIndex.value)
+                }
+              }
+            }></div>
+          </div>
         </div>
-        <Picker
-          ref={myPicker}
-          class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
-          defaultIndex={props.partIndex}
-          v-model={selValues.value}
-          showToolbar={false}
-          columns={columns.value}
-          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
-          onChange={(row) => {
-            // console.log(1111,'选择的索引', row)
-            if (!partIndexChanged.value) partIndexChanged.value = true
-            selectIndex.value = row.selectedValues[0]
-          }}
-        />
-        <Button class={styles.button} type="primary" round block onClick={() => {
-            // console.log(1111,selectIndex.value)
-            if (partIndexChanged.value) {
-              emit('close', selectIndex.value)
-            } else {
-              emit('close', partIndex.value)
-            }
-          }
-        }>
-          确定
-        </Button>
       </div>
     )
   },

src/view/plugins/toggleMusicSheet/index.module.less

@@ -1,16 +1,5 @@
-.iconToggle {
-    position: fixed;
-    left: 0;
-    bottom: 20%;
-    transform: scaleX(-1);
-    z-index: 10;
-    margin: 0;
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 5px 0px 0px 5px;
-    padding: 7px 3px;
-}
+
 .popup{
-    border-radius: 4px;
     overflow: hidden;
 }
 .pcPartPop {

src/view/plugins/toggleMusicSheet/index.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Popup class={styles.popup} v-model:show={toggleMusicSheet.show} class={[state.platform === IPlatform.PC && styles.pcPartPop ,"switchBoxClass_drag"]} style={positionInfo.styleDrag.value}>
+      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
         <ChoosePartName
           partIndex={trackIdx.value || 0}
           partListNames={partListNames.value}