<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" 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" 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; } .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; } </style>