flying-monkey/pages/workOrder/workOrder.vue

<template>
    <view class="content">
        <statusNav returnColor="#c2c2c2" navBarTitle="处理工单"></statusNav>
        <container-subgroup-two>
            <view slot="content" style="margin: -20rpx -25rpx 0rpx;">
                <view class="work-order-schedule">
                    <view class="li">
                        <view class="icon on icon-after">
                            1
                        </view>
                        <view class="text">
                            签到执行
                        </view>
                    </view>
                    <view class="li">
                        <view class="icon icon-after">
                            2

                        </view>
                        <view class="text">
                            填写维保单
                        </view>
                    </view>
                    <view class="li">
                        <view class="icon">
                            3
                        </view>
                        <view class="text">
                            结算审核
                        </view>
                    </view>
                </view>

                <view class="work-order-from">
                    <view class="li">
                        <view class="title">
                            工单编号：

                        </view>
                        <input type="text" class="input" placeholder="" value="GD20211203-001" />

                    </view>

                    <view class="li">
                        <view class="title">
                            项目编号：
                        </view>
                        <input type="text" class="input" placeholder="" value="GD20211203-001" />

                    </view>
                    <view class="li">
                        <view class="title">
                            项目名称：
                        </view>
                        <input type="text" class="input input-black" placeholder="" value="湖南省林业科学院11楼会议室P2.5" />
                    </view>
                    <view class="li">
                        <view class="title">
                            产品类型：
                            
                        </view>
                        <input type="text" class="input" placeholder="" value="Q2.5-E" />

                    </view>
                    <view class="li">
                        <view class="title">
                            安装位置：
                        </view>
                        <input type="text" class="input" placeholder="" value="详细地址+某某栋11楼会议室" />

                    </view>
                    <view class="li">
                        <view class="title">
                            故障类型：
                        </view>
                        <input type="text" class="input" placeholder="" value="供电不足" />

                    </view>
                    <view class="li">
                        <view class="title">
                            紧急程度：
                        </view>
                        <input type="text" class="input" placeholder="" value="紧急" />

                    </view>
                    <view class="li">
                        <view class="title">

                            故障说明：
                        </view>

                        <textarea auto-height class="input"
                            value="*********************************************************************************************************"
                            placeholder="" />
                    </view>
                    <view class="li">
                        <view class="title">

                            故障图片：
                        </view>

                        <view class="input">
                            <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
                            <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>



                <view class="work-order-from">
                    <view class="li">
                        <view class="title">
                            报 单 人：
                        </view>
                        <input type="text" class="input" placeholder="" value="林某" />

                    </view>

                    <view class="li">
                        <view class="title">
                            报单时间：
                        </view>
                        <input type="text" class="input" placeholder="" value="2021/12/3 12:00:05" />

                    </view>
                    <view class="li">
                        <view class="title">
                            服务方式：
                        </view>
                        <input type="text" class="input input-black" placeholder="" value="上门服务" />

                    </view>
                    <view class="li">
                        <view class="title">
                            定位地址：
                        </view>
                        <input type="text" class="input" placeholder="" value="*******************************" />

                    </view>
                </view>

                <button class="submit-button" @click="goWorkOrderThree()" type="default">签到</button>
            </view>
        </container-subgroup-two>

    </view>
</template>

<script>
    import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
    import statusNav from '../../components/status-nav.vue';
    import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
    export default {
        components: {
            footTabOne,
            statusNav,
            containerSubgroupTwo
        },
        data() {
            return {

            }
        },
        methods: {
            goWorkOrderThree() {
                uni.navigateTo({
                    url: "/pages/workOrder/workorderTwo"
                })
            }
        }
    }
</script>

<style>
    .submit-button {
        margin-top: 60rpx;
    }

    .work-order-schedule {
        display: flex;
        padding: 22rpx 29rpx;
        margin-top: 10rpx;
        background-color: #FFFFFF;
        justify-content: space-between;
    }

    .work-order-schedule .icon {
        width: 38rpx;
        height: 38rpx;
        color: #FFFFFF;
        margin: auto;
        position: relative;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        text-align: center;
        line-height: 38rpx;
        background-color: #999999;
        border-radius: 50%;

    }

    .work-order-schedule .on {
        background-color: #5391F3
    }

    .work-order-schedule .text {
        font-size: 24rpx;
        color: #333333;
    }

    .work-order-schedule .icon-after::after {
        content: "";
        width: 265rpx;
        height: 2rpx;
        background-color: #999999;
        position: absolute;
        top: 19rpx;
        left: 38rpx;
    }

    .work-order-from {
        margin-top: 10rpx;
        background-color: #FFFFFF;
    }

    .work-order-from .li {
        display: flex;
        padding: 20rpx 40rpx;
        border-bottom: 2rpx solid #ececec;
    }

    .work-order-from .li .title {
        font-size: 26rpx;
        width: 133rpx;


    }

    .work-order-from .li .input {
        font-size: 24rpx;
        color: #8b8b8b;
        flex: 1;
        padding-left: 15rpx;
    }

    .work-order-from .li .input .img {
        width: 169rpx;
        height: 127rpx;
        margin-right: 10rpx;
    }

    .work-order-from .li .input-black {
        color: #292929;
    }
</style>