From 056c73b0e86e76faa08b627c0cebfa244a7b399a Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期四, 10 七月 2025 15:48:24 +0800 Subject: [PATCH] ss --- server/src/main/resources/templates/components/nav.html | 253 +++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 218 insertions(+), 35 deletions(-) diff --git a/server/src/main/resources/templates/components/nav.html b/server/src/main/resources/templates/components/nav.html index 961ec98..a3dba3d 100644 --- a/server/src/main/resources/templates/components/nav.html +++ b/server/src/main/resources/templates/components/nav.html @@ -1,36 +1,219 @@ -<div class="nav"> - <div class="nav-logo"> - <img src="${webDomain}/assets/images/top_logo@2x.png" alt="${seo.imgalt!''}"> +<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: 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> +<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);">瑙e喅鏂规</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> + <a href="${webDomain}/aboutChannel.html" class="nav-btn">鍏嶈垂璇曠敤</a> + </div> </div> - <ul> - <li> - <a href="${webDomain}/index.html">棣栭〉</a> - <#if navIndex ==0></if><div class="underline"></div></#if> - </li> - <li> - <a href="${webDomain}/intelligent_system.html">鏅烘収绯荤粺</a> - <#if navIndex == 1></if><div class="underline"></div></#if> - </li> - <li> - <a href="${webDomain}/solution.html">瑙e喅鏂规</a> - <#if navIndex == 2></if><div class="underline"></div></#if> - </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> - <a href="${webDomain}/aboutChannel.html" class="nav-btn">鍏嶈垂璇曠敤</a> -</div> \ No newline at end of file +</nav> \ No newline at end of file -- Gitblit v1.9.3