H5静态化

doum

2025-09-23 bcadfb6de692c138774688efd7928a973d59860f

 server/src/main/resources/templates/components/nav.html

@@ -1,30 +1,243 @@
<div class="nav">
    <div class="nav-logo">
        <img src="${webDomain}/assets/images/top_logo@2x.png" alt="logo">
<style>
        .nav {
            width: 1200px;
            height: 70px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .nav-logo {
            flex-shrink: 0;
            width: 160px;
            height: 52px;
            margin-right: 80px;
        }
        .nav-logo img {
            width: 100%;
            height: 100%;
        }
        ul {
            flex: 1;
            height: 100%;
            list-style-type: none;
            display: flex;
            align-content: center;
        }
        ul li a {
            display: block;
        }
        ul li {
            margin-right: 50px;
            line-height: 70px;
            position: relative;
        }
        ul li:hover .drop-down {
            display: block;
        }
        ul li:last-child {
            margin: 0 !important;
        }
        ul li .underline {
            width: 30px;
            height: 4px;
            position: absolute;
            bottom: 9px;
            left: 50%;
            transform: translate(-50%, 0);
            background: #FF7900;
        }

        .fa {
            position: fixed !important;
            left: 0 !important;
            width: 100vw !important;
            height: calc(100vh - 70px) !important;
            overflow-y: scroll !important;
            padding: 30px 0 !important;
            box-sizing: border-box !important;
        }
        .fa-content {
            width: 1200px;
            margin: 0 auto;
        }
        .fa-content-item {
            width: 100%;
        }
        .fa-content-item-label {
            display: inline;
            font-weight: 600;
            font-size: 18px;
            color: #191B1F;
            cursor: pointer;
        }
        .fa-content-item-label:hover {
            color: #FF7900 !important;
        }
        .fa-content-item-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .fa-content-item-list-zw {
            width: 250px;
            height: 0;
        }
        .fa-content-item-list-row:hover {
            background: rgba(255,121,0,0.06) !important;
        }
        .fa-content-item-list-row:hover .fa-content-item-list-row-info span:nth-child(1) {
            color: #FF7900 !important;
            font-weight: 500 !important;
        }
        .fa-content-item-list-row {
            width: 250px;
            height: 60px;
            padding: 10px;
            box-sizing: border-box;
            background: rgba(255,255,255,0.06);
            border-radius: 4px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            cursor: pointer;
        }
        .fa-content-item-list-row img {
            width: 36px;
            height: 36px;
            margin-right: 12px;
        }
        .fa-content-item-list-row-info {
            display: flex;
            flex-direction: column;
        }
        .fa-content-item-list-row-info span:nth-child(1) {
            font-weight: 400;
            font-size: 14px;
            color: #191B1F;
            line-height: normal;
        }
        .fa-content-item-list-row-info span:nth-child(2) {
            font-weight: 400;
            font-size: 12px;
            color: #7B7F87;
            line-height: normal;
        }
        .drop-down {
            position: absolute;
            top: 70px;
            left: -50px;
            width: 164px;
            display: none;
            background: #FFFFFF;
            box-shadow: 0 7px 20px 0 rgba(0,0,0,0.1);
        }
        .drop-down-item {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 14px;
            color: #222222;
            cursor: pointer;
        }
        .drop-down-item:hover {
            font-weight: 500;
            color: #FF7900;
        }

        .nav-btn {
            margin-left: 10px;
            flex-shrink: 0;
            .btn-code {
                display:inline-block;
                flex-shrink: 0;
                width: 100px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                border-radius: 22px;
                border: 1px solid #FF7900;
                font-weight: 500;
                font-size: 16px;
                color: #FF7900;
                cursor: pointer;
            }
            .btn-use {
                display:inline-block;
                margin-left: 10px;
                width: 100px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                background: #FF7900;
                border-radius: 22px;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                border: none;
                cursor: pointer;
            }
             .btn-use:hover {
                background: #FF8C24;
            }
        }
    </style>
<nav>
    <div style="width: 100%; height: 70px; background: #ffffff;">
        <div class="nav">
            <div class="nav-logo">
                <img src="${webDomain}/assets/images/top_logo@2x.png" alt="${seo.imgalt!''}">
            </div>
            <ul>
                <li>
                    <a href="${webDomain}/index.html">首页</a>
                    <#if navIndex ==0></if><div class="underline"></div></#if>
                </li>
                <li>
                    <a href="javascript:void(0);">智慧系统</a>
                    <#if navIndex == 1></if><div class="underline"></div></#if>
                    <div class="drop-down">
                        <a href="${webDomain}/intelligent_system.html" class="drop-down-item">智慧场馆运营系统</a>
                        <a href="${webDomain}/operation.html" class="drop-down-item">智慧场馆运维系统</a>
                    </div>
                </li>
                <li>
                    <a href="javascript:void(0);">解决方案</a>
                    <#if navIndex == 2></if><div class="underline"></div></#if>
                <div class="drop-down">
                    <a href="${webDomain}/solution.html" class="drop-down-item">数智体育场馆</a>
                    <a href="${webDomain}/solution-meadowlands.html" class="drop-down-item">24H智能场馆</a>
                    <a href="${webDomain}/solution-sport.html" class="drop-down-item">数智体育平台</a>
                    <a href="${webDomain}/solution-scenicSpot.html" class="drop-down-item">景区&游乐园</a>
                    <a href="${webDomain}/solution-space.html" class="drop-down-item">空间智慧管理</a>
                </div>
                </li>
                <li>
                    <a href="${webDomain}/alot.html">Alot物联</a>
                    <#if navIndex == 3></if><div class="underline"></div></#if>
                </li>
                <li>
                    <a href="${webDomain}/dynamics.html">最新动态</a>
                    <#if navIndex ==4></if><div class="underline"></div></#if>
                </li>
                <li>
                    <a href="${webDomain}/about.html">关于我们</a>
                    <#if navIndex ==5></if><div class="underline"></div></#if>
                </li>
                <li>
                    <a href="${webDomain}/aboutChannel.html">渠道合作</a>
                    <#if navIndex ==6></if><div class="underline"></div></#if>
                </li>
            </ul>
            <div  class="nav-btn">
                <a href="${gitCodeUrl}" target="_blank" class="btn-code">获取源码</a>
                <a href="${webDomain}/aboutChannel.html" class="btn-use">免费试用</a>
            </div>
        </div>
    </div>
    <ul>
        <li>
            <a href="${webDomain}/index.html">首页</a>
            <div class="underline"></div>
        </li>
        <li>
            <a href="${webDomain}/intelligent_system.html">智慧系统</a>
        </li>
        <li>
            <a href="${webDomain}/solution.html">解决方案</a>
        </li>
        <li>
            <a href="${webDomain}/alot.html">Alot物联</a>
        </li>
        <li>
            <a href="${webDomain}/dynamics.html">最新动态</a>
        </li>
        <li>
            <a href="${webDomain}/about.html">关于我们</a>
        </li>
        <li>
            <a href="${webDomain}/about.html#section1">渠道合作</a>
        </li>
    </ul>
    <a href="${webDomain}/about.html#section1" class="nav-btn">免费试用</a>
</div>
</nav>