|
|
@@ -0,0 +1,668 @@
|
|
|
+/* DragonOS镜像站首页样式 */
|
|
|
+#wrapper {
|
|
|
+ margin: 0 5%;
|
|
|
+ padding: 0 1rem;
|
|
|
+ overflow-x: hidden;
|
|
|
+ position: relative;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 90%;
|
|
|
+}
|
|
|
+
|
|
|
+:root {
|
|
|
+ --dragon-light-blue: #4da6ff; /* 亮蓝 */
|
|
|
+ --dragon-dark-blue: #1a56db; /* 深蓝 */
|
|
|
+ --dragon-purple: #db34d3; /* 粉紫 */
|
|
|
+ --dragon-dark: #111827;
|
|
|
+ --dragon-light: #f3f4f6;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ background: linear-gradient(135deg, var(--dragon-light) 0%, #e5e7eb 100%);
|
|
|
+ font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
+ margin: 0;
|
|
|
+ padding: 2rem;
|
|
|
+ color: var(--dragon-dark);
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+/* 保持原有加载动画 */
|
|
|
+.is-preload {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.5s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.is-preload.is-loaded {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加页面滚动时的固定导航栏 */
|
|
|
+#nav {
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 1rem;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 为导航栏链接添加更多悬停效果 */
|
|
|
+#nav ul li a:hover {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #333;
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+#header {
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(255, 255, 255, 0.9) 0%,
|
|
|
+ rgba(255, 255, 255, 0.7) 100%
|
|
|
+ ),
|
|
|
+ url("https://dragonos.org/wp-content/uploads/2023/03/图形中英文完整@0.5x-1024x275.png")
|
|
|
+ no-repeat center center/cover;
|
|
|
+ padding: 6rem 0;
|
|
|
+ text-align: center;
|
|
|
+ animation: fadeIn 1s ease-in-out;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+#header::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 定义淡入动画 */
|
|
|
+@keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#header h1 {
|
|
|
+ font-size: 3rem;
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 700;
|
|
|
+ animation: slideInDown 0.8s ease-out;
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ letter-spacing: -0.5px;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+/* 定义下滑动画 */
|
|
|
+@keyframes slideInDown {
|
|
|
+ from {
|
|
|
+ transform: translateY(-20px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: translateY(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#header p {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ color: #6b7280;
|
|
|
+ margin: 1rem 0 0;
|
|
|
+ animation: fadeInUp 1s ease-out;
|
|
|
+ font-weight: 500;
|
|
|
+ max-width: 800px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 定义淡入上滑动画 */
|
|
|
+@keyframes fadeInUp {
|
|
|
+ from {
|
|
|
+ transform: translateY(20px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: translateY(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#nav {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ padding: 0.8rem 0;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0.5rem;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li {
|
|
|
+ flex-grow: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ transition: width 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a:hover {
|
|
|
+ color: var(--dragon-purple);
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a:hover::after {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a.active {
|
|
|
+ color: var(--dragon-purple);
|
|
|
+}
|
|
|
+
|
|
|
+#nav ul li a.active::after {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ padding: 2rem;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 2rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content {
|
|
|
+ max-width: 600px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content h2 {
|
|
|
+ font-size: 2rem;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 1rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content h3 {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #666;
|
|
|
+ margin: 0 0 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions .button {
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ color: #fff;
|
|
|
+ padding: 0.75rem 1.5rem;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
|
|
|
+ font-weight: 600;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions .button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
|
|
|
+ background: linear-gradient(45deg, #1a4fd8, #db34d3);
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions .button:active {
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions .button::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ transparent,
|
|
|
+ rgba(255, 255, 255, 0.3),
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ transform: translateX(-100%);
|
|
|
+ transition: transform 0.6s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.spotlight .content .actions .button:hover::after {
|
|
|
+ transform: translateX(100%);
|
|
|
+}
|
|
|
+
|
|
|
+.main.special {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 2rem;
|
|
|
+ margin: 2rem 0;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 12px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ animation: fadeIn 1s ease-in-out;
|
|
|
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.main.special:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
|
|
+ border-color: rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.main.special h2 {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features li {
|
|
|
+ flex: 1 1;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features li a {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features li h3 {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features li a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.features li a:hover {
|
|
|
+ color: #555;
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+.main.special ul.actions {
|
|
|
+ padding-inline-start: 0;
|
|
|
+}
|
|
|
+
|
|
|
+#cta {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ padding: 3rem 2rem;
|
|
|
+ margin: 3rem 0;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid rgba(79, 70, 229, 0.15);
|
|
|
+ animation: fadeIn 1s ease-in-out;
|
|
|
+ text-align: center;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+#cta::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 4px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+#cta h2 {
|
|
|
+ font-size: 2rem;
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ margin: 0 0 1.5rem;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+#cta ul {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0 auto 2rem;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0.8rem;
|
|
|
+ max-width: 600px;
|
|
|
+}
|
|
|
+
|
|
|
+#cta ul li {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #555;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+#cta .actions .button {
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ color: #fff;
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+#cta .actions .button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
|
|
|
+ background: linear-gradient(45deg, #1a4fd8, #db34d3);
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ padding: 2rem 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 3rem;
|
|
|
+ box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+}
|
|
|
+
|
|
|
+footer .copyright {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0.5rem;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ color: #555;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+footer .copyright a {
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+footer .copyright a:hover {
|
|
|
+ color: var(--dragon-purple);
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+footer::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 100px;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ margin: 0 auto 1.5rem;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 立即加入我们按钮样式 - 与前往赞助按钮一致 */
|
|
|
+.cta-button {
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ color: #fff;
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.cta-button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
|
|
|
+ background: linear-gradient(45deg, #1a4fd8, #db34d3);
|
|
|
+}
|
|
|
+
|
|
|
+/* 立即加入我们按钮特殊样式 */
|
|
|
+.button.join-button {
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ var(--dragon-purple),
|
|
|
+ var(--dragon-dark-blue)
|
|
|
+ );
|
|
|
+ font-size: 1.1rem;
|
|
|
+ padding: 0.8rem 2rem;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 4px 8px rgba(219, 52, 211, 0.3);
|
|
|
+ font-weight: 500;
|
|
|
+ text-transform: none;
|
|
|
+ letter-spacing: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.button.join-button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(219, 52, 211, 0.4);
|
|
|
+ background: linear-gradient(45deg, #e82ee8, #1a56db);
|
|
|
+}
|
|
|
+
|
|
|
+.button.join-button:active {
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除按钮文字下划线 */
|
|
|
+.button,
|
|
|
+.cta-button {
|
|
|
+ text-decoration: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 资源中心卡片样式 */
|
|
|
+#first .content {
|
|
|
+ margin: 2rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.download-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 3rem;
|
|
|
+ margin: 2rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item {
|
|
|
+ background: rgba(255, 255, 255, 0.98);
|
|
|
+ padding: 2.5rem 2rem;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow: 0 8px 16px rgba(26, 86, 219, 0.08);
|
|
|
+ width: 320px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
+ border: 1px solid rgba(77, 166, 255, 0.3);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 6px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.download-item:hover {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ box-shadow: 0 12px 24px rgba(26, 86, 219, 0.15);
|
|
|
+ border-color: rgba(77, 166, 255, 0.6);
|
|
|
+}
|
|
|
+
|
|
|
+.download-item .icon {
|
|
|
+ font-size: 3rem;
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ display: inline-block;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item:hover .icon {
|
|
|
+ transform: scale(1.1);
|
|
|
+ color: var(--dragon-purple);
|
|
|
+}
|
|
|
+
|
|
|
+.download-item h3 {
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ margin-bottom: 1.2rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 700;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item p {
|
|
|
+ color: var(--dragon-dark);
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item a {
|
|
|
+ display: inline-block;
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(77, 166, 255, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.download-item a:hover {
|
|
|
+ color: white;
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ var(--dragon-dark-blue),
|
|
|
+ var(--dragon-purple)
|
|
|
+ );
|
|
|
+ text-decoration: none;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 8px rgba(26, 86, 219, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+/* 文件列表表格样式 */
|
|
|
+.file-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ margin: 2rem 0;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.file-table th {
|
|
|
+ background: linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ color-mix(in srgb, var(--dragon-dark-blue) 80%, transparent),
|
|
|
+ color-mix(in srgb, var(--dragon-purple) 80%, transparent)
|
|
|
+ );
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ padding: 1rem;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.file-table td {
|
|
|
+ padding: 0.8rem 1rem;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.file-table tr:last-child td {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.file-table a {
|
|
|
+ color: var(--dragon-dark-blue);
|
|
|
+ transition: color 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.file-table a:hover {
|
|
|
+ color: var(--dragon-purple);
|
|
|
+ text-decoration: none;
|
|
|
+}
|
