update footer color

src/components/common/Footer.tsx

@@ -6,7 +6,7 @@ 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="fixed bottom-0 left-0 right-0  h-14 pt-2 text-center   border-t phone-width  ">
       <div className="flex">
         <div className="w-1/4 grid place-items-center">
           <Link
@@ -17,9 +17,17 @@ const Footer = () => {
           >
             <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" />}
+              {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 ${
+                tabIndex == 1 ? " text-orange-500" : ""
+              }`}
+            >
+              地块
             </div>
-            <div className="h-12 text-bottom text-xs">地块</div>
           </Link>
         </div>
 
@@ -32,10 +40,17 @@ const Footer = () => {
           >
             <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" />}
-
+              {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 ${
+                tabIndex == 2 ? " text-orange-500" : ""
+              }`}
+            >
+              通知
             </div>
-            <div className="h-12   text-bottom text-xs">通知</div>
           </Link>
         </div>
         <div className="w-1/4 grid place-items-center">
@@ -47,10 +62,17 @@ const Footer = () => {
           >
             <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" />}
-
+              {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 ${
+                tabIndex == 3 ? " text-orange-500" : ""
+              }`}
+            >
+              出让
             </div>
-            <div className="h-12  text-bottom text-xs">出让</div>
           </Link>
         </div>
         <div className="w-1/4 grid place-items-center">
@@ -62,10 +84,17 @@ const Footer = () => {
           >
             <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" />}
-
+              {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 ${
+                tabIndex == 4 ? " text-orange-500" : ""
+              }`}
+            >
+              我的
             </div>
-            <div className="h-12 text-bottom text-xs">我的</div>
           </Link>
         </div>
       </div>