ezhizao_dms_app/pages/handlingList/pending.vue

<template>

        <view class="uni-column" style="height: 100%;">
                <scroll-view class="scroll-container" scroll-y style="padding: 24rpx 24rpx 0 24rpx ;height: 90%;">
                        <view v-for="(item, index) in listData" :key="index" class="list-item">
                                <view class="title-container uni-row">
                                        <view class="title uni-row">
                                                <text class="label">{{ item['door'] }}</text>
                                                <text class="label code">{{ item['process'] }}</text>
                                                <text class="label code" style="margin-left: 16rpx;">→</text>
                                                <text class="label code" style="margin-left: 16rpx;">{{ item['car'] }}</text>
                                        </view>

                                        <view class="right-info uni-row">
                                                <view class="uni-row"><text class="label right">待周转</text></view>
                                        </view>
                                </view>
                                <view class="item-info uni-row"> <text class="label ">批次</text>
                                        <text class="label right">{{ item['batch'] }}</text>
                                </view>
                                <view class="item-info uni-row"> <text class="label">箱数</text>
                                        <text class="label right ">{{ item['cases'] }}</text>
                                </view>
                                <view class="item-info uni-row">
                                        <text class="label">数量</text>
                                        <text class="label right">{{ item['amount'] }}</text>
                                </view>
                                <view class="item-info uni-row">
                                        <text class="label">箱号</text>
                                        <text class="label right">{{ item['caseNumber']}}</text>
                                </view>
                                <view class="item-info uni-row">
                                        <text class="label">申请时间</text>
                                        <text class="label right">{{ item['applyTime']}}</text>
                                </view>
                                <view class="item-info uni-row">
                                        <text class="label">申请人</text>
                                        <text class="label right">{{ item['applier']}}</text>
                                </view>
                        </view>
                </scroll-view>
                <view class="bottom uni-row">
                        <button class="bottom-btn ">开始周转</button>
                </view>
        </view>


</template>

<script>
        export default {
                data() {
                        return {
                                listData: [
                                        {
                                                door: "A门",
                                                process: "粗磨",
                                                car: "NC车",
                                                batch: "MBA5444002",
                                                cases: 6,
                                                amount: 780,
                                                caseNumber: "X12522、X55222、X15522、J5211、J5211",
                                                applyTime:"2023-06-15 15:52:12",
                                                applier:"王伟"

                                        },
                                        {
                                                door: "B门",
                                                process: "手工校直",
                                                car: "粗磨Ⅱ",
                                                batch: "MBA5444002",
                                                cases: 6,
                                                amount: 780,
                                                caseNumber: "X12522、X55222、X15522、J5211、J5211",
                                                applyTime:"2023-06-15 15:52:12",
                                                applier:"王伟"
                                                

                                        }

                                ],
                                onLoad() {

                                },
                                methods: {

                                },

                        };
                },
        };
</script>

<style lang="scss">
        .list-item {
                background-color: #fff;
                position: relative;
                padding: 16rpx;
                padding-bottom: 24rpx;
                margin-bottom: 24rpx;
                border-radius: 8rpx;

                .title-container {
                        justify-content: space-between;
                        margin-top: 8rpx;
                        margin-bottom: 16rpx;

                        .title {
                                height: 48rpx;
                                align-items: center;

                                .label {
                                        color: #1684fc;
                                        font-size: 32rpx;
                                        font-weight: bold;

                                        &.code {
                                                color: #000000;
                                                margin-left: 32rpx;
                                        }
                                }
                        }
                }

                .item-info {
                        margin-bottom: 16rpx;

                        .label {
                                font-size: 28rpx;
                                width: 220rpx;
                                color: #808080;

                                &.right {
                                        flex: 1;
                                        color: #000000;
                                }
                        }
                }

                .right-info {
                        justify-content: flex-end;
                        margin-top: 2rpx;

                        .label {
                                font-size: 28rpx;
                                color: #808080;
                        }
                }
        }

        .bottom {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 100rpx;
                padding: 16rpx 40rpx;
                
                background-color: #FFFFFF;

                .bottom-btn {
                        padding-left: 0;
                        padding-top: 4rpx;
                        flex: 1;
                        font-size: 28rpx;
                        color: #FFFFFF;
                        background-color: #1684fc;
                }
        }
</style>