update

t_global_Fine_temp4/public/Static_zy/footer.html

@@ -0,0 +1,118 @@
+<footer id="page-footer" class="page-footer sk-footer-container">
+  <style>
+    .sk-footer-container {
+      background: linear-gradient(135deg, #1e1e2f 0%, #151522 100%); 
+      padding: 60px 20px; 
+      position: relative; 
+      overflow: hidden; 
+      box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
+    }
+    .skeleton-block {
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
+      background-size: 400% 100%;
+      animation: skeleton-loading 2s infinite ease-in-out;
+      border-radius: 6px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+      border: 1px solid rgba(255, 255, 255, 0.02);
+    }
+    .skeleton-block:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+    @keyframes skeleton-loading {
+      0% { background-position: 100% 50%; }
+      100% { background-position: 0 50%; }
+    }
+
+    /* === 响应式布局 (适配所有手机) === */
+    .sk-footer-main {
+      display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 40px; padding-bottom: 50px;
+    }
+    .sk-footer-col { flex: 1; display: flex; flex-direction: column; gap: 14px; }
+    .sk-footer-col-1 { min-width: 250px; gap: 15px;}
+    .sk-footer-col-nav { min-width: 150px; }
+    .sk-footer-col-last { flex: 1.5; min-width: 250px; gap: 15px; }
+
+    .sk-footer-bottom {
+      max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
+    }
+    
+    @media (max-width: 768px) {
+      .sk-footer-container { padding: 40px 15px 30px; }
+      .sk-footer-main { flex-direction: column; gap: 30px; padding-bottom: 30px; }
+      
+      /* 手机端改成全宽或两列堆叠 */
+      .sk-footer-col-1 { min-width: 100%; align-items: center; text-align: center; }
+      .sk-logo-sk { margin: 0 auto; }
+      
+      /* 链接区改成两列并排 */
+      .sk-nav-wrap { display: flex; flex-direction: row; gap: 20px; width: 100%; justify-content: space-between; }
+      .sk-footer-col-nav { min-width: calc(50% - 10px); }
+      
+      /* 订阅区全宽 */
+      .sk-footer-col-last { min-width: 100%; align-items: center; }
+      .sk-social-wrap { justify-content: center; }
+      
+      .sk-footer-bottom { flex-direction: column; align-items: center; }
+      .sk-policy-wrap { justify-content: center; }
+    }
+  </style>
+
+  <!-- 主体区块 -->
+  <div class="sk-footer-main">
+    <!-- 品牌/Logo区域 -->
+    <div class="sk-footer-col sk-footer-col-1">
+      <div class="skeleton-block sk-logo-sk" style="width: 140px; height: 40px; border-radius: 20px;"></div>
+      <div class="skeleton-block" style="width: 100%; height: 12px; margin-top: 10px; max-width: 300px;"></div>
+      <div class="skeleton-block" style="width: 90%; height: 12px; max-width: 270px;"></div>
+      <div class="skeleton-block" style="width: 75%; height: 12px; max-width: 220px;"></div>
+    </div>
+    
+    <div class="sk-nav-wrap">
+      <!-- 链接列 1 -->
+      <div class="sk-footer-col sk-footer-col-nav">
+        <div class="skeleton-block" style="width: 60%; height: 18px; margin-bottom: 8px;"></div>
+        <div class="skeleton-block" style="width: 80%; height: 10px;"></div>
+        <div class="skeleton-block" style="width: 70%; height: 10px;"></div>
+        <div class="skeleton-block" style="width: 90%; height: 10px;"></div>
+        <div class="skeleton-block" style="width: 75%; height: 10px;"></div>
+      </div>
+      
+      <!-- 链接列 2 -->
+      <div class="sk-footer-col sk-footer-col-nav">
+        <div class="skeleton-block" style="width: 55%; height: 18px; margin-bottom: 8px;"></div>
+        <div class="skeleton-block" style="width: 65%; height: 10px;"></div>
+        <div class="skeleton-block" style="width: 85%; height: 10px;"></div>
+        <div class="skeleton-block" style="width: 75%; height: 10px;"></div>
+      </div>
+    </div>
+    
+    <!-- 订阅/社交区域 -->
+    <div class="sk-footer-col sk-footer-col-last">
+      <div class="skeleton-block" style="width: 120px; height: 18px; margin-bottom: 5px;"></div>
+      <!-- 模仿输入框和大按钮 -->
+      <div class="skeleton-block" style="width: 100%; max-width: 350px; height: 45px; border-radius: 25px;"></div>
+      <!-- 模仿社交图标 -->
+      <div class="sk-social-wrap" style="display: flex; gap: 15px; margin-top: 15px; width: 100%; max-width: 350px;">
+        <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+        <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+        <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+        <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- 底部版权/协议区块 -->
+  <div class="sk-footer-bottom">
+    <!-- 版权 -->
+    <div class="skeleton-block" style="width: 200px; height: 12px;"></div>
+    <!-- 政策链接 -->
+    <div class="sk-policy-wrap" style="display: flex; gap: 25px;">
+      <div class="skeleton-block" style="width: 60px; height: 12px;"></div>
+      <div class="skeleton-block" style="width: 60px; height: 12px;"></div>
+      <div class="skeleton-block" style="width: 60px; height: 12px;"></div>
+    </div>
+  </div>
+</footer>