【十二周年】【RAID活动】美化「我的勋章」显示

原本「我的勋章」排序因为高度和宽度不一致，
显得非常杂乱，
作为强迫症患者实在无法接受。
于是我请GPT帮我优化了展示方式，
现在看起来整齐且舒服多了！

【原始预览】

【改进后预览】

【油猴脚本代码】

@Name

1. // ==UserScript==
   
2. // @name         GameMale - 美化「我的勛章」显示
   
3. // @namespace    https://www.gamemale.com/space-uid-677863.html
   
4. // @version      1.0
   
5. // @description  调整 我的勛章 勋章排列为表格式
   
6. // @author       FengYing
   
7. // @match        https://www.gamemale.com/wodexunzhang-showxunzhang.html*
   
8. // @match        https://www.gamemale.com/plugin.php?id=wodexunzhang%3Ashowxunzhang&fid=*
   
9. // @match        https://www.gamemale.com/plugin.php?id=wodexunzhang%3Ashowxunzhang&action=*
   
10. // @match        https://www.gamemale.com/plugin.php?id=wodexunzhang:showxunzhang&action=my
    
11. // @icon         https://www.gamemale.com/template/mwt2/extend/img/favicon.ico
    
12. // @grant        GM_addStyle
    
13. // ==/UserScript==
    
14. 
    
15. (function() {
    
16.     'use strict';
    
17. 
    
18.     GM_addStyle(`
    
19.         .myfldiv {
    
20.             display: grid;
    
21.             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    
22.             gap: 10px;
    
23.             justify-content: center;
    
24.         }
    
25.         .myfldiv .myblok {
    
26.             margin: 0;
    
27.             height: auto;
    
28.         }
    
29.         .myfldiv img {
    
30.             max-width: 100%;
    
31.             max-height: 80px;
    
32.             display: block;
    
33.             margin: 0 auto;
    
34.         }
    
35.         .myfldiv .myblok:hover {
    
36.             transform: translateY(-5px);
    
37.             box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    
38.             transition: all 0.2s ease-in-out;
    
39.         }
    
40.         .myblok span {
    
41.             display: block;
    
42.             font-size: 12px;
    
43.             margin-top: 5px;
    
44.         }
    
45.     `);
    
46. })();
    

复制代码

还是习惯了咸鱼鱼老师的统计脚本了，功能更全面。那个脚本对勋章摆尾应该也有调整，至少不会出现一大块空白

整体看上去还是挺不错的，不知道和咸鱼鱼老师的百宝箱会不会有冲突呢

哦，变得更加统一方便起来了，在一些情况下确实会更美观啊

老师辛苦了，感谢分享呢，确实看起来舒服很多

油猴脚本怎么用啊，不会用

宽度高度统一之后确实很棒，强迫症的福音

感觉确实更整洁了一些，之前那种感觉有点像俄罗斯方块，哪都是，我还以为是刻意那样排的

脚本简直就是强迫症的福音呢，能够欣赏自己摆放得整整齐齐的勋章也是一种幸福呢

去年统一了商城和二手的宽度，看着还是蛮舒服的，但背包里还是那样。此前有人做过这种规范在背包里的：
【十周年庆】爆钱爆装备力！还要整理背包~
https://www.gamemale.com/thread-113017-1-1.html
(出处: GameMale)

原来不是我一个人对着这个界面犯过强迫症，看到这个帖子好感动

满足的收下了，顺便给楼主点个赞！出去看看效果先

强迫症福音了，每次看到乱飞的勋章就难受

感觉效果还不错呢，原版的界面确实有点乱

非常实用,看着整整齐齐舒服多了.

“蛛后的低语温柔而真实，胜过神祇千年的沉默。”

感觉效果挺不错的，原版确实有点乱乱的还会有空白

感谢技术大神滴分享，强迫症非常需要。回家就在电脑上的油猴脚本上更新

确实统一了每个勋章的占据空间后美观了好多，也方便查看了

排版确实更整齐了呢不过感觉留白有点大，但是留白小了大勋章又很难放下，真是令人纠结，总之感谢楼主的分享~