|
@@ -93,6 +93,28 @@
|
|
|
z-index: 1;
|
|
|
background: white;
|
|
|
}
|
|
|
+ .Timeline-title{
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .Timeline-fieldInfo{
|
|
|
+ margin-left: 12px;
|
|
|
+ padding-bottom: 15px
|
|
|
+ }
|
|
|
+ .Timeline-field{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ white-space: pre-line;
|
|
|
+ word-break: break-word
|
|
|
+ }
|
|
|
+ .Timeline-fieldLast {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-top: 8px
|
|
|
+ }
|
|
|
</style>
|
|
|
@endpush
|
|
|
|
|
@@ -103,8 +125,7 @@
|
|
|
@section('content')
|
|
|
<div id="app">
|
|
|
<div class="drop_content">
|
|
|
- <img src="{{ theme_asset('mobile/images/shuobo_demo.png') }}" />
|
|
|
-{{-- <light-timeline :items='items'></light-timeline>--}}
|
|
|
+ <light-timeline :items='items'></light-timeline>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@@ -113,8 +134,56 @@
|
|
|
|
|
|
@section('script')
|
|
|
<script>
|
|
|
- var data = eval(decodeURI('{{ $data }}'));
|
|
|
- console.log(data)
|
|
|
+ var data = eval('{!! $data !!}'),timeline_data = new Array(),post = {};
|
|
|
+ post.startTime = '{{ $startTime }}';
|
|
|
+ post.endTime = '{{ $endTime }}';
|
|
|
+ post.next_page = '{{ $next_page }}';
|
|
|
+ post.page = '{{ $params['page'] }}';
|
|
|
+ for(var i = 0;i < data.length; i++){
|
|
|
+ var item = {};
|
|
|
+ var time_str = new Date(data[i].createTime).toLocaleString(),time_arr = time_str.split(' ');
|
|
|
+ item.tag = time_arr[0] + "\r\n" + time_arr[1];
|
|
|
+ item.type = 'circle';
|
|
|
+ item.htmlMode = true;
|
|
|
+ var field_info = '';
|
|
|
+ for(var j = 0;j < data[i].eventFieldInfo.length;j++){
|
|
|
+ var field_item = data[i].eventFieldInfo[j];
|
|
|
+ field_item.value = typeof(field_item.value) == 'undefined' ? '--' : field_item.value
|
|
|
+ switch(field_item.desc){
|
|
|
+ case '时长':
|
|
|
+ field_info += '<div class="Timeline-field">'+ field_item.desc +':<span><span> ' + formatSeconds(field_item.value) +' </span></span></div>'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ field_info += '<div class="Timeline-field">'+ field_item.desc +':<span><span> ' + field_item.value +' </span></span></div>'
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ item.content = '<div style="color:#ed9153;" class="Timeline-title">'+data[i].description+'</div><div class="Timeline-fieldInfo Timeline-tracker"> ' + field_info + ' </div><div class="Timeline-fieldLast"> ' + data[i].operatorName + '</div>';
|
|
|
+ timeline_data[i] = item;
|
|
|
+ }
|
|
|
+ function formatSeconds(value) {
|
|
|
+ var theTime = parseInt(value);// 秒
|
|
|
+ var middle= 0;// 分
|
|
|
+ var hour= 0;// 小时
|
|
|
+
|
|
|
+ if(theTime > 60) {undefined
|
|
|
+ middle= parseInt(theTime/60);
|
|
|
+ theTime = parseInt(theTime%60);
|
|
|
+ if(middle> 60) {undefined
|
|
|
+ hour= parseInt(middle/60);
|
|
|
+ middle= parseInt(middle%60);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var result = ""+parseInt(theTime)+"秒";
|
|
|
+ if(middle > 0) {undefined
|
|
|
+ result = ""+parseInt(middle)+"分"+result;
|
|
|
+ }
|
|
|
+ if(hour> 0) {undefined
|
|
|
+ result = ""+parseInt(hour)+"小时"+result;
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
</script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
@@ -152,47 +221,8 @@
|
|
|
el: "#app",
|
|
|
data () {
|
|
|
return {
|
|
|
- test:'test',
|
|
|
- items: [
|
|
|
- {
|
|
|
- tag: '2010年1月',
|
|
|
- color: 'yellow',
|
|
|
- content: '在国际乒联巡回赛总决赛中,许昕2-4不敌马龙,获得男单亚军。'
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2011年1月',
|
|
|
- type: 'circle',
|
|
|
- color: 'orange',
|
|
|
- htmlMode: true,
|
|
|
- content: '<div style="color:#ed9153;">在斯洛文尼亚赛公开赛中,许昕4-2战胜马琳,获得男单冠军</div>'
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2011年9月',
|
|
|
- type: 'circle',
|
|
|
- content: '在第24届亚洲杯乒乓球赛男单决赛中,许昕2-4不敌马龙,获得亚军。'
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2012年5月',
|
|
|
- type: 'circle',
|
|
|
- content: '在中国公开赛男单比赛中,许昕连胜张继科、马龙夺得冠军。'
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2013年1月',
|
|
|
- type: 'star',
|
|
|
- content: '在世界排名上,许昕职业生涯首次登上世界第一的宝座。'
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2013年10月',
|
|
|
- type: 'star',
|
|
|
- color: 'orange',
|
|
|
- content: `在比利时举行的乒乓球世界杯男单比赛中,许昕依次战胜闫安、奥恰洛夫、萨姆索诺夫,收获个人首个世界三大赛单打冠军\n\n也成为自1953年中国踏足国际乒乓球赛事以来,第一位获得乒乓球男单世界冠军的左手运动员。`
|
|
|
- },
|
|
|
- {
|
|
|
- tag: '2014年1月',
|
|
|
- type: 'circle',
|
|
|
- content: '在国际乒联巡回赛总决赛男单决赛中,许昕以4-3击败队友马龙,获得冠军。'
|
|
|
- }
|
|
|
- ]
|
|
|
+ post: post,
|
|
|
+ items: timeline_data
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -201,7 +231,7 @@
|
|
|
let clientHeight = document.documentElement.clientHeight;
|
|
|
let scrollHeight = document.documentElement.scrollHeight;
|
|
|
if (scrollTop + clientHeight >= scrollHeight) {
|
|
|
- axios.post('/mobile/talent/lvcheng').then(response => (console.log(response))).catch(
|
|
|
+ axios.post('/mobile/talent/lvcheng',post).then(response => (console.log(response))).catch(
|
|
|
function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
@@ -209,7 +239,7 @@
|
|
|
},
|
|
|
},
|
|
|
created(){
|
|
|
- window.addEventListener('scroll', this.Scrollbottom);
|
|
|
+ //window.addEventListener('scroll', this.Scrollbottom);
|
|
|
},
|
|
|
});
|
|
|
</script>
|