footer impl

src/components/common/Footer.tsx

+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import { AppContext } from "../../App";
+
+const Footer = () => {
+  const { tabIndex, setTabIndex } = useContext(AppContext);
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0  h-14 pt-2 text-center text-orange-500  border-t phone-width  ">
+      <div className="flex">
+        <div className="w-1/4 grid place-items-center">
+          <Link
+            to="/"
+            onClick={() => {
+              setTabIndex(1);
+            }}
+          >
+            <div className="h-6  relative rounded-md ">
+              <img src="/icon/map-two.svg" />
+              {tabIndex ==1 && <div className=" absolute top-0  left-0  w-full h-full  bg-orange-500 opacity-50 rounded-lg" />}
+            </div>
+            <div className="h-12 text-bottom text-xs">地块</div>
+          </Link>
+        </div>
+
+        <div className="w-1/4 grid place-items-center">
+          <Link
+            to="/notify"
+            onClick={() => {
+              setTabIndex(2);
+            }}
+          >
+            <div className="h-6  relative rounded-md">
+              <img src="/icon/remind.svg" />
+              {tabIndex ==2 && <div className=" absolute top-0  left-0  w-full h-full  bg-orange-500 opacity-50 rounded-lg" />}
+
+            </div>
+            <div className="h-12   text-bottom text-xs">通知</div>
+          </Link>
+        </div>
+        <div className="w-1/4 grid place-items-center">
+          <Link
+            to="/sale"
+            onClick={() => {
+              setTabIndex(3);
+            }}
+          >
+            <div className="h-6  relative rounded-md">
+              <img src="/icon/gavel.svg" />
+              {tabIndex ==3 &&<div className=" absolute top-0  left-0  w-full h-full  bg-orange-500 opacity-50 rounded-lg" />}
+
+            </div>
+            <div className="h-12  text-bottom text-xs">出让</div>
+          </Link>
+        </div>
+        <div className="w-1/4 grid place-items-center">
+          <Link
+            to="/user"
+            onClick={() => {
+              setTabIndex(4);
+            }}
+          >
+            <div className="h-6  relative rounded-md">
+              <img src="/icon/user.svg" />
+              {tabIndex ==4 &&<div className=" absolute top-0  left-0  w-full h-full  bg-orange-500 opacity-50 rounded-lg" />}
+
+            </div>
+            <div className="h-12 text-bottom text-xs">我的</div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Footer;