jucai/public/themes/default/views/mobile/app/talentcard/index.blade.php

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

@push('meta')

@endpush

@push('css')
    <style>
        .list-image {
            width:25%;
            padding:0;
            margin:0;
            border:none;
            float:left;
        }
    </style>
@endpush

@push('js')

@endpush
@section('content')
    <img src="{{ theme_asset('mobile/images/talent_card/header.jpg') }}" style="display:block;width:100%;margin-top: 42px">
    <div style="width:100%;" id="list">
        <img class="list-image" src="{{ theme_asset('mobile/images/talent_card/list_1.jpg') }}">
        <img class="list-image" src="{{ theme_asset('mobile/images/talent_card/list_2.jpg') }}">
        <img class="list-image" src="{{ theme_asset('mobile/images/talent_card/list_3.jpg') }}">
        <img class="list-image" src="{{ theme_asset('mobile/images/talent_card/list_4.jpg') }}">
    </div>
    <a href="https://html.m.cmbchina.com/IGateway/Jump.aspx?funcid=1175001&CorperationCode=T00244NKB000000000000100000000000615000000000000000000000000&BranchID=595&Organization=595579&RecmCode="><img src="{{ theme_asset('mobile/images/talent_card/btn.jpg') }}" style="display:block;width:100%;"></a>
    <div id="cur" style="display:none;align-items:center;background:rgba(0,0,0,0.8);width:100%;height:100vh;position:fixed;left:0;top:0;z-index:9999;">
        <img src="{{ theme_asset('mobile/images/talent_card/list_1_cur.jpg') }}" style="width:100%;">
    </div>
@endsection
@section('script')
    <script>
        $('#list img').click(function(){
            let src = $(this).attr('src').replace('.jpg','_cur.jpg');
            $('#cur').css('display','flex');
            $('#cur img').attr('src',src);
        });
        $('#cur').click(function () {
            $(this).hide();
        });
    </script>
@endsection