豆米跳跳官网
blame | 历史 | 补丁 | 提交 | 提交对比 | 显示空白
MrShi
2025-07-04 82d483406921aa92b6ce3a1af5d17d80ccb78256 
 web/components/nav.html


¶Ô±ÈÐÂÎļþ


@@ -0,0 +1,105 @@


<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title></title>


    <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:last-child {


            margin: 0 !important;


        }


        ul li .underline {


            width: 30px;


            height: 4px;


            position: absolute;


            bottom: 9px;


            left: 50%;


            transform: translate(-50%, 0);


            background: #FF7900;


        }


        .nav-btn {


            margin-left: 80px;


            flex-shrink: 0;


            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;


        }


    </style>


</head>


<body>


<nav>


    <div style="width: 100%; height: 70px; background: #ffffff;">


        <div class="nav">


            <div class="nav-logo">


                <img src="./assets/images/top_logo@2x.png" alt="logo">


            </div>


            <ul>


                <li>


                    <a href="./index.html">首页</a>


                    <div class="underline"></div>


                </li>


                <li>


                    <a href="./intelligent_system.html">智慧系统</a>


                </li>


                <li>


                    <a href="./solution.html">解决方案</a>


                </li>


                <li>


                    <a href="./alot.html">Alot物联</a>


                </li>


                <li>


                    <a href="./dynamics.html">最新动态</a>


                </li>


                <li>


                    <a href="./about.html">关于我们</a>


                </li>


                <li>


                    <a href="/">渠道合作</a>


                </li>


            </ul>


            <button class="nav-btn">免费试用</button>


        </div>


    </div>


</nav>


</body>


</html>