分享個我魔改的勛章中心代碼,挺好看的

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

我把勛章中心給魔改了,背景你們可以自己改,如果覺得這個顏色不好看的話

找到你當前模板中的home文件夾,然后在里面找到space_medal.php文件

然后把<div class="appl">到<div id="pt" class="bm cl">

<div class="z">

<a href="./" class="nvhm" title="{lang homepage}">$_G['setting']['bbname']</a> <em>&rsaquo;</em>

<a href="home.php?mod=medal">{lang medals}</a>

</div>

</div>中間的那段代碼替換成我的代碼即可

<div id="ct" class="ct2_a wp cl">
<div data-v-e3055dcf="" class="flex dark:text-dark-txt overflow-hidden pb-20 bg-[#f2f2f2] dark:bg-gray-900">
<div data-v-e3055dcf="" id="main-content" class="relative w-full h-full bg-[#f2f2f2] dark:bg-gray-900 px-2 sm:px-10">
<main data-v-e3055dcf="" class="max-w-screen-xl mx-auto w-full">
<div data-v-e3055dcf="" class="px-1">
<div class="el-overlay" style="z-index: 2053; display: none;">
<div role="dialog" aria-modal="true" aria-label="勛章中心" aria-describedby="el-id-6223-112" class="el-overlay-dialog"></div>
</div>
<div data-v-e3055dcf="" class="flex justify-center">
<div data-v-6e9282c5="" class="lg:w-10/12 lg:mx-auto mb-8 px-4">
<div data-v-6e9282c5="" class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div data-v-6e9282c5="" class="mb-8 text-center relative">
<div data-v-6e9282c5="" class="absolute inset-0 bg-gradient-to-r from-yellow-600/10 via-orange-500/10 to-red-600/10 rounded-3xl blur-3xl"></div>
<div data-v-6e9282c5="" class="relative p-8">
<h1 data-v-6e9282c5="" class="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">
?? 榮譽殿堂 ??
</h1>
<div data-v-6e9282c5="" class="flex items-center justify-center gap-2 text-xl md:text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-2">
<span data-v-6e9282c5="">?</span>
<span data-v-6e9282c5="">展示你的榮耀成就</span>
<span data-v-6e9282c5="">?</span>
</div>
<p data-v-6e9282c5="" class="text-lg text-gray-600 dark:text-gray-400">
收集勛章，彰顯實力，成為傳奇！
</p>
</div>
</div>
<div class="tbmu" style="padding-top:5px !important">
{lang you_have_now}
, {$_G['setting']['extcredits'][$id]['img']} {$_G['setting']['extcredits'][$id]['title']} <span class="xi1"></span> {$_G['setting']['extcredits'][$id]['unit']}
</div>
<div data-v-6e9282c5="" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div data-v-6e9282c5="" class="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">
<div data-v-6e9282c5="" class="absolute inset-0 rounded-xl border border-yellow-300 opacity-50 animate-pulse"></div>
<div data-v-6e9282c5="" class="absolute inset-0 opacity-10">
<div data-v-6e9282c5="" class="absolute top-2 left-2 text-4xl">??</div>
<div data-v-6e9282c5="" class="absolute bottom-2 right-2 text-4xl">??</div>
<div data-v-6e9282c5="" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-6xl">??</div>
</div>
<div data-v-6e9282c5="" class="relative p-4">
<div data-v-6e9282c5="" class="flex justify-center mb-3">
<div data-v-6e9282c5="" class="relative">
<div data-v-6e9282c5="" class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full blur-md opacity-50 animate-pulse"></div>
<div data-v-6e9282c5="" class="relative w-20 h-20 rounded-full bg-gradient-to-br from-yellow-400 via-yellow-500 to-orange-500 p-1 shadow-2xl">
<div data-v-6e9282c5="" class="w-full h-full rounded-full bg-black flex items-center justify-center border-2 border-yellow-300">
<img
data-v-6e9282c5=""
src="$medal['image']"
alt="$medal['name']"
class="w-10 h-12 object-contain"
>
</div>
</div>
<div data-v-6e9282c5="" class="absolute -top-1 -right-1 text-yellow-300 text-lg animate-flash">?</div>
<div data-v-6e9282c5="" class="absolute -bottom-1 -left-1 text-yellow-300 text-lg animate-flash" style="animation-delay: 0.5s;">?</div>
</div>
</div>
<h3 data-v-6e9282c5="" class="text-lg font-black text-yellow-300 text-center mb-2">$medal['name']</h3>
<p data-v-6e9282c5="" class="text-xs text-gray-300 text-center mb-4 line-clamp-2">$medal['description']</p>
<div data-v-6e9282c5="" class="flex justify-center el-tooltip__trigger el-tooltip__trigger">
<button
data-v-6e9282c5=""
class="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"
onclick="showWindow('medal', 'home.php?mod=medal&action=confirm&medalid=$medal['medalid']')"
>
<div data-v-6e9282c5="" class="flex items-center space-x-2">
<span data-v-6e9282c5="">領取勛章</span>
</div>
</button>
</div>
<!--
<div data-v-6e9282c5="" class="mt-6">
<div data-v-6e9282c5="" class="flex justify-center">
<div data-v-6e9282c5="" class="flex -space-x-3">
<img data-v-6e9282c5="" src="/api/forum/users/82731/avatar" alt="User 82731" class="w-8 h-8 rounded-full border-2 border-white">
<img data-v-6e9282c5="" src="/api/forum/users/395809/avatar" alt="User 395809" class="w-8 h-8 rounded-full border-2 border-white">
<img data-v-6e9282c5="" src="/api/forum/users/400678/avatar" alt="User 400678" class="w-8 h-8 rounded-full border-2 border-white">
<img data-v-6e9282c5="" src="/api/forum/users/429213/avatar" alt="User 429213" class="w-8 h-8 rounded-full border-2 border-white">
<button data-v-6e9282c5="" class="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"> +9</button>
</div>
</div>
</div>
-->
</div>
</div>
</div>
<h3 class="tbmu">{lang medals_record}</h3>
<ul class="el ptm pbw mbw">
<li style="padding-left:10px;">
{lang medals_message3}
$medallog['dateline']
{lang medals_message4}
<strong>$medallog['name']</strong>
{lang medals},
{lang medals_operation_2}
{lang medals_operation_3}
{lang medals_message3}
$medallog['dateline']
{lang medals_message5}
<strong>$medallog['name']</strong>
{lang medals},
{lang expire}: $medallog['expiration']
{lang medals_noexpire}
</li>
</ul>
<div class="pgs cl mtm">$multipage</div>
<p class="emp">{lang medals_nonexistence_own}</p>
</div>
</div>
</div>
</div>
</main>
<div data-v-e3055dcf="" class="px-4 sm:px-20"></div>
</div>
</div>

復制代碼

然后就是CSS

.pb-20 {
padding-bottom: 5rem;
}
.bg-\[\#f2f2f2\] {
--tw-bg-opacity: 1;
}
.overflow-hidden {
overflow: hidden;
}
.flex {
display: flex;
}
*, :before, :after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
@media (min-width: 640px)
.sm\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.max-w-screen-xl {
max-width: 1280px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.px-1 {
padding-left: .25rem;
padding-right: .25rem;
}
.el-overlay {
background-color: var(--el-overlay-color-lighter);
bottom: 0;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 2000;
}
.el-overlay-dialog {
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
.justify-center {
justify-content: center;
}
.flex {
display: flex;
}
@media (min-width: 1024px)
.lg\:w-10\/12 {
width: 83.333333%;
}
@media (min-width: 1024px)
.lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.mb-8 {
margin-bottom: 2rem;
}
@media (min-width: 1024px)
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.text-center {
text-align: center;
}
.mb-8 {
margin-bottom: 2rem;
}
.blur-3xl {
--tw-blur: blur(64px);
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);
}
.to-red-600\/10 {
--tw-gradient-to: rgb(220 38 38 / .1) var(--tw-gradient-to-position);
}
.via-orange-500\/10 {
--tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: #ca8a041a, rgb(249 115 22 / .1) var(--tw-gradient-via-position), #dc26261a;, var(--tw-gradient-to);
}
.rounded-3xl {
border-radius: 1.5rem;
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.absolute {
position: absolute;
}
.p-8 {
padding: 2rem;
}
.text-transparent {
color: transparent;
}
.font-black {
font-weight: 900;
}
.bg-clip-text {
-webkit-background-clip: text;
background-clip: text;
}
.to-red-500 {
--tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}
.via-orange-500 {
--tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.mb-4 {
margin-bottom: 1rem;
}
.text-yellow-600 {
--tw-text-opacity: 1;
color: rgb(202 138 4 / var(--tw-text-opacity));
}
.font-bold {
font-weight: 700;
}
.gap-2 {
gap: .5rem;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.flex {
display: flex;
}
.mb-2 {
margin-bottom: .5rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
@media (min-width: 1024px)
.lg\:grid-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.gap-4 {
gap: 1rem;
}
.grid-cols-1 {
grid-template-columns: repeat(1,minmax(0,1fr));
}
.grid {
display: grid;
}
.duration-300 {
transition-duration: .3s;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}
.via-purple-900 {
/* 刪除錯誤的 --tw-gradient-to 定義，避免覆蓋 to-black 的值 */
/* 正確銜接：起點 -> 中間點 -> 終點（引用 to-black 的 --tw-gradient-to） */
--tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
element.style {
}
.duration-300 {
transition-duration: .3s;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}
.from-black {
--tw-gradient-from: #000 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
}
.border-yellow-400 {
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.overflow-hidden {
overflow: hidden;
}
.opacity-50 {
opacity: .5;
}
.border-yellow-300 {
--tw-border-opacity: 1;
border-color: rgb(253 224 71 / var(--tw-border-opacity));
}
.border {
border-width: 1px;
}
.rounded-xl {
border-radius: .75rem;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.absolute {
position: absolute;
}
.opacity-10 {
opacity: .1;
}
.top-2 {
top: .5rem;
}
.left-2 {
left: .5rem;
}
.right-2 {
right: .5rem;
}
.bottom-2 {
bottom: .5rem;
}
.transform {
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));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
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));
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
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));
}
.top-1\/2 {
top: 50%;
}
.left-1\/2 {
left: 50%;
}
.p-4 {
padding: 1rem;
}
.justify-center {
justify-content: center;
}
.mb-3 {
margin-bottom: .75rem;
}
.relative {
position: relative;
}
.blur-md {
--tw-blur: blur(12px);
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);
}
.opacity-50 {
opacity: .5;
}
.to-yellow-600 {
--tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}
.rounded-full {
border-radius: 9999px;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}
.p-1 {
padding: .25rem;
}
.to-orange-500 {
--tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.via-yellow-500 {
--tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.from-yellow-400 {
--tw-gradient-from: #facc15 var(--tw-gradient-from-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rounded-full {
border-radius: 9999px;
}
.w-20 {
width: 5rem;
}
.h-20 {
height: 5rem;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.border-yellow-300 {
--tw-border-opacity: 1;
border-color: rgb(253 224 71 / var(--tw-border-opacity));
}
.border-2 {
border-width: 2px;
}
.rounded-full {
border-radius: 9999px;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.w-10 {
width: 2.5rem;
}
.h-12 {
height: 3rem;
}
img, video {
max-width: 100%;
height: auto;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img {
border-style: solid;
}
.animate-flash[data-v-6e9282c5] {
animation: flash-6e9282c5 1s ease-in-out infinite;
}
.text-yellow-300 {
--tw-text-opacity: 1;
color: rgb(253 224 71 / var(--tw-text-opacity));
}
.-top-1 {
top: -.25rem;
}
.-right-1 {
right: -.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.-left-1 {
left: -.25rem;
}
.-bottom-1 {
bottom: -.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-black {
font-weight: 900;
}
.text-center {
text-align: center;
}
.mb-2 {
margin-bottom: .5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
margin: 0;
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-xs {
font-size: 14px;
}
.text-center {
text-align: center;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.mb-4 {
margin-bottom: 1rem;
}
.text-xs {
font-size: .75rem;
line-height: 1rem;
}
.duration-300 {
transition-duration: .3s;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.font-semibold {
font-weight: 600;
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.to-pink-500 {
--tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
--tw-gradient-stops: #a855f7, #ec4899;
}
.from-purple-500 {
--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(168 85 247 / 0)
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-gradient-to-r {
background-image: linear-gradient(to right,var(--tw-gradient-stops));
}
.rounded-lg {
border-radius: .5rem;
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255,255,255,var(--tw-text-opacity));
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem;
}
button, [role=button] {
cursor: pointer;
}
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
button, select {
text-transform: none;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button, input, optgroup, select, textarea {
padding: 0;
line-height: inherit;
color: inherit;
}
button {
cursor: pointer;
}
button {
background-color: transparent;
background-image: none;
}
button, [type=button] {
-webkit-appearance: button;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4 {
grid-template-columns: repeat(3,minmax(0,1fr));
}
:root {
--el-color-white: #ffffff;
--el-color-black: #000000;
--el-color-primary-rgb: 64,158,255;
--el-color-success-rgb: 103,194,58;
--el-color-warning-rgb: 230,162,60;
--el-color-danger-rgb: 245,108,108;
--el-color-error-rgb: 245,108,108;
--el-color-info-rgb: 144,147,153;
--el-font-size-extra-large: 20px;
--el-font-size-large: 18px;
--el-font-size-medium: 16px;
--el-font-size-base: 14px;
--el-font-size-small: 13px;
--el-font-size-extra-small: 12px;
--el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif;
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
--el-index-normal: 1;
--el-index-top: 1000;
--el-index-popper: 2000;
--el-border-radius-base: 4px;
--el-border-radius-small: 2px;
--el-border-radius-round: 20px;
--el-border-radius-circle: 100%;
--el-transition-duration: .3s;
--el-transition-duration-fast: .2s;
--el-transition-function-ease-in-out-bezier: cubic-bezier(.645,.045,.355,1);
--el-transition-function-fast-bezier: cubic-bezier(.23,1,.32,1);
--el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
--el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
--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);
--el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
--el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
--el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
--el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
--el-component-size-large: 40px;
--el-component-size: 32px;
--el-component-size-small: 24px;
color-scheme: light;
--el-color-primary: #409eff;
--el-color-primary-light-3: #79bbff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;
--el-color-success: #67c23a;
--el-color-success-light-3: #95d475;
--el-color-success-light-5: #b3e19d;
--el-color-success-light-7: #d1edc4;
--el-color-success-light-8: #e1f3d8;
--el-color-success-light-9: #f0f9eb;
--el-color-success-dark-2: #529b2e;
--el-color-warning: #e6a23c;
--el-color-warning-light-3: #eebe77;
--el-color-warning-light-5: #f3d19e;
--el-color-warning-light-7: #f8e3c5;
--el-color-warning-light-8: #faecd8;
--el-color-warning-light-9: #fdf6ec;
--el-color-warning-dark-2: #b88230;
--el-color-danger: #f56c6c;
--el-color-danger-light-3: #f89898;
--el-color-danger-light-5: #fab6b6;
--el-color-danger-light-7: #fcd3d3;
--el-color-danger-light-8: #fde2e2;
--el-color-danger-light-9: #fef0f0;
--el-color-danger-dark-2: #c45656;
--el-color-error: #f56c6c;
--el-color-error-light-3: #f89898;
--el-color-error-light-5: #fab6b6;
--el-color-error-light-7: #fcd3d3;
--el-color-error-light-8: #fde2e2;
--el-color-error-light-9: #fef0f0;
--el-color-error-dark-2: #c45656;
--el-color-info: #909399;
--el-color-info-light-3: #b1b3b8;
--el-color-info-light-5: #c8c9cc;
--el-color-info-light-7: #dedfe0;
--el-color-info-light-8: #e9e9eb;
--el-color-info-light-9: #f4f4f5;
--el-color-info-dark-2: #73767a;
--el-bg-color: #ffffff;
--el-bg-color-page: #f2f3f5;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;
--el-border-color: #dcdfe6;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-color-extra-light: #f2f6fc;
--el-border-color-dark: #d4d7de;
--el-border-color-darker: #cdd0d6;
--el-fill-color: #f0f2f5;
--el-fill-color-light: #f5f7fa;
--el-fill-color-lighter: #fafafa;
--el-fill-color-extra-light: #fafcff;
--el-fill-color-dark: #ebedf0;
--el-fill-color-darker: #e6e8eb;
--el-fill-color-blank: #ffffff;
--el-box-shadow: 0px 12px 32px 4px rgba(0,0,0,.04),0px 8px 20px rgba(0,0,0,.08);
--el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12);
--el-box-shadow-lighter: 0px 0px 6px rgba(0,0,0,.12);
--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);
--el-disabled-bg-color: var(--el-fill-color-light);
--el-disabled-text-color: var(--el-text-color-placeholder);
--el-disabled-border-color: var(--el-border-color-light);
--el-overlay-color: rgba(0,0,0,.8);
--el-overlay-color-light: rgba(0,0,0,.7);
--el-overlay-color-lighter: rgba(0,0,0,.5);
--el-mask-color: rgba(255,255,255,.9);
--el-mask-color-extra-light: rgba(255,255,255,.3);
--el-border-width: 1px;
--el-border-style: solid;
--el-border-color-hover: var(--el-text-color-disabled);
--el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
--el-svg-monochrome-grey: var(--el-border-color);
}
*, :before, :after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
*, :before, :after {
/* 補充漸變位置變量的具體值（0%~100%） */
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
}
.to-black {
--tw-gradient-to: #000 var(--tw-gradient-to-position); /* 等價于 #000 100% */
}
/* 正確的關鍵幀定義 */
@keyframes flash-6e9282c5 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

復制代碼

CSS放到你當前模板的extend_common.css或common.css最底下即可,保存后到你后臺更新緩存

我順便把任務中心也魔改了,這個還在完善,如果有需要的可以+QQ

鴻茂傳媒 · 發表于 2025-9-9 08:31:33

看著挺好看的，不錯。

天天吃火鍋！ · 發表于 2025-9-9 09:25:51

一看就是ai的美化風格，經典ai配色，不建議無腦用，根據設計原理和審美三原則以及配色規則（但凡接受過系統美術訓練的人都不會弄出來一個頁面七八種鮮艷飽和度拉滿的配色，這樣會很亂），網站講究的是風格統一，配色接近和互補，一個模塊一個風格，可能短時間你看著很好，但不符合設計規范，屬于畸形審美，不建議使用。
網站最重要的是內容，只要你內容好，什么風格都有人愿意去。
而且，審美應該兼顧網站所有用戶的審美能夠被平衡共通的那個點，簡單點來說，網站最好的風格是用戶普遍認可的風格，做網站應該不要忘記以用戶為本的基礎，讓用戶能夠決定網站風格，可以增加用戶的認可度和歸屬感
所以，不建議大家使用樓主的這個風格

龍二哥 · 發表于 2025-9-9 16:58:14

天天吃火鍋！發表于 2025-9-9 09:25
一看就是ai的美化風格，經典ai配色，不建議無腦用，根據設計原理和審美三原則以及配色規則（但凡接受過系統 ...

哈哈，就喜歡一本正經的評價。
別人分享已經很好了，這年頭愿意分享的人不多了。

分享個我魔改的勛章中心代碼,挺好看的

相關帖子

產品服務

開發者服務

使用教程