onixbyte/delta-force-guide-web
4
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

优化武器列表页面

Browse Source
This commit is contained in:
Fan Xingyao
2026-05-25 14:04:32 +08:00
parent 381ccae5fd
commit 0681ca8b34
6 changed files with 864 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+142 -4
View File
@@ -2,7 +2,8 @@
@import 'tailwindcss';
html, body {
html,
body {
margin: 0;
padding: 0;
width: 100%;
@@ -38,6 +39,7 @@ html, body {
.nav-item {
position: relative;
overflow: hidden;
z-index: 1;
}
.nav-item::after {
@@ -51,15 +53,151 @@ html, body {
transition: height 0.2s ease-in-out;
opacity: 0.35;
pointer-events: none;
z-index: -1;
}
.nav-item:hover::after,
.nav-item:hover::after {
height: 30%;
}
/* 激活状态效果 */
.nav-item.active::after {
height: 80%; /* 向上打光的高度，可以调整 */
height: 30%;
}
/* 可选：激活+悬停效果 */
.nav-item.active:hover::after {
opacity: 0.35;
}
.custom-btn-outlined {
--ant-color-solid: #10E28C;
/* 边框和文字颜色 */
--ant-color-solid-hover: #2ee59d;
--ant-color-solid-active: #0cb878;
}
.hex-bg {
background-color: #1E1E1E;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.3' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='fadeDown' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2339ff14' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2339ff14' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23fadeDown)' stroke-width='0.5'%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546041,-0.85081805,0.85081805,0.52546041,-203.01888079,130.22116071)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.65208214,130.43446239)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.04868859,141.09544261)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.68192833,141.30866893)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.2853524,130.6476887)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3151986,141.52187999)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.86530846,152.18286021)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.49857872,152.39608653)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-203.44526451,151.88976939)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,152.72932323)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.30770653,163.1089619)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.99694603,163.40205272)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3930642,163.69517406)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,130.86648448)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.84158104,174.24726756)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-166.23769921,174.68691905)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.08231896,163.69518931)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-159.78921288,141.71168407)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.37542504,185.6786793)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.68620079,185.53211864)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-209.32536095,140.83235057)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-215.48072594,129.98715098)'/%3E%3C/g%3E%3C/svg%3E");
background-size: 350px 350px;
background-position: right -90px top -40px;
background-repeat: no-repeat;
margin: 0;
}
.nav-item:hover,
.nav-item.active {
color: white;
}
/* LeftMiddleRightBox.css */
.lmr-container {
display: flex;
width: 100%;
/* 可根据需要调整 */
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
background: '#555555';
color: 'white';
padding: '4px 12px';
border-radius: '4px';
font-size: '14px';
font-weight: '500';
letter-spacing: '0.5px';
}
/* 公共列样式：平均分配宽度，带有视觉区分 */
.lmr-left,
.lmr-middle,
.lmr-right {
padding: 20px;
transition: all 0.2s ease;
height: 100%;
}
/* 为左右中区域添加微妙的背景色差异，便于区分 */
.lmr-left {
flex: 1;
background-color: '#555555';
color: 'white';
padding: '4px 12px';
border-radius: '4px';
font-size: '14px';
font-weight: '500';
letter-spacing: '0.5px';
margin: auto;
}
.lmr-middle {
flex: 3;
background-color: '#555555';
color: 'white';
padding: '4px 12px';
border-radius: '4px';
font-size: '14px';
font-weight: '500';
letter-spacing: '0.5px';
}
.lmr-right {
flex: 2;
background-color: '#555555';
color: 'white';
padding: '4px 12px';
border-radius: '4px';
font-size: '14px';
font-weight: '500';
letter-spacing: '0.5px';
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
height: 100%;
border-radius: 12px;
padding: 16px;
}
/* 响应式：小屏幕下自动转为垂直排列 */
@media (max-width: 768px) {
.lmr-container {
flex-direction: column;
min-height: auto;
}
.lmr-left,
.lmr-middle,
.lmr-right {
border-right: none;
}
.lmr-right {
border-bottom: none;
}
.content-placeholder {
min-height: 100px;
}
}
.css-var-_r_1_.ant-collapse{
--ant-collapse-header-bg:#1e1e1e;
width: 90%;
border: 0;
margin-left: auto;
margin-right: auto;
}
.ant-collapse-body{
background: #1e1e1e;
}