分享个我魔改的勋章中心代码,挺好看的 New
我把勋章中心给魔改了,背景你们可以自己改,如果觉得这个颜色不好看的话
找到你当前模板中的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>›</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> <!--{if empty($_GET['action'])}--> <!--{if $medallist}--> <!--{if $medalcredits}--> <div class="tbmu" style="padding-top:5px !important"> {lang you_have_now} <!--{eval $i = 0;}--> <!--{loop $medalcredits $id}--> <!--{if $i != 0}-->, <!--{/if}-->{$_G['setting']['extcredits'][$id]['img']} {$_G['setting']['extcredits'][$id]['title']} <span class="xi1"><!--{echo getuserprofile('extcredits'.$id);}--></span> {$_G['setting']['extcredits'][$id]['unit']} <!--{eval $i++;}--> <!--{/loop}--> </div> <!--{/if}--> <div data-v-6e9282c5="" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><!--{loop $medallist $key $medal}--> <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><!--{/loop}--></div> <!--{/if}--> <!--{if $medallogs}--> <h3 class="tbmu">{lang medals_record}</h3> <ul class="el ptm pbw mbw"> <!--{loop $medallogs $medallog}--> <li style="padding-left:10px;"> <!--{if $medallog['type'] == 2 || $medallog['type'] == 3}--> {lang medals_message3} $medallog['dateline'] {lang medals_message4} <strong>$medallog['name']</strong> {lang medals}, <!--{if $medallog['type'] == 2}--> {lang medals_operation_2} <!--{elseif $medallog['type'] == 3}--> {lang medals_operation_3} <!--{/if}--> <!--{elseif $medallog['type'] != 2 && $medallog['type'] != 3}--> {lang medals_message3} $medallog['dateline'] {lang medals_message5} <strong>$medallog['name']</strong> {lang medals}, <!--{if $medallog['expiration']}--> {lang expire}: $medallog['expiration'] <!--{else}--> {lang medals_noexpire} <!--{/if}--> <!--{/if}--> </li> <!--{/loop}--> </ul> <!--{if $multipage}--><div class="pgs cl mtm">$multipage</div><!--{/if}--> <!--{else}--> <p class="emp">{lang medals_nonexistence_own}</p> <!--{/if}--> <!--{/if}--> </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 { 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 这个好看啊 中间的哪段代码啊大佬{:7_182:}
页:
[1]