<template>
	<view class="content">
		<view class="card" v-for="item in 10">
			<view class="head">
				<text>PF171504442988969633</text>
				<text style="color: #989898;">2023-04-25</text>
			</view>
			<view class="card-content">
				<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
					<image style="width: 152rpx;height: 152rpx;" src="../../static/logo.png" mode=""></image>
					<view class="status">
						未报价
					</view>
				</view>
				<view class="card-content-r">
					<view class="title ellipsis">
						正宗新疆哈密瓜网纹瓜
					</view>
					<view class="need">
						需求量： 100斤
					</view>
					<view class="ipt">
						<up-input placeholderStyle='fontSize:24rpx' placeholder="点击数入报价数量" v-model="value1"
							style="margin-right: 10rpx;background-color:#F6F6F6;border: none;"></up-input>
						<up-input placeholderStyle='fontSize:24rpx' style="background-color: #F6F6F6;border: none;"
							placeholder="点击数入产品报价" v-model="value2"></up-input>
					</view>
				</view>
				<view class="status-png">
					<image :src="errPng" style="width: 108rpx; height: 84rpx;"></image>
				</view>
			</view>
			<view class="card-footer">
				共100斤&nbsp; &nbsp;合计:<text style="font-size: 28rpx;color: #FC452F;font-weight: 700;">￥500.00</text>
			</view>
			<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
		</view>

		<view class="submit-btn">
			<up-button shape='circle' color='#20B128' text="提交"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const value1 = ref('')
	const value2 = ref('')

	// 状态图片url
	const successPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png')
	const errPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png')
	// 状态图片url结束
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.card {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: white;

			.head {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
			}

			.card-content {
				display: flex;
				position: relative;

				.card-content-l {
					margin-right: 20rpx;
					position: relative;

					.status {
						width: 152rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						color: white;
						font-size: 24rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0;
					}
				}

				.card-content-r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						width: 500rpx;
					}

					.need {
						color: #777777;
						font-size: 24rpx;
					}

					.ipt {
						display: flex;
						height: 56rpx;

					}
				}

				.status-png {
					position: absolute;
					right: 20rpx;
				}

			}

			.card-footer {
				margin-top: 30rpx;
				text-align: right;
				font-size: 28rpx;
				color: #060606;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 50rpx;
			width: 710rpx;
			margin: 0 auto;
		}
	}

	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>