jucai/public/themes/default/views/mobile/app/health/jinjiang.blade.php

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

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/index.css') }}" rel="stylesheet">
    <style>
        .img-box,.img-box img {display: block;width:100%;}
        .module-title .module-title-nav{
            display:block;
            float:left;
            color: #666666;
            text-align: center;
            height: .8rem;
            width: 33%;
            line-height: .8rem;
            text-decoration: none;
        }
        .module-title-content {background: white;padding:10px;width: 100%;box-sizing: border-box;}
        #player-container-id,#player-container-id1,#player-container-id2{
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* 16:9 宽高比 */
            position: relative;
            display: inline-block;

        }
        video {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .picmod {width:100%;}
        .picmod img {display: block;width: 100%;}
        .picmod p {padding:0 5px;box-sizing: border-box;width: 100%;text-indent: 2em;}
    </style>
    <link href="{{ theme_asset('mobile/css/personal.css') }}" rel="stylesheet">
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/>
@endpush

@push('js')
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
@endpush

@section('content')
    {{--    头部--}}
    <div class="headernavfixed">
        <div class="headernav font18">
            <div class="title">
                <div class="n-tit-box">
                    认识晋江
                </div>
                <div class="return js-back for-event" data-href="{{route('mobile.health.index')}}"></div>
            </div>
        </div>
    </div>
    <div class="listmod">
        <div class="eattitle list_height t1">
            晋江起点
        </div>
        <div class="picmod">
            <img src="{{theme_asset('app/images/originImg.png')}}" alt="">
            <p>晋江三面临海，土地资源的匮乏激起了晋江人的开拓意识，晋江先民开展多种经营，发展工商经济和海外贸易，带来了晋江商业的繁荣。</p>
            <p>宋元时期，晋江口的泉州港号称“东方第一大港”，是“海上丝绸之路”的起点。</p>
        </div>
    </div>
    <div class="listmod">
        <div class="eattitle list_height t1">
            晋江由来
        </div>
        <div class="picmod">
            <img src="{{theme_asset('app/images/viewImg2.png')}}" alt="">
            <p>晋江古为闽越人聚居地，西晋永嘉时，晋人为避战乱，衣冠南渡，沿江而居，因思故土，故名为晋江。唐开元六年（公元718年），“析南安东南地置县”。因临晋江，遂衍江名为县名。县治设泉州，州县同治。宋太平兴国六年（公元981年），析晋江县东乡十六里置惠安县。1949年9月，晋江解放，成立晋江县人民政府，县治仍设泉州。</p>
            <p>1951年春，县治迁至青阳镇。1988年，石狮、永宁、蚶江、祥芝四乡镇由晋江县析出，置石狮市。92年3月，晋江撤县设市。</p>
        </div>
    </div>

    <div class="module">
        <div class="module-title font14">
            <a href="javascript:;" class="module-title-nav font14 active f-left" data-id="jkjj">健康晋江</a>
            <a href="javascript:;" class="module-title-nav font14 f-left" data-id="cjj">创晋江</a>
            <a href="javascript:;" class="module-title-nav font14 f-left" data-id="rcgw">泉州人才港湾计划</a>
            <div class="clear"></div>
        </div>
        <div class="mobile_index_news module-box" id="jkjj">
            <video id="player-container-id"  preload="auto" playsinline webkit-playsinline>
            </video>
        </div>
        <div class="mobile_index_news module-box" id="cjj" style="display: none;">
            <video id="player-container-id1"  preload="auto" playsinline webkit-playsinline>
            </video>
        </div>
        <div class="mobile_index_news module-box" id="rcgw" style="display: none;">
            <video id="player-container-id2"  preload="auto" playsinline webkit-playsinline>
            </video>
        </div>
    </div>
    <div style="width:100%;height:300px;"></div>
@endsection

@section('script')
    <script>
        var player = TCPlayer('player-container-id', {
            sources: [{
                src: '{{ theme_asset('mobile/0e93030f7d1d74f6d738bbbd4511e2a6.mp4') }}?v=1', // 播放地址
            }],
            autoplay: false,
            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
            posterImage: true,
            bigPlayButton: true,
            poster: "{{ theme_asset('mobile/images/health_thumb.png') }}",
        });

        var player1 = TCPlayer('player-container-id1', {
            sources: [{
                src: '{{ theme_asset('mobile/chuangjinjiang.mp4') }}?v=2', // 播放地址
            }],
            autoplay: false,
            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
            posterImage: true,
            bigPlayButton: true,
            poster: "{{ theme_asset('mobile/chuangjinjiang.jpg') }}",
        });

        var player2 = TCPlayer('player-container-id2', {
            sources: [{
                src: '{{ theme_asset('mobile/gangwanjihua.mp4') }}?v=3', // 播放地址
            }],
            autoplay: false,
            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
            posterImage: true,
            bigPlayButton: true,
            poster: "{{ theme_asset('mobile/gangwanjihua.jpg') }}",
        });

        $('.module-title-nav').click(function() {
            $('.module-title-nav').removeClass('active');
            $(this).addClass('active');
            let id = $(this).data('id');
            $('.module-box').hide();
            $('#'+id).show();
        });
    </script>
@endsection