building-materials-shop-uniapp-241014/pages_order/order/voiceOrder.vue

<template>
	<view class="hand-top">
		<navbar
		title="快捷下单"
		leftClick 
		@leftClick="$utils.navigateBack"
		/>
		<view class="voice-top">
			<view class="left-icon"></view>
			<text>录制语音下单</text>
		</view>
		<view class="voice-upload">
			<view class="long-speak">
				<uv-icon name="mic" size="45rpx" color="#DC2828"></uv-icon>
				<text>长按可说话</text>
			</view>
			<view class="recording-file">
				<view class="file">
						<image src="../static/order/1.png" mode="" class="record"></image>
						<image src="../static/order/2.png" mode="" class="file-start"></image>
						<image src="../static/order/3.png" mode="" class="file-delete"></image>
					<view class="file-top">
						<p>录音文件01.mp3</p>
						<p style="color: #A6ADBA;">12MB</p>
					</view>
					<view class="file-bottom">
						<view class="schedule"></view>
						<text>100%</text>
					</view>
				</view>
			</view>
			<view class="text-upload">
				<text>(录音上传你所需要识别的产品语音)</text>
			</view>
		</view>
		<view class="fast-order">
			<view class="voice-button" @click="$utils.redirectTo('/pages_order/order/firmOrder')">
				<text>快捷下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	.hand-top{
		background-color: #ffffff;
		.voice-top{
			color: #333333;
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			.left-icon{
				background-color: #D03F25;
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				border-radius: 100rpx;
				margin-left: 50rpx;
				margin-right: 20rpx;
				padding-bottom: 5rpx;
			}
		}
		.voice-upload{
			.long-speak{
					color: #DC2828;
					border: 1rpx solid #DC2828;
					width: 85%;
					height: 80rpx;
					margin: auto;
					margin-top: 60rpx;	
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100rpx;
			}
			.recording-file{
				height: 250rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				margin-top: 30rpx;
				.file{
					background-color: #F4F4F4;
					width: 95%;
					height: 200rpx;
					border-radius: 20rpx;
					.record{
						position: absolute;
						height: 80rpx;
						width: 80rpx;
						top: 65rpx;
						left: 60rpx;
					}
					.file-start{
						position: absolute;
						height: 30rpx;
						width: 30rpx;
						top: 60rpx;
						right: 100rpx;
					}
					.file-delete{
						position: absolute;
						height: 30rpx;
						width: 30rpx;
						top: 60rpx;
						right: 50rpx;
					}
					.file-top{
						position: absolute;
						width: 280rpx;
						top: 60rpx;
						left: 160rpx;
					}
					.file-bottom{
						position: absolute;
						width: 88%;
						height: 30rpx;
						display: flex;
						align-items: center;
						top: 160rpx;
						left: 60rpx;
						.schedule{
							width: 80%;
							height: 10rpx;
							border-radius: 30rpx;
							background-color: #D03F25;
							margin-right: 15rpx;
						}
					}
				}
			}
			.text-upload{
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #666666;
				margin-bottom: 100rpx;
			}
		}
		.voice-button{
			color: #ffffff;
			background-color: #DC2828;
			width: 85%;
			height: 100rpx;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
		}
	}
</style>