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 ( <> + {/* 包裹层 */}