wx-qhb/components/kj-flow/kj-flow.vue

<template>
	<view>
		<view class="u-flex u-row-between">
			<view class="" style="width: 28px;height: 28px;"></view>
			<view class="title">跨境物流</view>
			<u-icon name="close" @click="close" color="background: #333333;" size="28"></u-icon>
		</view>
		<view class="u-flex" style="margin-top: 56rpx;">
			<scroll-view scroll-y="true" class="left">
				<view v-for="(item,idx) in 6" :key="idx" @click="changea(idx)"
					style="height: 134rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					:style="{background:idx==leftchange? '':'#F7F7F7'}">
					<view class="ititle" :style="{fontWeight:idx==leftchange?'600':''}">海运散货</view>
					<view class="itime" v-if="idx==leftchange">预计到货时间 </view>
					<view class="itime" v-if="idx==leftchange">2023-12-31</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" style="margin-left: 36rpx;">
				<view v-for="(item,idx) in 6" :key="idx" @click="change(idx)"
					style="height: 134rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;" class="iitem">
					<view class="ititle u-flex u-row-between" style="width: 100%;" >
						<view class="ititle">发柜时间 2023-12-15</view>
						<view>海运1号柜</view>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 16rpx;width: 100%;">
						<view class="price">
							<text style='font-size="24rpx"'>¥</text>
							<text style='font-size="32rpx"'>12</text>
							<text style='font-size="28rpx"'>kg</text>
						</view>
						<u-icon v-if="idx==rightchange" name="checkbox-mark" color="rgba(248, 50, 36, 1)" size="28"></u-icon>
						<view v-else class="" style="width: 28px;height: 28px;"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			<view class="btn" @click="enter">{{i18n.enter}}</view>
		</view>
		<view class=""></view>
	</view>
</template>

<script>
	export default {
		name: "kj-flow",
		data() {
			return {
				leftchange:0,
				rightchange:0,
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods:{
			//左边切换
			changea(index){
				this.leftchange = index
				console.log(this.leftchange);
			},
			//右边切换
			change(idx){
				this.rightchange = idx
			},
			close(){
				this.$emit('close')
			},
			enter(){
				this.$emit('success')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iitem{
		border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
		box-sizing: border-box;
	}
	.price {
		font-family: SFPro, SFPro;
		font-weight: 500;
		font-size: 24rpx;
		color: #F83224;
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
	}

	.right {
		flex: 1;
		width: 474rpx;
		height: 642rpx;
	}

	.bottom {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 702rpx;
		height: 84rpx;
		background: #F83224;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}

	.title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
	}

	.left {
		width: 212rpx;
		height: 642rpx;
	}

	.ititle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}

	.itime {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #333333;
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
	}
</style>