jucai/public/themes/default/views/mobile/app/talent/lvcheng.blade.php

@extends('mobile.module.layouts.content')
@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/news.css') }}" rel="stylesheet">
    <style>


        .line-container {
            color: #606c76;
            font-family: "Helvetica Neue For Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            box-sizing: border-box;
            position: relative;
            list-style: none;
            margin: 0.16rem;
            padding-left: 1.92rem;
        }
        .line-container::after {
            position: absolute;
            content: "";
            left: 1.7rem;
            top: 0;
            width: 1px;
            height: 100%;
            background-color: #e4e1fe;
        }
        .line-container .line-item {
            padding: 0.32rem;
            position: relative;
        }
        .line-container .item-circle {
            box-sizing: border-box;
            position: absolute;
            margin-left: -7px;
            width: 16px;
            height: 16px;
            border-radius: 10px;
            background: white;
            border: 2px solid #8b80f9;
        }
        .line-container .item-circle.purple {
            border: 2px solid #8b80f9;
        }
        .line-container .item-circle.orange {
            border: 2px solid #ed9153;
        }
        .line-container .item-circle.yellow {
            border: 2px solid #fbd157;
        }
        .line-container .item-star {
            box-sizing: border-box;
            position: absolute;
            margin-left: -11px;
            width: 24px;
            height: 24px;
            margin-top: -4px;
        }
        .line-container .item-star path {
            stroke: #8b80f9;
            stroke-width: 4px;
            fill: white;
        }
        .line-container .item-star.purple path {
            stroke: #8b80f9;
        }
        .line-container .item-star.orange path {
            stroke: #ed9153;
        }
        .line-container .item-star.yellow path {
            stroke: #fbd157;
        }
        .line-container .item-tag {
            position: absolute;
            left: -1.92rem;
            width: 65px;
            text-align: center;
            color: #949fa8;
            font-size: 11.6666666667px;
        }
        .line-container .item-content {
            white-space: pre-line;
        }
        .line-container .item-content.star {
            font-weight: bold;
            font-size: 15.4px;
        }
        .line-container .item-symbol {
            box-sizing: border-box;
            position: absolute;
            left: -0.24rem;
            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

@push('js')
    <script src="{{ theme_asset('mobile/js/dropload.min.js') }}"></script>
@endpush

@section('content')
    <div id="app">
        <div class="drop_content">
            <light-timeline :items='items'></light-timeline>
        </div>

    </div>

@endsection

@section('script')
    <script>
        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>
    <script type="module">
        Vue.component('light-timeline', {
            name: 'light-timeline',
            props: {
                items: {
                    type: Array
                }
            },
            data() {
                return {
                    presetReg: /purple|orange|yellow/
                }
            },
            methods: {
                getColorClass(color) {
                    return this.presetReg.test(color) ? color : ''
                },
                getStyle(item) {
                    const color = item.color
                    if (!this.presetReg.test(color)) {
                        return this.makeCircleColor(color)
                    }
                    return {}
                },
                makeCircleColor(color) {
                    return { border: `2px solid ${color}` }
                }
            },
            template:'<ul class="line-container"><li class="line-item"v-for="item in items"><div class="item-tag"><slot name="tag":item="item">@{{item.tag}}</slot></div><div class="item-symbol"><slot name="symbol":item="item"><div class="item-circle":class="getColorClass(item.color)":style="getStyle(item)"></div></slot></div><slot name="content":item="item"><div class="item-content"v-if="!item.htmlMode":class="item.type">@{{item.content}}</div><div class="item-content html-mode"v-else="v-else":class="item.type"v-html="item.content"></div></slot></li></ul>'
        });
        new Vue({
            el: "#app",
            data () {
                return {
                    post: post,
                    items: timeline_data
                }
            },
            methods: {
                Scrollbottom() {
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let clientHeight = document.documentElement.clientHeight;
                    let scrollHeight = document.documentElement.scrollHeight;
                    if (scrollTop + clientHeight >= scrollHeight) {
                        axios.post('/mobile/talent/lvcheng',post).then(response => (console.log(response))).catch(
                            function (error) {
                                console.log(error);
                            });
                    }
                },
            },
            created(){
                //window.addEventListener('scroll', this.Scrollbottom);
            },
        });
    </script>
@endsection