PANDA-JSR/SecScore
1
0
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-19 19:04:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复移动端主页筛选栏超宽溢出问题

Browse Source
This commit is contained in:
JSR
2026-03-19 18:03:36 +08:00
parent 393b0d67c9
commit 141d073cc3
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home.tsx
+27 -8
View File
@@ -1740,8 +1740,23 @@ export const Home: React.FC<HomeProps> = ({ canEdit, isPortraitMode = false }) =
</p>
</div>
<Space size="middle" align="start">
<div ref={searchAreaRef} style={{ position: "relative", width: "220px" }}>
<Space
size="middle"
align="start"
wrap={isPortraitMode}
style={{
width: isPortraitMode ? "100%" : undefined,
justifyContent: isPortraitMode ? "flex-start" : undefined,
}}
>
<div
ref={searchAreaRef}
style={{
position: "relative",
width: isPortraitMode ? "100%" : "220px",
minWidth: isPortraitMode ? "100%" : undefined,
}}
>
<Input
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
@@ -1757,16 +1772,20 @@ export const Home: React.FC<HomeProps> = ({ canEdit, isPortraitMode = false }) =
placeholder={t("home.searchPlaceholder")}
prefix={<SearchOutlined />}
allowClear
style={{ width: "220px" }}
style={{ width: "100%" }}
/>
{!disableSearchKeyboard && showPinyinKeyboard && (
<div
style={{
position: "absolute",
top: "calc(100% + 8px)",
left: "50%",
transform: "translateX(-50%)",
width: searchKeyboardLayout === "qwerty26" ? "288px" : "220px",
left: isPortraitMode ? "0" : "50%",
transform: isPortraitMode ? "none" : "translateX(-50%)",
width: isPortraitMode
? `min(calc(100vw - 32px), ${searchKeyboardLayout === "qwerty26" ? "288px" : "220px"})`
: searchKeyboardLayout === "qwerty26"
? "288px"
: "220px",
padding: "8px",
borderRadius: "10px",
border: "1px solid var(--ss-border-color)",
@@ -1823,7 +1842,7 @@ export const Home: React.FC<HomeProps> = ({ canEdit, isPortraitMode = false }) =
<Select
value={sortType}
onChange={(v) => setSortType(v as SortType)}
style={{ width: "140px" }}
style={{ width: isPortraitMode ? "calc(50% - 8px)" : "140px", minWidth: "120px" }}
options={[
{ value: "alphabet", label: t("home.sortBy.alphabet") },
{ value: "surname", label: t("home.sortBy.surname") },
@@ -1833,7 +1852,7 @@ export const Home: React.FC<HomeProps> = ({ canEdit, isPortraitMode = false }) =
<Select
value={layoutType}
onChange={(v) => setLayoutType(v as LayoutType)}
style={{ width: "140px" }}
style={{ width: isPortraitMode ? "calc(50% - 8px)" : "140px", minWidth: "120px" }}
options={[
{ value: "grouped", label: t("home.layoutBy.grouped") },
{ value: "squareGrid", label: t("home.layoutBy.squareGrid") },