当前位置：首页 > news >正文

Docker部署美化SunPanel导航页

news 2025/8/15 12:23:50

在这里插入图片描述
使用Cloudflare Tunnels穿透的地址：星霜导航
由于是使用的iStore里面的SunPanel导航页，只是基本的功能页脚配置

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20h7a1 1 0 0 0 1-1v-7.586a1 1 0 0 0-.293-.707l-7-7a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0-.293.707V19a1 1 0 0 0 1 1zm0 0v-2.5m0 2.5l-3-3m3 .5v-7m0 7l2.5-2.5M12 10.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m5.5 3a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-8 2a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E" type="image/svg+xml"><style>/* 背景线条样式 */.w-full .font-semibold:before {position: absolute;width: 93px;height: 75px;content: "";border-radius: 50%;z-index: -1;right: -27px;top: -35px;background: #ffffff3b;box-shadow: -8px 21px 0 #ffffff1a;}.w-full .font-semibold:after {position: absolute;width: 40px;height: 40px;border: 4px solid #ffffff3b;content: "";border-radius: 50%;top: -19px;right: 48px;z-index: -1;}/* 图标信息框样式 */.icon-info-box .rounded-2xl {position: relative;border-radius: 15px;overflow: hidden;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}/* 背景渐变动画 */@keyframes hueRotate {100% {filter