|
@@ -0,0 +1,216 @@
|
|
|
+@extends('mobile.module.layouts.content')
|
|
|
+@push('meta')
|
|
|
+
|
|
|
+@endpush
|
|
|
+
|
|
|
+@push('css')
|
|
|
+ <link href="{{ theme_asset('mobile/css/news.css') }}" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+
|
|
|
+
|
|
|
+ .line-container {
|
|
|
+ color:
|
|
|
+ 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:
|
|
|
+ }
|
|
|
+ .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
|
|
|
+ }
|
|
|
+ .line-container .item-circle.purple {
|
|
|
+ border: 2px solid
|
|
|
+ }
|
|
|
+ .line-container .item-circle.orange {
|
|
|
+ border: 2px solid
|
|
|
+ }
|
|
|
+ .line-container .item-circle.yellow {
|
|
|
+ border: 2px solid
|
|
|
+ }
|
|
|
+ .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:
|
|
|
+ stroke-width: 4px;
|
|
|
+ fill: white;
|
|
|
+ }
|
|
|
+ .line-container .item-star.purple path {
|
|
|
+ stroke:
|
|
|
+ }
|
|
|
+ .line-container .item-star.orange path {
|
|
|
+ stroke:
|
|
|
+ }
|
|
|
+ .line-container .item-star.yellow path {
|
|
|
+ stroke:
|
|
|
+ }
|
|
|
+ .line-container .item-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: -1.92rem;
|
|
|
+ width: 65px;
|
|
|
+ text-align: center;
|
|
|
+ color:
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+@endpush
|
|
|
+
|
|
|
+@push('js')
|
|
|
+ <script src="{{ theme_asset('mobile/js/dropload.min.js') }}"></script>
|
|
|
+@endpush
|
|
|
+
|
|
|
+@section('content')
|
|
|
+ <div id="app">
|
|
|
+ <div class="drop_content">
|
|
|
+ <img src="{{ theme_asset('mobile/images/shuobo_demo.png') }}" />
|
|
|
+{{-- <light-timeline :items='items'></light-timeline>--}}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+@endsection
|
|
|
+
|
|
|
+@section('script')
|
|
|
+ <script>
|
|
|
+ var data = eval(decodeURI('{{ $data }}'));
|
|
|
+ console.log(data)
|
|
|
+ </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 {
|
|
|
+ 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击败队友马龙,获得冠军。'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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').then(response => (console.log(response))).catch(
|
|
|
+ function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ window.addEventListener('scroll', this.Scrollbottom);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+@endsection
|