Skip to content

Commit 8a492de

Browse files
RubberTaleRubberTale
committed
Optimize mobile UI: narrower container (414px) and compact layout
1 parent 39752db commit 8a492de

9 files changed

Lines changed: 42 additions & 21 deletions

File tree

‎commodity-crisis/dist/assets/index-BYuHQLiA.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

commodity-crisis/dist/assets/index-DearV-V2.js renamed to commodity-crisis/dist/assets/index-D85Bl0g4.js

File renamed without changes.

‎commodity-crisis/dist/assets/index-DjERrtCa.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎commodity-crisis/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</script>
1717
<!-- Busuanzi -->
1818
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
19-
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-DearV-V2.js"></script>
20-
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-DjERrtCa.css">
19+
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-D85Bl0g4.js"></script>
20+
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-BYuHQLiA.css">
2121
</head>
2222
<body>
2323
<div id="root"></div>

‎commodity-crisis/src/index.css‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,47 +57,57 @@ body {
5757
grid-template-columns: 1fr;
5858
height: auto;
5959
overflow-y: auto;
60-
padding: 5px;
61-
gap: 10px;
60+
padding: 8px;
61+
gap: 8px;
6262
}
6363
.app-container:not(.force-desktop) .header {
6464
flex-direction: column;
6565
align-items: flex-start;
66-
gap: 10px;
67-
padding: 10px 15px;
66+
gap: 8px;
67+
padding: 10px 12px;
6868
grid-column: 1;
6969
}
70+
.app-container:not(.force-desktop) .header h1 { font-size: 20px !important; }
7071
.app-container:not(.force-desktop) .header div[style*="gap: 30px"] {
71-
gap: 15px !important;
72-
font-size: 14px !important;
72+
gap: 10px !important;
73+
font-size: 13px !important;
7374
width: 100%;
7475
justify-content: space-between;
7576
}
76-
.app-container:not(.force-desktop) .chart-container { min-height: 300px; }
77+
.app-container:not(.force-desktop) .card { padding: 12px; }
78+
.app-container:not(.force-desktop) .chart-container { min-height: 260px; }
7779
.app-container:not(.force-desktop) .asset-selector {
7880
overflow-x: auto;
7981
padding-bottom: 5px;
8082
display: flex;
8183
white-space: nowrap;
8284
scrollbar-width: none;
85+
gap: 6px;
8386
}
84-
.app-container:not(.force-desktop) .asset-tab { flex-shrink: 0; padding: 6px 12px; font-size: 13px; }
85-
.app-container:not(.force-desktop) .news-panel { height: 150px; }
86-
.app-container:not(.force-desktop) .sidebar { order: -1; }
87+
.app-container:not(.force-desktop) .asset-tab { flex-shrink: 0; padding: 5px 10px; font-size: 12px; }
88+
.app-container:not(.force-desktop) .news-panel { height: 140px; }
89+
.app-container:not(.force-desktop) .sidebar { order: -1; gap: 10px; }
8790
}
8891

8992
/* 强制手机版样式 (即便在宽屏下) */
9093
.app-container.force-mobile {
9194
grid-template-columns: 1fr;
92-
max-width: 500px; /* 宽屏下显示为手机宽度的容器 */
95+
max-width: 414px; /* 进一步收窄至主流手机宽度 */
9396
margin: 0 auto;
9497
height: auto;
9598
overflow-y: auto;
96-
}
97-
.app-container.force-mobile .header { flex-direction: column; align-items: flex-start; grid-column: 1; }
98-
.app-container.force-mobile .header div[style*="gap: 30px"] { width: 100%; justify-content: space-between; gap: 15px !important; font-size: 14px !important; }
99-
.app-container.force-mobile .sidebar { order: -1; }
100-
.app-container.force-mobile .asset-selector { overflow-x: auto; display: flex; white-space: nowrap; }
99+
padding: 8px;
100+
gap: 8px;
101+
border-left: 1px solid #333;
102+
border-right: 1px solid #333;
103+
}
104+
.app-container.force-mobile .header { flex-direction: column; align-items: flex-start; grid-column: 1; padding: 10px 12px; }
105+
.app-container.force-mobile .header h1 { font-size: 20px !important; }
106+
.app-container.force-mobile .header div[style*="gap: 30px"] { width: 100%; justify-content: space-between; gap: 10px !important; font-size: 13px !important; }
107+
.app-container.force-mobile .card { padding: 12px; }
108+
.app-container.force-mobile .sidebar { order: -1; gap: 10px; }
109+
.app-container.force-mobile .asset-selector { overflow-x: auto; display: flex; white-space: nowrap; gap: 6px; }
110+
.app-container.force-mobile .asset-tab { flex-shrink: 0; padding: 5px 10px; font-size: 12px; }
101111

102112
/* 强制电脑版样式 (即便在窄屏下，用户需横向滚动查看) */
103113
.app-container.force-desktop {

‎source/games/commodity-crisis/assets/index-BYuHQLiA.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/games/commodity-crisis/assets/index-D85Bl0g4.js‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/games/commodity-crisis/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</script>
1717
<!-- Busuanzi -->
1818
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
19-
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-DearV-V2.js"></script>
20-
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-DjERrtCa.css">
19+
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-D85Bl0g4.js"></script>
20+
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-BYuHQLiA.css">
2121
</head>
2222
<body>
2323
<div id="root"></div>

‎博客修改.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
commodity-crisis游戏中的手机版，宽度太大了，不能适配手机。（需要滚动条往右拉）有没有办法自适应，让它能够自动适应不同的手机宽度？

0 commit comments

Comments
 (0)