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

<template>
	<view class="hand-top">
		<navbar
		title="快捷下单"
		leftClick 
		@leftClick="$utils.navigateBack"
		/>
		<view class="picture-top">
			<view class="left-icon"></view>
			<text>拍照下单</text>
		</view>
		<view class="picture-upload">
			<view class="upload-content">
				<uv-icon name="camera-fill" color="#D03F25" size="200"></uv-icon>
			</view>
			<view class="text-upload">
				<text>(拍照上传你所需要识别的产品图片)</text>
			</view>
		</view>
		<view class="fast-order">
			<view class="picture-button" @click="$utils.redirectTo('/pages_order/order/firmOrder')">
				<text>快捷下单</text>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	.hand-top{
		background-color: #ffffff;
		.picture-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;
			}
		}
		.picture-upload{
			background-color: #ffffff;
			height: 550rpx;
			.upload-content{
				width: 680rpx;
				height: 400rpx;
				background-color: #ffffff;
				background-color: #F4F4F4;
				margin: auto;
				margin-top: 50rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60rpx;
			}
			.text-upload{
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #666666;
			}
			
		}
		.fast-order{
			.picture-button{
				color: #ffffff;
				background-color: #DC2828;
				width: 85%;
				height: 100rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100rpx;
			}
		}
	}
</style>