pad-app/pages/index/instruct.vue

<template>
	<view class="app">
		<head-view title="船名/航次"></head-view>
		<view class="content">
			<view class="form">
				<view class="input">
					<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="船名/航次"
						@iconClick="iconClick">
					</uni-easyinput>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港区">
					</uni-data-select>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="贸易类型">
					</uni-data-select>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="品牌">
					</uni-data-select>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="车型">
					</uni-data-select>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="港口">
					</uni-data-select>
				</view>
				<view class="select">
					<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="计划状态">
					</uni-data-select>
				</view>
			</view>
			<view class="uni-list">
				<radio-group class="group" @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />{{item.name}}
						</view>
					</label>
				</radio-group>
			</view>
			<view class="buttonlist">
				<button class="button" type="default">指令发送</button>
				<button class="button" type="default">装船要求</button>
				<button class="button" type="default">刷新</button>
			</view>
			<view class="tablist">
				<view class="tab" :class="active==1?'active':''" type="default" @click="active=1">未发送</view>
				<view class="tab" :class="active==2?'active':''" type="default" @click="active=2">已发送</view>
			</view>
			<view class="itemList">
				<view class="item" v-for="item in itemList" :key="item.index">
					<view class="row">
						<view class="col weight">
							船舱层数：5层3舱
						</view>
						<view class="col">
							数量：1,000
						</view>
						<view class="col">
							港口：厦门港
						</view>
					</view>
					<view class="row">
						<view class="col weight">
							计划状态：已发送
						</view>
						<view class="col">
							负责人：我是一个负责人
						</view>
						<view class="col">
							发送时间：2023/09/09 16:00
						</view>
					</view>
					<view class="rowFoot">
						<view class="col">
							装船进度
						</view>
						<view class="col">
							<view class="progress-box">
								<progress :percent="item" show-info stroke-width="3" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import HeadView from '@/components/head-view/head-view.vue';
	export default {
		data() {
			return {
				value1: "",
				value: '',
				itemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
				range: [1],
				items: [{
						value: '1',
						name: '总指令',
						checked: 'true'
					},
					{
						value: '2',
						name: '分指令'
					},
					{
						value: '3',
						name: '配载图'
					},
					{
						value: '4',
						name: '场位图'
					},
				],
				current: 0,
				active: 1
			}
		},
		onLoad() {

		},
		components: {
			HeadView
		},
		methods: {
			change() {},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	};
</script>

<style>
	.content {
		padding: 20px;

		.form {
			display: flex;

			.select {
				width: 100px;

				margin-left: 15px;
			}

			.input {
				width: 200px;
				height: 35px;
				line-height: 35px;
			}
		}

		.uni-list {
			margin-top: 20px;

			.group {
				width: 360px;
				height: 50px;
				display: flex;
				justify-content: space-between;
			}
		}

		.buttonlist {
			width: 340px;
			display: flex;
			justify-content: space-between;

			.button {
				width: 100px;
				height: 40px;
				line-height: 40px;
			}
		}

		.tablist {
			width: 175px;
			height: 60px;
			line-height: 60px;
			font-size: 21px;
			display: flex;
			justify-content: space-between;

			.tabs {
				width: 80px;
				height: 60px;
				border-bottom: 2rpx solid #ebebeb;
			}

			.active {
				color: #1890ff;
				border-bottom: 2rpx solid #1890ff;
			}

		}

		.itemList {
			margin-top: 30px;

			.item {
				height: 110px;
				padding: 20px;
				border-bottom: 2px solid #e9e9e9;
				display: flex;
				justify-content: space-between;

				.weight {
					font-weight: 900;
				}

				.row {
					width: 30%;
					flex-direction: column;
					display: flex;
					justify-content: space-between;
				}

				.rowFoot {
					width: 40%;
					flex-direction: column;
					display: flex;
					justify-content: space-around;
					color: #1890ff;
				}
			}
		}
	}
</style>