项目资讯样式招投村项目、行业新闻样式改版

components/layout/index.tsx

-import React, { Suspense } from 'react';
-import { Layout, Space } from 'antd';
-import NavHeader from '~/components/NavHeader';
-import FooterView from '~/components/footer';
+import React, { Suspense } from "react";
+import { Layout, Space } from "antd";
+import NavHeader from "~/components/NavHeader";
+import FooterView from "~/components/footer";
 
 const { Header, Footer, Content } = Layout;
 
 const headerStyle: React.CSSProperties = {
-  height: 'auto',
-  background: 'none',
+  height: "auto",
+  background: "none",
   padding: 0,
-  lineHeight: '1',
-  position: 'relative'
+  lineHeight: "1",
+  position: "relative",
 };
 
 const contentStyle: React.CSSProperties = {
   minHeight: 120,
-  lineHeight: '1',
-  color: '',
-  backgroundColor: '',
-  width:1200,
-  position: 'relative',
-  margin: "0 auto"
+  lineHeight: "1",
+  color: "",
+  backgroundColor: "",
+  width: 1200,
+  position: "relative",
+  margin: "0 auto",
 };
 
 const footerStyle: React.CSSProperties = {
-  color: '',
-  backgroundColor: '',
-  lineHeight: '1',
+  color: "",
+  backgroundColor: "",
+  lineHeight: "1",
   padding: 0,
-  position: 'relative',
-  marginTop: 78
+  position: "relative",
+  marginTop: 78,
 };
 
-
 type Props = {
   children: React.ReactNode;
+  layoutStyle: React.CSSProperties;
 };
 
 export default function LayoutView(props: Props) {
   return (
-    <Space direction='vertical' style={{ width: '100%' }} size={[0, 48]}>
-      <Layout style={{ minHeight: '100vh' }}>
+    <Space direction="vertical" style={{ width: "100%" }} size={[0, 48]}>
+      <Layout style={Object.assign({ minHeight: "100vh" }, props.layoutStyle)}>
         <Header style={headerStyle}>
           <NavHeader />
         </Header>
-        <Content style={contentStyle}>
-          {props.children}
-        </Content>
+        <Content style={contentStyle}>{props.children}</Content>
         <Footer style={footerStyle}>
           <FooterView></FooterView>
         </Footer>

pages/projectInfo/components/bids/index.module.scss

@@ -2,12 +2,12 @@
 
 //项目需求
 .bids {
-  padding-top: 20px;
-
   .item {
-    padding: 24px 14px 24px 16px;
+    padding: 24px 17px 24px 16px;
     display: flex;
     border-bottom: 1px dashed RGBA(222, 222, 222, 1);
+    justify-content: space-between;
+    align-items: center;
 
     .info {
       .title {
@@ -27,22 +27,41 @@
     }
 
     .btn {
-      width: 120px;
+      width: 168px;
       height: 40px;
-      background: #ff552d;
       border-radius: 6px;
       font-size: 14px;
       font-family: MicrosoftYaHei;
       color: #ffffff;
-    }
-
-    .btnDisabled {
-      width: 120px;
-      height: 40px;
-      background: #c7cacf;
-      border-radius: 6px;
+      background: url("./assets/btn.png");
+      background-size: 100% 100%;
       border: none;
-      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      padding: 0;
+      align-items: center;
+
+      .text1 {
+        width: 80px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ff4500;
+        text-align: left;
+        padding-left: 8px;
+      }
+
+      .text2 {
+        flex: 1;
+        text-align: center;
+        font-size: 16px;
+        font-family: MicrosoftYaHei;
+        color: #ffffff;
+      }
+
+      &.disabled {
+        opacity: 0.6;
+      }
     }
   }
 }

pages/projectInfo/components/bids/index.tsx

-import { Button } from 'antd';
-import styles from './index.module.scss';
+import { Button } from "antd";
+import styles from "./index.module.scss";
 
 const list = [
   {
-    isApply: false
+    isApply: false,
   },
   {
-    isApply: true
-  }
-]
+    isApply: true,
+  },
+];
 
-export default function requirements(){
+export default function requirements() {
   return (
     <div className={styles.bids}>
       {list.map((item, i) => {
         return (
           <div className={styles.item} key={i}>
-            <div className={styles.logo}></div>
             <div className={styles.info}>
               <div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
-              <div className={styles.desc}>155万元</div>
             </div>
             {item.isApply ? (
-              <Button type="primary" disabled className={styles.btnDisabled}>
-                已申请
+              <Button
+                type="primary"
+                disabled
+                className={`${styles.btn} ${styles.disabled}`}
+              >
+                <div className={styles.text1}>155W</div>
+                <div className={styles.text2}>已申请</div>
               </Button>
             ) : (
               <Button type="primary" className={styles.btn}>
-                申请合作
+                <div className={styles.text1}>155W</div>
+                <div className={styles.text2}>申请合作</div>
               </Button>
             )}
           </div>
@@ -35,4 +39,4 @@ export default function requirements(){
       })}
     </div>
   );
-}
+}
\ No newline at end of file

pages/projectInfo/components/cases/index.module.scss

@@ -8,6 +8,8 @@
     padding: 39px 14px 39px 16px;
     display: flex;
     border-bottom: 1px dashed RGBA(222, 222, 222, 1);
+    border-bottom: 1px dashed RGBA(222, 222, 222, 1);
+    justify-content: space-between;
 
     .info {
       .title {

pages/projectInfo/components/cases/index.tsx

@@ -16,7 +16,6 @@ export default function requirements() {
       {list.map((item, i) => {
         return (
           <div className={styles.item} key={i}>
-            <div className={styles.logo}></div>
             <div className={styles.info}>
               <div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
             </div>

pages/projectInfo/components/news/index.module.scss

 @import "~/styles/mixins.scss";
-//项目需求
-.requirements {
+
+.layout {
+  display: flex;
+}
+
+.new {
   padding-top: 20px;
+  width: 750px;
 
   .item {
     cursor: pointer;
@@ -31,3 +36,51 @@
     }
   }
 }
+
+.newsBox {
+  margin-top: 24px;
+  width: 384px;
+  height: 491px;
+  background: url("./assets/bk.png");
+  background-size: 100% 100%;
+
+  .newsHeader {
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .newsHeaderTitle {
+      font-size: 20px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #000000;
+    }
+  }
+
+  .newList {
+    .newItem {
+      cursor: pointer;
+      padding: 5px 16px 5px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .newItemTitle {
+        font-size: 16px;
+        font-family: MicrosoftYaHei;
+        color: #323232;
+        line-height: 21px;
+        @include ellipsis(2);
+        width: 217px;
+      }
+
+      .newItemImg {
+        width: 90px;
+        height: 60px;
+        background: #d8d8d8;
+        border-radius: 6px;
+      }
+    }
+  }
+}

pages/projectInfo/components/news/index.tsx

-import styles from './index.module.scss';
+import { RightOutlined } from "@ant-design/icons";
+import { Col, Row } from "antd";
+import styles from "./index.module.scss";
+import Image from "next/image";
 
-export default function requirements(){
+export default function requirements() {
   return (
-    <div className={styles.requirements}>
-      <div className={styles.item}>
-        <div className={styles.logo}></div>
-        <div className={styles.info}>
-          <div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
+    <Row justify="space-between">
+      <Col className={styles.new}>
+        <div className={styles.item}>
+          <div className={styles.logo}></div>
+          <div className={styles.info}>
+            <div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
+          </div>
         </div>
-      </div>
-    </div>
+      </Col>
+      <Col className={styles.newsBox}>
+        <div className={styles.newsHeader}>
+          <div className={styles.newsHeaderTitle}>行业新闻</div>
+          <RightOutlined style={{ fontSize: 16 }} />
+        </div>
+        <ul className={styles.newList}>
+          <li className={styles.newItem}>
+            <div className={styles.newItemTitle}>
+              中国超音速无人机雨燕试飞成功好棒呀
+            </div>
+            <Image className={styles.newItemImg} src="" alt=""></Image>
+          </li>
+        </ul>
+      </Col>
+    </Row>
   );
-}
+}
\ No newline at end of file

pages/projectInfo/index.module.scss

@@ -19,10 +19,10 @@
   height: 60px;
   background: #f4f5f7;
   border: 1px solid #f0f0f0;
-  padding-right: 25px;
 
   :global .ant-tabs-nav {
     height: 100%;
+    margin: 0;
 
     .ant-tabs-tab-btn {
       width: 100px;

pages/projectInfo/index.tsx

@@ -64,7 +64,7 @@ const onDateChange: DatePickerProps["onChange"] = (date, dateString) => {
 };
 
 const operations = (
-  <Space size={8}>
+  <Space size={8} style={{ marginRight: 25 }}>
     <Cascader
       options={options}
       onChange={onChange}
@@ -106,7 +106,7 @@ const items = ["项目需求", "招投标项目", "业务案例", "行业新闻"
 
 export default function Mall() {
   return (
-    <Layout>
+    <Layout layoutStyle={{ backgroundColor: "#fff" }}>
       <div style={{ backgroundColor: "#fff", minHeight: 820 }}>
         <div className="page">
           <div className={styles.bannerWrap}>