改-首页样式模块调整

components/NavHeader/index.module.scss

 .navHeader {
   width: 100%;
-  height: 68px;
+  height: 48px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 2px 10px 0px rgba(232,232,232,0.5);
 }
 
-.nav{
+.nav {
   width: 1200px;
   display: flex;
   align-items: center;
 }
 
 .logo {
-  width: 148px;
-  height: 68px;
+  width: 113px;
+  height: 35px;
   background-image: url(./assets/logo.png);
   background-size: 100% 100%;
 }
@@ -24,11 +23,9 @@
 .tabs {
   height: 100%;
   margin-right: 58px;
-
   :global .ant-tabs-nav {
     height: 100%;
     margin-bottom: 0;
-
     &::before {
       border: 0;
     }
@@ -40,16 +37,12 @@
     }
 
     .ant-tabs-tab-btn {
-      font-size: 16px;
-      color: #000;
+      font-size: 14px;
+      color: #424242;
       width: 90px;
       text-align: center;
       font-family: MicrosoftYaHei;
-    }
-  }
-
-  :global .ant-tabs-tab-active {
-    .ant-tabs-tab-btn {
+      font-weight: bold;
     }
   }
 
@@ -64,7 +57,7 @@
 
 .btn1 {
   width: 120px;
-  height: 40px;
+  height: 35px;
   border-radius: 0px;
   font-size: 16px;
   font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
@@ -75,7 +68,7 @@
 .btn2 {
   box-sizing: border-box;
   width: 120px;
-  height: 40px;
+  height: 35px;
   border-radius: 0px;
   border: 1px solid rgba(255, 85, 45, 1);
   font-size: 16px;

components/NavHeader/index.tsx

@@ -72,7 +72,7 @@ export default function NavHeader() {
           <Button type="primary" className={styles.btn1}>
             + 发布需求
           </Button>
-          <Button className={styles.btn2}>入驻加盟</Button>
+          <Button className={styles.btn2}>加盟入驻</Button>
         </Space>
         {user ? (
           <div className={styles.haedImg}>

components/footer/index.module.scss

 .footer {
-  height: 200px;
-  background: linear-gradient(360deg, #001c49 0%, #021741 100%);
-  box-shadow: 0px 2px 12px 0px rgba(146, 146, 146, 0.5);
+  height: 110px;
+  background: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+.footerBox {
+  width: 1200px;
+  display: flex;
+  justify-content: space-evenly;
+}
 
 .logo {
-  width: 125px;
-  height: 89px;
-  background: url('./assets/logo.png') no-repeat;
+  width: 150px;
+  height: 47px;
+  background: url("./assets/logo.png") no-repeat;
   background-size: 100% 100%;
-  margin-right: 104px;
+  margin-right: 155px;
 }
 
 .qrcodeList {
+  flex: 1;
   display: flex;
-  margin-right: 101px;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 47px;
   .qrcodeItem {
-    margin-right: 87px;
+    margin-right: 206px;
     &:nth-last-child(1) {
       margin-right: 0;
     }
 
     .qrcodeImg {
-      width: 100px;
-      height: 100px;
+      width: 60px;
+      height: 60px;
       border-radius: 8px;
       overflow: hidden;
       background-color: #fff;
     }
 
     .qrcodeTitle {
-      margin-top: 12px;
+      margin-top: 4px;
       font-size: 12px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-      font-weight: bold;
-      color: #ffffff;
+      font-weight: 100;
+      color: #959595;
       text-align: center;
     }
   }

components/footer/index.tsx

-import styles from './index.module.scss';
-import Image from 'next/image';
+import styles from "./index.module.scss";
+import Image from "next/image";
 
 const qrcodeList = [
   {
     img: require("./assets/mmc.png"),
-    title: '科比特官网',
-    url:"http://www.mmcuav.cn/"
+    title: "科比特官网",
+    url: "http://www.mmcuav.cn/",
   },
   {
     img: require("./assets/fuwuhao.png"),
-    title: '云享飞服务号',
+    title: "云享飞服务号",
   },
   {
     img: require("./assets/xiaochengxu.png"),
-    title: '云享飞小程序',
+    title: "云享飞小程序",
   },
   {
     img: require("./assets/shequn.png"),
-    title: '官方社群',
+    title: "官方社群",
   },
 ];
 
 export default function Footer() {
   return (
     <div className={styles.footer}>
+      <div className={styles.footerBox}>
         <div className={styles.logo}></div>
         <div className={styles.qrcodeList}>
-        {
-          qrcodeList.map((item, i) => {
+          {qrcodeList.map((item, i) => {
             return (
               <div className={styles.qrcodeItem} key={i}>
-                <Image style={{cursor:item.title === "科比特官网" ? "pointer" : ''}} onClick={()=>{if(item.title === "科比特官网") window.location.href = item.url!}} alt="" className={styles.qrcodeImg} src={item.img}></Image>
+                <Image
+                  style={{
+                    cursor: item.title === "科比特官网" ? "pointer" : "",
+                  }}
+                  onClick={() => {
+                    if (item.title === "科比特官网")
+                      window.location.href = item.url!;
+                  }}
+                  alt=""
+                  className={styles.qrcodeImg}
+                  src={item.img}
+                ></Image>
                 <div className={styles.qrcodeTitle}>{item.title}</div>
               </div>
             );
-          })
-        }
-        
+          })}
         </div>
-      <div className={styles.rightText}>
+      </div>
+      {/* <div className={styles.rightText}>
         <div className={styles.number}>100W</div>
         <div className={styles.text}>无人机新媒体矩阵等你来关注</div>
-      </div>
+      </div> */}
     </div>
   );
 }

components/layout/index.tsx

@@ -40,7 +40,12 @@ type Props = {
 export default function LayoutView(props: Props) {
   return (
     <Space direction="vertical" style={{ width: "100%" }} size={[0, 48]}>
-      <Layout style={Object.assign({ minHeight: "100vh" }, props.layoutStyle)}>
+      <Layout
+        style={Object.assign(
+          { minHeight: "100vh", backgroundColor: "#F8F8F8" },
+          props.layoutStyle
+        )}
+      >
         <Header style={headerStyle}>
           <NavHeader />
         </Header>

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

@@ -3,7 +3,7 @@ import { Box } from "./styled";
 import api from "./api";
 export default function MapComponent() {
   const [mapItem, setMapItem] = useState(0);
-  let map: any;
+  const [Map, setMap] = useState<any>(null!);
   const init = async () => {
     try {
       const AMapLoader = await import(
@@ -15,13 +15,16 @@ export default function MapComponent() {
         plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       })
         .then(async (AMap) => {
-          map = new AMap.Map("container", {
+          const Map = new AMap.Map("container", {
             // 设置地图容器id
             viewMode: "3D", // 是否为3D地图模式
             zoom: 9, // 初始化地图级别
             center: [113.93029, 22.53291], // 初始化地图中心点位置
           });
-          // await mapEntiy(0, AMap);
+          console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
+
+          setMap(Map);
+          await mapEntiy(0, AMap);
         })
         .catch((e) => {
           console.log(e);
@@ -40,7 +43,7 @@ export default function MapComponent() {
   const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
     if (!AMap) return;
     const marker = new AMap.Marker({
-      map: map,
+      map: Map,
       position: [lan, lon],
       title: dizhi,
     });
@@ -122,6 +125,7 @@ export default function MapComponent() {
     //     lon: 22.573664,
     //   })
     //   .then((res) => {});
+    setMapItem(index);
     const res = await api.listPositioningInfo({
       lat: 113.944825,
       lon: 22.573664,
@@ -136,15 +140,13 @@ export default function MapComponent() {
         const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
         markerList.push(EntiyValue);
       });
-      map?.add(markerList);
+      Map?.add(markerList);
     }
-    console.log(map, "地图实例++++++++++++++++++++++++++++++");
+    console.log(Map, "地图实例++++++++++++++++++++++++++++++");
 
-    if (index) {
-      map?.panTo([list![index].jd, list![index].wd]);
+    if (index && list?.length) {
+      Map?.panTo([list![index].jd, list![index].wd]);
     }
-
-    setMapItem(index);
   };
 
   return (
@@ -152,25 +154,25 @@ export default function MapComponent() {
       <div id="container" className="map"></div>
       <div className="map-dosome">
         <div
-          className={mapItem === 0 ? "active" : ""}
+          className={`itemBox ${mapItem === 0 ? "active" : ""}`}
           onClick={() => mapEntiy(0)}
         >
           服务网点
         </div>
         <div
-          className={mapItem === 1 ? "active" : ""}
+          className={`itemBox ${mapItem === 1 ? "active" : ""}`}
           onClick={() => mapEntiy(1)}
         >
           租赁网点
         </div>
         <div
-          className={mapItem === 2 ? "active" : ""}
+          className={`itemBox ${mapItem === 2 ? "active" : ""}`}
           onClick={() => mapEntiy(2)}
         >
           培训网点
         </div>
         <div
-          className={mapItem === 3 ? "active" : ""}
+          className={`${mapItem === 3 ? "active" : ""}`}
           onClick={() => mapEntiy(3)}
         >
           更多网点

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

@@ -7,13 +7,13 @@ export default function Style() {
 export const Box = styled.div`
   box-sizing: border-box;
   width: 384px;
-  height: 337px;
+  height: 266px;
   #container {
     position: relative;
     padding: 0px;
     margin: 0px;
     width: 384px;
-    height: 285px;
+    height: 220px;
   }
 
   .amap-logo {
@@ -32,12 +32,18 @@ export const Box = styled.div`
     align-items: center;
     justify-content: space-around;
     width: 384px;
-    height: 52px;
+    height: 46px;
     background: #ffffff;
     border-radius: 0px 0px 6px 6px;
     cursor: pointer;
-    .active{
-      color:#FF552D;
+    .itemBox {
+      height: 22px;
+      line-height: 22px;
+      padding-right: 22px;
+      border-right: 1px solid #b2b2b2;
+    }
+    .active {
+      color: #ff552d;
     }
   }
 `;

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

-import React from 'react';
-import { Carousel } from 'antd';
-import { Box } from "./styled"
-import Image from 'next/image';
+import React from "react";
+import { Carousel } from "antd";
+import { Box } from "./styled";
+import Image from "next/image";
 
 export default function RotationChart() {
-  const list = ["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png"]
+  const list = [
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png",
+  ];
   return (
     <Box>
-       <Carousel className='rotationChart' autoplay dots={{className:"botsBotton"}}>
-        {
-          list.map(item=>(<div key={item}>
+      <Carousel
+        className="rotationChart"
+        autoplay
+        dots={{ className: "botsBotton" }}
+      >
+        {list.map((item) => (
+          <div key={item}>
             <h3 className="contentStyle">
-            <Image src={item} alt="error" width={790} height={200}/> 
+              <Image src={item} alt="error" width={806} height={200} />
             </h3>
-          </div>))
-        }
+          </div>
+        ))}
       </Carousel>
     </Box>
-  )
+  );
 }

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

@@ -6,11 +6,14 @@ export default function Style() {
 
 export const Box = styled.div`
   box-sizing: border-box;
-  margin: 0 0 30px 0;
+  margin: 0 0 10px 0;
   display: flex;
   .rotationChart {
-    width: 790px;
+    width: 806px;
     margin-right: 24px;
+    .slick-list {
+      border-radius: 6px;
+    }
   }
   .botsBotton {
     position: absolute;
@@ -20,8 +23,8 @@ export const Box = styled.div`
       justify-content: center;
       align-items: center;
       &:not(.slick-active) > button {
-        width: 10px;
-        height: 10px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
       }
       & > button {
@@ -31,10 +34,10 @@ export const Box = styled.div`
     }
   }
   .contentStyle {
-    width: 790px;
-    height: 200px;
+    width: 806px;
+    height: 100px;
     color: #fff;
-    line-height: 200px;
+    line-height: 100px;
     text-align: center;
     background: #364d79;
   }

pages/home/waterfallFlowBody/index.tsx

@@ -91,22 +91,22 @@ export default function WaterfallFlowBody() {
       router: "/equipmentLeasing",
     },
     {
-      title: "无人机服务",
-      router: "/jobServices",
-    },
-    {
       title: "无人机销售",
       router: "/mall",
     },
     {
-      title: "无人机保险",
-      router: "",
+      title: "无人机服务",
+      router: "/jobServices",
     },
     {
       title: "无人机培训",
       router: "flyingHandService",
     },
     {
+      title: "无人机保险",
+      router: "",
+    },
+    {
       title: "无人机工具软件",
       router: "",
     },
@@ -121,9 +121,6 @@ export default function WaterfallFlowBody() {
   const { deviceCategory, deviceBrand, deviceModel } = equipmentLeasingApi;
   const eqApiTypeList = ["categoryId", "brandId", "modelId"];
 
-  const { listAllIndustry, listAllAppType } = jobServicesApi;
-  const jobApiTypeList = ["industryId", "appTypeId"];
-
   const { listAllCategory, listAllParts, listAllQuality } = mallApi;
   const mallApiTypeList = [
     "brandId",
@@ -132,32 +129,34 @@ export default function WaterfallFlowBody() {
     "modelId",
     "qualityId",
   ];
+  const { listAllIndustry, listAllAppType } = jobServicesApi;
+  const jobApiTypeList = ["industryId", "appTypeId"];
 
   const { IndustryFlightSkills } = flightSkillsApi;
   const flightApiTypeList = ["licenseId", "flightSkillsId"];
 
   useEffect(() => {
     (async () => {
-      listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 }).then((res) => {
-        setRightTopDomList(rightDom(res.result?.list!));
-      });
-      listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 10 }).then((res) => {
-        setRightBottomDomList(rightDom2(res.result?.list!));
-      });
+      // listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 }).then((res) => {
+      //   setRightTopDomList(rightDom(res.result?.list!));
+      // });
+      // listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 6 }).then((res) => {
+      //   setRightBottomDomList(rightDom2(res.result?.list!));
+      // });
 
       let res1 = await Promise.all([
         deviceCategory(),
         deviceBrand(),
         deviceModel(),
       ]);
-      let res2 = await Promise.all([listAllIndustry(), listAllAppType()]);
-      let res3 = await Promise.all([
+      let res2 = await Promise.all([
         listAllCategory(),
         listAllParts(),
         listAllQuality(),
       ]);
+      let res3 = await Promise.all([listAllIndustry(), listAllAppType()]);
+      let res4 = await Promise.all([IndustryFlightSkills()]);
       //  let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
-      let res5 = await Promise.all([IndustryFlightSkills()]);
       //  let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
 
       const resValuelist1 = res1
@@ -184,7 +183,7 @@ export default function WaterfallFlowBody() {
           });
         })
         .flat();
-      const resValuelist5 = res5
+      const resValuelist4 = res4
         .map((item, index) => {
           return item.result?.map((it) => {
             it.type = flightApiTypeList[index];
@@ -193,17 +192,17 @@ export default function WaterfallFlowBody() {
         })
         .flat();
 
-      let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 });
+      let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 });
       let res8 = await listNewsApi.listNewTenderInfo({
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 6,
       });
       const listValue: any = [
         resValuelist1,
         resValuelist2,
         resValuelist3,
+        resValuelist4.flat(),
         [],
-        resValuelist5.flat(),
         [],
       ];
 
@@ -219,11 +218,17 @@ export default function WaterfallFlowBody() {
     })();
   }, []);
 
-  const routerPath = (item: AllType, index: number) => {
+  const routerPath = (index: number, item?: AllType) => {
+    if (item) {
       router.push({
         pathname: columns[index].router,
         query: { [item?.type!]: item?.id! },
       });
+    } else {
+      router.push({
+        pathname: columns[index].router,
+      });
+    }
   };
 
   const leftDom = (
@@ -235,14 +240,15 @@ export default function WaterfallFlowBody() {
       <div key={item.title} className="item">
         <div className="item-title">
           <div className="item-left">
-            <div className="item-left-icon">
+            {/* <div className="item-left-icon">
               <Image src={icon[index]} alt="#" />
-            </div>
+            </div> */}
             <div className="item-left-label">{item.title}</div>
           </div>
           <div>
             <Select
-              placeholder="更多"
+              className="select-box"
+              placeholder="筛选"
               onChange={onMoreChange}
               bordered={false}
               dropdownMatchSelectWidth={false}
@@ -252,8 +258,8 @@ export default function WaterfallFlowBody() {
           </div>
         </div>
         <div className="item-body">
-          <Space size={[10, 8]} wrap>
-            {index === 3
+          <Space size={[15, 0]} wrap>
+            {index === 4
               ? list.map((item) => (
                   <div key={item} className="item-bubble">
                     {item}
@@ -270,13 +276,16 @@ export default function WaterfallFlowBody() {
                     <div
                       key={item?.name || item?.appName || item?.skillsName}
                       className="item-bubble"
-                      onClick={() => routerPath(item, index)}
+                      onClick={() => routerPath(index, item)}
                     >
                       {item?.name || item?.appName || item?.skillsName}
                     </div>
                   );
                 })}
           </Space>
+          <div className="item-bottom" onClick={() => routerPath(index)}>
+            全部
+          </div>
         </div>
       </div>
     );
@@ -295,24 +304,18 @@ export default function WaterfallFlowBody() {
           </div>
         </div>
         <div className="body">
-          {list?.map((item) => (
+          {list?.map((item, index) => (
             <div key={item.id} className="body-item">
+              <div
+                className={`item-ranking ${index === 0 ? "one" : ""} ${
+                  index === 1 ? "two" : ""
+                } ${index === 2 ? "san" : ""}`}
+              >
+                {index + 1}
+              </div>
               <div className="item-label" title={item.newsTitle}>
                 {item.newsTitle}
               </div>
-              <div className="item-image">
-                <Image
-                  className="item-image"
-                  src={
-                    item.surfaceImg
-                      ? item.surfaceImg
-                      : require("./assets/xw.jpg")
-                  }
-                  alt="#"
-                  width={40}
-                  height={40}
-                />
-              </div>
             </div>
           ))}
         </div>
@@ -335,16 +338,19 @@ export default function WaterfallFlowBody() {
         <div className="body">
           {list?.map((item) => (
             <div key={item.id} className="body-item">
-              <div className="item-label">
-                <div className="label-top" title={item.tenderContent}>
+              <div className="item-label" title={item.tenderContent}>
                 {item.tenderContent}
-                </div>
                 <div className="label-bottom">{item.tenderPrice}</div>
               </div>
               <div className="item-right">
-                <Button className="btn" size="small" type="primary">
-                  申请合作
-                </Button>
+                <Image
+                  src={require("./assets/button.png")}
+                  alt="#"
+                  width={103}
+                  height={22}
+                />
+                <div className="left">{item.tenderPrice}W</div>
+                <div className="right">申请合作</div>
               </div>
             </div>
           ))}
@@ -357,6 +363,10 @@ export default function WaterfallFlowBody() {
     <Box>
       <ContentBox
         boxIndex={2}
+        leftcontentstyle={{
+          width: "806px",
+          margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
+        }}
         leftRenderDom={{
           columns: [
             { noFor: true, element: <RotationChart key={45645645} /> },

pages/home/waterfallFlowBody/styled.tsx

 import styled from "styled-components";
-
+import button from "./assets/button.png";
 export default function Style() {
   return <></>;
 }
@@ -10,14 +10,14 @@ export const Box = styled.div`
   width: 1200px;
   margin: 0 auto;
   .item {
-    height: 343px;
     transition: all 0.5s;
+    border-radius: 6px;
     &-title {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0 25px;
-      height: 75px;
+      padding: 0 20px;
+      height: 46px;
       background: #ffffff;
       box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
       border-radius: 6px 6px 0px 0px;
@@ -31,47 +31,56 @@ export const Box = styled.div`
         }
         &-label {
           height: 32px;
-          font-size: 20px;
+          font-size: 16px;
           font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
           font-weight: bold;
           color: #000000;
           line-height: 32px;
         }
       }
+      .select-box {
+      }
     }
     &-body {
-      padding-left: 10px;
-      height: 268px;
+      padding: 0 20px 10px 20px;
       background: #ffffff;
-      box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
       border-radius: 0px 0px 6px 6px;
       .item-bubble {
-        /* width: 80px; */
-        padding: 0 5px;
         height: 32px;
         line-height: 32px;
-        background: #f4f6f9;
-        border-radius: 19px;
+        font-size: 14px;
         text-align: center;
+        color: #4a4a4a;
         cursor: pointer;
+        font-family: MicrosoftYaHei;
         &.active {
           color: #ff552d;
         }
       }
+      .item-bottom {
+        width: 371px;
+        height: 30px;
+        line-height: 30px;
+        background: #f5f5f5;
+        border-radius: 2px;
+        text-align: center;
+        font-size: 13px;
+        font-family: MicrosoftYaHei;
+        color: #4a4a4a;
+        cursor: pointer;
+        margin: 5px auto 0 auto;
       }
-    &:hover {
-      box-shadow: 20px 20px 10px 0px rgba(228, 228, 228, 1);
     }
   }
   .right-item {
-    height: 344px;
-    background-color: #fff;
+    background: url("./assets/xwbg.png") no-repeat #fff;
+    border-radius: 6px;
     .title {
       display: flex;
       align-items: center;
       padding: 0 25px;
       height: 60px;
-      font-size: 20px;
+      font-size: 16px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
       font-weight: bold;
       color: #000000;
@@ -83,7 +92,7 @@ export const Box = styled.div`
         font-weight: 400;
       }
     }
-    .body {
+    /* .body {
       height: 284px;
       overflow-y: hidden;
       &-item {
@@ -113,17 +122,50 @@ export const Box = styled.div`
           border-radius: 6px;
         }
       }
+    } */
+    .body {
+      border-radius: 0 0 6px 6px;
+      .body-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 23px 0 19px;
+        height: 32px;
+        .item-ranking {
+          color: #9295a3;
+          &.one {
+            color: #ff2c46;
+          }
+          &.two {
+            color: #ff6602;
+          }
+          &.san {
+            color: #faa910;
+          }
+        }
+        .item-label {
+          width: 325px;
+          height: 20px;
+          line-height: 19px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #323232;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
     }
   }
   .right-item-second {
-    height: 510px;
+    border-radius: 6px;
     background-color: #fff;
     .title {
       display: flex;
       align-items: center;
       padding: 0 25px;
       height: 62px;
-      font-size: 20px;
+      font-size: 16px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
       font-weight: bold;
       color: #000000;
@@ -135,8 +177,7 @@ export const Box = styled.div`
         font-weight: 400;
       }
     }
-    .body {
-      height: 448px;
+    /* .body {
       overflow-y: hidden;
       &-item {
         display: flex;
@@ -179,6 +220,57 @@ export const Box = styled.div`
           }
         }
       }
+    } */
+    .body {
+      .body-item {
+        display: flex;
+        justify-content: space-between;
+        width: 384px;
+        height: 32px;
+        padding: 0 20px 0 20px;
+        .item-label {
+          width: 239px;
+          height: 20px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #323232;
+          line-height: 19px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .item-right {
+          width: 103px;
+          height: 22px;
+          background: url(${button as unknown as string}) no-repeat;
+          position: relative;
+          .left {
+            width: 35px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 11px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ff4500;
+            position: absolute;
+            text-align: center;
+            left: 4px;
+            top: 0;
+          }
+          .right {
+            width: 48px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 11px;
+            font-family: MicrosoftYaHei;
+            color: #ffffff;
+            position: absolute;
+            text-align: center;
+            right: 3px;
+            top: 0;
+          }
+        }
+      }
     }
   }
 `;

styles/index.scss

-@import './reset.scss';
+@import "./reset.scss";
 
 body {
   background-color: rgba(239, 241, 244, 1);
@@ -20,11 +20,10 @@ body::-webkit-scrollbar {
   background: #ffffff;
   border-radius: 6px;
 
-  *{
+  * {
     font-size: 14px !important;
   }
 
-
   .filter-item {
     padding: 11px 0;
     border-bottom: 1px dashed RGBA(222, 222, 222, 1);