822 lines
30 KiB
Vue
822 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<statusNav navBarTitle="工单详情"></statusNav>
|
|||
|
|
|
|||
|
|
<view class="details-nav">
|
|||
|
|
<view class="li" @click="detailsNavpa(index)" :class="item.state?'on':''"
|
|||
|
|
v-for="(item,index) in detailsNav">
|
|||
|
|
{{item.title}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<swiper class="swiper" @change="swiperCurrentFun" :current="swiperCurrent" :style="'height:'+swiHeight+'px'">
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="swiper-item uni-bg-red">
|
|||
|
|
<view id="swi1">
|
|||
|
|
<view class="work-order-from">
|
|||
|
|
<view class="state">
|
|||
|
|
状态：待维修
|
|||
|
|
</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="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" placeholder="" value="上门服务" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
定位地址：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input" placeholder=""
|
|||
|
|
value="*******************************" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="swiper-item uni-bg-green">
|
|||
|
|
<view id="swi2">
|
|||
|
|
|
|||
|
|
<view class="work-order-from">
|
|||
|
|
<view class="state" style="background-image: url(../../static/iocn/swi2.png);">
|
|||
|
|
状态：已完成
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
开始时间：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="2022-01-25 09:39" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
结束时间：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="2022-01-25 15:30" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
维保用时：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input input-black" placeholder="" value="5小时51分钟" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
维保费用：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="¥500.00元" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
等待时长：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="1天6小时35分钟" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
主维保人：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="陈志远" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
更换配件：
|
|||
|
|
</view>
|
|||
|
|
<view class="rideo">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</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 add-display">
|
|||
|
|
<view class="">
|
|||
|
|
<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="li">
|
|||
|
|
<view class="title">
|
|||
|
|
|
|||
|
|
故障原因：
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<textarea auto-height class="input "
|
|||
|
|
value="*********************************************************************************************************"
|
|||
|
|
placeholder="" />
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="title">
|
|||
|
|
主维保人：
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="input " placeholder="" value="罗帅 陈志远" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="swiper-item uni-bg-blue">
|
|||
|
|
<view id="swi3">
|
|||
|
|
|
|||
|
|
<view class="change-accessory">
|
|||
|
|
<view class="state" style="background-image: url(../../static/iocn/siw3.png);">
|
|||
|
|
状态：待结算
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="li">
|
|||
|
|
<image class="img" src="../../static/del/QQ截图20220210213041.png" mode="aspectFill"></image>
|
|||
|
|
<view class="text-content">
|
|||
|
|
<view class="title">
|
|||
|
|
|
|||
|
|
<view class="text clips1">
|
|||
|
|
全彩LED显示屏电源
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
1011-1
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
配件品牌：华鑫电源
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
规格型号：5A-75B
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
使用数量：1张
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<swiper-item>
|
|||
|
|
<view class="swiper-item uni-bg-blue">
|
|||
|
|
<view id="swi4">
|
|||
|
|
<view class="course-nav">
|
|||
|
|
<view class="state">
|
|||
|
|
状态：待维修
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
报修时间：2022年02月10日
|
|||
|
|
</view>
|
|||
|
|
<view class="code">
|
|||
|
|
<view class="">
|
|||
|
|
工单编号：1254635996212345
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @click="copy('1254635996212345')">
|
|||
|
|
复制
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="course-content">
|
|||
|
|
<view class="record-content">
|
|||
|
|
<view class="title">
|
|||
|
|
过程追踪
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="li on">
|
|||
|
|
<view class="icon">
|
|||
|
|
<view class="icon-con">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text clips2">
|
|||
|
|
【维修中】工号00234工程师将于16:00到达现场为您 服务。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-06-15 15：30
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text clips1">
|
|||
|
|
【工程师已接单】工号00234工程师已接单
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-06-15 14:30
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text">
|
|||
|
|
“黑屏”故障 【某某】已处理。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-05-15 16:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text">
|
|||
|
|
“黑屏”故障 【某某】已处理。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-05-15 16:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text">
|
|||
|
|
“黑屏”故障 【某某】已处理。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-05-15 16:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text">
|
|||
|
|
“黑屏”故障 【某某】已处理。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-05-15 16:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<view class="icon">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="text">
|
|||
|
|
“黑屏”故障 【某某】已处理。
|
|||
|
|
</view>
|
|||
|
|
<view class="date">
|
|||
|
|
2020-05-15 16:00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="button">
|
|||
|
|
我要评价
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</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 {
|
|||
|
|
swiHeight: 700,
|
|||
|
|
swiperCurrent: 0,
|
|||
|
|
|
|||
|
|
detailsNav: [{
|
|||
|
|
title: "基础信息",
|
|||
|
|
state: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "处理详情",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "更换配件",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "处理过程",
|
|||
|
|
state: false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select('#swi1').boundingClientRect(data => {
|
|||
|
|
|
|||
|
|
this.swiHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
this.detailsNavFun(0)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
copy(value) {
|
|||
|
|
//提示模板
|
|||
|
|
uni.showModal({
|
|||
|
|
content: value, //模板中提示的内容
|
|||
|
|
confirmText: '复制内容',
|
|||
|
|
success: () => { //点击复制内容的后调函数
|
|||
|
|
//uni.setClipboardData方法就是讲内容复制到粘贴板
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: value, //要被复制的内容
|
|||
|
|
success: () => { //复制成功的回调函数
|
|||
|
|
uni.showToast({ //提示
|
|||
|
|
title: '复制成功'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
swiperCurrentFun(data) {
|
|||
|
|
|
|||
|
|
console.log(data.detail.current)
|
|||
|
|
|
|||
|
|
if(data.detail.current==0){
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select('#swi1').boundingClientRect(data => {
|
|||
|
|
|
|||
|
|
this.swiHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
}else if(data.detail.current==1){
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select('#swi2').boundingClientRect(data => {
|
|||
|
|
|
|||
|
|
this.swiHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
}else if(data.detail.current==2){
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select('#swi3').boundingClientRect(data => {
|
|||
|
|
|
|||
|
|
this.swiHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
}else if(data.detail.current==3){
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select('#swi4').boundingClientRect(data => {
|
|||
|
|
|
|||
|
|
this.swiHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
}
|
|||
|
|
this.detailsNavFun(data.detail.current)
|
|||
|
|
},
|
|||
|
|
detailsNavFun(index) {
|
|||
|
|
for (var i = 0; i < this.detailsNav.length; i++) {
|
|||
|
|
this.detailsNav[i].state = false
|
|||
|
|
}
|
|||
|
|
this.detailsNav[index].state = true
|
|||
|
|
},
|
|||
|
|
detailsNavpa(index) {
|
|||
|
|
this.swiperCurrent = index
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.content {
|
|||
|
|
padding-top: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper {
|
|||
|
|
min-height: 88vh;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.state {
|
|||
|
|
/* background-color:
|
|||
|
|
*/
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
width: 164rpx;
|
|||
|
|
height: 54rpx;
|
|||
|
|
background-image: url(../../static/iocn/sta.png);
|
|||
|
|
border-radius: 0 20rpx 20rpx 0;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work-order-from .li .input-black {
|
|||
|
|
color: #292929;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-nav {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
border-bottom: solid #D5D4D4 2rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-nav .li {
|
|||
|
|
width: 130rpx;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
padding-bottom: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-nav .on {
|
|||
|
|
color: #00A2E9;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-nav .on::after {
|
|||
|
|
content: "";
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0rpx;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
background-color: #00A2E9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-nav {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-nav .date {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
padding: 20rpx 34rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-nav .code {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 20rpx 34rpx;
|
|||
|
|
padding-top: 0rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-nav .code .btn {
|
|||
|
|
background-color: #eeeeee;
|
|||
|
|
width: 73rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
margin-left: 28rpx;
|
|||
|
|
border: solid #999999 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content {
|
|||
|
|
margin-top: 33rpx;
|
|||
|
|
|
|||
|
|
padding: 0 34rpx;
|
|||
|
|
}
|
|||
|
|
.course-content{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
padding-bottom: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .title {
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-bottom: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .li {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .li .icon {
|
|||
|
|
width: 14rpx;
|
|||
|
|
height: 14rpx;
|
|||
|
|
margin-right: 50rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #999999;
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .li .icon::after {
|
|||
|
|
content: "";
|
|||
|
|
width: 1rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 7rpx;
|
|||
|
|
height: 106rpx;
|
|||
|
|
background-color: #999999;
|
|||
|
|
top: 14rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .li .con {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on .icon {
|
|||
|
|
background-color: #5caefb;
|
|||
|
|
width: 21rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
|
|||
|
|
margin-left: 1rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on .icon .icon-con {
|
|||
|
|
background-color: #0084ff;
|
|||
|
|
width: 13rpx;
|
|||
|
|
height: 13rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on .icon::after {
|
|||
|
|
content: "";
|
|||
|
|
width: 1rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 9rpx;
|
|||
|
|
height: 167rpx;
|
|||
|
|
z-index: -1;
|
|||
|
|
background-color: #0084ff;
|
|||
|
|
top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on .con {
|
|||
|
|
display: block;
|
|||
|
|
color: #0084ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on .con .text {
|
|||
|
|
margin-bottom: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .li .con .text {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-content .list .on {
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
width: 315rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background-color: #00A2E9;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 101rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.work-order-from .li .input .add-img {
|
|||
|
|
width: 136rpx;
|
|||
|
|
height: 127rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #DCDCDC;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work-order-from .li .input .add-img .icon {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.work-order-from .li .add-display {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .img{
|
|||
|
|
width: 185rpx;
|
|||
|
|
height: 185rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li{
|
|||
|
|
padding: 34rpx;
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .text-content {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .text-content .title{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .text-content .title .text{
|
|||
|
|
width: 77%;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .text-content .date{
|
|||
|
|
color: #ff0000;
|
|||
|
|
font-size: 24rpx;font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.change-accessory .li .text-content .text{
|
|||
|
|
width: auto;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
</style>
|