分享个我魔改的勋章中心代码,挺好看的 New
我把勋章中心给魔改了,背景你们可以自己改,如果觉得这个颜色不好看的话
找到你当前模板中的home文件夹,然后在里面找到space_medal.php文件
然后把到
$_G['setting']['bbname'] ›
{lang medals}
中间的那段代码替换成我的代码即可
🏆 荣誉殿堂 🏆 ✨ 展示你的荣耀成就 ✨ 收集勋章，彰显实力，成为传奇！ {lang you_have_now} , {$_G['setting']['extcredits'][$id]['img']} {$_G['setting']['extcredits'][$id]['title']}{$_G['setting']['extcredits'][$id]['unit']} 🎰 🎲 🏆 ✨ ✨ $medal['name'] $medal['description'] 领取勋章 {lang medals_record} {lang medals_message3} $medallog['dateline'] {lang medals_message4} $medallog['name'] {lang medals}, {lang medals_operation_2} {lang medals_operation_3} {lang medals_message3} $medallog['dateline'] {lang medals_message5} $medallog['name'] {lang medals}, {lang expire}: $medallog['expiration'] {lang medals_noexpire} $multipage {lang medals_nonexistence_own} 然后就是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 { 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, { cursor: pointer;}button, , , { -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, { -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 看着挺好看的，不错。 一看就是ai的美化风格，经典ai配色，不建议无脑用，根据设计原理和审美三原则以及配色规则（但凡接受过系统美术训练的人都不会弄出来一个页面七八种鲜艳饱和度拉满的配色，这样会很乱），网站讲究的是风格统一，配色接近和互补，一个模块一个风格，可能短时间你看着很好，但不符合设计规范，属于畸形审美，不建议使用。
网站最重要的是内容，只要你内容好，什么风格都有人愿意去。
而且，审美应该兼顾网站所有用户的审美能够被平衡共通的那个点，简单点来说，网站最好的风格是用户普遍认可的风格，做网站应该不要忘记以用户为本的基础，让用户能够决定网站风格，可以增加用户的认可度和归属感
所以，不建议大家使用楼主的这个风格 天天吃火锅！ 发表于 2025-9-9 09:25
一看就是ai的美化风格，经典ai配色，不建议无脑用，根据设计原理和审美三原则以及配色规则（但凡接受过系统 ...
哈哈，就喜欢一本正经的评价。
别人分享已经很好了，这年头愿意分享的人不多了。
页:
[1]