jje_spread_uniapp/components/addRemarkPopup/addRemarkPopup.vue

<template>
	<view>
		<uni-popup ref="addRemarkPopup" type="center">
			<view class="addRemarkPopup flex-col">
				<view class="content">
					<view class="flex-row justify-between item">
						<text class="label">备注：</text>
						<textarea class="textarea" placeholder-style="color:#999999" placeholder="请输入备注"/>
					</view>

					<view class="flex-row justify-between item">
						<view class="flex-col justify-center">
							<text class="label">备注地址：</text>
						</view>
						<input class="input" placeholder="请输入备注地址" />
					</view>

					<view class="flex-row justify-between item">
						<text class="label">现场照片：</text>
						<view class="imageList">

							<view class="addImage leftFloat" v-for="i in ilist" >
								<image  src="/static/my/fuwuNmber.png"></image>
							</view>

							<view class="addImage leftFloat flex-col justify-center" >
								<uni-icons type="plusempty" size="30"></uni-icons>
								<text>现场照片</text>
							</view>
						</view>
					</view>



				</view>


				<view class="flex-row">
					<button class="button" type="primary">确定</button>
					<button class="button">取消</button>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Button from "../../uni_modules/uv-ui-tools/libs/mixin/button";
	export default {
		name:"addRemarkPopup",
		components: {Button},
		data() {
			return {


				ilist:10
			};
		},
		methods:{
			openPopup(){
				console.log('爸爸调用了我')
				this.$refs.addRemarkPopup.open()
			}
		}
	}
</script>

<style scoped lang="less">

	.addRemarkPopup{
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
	}
	.content{
		padding: 0 32rpx;
		height: 730rpx;
		overflow: auto;

	}
	.textarea{
		width: 500rpx;
		height: 250rpx;
		border: 2rpx solid #f7f7f7;
		font-size: 26rpx;
	}
	.input{
		width: 500rpx;
		height: 70rpx;
		border: 2rpx solid #f7f7f7;
		font-size: 26rpx;
	}

	.item{
		margin-top: 20rpx;
	}
	.label{
		font-size: 28rpx;
	}
	.button{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.imageList{
		width: 530rpx;
		min-height: 240rpx;
	}
	.addImage{
		width: 200rpx;
		height: 240rpx;
		border: 2rpx solid #f7f7f7;
		align-items: center;
		font-size: 28rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		image{
			width: 200rpx;
			height: 240rpx;
		}
	}

	.leftFloat{
		float: left;
	}


</style>