|
|
<script setup>
|
|
|
import DraggableButton from "@/pages/components/goHome.vue";
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年9月11日 19:24:50
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
nextTick
|
|
|
} from "vue";
|
|
|
import {
|
|
|
$api,
|
|
|
$response
|
|
|
} from "@/api";
|
|
|
import {
|
|
|
onShow
|
|
|
} from "@dcloudio/uni-app";
|
|
|
import wx from 'weixin-js-sdk'
|
|
|
import {
|
|
|
useStore
|
|
|
} from "@/store";
|
|
|
const $store = useStore();
|
|
|
const $props = defineProps({
|
|
|
id: {
|
|
|
type: String,
|
|
|
default: "0",
|
|
|
},
|
|
|
test: {
|
|
|
type: String,
|
|
|
default: "0",
|
|
|
},
|
|
|
});
|
|
|
let tips_popup = ref(null)
|
|
|
let erweima_popup = ref(null)
|
|
|
const fenzhen_list = ref(false);
|
|
|
const check_tip_show = ref(false);
|
|
|
const checkTipShow = (show, tj_number) => {
|
|
|
if (!!show) {
|
|
|
check_tip_show.value = true
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '所有项目已完成，请进行检后签到',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: function(res) {
|
|
|
if (!!res.confirm) {
|
|
|
CheckedSignIn(tj_number)
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
const CheckedSignIn = async (tj_number) => {
|
|
|
const response = await $api('CheckedSignIn', {
|
|
|
tj_number
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
window.location.reload()
|
|
|
})
|
|
|
}
|
|
|
const getFenzhenList = async (loading = true) => {
|
|
|
if (!!loading) {
|
|
|
// uni.showLoading();
|
|
|
}
|
|
|
const response = await $api("FenzhenList", {
|
|
|
id: $props.id,
|
|
|
});
|
|
|
//uni.hideLoading();
|
|
|
$response(response, () => {
|
|
|
fenzhen_list.value = response.data;
|
|
|
timelineSet(fenzhen_list.value.list)
|
|
|
if (!check_tip_show.value) {
|
|
|
checkTipShow(response.data.check_tip, response.data.info.tj_number)
|
|
|
if (!!check_tip_show.value) {
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
if (fenzhen_active.value !== -1) {
|
|
|
getFenzhenInfo(fenzhen_active.value)
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
if (!!window.location.href.includes('/pages/user/fenzhen/fenzhen')) {
|
|
|
if (!window.location.href.includes('192.168.1.118:5173')) {
|
|
|
if (erweimaText.value == '') {
|
|
|
getFenzhenList(false)
|
|
|
}
|
|
|
} else {
|
|
|
if (Number($props.test) === 1) {
|
|
|
if (erweimaText.value == '') {
|
|
|
getFenzhenList(false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}, 1000 * 10)
|
|
|
});
|
|
|
};
|
|
|
const timeline_max = ref(0)
|
|
|
const timeline_now = ref(0)
|
|
|
const timeline_step = ref(0)
|
|
|
const timelineSet = (list) => {
|
|
|
let maxcount = 0
|
|
|
let nowcount = 0
|
|
|
for (let i in list) {
|
|
|
if (!!list[i]['time']) {
|
|
|
maxcount++
|
|
|
if (Number(list[i]['status']) === 4) {
|
|
|
nowcount++
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
timeline_max.value = maxcount
|
|
|
timeline_now.value = nowcount
|
|
|
if (!!maxcount && !!nowcount) {
|
|
|
timeline_step.value = (nowcount / maxcount) * 100
|
|
|
} else {
|
|
|
timeline_step.value = 0
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const mountedAction = () => {
|
|
|
getFenzhenList();
|
|
|
};
|
|
|
|
|
|
const config_ref = ref(null);
|
|
|
const configRef = (e) => {
|
|
|
if (!config_ref.value) {
|
|
|
config_ref.value = e;
|
|
|
mountedAction();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const timeShow = (time) => {
|
|
|
let time_array = time.split(":");
|
|
|
return `${time_array[0]}:${time_array[1]}`;
|
|
|
};
|
|
|
|
|
|
const tip_show = ref(false);
|
|
|
const tip_content = ref('');
|
|
|
const getTipContent = async () => {
|
|
|
uni.showLoading();
|
|
|
const response = await $api("GetReadme");
|
|
|
uni.hideLoading();
|
|
|
$response(response, () => {
|
|
|
tip_content.value = response.data.content;
|
|
|
tip_show.value = true;
|
|
|
tips_popup.value.open()
|
|
|
});
|
|
|
};
|
|
|
const tipShowClick = () => {
|
|
|
|
|
|
getTipContent();
|
|
|
|
|
|
};
|
|
|
|
|
|
const toReport = () => {
|
|
|
wx.miniProgram.navigateTo({
|
|
|
url: '/pages/other/entry/index?path=/pages/outpatient/doctor-appointment/index&scene=1002&showArea=0&hospitalAreaId=6&departmentCode=A0030077&subDepartmentCode=4773794195699464904'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const toRouter = (clinic) => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/user/fenzhen/xindiantu?id=" + $props.id + '&clinic=' + clinic,
|
|
|
});
|
|
|
};
|
|
|
const fenzhen_active = ref(-1)
|
|
|
const fenzhen_info = ref(false)
|
|
|
const infoShowClick = (clinic) => {
|
|
|
if (clinic !== fenzhen_active.value) {
|
|
|
fenzhen_info.value = false
|
|
|
getFenzhenInfo(clinic)
|
|
|
} else {
|
|
|
fenzhen_active.value = -1
|
|
|
}
|
|
|
}
|
|
|
const qijian = (item) => {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/user/fenzhen/qijian?id=${$props.id}&xmid=${item.id}&tj_number=${fenzhen_list.value.info.tj_number}`,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const getFenzhenInfo = async (clinic) => {
|
|
|
fenzhen_active.value = clinic
|
|
|
uni.showLoading();
|
|
|
const response = await $api("FenzhenInfo", {
|
|
|
id: $props.id,
|
|
|
clinic: clinic,
|
|
|
});
|
|
|
uni.hideLoading();
|
|
|
$response(response, () => {
|
|
|
fenzhen_info.value = false
|
|
|
nextTick(() => {
|
|
|
fenzhen_info.value = response.data;
|
|
|
})
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const useTimeShow = (time) => {
|
|
|
return Math.ceil(Number(time))
|
|
|
}
|
|
|
let erweimaText = ref('');
|
|
|
const erweima_click = (text) => {
|
|
|
erweimaText.value = text
|
|
|
erweima_popup.value.open()
|
|
|
}
|
|
|
const MaskClickFunc = () => {
|
|
|
erweimaText.value = ''
|
|
|
console.log(erweimaText.value)
|
|
|
}
|
|
|
const tipsClose = () => {
|
|
|
tips_popup.value.close();
|
|
|
tip_show.value = false;
|
|
|
}
|
|
|
const processString = (str, substring) => {
|
|
|
const index = str.indexOf(substring);
|
|
|
if (index !== -1) {
|
|
|
// 返回指定子串之后的所有内容
|
|
|
return str.substring(index + substring.length).trim();
|
|
|
}
|
|
|
return ""; // 如果未找到指定子串，则返回空字符串或其他提示信息
|
|
|
}
|
|
|
onShow(() => {
|
|
|
if (!!config_ref.value) {
|
|
|
mountedAction();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<template>
|
|
|
<DraggableButton />
|
|
|
<view>
|
|
|
<uni-popup ref="erweima_popup" type="center" :animation="false" @maskClick="MaskClickFunc()">
|
|
|
<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;">
|
|
|
<view></view>
|
|
|
<w-qrcode :options="{
|
|
|
level: 4,
|
|
|
size: 470,
|
|
|
code: erweimaText,
|
|
|
}"></w-qrcode>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
<view v-if="!!$store.config">
|
|
|
<view :ref="configRef"></view>
|
|
|
</view>
|
|
|
<uni-popup style="z-index: 999;" ref="tips_popup" type="center" :animation="false" @maskClick="MaskClickFunc()">
|
|
|
<view class="tip_dialog_wrapper" v-if="!!tip_show">
|
|
|
<view class="tip_dialog_box_wrapper">
|
|
|
<view @click="tipsClose()" class="tip_dialog_close_wrapper">
|
|
|
<image src="@/static/assets/contrast/close@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="tip_dialog_text_wrapper" v-html="tip_content"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<view v-if="!!fenzhen_list">
|
|
|
<view class="order_info_wrapper relative">
|
|
|
<w-qrcode v-if="fenzhen_list.info.kahao" @click="erweima_click(fenzhen_list.info.kahao)"
|
|
|
class="absolute top-20rpx right-15rpx b-1 b-dashed b-#000 p-8rpx" :options="{
|
|
|
level: 4,
|
|
|
size: 130,
|
|
|
code: fenzhen_list.info.kahao,
|
|
|
}"></w-qrcode>
|
|
|
<view class="person_name_wrapper">
|
|
|
<view class="person_name_text_wrapper">{{
|
|
|
fenzhen_list.info.name
|
|
|
}}</view>
|
|
|
<view class="person_sex_wrapper">{{
|
|
|
fenzhen_list.info.sex === 1 ? "男士" : "女士"
|
|
|
}}</view>
|
|
|
</view>
|
|
|
<view class="info_box_wrapper">
|
|
|
<view class="info_wrapper" v-if="!fenzhen_list.info.combo_name.includes('单位团检')">
|
|
|
<view class="info_title_wrapper">体检套餐：</view>
|
|
|
<view class="info_text_wrapper">{{ fenzhen_list.info.combo_name }}</view>
|
|
|
</view>
|
|
|
<view class="info_wrapper" v-else>
|
|
|
<view class="info_title_wrapper">体检单位：</view>
|
|
|
<view class="info_text_wrapper">{{ processString(fenzhen_list.info.combo_name, "单位团检") }}</view>
|
|
|
</view>
|
|
|
<view class="info_wrapper info2_wrapper">
|
|
|
<view class="info_title_wrapper">体检日期：</view>
|
|
|
<view class="info_text_wrapper">{{
|
|
|
fenzhen_list.info.check_date
|
|
|
}}</view>
|
|
|
</view>
|
|
|
<view class="info_wrapper info2_wrapper">
|
|
|
<view class="info_title_wrapper">排队号：</view>
|
|
|
<view class="info_text_wrapper">{{
|
|
|
fenzhen_list.info.plan_number
|
|
|
}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="button_wrapper">
|
|
|
<view @click="tipShowClick()" class="desc_wrapper">体检注意事项</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tip_wrapper">
|
|
|
<view class="tip_time_wrapper">
|
|
|
<view class="tip_time_text_wrapper">开始时间</view>
|
|
|
<view class="tip_time_value_wrapper">{{
|
|
|
timeShow(fenzhen_list.info.start_time)
|
|
|
}}</view>
|
|
|
</view>
|
|
|
<view class="tip_time_wrapper tip_endtime_wrapper">
|
|
|
<view class="tip_time_text_wrapper">预计结束</view>
|
|
|
<view class="tip_time_value_wrapper">{{
|
|
|
timeShow(fenzhen_list.info.yuji_end_time)
|
|
|
}}</view>
|
|
|
<view class="tip_time_text_wrapper">— 预计用时</view>
|
|
|
<view class="tip_time_value_wrapper">{{
|
|
|
useTimeShow(fenzhen_list.info.yuji_use_time)
|
|
|
}}</view>
|
|
|
<view class="tip_time_text_wrapper">分钟</view>
|
|
|
</view>
|
|
|
<view class="tip_time_wrapper tip_endtime_wrapper">
|
|
|
<view class="tip_time_text_wrapper">结束时间</view>
|
|
|
<view class="tip_time_value_wrapper">{{
|
|
|
timeShow(fenzhen_list.info.end_time)
|
|
|
}}</view>
|
|
|
<view class="tip_time_text_wrapper">— 实际用时</view>
|
|
|
<view class="tip_time_value_wrapper">{{
|
|
|
useTimeShow(fenzhen_list.info.use_time)
|
|
|
}}</view>
|
|
|
<view class="tip_time_text_wrapper">分钟</view>
|
|
|
</view>
|
|
|
<view class="timeline_wrapper">
|
|
|
<view class="timeline_in" :style="{
|
|
|
width : `${timeline_step}%`,
|
|
|
background : `${timeline_step>=100?'#239EA3':'#FF9900'}`,
|
|
|
}"></view>
|
|
|
</view>
|
|
|
<view class="tip_box_wrapper">
|
|
|
<view class="tip_icon_wrapper">
|
|
|
<image src="@/static/assets/fenzhen/tip@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="tip_text_wrapper">尊敬的客户，为了使您的体检流程更加顺畅，请按以下步骤提
|
|
|
示顺序逐项完成体检。</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="time_line_wrapper">
|
|
|
<view class="time_line_title_wrapper">自助导检</view>
|
|
|
<view class="time_line_box_wrapper">
|
|
|
<view v-for="(i, k) in fenzhen_list.list" :key="k">
|
|
|
<view class="time_line_item_wrapper" :class="[`time_line_item-${i.status}_wrapper`]">
|
|
|
<view class="time_line_item_time_wrapper" v-if="i.name!='体检结束'">
|
|
|
<view v-if="!!i.time" class="time_line_item_time_value_wrapper">{{
|
|
|
i.time
|
|
|
}}</view>
|
|
|
<view class="time_line_item_time_dot_wrapper">
|
|
|
<view class="time_line_item_time_dot_in_wrapper"></view>
|
|
|
</view>
|
|
|
<view v-if="!!i.time" class="time_line_item_time_line_wrapper"></view>
|
|
|
<view v-if="!i.time" class="time_line_item_time_cover_wrapper"></view>
|
|
|
</view>
|
|
|
<view class="time_line_item_content_wrapper" v-if="i.name!='体检结束'">
|
|
|
<view class="time_line_item_triangle_wrapper"></view>
|
|
|
<view class="time_line_item_flex_wrapper" v-if="i.name!='体检结束'">
|
|
|
<view class="time_line_item_title_wrapper">{{ k + 1 }}.{{ i.name }}</view>
|
|
|
<view class="time_line_item_box_wrapper">{{ i.desc }}</view>
|
|
|
</view>
|
|
|
<view v-if="!!i.time && !!i.tip" class="time_line_item_line_wrapper"></view>
|
|
|
<view v-if="!!i.time && !!i.tip" class="time_line_item_flex_wrapper">
|
|
|
<view class="time_line_item_text_wrapper">{{ i.tip }}</view>
|
|
|
<view v-if="i.more !== 0" class="time_line_item_more_wrapper" @click="infoShowClick(i.more)">查看详情>>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="more_wrapper mt-20rpx" v-if="i.more === fenzhen_active && !!fenzhen_info">
|
|
|
<template v-for="(item, index) in fenzhen_info.list" :key="index">
|
|
|
<view class="between h-90rpx b-0 b-b-1 b-solid b-#EAEAEA"
|
|
|
v-if="item.status == 1 || item.status == 2">
|
|
|
<view class="text-#000000 text-30rpx">{{ item.name }}</view>
|
|
|
<view class="center">
|
|
|
<text @click="qijian(item)"
|
|
|
class="rounded-full text-28rpx center w-105rpx h-48rpx text-#E95515 bg-#FAECE6">弃检</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="between h-90rpx b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 4">
|
|
|
<view class="text-#000000 text-30rpx">
|
|
|
<view>{{ item.name }}</view>
|
|
|
<view class="text-#141414 text-28rpx">{{ item.time }}</view>
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<text class="rounded-full text-28rpx center w-105rpx h-48rpx mr-30rpx text-#239EA3 bg-#E5F3F2">完成</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="between b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 5">
|
|
|
<view class="text-#000000 text-30rpx">
|
|
|
<view>{{ item.name }}</view>
|
|
|
<view class="text-#141414 text-28rpx">{{ item.time }}</view>
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<text class="rounded-full text-28rpx center w-105rpx h-48rpx text-#6d89a3 bg-#E5F3F2">已弃检</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item_desc_wrapper b-0 b-b-1 b-solid b-#EAEAEA pb-5rpx">{{ item.desc }}</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="report_wrapper">
|
|
|
<view v-if="fenzhen_list.report != -1" @click="toReport()" class="report_button_wrapper">
|
|
|
预约解读
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.timeline_in {
|
|
|
height: 20rpx;
|
|
|
border-radius: 0 5rpx 5rpx 0;
|
|
|
}
|
|
|
|
|
|
.timeline_wrapper {
|
|
|
width: 100%;
|
|
|
height: 20rpx;
|
|
|
background: #cccccc;
|
|
|
margin: 25rpx auto 0;
|
|
|
border-radius: 8rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.item_desc_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
color: red;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
.more_wrapper {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.report_tip_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #239EA3;
|
|
|
line-height: 90rpx;
|
|
|
margin-right: 29rpx;
|
|
|
}
|
|
|
|
|
|
.report_wrapper {
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
}
|
|
|
|
|
|
.report_button_wrapper {
|
|
|
width: 200rpx;
|
|
|
height: 60rpx;
|
|
|
background: #239ea3;
|
|
|
border-radius: 30rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #ffffff;
|
|
|
line-height: 60rpx;
|
|
|
text-align: center;
|
|
|
margin-right: 29rpx;
|
|
|
margin-top: 50rpx;
|
|
|
}
|
|
|
|
|
|
.tip_dialog_text_wrapper {
|
|
|
max-height: calc(100vh - 600rpx);
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.tip_dialog_wrapper {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
width: 750rpx;
|
|
|
background: #00000060;
|
|
|
margin: 0 auto;
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
.tip_dialog_close_wrapper {
|
|
|
position: absolute;
|
|
|
top: 30rpx;
|
|
|
right: 40rpx;
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
}
|
|
|
|
|
|
.tip_dialog_close_wrapper image {
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.tip_dialog_box_wrapper {
|
|
|
position: absolute;
|
|
|
width: 610rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 15rpx;
|
|
|
padding-left: 50rpx;
|
|
|
padding-right: 50rpx;
|
|
|
padding-bottom: 60rpx;
|
|
|
padding-top: 80rpx;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
font-size: 28rpx;
|
|
|
line-height: 56rpx;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.time_line_item_more_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
color: #239ea3;
|
|
|
line-height: 1;
|
|
|
text-decoration-line: underline;
|
|
|
margin-right: 19rpx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.time_line_item_text_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 24rpx;
|
|
|
color: #6e6e6e;
|
|
|
line-height: 1;
|
|
|
margin-left: 42rpx;
|
|
|
/* width: calc(100% - 210rpx); */
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.time_line_item_line_wrapper {
|
|
|
width: 550rpx;
|
|
|
height: 1rpx;
|
|
|
background: #e8e8e8;
|
|
|
border-radius: 1rpx;
|
|
|
margin: 13rpx auto 5rpx;
|
|
|
}
|
|
|
|
|
|
.time_line_item_box_wrapper {
|
|
|
width: 400rpx;
|
|
|
overflow: hidden;
|
|
|
margin-left: 20rpx;
|
|
|
height: 40rpx;
|
|
|
background: #5a75ca30;
|
|
|
border-radius: 5rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 24rpx;
|
|
|
color: #5a75ca;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
margin-right: 17rpx;
|
|
|
}
|
|
|
|
|
|
.time_line_item_title_wrapper {
|
|
|
width: 170rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #0d0d0d;
|
|
|
line-height: 40rpx;
|
|
|
height: 40rpx;
|
|
|
margin-left: 22rpx;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.time_line_item_flex_wrapper {
|
|
|
margin-top: 15rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_cover_wrapper {
|
|
|
position: absolute;
|
|
|
width: 2rpx;
|
|
|
top: -36rpx;
|
|
|
height: 100rpx;
|
|
|
left: 50%;
|
|
|
background: #ffffff;
|
|
|
transform: translateX(-50%);
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_line_wrapper {
|
|
|
position: absolute;
|
|
|
width: 2rpx;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
background: #dedede;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_dot_wrapper {
|
|
|
position: absolute;
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
background: #cfcece60;
|
|
|
border-radius: 50%;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, calc(-50% + 26rpx));
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_dot_in_wrapper {
|
|
|
width: 8rpx;
|
|
|
height: 8rpx;
|
|
|
background: #cfcece;
|
|
|
border-radius: 50%;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.time_line_box_wrapper {
|
|
|
margin-top: 28rpx;
|
|
|
}
|
|
|
|
|
|
.time_line_item_triangle_wrapper {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-left: 1rpx #e8e8e8 solid;
|
|
|
border-bottom: 1rpx #e8e8e8 solid;
|
|
|
background: #f8f8f8;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: -10rpx;
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
|
|
|
.time_line_item_content_wrapper {
|
|
|
width: 590rpx;
|
|
|
background: #f8f8f8;
|
|
|
border-radius: 5rpx;
|
|
|
margin-left: 12rpx;
|
|
|
position: relative;
|
|
|
border: 1rpx #e8e8e8 solid;
|
|
|
margin-top: 36rpx;
|
|
|
padding-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_value_wrapper {
|
|
|
width: 90rpx;
|
|
|
height: 55rpx;
|
|
|
background: #e4e4e4;
|
|
|
border-radius: 28rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #212121;
|
|
|
line-height: 55rpx;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
z-index: 20;
|
|
|
}
|
|
|
|
|
|
.time_line_item_time_wrapper {
|
|
|
width: 90rpx;
|
|
|
position: absolute;
|
|
|
left: 6rpx;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
|
|
|
.time_line_item_wrapper {
|
|
|
width: calc(90rpx + 12rpx + 590rpx);
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.time_line_title_wrapper {
|
|
|
width: 180rpx;
|
|
|
height: 60rpx;
|
|
|
background: linear-gradient(90deg, #edf6f5 0%, #bbdfe1 99%);
|
|
|
border-radius: 0rpx 30rpx 30rpx 0rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 25rpx;
|
|
|
color: #123531;
|
|
|
text-align: center;
|
|
|
line-height: 60rpx;
|
|
|
margin-top: 26rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.time_line_wrapper {
|
|
|
width: 710rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
|
|
|
border-radius: 15rpx;
|
|
|
margin: 53rpx auto 0;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
padding-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.tip_text_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 22rpx;
|
|
|
color: #e95515;
|
|
|
line-height: 36rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.tip_icon_wrapper {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
margin-top: 5rpx;
|
|
|
}
|
|
|
|
|
|
.tip_icon_wrapper image {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.tip_box_wrapper {
|
|
|
display: flex;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.tip_time_value_wrapper {
|
|
|
font-size: 36rpx;
|
|
|
color: #239ea3;
|
|
|
margin: 0 10rpx;
|
|
|
}
|
|
|
|
|
|
.tip_time_text_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
color: #161616;
|
|
|
}
|
|
|
|
|
|
.tip_time_wrapper {
|
|
|
display: flex;
|
|
|
align-items: end;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.tip_endtime_wrapper {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.tip_wrapper {
|
|
|
width: calc(100% - 50px);
|
|
|
margin: 32rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.info2_wrapper {
|
|
|
margin-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.info_box_wrapper {
|
|
|
margin-top: 30rpx;
|
|
|
margin-left: 29rpx;
|
|
|
}
|
|
|
|
|
|
.button_wrapper {
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
}
|
|
|
|
|
|
.desc_wrapper {
|
|
|
width: 160rpx;
|
|
|
height: 48rpx;
|
|
|
background: #239ea3;
|
|
|
border-radius: 5rpx;
|
|
|
font-size: 20rpx;
|
|
|
color: #ffffff;
|
|
|
line-height: 48rpx;
|
|
|
text-align: center;
|
|
|
margin-right: 29rpx;
|
|
|
margin-top: 0rpx;
|
|
|
}
|
|
|
|
|
|
.info_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.info_text_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
color: #0f0f0f;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.info_title_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
color: #8b8b8b;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.order_info_wrapper {
|
|
|
width: 710rpx;
|
|
|
height: 360rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
|
|
|
border-radius: 15rpx;
|
|
|
margin: 20rpx auto 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.person_name_wrapper {
|
|
|
display: flex;
|
|
|
align-items: end;
|
|
|
margin-top: 72rpx;
|
|
|
margin-left: 29rpx;
|
|
|
}
|
|
|
|
|
|
.person_name_text_wrapper {
|
|
|
font-weight: bold;
|
|
|
font-size: 34rpx;
|
|
|
color: #171717;
|
|
|
}
|
|
|
|
|
|
.person_sex_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
color: #7e7e7e;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.time_line_item-2_wrapper .time_line_item_time_value_wrapper,
|
|
|
.time_line_item-1_wrapper .time_line_item_time_value_wrapper {
|
|
|
background: #239ea3;
|
|
|
color: #f8f8f8;
|
|
|
}
|
|
|
|
|
|
.time_line_item-2_wrapper .time_line_item_time_dot_wrapper,
|
|
|
.time_line_item-1_wrapper .time_line_item_time_dot_wrapper {
|
|
|
background: #239ea360;
|
|
|
}
|
|
|
|
|
|
.time_line_item-2_wrapper .time_line_item_time_dot_in_wrapper,
|
|
|
.time_line_item-1_wrapper .time_line_item_time_dot_in_wrapper {
|
|
|
background: #239ea3;
|
|
|
}
|
|
|
|
|
|
.time_line_item-2_wrapper .time_line_item_box_wrapper,
|
|
|
.time_line_item-1_wrapper .time_line_item_box_wrapper {
|
|
|
background: #6cafb230;
|
|
|
color: #239ea3;
|
|
|
}
|
|
|
|
|
|
.time_line_item--1_wrapper .time_line_item_time_value_wrapper {
|
|
|
background: #239ea3;
|
|
|
color: #f8f8f8;
|
|
|
}
|
|
|
|
|
|
.time_line_item--1_wrapper .time_line_item_time_dot_wrapper {
|
|
|
background: #239ea360;
|
|
|
}
|
|
|
|
|
|
.time_line_item--1_wrapper .time_line_item_time_dot_in_wrapper {
|
|
|
background: #239ea3;
|
|
|
}
|
|
|
|
|
|
.time_line_item--1_wrapper .time_line_item_box_wrapper {
|
|
|
background: #e1af6830;
|
|
|
color: #cc913e;
|
|
|
}
|
|
|
</style> |