测试:修订间差异

来自SOKA CAFE
 
(未显示同一用户的2个中间版本)
第1行: 第1行:
<!DOCTYPE html>
 
<html lang="zh-CN">
<html lang="zh-CN">
<head>
<head>
第20行: 第20行:
         }
         }


        /* 响应式容器:手机100%,平板/电脑60% */
         .video-card-container {
         .video-card-container {
             width: 100%;
             width: 100%;
             max-width: 60vw; /* 默认电脑/平板宽度 */
             max-width: 60vw;
             margin: 0 auto;
             margin: 0 auto;
         }
         }


         @media (max-width: 768px) {
         @media (max-width: 768px) {
            body {
                padding: 12px;
            }
             .video-card-container {
             .video-card-container {
                 max-width: 100% !important; /* 手机强制100% */
                 max-width: 100%;
                 padding: 0 8px; /* 避免贴边 */
                 padding: 0 8px;
                margin: 0;
             }
             }
         }
         }


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


        /* B站视频容器(16:9比例) */
         .bilibili-container {
         .bilibili-container {
             position: relative;
             position: relative;
             width: 100%;
             width: 100%;
             padding-top: 56.25%; /* 16:9 */
             padding-top: 56.25%;
             background: #000;
             background: #000;
             border-radius: 16px 16px 0 0;
             border-radius: 16px 16px 0 0;
第62行: 第63行:
         }
         }


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


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


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


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


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


        /* 详情页按钮改为链接 */
         .detail-link {
         .detail-link {
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             color: white;
             color: #ffffff !important;
             text-decoration: none;
             text-decoration: none;
             border-radius: 20px;
             border-radius: 20px;
第111行: 第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;
            text-fill-color: #ffffff !important;
            flex-shrink: 0;
            white-space: nowrap;
         }
         }


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


第147行: 第156行:
             font-size: 12px;
             font-size: 12px;
             white-space: nowrap;
             white-space: nowrap;
            text-decoration: none;
        }
        .tag:hover {
            background: #e6e8eb;
        }
        .bottom-message {
            margin-top: 16px;
            font-size: 14px;
            color: #18191c;
            line-height: 1.5;
         }
         }
     </style>
     </style>
第153行: 第174行:
     <div class="video-card-container">
     <div class="video-card-container">
         <div class="video-card">
         <div class="video-card">
            <!-- B站视频嵌入(修正BV号格式) -->
             <div class="bilibili-container">
             <div class="bilibili-container">
                 <iframe  
                 <iframe  
第168行: 第188行:
                         <span class="username">H娘</span>
                         <span class="username">H娘</span>
                     </div>
                     </div>
                    <!-- 详情页跳转链接(修正BV号) -->
                     <a href="https://www.bilibili.com/video/BV1eXSMYVEcc"  
                     <a href="https://www.bilibili.com/video/BV1eXSMYVEcc"  
                       target="_blank"  
                       target="_blank"  
第184行: 第203行:
                  
                  
                 <div class="tags">
                 <div class="tags">
                     <span class="tag">宗教都市祭</span>
                     <a href="/wiki/宗教都市祭" class="tag">宗教都市祭</a>
                     <span class="tag">久本投稿祭'25</span>
                     <a href="/wiki/久本投稿祭'25" class="tag">久本投稿祭'25</a>
                     <span class="tag">エア本</span>
                     <a href="/wiki/エア本" class="tag">エア本</a>
                </div>
                 </div>
                 </div>
             </div>
             </div>

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

B站视频卡片

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