一体机放大效果开发

packageA/pages/chat/components/WaveDisplay.vue

@@ -224,11 +224,11 @@ onUnmounted(() => {
     opacity: 0;
     transition: opacity 0.3s;
     pointer-events: none;
-    padding: 16rpx;
-    border-radius: 36rpx;
-    height: calc(102rpx - 40rpx);
-    gap: 4rpx;
-    box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 54, 170, 0.15);
+    padding: 24rpx;
+    border-radius: 54rpx;
+    height: calc(102rpx - 60rpx);
+    gap: 6rpx;
+    box-shadow: 0rpx 12rpx 60rpx 0rpx rgba(0, 54, 170, 0.15);
     overflow: hidden;
     &.active {
         opacity: 1;
@@ -237,17 +237,17 @@ onUnmounted(() => {
 
 .wave {
     width: 100%;
-    height: 200rpx;
+    height: 300rpx;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .wave-bar {
-    width: 6rpx;
-    min-height: 4rpx;
-    border-radius: 4rpx;
-    margin: 0 3rpx;
+    width: 9rpx;
+    min-height: 6rpx;
+    border-radius: 6rpx;
+    margin: 0 5rpx;
     transition: height 0.3s ease-out, background-color 0.2s;
     transform-origin: center bottom;
 }
@@ -260,19 +260,19 @@ onUnmounted(() => {
     bottom: -80rpx;
     width: 100%;
     text-align: center;
-    font-size: 32rpx;
+    font-size: 48rpx;
     color: #666;
 }
 
 .recording-tip {
-    font-size: 28rpx;
+    font-size: 42rpx;
     color: #07c160;
 }
 
 .recording-time {
-    font-size: 28rpx;
+    font-size: 42rpx;
     color: #07c160;
-    margin-top: 10rpx;
+    margin-top: 15rpx;
 }
 
 .cancel-tip {
@@ -280,7 +280,7 @@ onUnmounted(() => {
     bottom: -120rpx;
     width: 100%;
     text-align: center;
-    font-size: 28rpx;
+    font-size: 42rpx;
     color: #f44336;
 }
 </style>