.voice-recognition-container { display: flex; flex-direction: column; min-height: calc(100vh - 56px); background-color: #f8f8f8; /* 输入区域样式 */ .input-area { width: 100%; height: 640px; background-color: #ffffff; padding: 16px; box-sizing: border-box; .form-item { display: flex; flex-direction: column; height: 100%; .form-label { font-size: 15px; font-weight: 400; color: #171a1d; margin-bottom: 12px; line-height: 23px; } .textarea-container { flex: 1; position: relative; .recognition-textarea { width: 100%; height: 100%; border: none; padding: 0; .dtm-textarea-item-control { height: calc(100% - 24px); font-size: 15px; line-height: 1.5; color: #171a1d; } .dtm-textarea-item-desktop { padding: 0; border: none; } .dtm-textarea-item-count { display: none; } } } .word-count { display: flex; align-items: center; justify-content: flex-end; font-size: 12px; color: #86909c; margin-top: 8px; .count-wrapper { display: flex; align-items: center; } .current-count { color: #1a6fb8; font-weight: 500; } .total-count { margin-left: 2px; } } } } /* 按钮功能区域样式 */ .button-area { padding: 12px; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; height: 68px; background-color: #ffffff; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); .save-button { width: 123px; height: 44px; background-color: #ffffff; color: #1a6fb8; border: 1px solid #1a6fb8; border-radius: 8px; font-size: 16px; font-weight: 500; margin-left: 0px; } .voice-button { width: 204px; height: 44px; background-color: #1a6fb8; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; margin-right: 0px; &.center { width: 204px; margin: 0 auto; } } } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }