影子江湖 發表於 2025-9-8 20:21:35

分享个我魔改的勋章中心代码,挺好看的

<img title="8D689C85ACE1714FC4505472E3DD7826.png" id="aimg_36878" aid="36878" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202509/08/201706plzr0mzjqv8xnrmm.png" src="https://www.dismall.com/data/attachment/forum/202509/08/201706plzr0mzjqv8xnrmm.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br />我把勋章中心给魔改了,背景你们可以自己改,如果觉得这个颜色不好看的话<br /><br />找到你当前模板中的home文件夹,然后在里面找到space_medal.php文件<br /><br />然后把&lt;div class=&quot;appl&quot;&gt;到&lt;div id=&quot;pt&quot; class=&quot;bm cl&quot;&gt;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;z&quot;&gt;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;./&quot; class=&quot;nvhm&quot; title=&quot;{lang homepage}&quot;&gt;$_G['setting']['bbname']&lt;/a&gt; &lt;em&gt;&amp;rsaquo;&lt;/em&gt;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;home.php?mod=medal&quot;&gt;{lang medals}&lt;/a&gt;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br /><br />&lt;/div&gt;中间的那段代码替换成我的代码即可<br /><br /><ol><li>&lt;div id=&quot;ct&quot; class=&quot;ct2_a wp cl&quot;&gt;<br /><li><br /><li>&lt;div data-v-e3055dcf=&quot;&quot; class=&quot;flex dark:text-dark-txt overflow-hidden pb-20 bg-[#f2f2f2] dark:bg-gray-900&quot;&gt;<br /><li>&nbsp;&nbsp;&lt;div data-v-e3055dcf=&quot;&quot; id=&quot;main-content&quot; class=&quot;relative w-full h-full bg-[#f2f2f2] dark:bg-gray-900 px-2 sm:px-10&quot;&gt;<br /><li>&nbsp; &nbsp; &lt;main data-v-e3055dcf=&quot;&quot; class=&quot;max-w-screen-xl mx-auto w-full&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-e3055dcf=&quot;&quot; class=&quot;px-1&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div class=&quot;el-overlay&quot; style=&quot;z-index: 2053; display: none;&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;勋章中心&quot; aria-describedby=&quot;el-id-6223-112&quot; class=&quot;el-overlay-dialog&quot;&gt;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!----&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-e3055dcf=&quot;&quot; class=&quot;flex justify-center&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!----&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;lg:w-10/12 lg:mx-auto mb-8 px-4&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;max-w-full mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;mb-8 text-center relative&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute inset-0 bg-gradient-to-r from-yellow-600/10 via-orange-500/10 to-red-600/10 rounded-3xl blur-3xl&quot;&gt;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;relative p-8&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;h1 data-v-6e9282c5=&quot;&quot; class=&quot;text-6xl md:text-7xl font-black bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 bg-clip-text text-transparent mb-4&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;🏆 荣誉殿堂 🏆<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/h1&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex items-center justify-center gap-2 text-xl md:text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-2&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;span data-v-6e9282c5=&quot;&quot;&gt;✨&lt;/span&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;span data-v-6e9282c5=&quot;&quot;&gt;展示你的荣耀成就&lt;/span&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;span data-v-6e9282c5=&quot;&quot;&gt;✨&lt;/span&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;p data-v-6e9282c5=&quot;&quot; class=&quot;text-lg text-gray-600 dark:text-gray-400&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;收集勋章，彰显实力，成为传奇！<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/p&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{if empty($_GET['action'])}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{if $medallist}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{if $medalcredits}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div class=&quot;tbmu&quot; style=&quot;padding-top:5px !important&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; {lang you_have_now}<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{eval $i = 0;}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{loop $medalcredits $id}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{if $i != 0}--&gt;, &lt;!--{/if}--&gt;{$_G['setting']['extcredits'][$id]['img']} {$_G['setting']['extcredits'][$id]['title']} &lt;span class=&quot;xi1&quot;&gt;&lt;!--{echo getuserprofile('extcredits'.$id);}--&gt;&lt;/span&gt; {$_G['setting']['extcredits'][$id]['unit']}<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{eval $i++;}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{/loop}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{/if}--&gt;<br /><li><br /><li> &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4&quot;&gt;<br /><li>&nbsp;&nbsp;&lt;!--{loop $medallist $key $medal}--&gt;<br /><li>&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;relative group overflow-hidden rounded-xl bg-gradient-to-br from-black via-purple-900 to-black shadow-2xl hover:shadow-yellow-400/20 transition-all duration-300 border-2 border-yellow-400 hover:border-yellow-300&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute inset-0 rounded-xl border border-yellow-300 opacity-50 animate-pulse&quot;&gt;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute inset-0 opacity-10&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute top-2 left-2 text-4xl&quot;&gt;🎰&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute bottom-2 right-2 text-4xl&quot;&gt;🎲&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-6xl&quot;&gt;🏆&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;!----&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;relative p-4&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex justify-center mb-3&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;relative&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute inset-0 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full blur-md opacity-50 animate-pulse&quot;&gt;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;relative w-20 h-20 rounded-full bg-gradient-to-br from-yellow-400 via-yellow-500 to-orange-500 p-1 shadow-2xl&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;w-full h-full rounded-full bg-black flex items-center justify-center border-2 border-yellow-300&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;img <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;data-v-6e9282c5=&quot;&quot; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;src=&quot;$medal['image']&quot; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;alt=&quot;$medal['name']&quot; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;class=&quot;w-10 h-12 object-contain&quot;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute -top-1 -right-1 text-yellow-300 text-lg animate-flash&quot;&gt;✨&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;absolute -bottom-1 -left-1 text-yellow-300 text-lg animate-flash&quot; style=&quot;animation-delay: 0.5s;&quot;&gt;✨&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;h3 data-v-6e9282c5=&quot;&quot; class=&quot;text-lg font-black text-yellow-300 text-center mb-2&quot;&gt;$medal['name']&lt;/h3&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;p data-v-6e9282c5=&quot;&quot; class=&quot;text-xs text-gray-300 text-center mb-4 line-clamp-2&quot;&gt;$medal['description']&lt;/p&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex justify-center el-tooltip__trigger el-tooltip__trigger&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;button <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;data-v-6e9282c5=&quot;&quot; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;class=&quot;px-6 py-2 rounded-lg font-semibold text-sm transition-all duration-300 bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600&quot;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;onclick=&quot;showWindow('medal', 'home.php?mod=medal&amp;action=confirm&amp;medalid=$medal['medalid']')&quot;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex items-center space-x-2&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;span data-v-6e9282c5=&quot;&quot;&gt;领取勋章&lt;/span&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/button&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!-- 可选：用户头像列表等，如果需要也可以加上 --&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;mt-6&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex justify-center&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;div data-v-6e9282c5=&quot;&quot; class=&quot;flex -space-x-3&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;img data-v-6e9282c5=&quot;&quot; src=&quot;/api/forum/users/82731/avatar&quot; alt=&quot;User 82731&quot; class=&quot;w-8 h-8 rounded-full border-2 border-white&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;img data-v-6e9282c5=&quot;&quot; src=&quot;/api/forum/users/395809/avatar&quot; alt=&quot;User 395809&quot; class=&quot;w-8 h-8 rounded-full border-2 border-white&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;img data-v-6e9282c5=&quot;&quot; src=&quot;/api/forum/users/400678/avatar&quot; alt=&quot;User 400678&quot; class=&quot;w-8 h-8 rounded-full border-2 border-white&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;img data-v-6e9282c5=&quot;&quot; src=&quot;/api/forum/users/429213/avatar&quot; alt=&quot;User 429213&quot; class=&quot;w-8 h-8 rounded-full border-2 border-white&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;button data-v-6e9282c5=&quot;&quot; class=&quot;w-8 h-8 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center text-xs font-medium text-gray-600 hover:bg-gray-300 transition-colors&quot;&gt; +9&lt;/button&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp; &lt;/div&gt;<br /><li>&nbsp;&nbsp;&lt;!--{/loop}--&gt;<br /><li>&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{/if}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{if $medallogs}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;h3 class=&quot;tbmu&quot;&gt;{lang medals_record}&lt;/h3&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;ul class=&quot;el ptm pbw mbw&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{loop $medallogs $medallog}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;li style=&quot;padding-left:10px;&quot;&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{if $medallog['type'] == 2 || $medallog['type'] == 3}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals_message3} <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;$medallog['dateline'] <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals_message4} <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;strong&gt;$medallog['name']&lt;/strong&gt; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals},<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{if $medallog['type'] == 2}--&gt; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; {lang medals_operation_2}<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{elseif $medallog['type'] == 3}--&gt; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; {lang medals_operation_3}<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{/if}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{elseif $medallog['type'] != 2 &amp;&amp; $medallog['type'] != 3}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals_message3} <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;$medallog['dateline'] <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals_message5} <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;strong&gt;$medallog['name']&lt;/strong&gt; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;{lang medals},<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{if $medallog['expiration']}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; {lang expire}: $medallog['expiration']<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{else}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; {lang medals_noexpire}<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{/if}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{/if}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/li&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{/loop}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;!--{if $multipage}--&gt;&lt;div class=&quot;pgs cl mtm&quot;&gt;$multipage&lt;/div&gt;&lt;!--{/if}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{else}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;p class=&quot;emp&quot;&gt;{lang medals_nonexistence_own}&lt;/p&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;!--{/if}--&gt;<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;!--{/if}--&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&lt;/div&gt;<br /><li>&nbsp; &nbsp; &lt;/main&gt;<br /><li>&nbsp; &nbsp; &lt;div data-v-e3055dcf=&quot;&quot; class=&quot;px-4 sm:px-20&quot;&gt;&lt;/div&gt;<br /><li>&nbsp;&nbsp;&lt;/div&gt;<br /><li>&lt;/div&gt;<br /><li></ol>然后就是CSS<br /><ol><li>.pb-20 {<br /><li>&nbsp; &nbsp; padding-bottom: 5rem;<br /><li>}<br /><li>.bg-\[\#f2f2f2\] {<br /><li>&nbsp; &nbsp; --tw-bg-opacity: 1;<br /><li>}<br /><li>.overflow-hidden {<br /><li>&nbsp; &nbsp; overflow: hidden;<br /><li>}<br /><li>.flex {<br /><li>&nbsp; &nbsp; display: flex;<br /><li>}<br /><li><br /><li>*, :before, :after {<br /><li>&nbsp; &nbsp; box-sizing: border-box;<br /><li>&nbsp; &nbsp; border-width: 0;<br /><li>&nbsp; &nbsp; border-style: solid;<br /><li>&nbsp; &nbsp; border-color: #e5e7eb;<br /><li>}<br /><li>@media (min-width: 640px)<br /><li>.sm\:px-10 {<br /><li>&nbsp; &nbsp; padding-left: 2.5rem;<br /><li>&nbsp; &nbsp; padding-right: 2.5rem;<br /><li>}<br /><li>.px-2 {<br /><li>&nbsp; &nbsp; padding-left: .5rem;<br /><li>&nbsp; &nbsp; padding-right: .5rem;<br /><li>}<br /><li>.w-full {<br /><li>&nbsp; &nbsp; width: 100%;<br /><li>}<br /><li>.h-full {<br /><li>&nbsp; &nbsp; height: 100%;<br /><li>}<br /><li>.max-w-screen-xl {<br /><li>&nbsp; &nbsp; max-width: 1280px;<br /><li>}<br /><li>.mx-auto {<br /><li>&nbsp; &nbsp; margin-left: auto;<br /><li>&nbsp; &nbsp; margin-right: auto;<br /><li>}<br /><li>.px-1 {<br /><li>&nbsp; &nbsp; padding-left: .25rem;<br /><li>&nbsp; &nbsp; padding-right: .25rem;<br /><li>}<br /><li>.el-overlay {<br /><li>&nbsp; &nbsp; background-color: var(--el-overlay-color-lighter);<br /><li>&nbsp; &nbsp; bottom: 0;<br /><li>&nbsp; &nbsp; height: 100%;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>&nbsp; &nbsp; overflow: auto;<br /><li>&nbsp; &nbsp; position: fixed;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; z-index: 2000;<br /><li>}<br /><li>.el-overlay-dialog {<br /><li>&nbsp; &nbsp; bottom: 0;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>&nbsp; &nbsp; overflow: auto;<br /><li>&nbsp; &nbsp; position: fixed;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; top: 0;<br /><li>}<br /><li>.justify-center {<br /><li>&nbsp; &nbsp; justify-content: center;<br /><li>}&nbsp; &nbsp; &nbsp; &nbsp; <br /><li>.flex {<br /><li>&nbsp; &nbsp; display: flex;<br /><li>}<br /><li>@media (min-width: 1024px)<br /><li>.lg\:w-10\/12 {<br /><li>&nbsp; &nbsp; width: 83.333333%;<br /><li>}<br /><li>@media (min-width: 1024px)<br /><li>.lg\:mx-auto {<br /><li>&nbsp; &nbsp; margin-left: auto;<br /><li>&nbsp; &nbsp; margin-right: auto;<br /><li>}<br /><li>.px-4 {<br /><li>&nbsp; &nbsp; padding-left: 1rem;<br /><li>&nbsp; &nbsp; padding-right: 1rem;<br /><li>}<br /><li>.mb-8 {<br /><li>&nbsp; &nbsp; margin-bottom: 2rem;<br /><li>}<br /><li>@media (min-width: 1024px)<br /><li>.lg\:px-8 {<br /><li>&nbsp; &nbsp; padding-left: 2rem;<br /><li>&nbsp; &nbsp; padding-right: 2rem;<br /><li>}<br /><li>.text-center {<br /><li>&nbsp; &nbsp; text-align: center;<br /><li>}<br /><li>.mb-8 {<br /><li>&nbsp; &nbsp; margin-bottom: 2rem;<br /><li>}<br /><li>.blur-3xl {<br /><li>&nbsp; &nbsp; --tw-blur: blur(64px);<br /><li>&nbsp; &nbsp; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);<br /><li>}<br /><li>.to-red-600\/10 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: rgb(220 38 38 / .1) var(--tw-gradient-to-position);<br /><li>}<br /><li>.via-orange-500\/10 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);<br /><li>&nbsp; &nbsp; --tw-gradient-stops: #ca8a041a, rgb(249 115 22 / .1) var(--tw-gradient-via-position), #dc26261a;, var(--tw-gradient-to);<br /><li>}<br /><li><br /><li>.rounded-3xl {<br /><li>&nbsp; &nbsp; border-radius: 1.5rem;<br /><li>}<br /><li>.inset-0 {<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; bottom: 0;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>}<br /><li>.absolute {<br /><li>&nbsp; &nbsp; position: absolute;<br /><li>}<br /><li>.p-8 {<br /><li>&nbsp; &nbsp; padding: 2rem;<br /><li>}<br /><li>.text-transparent {<br /><li>&nbsp; &nbsp; color: transparent;<br /><li>}<br /><li>.font-black {<br /><li>&nbsp; &nbsp; font-weight: 900;<br /><li>}<br /><li>.bg-clip-text {<br /><li>&nbsp; &nbsp; -webkit-background-clip: text;<br /><li>&nbsp; &nbsp; background-clip: text;<br /><li>}<br /><li>.to-red-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);<br /><li>}<br /><li>.via-orange-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);<br /><li>&nbsp; &nbsp; --tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);<br /><li>}<br /><li><br /><li><br /><li>.mb-4 {<br /><li>&nbsp; &nbsp; margin-bottom: 1rem;<br /><li>}<br /><li>.text-yellow-600 {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgb(202 138 4 / var(--tw-text-opacity));<br /><li>}<br /><li>.font-bold {<br /><li>&nbsp; &nbsp; font-weight: 700;<br /><li>}<br /><li>.gap-2 {<br /><li>&nbsp; &nbsp; gap: .5rem;<br /><li>}<br /><li>.justify-center {<br /><li>&nbsp; &nbsp; justify-content: center;<br /><li>}<br /><li>.items-center {<br /><li>&nbsp; &nbsp; align-items: center;<br /><li>}<br /><li>.flex {<br /><li>&nbsp; &nbsp; display: flex;<br /><li>}<br /><li>.mb-2 {<br /><li>&nbsp; &nbsp; margin-bottom: .5rem;<br /><li>}<br /><li>.text-xl {<br /><li>&nbsp; &nbsp; font-size: 1.25rem;<br /><li>&nbsp; &nbsp; line-height: 1.75rem;<br /><li>}<br /><li>.text-gray-600 {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgb(75 85 99 / var(--tw-text-opacity));<br /><li>}<br /><li>.text-lg {<br /><li>&nbsp; &nbsp; font-size: 1.125rem;<br /><li>&nbsp; &nbsp; line-height: 1.75rem;<br /><li>}<br /><li>@media (min-width: 1024px)<br /><li>.lg\:grid-cols-3 {<br /><li>&nbsp; &nbsp; grid-template-columns: repeat(3,minmax(0,1fr));<br /><li>}<br /><li>.gap-4 {<br /><li>&nbsp; &nbsp; gap: 1rem;<br /><li>}<br /><li>.grid-cols-1 {<br /><li>&nbsp; &nbsp; grid-template-columns: repeat(1,minmax(0,1fr));<br /><li>}<br /><li>.grid {<br /><li>&nbsp; &nbsp; display: grid;<br /><li>}<br /><li>.duration-300 {<br /><li>&nbsp; &nbsp; transition-duration: .3s;<br /><li>}<br /><li>.transition-all {<br /><li>&nbsp; &nbsp; transition-property: all;<br /><li>&nbsp; &nbsp; transition-timing-function: cubic-bezier(.4,0,.2,1);<br /><li>&nbsp; &nbsp; transition-duration: .15s;<br /><li>}<br /><li>.shadow-2xl {<br /><li>&nbsp; &nbsp; --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);<br /><li>&nbsp; &nbsp; --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);<br /><li>&nbsp; &nbsp; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);<br /><li>}<br /><li><br /><li>.via-purple-900 {<br /><li>&nbsp;&nbsp;/* 删除错误的 --tw-gradient-to 定义，避免覆盖 to-black 的值 */<br /><li>&nbsp;&nbsp;/* 正确衔接：起点 -&gt; 中间点 -&gt; 终点（引用 to-black 的 --tw-gradient-to） */<br /><li>&nbsp;&nbsp;--tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);<br /><li>}<br /><li><br /><li>element.style {<br /><li>}<br /><li>.duration-300 {<br /><li>&nbsp; &nbsp; transition-duration: .3s;<br /><li>}<br /><li>.transition-all {<br /><li>&nbsp; &nbsp; transition-property: all;<br /><li>&nbsp; &nbsp; transition-timing-function: cubic-bezier(.4,0,.2,1);<br /><li>&nbsp; &nbsp; transition-duration: .15s;<br /><li>}<br /><li>.shadow-2xl {<br /><li>&nbsp; &nbsp; --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);<br /><li>&nbsp; &nbsp; --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);<br /><li>&nbsp; &nbsp; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);<br /><li>}<br /><li><br /><li>.from-black {<br /><li>&nbsp; &nbsp; --tw-gradient-from: #000 var(--tw-gradient-from-position);<br /><li>&nbsp; &nbsp; --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);<br /><li>}<br /><li>.bg-gradient-to-br {<br /><li>&nbsp; &nbsp; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));<br /><li>}<br /><li>.border-yellow-400 {<br /><li>&nbsp; &nbsp; --tw-border-opacity: 1;<br /><li>&nbsp; &nbsp; border-color: rgb(250 204 21 / var(--tw-border-opacity));<br /><li>}<br /><li>.overflow-hidden {<br /><li>&nbsp; &nbsp; overflow: hidden;<br /><li>}<br /><li>.opacity-50 {<br /><li>&nbsp; &nbsp; opacity: .5;<br /><li>}<br /><li>.border-yellow-300 {<br /><li>&nbsp; &nbsp; --tw-border-opacity: 1;<br /><li>&nbsp; &nbsp; border-color: rgb(253 224 71 / var(--tw-border-opacity));<br /><li>}<br /><li>.border {<br /><li>&nbsp; &nbsp; border-width: 1px;<br /><li>}<br /><li>.rounded-xl {<br /><li>&nbsp; &nbsp; border-radius: .75rem;<br /><li>}<br /><li>.animate-pulse {<br /><li>&nbsp; &nbsp; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;<br /><li>}<br /><li>.inset-0 {<br /><li>&nbsp; &nbsp; top: 0;<br /><li>&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp; bottom: 0;<br /><li>&nbsp; &nbsp; left: 0;<br /><li>}<br /><li>.absolute {<br /><li>&nbsp; &nbsp; position: absolute;<br /><li>}<br /><li>.opacity-10 {<br /><li>&nbsp; &nbsp; opacity: .1;<br /><li>}<br /><li>.top-2 {<br /><li>&nbsp; &nbsp; top: .5rem;<br /><li>}<br /><li>.left-2 {<br /><li>&nbsp; &nbsp; left: .5rem;<br /><li>}<br /><li>.right-2 {<br /><li>&nbsp; &nbsp; right: .5rem;<br /><li>}<br /><li>.bottom-2 {<br /><li>&nbsp; &nbsp; bottom: .5rem;<br /><li>}<br /><li>.transform {<br /><li>&nbsp; &nbsp; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));<br /><li>}<br /><li>.-translate-y-1\/2 {<br /><li>&nbsp; &nbsp; --tw-translate-y: -50%;<br /><li>&nbsp; &nbsp; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));<br /><li>}<br /><li>.-translate-x-1\/2 {<br /><li>&nbsp; &nbsp; --tw-translate-x: -50%;<br /><li>&nbsp; &nbsp; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));<br /><li>}<br /><li>.top-1\/2 {<br /><li>&nbsp; &nbsp; top: 50%;<br /><li>}<br /><li>.left-1\/2 {<br /><li>&nbsp; &nbsp; left: 50%;<br /><li>}<br /><li>.p-4 {<br /><li>&nbsp; &nbsp; padding: 1rem;<br /><li>}<br /><li>.justify-center {<br /><li>&nbsp; &nbsp; justify-content: center;<br /><li>}<br /><li>.mb-3 {<br /><li>&nbsp; &nbsp; margin-bottom: .75rem;<br /><li>}<br /><li>.relative {<br /><li>&nbsp; &nbsp; position: relative;<br /><li>}<br /><li>.blur-md {<br /><li>&nbsp; &nbsp; --tw-blur: blur(12px);<br /><li>&nbsp; &nbsp; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);<br /><li>}<br /><li>.opacity-50 {<br /><li>&nbsp; &nbsp; opacity: .5;<br /><li>}<br /><li>.to-yellow-600 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);<br /><li>}<br /><li><br /><li>.rounded-full {<br /><li>&nbsp; &nbsp; border-radius: 9999px;<br /><li>}<br /><li>.animate-pulse {<br /><li>&nbsp; &nbsp; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;<br /><li>}<br /><li>.shadow-2xl {<br /><li>&nbsp; &nbsp; --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);<br /><li>&nbsp; &nbsp; --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);<br /><li>&nbsp; &nbsp; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);<br /><li>}<br /><li>.p-1 {<br /><li>&nbsp; &nbsp; padding: .25rem;<br /><li>}<br /><li>.to-orange-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: #f97316 var(--tw-gradient-to-position);<br /><li>}<br /><li>.via-yellow-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);<br /><li>}<br /><li>.from-yellow-400 {<br /><li>&nbsp; &nbsp; --tw-gradient-from: #facc15 var(--tw-gradient-from-position);<br /><li>&nbsp; &nbsp; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);<br /><li>}<br /><li>.rounded-full {<br /><li>&nbsp; &nbsp; border-radius: 9999px;<br /><li>}<br /><li>.w-20 {<br /><li>&nbsp; &nbsp; width: 5rem;<br /><li>}<br /><li>.h-20 {<br /><li>&nbsp; &nbsp; height: 5rem;<br /><li>}<br /><li>.bg-black {<br /><li>&nbsp; &nbsp; --tw-bg-opacity: 1;<br /><li>&nbsp; &nbsp; background-color: rgb(0 0 0 / var(--tw-bg-opacity));<br /><li>}<br /><li>.border-yellow-300 {<br /><li>&nbsp; &nbsp; --tw-border-opacity: 1;<br /><li>&nbsp; &nbsp; border-color: rgb(253 224 71 / var(--tw-border-opacity));<br /><li>}<br /><li>.border-2 {<br /><li>&nbsp; &nbsp; border-width: 2px;<br /><li>}<br /><li>.rounded-full {<br /><li>&nbsp; &nbsp; border-radius: 9999px;<br /><li>}<br /><li>.justify-center {<br /><li>&nbsp; &nbsp; justify-content: center;<br /><li>}<br /><li>.items-center {<br /><li>&nbsp; &nbsp; align-items: center;<br /><li>}<br /><li>.object-contain {<br /><li>&nbsp; &nbsp; -o-object-fit: contain;<br /><li>&nbsp; &nbsp; object-fit: contain;<br /><li>}<br /><li>.w-10 {<br /><li>&nbsp; &nbsp; width: 2.5rem;<br /><li>}<br /><li>.h-12 {<br /><li>&nbsp; &nbsp; height: 3rem;<br /><li>}<br /><li>img, video {<br /><li>&nbsp; &nbsp; max-width: 100%;<br /><li>&nbsp; &nbsp; height: auto;<br /><li>}<br /><li>img, svg, video, canvas, audio, iframe, embed, object {<br /><li>&nbsp; &nbsp; display: block;<br /><li>&nbsp; &nbsp; vertical-align: middle;<br /><li>}<br /><li>img {<br /><li>&nbsp; &nbsp; border-style: solid;<br /><li>}<br /><li>.animate-flash {<br /><li>&nbsp; &nbsp; animation: flash-6e9282c5 1s ease-in-out infinite;<br /><li>}<br /><li>.text-yellow-300 {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgb(253 224 71 / var(--tw-text-opacity));<br /><li>}<br /><li>.-top-1 {<br /><li>&nbsp; &nbsp; top: -.25rem;<br /><li>}<br /><li>.-right-1 {<br /><li>&nbsp; &nbsp; right: -.25rem;<br /><li>}<br /><li>.text-lg {<br /><li>&nbsp; &nbsp; font-size: 1.125rem;<br /><li>&nbsp; &nbsp; line-height: 1.75rem;<br /><li>}<br /><li>.-left-1 {<br /><li>&nbsp; &nbsp; left: -.25rem;<br /><li>}<br /><li>.-bottom-1 {<br /><li>&nbsp; &nbsp; bottom: -.25rem;<br /><li>}<br /><li>.text-lg {<br /><li>&nbsp; &nbsp; font-size: 1.125rem;<br /><li>&nbsp; &nbsp; line-height: 1.75rem;<br /><li>}<br /><li>.font-black {<br /><li>&nbsp; &nbsp; font-weight: 900;<br /><li>}<br /><li>.text-center {<br /><li>&nbsp; &nbsp; text-align: center;<br /><li>}<br /><li>.mb-2 {<br /><li>&nbsp; &nbsp; margin-bottom: .5rem;<br /><li>}<br /><li>.text-lg {<br /><li>&nbsp; &nbsp; font-size: 1.125rem;<br /><li>&nbsp; &nbsp; line-height: 1.75rem;<br /><li>}<br /><li>blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {<br /><li>&nbsp; &nbsp; margin: 0;<br /><li>}<br /><li>.text-gray-300 {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgb(209 213 219 / var(--tw-text-opacity));<br /><li>}<br /><li>.text-xs {<br /><li>&nbsp; &nbsp; font-size: 14px;<br /><li>}<br /><li>.text-center {<br /><li>&nbsp; &nbsp; text-align: center;<br /><li>}<br /><li>.line-clamp-2 {<br /><li>&nbsp; &nbsp; overflow: hidden;<br /><li>&nbsp; &nbsp; display: -webkit-box;<br /><li>&nbsp; &nbsp; -webkit-box-orient: vertical;<br /><li>&nbsp; &nbsp; -webkit-line-clamp: 2;<br /><li>}<br /><li>.mb-4 {<br /><li>&nbsp; &nbsp; margin-bottom: 1rem;<br /><li>}<br /><li>.text-xs {<br /><li>&nbsp; &nbsp; font-size: .75rem;<br /><li>&nbsp; &nbsp; line-height: 1rem;<br /><li>}<br /><li>.duration-300 {<br /><li>&nbsp; &nbsp; transition-duration: .3s;<br /><li>}<br /><li>.transition-all {<br /><li>&nbsp; &nbsp; transition-property: all;<br /><li>&nbsp; &nbsp; transition-timing-function: cubic-bezier(.4,0,.2,1);<br /><li>&nbsp; &nbsp; transition-duration: .15s;<br /><li>}<br /><li>.text-white {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgb(255 255 255 / var(--tw-text-opacity));<br /><li>}<br /><li>.font-semibold {<br /><li>&nbsp; &nbsp; font-weight: 600;<br /><li>}<br /><li>.py-2 {<br /><li>&nbsp; &nbsp; padding-top: .5rem;<br /><li>&nbsp; &nbsp; padding-bottom: .5rem;<br /><li>}<br /><li>.px-6 {<br /><li>&nbsp; &nbsp; padding-left: 1.5rem;<br /><li>&nbsp; &nbsp; padding-right: 1.5rem;<br /><li>}<br /><li>.to-pink-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);<br /><li>&nbsp; &nbsp; &nbsp; &nbsp; --tw-gradient-stops: #a855f7, #ec4899;<br /><li>}<br /><li>.from-purple-500 {<br /><li>&nbsp; &nbsp; --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);<br /><li>&nbsp; &nbsp; --tw-gradient-to: rgb(168 85 247 / 0)<br /><li>&nbsp; &nbsp; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);<br /><li>}<br /><li>.bg-gradient-to-r {<br /><li>&nbsp; &nbsp; background-image: linear-gradient(to right,var(--tw-gradient-stops));<br /><li>}<br /><li>.rounded-lg {<br /><li>&nbsp; &nbsp; border-radius: .5rem;<br /><li>}<br /><li>.text-white {<br /><li>&nbsp; &nbsp; --tw-text-opacity: 1;<br /><li>&nbsp; &nbsp; color: rgba(255,255,255,var(--tw-text-opacity));<br /><li>}<br /><li>.text-sm {<br /><li>&nbsp; &nbsp; font-size: .875rem;<br /><li>&nbsp; &nbsp; line-height: 1.25rem;<br /><li>}<br /><li>button, {<br /><li>&nbsp; &nbsp; cursor: pointer;<br /><li>}<br /><li>button, , , {<br /><li>&nbsp; &nbsp; -webkit-appearance: button;<br /><li>&nbsp; &nbsp; background-color: transparent;<br /><li>&nbsp; &nbsp; background-image: none;<br /><li>}<br /><li>button, select {<br /><li>&nbsp; &nbsp; text-transform: none;<br /><li>}<br /><li>button, input, optgroup, select, textarea {<br /><li>&nbsp; &nbsp; font-family: inherit;<br /><li>&nbsp; &nbsp; font-size: 100%;<br /><li>&nbsp; &nbsp; font-weight: inherit;<br /><li>&nbsp; &nbsp; line-height: inherit;<br /><li>&nbsp; &nbsp; color: inherit;<br /><li>&nbsp; &nbsp; margin: 0;<br /><li>&nbsp; &nbsp; padding: 0;<br /><li>}<br /><li>button, input, optgroup, select, textarea {<br /><li>&nbsp; &nbsp; padding: 0;<br /><li>&nbsp; &nbsp; line-height: inherit;<br /><li>&nbsp; &nbsp; color: inherit;<br /><li>}<br /><li>button {<br /><li>&nbsp; &nbsp; cursor: pointer;<br /><li>}<br /><li>button {<br /><li>&nbsp; &nbsp; background-color: transparent;<br /><li>&nbsp; &nbsp; background-image: none;<br /><li>}<br /><li>button, {<br /><li>&nbsp; &nbsp; -webkit-appearance: button;<br /><li>}<br /><li>button, input, optgroup, select, textarea {<br /><li>&nbsp; &nbsp; font-family: inherit;<br /><li>&nbsp; &nbsp; font-size: 100%;<br /><li>&nbsp; &nbsp; line-height: 1.15;<br /><li>&nbsp; &nbsp; margin: 0;<br /><li>}<br /><li>.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4 {<br /><li>&nbsp; &nbsp; grid-template-columns: repeat(3,minmax(0,1fr));<br /><li>}<br /><li>:root {<br /><li>&nbsp; &nbsp; --el-color-white: #ffffff;<br /><li>&nbsp; &nbsp; --el-color-black: #000000;<br /><li>&nbsp; &nbsp; --el-color-primary-rgb: 64,158,255;<br /><li>&nbsp; &nbsp; --el-color-success-rgb: 103,194,58;<br /><li>&nbsp; &nbsp; --el-color-warning-rgb: 230,162,60;<br /><li>&nbsp; &nbsp; --el-color-danger-rgb: 245,108,108;<br /><li>&nbsp; &nbsp; --el-color-error-rgb: 245,108,108;<br /><li>&nbsp; &nbsp; --el-color-info-rgb: 144,147,153;<br /><li>&nbsp; &nbsp; --el-font-size-extra-large: 20px;<br /><li>&nbsp; &nbsp; --el-font-size-large: 18px;<br /><li>&nbsp; &nbsp; --el-font-size-medium: 16px;<br /><li>&nbsp; &nbsp; --el-font-size-base: 14px;<br /><li>&nbsp; &nbsp; --el-font-size-small: 13px;<br /><li>&nbsp; &nbsp; --el-font-size-extra-small: 12px;<br /><li>&nbsp; &nbsp; --el-font-family: &quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;微软雅黑&quot;,Arial,sans-serif;<br /><li>&nbsp; &nbsp; --el-font-weight-primary: 500;<br /><li>&nbsp; &nbsp; --el-font-line-height-primary: 24px;<br /><li>&nbsp; &nbsp; --el-index-normal: 1;<br /><li>&nbsp; &nbsp; --el-index-top: 1000;<br /><li>&nbsp; &nbsp; --el-index-popper: 2000;<br /><li>&nbsp; &nbsp; --el-border-radius-base: 4px;<br /><li>&nbsp; &nbsp; --el-border-radius-small: 2px;<br /><li>&nbsp; &nbsp; --el-border-radius-round: 20px;<br /><li>&nbsp; &nbsp; --el-border-radius-circle: 100%;<br /><li>&nbsp; &nbsp; --el-transition-duration: .3s;<br /><li>&nbsp; &nbsp; --el-transition-duration-fast: .2s;<br /><li>&nbsp; &nbsp; --el-transition-function-ease-in-out-bezier: cubic-bezier(.645,.045,.355,1);<br /><li>&nbsp; &nbsp; --el-transition-function-fast-bezier: cubic-bezier(.23,1,.32,1);<br /><li>&nbsp; &nbsp; --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);<br /><li>&nbsp; &nbsp; --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);<br /><li>&nbsp; &nbsp; --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);<br /><li>&nbsp; &nbsp; --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;<br /><li>&nbsp; &nbsp; --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);<br /><li>&nbsp; &nbsp; --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);<br /><li>&nbsp; &nbsp; --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);<br /><li>&nbsp; &nbsp; --el-component-size-large: 40px;<br /><li>&nbsp; &nbsp; --el-component-size: 32px;<br /><li>&nbsp; &nbsp; --el-component-size-small: 24px;<br /><li>&nbsp; &nbsp; color-scheme: light;<br /><li>&nbsp; &nbsp; --el-color-primary: #409eff;<br /><li>&nbsp; &nbsp; --el-color-primary-light-3: #79bbff;<br /><li>&nbsp; &nbsp; --el-color-primary-light-5: #a0cfff;<br /><li>&nbsp; &nbsp; --el-color-primary-light-7: #c6e2ff;<br /><li>&nbsp; &nbsp; --el-color-primary-light-8: #d9ecff;<br /><li>&nbsp; &nbsp; --el-color-primary-light-9: #ecf5ff;<br /><li>&nbsp; &nbsp; --el-color-primary-dark-2: #337ecc;<br /><li>&nbsp; &nbsp; --el-color-success: #67c23a;<br /><li>&nbsp; &nbsp; --el-color-success-light-3: #95d475;<br /><li>&nbsp; &nbsp; --el-color-success-light-5: #b3e19d;<br /><li>&nbsp; &nbsp; --el-color-success-light-7: #d1edc4;<br /><li>&nbsp; &nbsp; --el-color-success-light-8: #e1f3d8;<br /><li>&nbsp; &nbsp; --el-color-success-light-9: #f0f9eb;<br /><li>&nbsp; &nbsp; --el-color-success-dark-2: #529b2e;<br /><li>&nbsp; &nbsp; --el-color-warning: #e6a23c;<br /><li>&nbsp; &nbsp; --el-color-warning-light-3: #eebe77;<br /><li>&nbsp; &nbsp; --el-color-warning-light-5: #f3d19e;<br /><li>&nbsp; &nbsp; --el-color-warning-light-7: #f8e3c5;<br /><li>&nbsp; &nbsp; --el-color-warning-light-8: #faecd8;<br /><li>&nbsp; &nbsp; --el-color-warning-light-9: #fdf6ec;<br /><li>&nbsp; &nbsp; --el-color-warning-dark-2: #b88230;<br /><li>&nbsp; &nbsp; --el-color-danger: #f56c6c;<br /><li>&nbsp; &nbsp; --el-color-danger-light-3: #f89898;<br /><li>&nbsp; &nbsp; --el-color-danger-light-5: #fab6b6;<br /><li>&nbsp; &nbsp; --el-color-danger-light-7: #fcd3d3;<br /><li>&nbsp; &nbsp; --el-color-danger-light-8: #fde2e2;<br /><li>&nbsp; &nbsp; --el-color-danger-light-9: #fef0f0;<br /><li>&nbsp; &nbsp; --el-color-danger-dark-2: #c45656;<br /><li>&nbsp; &nbsp; --el-color-error: #f56c6c;<br /><li>&nbsp; &nbsp; --el-color-error-light-3: #f89898;<br /><li>&nbsp; &nbsp; --el-color-error-light-5: #fab6b6;<br /><li>&nbsp; &nbsp; --el-color-error-light-7: #fcd3d3;<br /><li>&nbsp; &nbsp; --el-color-error-light-8: #fde2e2;<br /><li>&nbsp; &nbsp; --el-color-error-light-9: #fef0f0;<br /><li>&nbsp; &nbsp; --el-color-error-dark-2: #c45656;<br /><li>&nbsp; &nbsp; --el-color-info: #909399;<br /><li>&nbsp; &nbsp; --el-color-info-light-3: #b1b3b8;<br /><li>&nbsp; &nbsp; --el-color-info-light-5: #c8c9cc;<br /><li>&nbsp; &nbsp; --el-color-info-light-7: #dedfe0;<br /><li>&nbsp; &nbsp; --el-color-info-light-8: #e9e9eb;<br /><li>&nbsp; &nbsp; --el-color-info-light-9: #f4f4f5;<br /><li>&nbsp; &nbsp; --el-color-info-dark-2: #73767a;<br /><li>&nbsp; &nbsp; --el-bg-color: #ffffff;<br /><li>&nbsp; &nbsp; --el-bg-color-page: #f2f3f5;<br /><li>&nbsp; &nbsp; --el-bg-color-overlay: #ffffff;<br /><li>&nbsp; &nbsp; --el-text-color-primary: #303133;<br /><li>&nbsp; &nbsp; --el-text-color-regular: #606266;<br /><li>&nbsp; &nbsp; --el-text-color-secondary: #909399;<br /><li>&nbsp; &nbsp; --el-text-color-placeholder: #a8abb2;<br /><li>&nbsp; &nbsp; --el-text-color-disabled: #c0c4cc;<br /><li>&nbsp; &nbsp; --el-border-color: #dcdfe6;<br /><li>&nbsp; &nbsp; --el-border-color-light: #e4e7ed;<br /><li>&nbsp; &nbsp; --el-border-color-lighter: #ebeef5;<br /><li>&nbsp; &nbsp; --el-border-color-extra-light: #f2f6fc;<br /><li>&nbsp; &nbsp; --el-border-color-dark: #d4d7de;<br /><li>&nbsp; &nbsp; --el-border-color-darker: #cdd0d6;<br /><li>&nbsp; &nbsp; --el-fill-color: #f0f2f5;<br /><li>&nbsp; &nbsp; --el-fill-color-light: #f5f7fa;<br /><li>&nbsp; &nbsp; --el-fill-color-lighter: #fafafa;<br /><li>&nbsp; &nbsp; --el-fill-color-extra-light: #fafcff;<br /><li>&nbsp; &nbsp; --el-fill-color-dark: #ebedf0;<br /><li>&nbsp; &nbsp; --el-fill-color-darker: #e6e8eb;<br /><li>&nbsp; &nbsp; --el-fill-color-blank: #ffffff;<br /><li>&nbsp; &nbsp; --el-box-shadow: 0px 12px 32px 4px rgba(0,0,0,.04),0px 8px 20px rgba(0,0,0,.08);<br /><li>&nbsp; &nbsp; --el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12);<br /><li>&nbsp; &nbsp; --el-box-shadow-lighter: 0px 0px 6px rgba(0,0,0,.12);<br /><li>&nbsp; &nbsp; --el-box-shadow-dark: 0px 16px 48px 16px rgba(0,0,0,.08),0px 12px 32px rgba(0,0,0,.12),0px 8px 16px -8px rgba(0,0,0,.16);<br /><li>&nbsp; &nbsp; --el-disabled-bg-color: var(--el-fill-color-light);<br /><li>&nbsp; &nbsp; --el-disabled-text-color: var(--el-text-color-placeholder);<br /><li>&nbsp; &nbsp; --el-disabled-border-color: var(--el-border-color-light);<br /><li>&nbsp; &nbsp; --el-overlay-color: rgba(0,0,0,.8);<br /><li>&nbsp; &nbsp; --el-overlay-color-light: rgba(0,0,0,.7);<br /><li>&nbsp; &nbsp; --el-overlay-color-lighter: rgba(0,0,0,.5);<br /><li>&nbsp; &nbsp; --el-mask-color: rgba(255,255,255,.9);<br /><li>&nbsp; &nbsp; --el-mask-color-extra-light: rgba(255,255,255,.3);<br /><li>&nbsp; &nbsp; --el-border-width: 1px;<br /><li>&nbsp; &nbsp; --el-border-style: solid;<br /><li>&nbsp; &nbsp; --el-border-color-hover: var(--el-text-color-disabled);<br /><li>&nbsp; &nbsp; --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);<br /><li>&nbsp; &nbsp; --el-svg-monochrome-grey: var(--el-border-color);<br /><li>}<br /><li>*, :before, :after {<br /><li>&nbsp; &nbsp; --tw-border-spacing-x: 0;<br /><li>&nbsp; &nbsp; --tw-border-spacing-y: 0;<br /><li>&nbsp; &nbsp; --tw-translate-x: 0;<br /><li>&nbsp; &nbsp; --tw-translate-y: 0;<br /><li>&nbsp; &nbsp; --tw-rotate: 0;<br /><li>&nbsp; &nbsp; --tw-skew-x: 0;<br /><li>&nbsp; &nbsp; --tw-skew-y: 0;<br /><li>&nbsp; &nbsp; --tw-scale-x: 1;<br /><li>&nbsp; &nbsp; --tw-scale-y: 1;<br /><li>&nbsp; &nbsp; --tw-pan-x: ;<br /><li>&nbsp; &nbsp; --tw-pan-y: ;<br /><li>&nbsp; &nbsp; --tw-pinch-zoom: ;<br /><li>&nbsp; &nbsp; --tw-scroll-snap-strictness: proximity;<br /><li>&nbsp; &nbsp; --tw-gradient-from-position: ;<br /><li>&nbsp; &nbsp; --tw-gradient-via-position: ;<br /><li>&nbsp; &nbsp; --tw-gradient-to-position: ;<br /><li>&nbsp; &nbsp; --tw-ordinal: ;<br /><li>&nbsp; &nbsp; --tw-slashed-zero: ;<br /><li>&nbsp; &nbsp; --tw-numeric-figure: ;<br /><li>&nbsp; &nbsp; --tw-numeric-spacing: ;<br /><li>&nbsp; &nbsp; --tw-numeric-fraction: ;<br /><li>&nbsp; &nbsp; --tw-ring-inset: ;<br /><li>&nbsp; &nbsp; --tw-ring-offset-width: 0px;<br /><li>&nbsp; &nbsp; --tw-ring-offset-color: #fff;<br /><li>&nbsp; &nbsp; --tw-ring-color: rgb(59 130 246 / .5);<br /><li>&nbsp; &nbsp; --tw-ring-offset-shadow: 0 0 #0000;<br /><li>&nbsp; &nbsp; --tw-ring-shadow: 0 0 #0000;<br /><li>&nbsp; &nbsp; --tw-shadow: 0 0 #0000;<br /><li>&nbsp; &nbsp; --tw-shadow-colored: 0 0 #0000;<br /><li>&nbsp; &nbsp; --tw-blur: ;<br /><li>&nbsp; &nbsp; --tw-brightness: ;<br /><li>&nbsp; &nbsp; --tw-contrast: ;<br /><li>&nbsp; &nbsp; --tw-grayscale: ;<br /><li>&nbsp; &nbsp; --tw-hue-rotate: ;<br /><li>&nbsp; &nbsp; --tw-invert: ;<br /><li>&nbsp; &nbsp; --tw-saturate: ;<br /><li>&nbsp; &nbsp; --tw-sepia: ;<br /><li>&nbsp; &nbsp; --tw-drop-shadow: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-blur: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-brightness: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-contrast: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-grayscale: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-hue-rotate: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-invert: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-opacity: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-saturate: ;<br /><li>&nbsp; &nbsp; --tw-backdrop-sepia: ;<br /><li>}<br /><li>*, :before, :after {<br /><li>&nbsp;&nbsp;/* 补充渐变位置变量的具体值（0%~100%） */<br /><li>&nbsp;&nbsp;--tw-gradient-from-position: 0%;<br /><li>&nbsp;&nbsp;--tw-gradient-via-position: 50%;<br /><li>&nbsp;&nbsp;--tw-gradient-to-position: 100%;<br /><li>}<br /><li>.to-black {<br /><li>&nbsp;&nbsp;--tw-gradient-to: #000 var(--tw-gradient-to-position); /* 等价于 #000 100% */<br /><li>}<br /><li>/* 正确的关键帧定义 */<br /><li>@keyframes flash-6e9282c5 {<br /><li>&nbsp;&nbsp;0%, 100% {<br /><li>&nbsp; &nbsp; opacity: 1;<br /><li>&nbsp;&nbsp;}<br /><li>&nbsp;&nbsp;50% {<br /><li>&nbsp; &nbsp; opacity: 0.5;<br /><li>&nbsp;&nbsp;}<br /><li>}</ol>CSS放到你当前模板的extend_common.css或common.css最底下即可,保存后到你后台更新缓存<br /><br /><br /><img title="40ae1202-3294-4705-b373-8f0eca5b0cc1.png" id="aimg_36879" aid="36879" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202509/08/201706ug6ao6iw5w5a8abx.png" src="https://www.dismall.com/data/attachment/forum/202509/08/201706ug6ao6iw5w5a8abx.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br />我顺便把任务中心也魔改了,这个还在完善,如果有需要的可以+QQ<br />中心<em>, </em>魔改<em>, </em>顺便<em>, </em>任务<em>, </em>这个

鸿茂传媒 發表於 2025-9-9 08:31:33

看着挺好看的，不错。

天天吃火锅！ 發表於 2025-9-9 09:25:51

一看就是ai的美化风格，经典ai配色，不建议无脑用，根据设计原理和审美三原则以及配色规则（但凡接受过系统美术训练的人都不会弄出来一个页面七八种鲜艳饱和度拉满的配色，这样会很乱），网站讲究的是风格统一，配色接近和互补，一个模块一个风格，可能短时间你看着很好，但不符合设计规范，属于畸形审美，不建议使用。<br />网站最重要的是内容，只要你内容好，什么风格都有人愿意去。<br />而且，审美应该兼顾网站所有用户的审美能够被平衡共通的那个点，简单点来说，网站最好的风格是用户普遍认可的风格，做网站应该不要忘记以用户为本的基础，让用户能够决定网站风格，可以增加用户的认可度和归属感<br />所以，不建议大家使用楼主的这个风格

龙二哥 發表於 2025-9-9 16:58:14

<br />哈哈，就喜欢一本正经的评价。<br />别人分享已经很好了，这年头愿意分享的人不多了。

ysx24 發表於 2025-9-27 15:01:42

挺好看的，是否能提供修改后的文件🙈，现在看代码就头痛

s77 發表於 2025-10-7 16:48:49

感谢分享。
頁: [1]
查看完整版本: 分享个我魔改的勋章中心代码,挺好看的