Browse Source

样式修改

黄琪勇 3 months ago
parent
commit
5051b8c251

+ 6 - 0
src/page-instrument/header-top/speed/index.module.less

@@ -1,4 +1,10 @@
 .speedContainer{
+    &.isHideBeat .content{
+        height: 192px;
+        .speedSel{
+            padding-bottom: 0px !important;
+        }
+    }
     &.follow{
         .head{
             background: url("../image/headImg1.png") no-repeat;

+ 2 - 2
src/page-instrument/header-top/speed/index.tsx

@@ -113,7 +113,7 @@ export default defineComponent({
 			}
 		};
 		return () => (
-			<div class={[styles.speedContainer, styles[state.modeType]]}>
+			<div class={[styles.speedContainer, styles[state.modeType], !(state.isMixBeat && state.modeType !== "evaluating") && styles.isHideBeat]}> 
 				<div class={[styles.head, "top_draging"]}>
 					<img class={styles.headTit} src={headImg("headTit.png")} />
 					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headData.speedShow = false }} />
@@ -143,7 +143,7 @@ export default defineComponent({
 							))}
 						</div>
 						{
-							state.isMixBeat && 
+							state.isMixBeat && state.modeType !== "evaluating" &&
 							<div class={styles.metronome}>
 								<div class={styles.tit}>节拍器</div>
 								<Switch 

+ 6 - 4
src/view/rhythm/index.module.less

@@ -15,8 +15,8 @@
         top: 50%;
         transform: translate(-50%, -50%);
         display: flex;
-        justify-content: center;
         align-items: center;
+        width: 520px;
         .rhythmImg{
             width: 50px;
             height: 50px;
@@ -72,7 +72,9 @@
         }
         .rhythmBox{
             flex-wrap: wrap;
-            justify-content: initial;
+            align-content: flex-start;
+            width: initial;
+            height: 230px;
             .rhythmImg{
                 &.active{
                     background-color: #ffffff;
@@ -107,10 +109,10 @@
                     height: 110px;
                     background-size: 110px 110px;
                     border-radius: 28px;
-                    box-shadow: 0 0 0 4px #FFFFFF;
+                    box-shadow: 0 0 0 5px #FFFFFF;
                     background-color: #35A8FF;
                     &.highlight {
-                        box-shadow: 0 0 0 4px transparent;
+                        box-shadow: 0 0 0 5px transparent;
                     }
                 }
             }