flying-monkey/pages/workOrder/workOrder.vue

<template>
    <view class="content">
        <statusNav navBarTitle="处理工单"></statusNav>
        <container-subgroup-two>
    <view slot="content" style="margin: 0 -25rpx;">
    <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" 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: {

        }
    }
</script>

<style>

    .submit-button {
        width: 686rpx;
        border-radius: 50rpx;
        height: 90rpx;
        background-color: #02A2ea;
        line-height: 90rpx;
        color: #FFFFFF;
        margin-top: 60rpx;
        text-align: center;
        font-size: 30rpx;
    }

    .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>