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

影子江湖

我把勋章中心给魔改了,背景你们可以自己改,如果觉得这个颜色不好看的话

找到你当前模板中的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>中间的那段代码替换成我的代码即可

1. <div id="ct" class="ct2_a wp cl">
   
2. 
   
3. <div data-v-e3055dcf="" class="flex dark:text-dark-txt overflow-hidden pb-20 bg-[#f2f2f2] dark:bg-gray-900">
   
4.   <div data-v-e3055dcf="" id="main-content" class="relative w-full h-full bg-[#f2f2f2] dark:bg-gray-900 px-2 sm:px-10">
   
5.     <main data-v-e3055dcf="" class="max-w-screen-xl mx-auto w-full">
   
6.       <div data-v-e3055dcf="" class="px-1">
   
7.         <div class="el-overlay" style="z-index: 2053; display: none;">
   
8.           <div role="dialog" aria-modal="true" aria-label="勋章中心" aria-describedby="el-id-6223-112" class="el-overlay-dialog"></div>
   
9.         </div>
   
10. 
    
11.         <!---->
    
12.         <div data-v-e3055dcf="" class="flex justify-center">
    
13.           <!---->
    
14.           <div data-v-6e9282c5="" class="lg:w-10/12 lg:mx-auto mb-8 px-4">
    
15.             <div data-v-6e9282c5="" class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
    
16.               <div data-v-6e9282c5="" class="mb-8 text-center relative">
    
17.                 <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>
    
18.                 <div data-v-6e9282c5="" class="relative p-8">
    
19.                   <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">
    
20.                     🏆 荣誉殿堂 🏆
    
21.                   </h1>
    
22.                   <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">
    
23.                     <span data-v-6e9282c5="">✨</span>
    
24.                     <span data-v-6e9282c5="">展示你的荣耀成就</span>
    
25.                     <span data-v-6e9282c5="">✨</span>
    
26.                   </div>
    
27.                   <p data-v-6e9282c5="" class="text-lg text-gray-600 dark:text-gray-400">
    
28.                     收集勋章，彰显实力，成为传奇！
    
29.                   </p>
    
30.                 </div>
    
31.               </div>
    
32. 
    
33.               <!--{if empty($_GET['action'])}-->
    
34.                 <!--{if $medallist}-->
    
35. 
    
36.                   <!--{if $medalcredits}-->
    
37. 
    
38.                     <div class="tbmu" style="padding-top:5px !important">
    
39.                       {lang you_have_now}
    
40. 
    
41.                       <!--{eval $i = 0;}-->
    
42. 
    
43.                       <!--{loop $medalcredits $id}-->
    
44. 
    
45.                         <!--{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']}
    
46. 
    
47.                         <!--{eval $i++;}-->
    
48. 
    
49.                       <!--{/loop}-->
    
50. 
    
51.                     </div>
    
52. 
    
53.                   <!--{/if}-->
    
54. 
    
55. <div data-v-6e9282c5="" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    
56.   <!--{loop $medallist $key $medal}-->
    
57.     <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">
    
58.       <div data-v-6e9282c5="" class="absolute inset-0 rounded-xl border border-yellow-300 opacity-50 animate-pulse"></div>
    
59.       <div data-v-6e9282c5="" class="absolute inset-0 opacity-10">
    
60.         <div data-v-6e9282c5="" class="absolute top-2 left-2 text-4xl">🎰</div>
    
61.         <div data-v-6e9282c5="" class="absolute bottom-2 right-2 text-4xl">🎲</div>
    
62.         <div data-v-6e9282c5="" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-6xl">🏆</div>
    
63.       </div>
    
64.       <!---->
    
65.       <div data-v-6e9282c5="" class="relative p-4">
    
66.         <div data-v-6e9282c5="" class="flex justify-center mb-3">
    
67.           <div data-v-6e9282c5="" class="relative">
    
68.             <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>
    
69.             <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">
    
70.               <div data-v-6e9282c5="" class="w-full h-full rounded-full bg-black flex items-center justify-center border-2 border-yellow-300">
    
71.                 <img
    
72.                   data-v-6e9282c5=""
    
73.                   src="$medal['image']"
    
74.                   alt="$medal['name']"
    
75.                   class="w-10 h-12 object-contain"
    
76.                 >
    
77.               </div>
    
78.             </div>
    
79.             <div data-v-6e9282c5="" class="absolute -top-1 -right-1 text-yellow-300 text-lg animate-flash">✨</div>
    
80.             <div data-v-6e9282c5="" class="absolute -bottom-1 -left-1 text-yellow-300 text-lg animate-flash" style="animation-delay: 0.5s;">✨</div>
    
81.           </div>
    
82.         </div>
    
83.         <h3 data-v-6e9282c5="" class="text-lg font-black text-yellow-300 text-center mb-2">$medal['name']</h3>
    
84.         <p data-v-6e9282c5="" class="text-xs text-gray-300 text-center mb-4 line-clamp-2">$medal['description']</p>
    
85.         
    
86.         <div data-v-6e9282c5="" class="flex justify-center el-tooltip__trigger el-tooltip__trigger">
    
87.           <button
    
88.             data-v-6e9282c5=""
    
89.             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"
    
90.             onclick="showWindow('medal', 'home.php?mod=medal&action=confirm&medalid=$medal['medalid']')"
    
91.           >
    
92.             <div data-v-6e9282c5="" class="flex items-center space-x-2">
    
93.               <span data-v-6e9282c5="">领取勋章</span>
    
94.             </div>
    
95.           </button>
    
96.         </div>
    
97. 
    
98.         <!-- 可选：用户头像列表等，如果需要也可以加上 -->
    
99.         <!--
    
100.         <div data-v-6e9282c5="" class="mt-6">
     
101.           <div data-v-6e9282c5="" class="flex justify-center">
     
102.             <div data-v-6e9282c5="" class="flex -space-x-3">
     
103.               <img data-v-6e9282c5="" src="/api/forum/users/82731/avatar" alt="User 82731" class="w-8 h-8 rounded-full border-2 border-white">
     
104.               <img data-v-6e9282c5="" src="/api/forum/users/395809/avatar" alt="User 395809" class="w-8 h-8 rounded-full border-2 border-white">
     
105.               <img data-v-6e9282c5="" src="/api/forum/users/400678/avatar" alt="User 400678" class="w-8 h-8 rounded-full border-2 border-white">
     
106.               <img data-v-6e9282c5="" src="/api/forum/users/429213/avatar" alt="User 429213" class="w-8 h-8 rounded-full border-2 border-white">
     
107.               <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>
     
108.             </div>
     
109.           </div>
     
110.         </div>
     
111.         -->
     
112.       </div>
     
113.     </div>
     
114.   <!--{/loop}-->
     
115. </div>
     
116.                 <!--{/if}-->
     
117. 
     
118.                 <!--{if $medallogs}-->
     
119.                   <h3 class="tbmu">{lang medals_record}</h3>
     
120.                   <ul class="el ptm pbw mbw">
     
121.                     <!--{loop $medallogs $medallog}-->
     
122.                       <li style="padding-left:10px;">
     
123.                         <!--{if $medallog['type'] == 2 || $medallog['type'] == 3}-->
     
124.                           {lang medals_message3}
     
125.                           $medallog['dateline']
     
126.                           {lang medals_message4}
     
127.                           <strong>$medallog['name']</strong>
     
128.                           {lang medals},
     
129.                           <!--{if $medallog['type'] == 2}-->
     
130.                             {lang medals_operation_2}
     
131.                           <!--{elseif $medallog['type'] == 3}-->
     
132.                             {lang medals_operation_3}
     
133.                           <!--{/if}-->
     
134.                         <!--{elseif $medallog['type'] != 2 && $medallog['type'] != 3}-->
     
135.                           {lang medals_message3}
     
136.                           $medallog['dateline']
     
137.                           {lang medals_message5}
     
138.                           <strong>$medallog['name']</strong>
     
139.                           {lang medals},
     
140.                           <!--{if $medallog['expiration']}-->
     
141.                             {lang expire}: $medallog['expiration']
     
142.                           <!--{else}-->
     
143.                             {lang medals_noexpire}
     
144.                           <!--{/if}-->
     
145.                         <!--{/if}-->
     
146.                       </li>
     
147.                     <!--{/loop}-->
     
148.                   </ul>
     
149.                   <!--{if $multipage}--><div class="pgs cl mtm">$multipage</div><!--{/if}-->
     
150.                 <!--{else}-->
     
151.                   <p class="emp">{lang medals_nonexistence_own}</p>
     
152.                 <!--{/if}-->
     
153. 
     
154.               <!--{/if}-->
     
155.             </div>
     
156.           </div>
     
157.         </div>
     
158.       </div>
     
159.     </main>
     
160.     <div data-v-e3055dcf="" class="px-4 sm:px-20"></div>
     
161.   </div>
     
162. </div>
     

然后就是CSS

1. .pb-20 {
   
2.     padding-bottom: 5rem;
   
3. }
   
4. .bg-\[\#f2f2f2\] {
   
5.     --tw-bg-opacity: 1;
   
6. }
   
7. .overflow-hidden {
   
8.     overflow: hidden;
   
9. }
   
10. .flex {
    
11.     display: flex;
    
12. }
    
13. 
    
14. *, :before, :after {
    
15.     box-sizing: border-box;
    
16.     border-width: 0;
    
17.     border-style: solid;
    
18.     border-color: #e5e7eb;
    
19. }
    
20. @media (min-width: 640px)
    
21. .sm\:px-10 {
    
22.     padding-left: 2.5rem;
    
23.     padding-right: 2.5rem;
    
24. }
    
25. .px-2 {
    
26.     padding-left: .5rem;
    
27.     padding-right: .5rem;
    
28. }
    
29. .w-full {
    
30.     width: 100%;
    
31. }
    
32. .h-full {
    
33.     height: 100%;
    
34. }
    
35. .max-w-screen-xl {
    
36.     max-width: 1280px;
    
37. }
    
38. .mx-auto {
    
39.     margin-left: auto;
    
40.     margin-right: auto;
    
41. }
    
42. .px-1 {
    
43.     padding-left: .25rem;
    
44.     padding-right: .25rem;
    
45. }
    
46. .el-overlay {
    
47.     background-color: var(--el-overlay-color-lighter);
    
48.     bottom: 0;
    
49.     height: 100%;
    
50.     left: 0;
    
51.     overflow: auto;
    
52.     position: fixed;
    
53.     right: 0;
    
54.     top: 0;
    
55.     z-index: 2000;
    
56. }
    
57. .el-overlay-dialog {
    
58.     bottom: 0;
    
59.     left: 0;
    
60.     overflow: auto;
    
61.     position: fixed;
    
62.     right: 0;
    
63.     top: 0;
    
64. }
    
65. .justify-center {
    
66.     justify-content: center;
    
67. }       
    
68. .flex {
    
69.     display: flex;
    
70. }
    
71. @media (min-width: 1024px)
    
72. .lg\:w-10\/12 {
    
73.     width: 83.333333%;
    
74. }
    
75. @media (min-width: 1024px)
    
76. .lg\:mx-auto {
    
77.     margin-left: auto;
    
78.     margin-right: auto;
    
79. }
    
80. .px-4 {
    
81.     padding-left: 1rem;
    
82.     padding-right: 1rem;
    
83. }
    
84. .mb-8 {
    
85.     margin-bottom: 2rem;
    
86. }
    
87. @media (min-width: 1024px)
    
88. .lg\:px-8 {
    
89.     padding-left: 2rem;
    
90.     padding-right: 2rem;
    
91. }
    
92. .text-center {
    
93.     text-align: center;
    
94. }
    
95. .mb-8 {
    
96.     margin-bottom: 2rem;
    
97. }
    
98. .blur-3xl {
    
99.     --tw-blur: blur(64px);
    
100.     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);
     
101. }
     
102. .to-red-600\/10 {
     
103.     --tw-gradient-to: rgb(220 38 38 / .1) var(--tw-gradient-to-position);
     
104. }
     
105. .via-orange-500\/10 {
     
106.     --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
     
107.     --tw-gradient-stops: #ca8a041a, rgb(249 115 22 / .1) var(--tw-gradient-via-position), #dc26261a;, var(--tw-gradient-to);
     
108. }
     
109. 
     
110. .rounded-3xl {
     
111.     border-radius: 1.5rem;
     
112. }
     
113. .inset-0 {
     
114.     top: 0;
     
115.     right: 0;
     
116.     bottom: 0;
     
117.     left: 0;
     
118. }
     
119. .absolute {
     
120.     position: absolute;
     
121. }
     
122. .p-8 {
     
123.     padding: 2rem;
     
124. }
     
125. .text-transparent {
     
126.     color: transparent;
     
127. }
     
128. .font-black {
     
129.     font-weight: 900;
     
130. }
     
131. .bg-clip-text {
     
132.     -webkit-background-clip: text;
     
133.     background-clip: text;
     
134. }
     
135. .to-red-500 {
     
136.     --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
     
137. }
     
138. .via-orange-500 {
     
139.     --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
     
140.     --tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);
     
141. }
     
142. 
     
143. 
     
144. .mb-4 {
     
145.     margin-bottom: 1rem;
     
146. }
     
147. .text-yellow-600 {
     
148.     --tw-text-opacity: 1;
     
149.     color: rgb(202 138 4 / var(--tw-text-opacity));
     
150. }
     
151. .font-bold {
     
152.     font-weight: 700;
     
153. }
     
154. .gap-2 {
     
155.     gap: .5rem;
     
156. }
     
157. .justify-center {
     
158.     justify-content: center;
     
159. }
     
160. .items-center {
     
161.     align-items: center;
     
162. }
     
163. .flex {
     
164.     display: flex;
     
165. }
     
166. .mb-2 {
     
167.     margin-bottom: .5rem;
     
168. }
     
169. .text-xl {
     
170.     font-size: 1.25rem;
     
171.     line-height: 1.75rem;
     
172. }
     
173. .text-gray-600 {
     
174.     --tw-text-opacity: 1;
     
175.     color: rgb(75 85 99 / var(--tw-text-opacity));
     
176. }
     
177. .text-lg {
     
178.     font-size: 1.125rem;
     
179.     line-height: 1.75rem;
     
180. }
     
181. @media (min-width: 1024px)
     
182. .lg\:grid-cols-3 {
     
183.     grid-template-columns: repeat(3,minmax(0,1fr));
     
184. }
     
185. .gap-4 {
     
186.     gap: 1rem;
     
187. }
     
188. .grid-cols-1 {
     
189.     grid-template-columns: repeat(1,minmax(0,1fr));
     
190. }
     
191. .grid {
     
192.     display: grid;
     
193. }
     
194. .duration-300 {
     
195.     transition-duration: .3s;
     
196. }
     
197. .transition-all {
     
198.     transition-property: all;
     
199.     transition-timing-function: cubic-bezier(.4,0,.2,1);
     
200.     transition-duration: .15s;
     
201. }
     
202. .shadow-2xl {
     
203.     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
     
204.     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     
205.     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
     
206. }
     
207. 
     
208. .via-purple-900 {
     
209.   /* 删除错误的 --tw-gradient-to 定义，避免覆盖 to-black 的值 */
     
210.   /* 正确衔接：起点 -> 中间点 -> 终点（引用 to-black 的 --tw-gradient-to） */
     
211.   --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
     
212. }
     
213. 
     
214. element.style {
     
215. }
     
216. .duration-300 {
     
217.     transition-duration: .3s;
     
218. }
     
219. .transition-all {
     
220.     transition-property: all;
     
221.     transition-timing-function: cubic-bezier(.4,0,.2,1);
     
222.     transition-duration: .15s;
     
223. }
     
224. .shadow-2xl {
     
225.     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
     
226.     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     
227.     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
     
228. }
     
229. 
     
230. .from-black {
     
231.     --tw-gradient-from: #000 var(--tw-gradient-from-position);
     
232.     --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
     
233. }
     
234. .bg-gradient-to-br {
     
235.     background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
     
236. }
     
237. .border-yellow-400 {
     
238.     --tw-border-opacity: 1;
     
239.     border-color: rgb(250 204 21 / var(--tw-border-opacity));
     
240. }
     
241. .overflow-hidden {
     
242.     overflow: hidden;
     
243. }
     
244. .opacity-50 {
     
245.     opacity: .5;
     
246. }
     
247. .border-yellow-300 {
     
248.     --tw-border-opacity: 1;
     
249.     border-color: rgb(253 224 71 / var(--tw-border-opacity));
     
250. }
     
251. .border {
     
252.     border-width: 1px;
     
253. }
     
254. .rounded-xl {
     
255.     border-radius: .75rem;
     
256. }
     
257. .animate-pulse {
     
258.     animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
     
259. }
     
260. .inset-0 {
     
261.     top: 0;
     
262.     right: 0;
     
263.     bottom: 0;
     
264.     left: 0;
     
265. }
     
266. .absolute {
     
267.     position: absolute;
     
268. }
     
269. .opacity-10 {
     
270.     opacity: .1;
     
271. }
     
272. .top-2 {
     
273.     top: .5rem;
     
274. }
     
275. .left-2 {
     
276.     left: .5rem;
     
277. }
     
278. .right-2 {
     
279.     right: .5rem;
     
280. }
     
281. .bottom-2 {
     
282.     bottom: .5rem;
     
283. }
     
284. .transform {
     
285.     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));
     
286. }
     
287. .-translate-y-1\/2 {
     
288.     --tw-translate-y: -50%;
     
289.     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));
     
290. }
     
291. .-translate-x-1\/2 {
     
292.     --tw-translate-x: -50%;
     
293.     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));
     
294. }
     
295. .top-1\/2 {
     
296.     top: 50%;
     
297. }
     
298. .left-1\/2 {
     
299.     left: 50%;
     
300. }
     
301. .p-4 {
     
302.     padding: 1rem;
     
303. }
     
304. .justify-center {
     
305.     justify-content: center;
     
306. }
     
307. .mb-3 {
     
308.     margin-bottom: .75rem;
     
309. }
     
310. .relative {
     
311.     position: relative;
     
312. }
     
313. .blur-md {
     
314.     --tw-blur: blur(12px);
     
315.     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);
     
316. }
     
317. .opacity-50 {
     
318.     opacity: .5;
     
319. }
     
320. .to-yellow-600 {
     
321.     --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
     
322. }
     
323. 
     
324. .rounded-full {
     
325.     border-radius: 9999px;
     
326. }
     
327. .animate-pulse {
     
328.     animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
     
329. }
     
330. .shadow-2xl {
     
331.     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
     
332.     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     
333.     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
     
334. }
     
335. .p-1 {
     
336.     padding: .25rem;
     
337. }
     
338. .to-orange-500 {
     
339.     --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
     
340. }
     
341. .via-yellow-500 {
     
342.     --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);
     
343. }
     
344. .from-yellow-400 {
     
345.     --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
     
346.     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
     
347. }
     
348. .rounded-full {
     
349.     border-radius: 9999px;
     
350. }
     
351. .w-20 {
     
352.     width: 5rem;
     
353. }
     
354. .h-20 {
     
355.     height: 5rem;
     
356. }
     
357. .bg-black {
     
358.     --tw-bg-opacity: 1;
     
359.     background-color: rgb(0 0 0 / var(--tw-bg-opacity));
     
360. }
     
361. .border-yellow-300 {
     
362.     --tw-border-opacity: 1;
     
363.     border-color: rgb(253 224 71 / var(--tw-border-opacity));
     
364. }
     
365. .border-2 {
     
366.     border-width: 2px;
     
367. }
     
368. .rounded-full {
     
369.     border-radius: 9999px;
     
370. }
     
371. .justify-center {
     
372.     justify-content: center;
     
373. }
     
374. .items-center {
     
375.     align-items: center;
     
376. }
     
377. .object-contain {
     
378.     -o-object-fit: contain;
     
379.     object-fit: contain;
     
380. }
     
381. .w-10 {
     
382.     width: 2.5rem;
     
383. }
     
384. .h-12 {
     
385.     height: 3rem;
     
386. }
     
387. img, video {
     
388.     max-width: 100%;
     
389.     height: auto;
     
390. }
     
391. img, svg, video, canvas, audio, iframe, embed, object {
     
392.     display: block;
     
393.     vertical-align: middle;
     
394. }
     
395. img {
     
396.     border-style: solid;
     
397. }
     
398. .animate-flash[data-v-6e9282c5] {
     
399.     animation: flash-6e9282c5 1s ease-in-out infinite;
     
400. }
     
401. .text-yellow-300 {
     
402.     --tw-text-opacity: 1;
     
403.     color: rgb(253 224 71 / var(--tw-text-opacity));
     
404. }
     
405. .-top-1 {
     
406.     top: -.25rem;
     
407. }
     
408. .-right-1 {
     
409.     right: -.25rem;
     
410. }
     
411. .text-lg {
     
412.     font-size: 1.125rem;
     
413.     line-height: 1.75rem;
     
414. }
     
415. .-left-1 {
     
416.     left: -.25rem;
     
417. }
     
418. .-bottom-1 {
     
419.     bottom: -.25rem;
     
420. }
     
421. .text-lg {
     
422.     font-size: 1.125rem;
     
423.     line-height: 1.75rem;
     
424. }
     
425. .font-black {
     
426.     font-weight: 900;
     
427. }
     
428. .text-center {
     
429.     text-align: center;
     
430. }
     
431. .mb-2 {
     
432.     margin-bottom: .5rem;
     
433. }
     
434. .text-lg {
     
435.     font-size: 1.125rem;
     
436.     line-height: 1.75rem;
     
437. }
     
438. blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
     
439.     margin: 0;
     
440. }
     
441. .text-gray-300 {
     
442.     --tw-text-opacity: 1;
     
443.     color: rgb(209 213 219 / var(--tw-text-opacity));
     
444. }
     
445. .text-xs {
     
446.     font-size: 14px;
     
447. }
     
448. .text-center {
     
449.     text-align: center;
     
450. }
     
451. .line-clamp-2 {
     
452.     overflow: hidden;
     
453.     display: -webkit-box;
     
454.     -webkit-box-orient: vertical;
     
455.     -webkit-line-clamp: 2;
     
456. }
     
457. .mb-4 {
     
458.     margin-bottom: 1rem;
     
459. }
     
460. .text-xs {
     
461.     font-size: .75rem;
     
462.     line-height: 1rem;
     
463. }
     
464. .duration-300 {
     
465.     transition-duration: .3s;
     
466. }
     
467. .transition-all {
     
468.     transition-property: all;
     
469.     transition-timing-function: cubic-bezier(.4,0,.2,1);
     
470.     transition-duration: .15s;
     
471. }
     
472. .text-white {
     
473.     --tw-text-opacity: 1;
     
474.     color: rgb(255 255 255 / var(--tw-text-opacity));
     
475. }
     
476. .font-semibold {
     
477.     font-weight: 600;
     
478. }
     
479. .py-2 {
     
480.     padding-top: .5rem;
     
481.     padding-bottom: .5rem;
     
482. }
     
483. .px-6 {
     
484.     padding-left: 1.5rem;
     
485.     padding-right: 1.5rem;
     
486. }
     
487. .to-pink-500 {
     
488.     --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
     
489.         --tw-gradient-stops: #a855f7, #ec4899;
     
490. }
     
491. .from-purple-500 {
     
492.     --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
     
493.     --tw-gradient-to: rgb(168 85 247 / 0)
     
494.     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
     
495. }
     
496. .bg-gradient-to-r {
     
497.     background-image: linear-gradient(to right,var(--tw-gradient-stops));
     
498. }
     
499. .rounded-lg {
     
500.     border-radius: .5rem;
     
501. }
     
502. .text-white {
     
503.     --tw-text-opacity: 1;
     
504.     color: rgba(255,255,255,var(--tw-text-opacity));
     
505. }
     
506. .text-sm {
     
507.     font-size: .875rem;
     
508.     line-height: 1.25rem;
     
509. }
     
510. button, [role=button] {
     
511.     cursor: pointer;
     
512. }
     
513. button, [type=button], [type=reset], [type=submit] {
     
514.     -webkit-appearance: button;
     
515.     background-color: transparent;
     
516.     background-image: none;
     
517. }
     
518. button, select {
     
519.     text-transform: none;
     
520. }
     
521. button, input, optgroup, select, textarea {
     
522.     font-family: inherit;
     
523.     font-size: 100%;
     
524.     font-weight: inherit;
     
525.     line-height: inherit;
     
526.     color: inherit;
     
527.     margin: 0;
     
528.     padding: 0;
     
529. }
     
530. button, input, optgroup, select, textarea {
     
531.     padding: 0;
     
532.     line-height: inherit;
     
533.     color: inherit;
     
534. }
     
535. button {
     
536.     cursor: pointer;
     
537. }
     
538. button {
     
539.     background-color: transparent;
     
540.     background-image: none;
     
541. }
     
542. button, [type=button] {
     
543.     -webkit-appearance: button;
     
544. }
     
545. button, input, optgroup, select, textarea {
     
546.     font-family: inherit;
     
547.     font-size: 100%;
     
548.     line-height: 1.15;
     
549.     margin: 0;
     
550. }
     
551. .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4 {
     
552.     grid-template-columns: repeat(3,minmax(0,1fr));
     
553. }
     
554. :root {
     
555.     --el-color-white: #ffffff;
     
556.     --el-color-black: #000000;
     
557.     --el-color-primary-rgb: 64,158,255;
     
558.     --el-color-success-rgb: 103,194,58;
     
559.     --el-color-warning-rgb: 230,162,60;
     
560.     --el-color-danger-rgb: 245,108,108;
     
561.     --el-color-error-rgb: 245,108,108;
     
562.     --el-color-info-rgb: 144,147,153;
     
563.     --el-font-size-extra-large: 20px;
     
564.     --el-font-size-large: 18px;
     
565.     --el-font-size-medium: 16px;
     
566.     --el-font-size-base: 14px;
     
567.     --el-font-size-small: 13px;
     
568.     --el-font-size-extra-small: 12px;
     
569.     --el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
     
570.     --el-font-weight-primary: 500;
     
571.     --el-font-line-height-primary: 24px;
     
572.     --el-index-normal: 1;
     
573.     --el-index-top: 1000;
     
574.     --el-index-popper: 2000;
     
575.     --el-border-radius-base: 4px;
     
576.     --el-border-radius-small: 2px;
     
577.     --el-border-radius-round: 20px;
     
578.     --el-border-radius-circle: 100%;
     
579.     --el-transition-duration: .3s;
     
580.     --el-transition-duration-fast: .2s;
     
581.     --el-transition-function-ease-in-out-bezier: cubic-bezier(.645,.045,.355,1);
     
582.     --el-transition-function-fast-bezier: cubic-bezier(.23,1,.32,1);
     
583.     --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
     
584.     --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
     
585.     --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);
     
586.     --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
     
587.     --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
     
588.     --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
     
589.     --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
     
590.     --el-component-size-large: 40px;
     
591.     --el-component-size: 32px;
     
592.     --el-component-size-small: 24px;
     
593.     color-scheme: light;
     
594.     --el-color-primary: #409eff;
     
595.     --el-color-primary-light-3: #79bbff;
     
596.     --el-color-primary-light-5: #a0cfff;
     
597.     --el-color-primary-light-7: #c6e2ff;
     
598.     --el-color-primary-light-8: #d9ecff;
     
599.     --el-color-primary-light-9: #ecf5ff;
     
600.     --el-color-primary-dark-2: #337ecc;
     
601.     --el-color-success: #67c23a;
     
602.     --el-color-success-light-3: #95d475;
     
603.     --el-color-success-light-5: #b3e19d;
     
604.     --el-color-success-light-7: #d1edc4;
     
605.     --el-color-success-light-8: #e1f3d8;
     
606.     --el-color-success-light-9: #f0f9eb;
     
607.     --el-color-success-dark-2: #529b2e;
     
608.     --el-color-warning: #e6a23c;
     
609.     --el-color-warning-light-3: #eebe77;
     
610.     --el-color-warning-light-5: #f3d19e;
     
611.     --el-color-warning-light-7: #f8e3c5;
     
612.     --el-color-warning-light-8: #faecd8;
     
613.     --el-color-warning-light-9: #fdf6ec;
     
614.     --el-color-warning-dark-2: #b88230;
     
615.     --el-color-danger: #f56c6c;
     
616.     --el-color-danger-light-3: #f89898;
     
617.     --el-color-danger-light-5: #fab6b6;
     
618.     --el-color-danger-light-7: #fcd3d3;
     
619.     --el-color-danger-light-8: #fde2e2;
     
620.     --el-color-danger-light-9: #fef0f0;
     
621.     --el-color-danger-dark-2: #c45656;
     
622.     --el-color-error: #f56c6c;
     
623.     --el-color-error-light-3: #f89898;
     
624.     --el-color-error-light-5: #fab6b6;
     
625.     --el-color-error-light-7: #fcd3d3;
     
626.     --el-color-error-light-8: #fde2e2;
     
627.     --el-color-error-light-9: #fef0f0;
     
628.     --el-color-error-dark-2: #c45656;
     
629.     --el-color-info: #909399;
     
630.     --el-color-info-light-3: #b1b3b8;
     
631.     --el-color-info-light-5: #c8c9cc;
     
632.     --el-color-info-light-7: #dedfe0;
     
633.     --el-color-info-light-8: #e9e9eb;
     
634.     --el-color-info-light-9: #f4f4f5;
     
635.     --el-color-info-dark-2: #73767a;
     
636.     --el-bg-color: #ffffff;
     
637.     --el-bg-color-page: #f2f3f5;
     
638.     --el-bg-color-overlay: #ffffff;
     
639.     --el-text-color-primary: #303133;
     
640.     --el-text-color-regular: #606266;
     
641.     --el-text-color-secondary: #909399;
     
642.     --el-text-color-placeholder: #a8abb2;
     
643.     --el-text-color-disabled: #c0c4cc;
     
644.     --el-border-color: #dcdfe6;
     
645.     --el-border-color-light: #e4e7ed;
     
646.     --el-border-color-lighter: #ebeef5;
     
647.     --el-border-color-extra-light: #f2f6fc;
     
648.     --el-border-color-dark: #d4d7de;
     
649.     --el-border-color-darker: #cdd0d6;
     
650.     --el-fill-color: #f0f2f5;
     
651.     --el-fill-color-light: #f5f7fa;
     
652.     --el-fill-color-lighter: #fafafa;
     
653.     --el-fill-color-extra-light: #fafcff;
     
654.     --el-fill-color-dark: #ebedf0;
     
655.     --el-fill-color-darker: #e6e8eb;
     
656.     --el-fill-color-blank: #ffffff;
     
657.     --el-box-shadow: 0px 12px 32px 4px rgba(0,0,0,.04),0px 8px 20px rgba(0,0,0,.08);
     
658.     --el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12);
     
659.     --el-box-shadow-lighter: 0px 0px 6px rgba(0,0,0,.12);
     
660.     --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);
     
661.     --el-disabled-bg-color: var(--el-fill-color-light);
     
662.     --el-disabled-text-color: var(--el-text-color-placeholder);
     
663.     --el-disabled-border-color: var(--el-border-color-light);
     
664.     --el-overlay-color: rgba(0,0,0,.8);
     
665.     --el-overlay-color-light: rgba(0,0,0,.7);
     
666.     --el-overlay-color-lighter: rgba(0,0,0,.5);
     
667.     --el-mask-color: rgba(255,255,255,.9);
     
668.     --el-mask-color-extra-light: rgba(255,255,255,.3);
     
669.     --el-border-width: 1px;
     
670.     --el-border-style: solid;
     
671.     --el-border-color-hover: var(--el-text-color-disabled);
     
672.     --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
     
673.     --el-svg-monochrome-grey: var(--el-border-color);
     
674. }
     
675. *, :before, :after {
     
676.     --tw-border-spacing-x: 0;
     
677.     --tw-border-spacing-y: 0;
     
678.     --tw-translate-x: 0;
     
679.     --tw-translate-y: 0;
     
680.     --tw-rotate: 0;
     
681.     --tw-skew-x: 0;
     
682.     --tw-skew-y: 0;
     
683.     --tw-scale-x: 1;
     
684.     --tw-scale-y: 1;
     
685.     --tw-pan-x: ;
     
686.     --tw-pan-y: ;
     
687.     --tw-pinch-zoom: ;
     
688.     --tw-scroll-snap-strictness: proximity;
     
689.     --tw-gradient-from-position: ;
     
690.     --tw-gradient-via-position: ;
     
691.     --tw-gradient-to-position: ;
     
692.     --tw-ordinal: ;
     
693.     --tw-slashed-zero: ;
     
694.     --tw-numeric-figure: ;
     
695.     --tw-numeric-spacing: ;
     
696.     --tw-numeric-fraction: ;
     
697.     --tw-ring-inset: ;
     
698.     --tw-ring-offset-width: 0px;
     
699.     --tw-ring-offset-color: #fff;
     
700.     --tw-ring-color: rgb(59 130 246 / .5);
     
701.     --tw-ring-offset-shadow: 0 0 #0000;
     
702.     --tw-ring-shadow: 0 0 #0000;
     
703.     --tw-shadow: 0 0 #0000;
     
704.     --tw-shadow-colored: 0 0 #0000;
     
705.     --tw-blur: ;
     
706.     --tw-brightness: ;
     
707.     --tw-contrast: ;
     
708.     --tw-grayscale: ;
     
709.     --tw-hue-rotate: ;
     
710.     --tw-invert: ;
     
711.     --tw-saturate: ;
     
712.     --tw-sepia: ;
     
713.     --tw-drop-shadow: ;
     
714.     --tw-backdrop-blur: ;
     
715.     --tw-backdrop-brightness: ;
     
716.     --tw-backdrop-contrast: ;
     
717.     --tw-backdrop-grayscale: ;
     
718.     --tw-backdrop-hue-rotate: ;
     
719.     --tw-backdrop-invert: ;
     
720.     --tw-backdrop-opacity: ;
     
721.     --tw-backdrop-saturate: ;
     
722.     --tw-backdrop-sepia: ;
     
723. }
     
724. *, :before, :after {
     
725.   /* 补充渐变位置变量的具体值（0%~100%） */
     
726.   --tw-gradient-from-position: 0%;
     
727.   --tw-gradient-via-position: 50%;
     
728.   --tw-gradient-to-position: 100%;
     
729. }
     
730. .to-black {
     
731.   --tw-gradient-to: #000 var(--tw-gradient-to-position); /* 等价于 #000 100% */
     
732. }
     
733. /* 正确的关键帧定义 */
     
734. @keyframes flash-6e9282c5 {
     
735.   0%, 100% {
     
736.     opacity: 1;
     
737.   }
     
738.   50% {
     
739.     opacity: 0.5;
     
740.   }
     
741. }

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

我顺便把任务中心也魔改了,这个还在完善,如果有需要的可以+QQ
中心, 魔改, 顺便, 任务, 这个

鸿茂传媒

看着挺好看的，不错。

天天吃火锅！

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

龙二哥

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

ysx24

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

s77

感谢分享。