easygoadmin-web/xiaomayi-modules/xiaomayi-web/src/main/resources/templates/plugin/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<!-- 引入头部 -->
<head th:replace="~{./public/header :: header}"></head>

<style>
    .ew-banner {
        max-width: 100vw;
        overflow: hidden;
        background: #fff;
        color: #333;
        position: relative;
    }

    .ew-banner:before {
        display: none;
    }

    .ew-banner p {
        color: #999;
    }

    .ew-banner img.shape {
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
    }

    .ew-banner img {
        pointer-events: none;
    }

    @media screen and (max-width: 768px) {
        img.shape-main {
            width: 90% !important;
            max-width: 370px !important;
            right: 15px !important;
            top: 30px !important;
        }

        .ew-banner > .layui-container {
            padding-top: 320px;
            padding-bottom: 20px !important;
            padding-right: 20px !important;
        }

        img.shape6 {
            top: 510px !important;
        }

        img.shape4 {
            left: 5px !important;
            bottom: 300px !important;
        }

        .layui-logo > img {
            top: 12px !important;
        }

        .ew-footer .img-group {
            padding-left: 100px !important;
            height: 103px !important;
        }

        .ew-footer .img-group > img {
            width: 90px !important;
            height: 90px !important;
            top: 7px !important;
        }
    }

    .goadmin-ribbon.goadmin-ribbon-badge {
        position: absolute;
        left: 15px;
        top: 15px;
        z-index: 1;
        overflow: hidden;
        width: 95px;
        height: 95px;
        text-align: right;
    }
    .goadmin-ribbon {
        display: block;
        vertical-align: top;
        width: auto;
        min-height: 70px;
        position: relative;
    }
    .goadmin-ribbon.goadmin-ribbon-badge > * {
        font-size: 13px;
        color: #fff;
        font-family: "Libre Franklin",sans-serif;
        text-align: center;
        line-height: 20px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        width: 130px;
        display: block;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.06),0 1px 0 0 rgba(0,0,0,0.02);
        position: absolute;
        top: 30px;
        left: -25px;
        font-weight: 600;
    }
    .goadmin-ribbon-purple {
        background: #D6359A;
    }
    .goadmin-ribbon-danger {
        background: #ff5722;
    }
    .goadmin-ribbon-dark {
        background: #3B3E47;
    }
    .goadmin-ribbon-warning {
        background: #FBCC5C;
    }
    .layer-get-code > .lay-code-group > button {
        position: absolute;
        right: 0;
        top: 0;
        height: 46px;
        width: 120px;
        border: 1px solid rgba(111, 121, 122, 0.3);
        box-sizing: border-box;
        cursor: pointer;
    }
    .product-card .product-cover {
        position: relative;
        height: 150px;
        width: 100%;
        overflow: hidden;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .product-card {
        background-color: #fff;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.06);
        margin-bottom: 10px;
        border-radius: 10px;
    }
</style>

<body>
<!-- header -->
<div th:replace="~{./public/common_header::common_header}"></div>

<!-- product -->
<div class="section">
    <div class="section-title">
        <h2>插件市场</h2>
        <p>为企业和开发者提供全方位应用、服务、组件等搭建与部署解决方案！</p>
    </div>
    <div class="layui-container" style="padding-bottom: 60px;">
        <div class="layui-row layui-col-space30">
<!--            <div class="layui-col-md4 layui-col-sm6">-->
<!--                <div class="product-card">-->
<!--                    <div class="product-cover">-->
<!--                        <div class="product-cover-img" style="background-image: url('https://img1.baidu.com/it/u=3671460108,1082343560&fm=253&fmt=auto&app=138&f=JPEG?w=806&h=362')"></div>-->
<!--                        <div class="product-tools">-->
<!--                            <a href="/goods/detail/1" class="layui-btn">查看详情</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="product-body">-->
<!--                        <a href="'/goods/detail/1" class="product-title" title="专家服务">ESXI虚拟化平台搭建</a>-->
<!--                        <p class="product-desc">ESXI虚拟化平台搭建</p>-->
<!--                        <span class="layui-badge-rim">￥1999.99</span>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->
            <div th:each="item,itemStat:${productList}" class="layui-col-md4 layui-col-sm6">
                <div class="product-card">
                    <div class="product-cover">
                        <div class="product-cover-img" th:style="'background-image: url('+${item['cover']}+')'"></div>
                        <div class="product-tools">
                            <a href="#" class="layui-btn" target="_blank">演示</a>
                            <a th:href="'/goods/detail/'+${item['id']}" class="layui-btn">详情</a>
                        </div>
                    </div>
                    <div class="product-body">
                        <a th:href="'/goods/detail/'+${item['id']}" class="product-title" th:title="${item['productTitle']}" th:text="${item['productTitle']}"></a>
                        <p class="product-desc" th:text="${item['productTitle']}"></p>
                        <span class="layui-badge-rim">￥[[${item['price']}]]</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入脚部 -->
<footer th:replace="~{./public/footer :: footer}"></footer>
</body>
</html>