| | |
| | | .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; |
| | | } |