mashangyoujiu/Application/Retail/View/Plug/index.html

<!--[1.5.22]-->
<style>
    .plug_list {
        margin-bottom: 20px;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
    }

    .plug_list_title {
        background-color: #f5f5f5;
        color: black;
        font-size: 18px;
        border-bottom: 1px solid #e6e6e6;
        line-height: 60px;
        border-radius: 5px 5px 0 0;
        text-indent: 15px;
    }

    .plug_list_detail {
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .plug_list_con {
        box-sizing: border-box;
        width: 320px;
        height: 140px;
        border: 2px solid #d9d9d9;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin: 20px;
    }

    .plug_list_left {
        box-sizing: border-box;
        padding: 18px 14px 14px;
        width: 244px;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

    .plug_list_img_con {
        width: 104px;
        height: 104px;
        box-sizing: border-box;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
    }

    .plug_list_img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }

    .plug_list_text {
        box-sizing: border-box;
        width: 110px;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 8px;
    }

    .plug_list_text > span:nth-child(1) {
        font-size: 18px;
        line-height: 36px;
        font-weight: 400;
        color: black;
    }

    .plug_list_text > span:nth-child(2) {
        padding-top: 5px;
        font-size: 15px;
        color: #666666;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .plug_list_right {
        width: 72px;
        height: 100%;
        border-left: 1px dashed #d9d9d9;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .have {
        box-sizing: border-box;
        display: block;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        border-radius: 50%;
        font-size: 14px;
        margin-top: 70px;
    }

    .have1 {
        border: 1px solid #f66e4e;
        color: #f66e4e;
    }

    .have2 {
        border: 1px solid #ccc;
        color: #ccc;
    }

    .toPlug {
        position: absolute;
        top: 15px;
        left: 11px;
        border: 1px solid #f66e4e;
        color: #f66e4e;
        font-size: 12px;
        padding: 5px 15px 5px 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .toPlug:after {
        content: '';
        width: 6px;
        height: 6px;
        border-top: 1px solid #f66e4e;
        border-right: 1px solid #f66e4e;
        position: absolute;
        top: 10px;
        transform: rotateZ(45deg);
        font-size: 12px;
        line-height: 22px;
    }

    .toPlug:hover:after {
        border-color: white;
    }

    .toPlug:hover {
        background-color: #f66e4e;
        color: white;
    }
</style>
<div id="plugIndex">
    <volist name="list" id="li">
        <div class="plug_list">
            <div class="plug_list_title">{$li['class_name']}</div>
            <div class="plug_list_detail">
                <volist name="li['list']" id="ch">
                    <if condition="$authArr[$ch['plug_url']] eq true">
                        <div class="plug_list_con">
                            <div class="plug_list_left">
                                <div class="plug_list_img_con">
                                    <img class="plug_list_img" src="{$ch['icon_url']}">
                                </div>
                                <div class="plug_list_text">
                                    <span>{$ch['plug_name']}</span>
                                    <span>{$ch['information']}</span>
                                </div>
                            </div>
                            <div class="plug_list_right">
                                <if condition="$ch['m_status'] AND ($ch['m_status'] eq 1)">
                                    <if condition="$ch['plug_url']">
                                        <span class="toPlug"
                                              @click="openUrl('/index.php/{$ch[\'plug_url\']}','{$ch[\'plug_name\']}')">查看</span>
                                    </if>
                                    <span class="have have1">已开启</span>
                                    <else/>
                                    <span class="have have2">未开启</span>
                                </if>
                            </div>
                        </div>
                    </if>
                </volist>
            </div>
        </div>
    </volist>
</div>

<script type="text/javascript">
    layui.use('layer', function () {
        new Vue({
            el: '#plugIndex',
            methods: {
                openUrl: function (url, title) {
                    var title = [title, 'font-weight: bold;font-size: 15px;background-color: #fff;color: #409EFF;height: 40px;line-height: 40px;'];
                    var area = ['calc(100% - 160px)', 'calc(100% - 65px)'];
                    var offset = ['64px', '159px'];
                    var closeBtn = 1;
                    if (url == '/index.php/Distribution/BackstageConfig/index') {
                        title = [title, 'display:none;height: 0;line-height: 0;'];
                        // area = ['calc(100vw - 159px)', '100vh'];
                        // offset = ['-1px', '159px'];
                        closeBtn = 0;
                    }
                    layer.open({
                        type: 2,
                        title: title,
                        content: url,
                        area: area,
                        offset: offset,
                        shade: 0,
                        move: false,
                        resize: false,
                        closeBtn: closeBtn,
                    })
                }
            }
        })

    })

</script>
<!--</html>-->