改-首页样式调整

components/NavHeader/index.module.scss

@@ -18,9 +18,11 @@
   height: 35px;
   background-image: url(./assets/logo.png);
   background-size: 100% 100%;
+  margin-right: 40px;
 }
 
 .tabs {
+  width: 800px;
   height: 100%;
   margin-right: 58px;
   :global .ant-tabs-nav {

components/contentBox/right/styled.tsx

-import styled from "styled-components"
+import styled from "styled-components";
 
 export const Box = styled.div`
   box-sizing: border-box;
-    .right-box-item{
-        margin-bottom: 20px;
+  .right-box-item {
+    margin-bottom: 10px;
   }
-`
+`;
\ No newline at end of file

components/footer/index.module.scss

@@ -27,6 +27,7 @@
   height: 47px;
   .qrcodeItem {
     margin-right: 206px;
+    text-align: center;
     &:nth-last-child(1) {
       margin-right: 0;
     }

components/layout/index.tsx

@@ -29,7 +29,7 @@ const footerStyle: React.CSSProperties = {
   lineHeight: "1",
   padding: 0,
   position: "relative",
-  marginTop: 78,
+  marginTop: 60,
 };
 
 type Props = {

pages/home/waterfallFlowBody/components/map/styled.tsx

@@ -40,7 +40,7 @@ export const Box = styled.div`
       height: 22px;
       line-height: 22px;
       padding-right: 22px;
-      border-right: 1px solid #b2b2b2;
+      border-right: 1px solid #e0e0e0;
     }
     .active {
       color: #ff552d;

pages/home/waterfallFlowBody/components/rotationChart/styled.tsx

@@ -10,7 +10,6 @@ export const Box = styled.div`
   display: flex;
   .rotationChart {
     width: 806px;
-    margin-right: 24px;
     .slick-list {
       border-radius: 6px;
     }

pages/home/waterfallFlowBody/index.tsx

@@ -13,6 +13,7 @@ import xiaoshou from "./assets/xiaoshou.png";
 import baoxian from "./assets/baoxian.png";
 import peixun from "./assets/peixun.png";
 import gongju from "./assets/gongju.png";
+import xwbg from "./assets/xwbg.png";
 const icon = [tubiao, fuwu, xiaoshou, baoxian, peixun, gongju];
 import {
   FilterOptionResp,
@@ -260,22 +261,36 @@ export default function WaterfallFlowBody() {
         <div className="item-body">
           <Space size={[15, 0]} wrap>
             {index === 4
-              ? list.map((item) => (
-                  <div key={item} className="item-bubble">
+              ? list.map((item, index) => (
+                  <div
+                    key={item}
+                    className={`item-bubble ${
+                      index === 0 || index === 1 || index === 2 ? "active" : ""
+                    }`}
+                  >
                     {item}
                   </div>
                 ))
               : index === 5
-              ? list2.map((item) => (
-                  <div key={item} className="item-bubble">
+              ? list2.map((item, index) => (
+                  <div
+                    key={item}
+                    className={`item-bubble ${
+                      index === 0 || index === 1 || index === 2 ? "active" : ""
+                    }`}
+                  >
                     {item}
                   </div>
                 ))
-              : resultList[index].map((item) => {
+              : resultList[index].map((item, index) => {
                   return (
                     <div
                       key={item?.name || item?.appName || item?.skillsName}
-                      className="item-bubble"
+                      className={`item-bubble ${
+                        index === 0 || index === 1 || index === 2
+                          ? "active"
+                          : ""
+                      }`}
                       onClick={() => routerPath(index, item)}
                     >
                       {item?.name || item?.appName || item?.skillsName}
@@ -326,6 +341,8 @@ export default function WaterfallFlowBody() {
   const rightDom2 = (list: Array<NewsTenderType>) => {
     return (
       <div key={1008} className="right-box-item right-item-second">
+        <Image src={xwbg} alt="#" width={384} height={249} />
+        <div className="item-box">
           <div className="title">
             招标快讯
             <div
@@ -356,6 +373,7 @@ export default function WaterfallFlowBody() {
             ))}
           </div>
         </div>
+      </div>
     );
   };
 

pages/home/waterfallFlowBody/styled.tsx

@@ -6,7 +6,7 @@ export default function Style() {
 
 export const Box = styled.div`
   box-sizing: border-box;
-  padding-top: 24px;
+  padding-top: 16px;
   width: 1200px;
   margin: 0 auto;
   .item {
@@ -46,6 +46,7 @@ export const Box = styled.div`
       background: #ffffff;
       border-radius: 0px 0px 6px 6px;
       .item-bubble {
+        font-weight: 520;
         height: 32px;
         line-height: 32px;
         font-size: 14px;
@@ -56,6 +57,9 @@ export const Box = styled.div`
         &.active {
           color: #ff552d;
         }
+        &:hover {
+          color: #ff552d;
+        }
       }
       .item-bottom {
         width: 371px;
@@ -78,8 +82,8 @@ export const Box = styled.div`
     .title {
       display: flex;
       align-items: center;
-      padding: 0 25px;
-      height: 60px;
+      padding: 0 20px 0 20px;
+      height: 46px;
       font-size: 16px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
       font-weight: bold;
@@ -90,6 +94,9 @@ export const Box = styled.div`
         cursor: pointer;
         font-size: 16px;
         font-weight: 400;
+        &:hover {
+          color: #ff552d;
+        }
       }
     }
     /* .body {
@@ -160,11 +167,16 @@ export const Box = styled.div`
   .right-item-second {
     border-radius: 6px;
     background-color: #fff;
+    position: relative;
+    .item-box {
+      position: absolute;
+      top: 0;
+    }
     .title {
       display: flex;
       align-items: center;
-      padding: 0 25px;
-      height: 62px;
+      padding: 0 20px 0 20px;
+      height: 48px;
       font-size: 16px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
       font-weight: bold;
@@ -175,6 +187,9 @@ export const Box = styled.div`
         cursor: pointer;
         font-size: 16px;
         font-weight: 400;
+        &:hover {
+          color: #ff552d;
+        }
       }
     }
     /* .body {