mashangyoujiu/Application/Super/View/App/index.html

<!--[1.8.20]-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/user/css/downloadCenter.css"/>
<style>
    .innera_left > img {
        width: 100%;
        height: 100%;
    }

    .downbox {
        box-sizing: border-box;
        padding-bottom: 30px;
    }

    .layui-carousel > div:nth-child(1) > div {
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: -1;
    }

    .layui-carousel > div:nth-child(1) > .layui-this {
        z-index: 0 !important;
    }

    .layui-carousel > div:nth-child(1) > div > img {
        width: auto !important;
        max-width: 100%;
        max-height: 100%;
    }

    .download, .toDownApp, .previewCode {
        position: relative;
    }

    .download > div {
        width: 150px;
        height: 30px;
        background-color: white;
        border: 1px solid #dddddd;
        position: absolute;
        font-size: 12px;
        color: #333333;
        bottom: 38px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        display: none;
    }

    .download:hover > div {
        display: block;
    }

    .toDownApp > div:before, .download > div:before, .previewCode > div:before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: -7px;
        background-color: white;
        left: 70px;
        transform: rotateZ(45deg);
        border-width: 0 1px 1px 0;
        border-color: #dddddd;
        border-style: solid;
    }

    .toDownApp > div, .previewCode > div {
        width: 200px;
        height: 200px;
        padding: 10px;
        background-color: white;
        border: 1px solid #dddddd;
        position: absolute;
        top: -210px;
        border-radius: 5px;
        display: none;
    }

    .previewCode > div > img {
        width: 100%;
        height: 100%;
    }

    .previewCode:hover > div {
        display: block;
    }
</style>
<div class="downbox" style="width: auto">
    <volist name="unite" id="unite">
        <div class="title" style="background-color: #eee">
            <div>{$unite['uitname']}</div>
        </div>
        <div class="content">
            <volist name="unite['info']" id="list1">
                <div class="inner" style="width: 400px;">
                    <div class="innera">
                        <div class="innera_left">
                            <img src="{$list1['logo_url']}"/>
                        </div>
                        <div class="innera_right">
                            <div>{$list1['type_name']} {$list1['name']}</div>
                            <div>版本：{$list1['version']} 更新日期：{$list1['time']}</div>
                        </div>
                    </div>
                    <div class="innerb">
                        {$list1['information']}
                    </div>
                    <div class="innerc">
                        <if condition="$list1['type'] eq 1 OR $list1['type'] eq 4">
                            <!--PC、Android-->
                            <div class="download">
                                <img src="__PUBLIC__/user/images/download.png"/>&nbsp;&nbsp;
                                <span><a target="_blank" href="{$list1['down_url']}">下载</a></span>
                            </div>
                            <div class="previewimg" data-id="{$list1['id']}">
                                <img src="__PUBLIC__/user/images/preview.png"/>&nbsp;&nbsp;
                                <span>预览</span>
                            </div>
                            <elseif condition="$list1['type'] eq 2 OR $list1['type'] eq 6"/>
                            <!--小程序-->
                            <div class="previewCode">
                                <div><img src="{$list1['experience_url']}"></div>
                                <img src="__PUBLIC__/user/images/preview.png"/>&nbsp;&nbsp;
                                <span>扫码体验</span>
                            </div>
                            <div class="previewimg" data-id="{$list1['id']}">
                                <img src="__PUBLIC__/user/images/preview.png"/>&nbsp;&nbsp;
                                <span>预览</span>
                            </div>
                            <elseif condition="$list1['type'] eq 5"/>
                            <!--APP-->
                            <div class="toDownApp dowloads" data-url="{$list1['down_url']}">
                                <div></div>
                                <img src="__PUBLIC__/user/images/download.png"/>
                                <span><a href="{$list1['down_url']}">下载</a></span>
                            </div>
                            <div class="previewimg" data-id="{$list1['id']}">
                                <img src="__PUBLIC__/user/images/preview.png"/>&nbsp;&nbsp;
                                <span>预览</span>
                            </div>
                        </if>
                    </div>
                </div>
            </volist>
        </div>
    </volist>


    </volist>

</div>
</div>

<script src="__PUBLIC__/user/js/jquery.qrcode.min.js"></script>
<script type="text/javascript">
    imgBox([]);

    function imgBox(obj) {
        layui.use(['carousel', 'layer'], function () {
            var carousel = layui.carousel;
            //大图预览
            var content = "";
            $.each(obj, function (key, val) {
                content += `<div><img style="width: 100%;" src="${val}"></div>`;
            })
            //建造实例
            content = `<div class="layui-carousel" id="test1"><div carousel-item>${content}</div></div>`;
            let appCarouselBox = $('.appCarouselBox');
            if(!appCarouselBox || !appCarouselBox.length){
                appCarouselBox = document.createElement('div');
                appCarouselBox.className = 'appCarouselBox';
                appCarouselBox.style = 'display:none';
                $('body').append(appCarouselBox)
            }
            $('.appCarouselBox').html(content);
            carousel.render({
                elem: '#test1',
                width: '100%',
                height: '440px',
                anim: 'fade'
            });
        })
    }

    $('.toDownApp').mouseenter(function () {
        if ($(this).find('canvas').length) {
            $(this).children('div').show();
        } else {
            let url = $(this).attr('data-url');
            $(this).children('div').qrcode({
                render: "canvas",
                width: 180,
                height: 180,
                text: url //任意内容
            });
            $(this).children('div').show();
        }
    })

    // $('.dowloads').click(function () {
    //     var url = $(this).attr('data-url');
    //
    // })

    $('.toDownApp').mouseleave(function () {
        $(this).children('div').hide();
    })
    layui.use(['carousel', 'layer'], function () {
        var layer = layui.layer;
        $('.previewimg').click(function () {
            console.log('aaa');
            var id = $(this).attr('data-id');
            $.ajax({
                url: "{:U('App/cons')}",
                type: "post",
                data: {
                    id: id
                },
                success: function (data) {
                    if (data.status == 1) {
                        imgBox(data.list);
                    }
                }
            })

            layer.open({
                type: 1,
                title: '预览',
                content: $('.appCarouselBox'),
                area: '800px',
            });
        })
    })
</script>