测试:修订间差异

来自SOKA CAFE
 
第1行: 第1行:
<!DOCTYPE html>
 
<html lang="zh-CN">
<html lang="zh-CN">
<head>
<head>
第17行: 第17行:
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
             display: flex;
             display: flex;
             justify-content: center; /* 默认居中(PC/平板) */
             justify-content: center;
         }
         }


        /* 响应式容器:默认60vw */
         .video-card-container {
         .video-card-container {
             width: 100%;
             width: 100%;
第27行: 第26行:
         }
         }


        /* 手机端:强制靠右 */
         @media (max-width: 768px) {
         @media (max-width: 768px) {
             body {
             body {
第33行: 第31行:
             }
             }
             .video-card-container {
             .video-card-container {
                 max-width: 100% !important;
                 max-width: 100%;
                 padding: 0 8px;
                 padding: 0 8px;
                 margin: 0; /* 取消居中 margin */
                 margin: 0;
             }
             }
         }
         }


        /* 卡片主体 */
         .video-card {
         .video-card {
             background: white;
             background: white;
第48行: 第45行:
         }
         }


        /* B站视频容器(16:9比例) */
         .bilibili-container {
         .bilibili-container {
             position: relative;
             position: relative;
第67行: 第63行:
         }
         }


        /* 底部信息区 */
         .info-section {
         .info-section {
             padding: 18px;
             padding: 18px;
            word-break: break-word;
            overflow-wrap: break-word;
         }
         }


第77行: 第74行:
             align-items: center;
             align-items: center;
             margin-bottom: 14px;
             margin-bottom: 14px;
            flex-wrap: wrap;
            gap: 8px 0;
         }
         }


第83行: 第82行:
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 10px;
            flex-wrap: wrap;
         }
         }


第96行: 第96行:
             font-weight: bold;
             font-weight: bold;
             font-size: 14px;
             font-size: 14px;
            flex-shrink: 0;
         }
         }


第102行: 第103行:
             font-weight: 600;
             font-weight: 600;
             color: #18191c;
             color: #18191c;
            white-space: nowrap;
         }
         }


        /* 强制白色:使用 !important + 颜色锁定 */
         .detail-link {
         .detail-link {
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             color: #ffffff !important; /* 强制白色 */
             color: #ffffff !important;
             text-decoration: none;
             text-decoration: none;
             border-radius: 20px;
             border-radius: 20px;
第116行: 第117行:
             transition: all 0.2s;
             transition: all 0.2s;
             box-shadow: 0 2px 6px rgba(255, 77, 133, 0.3);
             box-shadow: 0 2px 6px rgba(255, 77, 133, 0.3);
            /* 防止被高亮或系统主题覆盖 */
             -webkit-text-fill-color: #ffffff !important;
             -webkit-text-fill-color: #ffffff !important;
             text-fill-color: #ffffff !important;
             text-fill-color: #ffffff !important;
            flex-shrink: 0;
            white-space: nowrap;
         }
         }


第132行: 第134行:
             line-height: 1.5;
             line-height: 1.5;
             margin-bottom: 10px;
             margin-bottom: 10px;
            word-break: break-word;
         }
         }


第160行: 第161行:
         .tag:hover {
         .tag:hover {
             background: #e6e8eb;
             background: #e6e8eb;
        }
        .bottom-message {
            margin-top: 16px;
            font-size: 14px;
            color: #18191c;
            line-height: 1.5;
         }
         }
     </style>
     </style>
第166行: 第174行:
     <div class="video-card-container">
     <div class="video-card-container">
         <div class="video-card">
         <div class="video-card">
            <!-- B站视频嵌入 -->
             <div class="bilibili-container">
             <div class="bilibili-container">
                 <iframe  
                 <iframe  
第181行: 第188行:
                         <span class="username">H娘</span>
                         <span class="username">H娘</span>
                     </div>
                     </div>
                    <!-- 详情页链接:文字强制白色 -->
                     <a href="https://www.bilibili.com/video/BV1eXSMYVEcc"  
                     <a href="https://www.bilibili.com/video/BV1eXSMYVEcc"  
                       target="_blank"  
                       target="_blank"  
第196行: 第202行:
                 </div>
                 </div>
                  
                  
                <!-- 标签改为维基链接:[[标签]] → /wiki/标签 -->
                 <div class="tags">
                 <div class="tags">
                     <a href="/wiki/宗教都市祭" class="tag">宗教都市祭</a>
                     <a href="/wiki/宗教都市祭" class="tag">宗教都市祭</a>
                     <a href="/wiki/久本投稿祭'25" class="tag">久本投稿祭'25</a>
                     <a href="/wiki/久本投稿祭'25" class="tag">久本投稿祭'25</a>
                     <a href="/wiki/エア本" class="tag">エア本</a>
                     <a href="/wiki/エア本" class="tag">エア本</a>
                </div>
                 </div>
                 </div>
             </div>
             </div>

2026年3月19日 (四) 19:05的最新版本

B站视频卡片

【创价】久本五月病 【久本信仰祭16】