flying-monkey/pages/workOrder/workOrder.vue

<template>
    <view class="content">
        <statusNav navBarTitle="处理工单"></statusNav>

        <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/微信图片_20220113152400.png" mode="aspectFill"></image>
                        <image class="img" src="../../static/del/微信图片_20220113152400.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>
</template>

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

            }
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        padding-top: 80rpx;
        padding-bottom: 80rpx;
    }
.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>