<!DOCTYPE html>
|
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>工单处理历史记录</title>
|
<link rel="stylesheet" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/>
|
<style>
|
/* 隐藏滚动条的基础CSS */
|
.hide-scrollbar {
|
/* 隐藏标准滚动条 */
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* IE 和 Edge */
|
}
|
/* Chrome, Safari 和 Opera */
|
.hide-scrollbar::-webkit-scrollbar {
|
display: none;
|
}
|
/* 平滑滚动效果 */
|
.smooth-scroll {
|
scroll-behavior: smooth;
|
}
|
html{
|
overflow: hidden ;
|
}
|
/* 页面基础样式 */
|
body {
|
background-color: #FFF;
|
padding: 20px;
|
font-family: "Microsoft YaHei", Arial, sans-serif;
|
font-size: 14px;
|
overflow-x: hidden;
|
}
|
.container {
|
margin: 0 auto;
|
background-color: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
}
|
.header {
|
background-color: #e6e6e6;
|
padding: 15px;
|
font-weight: bold;
|
}
|
.summary-box {
|
margin: 20px;
|
padding: 15px;
|
background-color: #f0f9ff;
|
border-left: 4px solid #1E9FFF;
|
border-radius: 4px;
|
font-size: 14px;
|
}
|
.summary-box .layui-icon {
|
margin-right: 8px;
|
color: #1E9FFF;
|
}
|
.timeline-container {
|
padding: 0 20px 20px;
|
}
|
/* 自定义时间轴样式 */
|
.custom-timeline {
|
position: relative;
|
padding: 20px 0;
|
}
|
.custom-timeline:before {
|
content: '';
|
position: absolute;
|
left: 18px;
|
top: 0;
|
bottom: 0;
|
width: 2px;
|
background-color: #e8e8e8;
|
}
|
.timeline-item {
|
position: relative;
|
padding-left: 50px;
|
margin-bottom: 25px;
|
}
|
.timeline-item:last-child {
|
margin-bottom: 0;
|
}
|
.timeline-icon {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
z-index: 2;
|
}
|
.timeline-content {
|
background-color: #f9f9f9;
|
border-radius: 6px;
|
padding: 15px;
|
border-left: 3px solid #1E9FFF;
|
font-size: 14px;
|
}
|
.operator-info {
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 5px;
|
}
|
.status-change {
|
color: #666;
|
margin-bottom: 5px;
|
}
|
.status-description {
|
color: #888;
|
font-size: 13px;
|
}
|
.time-info {
|
text-align: right;
|
color: #999;
|
font-size: 13px;
|
margin-top: 8px;
|
}
|
/* 不同状态的图标颜色 */
|
.status-created { background-color: #FFB800; }
|
.status-waiting { background-color: #FF5722; }
|
.status-processing { background-color: #1E9FFF; }
|
.status-completed { background-color: #009688; }
|
|
/* 可滚动区域样式 */
|
.scrollable-area {
|
max-height: 400px; /* 设置最大高度 */
|
overflow-y: auto; /* 垂直方向允许滚动 */
|
overflow-x: hidden; /* 水平方向隐藏 */
|
}
|
|
/* 方法1：完全隐藏滚动条 */
|
.method-1 {
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* IE 和 Edge */
|
}
|
|
.method-1::-webkit-scrollbar {
|
display: none; /* Chrome, Safari 和 Opera */
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.container {
|
margin: 10px;
|
}
|
.timeline-item {
|
padding-left: 40px;
|
}
|
.timeline-icon {
|
width: 32px;
|
height: 32px;
|
}
|
.scrollable-area {
|
max-height: 300px; /* 移动端调整高度 */
|
}
|
}
|
/* 额外的工单记录用于演示滚动 */
|
.extra-records {
|
display: none;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
<!-- <div class="header">-->
|
<!-- <i class="layui-icon layui-icon-form"></i> 工单处理记录-->
|
<!-- </div>-->
|
<div class="summary-box">
|
<i class="layui-icon layui-icon-tips"></i>
|
处理记录：该工单累计处理时长 <span style="color:#1E9FFF; font-weight:bold;" th:text="${tipTime}">1分钟</span>，累计处理次数 <span style="color:#1E9FFF; font-weight:bold;" th:text="${tipCount}">1次</span>
|
</div>
|
|
<div class="timeline-container">
|
<!-- 这里是可滚动的时间轴区域 -->
|
<div class="custom-timeline scrollable-area method-1 smooth-scroll" id="timelineScroll">
|
<!-- 已完成 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-completed">
|
<i class="layui-icon layui-icon-ok"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 已完成</div>
|
<div class="time-info">2026-01-06 13:56:21</div>
|
</div>
|
</div>
|
|
<!-- 处理中 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-processing">
|
<i class="layui-icon layui-icon-loading"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 处理中</div>
|
<div class="status-description">已接收工单</div>
|
<div class="time-info">2026-01-06 13:56:01</div>
|
</div>
|
</div>
|
|
<!-- 待接收 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-waiting">
|
<i class="layui-icon layui-icon-user"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 待接收，下个受理人为 柳白</div>
|
<div class="time-info">2026-01-06 13:55:20</div>
|
</div>
|
</div>
|
|
<!-- 新建工单 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-created">
|
<i class="layui-icon layui-icon-add-circle"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="status-change">新建工单</div>
|
<div class="status-description">公众号·WGCLOUD</div>
|
<div class="time-info">2026-01-06 13:55:00</div>
|
</div>
|
</div>
|
|
<!-- 以下为额外记录，用于演示滚动效果 -->
|
<div class="extra-records">
|
<!-- 额外记录1 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-waiting">
|
<i class="layui-icon layui-icon-user"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">系统自动</div>
|
<div class="status-change">工单已创建，等待分配</div>
|
<div class="time-info">2026-01-06 13:54:30</div>
|
</div>
|
</div>
|
|
<!-- 额外记录2 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-waiting">
|
<i class="layui-icon layui-icon-notice"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">系统自动</div>
|
<div class="status-change">发送工单创建通知</div>
|
<div class="time-info">2026-01-06 13:54:15</div>
|
</div>
|
</div>
|
|
<!-- 额外记录3 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-completed">
|
<i class="layui-icon layui-icon-ok"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">用户提交</div>
|
<div class="status-change">工单提交成功</div>
|
<div class="status-description">用户通过Web端提交工单</div>
|
<div class="time-info">2026-01-06 13:54:00</div>
|
</div>
|
</div>
|
|
<!-- 额外记录4 -->
|
<div class="timeline-item">
|
<div class="timeline-icon status-created">
|
<i class="layui-icon layui-icon-edit"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">用户 张三</div>
|
<div class="status-change">填写工单信息</div>
|
<div class="status-description">问题描述：公众号无法正常登录</div>
|
<div class="time-info">2026-01-06 13:53:45</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
