微件:DownloadCard：修订间差异

←上一编辑

@@ 第1行： / 第1行： @@
 <includeonly>
 <style>
-.download-card {
+.dc-wrap { margin: 10px 0; }
+.dc-wrap a {
      display: flex;
      align-items: flex-start;
@@ 第14行： / 第15行： @@
      max-width: 500px;
 }
-.download-card:hover {
+.dc-wrap a:hover {
      border-color: #4CAF50;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
-.download-card .dc-icon {
+.dc-wrap img { width: 48px; height: 48px; flex-shrink: 0; margin-top: 2px; }
-    width: 32px;
+.dc-wrap .dc-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-    height: 32px;
+.dc-wrap .dc-left { min-width: 0; }
-    flex-shrink: 0;
+.dc-wrap .dc-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
-    margin-top: 2px;
+.dc-wrap .dc-ver { font-size: 14px; font-weight: bold; color: #111; }
-}
+.dc-wrap .dc-new { background: #22c55e; color: #fff; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; border: 1px solid #22c55e; }
-.download-card .dc-body {
+.dc-wrap .dc-type { border: 1px solid #86efac; color: #15803d; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
-    flex: 1;
+.dc-wrap .dc-date { font-size: 12px; color: #9ca3af; }
-    min-width: 0;
+.dc-wrap .dc-dl { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: #16a34a; white-space: nowrap; transition: transform 0.2s; }
-    display: flex;
+.dc-wrap a:hover .dc-dl { transform: translateX(2px); }
-    align-items: flex-start;
+.dc-wrap .dc-dl svg { width: 14px; height: 14px; }
-    justify-content: space-between;
-    gap: 8px;
-}
-.download-card .dc-left {
-    min-width: 0;
-}
-.download-card .dc-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-.download-card .dc-version {
-    font-size: 14px;
-    font-weight: bold;
-    color: #111;
-}
-.download-card .dc-badge-new {
-    background: #22c55e;
-    color: #fff;
-    padding: 1px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: bold;
-    line-height: 1.4;
-    border: 1px solid #22c55e;
-}
-.download-card .dc-badge-type {
-    border: 1px solid #86efac;
-    color: #15803d;
-    padding: 1px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1.4;
-}
-.download-card .dc-date {
-    font-size: 12px;
-    color: #9ca3af;
-    margin-top: 2px;
-}
-.download-card .dc-download {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #16a34a;
-    white-space: nowrap;
-    flex-shrink: 0;
-    padding-top: 2px;
-    transition: transform 0.2s;
-}
-.download-card:hover .dc-download {
-    transform: translateX(2px);
-}
-.download-card .dc-download svg {
-    width: 14px;
-    height: 14px;
-}
 </style>
-<div class="download-card-wrap"></div>
+<div class="dc-wrap">
-<script>
+    <a href="<!--{$url|escape:'html'}-->" target="_blank" rel="noreferrer">
-(function() {
+        <img src="<!--{$icon|escape:'html'}-->">
-    var url = '<!--{$url|escape:'html'}-->';
+         <div class="dc-body">
-    var icon = '<!--{$icon|escape:'html'}-->';
+             <div class="dc-left">
-    var version = '<!--{$version|escape:'html'}-->';
+                 <div class="dc-header">
-    var date = '<!--{$date|escape:'html'}-->';
+                     <span class="dc-ver"><!--{$version|escape:'html'}--></span>
-    var showNew = '<!--{$new|escape:'html'}-->';
+                     <!--{$new}-->
-    var typeText = '<!--{$type|escape:'html'}-->';
+                    <!--{$type}-->
+                 </div>
-    var tagsHtml = '';
+                 <div class="dc-date"><!--{$date|escape:'html'}--></div>
-    if (showNew === '1') tagsHtml += '<span class="dc-badge-new">最新</span>';
+             </div>
-    if (typeText) tagsHtml += '<span class="dc-badge-type">' + typeText + '</span>';
+             <span class="dc-dl">
+                下载
-    var card = document.createElement('a');
+                 <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    card.className = 'download-card';
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-    card.href = url;
+                 </svg>
-    card.target = '_blank';
+             </span>
-    card.rel = 'noreferrer';
+         </div>
-    card.innerHTML =
+     </a>
-         '<img src="' + icon + '" class="dc-icon" alt="">' +
+</div>
-        '<div class="dc-body">' +
-             '<div class="dc-left">' +
-                 '<div class="dc-header">' +
-                     '<span class="dc-version">' + version + '</span>' +
-                     tagsHtml +
-                 '</div>' +
-                 '<div class="dc-date">' + date + '</div>' +
-             '</div>' +
-             '<span class="dc-download">下载' +
-                 '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">' +
-                     '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>' +
-                 '</svg>' +
-             '</span>' +
-         '</div>';
-     document.querySelector('.download-card-wrap').appendChild(card);
-})();
-</script>
 </includeonly>

2026年7月29日 (三) 03:41的最新版本