diff --git a/src/routers/layout/search/pc/pc.module.less b/src/routers/layout/search/pc/pc.module.less new file mode 100644 index 0000000..2765acc --- /dev/null +++ b/src/routers/layout/search/pc/pc.module.less @@ -0,0 +1,63 @@ +.advanceSearch { + display: flex; + flex-grow: 1; + + &.focus { + .itemPadding { + padding: 12px 32px; + } + + span+input { + width: 100%; + } + + .SearchItem:hover { + background-color: rgb(229, 231, 235); + } + } + + &.blur { + transition: all 300ms ease; + + .item { + align-items: center; + justify-content: center; + + span+input { + height: 0%; + width: 0%; + } + } + } + + .itemPadding { + transition: all 300ms ease; + } + + .item { + display: flex; + flex-direction: column; + + span { + padding-bottom: 2px; + font-size: 12px; + font-weight: 800; + } + + span+input { + transition: all 300ms ease; + background-color: transparent; + + &:focus-within { + outline: none; + } + } + } + + .SearchItem { + flex-grow: 1; + display: flex; + border-radius: 40px; + // transition: all 300ms ease; + } +} \ No newline at end of file diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx index e11f89e..59bc37a 100644 --- a/src/routers/layout/search/pc/search.tsx +++ b/src/routers/layout/search/pc/search.tsx @@ -2,8 +2,10 @@ import { useSearchFocus } from "@components/proview/searchFocus"; import { useURLParams } from "@utils/hooks/url"; import SearchIcon from "@mui/icons-material/Search"; import styles from "../search.module.less"; +import pcStyles from "./pc.module.less"; import { useSearchMode } from "./hooks"; import { useNavigate } from "react-router-dom"; +import { FC, forwardRef } from "react"; export default function Search() { const [tag] = useURLParams(["tag"]); const searchId = `pcSearch`; @@ -19,39 +21,96 @@ export default function Search() { }; return ( <> + {/* 包裹层 */}
+ {/* 搜索栏内容层 */}
- { - if (event.key === "Enter") { - handlerSubmit(); - } - }} - /> - + {searchMode === "搜索tag" && ( + <> + { + if (event.key === "Enter") { + handlerSubmit(); + } + }} + /> + + + )} + {searchMode === "搜索更多" && }
); } +//通用按钮 +const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => ( + +); + +const AdvanceSearch = forwardRef(function Advance(props, ref) { + const [tag, name] = useURLParams(["tag", "name"]); + const { focused, bind } = useSearchFocus(), + { onBlur } = bind; + const navigate = useNavigate(), + handlerSubmit = () => { + // const value = (document.getElementById(searchId) as HTMLInputElement) + // .value; + // navigate(`/search?tag=${value}`); + onBlur(); + }; + // tag.露早~name.L姓飞行玩家 + return ( +
+
+ 作者 + +
+ + {/* 等待接口更新 */} + {/*
+ 标题 + +
+ */} +
+
+ tag + +
+ {}} /> +
+
+ ); +}); diff --git a/src/routers/layout/search/search.module.less b/src/routers/layout/search/search.module.less index de25901..02cb76a 100644 --- a/src/routers/layout/search/search.module.less +++ b/src/routers/layout/search/search.module.less @@ -2,7 +2,6 @@ box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%); border-radius: 40px; border: 1px solid #DDD; - padding: 7px; display: flex; background-color: white; max-width: 100%; @@ -17,6 +16,7 @@ height: 65px; } + .search-button { border-radius: 40px; cursor: pointer;