功能：新闻列表

src/components/breadcrumb/index.tsx

@@ -70,6 +70,7 @@ const BreadcrumbView: React.FC = () => {
       path: 'course',
       children: [{ name: '课程详情', path: 'detail' }],
     },
+    { name: '行业新闻', path: 'news' },
   ];
   // 转换路由
   const getCurrentRouter = () => {
@@ -106,6 +107,7 @@ const BreadcrumbView: React.FC = () => {
           },
           ...getCurrentRouter(),
         ]}
+        className="mt-0.5"
       />
     </BreadcrumbWrap>
   );

src/components/home-comp/home-news/index.tsx

 import React, { useEffect, useState } from 'react';
 import { RightOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import QrcodePopover from '@/components/qrcodePopover';
 
+// 帖子类型
+const indexList = [
+  { label: 1, value: '#FF392B' },
+  { label: 2, value: '#FE792B' },
+  { label: 3, value: '#FEA32B' },
+];
+// 热门类型
+const typeList = [
+  { label: 1, value: '#FFB555' },
+  { label: 2, value: '#FF6155' },
+  { label: 3, value: '#B700D9' },
+];
+
 const HomeNewsView = () => {
-  // 帖子类型
-  const indexList = [
-    { label: 1, value: '#FF392B' },
-    { label: 2, value: '#FE792B' },
-    { label: 3, value: '#FEA32B' },
-  ];
-  // 热门类型
-  const typeList = [
-    { label: 1, value: '#FFB555' },
-    { label: 2, value: '#FF6155' },
-    { label: 3, value: '#B700D9' },
-  ];
+  // 路由钩子
+  const router = useRouter();
   // tab栏数据
   const [tabList, setTabList] = useState<{ label: string; value: any[] }[]>([
     // {
@@ -95,6 +99,10 @@ const HomeNewsView = () => {
   const getTagBgColor = (item: any[0]) => {
     return typeList.find((i) => i.label === item.gambitProperty)?.value;
   };
+  // 跳转到更多了
+  const handleMore = async () => {
+    await router.push('/news');
+  };
   // 组件挂载
   useEffect(() => {
     handleSelect(0).then();
@@ -116,7 +124,7 @@ const HomeNewsView = () => {
           ))}
         </div>
         <QrcodePopover path={'page-home/news-list/index'}>
-          <div className="head-more flex-between">
+          <div className="head-more flex-between" onClick={handleMore}>
             <div className="more-text">更多</div>
             <RightOutlined style={{ fontSize: 10, color: '#33333380' }} />
           </div>

src/components/layout/index.tsx

@@ -16,11 +16,13 @@ const LayoutView: React.FC<{
   placeholder?: boolean;
   autoChange?: boolean;
   topDistance?: number;
+  background?: string;
 }> = ({
   children,
   placeholder = true,
   autoChange = false,
   topDistance = 0,
+  background = 'transparent',
 }) => {
   // store
   const dispatch = useDispatch();
@@ -39,7 +41,7 @@ const LayoutView: React.FC<{
     );
   };
   return (
-    <LayoutWrap>
+    <LayoutWrap style={{ background }}>
       <HeaderView
         placeholder={placeholder}
         autoChange={autoChange}

src/pages/news/comp/_newsSwiper.tsx

+import React from 'react';
+import { FieldTimeOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import { Carousel } from 'antd';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { ListNewsType } from '@/api/interface/home';
+
+// 新闻列表类型
+type ListType = InterListType<ListNewsType>;
+
+const NewsSwiperView: React.FC<{ list: ListType }> = ({ list }) => {
+  return (
+    <NewsSwiperWrap>
+      <Carousel autoplay={true}>
+        {list
+          ?.filter((i) => i.isHot)
+          ?.map((i, j) => (
+            <div className="swiper-view" key={j}>
+              <div className="swiper-item">
+                <img
+                  className="item-image"
+                  src={i?.surfaceImg}
+                  alt={i.newsTitle}
+                />
+                <div className="item-content">
+                  <div className="content-head">
+                    <div className="top">
+                      <VerticalAlignTopOutlined />
+                      <span className="text">置顶</span>
+                    </div>
+                    <div className="time">
+                      <FieldTimeOutlined />
+                      <span className="text">{i?.createTime}</span>
+                    </div>
+                  </div>
+                  <div className="content-title">{i?.newsTitle}</div>
+                  <div className="content-desc two-line-ellipsis">
+                    {i?.newsContents?.match(/(?<=>)[^<>]+(?=<)/g)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+      </Carousel>
+    </NewsSwiperWrap>
+  );
+};
+
+export default NewsSwiperView;
+// 样式
+const NewsSwiperWrap = styled.div`
+  position: relative;
+  width: 86%;
+  box-sizing: border-box;
+  margin: 0 auto;
+  .swiper-view {
+    position: relative;
+    width: 100%;
+    height: 19rem;
+    box-sizing: border-box;
+    //background: lightblue;
+    .swiper-item {
+      position: relative;
+      width: 100%;
+      height: 17rem;
+      background: #ffffff;
+      border-radius: 0.83rem;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 1.58rem;
+      .item-image {
+        width: 28rem;
+        height: 14rem;
+        border-radius: 0.42rem;
+        object-fit: cover;
+        margin-right: 2rem;
+      }
+      .item-content {
+        position: relative;
+        width: calc(100% - 28rem - 2rem);
+        box-sizing: border-box;
+        .content-head {
+          position: relative;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 13px;
+          font-weight: 500;
+          margin-bottom: 1rem;
+          .top {
+            color: #ff5702;
+          }
+          .time {
+            color: #999999;
+          }
+          .text {
+            margin-left: 0.25rem;
+          }
+        }
+        .content-title {
+          font-size: 16px;
+          font-weight: 550;
+          color: #333333;
+          margin-bottom: 1rem;
+        }
+      }
+    }
+  }
+  .slick-dots {
+    .slick-active {
+      button {
+        background: #ff5702 !important;
+      }
+    }
+    button {
+      background: #999 !important;
+    }
+  }
+`;

src/pages/news/index.tsx

+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { ListNewsType } from '@/api/interface/home';
+import BreadcrumbView from '@/components/breadcrumb';
+import LayoutView from '@/components/layout';
+import NewsSwiperView from '@/pages/news/comp/_newsSwiper';
+
+// 新闻列表类型
+type NewsListType = InterListType<ListNewsType>;
+
+const NewsListView = () => {
+  // 新闻列表
+  const [newsList, setNewsList] = useState<NewsListType>([]);
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 18,
+    totalCount: 0,
+  });
+  // 热点资讯列表
+  const getListNews = async () => {
+    const res = await HomeAPI.getListNews({
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+    });
+    if (res && res.code === '200') {
+      const { list, pageNo, pageSize, totalCount } = res.result;
+      setPagination({
+        pageNo,
+        pageSize,
+        totalCount,
+      });
+      setNewsList(list);
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    getListNews().then();
+  }, []);
+  return (
+    <LayoutView background={'#f9f9f9'}>
+      <NewsListWrap>
+        {/* 面包屑 */}
+        <BreadcrumbView />
+        {/* 轮播图 */}
+        <NewsSwiperView list={newsList} />
+      </NewsListWrap>
+    </LayoutView>
+  );
+};
+
+export default NewsListView;
+// 样式
+const NewsListWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+`;