|  |  | 
 |  |  | .container { | 
 |  |  |   display: flex; | 
 |  |  |   flex-direction: column; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  |   height: 100vh; | 
 |  |  |   padding: 20px; | 
 |  |  |   padding-left: 30rpx; | 
 |  |  |   padding-right: 30rpx; | 
 |  |  |   width: calc(100% - 0rpx); | 
 |  |  |   /* 考虑了左右边距后的实际宽度 */ | 
 |  |  |   background-color: #fff; | 
 |  |  |   justify-content: flex-start; | 
 |  |  |   align-items: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .btn { | 
 |  |  | 
 |  |  |   background-color: rgba(0, 0, 0, 0.7); | 
 |  |  |   z-index: 9999; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .input-class { | 
 |  |  |   border-radius: 5px; | 
 |  |  |   border: 2rpx solid #000000; | 
 |  |  |   height: 20vh; | 
 |  |  |   width: 100%; | 
 |  |  |   background-color: #fcfcfc; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .img-upload { | 
 |  |  |   font-size: 35rpx; | 
 |  |  |   margin-left: 30rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .container-item { | 
 |  |  |   width: 100%; | 
 |  |  |   display: flex; | 
 |  |  |   flex-direction: column; | 
 |  |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .container-voice { | 
 |  |  |   width: 100%; | 
 |  |  |   display: flex; | 
 |  |  |   flex-direction: row; | 
 |  |  |  | 
 |  |  |   align-items: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .fb-text { | 
 |  |  |   font-size: 35rpx; | 
 |  |  |   margin-left: 30rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .fb-submit { | 
 |  |  |   width: 80%; | 
 |  |  |   background-color: #1890FF; | 
 |  |  |   font-size: 35rpx; | 
 |  |  |   color: white; | 
 |  |  |   margin-top: 50rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_img { | 
 |  |  |   width: 80rpx; | 
 |  |  |   height: 70rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .divider { | 
 |  |  |   height: 1px; | 
 |  |  |   /* 设置分割线高度 */ | 
 |  |  |   background-color: #d3d3d3; | 
 |  |  |   /* 设置分割线颜色 */ | 
 |  |  |   margin: 10px 0; | 
 |  |  |   /* 设置分割线的上下间距 */ | 
 |  |  |   width: 100%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_wrapper { | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   background-color: #fff; | 
 |  |  |   padding: 10px; | 
 |  |  |   box-sizing: border-box; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content { | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: space-between; | 
 |  |  |   align-items: center; | 
 |  |  |   margin-left: 16rpx; | 
 |  |  |   padding: 0 6rpx; | 
 |  |  |   box-sizing: border-box; | 
 |  |  |   width: 200rpx; | 
 |  |  |   height: 80rpx; | 
 |  |  |   border-radius: 15rpx; | 
 |  |  |   background-color: #1890FF; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content .left { | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content .left .line { | 
 |  |  |   width: 8rpx; | 
 |  |  |   background-color: white; | 
 |  |  |   margin-left: 10rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content .left .line:nth-child(1) { | 
 |  |  |   height: 24rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content .left .line:nth-child(2) { | 
 |  |  |   height: 36rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_content .left .line:nth-child(3) { | 
 |  |  |   height: 45rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .right { | 
 |  |  |   font-size: 35rpx; | 
 |  |  |   color: #ffffff; | 
 |  |  |   margin-right: 20rpx; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .voice_starting{ | 
 |  |  |   position: fixed; | 
 |  |  |   top: 30%; | 
 |  |  |   left: 50%; | 
 |  |  |   transform: translate(-50%, -50%); | 
 |  |  |   width: 200rpx; | 
 |  |  |   height: 200rpx; | 
 |  |  |   line-height: 200rpx; | 
 |  |  |   background-color: #787879; | 
 |  |  |   color: #fff; | 
 |  |  |   text-align: center; | 
 |  |  |   border-radius: 100rpx; /* 使其呈现圆形 */ | 
 |  |  |   z-index: 10000; | 
 |  |  | } |