790 lines
28 KiB
Vue
790 lines
28 KiB
Vue
<template>
|
||
<view class="content" >
|
||
<statusNav returnColor="#c2c2c2" navBarTitle="工单详情"></statusNav>
|
||
<container-subgroup-two>
|
||
<view slot="content" style="margin:-30rpx -30rpx 0 -30rpx;">
|
||
<view class="details-nav" :style="{top:statusBarHeight + 'px'}">
|
||
<view class="li pad-sx36" @click="detailsNavpa(index)" :class="item.state?'on':''"
|
||
v-for="(item,index) in detailsNav" :key="index">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
<swiper class="swiper" @change="swiperCurrentFun" :current="swiperCurrent"
|
||
:style="'height:'+swiHeight+'px'">
|
||
<!-- 基础信息 start -->
|
||
<swiper-item>
|
||
<view class="swiper-item uni-bg-red">
|
||
<view id="swi1">
|
||
<view class="work-order-from">
|
||
<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
|
||
<view class="li" style="margin-top: 20rpx;">
|
||
<view class="title">工单编号：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.order_number" />
|
||
</view>
|
||
|
||
<view class="li">
|
||
<view class="title">项目编号：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.project_number" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">项目名称：</view>
|
||
<input type="text" disabled class="input input-black" :value="detailObj.project_name" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">产品类型：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.product_type" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">安装位置：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.installation_location" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保类型：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.fault_type" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">紧急程度：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.emergency_level_view" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保说明：</view>
|
||
<textarea style="overflow: hidden;overflow-y: scroll;height: auto;max-height: 200rpx;" disabled class="input" :value="detailObj.failure_description" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保图片：</view>
|
||
<view class="input">
|
||
<image class="img" v-for="(item,index) in detailObj.fault_picture" :key="index" :src="item" mode="aspectFill" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="work-order-from">
|
||
<view class="li">
|
||
<view class="title">报 单 人：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.order_contact" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">报单时间：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.order_times" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">服务方式：</view>
|
||
<input type="text" disabled class="input input-black" :value="detailObj.service_method_view" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">定位地址：</view>
|
||
<input type="text" disabled class="input" :value="detailObj.service_address" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- 基础信息 end -->
|
||
|
||
<!-- 处理详情 start -->
|
||
<swiper-item>
|
||
<view class="swiper-item uni-bg-green">
|
||
<view id="swi2">
|
||
<view class="work-order-from">
|
||
<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
|
||
<view class="li" style="margin-top: 20rpx;">
|
||
<view class="title">开始时间：</view>
|
||
<input type="text" disabled class="input " :value="handleDetail.start_times" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">结束时间：</view>
|
||
<input type="text" disabled class="input " :value="handleDetail.completion_times" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保用时： </view>
|
||
<input type="text" disabled class="input input-black" :value="handleDetail.maintenance_time" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保费用：</view>
|
||
<input type="text" disabled class="input " :value="`¥${handleDetail.pay_price}元`" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">等待时长：</view>
|
||
<input type="text" disabled class="input " :value="handleDetail.waiting_time" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">主维保人：</view>
|
||
<input type="text" disabled class="input " :value="handleDetail.maintenance_name" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">更换配件：</view>
|
||
<view class="rideo">
|
||
<view class="isrideo">
|
||
<view class="icon " :class="handleDetail.is_accessory == 1 ?'on':''">
|
||
<view class="icon-content"></view>
|
||
</view>
|
||
<view class="fon24" style="color: #8b8b8b;">是</view>
|
||
</view>
|
||
<view class="isrideo">
|
||
<view class="icon" :class="handleDetail.is_accessory == 1 ?'':'on'">
|
||
<view class="icon-content"></view>
|
||
</view>
|
||
<view class="fon24" style="color: #8b8b8b;">否</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">工作描述：</view>
|
||
<textarea style="overflow: hidden;overflow-y: scroll;height: auto;max-height: 200rpx;" disabled class="input " :value="handleDetail.work_explanation"/>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保图片：</view>
|
||
<view class="input add-display">
|
||
<view class="">
|
||
<image class="img" v-for="(item,index) in handleDetail.maintenance_pictures" :key="index" :src="item" mode="aspectFill" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保原因：</view>
|
||
<textarea auto-height disabled class="input " :value="handleDetail.failure_reason"/>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保人员： </view>
|
||
<input type="text" disabled class="input " :value="handleDetail.maintenance_more" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- 处理详情 end -->
|
||
|
||
|
||
<!-- 更换配件 start -->
|
||
<swiper-item>
|
||
<view class="swiper-item uni-bg-blue">
|
||
<view id="swi3">
|
||
<view class="change-accessory">
|
||
<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
|
||
<view class="list">
|
||
<view class="li" v-for="(item,index) in replaceParts" :key="index">
|
||
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></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 class="li">
|
||
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load>
|
||
</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 class="li">
|
||
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></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>
|
||
<!-- 更换配件 end -->
|
||
|
||
<!-- 处理过程 start -->
|
||
<swiper-item>
|
||
<view class="swiper-item uni-bg-blue">
|
||
<view id="swi4">
|
||
<view class="course-nav">
|
||
<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
|
||
<view class="date">报修时间：{{handleProcess.order_times}}</view>
|
||
<view class="code">
|
||
<view class="">工单编号：{{handleProcess.order_number}}</view>
|
||
<view class="btn" @click="copy(handleProcess.order_number)">复制</view>
|
||
</view>
|
||
</view>
|
||
<view class="course-content">
|
||
<view class="record-content">
|
||
<view class="title">过程追踪</view>
|
||
<view class="list">
|
||
<view class="li pad-z40 fon27 col9 pad-x20" :class="index==0 ? 'activeTrack' : ''" v-for="(item,index) in handleProcess.time_line" :key="index">
|
||
<view class="disac fw line-h40">
|
||
<view class="text">{{item.value}}</view>
|
||
<view class="date">{{item.create_time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button" @tap="goEvaluate()">我要评价</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- 处理过程 end -->
|
||
</swiper>
|
||
</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"
|
||
import {handleWorkOrderGet} from '../../jsFile/public-api.js';
|
||
export default {
|
||
components: {
|
||
footTabOne,
|
||
statusNav,
|
||
containerSubgroupTwo
|
||
},
|
||
data() {
|
||
return {
|
||
swiperCurrent: 0,
|
||
swiHeight:0,
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 40,
|
||
statusText:'',//状态文字
|
||
statusColor:'',//状态背景颜色
|
||
detailsNav: [{
|
||
title: "基础信息",
|
||
state: true
|
||
},
|
||
{
|
||
title: "处理详情",
|
||
state: false
|
||
},
|
||
{
|
||
title: "更换配件",
|
||
state: false
|
||
},
|
||
{
|
||
title: "处理过程",
|
||
state: false
|
||
},
|
||
|
||
],
|
||
orderId:'',//订单id
|
||
detailObj:{},//基础信息
|
||
handleDetail:{},//处理详情
|
||
replaceParts:[],//更换配件
|
||
handleProcess:{}//处理过程
|
||
}
|
||
},
|
||
mounted() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('#swi1').boundingClientRect(data => {
|
||
this.swiHeight = data.height - 100
|
||
}).exec();
|
||
this.detailsNavFun(0)
|
||
|
||
},
|
||
onLoad(op) {
|
||
this.statusText = op.statusText;
|
||
this.statusColor = op.statusColor;
|
||
console.log(this.statusColor,299);
|
||
if(op.orderId!=undefined) {
|
||
this.orderId = op.orderId;
|
||
// 调取获取工单详情事件
|
||
this.getDetail(1);
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取工单详情事件
|
||
getDetail(type){
|
||
let params = {
|
||
order_id:this.orderId,
|
||
type
|
||
}
|
||
this.$requst.get('/universal/api.order/order_info',params).then(res=>{
|
||
if(res.code) {
|
||
switch (type){
|
||
case 1:
|
||
this.detailObj = res.data;
|
||
break;
|
||
case 2:
|
||
this.handleDetail = res.data;
|
||
break;
|
||
case 3:
|
||
this.replaceParts = res.data.accessory;
|
||
break;
|
||
case 4:
|
||
this.handleProcess = res.data;
|
||
break;
|
||
}
|
||
setTimeout(()=>{
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select(`#swi${type}`).boundingClientRect(data => {
|
||
this.swiHeight = data.height
|
||
}).exec();
|
||
},100)
|
||
}
|
||
})
|
||
},
|
||
copy(value) {
|
||
//提示模板
|
||
uni.showModal({
|
||
content: value, //模板中提示的内容
|
||
confirmText: '复制内容',
|
||
success: () => { //点击复制内容的后调函数
|
||
//uni.setClipboardData方法就是讲内容复制到粘贴板
|
||
uni.setClipboardData({
|
||
data: value, //要被复制的内容
|
||
success: () => { //复制成功的回调函数
|
||
uni.showToast({ //提示
|
||
title: '复制成功'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
swiperCurrentFun(data) {
|
||
let current = data.detail.current;
|
||
// 调用工单详情切换事件
|
||
this.detailSwitch(current);
|
||
this.detailsNavFun(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;
|
||
// 调用工单详情切换事件
|
||
this.detailSwitch(index);
|
||
},
|
||
// 工单详情切换事件
|
||
detailSwitch(index){
|
||
let type = [1,2,3,4][index];
|
||
this.getDetail(type);
|
||
},
|
||
// 前往评价页面
|
||
goEvaluate() {
|
||
uni.navigateTo({
|
||
url:`/pagesB/i-want-evaluate/i-want-evaluate?id=${this.orderId}`
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {}
|
||
|
||
.swiper {
|
||
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;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.work-order-from .li {
|
||
display: flex;
|
||
padding: 20rpx 40rpx;
|
||
border-bottom: 2rpx solid #ececec;
|
||
}
|
||
|
||
.work-order-from .li .title {
|
||
font-size: 26rpx;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
/* flex: 1; */
|
||
}
|
||
|
||
.work-order-from .li .input {
|
||
font-size: 24rpx;
|
||
color: #8b8b8b;
|
||
width: 80%;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.work-order-from .li .input .img {
|
||
width: 169rpx;
|
||
height: 127rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.state {
|
||
display: inline-block;
|
||
padding: 2rpx 20rpx 2rpx 16rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
border-radius: 0 25rpx 25rpx 0;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
background-color: #dddddd;
|
||
box-shadow: 0rpx 6rpx 6rpx #999999;
|
||
}
|
||
|
||
.work-order-from .li .input-black {
|
||
color: #292929;
|
||
}
|
||
|
||
.details-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: solid #D5D4D4 2rpx;
|
||
padding: 0 24rpx;
|
||
|
||
|
||
position: sticky;
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
background-color: #F7F7F7;
|
||
left: 0rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.details-nav .li {
|
||
width: 130rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.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;
|
||
height: 40rpx;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
padding: 4rpx 20rpx;
|
||
margin-left: 28rpx;
|
||
border: solid #999999 2rpx;
|
||
}
|
||
|
||
.record-content {
|
||
|
||
padding: 0 34rpx;
|
||
}
|
||
|
||
.course-content {
|
||
background-color: #FFFFFF;
|
||
padding-bottom: 20rpx;
|
||
margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
|
||
.record-content .list .li {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.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: 2rpx;
|
||
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: 2rpx;
|
||
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: 50rpx;
|
||
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 {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.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: 10rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.work-order-from .rideo {
|
||
display: flex;
|
||
}
|
||
|
||
.work-order-from .isrideo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 41rpx;
|
||
}
|
||
|
||
.work-order-from .isrideo .icon {
|
||
width: 26rpx;
|
||
border: 2rpx solid #818181;
|
||
border-radius: 50%;
|
||
height: 26rpx;
|
||
margin-right: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.work-order-from .isrideo .icon .icon-content {
|
||
width: 19rpx;
|
||
height: 19rpx;
|
||
background-color: #818181;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.work-order-from .isrideo .on {
|
||
border: 2rpx solid #D81E06;
|
||
}
|
||
|
||
.work-order-from .isrideo .on .icon-content {
|
||
background-color: #D81E06
|
||
}
|
||
.record-content {
|
||
padding: 0 52rpx;
|
||
|
||
padding-top: 33rpx;
|
||
padding-bottom: 40rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.record-content .title {
|
||
color: #333333;
|
||
margin-left: -10rpx;
|
||
font-size: 36rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.record-content .list .li {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
border-left: 2rpx solid #999999;
|
||
|
||
}
|
||
.record-content .list .li::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: -8rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
background-color: #999999;
|
||
border-radius: 100%;
|
||
}
|
||
.record-content .list .activeTrack {
|
||
color: #0084ff;
|
||
padding-top: 0rpx;
|
||
}
|
||
.record-content .list .activeTrack::before {
|
||
background-color: rgba(0,132,255,.5);
|
||
top: -4rpx;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
left: -12rpx;
|
||
z-index: 1;
|
||
}
|
||
.record-content .list .activeTrack::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -8rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
background-color: #999999;
|
||
border-radius: 100%;
|
||
}
|
||
.record-content .list .activeTrack .line-h40 {
|
||
margin-top: -20rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
.record-content .list .date {
|
||
margin-left: 20rpx;
|
||
}
|
||
</style>
|