| | |
| | | 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; |
| | |
| | | font-size: 14px; |
| | | overflow-x: hidden; |
| | | } |
| | | |
| | | .container { |
| | | margin: 0 auto; |
| | | background-color: #fff; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | color: white; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .timeline-content { |
| | | background-color: #f9f9f9; |
| | | border-radius: 6px; |
| | |
| | | border-left: 3px solid #1E9FFF; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .operator-info { |
| | | font-weight: bold; |
| | | color: #333; |
| | |
| | | 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; /* 设置最大高度 */ |
| | |
| | | <!-- </div>--> |
| | | <div class="summary-box"> |
| | | <i class="layui-icon layui-icon-tips"></i> |
| | | 处理记录:该工单累计处理时长 <span style="color:#1E9FFF; font-weight:bold;">1分钟</span>,累计处理次数 <span |
| | | style="color:#1E9FFF; font-weight:bold;">3次</span> |
| | | 处理记录:该工单累计处理时长 <span style="color:#1E9FFF; font-weight:bold;" th:text="${tipTime}">0分钟</span>,累计处理次数 <span |
| | | style="color:#1E9FFF; font-weight:bold;" th:text="${tipCount}">0次</span> |
| | | </div> |
| | | |
| | | <div class="timeline-container"> |
| | |
| | | htm += ' 审批动作:'+item.action; |
| | | htm += ' 经办人:'+item.assigneeName; |
| | | htm += '</div>'; |
| | | htm += '<div class="status-change">' + item.remark + '</div>'; |
| | | if(item.remark){ |
| | | htm += '<div class="status-change">' + item.remark + '</div>'; |
| | | }else{ |
| | | htm += '<div class="status-change">' + '' + '</div>'; |
| | | } |
| | | htm += '<div class="time-info">' + item.createTime + '</div>'; |
| | | htm += '</div></div>'; |
| | | } |