上传文件至 'src/component/news'

src/component/news/news.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Col, Row, Tabs, Pagination, Image, Typography, Divider } from "antd";
+import Layout from "../../Layout";
+import { HeaderImg } from "../Solution";
+import '../style/news.less';
+import { FootImg } from "../../App";
+import LeftImg1 from '../../static/web/org/bsns/2.jpg';
+import LeftImg2 from '../../static/web/org/bsns/1.jpg';
+import LeftImg3 from '../../static/web/org/bsns/3.jpg';
+import LeftImg4 from '../../static/web/org/bsns/6.jpg';
+import LeftImg5 from '../../static/web/org/bsns/9.jpg';
+import LeftImg6 from '../../static/web/org/bsns/10.jpg';
+import LeftImg7 from '../../static/web/org/bsns/5.jpg';
+import LeftImg8 from '../../static/web/org/bsns/7.jpg';
+import { useNavigate } from "react-router-dom";
+
+const { Paragraph, Text, Title } = Typography;
+const News_items = [
+    '新闻资讯',
+    '行业资讯',
+    '知识百科',
+];
+const leftImages = [
+    LeftImg1,
+    LeftImg2,
+    LeftImg3,
+    LeftImg4,
+    LeftImg5,
+    LeftImg6
+];
+const rightImages = [
+    LeftImg3,
+    LeftImg7,
+    LeftImg8,
+    LeftImg5,
+    LeftImg6
+];
+
+const LeftTabs = (props) => {
+    return <div className="news_list" onClick={props.onClick}>
+        <Row>
+            <Col span={7}>
+                <Image src={leftImages[props.num]} preview={false} />
+            </Col>
+            <Col span={14} offset={1}>
+                <Title level={5} ellipsis={{
+                    rows: 1
+                }}>标题占位标题占位标题占位标题占位标题占位标题占位</Title>
+                <Paragraph ellipsis={{
+                    rows: 2
+                }}>标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位位标题占位</Paragraph>
+                <Paragraph>2023/6/6</Paragraph>
+            </Col>
+        </Row>
+    </div>
+}
+const RightTabs = (props) => <Row>
+    <Col span={8}>
+        <Image src={rightImages[props.num]} preview={false} />
+    </Col>
+    <Col span={14} offset={2}>
+        <Title level={5} ellipsis={{
+            rows: 1
+        }}>标题占位标题占位标题占位标题占位标题占位标题占位</Title>
+        <Paragraph>2023/6/6</Paragraph>
+    </Col>
+    <Divider />
+</Row>
+export const RightCol = () => <Col span={7} offset={1}>
+    <div className="news_recommend">
+        <Title level={4}>推荐文章</Title>
+        {new Array(5).fill(null).map((_, i) => <RightTabs key={i} num={i} />)}
+    </div>
+    <div className="recommend_tags">
+        <Row justify='space-between'>
+            <Col><Title level={4}>推荐标签</Title></Col>
+            <Col><Text>查看更多</Text></Col>
+        </Row>
+        <Row gutter={[16, 16]}>
+            {new Array(6).fill(null).map((_, i) => <Col key={i.toString()} span={8}>
+                <div className="span">标签占位</div>
+            </Col>)}
+
+        </Row>
+    </div>
+</Col>
+
+const News = () => {
+    const navigator = useNavigate();
+    const ToDetail = (value) => {
+        navigator('/news/detail', { state: value });
+    }
+    return (
+        <Layout>
+            <HeaderImg />
+            <div className="news_tabs">
+                <Tabs
+                    defaultActiveKey="1"
+                    centered
+                    tabBarGutter={0}
+                    items={News_items.map((item, i) => {
+                        const id = String(i + 1);
+                        return {
+                            label: item,
+                            key: id,
+                            children: <>
+                                <Row className='news_container'>
+                                    <Col span={16} style={{ textAlign: 'center' }}>
+                                        {new Array(6).fill(null).map((_, index) => <LeftTabs key={index}
+                                            onClick={() => ToDetail(String(item + 1))} num={index}
+                                        />)}
+                                        <Pagination defaultCurrent={1} total={50} />
+                                    </Col>
+                                    <RightCol />
+                                </Row>
+                            </>,
+                        };
+                    })}
+                />
+            </div>
+            <FootImg />
+        </Layout>
+    )
+}
+
+export default News;

src/component/news/news_detail.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Layout from "../../Layout";
+import { HeaderImg } from "../Solution";
+import { FootImg } from "../../App";
+import { useLocation } from "react-router-dom";
+import { Row, Col, Typography, Image } from "antd";
+import DetailImg from '../../static/web/org/bsns/8.jpg';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { RightCol } from "./news";
+
+const { Title, Paragraph, } = Typography;
+export const TipsArticle = () => <Row justify='space-between' style={{ fontSize: 12 }}>
+    <Col style={{cursor:'pointer'}}><ArrowLeftOutlined />上一篇：标题占位标题占位标题占位标题占位</Col>
+    <Col  style={{cursor:'pointer'}}><ArrowRightOutlined />下一篇：标题占位标题占位标题占位标题占位</Col>
+</Row>
+
+const NewsDetail = () => {
+    const location = useLocation();
+    return (<>
+        <Layout>
+            <HeaderImg />
+            <Row className="news_container">
+                <Col span={16}>
+                    <div className="news_list" style={{ backgroundColor: '#f1f1f1' }}>
+                        <Title level={3} style={{ color: '#58BE70' }}>标题{location.state}占位占位占位占位</Title>
+                        <Paragraph style={{ fontSize: '17px' }}>创建时间：2023-06-07</Paragraph>
+                        <Paragraph style={{ lineHeight: 3 }}>
+                            详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位
+                        </Paragraph>
+                        <Image src={DetailImg} style={{ marginBottom: 20 }} />
+                        <Paragraph>关键词：xxxxxxx</Paragraph>
+                        <TipsArticle />
+                    </div>
+                </Col>
+                <RightCol />
+            </Row>
+            <FootImg />
+        </Layout>
+    </>)
+};
+
+export default NewsDetail;