assess-app/page_task/task_details/module/send_chat.vue

<template>
	<view class="text-color-12">
		<view class="p-30">
			<textarea class="sys-from-background-color r-20 textarea p-20" name="" id="" cols="30" rows="10"
				placeholder="留言"></textarea>
			<view class="size-26 m-t20 sys-weight-600">上传图片</view>
			<view class="image-content">
				<view class="image-box" v-for="(item,index) in 1" :key="index">
					<image class="image-item wh-110 m-t20 r-10 m-r20" src="/static/img/logo.png" mode="aspectFill">
					</image>
					<image class="delete-iocn wh-25" src="/static/img/information/hint-subtract.png" mode=""></image>
				</view>
				<view class="add-image column-c justify-center m-t20">
					<image class="wh-45" src="/static/img/task-details/Mask oup.png" mode=""></image>
					<text class="size-24 text-color-666">视频/图片</text>
				</view>
			</view>
			<view class="size-26 m-tb20 sys-weight-600">上传附件</view>
			<view class="">
				<view class="sys-from-background-color row-justify-sb center p-20 m-b16 r-20" v-for="(item,index) in 1"
					:key="index">
					<view class="row-c">
						<image class="wh-60 m-r20" src="/static/img/task-details/icon-word.png" mode="aspectFill">
						</image>
						<text class="size-24 text-color-666">资金证明资料</text>
					</view>
					<image class="delete-iocn wh-25" src="/static/img/information/hint-subtract.png" mode=""></image>
				</view>
				<view class="sys-from-background-color row-c p-20 r-20">
					<image class="wh-80 m-r20" src="/static/img/task-details/add-file.png" mode="aspectFill">
					</image>
					<view class="column">
						<text class="select-file size-24">选择文件</text>
						<text class="size-24 text-color-666">支持上传文件：pdf、word、excel、ppt</text>
					</view>
				</view>
			</view>
		</view>
		<EnButton v-if="is_button"></EnButton>
	</view>
</template>

<script>
	export default {
		props: {
			is_button: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.textarea {
		width: calc(100% - 40rpx);
		max-height: 100rpx;
	}

	.image-content {
		display: flex;
		flex-wrap: wrap;

		.image-box {
			position: relative;

			.image-item {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
			}

			.delete-iocn {
				position: absolute;
				right: 12rpx;
				top: 12rpx;
			}
		}

		.add-image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 10rpx;
			background: #F7F9FE;
			border: 1rpx dashed #999999;
		}
	}

	.select-file {
		width: 132rpx;
		height: 44rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1rpx solid #DDDDDD;
		line-height: 44rpx;
		text-align: center;
		display: inline-block;
		margin-bottom: 10rpx;
	}
</style>