合并代码

e1c94534 · 18928357778 · 835604bb · b4a76471 · 835604bb · e1c94534
--- a/components/NavHeader/assets/logo.png
+++ b/components/NavHeader/assets/logo.png
--- a/components/NavHeader/index.module.scss
+++ b/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;
+  width: 113px;
-  height: 68px;
+  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 {
    height: 100%;
    margin-bottom: 0;
    &::before {
      border: 0;
    }
@@ -40,16 +39,12 @@
    }
    .ant-tabs-tab-btn {
-      font-size: 16px;
+      font-size: 14px;
-      color: #000;
+      color: #424242;
      width: 90px;
      text-align: center;
      font-family: MicrosoftYaHei;
-    }
+      font-weight: bold;
-  }
-  :global .ant-tabs-tab-active {
-    .ant-tabs-tab-btn {
    }
  }
@@ -64,7 +59,7 @@
 .btn1 {
  width: 120px;
-  height: 40px;
+  height: 35px;
  border-radius: 0px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
@@ -75,7 +70,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;

--- a/components/NavHeader/index.tsx
+++ b/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}>

--- a/components/contentBox/index.tsx
+++ b/components/contentBox/index.tsx
-import React from 'react';
+import React from "react";
-import { Box } from './styled';
+import { Box } from "./styled";
-import Left from './left';
+import Left from "./left";
-import Right from './right';
+import Right from "./right";
-import {BoxProps} from './interface';
+import { BoxProps } from "./interface";
-export default function ContentBox(props:BoxProps) {
+export default function ContentBox(props: BoxProps) {
-    console.log(props);
  return (
    <Box>
-        <Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftcontentstyle={props.leftcontentstyle}/> 
+      <Left
-        <Right rightRenderDom={props.rightRenderDom}/>
+        boxIndex={props.boxIndex}
+        leftRenderDom={props.leftRenderDom}
+        leftcontentstyle={props.leftcontentstyle}
+        leftWaterfallDom={props.leftWaterfallDom}
+      />
+      <Right rightRenderDom={props.rightRenderDom} />
    </Box>
-  )
+  );
 }
--- a/components/contentBox/interface.ts
+++ b/components/contentBox/interface.ts
 export interface DomType {
-    columns:{noFor?:boolean,element:JSX.Element}[],
+  columns: {
+    noFor?: boolean;
+    element: JSX.Element;
+  }[];
+  pagination?: JSX.Element;
+}
+export interface WaterfallType {
+  columns: {
+    noFor?: boolean;
+    type?: string,
+    element: JSX.Element;
+  }[];
+  pagination?: JSX.Element;
 }
 export interface leftBoxProps {
-    boxIndex: number,
+  boxIndex: number;
-    leftRenderDom: DomType,
+  leftRenderDom?: DomType;
-    leftcontentstyle?:{
+  leftWaterfallDom?: WaterfallType;
-		width?:string,
+  leftcontentstyle?: {
-        margin?:{
+    width?: string;
-			top:number | string,
+    margin?: {
-			right:number | string,
+      top: number | string;
-			bottom:number | string,
+      right: number | string;
-			left:number | string
+      bottom: number | string;
-		}
+      left: number | string;
-	}
+    };
+  };
 }
 export interface rightBoxProps {
-    rightRenderDom: DomType
+  rightRenderDom: DomType;
 }
 export interface BoxProps {
-    boxIndex: number,
+  boxIndex: number;
-    leftRenderDom: DomType,
+  leftRenderDom?: DomType;
-    leftcontentstyle?:{
+  leftWaterfallDom?: WaterfallType;
-		width?:string,
+  leftcontentstyle?: {
-        margin?:{
+    width?: string;
-			top:number | string,
+    margin?: {
-			right:number | string,
+      top: number | string;
-			bottom:number | string,
+      right: number | string;
-			left:number | string
+      bottom: number | string;
-		}
+      left: number | string;
-	},
+    };
-    rightRenderDom: DomType
+  };
-}
\ No newline at end of file
+  rightRenderDom: DomType;
+}
--- a/components/contentBox/left/index.tsx
+++ b/components/contentBox/left/index.tsx
 import React from "react";
 import { Empty } from "antd";
-import { Box } from "./styled";
+import { Box , WaterfallBox } from "./styled";
 import { leftBoxProps } from "../interface";
 export default function Left(props: leftBoxProps) {
-  const { boxIndex, leftRenderDom, leftcontentstyle } = props;
+  const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
  return (
    <div>
-      {leftRenderDom.columns.map((item) => {
+      {leftRenderDom?.columns.map((item) => {
        if (item.noFor) {
          return item.element;
        }
@@ -16,7 +15,7 @@ export default function Left(props: leftBoxProps) {
      })}
      {
        <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
-          {leftRenderDom.columns.map((item) => {
+          {leftRenderDom?.columns.map((item) => {
            if (!item.noFor) {
              return item.element;
            }
@@ -24,7 +23,29 @@ export default function Left(props: leftBoxProps) {
          })}
        </Box>
      }
-      {!leftRenderDom.columns.length ? (
+      {
+        <WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
+        { <div className="left-columns">
+            {leftWaterfallDom?.columns.map((item) => {
+            if (!item.noFor && item.type === "left") {
+                return item.element
+            }
+            return null
+          })}
+        </div>}
+        { <div className="right-columns">
+            {leftWaterfallDom?.columns.map((item) => {
+            if (!item.noFor && item.type === "right") {
+                return item.element
+            }
+            return null
+          })}
+        </div>}
+      </WaterfallBox>
+      }
+      {leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
+      {!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? (
        <Empty description={"暂无数据"} />
      ) : null}
    </div>

--- a/components/contentBox/left/styled.tsx
+++ b/components/contentBox/left/styled.tsx
@@ -33,4 +33,31 @@ export const Box = styled.div<BoxProps>`
 				margin-right: 0;
 			} 
 	}
+`
+export const WaterfallBox = styled.div<BoxProps>`
+	box-sizing: border-box;
+    display: flex;
+	width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
+    .item{
+			// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
+			// 同时设置下边距margin-bottom（每个元素的上下间隙）
+			/* margin: 0 24px 15px 0; */
+			margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`)  : "0 24px 15px 0"};;
+			width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});   
+			// 这里一行显示index个，所以是/index，一行显示几个就除以几 
+			// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
+			min-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
+			max-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
+			// 每行最右侧的那个不设置右外边距
+			&:nth-child(${props => props.index}n + ${props => props.index}) {
+				margin-right: 0;
+			} 
+	}
+	.left-columns{
+	}
+	.right-columns{
+	}
 `
\ No newline at end of file
--- a/components/contentBox/right/styled.tsx
+++ b/components/contentBox/right/styled.tsx
-import styled from "styled-components"
+import styled from "styled-components";
 export const Box = styled.div`
-    box-sizing: border-box;
+  box-sizing: border-box;
-    .right-box-item{
+  .right-box-item {
-        margin-bottom: 20px;
+    margin-bottom: 10px;
-    }
+  }
-`
+`;
\ No newline at end of file
--- a/components/filter/index.tsx
+++ b/components/filter/index.tsx
@@ -96,7 +96,7 @@ export default function Filter(props: Props) {
        <div
          className={styles.filterWrap}
          style={{
-            marginBottom: 18,
+            marginBottom: 10,
          }}
        >
          <RegionItem

--- a/components/footer/assets/fuwuhao.png
+++ b/components/footer/assets/fuwuhao.png
--- a/components/footer/assets/logo.png
+++ b/components/footer/assets/logo.png
--- a/components/footer/assets/mmc.png
+++ b/components/footer/assets/mmc.png
--- a/components/footer/assets/shequn.png
+++ b/components/footer/assets/shequn.png
--- a/components/footer/assets/xiaochengxu.png
+++ b/components/footer/assets/xiaochengxu.png
--- a/components/footer/index.module.scss
+++ b/components/footer/index.module.scss
 .footer {
-  height: 200px;
+  height: 110px;
-  background: linear-gradient(360deg, #001c49 0%, #021741 100%);
+  background: #ffffff;
-  box-shadow: 0px 2px 12px 0px rgba(146, 146, 146, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
 }
+.footerBox {
+  width: 1200px;
+  display: flex;
+  justify-content: space-evenly;
+}
 .logo {
-  width: 125px;
+  width: 150px;
-  height: 89px;
+  height: 47px;
-  background: url('./assets/logo.png') no-repeat;
+  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;
+    text-align: center;
    &:nth-last-child(1) {
      margin-right: 0;
    }
    .qrcodeImg {
-      width: 100px;
+      width: 60px;
-      height: 100px;
+      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;
+      font-weight: 100;
-      color: #ffffff;
+      color: #959595;
      text-align: center;
    }
  }

--- a/components/footer/index.tsx
+++ b/components/footer/index.tsx
-import styles from './index.module.scss';
+import styles from "./index.module.scss";
-import Image from 'next/image';
+import Image from "next/image";
 const qrcodeList = [
  {
    img: require("./assets/mmc.png"),
-    title: '科比特官网',
+    title: "科比特官网",
-    url:"http://www.mmcuav.cn/"
+    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.logo}></div>
+      <div className={styles.footerBox}>
-      <div className={styles.qrcodeList}>
+        <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>
-      <div className={styles.rightText}>
+      {/* <div className={styles.rightText}>
        <div className={styles.number}>100W</div>
        <div className={styles.text}>无人机新媒体矩阵等你来关注</div>
-      </div>
+      </div> */}
    </div>
  );
 }
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@@ -29,7 +29,7 @@ const footerStyle: React.CSSProperties = {
  lineHeight: "1",
  padding: 0,
  position: "relative",
-  marginTop: 78,
+  marginTop: 60,
 };
 type Props = {
@@ -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>

--- a/pages/equipmentLeasing/index.page.tsx
+++ b/pages/equipmentLeasing/index.page.tsx
@@ -35,13 +35,12 @@ export default function EquipmentLeasing(props: Props) {
      >
        <div className="item-top">
          <div className="item-top-image">
-            {" "}
            <Image
              src={item.wareImgs[0].imgUrl}
              alt="error"
              width={116}
              height={116}
-            />{" "}
+            />
          </div>
        </div>
        <div className="item-bottom">
@@ -147,19 +146,25 @@ export default function EquipmentLeasing(props: Props) {
              width: "916px",
              margin: { top: 0, right: "12px", bottom: "12px", left: 0 },
            }}
-            leftRenderDom={{ columns: productList }}
+            leftRenderDom={{
+              columns: productList,
+              pagination: (
+                <div className="pagination-page">
+                  <Pagination
+                    current={pageParams.pageNo}
+                    pageSize={pageParams.pageSize}
+                    showSizeChanger={false}
+                    showQuickJumper
+                    total={count}
+                    onChange={onPageChange}
+                    hideOnSinglePage={true}
+                    style={{ marginTop: 20 }}
+                  />
+                </div>
+              ),
+            }}
            rightRenderDom={{ columns: rightProductList }}
          />
-          <Pagination
-            current={pageParams.pageNo}
-            pageSize={pageParams.pageSize}
-            showSizeChanger={false}
-            showQuickJumper
-            total={count}
-            onChange={onPageChange}
-            hideOnSinglePage={true}
-            style={{ marginTop: 20 }}
-          />
        </div>
      </Box>
    </Layout>

--- a/pages/equipmentLeasing/styled.tsx
+++ b/pages/equipmentLeasing/styled.tsx
-import styled from "styled-components"
+import styled from "styled-components";
-export default function Style(){ return <></>}
+export default function Style() {
+  return <></>;
+}
 export const Box = styled.div`
-    box-sizing: border-box;
+  box-sizing: border-box;
-    padding-top: 15px;
+  padding-top: 15px;
-    width: 1200px;
+  width: 1200px;
-    .item{      
+  .item {
-        width: 220px;
+    width: 220px;
-        height: 205px;
+    height: 205px;
-        background: #FFFFFF;
+    background: #ffffff;
-        border-radius: 6px;
+    border-radius: 6px;
-        cursor: pointer;
+    cursor: pointer;
-        transition: all .5s;
+    transition: all 0.5s;
-        &-top{
+    &-top {
-            height: 145px;
+      height: 145px;
-            background: #FFFFFF;
+      background: #ffffff;
-            border-radius: 6px 6px 0px 0px;
+      border-radius: 6px 6px 0px 0px;
-            padding: 19px 52px 10px 52px;
+      padding: 19px 52px 10px 52px;
-            &-image{
+      &-image {
-                width: 116px;
+        width: 116px;
-                height: 116px;
+        height: 116px;
-                background: #EFEFEF;
+        background: #efefef;
-            }
+      }
+    }
+    &-bottom {
+      padding: 10px 13px 14px 18px;
+      &-title {
+        width: 189px;
+        height: 24px;
+        font-size: 14px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #333333;
+        line-height: 24px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        &:hover {
+          color: #ff552d;
        }
-        &-bottom{
+      }
-            padding: 10px 13px 14px 18px;
+      &-price {
-            &-title{
+        .money {
-                width: 189px;
+          width: 50px;
-                height: 24px;
+          height: 26px;
-                font-size: 14px;
+          font-size: 16px;
-                font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+          font-family: Arial-BoldMT, Arial;
-                font-weight: bold;
+          font-weight: normal;
-                color: #333333;
+          color: #ff552d;
-                line-height: 24px;
+          line-height: 22px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-            &-price{
-                .money{
-                    width: 50px;
-                    height: 26px;
-                    font-size: 16px;
-                    font-family: Arial-BoldMT, Arial;
-                    font-weight: normal;
-                    color: #FF552D;
-                    line-height: 22px;
-                }
-                .unit{
-                    width: 58px;
-                    height: 22px;
-                    font-size: 14px;
-                    font-family: MicrosoftYaHei;
-                    color: #FF552D;
-                    line-height: 22px;
-                }
-            }
        }
-        &:hover{
+        .unit {
-            box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
+          width: 58px;
+          height: 22px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #ff552d;
+          line-height: 22px;
        }
+      }
    }
-    .right-item{
+  }
-        width: 270px;
+  .right-item {
-        height: 422px;
+    width: 270px;
-        background: #D8D8D8;
+    height: 422px;
-    }
+    background: #d8d8d8;
-`
+    border-radius: 6px;
\ No newline at end of file
+    overflow: hidden;
+  }
+  .pagination-page {
+    text-align: right;
+  }
+`;
--- a/pages/flyingHandService/index.page.tsx
+++ b/pages/flyingHandService/index.page.tsx
@@ -229,21 +229,27 @@ export default function FlyingHandService() {
          boxIndex={4}
          leftcontentstyle={{
            width: "925px",
-            margin: { top: 0, right: "15px", bottom: "15px", left: 0 },
+            margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
+          }}
+          leftRenderDom={{
+            columns: productList,
+            pagination: (
+              <div className="pagination-page">
+                <Pagination
+                  current={pageParams.pageNo}
+                  pageSize={pageParams.pageSize}
+                  showSizeChanger={false}
+                  showQuickJumper
+                  total={count}
+                  onChange={onPageChange}
+                  hideOnSinglePage={true}
+                  style={{ marginTop: 20 }}
+                />
+              </div>
+            ),
          }}
-          leftRenderDom={{ columns: productList }}
          rightRenderDom={{ columns: rightDomList }}
        />
-        <Pagination
-          current={pageParams.pageNo}
-          pageSize={pageParams.pageSize}
-          showSizeChanger={false}
-          showQuickJumper
-          total={count}
-          onChange={onPageChange}
-          hideOnSinglePage={true}
-          style={{ marginTop: 20 }}
-        />
      </Box>
    </Layout>
  );

--- a/pages/flyingHandService/styled.tsx
+++ b/pages/flyingHandService/styled.tsx
@@ -18,11 +18,15 @@ export const Box = styled.div`
        width: 120px;
        background-color: #fff;
        border-radius: 5px;
+        color: red;
+        .ant-select-selection-placeholder {
+          color: #000;
+        }
      }
    }
    .btn {
      width: 220px;
-      height: 60px;
+      height: 44px;
      background: linear-gradient(90deg, #278eff 0%, #0052da 100%);
      border-radius: 6px;
      border: 0;
@@ -37,7 +41,6 @@ export const Box = styled.div`
  }
  .item {
    width: 220px;
-    height: 320px;
    cursor: pointer;
    transition: all 0.5s;
    background-color: #fff;
@@ -47,15 +50,15 @@ export const Box = styled.div`
      height: 160px;
      background-color: #e6e6e6;
      border-radius: 6px 6px 0px 0px;
+      overflow: hidden;
    }
    &-bottom {
-      height: 160px;
+      padding: 9px 12px 12px;
-      padding: 9px 12px 20px;
      border-radius: 0px 0px 6px 6px;
      background-color: #fff;
      .bottom-title {
        width: 196px;
-        height: 44px;
+        height: 25px;
        font-size: 15px;
        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
        font-weight: bold;
@@ -81,7 +84,7 @@ export const Box = styled.div`
        display: flex;
        justify-content: space-between;
        align-items: center;
-        margin-top: 14px;
+        margin-top: 10px;
        &-left {
          width: 100px;
          height: 26px;
@@ -121,14 +124,15 @@ export const Box = styled.div`
        }
      }
    }
-    &:hover {
-      box-shadow: 20px 20px 10px 0px rgba(228, 228, 228, 1);
-    }
  }
  .right-item {
    width: 260px;
    height: 420px;
    background: #ffffff;
    border-radius: 6px;
+    overflow: hidden;
+  }
+  .pagination-page {
+    text-align: right;
  }
 `;
--- a/pages/home/waterfallFlowBody/assets/button.png
+++ b/pages/home/waterfallFlowBody/assets/button.png
--- a/pages/home/waterfallFlowBody/assets/xwbg.png
+++ b/pages/home/waterfallFlowBody/assets/xwbg.png
--- a/pages/home/waterfallFlowBody/components/map/api/index.tsx
+++ b/pages/home/waterfallFlowBody/components/map/api/index.tsx
-import request, { Response } from '~/api/request';
+import request, { Response } from "~/api/request";
 export interface PositioningInfoParams {
-  lat:number,
+  lat: number;
-  lon:number
+  lon: number;
 }
 export interface Entiy {
-          dizhi: string,
+  dizhi: string;
-          jd: number,
+  jd: number;
-          wd: number,
+  wd: number;
-          range: number
+  range: number;
 }
 export interface ListPageJobInfoResp {
-      id: number,
+  id: number;
-      adCode: string,
+  adCode: string;
-      province: string,
+  province: string;
-      locationList: Array<Entiy>
+  locationList: Array<Entiy>;
 }
 export default {
  //web-作业服务-分页
-  listPositioningInfo: (params: PositioningInfoParams): Promise<Response<ListPageJobInfoResp>> => {
+  listPositioningInfo: (
-    return request('/release/website/getWebsiteList', 'get', params )
+    params: PositioningInfoParams
+  ): Promise<Response<ListPageJobInfoResp[]>> => {
+    return request("/release/website/getWebsiteList", "get", params);
  },
-}
+};
\ No newline at end of file
--- a/pages/home/waterfallFlowBody/components/map/assets/icon.png
+++ b/pages/home/waterfallFlowBody/components/map/assets/icon.png
--- a/pages/home/waterfallFlowBody/components/map/index.tsx
+++ b/pages/home/waterfallFlowBody/components/map/index.tsx
 import React, { Component, useEffect, useState } from "react";
 import { Box } from "./styled";
 import api from "./api";
+let Map: any;
 export default function MapComponent() {
  const [mapItem, setMapItem] = useState(0);
-  let map: any;
  const init = async () => {
    try {
      const AMapLoader = await import(
@@ -15,14 +14,16 @@ export default function MapComponent() {
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
-        .then((AMap) => {
+        .then(async (AMap) => {
-          map = new AMap.Map("container", {
+          Map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
-            zoom: 11, // 初始化地图级别
+            zoom: 9, // 初始化地图级别
            center: [113.93029, 22.53291], // 初始化地图中心点位置
          });
-          mapEntiy(0, AMap);
+          console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
+          await mapEntiy(0, AMap);
        })
        .catch((e) => {
          console.log(e);
@@ -35,55 +36,116 @@ export default function MapComponent() {
    (async () => {
      await init();
    })();
+    console.log("渲染6666666666666666666666");
  }, []);
-  const addEntiy = (AMap: any, lan: any, lon: any) => {
+  const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
-    // let lngLat = new AMap.LngLat(lan.trim(), lon.trim())
+    if (!AMap) return;
-    // // 转高德坐标系
+    const marker = new AMap.Marker({
-    // AMap.convertFrom(lngLat, 'gps', function (info, result) {
+      map: Map,
-    //   lngLat = result.locations[0]// 转换后的坐标位置
+      position: [lan, lon],
-    //   var marker = new AMap.Marker({
+      title: dizhi,
-    //     position: lngLat,
+    });
-    //     map
+    // //鼠标点击marker弹出自定义的信息窗体
-    //   })
+    // AMap.Event.addListener(marker, "click", function () {
-    //   AMap.event.addListener(marker, 'click', (e) => {
+    //   infoWindow.open(map, marker.getPosition());
-    //     map.AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
+    // });
-    //       var infoWindow = new SimpleInfoWindow({
-    //         infoTitle: '<strong>这是标题</strong>',
-    //         infoBody: '<p>这是信息</p>',
-    //         offset: new AMap.Pixel(0, -20),
-    //         autoMove: true
-    //       })
-    //       infoWindow.open(map, e.target.getPosition())
-    //       // 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container()会返回这个infowindow（jquery）对象
-    //       let infoEle = infoWindow.get$Container()
-    //       //给infowindow添加点击事件，并在回调函数中处理业务或者跳转等
-    //       infoEle.on('click', (e) => {
-    //         // router.push({name: 'proinfo', params: pro})
-    //       })
-    //     })
-    //   })
-    // })
-  };
-  const mapEntiy = (index: number, AMap?: any) => {
+    // //实例化信息窗体
-    api
+    // var title =
-      .listPositioningInfo({
+    //     '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
-        lat: 113.944825,
+    //   content = [];
-        lon: 22.573664,
+    // content.push(
-      })
+    //   "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
-      .then((res) => {
+    // );
-        // const list = res.result
+    // content.push("电话：010-64733333");
-        //   ?.map((item) => item.locationList)
+    // content.push(
-        //   .flat()
+    //   "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
-        //   .filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
+    // );
-        // console.log("ajksbhdkjasgdbjahks", list);
+    // var infoWindow = new AMap.InfoWindow({
+    //   isCustom: true, //使用自定义窗体
+    //   content: createInfoWindow(title, content.join("<br/>")),
+    //   offset: new AMap.Pixel(16, -15),
+    //   anchor: "bottom-center",
+    // });
+    // //构建自定义信息窗体
+    // function createInfoWindow(title, content) {
+    //   var info = document.createElement("div");
+    //   info.className = "custom-info input-card content-window-card";
+    //   //可以通过下面的方式修改自定义窗体的宽高
+    //   //info.style.width = "400px";
+    //   // 定义顶部标题
+    //   var top = document.createElement("div");
+    //   var titleD = document.createElement("div");
+    //   var closeX = document.createElement("img");
+    //   top.className = "info-top";
+    //   titleD.innerHTML = title;
+    //   closeX.src = "https://webapi.amap.com/images/close2.gif";
+    //   closeX.onclick = closeInfoWindow;
+    //   top.appendChild(titleD);
+    //   top.appendChild(closeX);
+    //   info.appendChild(top);
-        // list.map((item) => {
+    //   // 定义中部内容
-        //   addEntiy(AMap, item.jd, item.wd);
+    //   var middle = document.createElement("div");
-        // });
+    //   middle.className = "info-middle";
-        setMapItem(index);
+    //   middle.style.backgroundColor = "white";
+    //   middle.innerHTML = content;
+    //   info.appendChild(middle);
+    //   // 定义底部内容
+    //   var bottom = document.createElement("div");
+    //   bottom.className = "info-bottom";
+    //   bottom.style.position = "relative";
+    //   bottom.style.top = "0px";
+    //   bottom.style.margin = "0 auto";
+    //   var sharp = document.createElement("img");
+    //   sharp.src = "https://webapi.amap.com/images/sharp.png";
+    //   bottom.appendChild(sharp);
+    //   info.appendChild(bottom);
+    //   return info;
+    // }
+    // //关闭信息窗体
+    // function closeInfoWindow() {
+    //   map.clearInfoWindow();
+    // }
+    return marker;
+  };
+  const mapEntiy = async (index: number, AMap?: any) => {
+    // api
+    //   .listPositioningInfo({
+    //     lat: 113.944825,
+    //     lon: 22.573664,
+    //   })
+    //   .then((res) => {});
+    setMapItem(index);
+    const res = await api.listPositioningInfo({
+      lat: 113.944825,
+      lon: 22.573664,
+    });
+    const list = res.result
+      ?.map((item) => item.locationList)
+      .flat()
+      .filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
+    const markerList: any = [];
+    if (list?.length) {
+      list?.map((item) => {
+        const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
+        markerList.push(EntiyValue);
      });
+      Map?.add(markerList);
+    }
+    console.log(Map, "地图实例++++++++++++++++++++++++++++++");
+    if (index && list?.length) {
+      Map?.panTo([list![index].jd, list![index].wd]);
+    }
  };
  return (
@@ -91,25 +153,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)}
        >
          更多网点

--- a/pages/home/waterfallFlowBody/components/map/styled.tsx
+++ b/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{
+    .itemBox {
-      color:#FF552D;
+      height: 22px;
+      line-height: 22px;
+      padding-right: 22px;
+      border-right: 1px solid #e0e0e0;
+    }
+    .active {
+      color: #ff552d;
    }
  }
 `;
--- a/pages/home/waterfallFlowBody/components/rotationChart/index.tsx
+++ b/pages/home/waterfallFlowBody/components/rotationChart/index.tsx
-import React from 'react';
+import React from "react";
-import { Carousel } from 'antd';
+import { Carousel } from "antd";
-import { Box } from "./styled"
+import { Box } from "./styled";
-import Image from 'next/image';
+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"}}>
+      <Carousel
-        {
+        className="rotationChart"
-          list.map(item=>(<div key={item}>
+        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>
+      </Carousel>
    </Box>
-  )
+  );
 }
--- a/pages/home/waterfallFlowBody/components/rotationChart/styled.tsx
+++ b/pages/home/waterfallFlowBody/components/rotationChart/styled.tsx
@@ -6,11 +6,13 @@ 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 +22,8 @@ export const Box = styled.div`
      justify-content: center;
      align-items: center;
      &:not(.slick-active) > button {
-        width: 10px;
+        width: 8px;
-        height: 10px;
+        height: 8px;
        border-radius: 50%;
      }
      & > button {
@@ -31,10 +33,10 @@ export const Box = styled.div`
    }
  }
  .contentStyle {
-    width: 790px;
+    width: 806px;
-    height: 200px;
+    height: 100px;
    color: #fff;
-    line-height: 200px;
+    line-height: 100px;
    text-align: center;
    background: #364d79;
  }

--- a/pages/home/waterfallFlowBody/index.tsx
+++ b/pages/home/waterfallFlowBody/index.tsx
--- a/pages/home/waterfallFlowBody/styled.tsx
+++ b/pages/home/waterfallFlowBody/styled.tsx
 import styled from "styled-components";
+import button from "./assets/button.png";
 export default function Style() {
  return <></>;
 }
 export const Box = styled.div`
  box-sizing: border-box;
-  padding-top: 24px;
+  padding-top: 16px;
  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;
+      padding: 0 20px;
-      height: 75px;
+      height: 46px;
      background: #ffffff;
      box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
      border-radius: 6px 6px 0px 0px;
+      border-bottom: 1px solid #f1f1f1;
      .item-left {
        display: flex;
        justify-content: space-around;
@@ -31,55 +32,94 @@ 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 {
+        background: #e0eeff;
+        border-radius: 2px;
+        border: 1px solid #aad0ff;
+        font-size: 12px;
+        width: 49px;
+        .ant-select-selection-placeholder {
+          color: #297ce0;
+          -webkit-padding-end: 0;
+          padding-inline-end: 0;
+        }
+        .ant-select-selector {
+          font-size: 13px;
+          padding: 0 0 0 5px;
+        }
+        .ant-select-arrow {
+          right: 2px;
+        }
+      }
    }
    &-body {
-      padding-left: 10px;
+      padding: 5px 20px 10px 20px;
-      height: 268px;
      background: #ffffff;
-      box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
      border-radius: 0px 0px 6px 6px;
      .item-bubble {
-        /* width: 80px; */
+        font-weight: 520;
-        padding: 0 5px;
        height: 32px;
        line-height: 32px;
-        background: #f4f6f9;
+        font-size: 14px;
-        border-radius: 19px;
        text-align: center;
+        color: #4a4a4a;
        cursor: pointer;
+        font-family: MicrosoftYaHei;
        &.active {
          color: #ff552d;
        }
+        &:hover {
+          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: url("./assets/xwbg.png") no-repeat #fff;
-    background-color: #fff;
+    border-radius: 6px;
    .title {
      display: flex;
      align-items: center;
-      padding: 0 25px;
+      padding: 0 20px 0 20px;
-      height: 60px;
+      height: 46px;
-      font-size: 20px;
+      font-size: 16px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
      color: #000000;
      line-height: 25px;
+      &-label {
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 400;
+        &:hover {
+          color: #ff552d;
+        }
+      }
    }
-    .body {
+    /* .body {
      height: 284px;
-      overflow-y: auto;
+      overflow-y: hidden;
      &-item {
        display: flex;
        justify-content: space-between;
@@ -93,7 +133,12 @@ export const Box = styled.div`
          font-family: MicrosoftYaHei;
          color: #323232;
          line-height: 21px;
-          word-wrap: break-word;
+          overflow: hidden; //溢出内容隐藏
+          text-overflow: ellipsis; //文本溢出部分用省略号表示
+          display: -webkit-box; //特别显示模式
+          -webkit-line-clamp: 2; //行数
+          line-clamp: 2;
+          -webkit-box-orient: vertical; //盒子中内容竖直排列
        }
        .item-image {
          width: 96px;
@@ -102,25 +147,71 @@ 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;
+    position: relative;
+    .item-box {
+      position: absolute;
+      top: 0;
+    }
    .title {
      display: flex;
      align-items: center;
-      padding: 0 25px;
+      padding: 0 20px 0 20px;
-      height: 62px;
+      height: 48px;
-      font-size: 20px;
+      font-size: 16px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
      color: #000000;
      line-height: 25px;
+      &-label {
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 400;
+        &:hover {
+          color: #ff552d;
+        }
+      }
    }
-    .body {
+    /* .body {
-      height: 448px;
+      overflow-y: hidden;
-      overflow-y: auto;
      &-item {
        display: flex;
        justify-content: space-between;
@@ -137,12 +228,12 @@ export const Box = styled.div`
          word-wrap: break-word;
          .label-top {
            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;				//溢出内容隐藏
+            overflow: hidden; //溢出内容隐藏
-            text-overflow: ellipsis;		//文本溢出部分用省略号表示
+            text-overflow: ellipsis; //文本溢出部分用省略号表示
-            display: -webkit-box;			//特别显示模式
+            display: -webkit-box; //特别显示模式
-            -webkit-line-clamp: 2;			//行数
+            -webkit-line-clamp: 2; //行数
-            line-clamp: 2;					
+            line-clamp: 2;
-            -webkit-box-orient: vertical;	//盒子中内容竖直排列
+            -webkit-box-orient: vertical; //盒子中内容竖直排列
          }
          .label-bottom {
            font-size: 15px;
@@ -162,6 +253,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;
+          }
+        }
+      }
    }
  }
 `;
--- a/pages/jobServices/index.page.tsx
+++ b/pages/jobServices/index.page.tsx
@@ -20,7 +20,7 @@ export default function JobServices() {
  const router = useRouter();
  const [list, setList] = useState([
    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
+    // "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
  ]);
  const [productList, setProductList] = useState(
    Array<{ element: JSX.Element }>
@@ -39,10 +39,10 @@ export default function JobServices() {
          <div className="value">
            <div className="value-left">
              <div className="label">{item.serviceName}</div>
-              <div className="com">{item.teamName}</div>
+              {/* <div className="com">{item.teamName}</div> */}
            </div>
            <div className="value-right">
-              <span className="money">{item.price}</span>{" "}
+              <span className="money">¥{item.price}</span>{" "}
              <span className="unit">/平</span>
            </div>
          </div>
@@ -51,7 +51,8 @@ export default function JobServices() {
          <div className="bottom-left">
            {Math.round(Math.random() * (150 - 100) + 100)}条评价
          </div>
-          <div className="bottom-right">专业飞手团队，精通巡航业务</div>
+          {/* <div className="bottom-right">专业飞手团队，精通巡航业务</div> */}
+          <div className="com">{item.teamName}</div>
        </div>
      </div>
    );
@@ -69,7 +70,7 @@ export default function JobServices() {
  const [pageParams, setPageParams] = useState({
    pageNo: 1,
-    pageSize: 16,
+    pageSize: 14,
  }); //分页器对象
  const [count, setCount] = useState(0); //商品总数
@@ -151,26 +152,32 @@ export default function JobServices() {
          showResultItem
          onChange={onFilterChange}
        ></Filter>
-        <div style={{ marginTop: 18 }}>
+        <div style={{ marginTop: 10 }}>
          <ContentBox
            boxIndex={2}
-            leftRenderDom={{ columns: productList }}
+            leftRenderDom={{
+              columns: productList,
+              pagination: (
+                <div className="pagination-page">
+                  <Pagination
+                    current={pageParams.pageNo}
+                    pageSize={pageParams.pageSize}
+                    showSizeChanger={false}
+                    showQuickJumper
+                    total={count}
+                    onChange={onPageChange}
+                    hideOnSinglePage={true}
+                    style={{ marginTop: 20 }}
+                  />
+                </div>
+              ),
+            }}
            rightRenderDom={{ columns: rightDomList }}
            leftcontentstyle={{
              width: "924px",
-              margin: { top: 0, right: "16px", bottom: "16px", left: 0 },
+              margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
            }}
          />
-          <Pagination
-            current={pageParams.pageNo}
-            pageSize={pageParams.pageSize}
-            showSizeChanger={false}
-            showQuickJumper
-            total={count}
-            onChange={onPageChange}
-            hideOnSinglePage={true}
-            style={{ marginTop: 20 }}
-          />
        </div>
      </Box>
    </Layout>

--- a/pages/jobServices/styled.tsx
+++ b/pages/jobServices/styled.tsx
-import styled from "styled-components"
+import styled from "styled-components";
 export default function Style() {
  return <></>;
 }
 export const Box = styled.div`
-    box-sizing: border-box;
+  box-sizing: border-box;
-    padding-top: 15px;
+  padding-top: 10px;
-    width: 1200px;
+  width: 1200px;
-    .item {
+  .item {
-        width: 454px;
+    width: 454px;
-        height: 180px;
+    height: 90px;
-        background: #FFFFFF;
+    background: #ffffff;
-        box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3);
+    box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
-        border-radius: 6px;
+    border-radius: 6px;
-        padding: 24px;
+    padding: 16px;
-        cursor: pointer;
+    cursor: pointer;
-        transition: all .5s;
+    transition: all 0.5s;
-        &-top{
+    &-top {
-            padding-bottom: 10px;
+      padding-bottom: 10px;
-            border-bottom: 1px solid #ccc;
+      border-bottom: 0.1px solid #dcdcdc;
-            .value{
+      .value {
-                display: flex;
+        display: flex;
-                justify-content: space-between;
+        justify-content: space-between;
-                &-left{
+        &-left {
-                    .label{
+          .label {
-                        width: 275px;
+            width: 295px;
-                        height: 48px;
+            height: 24px;
-                        font-size: 20px;
+            font-size: 16px;
-                        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-                        font-weight: bold;
+            font-weight: bold;
-                        color: #333333;
+            color: #333333;
-                        line-height: 24px;
+            line-height: 24px;
-                        letter-spacing: 1px;
+          }
-                        word-wrap: break-word;
-                    }
-                    .com{
-                        width: 216px;
-                        height: 22px;
-                        font-size: 16px;
-                        font-family: MicrosoftYaHei;
-                        color: #828A92;
-                        line-height: 22px;
-                    }
-                }
-                &-right{
-                    .money{
-                        width: 89px;
-                        height: 22px;
-                        font-size: 28px;
-                        font-family: Arial-BoldMT, Arial;
-                        font-weight: normal;
-                        color: #FF552D;
-                        line-height: 22px;
-                    }
-                    .unit{
-                        width: 24px;
-                        height: 22px;
-                        font-size: 16px;
-                        font-family: MicrosoftYaHei;
-                        color: #FF552D;
-                        line-height: 22px;
-                    }
-                }
-            }
        }
-        &-bottom{
+        &-right {
-            display: flex;
+          .money {
-            align-items: center;
+            width: 89px;
-            justify-content: space-between;
+            height: 22px;
-            font-size: 14px;
+            font-size: 20px;
+            font-family: Arial-BoldMT, Arial;
+            color: #ff552d;
+            line-height: 22px;
+            font-weight: bold;
+          }
+          .unit {
+            width: 24px;
+            height: 22px;
+            font-size: 16px;
            font-family: MicrosoftYaHei;
-            color: #828B93;
+            color: #ff552d;
            line-height: 22px;
-            -webkit-background-clip: text;
+          }
-            padding-top: 16px;
-            .bottom-left{
-            }
-            .bottom-right{
-            }
-        }
-        &:hover{
-            box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
        }
+      }
    }
-    .advertisement{
+    &-bottom {
-        width: 260px;
+      display: flex;
-        height: 420px;
+      align-items: center;
-        background: #FFFFFF;
+      justify-content: space-between;
-        border-radius: 6px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: #828b93;
+      line-height: 22px;
+      -webkit-background-clip: text;
+      padding-top: 5px;
+      .bottom-left {
+        width: 116px;
+        height: 22px;
+        font-size: 13px;
+        font-family: MicrosoftYaHei;
+        color: #c88430;
+        line-height: 22px;
+      }
+      .bottom-right {
+        width: 216px;
+        height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: #828a92;
+        line-height: 22px;
+      }
    }
-`
+  }
\ No newline at end of file
+  .advertisement {
+    width: 260px;
+    height: 420px;
+    background: #ffffff;
+    border-radius: 6px;
+  }
+  .pagination-page {
+    text-align: right;
+  }
+`;
--- a/pages/mall/index.module.scss
+++ b/pages/mall/index.module.scss
 @import "~/styles/mixins.scss";
 .productList {
-  .title {
-    padding: 20px 10px 18px;
-    text-align: left;
-  }
  .main {
    display: flex;
    justify-content: space-between;
+    padding-top: 20px;
    .adList {
      display: flex;
      flex-shrink: 0;
@@ -25,9 +20,12 @@
    }
  }
-  .listContent{
+  .listContent {
    width: 100%;
+    .paginationPage {
+      text-align: right;
+      padding-right: 12px;
+    }
  }
  .listWrap {

--- a/pages/mall/index.page.tsx
+++ b/pages/mall/index.page.tsx
@@ -89,59 +89,55 @@ export default function Mall(props: Props) {
        ></Filter>
        <div className={styles.productList}>
-          <div className={styles.title}>四旋翼无人机</div>
          <div className={styles.main}>
-            <div style={{ flex: "auto"}}>
+            <div className={styles.listContent}>
-              <Spin spinning={loading} delay={500}>
+              <ul className={styles.listWrap}>
-                <div className={styles.listContent}>
+                {productList.map((item, i) => {
-                  <ul className={styles.listWrap}>
+                  return (
-                    {productList.map((item, i) => {
+                    <li
-                      return (
+                      key={i}
-                        <li
+                      className={styles.item}
-                          key={i}
+                      onClick={() => router.push("/mall/detail/" + item.id)}
-                          className={styles.item}
+                    >
-                          onClick={() => router.push("/mall/detail/" + item.id)}
+                      <div className={styles.imgBox}>
-                        >
+                        <Image
-                          <div className={styles.imgBox}>
+                          alt=""
-                            <Image
+                          src={item.imgUrl}
-                              alt=""
+                          className={styles.img}
-                              src={item.imgUrl}
+                          width={116}
-                              className={styles.img}
+                          height={116}
-                              width={116}
+                          preview={false}
-                              height={116}
+                        ></Image>
-                              preview={false}
+                      </div>
-                            ></Image>
+                      <div className={styles.title}>{item.goodsName}</div>
-                          </div>
+                      <div className={styles.sellCount}>
-                          <div className={styles.title}>{item.goodsName}</div>
+                        半年售
-                          <div className={styles.sellCount}>
+                        {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
-                            半年售
+                      </div>
-                            {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
+                    </li>
-                          </div>
+                  );
-                        </li>
+                })}
-                      );
+                {productList.length === 0 && (
-                    })}
+                  <Empty
-                    {productList.length === 0 && (
+                    style={{
-                      <Empty
+                      paddingTop: 20,
-                        style={{
+                      width: "100%",
-                          paddingTop: 20,
+                      textAlign: "center",
-                          width: "100%",
+                    }}
-                          textAlign: "center",
+                  ></Empty>
-                        }}
+                )}
-                      ></Empty>
+              </ul>
-                    )}
+              <div className={styles.paginationPage}>
-                  </ul>
+                <Pagination
-                  <Pagination
+                  current={pageParams.pageNo}
-                    current={pageParams.pageNo}
+                  showSizeChanger={false}
-                    defaultPageSize={pageParams.pageSize}
+                  showQuickJumper
-                    showSizeChanger={false}
+                  total={count}
-                    showQuickJumper
+                  onChange={onPageChange}
-                    total={count}
+                  hideOnSinglePage={true}
-                    onChange={onPageChange}
+                  style={{ marginTop: 20 }}
-                    hideOnSinglePage={true}
+                />
-                    style={{ marginTop: 20 }}
+              </div>
-                  />
-                </div>
-              </Spin>
            </div>
            <div className={styles.adList}>

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