style(voice): 优化移动端语音页面布局

src/pages/Voice/index.scss

@@ -147,7 +147,9 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
+  transition:
+    opacity 0.15s ease,
+    visibility 0.15s ease;
 }
 
 .voicePage__uploadHint.voicePage__uploadHint_visible {
@@ -386,7 +388,9 @@
   font-weight: 500;
   line-height: 26px;
   color: #666666;
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 .voicePage__chipBtn.voicePage__chipBtn_instrumental {
@@ -1410,7 +1414,7 @@
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  background: linear-gradient(180deg, #F0F0F0 0%, #D6CEEF 100%);
+  background: linear-gradient(180deg, #f0f0f0 0%, #d6ceef 100%);
 }
 
 .voicePage__uploadCropPlayBtnIcon {
@@ -1491,7 +1495,7 @@
     width: 5px;
     height: 12px;
     border: none;
-    background: #D6CEEF;
+    background: #d6ceef;
     cursor: pointer;
   }
 
@@ -3351,8 +3355,7 @@ $upload-crop-selection-rail-height: 3px;
   top: 0;
   bottom: 0;
   border-radius: 6px 0 0 6px;
-  background: linear-gradient(90deg, #F0F0F0 0%, #D6CEEF 100%);
+  background: linear-gradient(90deg, #f0f0f0 0%, #d6ceef 100%);
-  ;
 }
 
 .voicePage__speechSliderFill_full {
@@ -3365,7 +3368,7 @@ $upload-crop-selection-rail-height: 3px;
   width: 3px;
   height: 12px;
   border-radius: 1px;
-  background: #D6CEEF;
+  background: #d6ceef;
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
@@ -3454,7 +3457,9 @@ $upload-crop-selection-rail-height: 3px;
   border: 2px solid transparent;
   border-radius: 9px;
   background: #ffffff;
-  transition: background-color 0.18s ease, border-color 0.18s ease;
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease;
 }
 
 .voicePage__speechHistoryItem_pending {
@@ -3754,8 +3759,149 @@ $upload-crop-selection-rail-height: 3px;
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 900px) {
+  .voicePage {
+    height: auto;
+    min-height: calc(100vh - var(--layout-chrome-top, 0px) - var(--layout-mobile-bottom-nav-height, 72px));
+    overflow: visible;
+    --voice-player-bar-bottom: calc(var(--layout-mobile-bottom-nav-height, 72px) + 12px);
+
+    .voicePage_music {
+      --voice-player-bar-bottom: calc(var(--layout-mobile-bottom-nav-height, 72px) + 12px);
+    }
+  }
+
+  .voicePage__toolbar {
+    padding: 12px 16px 0;
+  }
+
+  .voicePage__creationTabs {
+    height: auto;
+    margin-bottom: 12px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .voicePage__creationTabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .voicePage__body {
+    height: auto;
+    padding: 0 16px 112px;
+    overflow: visible;
+  }
+
+  .voicePage__module,
+  .voicePage__music,
+  .voicePage__left {
+    min-height: 0;
+  }
+
+  .voicePage__composer,
+  .voicePage__gallery,
+  .voicePage__speechMain,
+  .voicePage__speechSide {
+    min-height: 0;
+  }
+
+  .voicePage__uploadCard {
+    min-height: 82px;
+    padding: 16px;
+    border-radius: 18px;
+  }
+
+  .voicePage__uploadIcon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .voicePage__uploadCard_hasAction {
+    padding-right: 48px;
+  }
+
+  .voicePage__uploadRemoveBtn {
+    right: 16px;
+  }
+
+  .voicePage__renameModal {
+    padding: 16px;
+  }
+
+  .voicePage__renameModalDialog {
+    padding: 48px 20px 20px;
+  }
+
+  .voicePage__renameModalClose {
+    top: 18px;
+    right: 18px;
+  }
+
+  .voicePage__renameModalFieldRow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .voicePage__renameModalLabel {
+    flex-basis: auto;
+  }
+
+  .voicePage__renameModalInput {
+    max-width: none;
+  }
 
+  .voicePage__uploadCropModal {
+    align-items: flex-start;
+    padding: 16px;
+    overflow-y: auto;
+    @include hide-scrollbar;
+  }
+
+  .voicePage__uploadCropModalDialog {
+    padding: 24px 16px;
+  }
+
+  .voicePage__uploadCropWorkspace {
+    margin-top: 24px;
+    padding: 14px;
+    overflow-x: auto;
+  }
+
+  .voicePage__uploadCropToolbar {
+    flex-wrap: wrap;
+  }
+
+  .voicePage__uploadCropTimeline {
+    min-width: 620px;
+  }
+
+  .voicePage__speechEditorFoot,
+  .voicePage__speechMainFooter,
+  .voicePage__speechSide {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .voicePage__speechEditorFoot {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .voicePage__speechEditorMeta {
+    justify-content: flex-end;
+  }
+
+  .voicePage__speechActions {
+    justify-content: flex-end;
+  }
+
+  .voicePage__playerBar {
+    position: fixed;
+    padding: 0 16px;
+  }
+}
+
+@media (max-width: 640px) {
   .voicePage__toolbar,
   .voicePage__body {
     padding-left: 14px;
@@ -3770,6 +3916,42 @@ $upload-crop-selection-rail-height: 3px;
     width: auto;
     max-width: min(306px, calc(100vw - 28px));
   }
+
+  .voicePage__renameModalActions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .voicePage__renameModalBtn {
+    width: 100%;
+  }
+
+  .voicePage__uploadCropZoom {
+    width: 100%;
+  }
+
+  .voicePage__uploadCropZoomSliderWrap {
+    flex: 1 1 auto;
+  }
+
+  .voicePage__speechShortcuts {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+  }
+
+  .voicePage__speechShortcuts::-webkit-scrollbar {
+    display: none;
+  }
+
+  .voicePage__speechCloneReadBox {
+    padding-bottom: 140px;
+  }
+
+  .voicePage__speechCloneRecordBtn {
+    width: calc(100% - 24px);
+    min-height: 96px;
+  }
 }
 
 .voicePage__playerBar {
@@ -4053,4 +4235,4 @@ $upload-crop-selection-rail-height: 3px;
     width: 100%;
     margin-top: 0;
   }
-}
+}