init 3.3.1

src/Material/components/Item.component.tsx

@@ -13,6 +13,7 @@ import ProductInteriorCard from './ProductInteriorCard'
 import IndustrialSourceCard from './IndustrialSourceCard'
 import ReportSelectionCard from './ReportSelectionCard'
 import YanxuanSpecialCard from './YanxuanSpecialCard'
+import YanxuanSpecialAuthorCard from './YanxuanSpecialAuthorCard'
 
 export enum IItemType {
   MyChart = 'myChart', // 我收藏的图表
@@ -33,7 +34,8 @@ export enum IItemType {
   Industrialsource = 'industrialsource', // 产业资源包
   ReportSelection = 'reportselection', // 重点公司展示样式
   YanxuanSpecial = 'yanxuanspecial', // 专栏笔记/观点
-  AskserieVideo = 'askserievideo' // 问系列视频
+  AskserieVideo = 'askserievideo', // 问系列视频
+  YanxuanSpecialAuthor = 'yanxuanspecialauthor' // 专栏作者
 }
 interface IItemComponentProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -80,6 +82,7 @@ const ItemComponent: React.FC<IItemComponentProps> = props => {
       {itemType === IItemType.Industrialsource && <IndustrialSourceCard item={item.IndustrialResource} />}
       {itemType === IItemType.ReportSelection && <ReportSelectionCard item={item.ReportSelection} />}
       {itemType === IItemType.YanxuanSpecial && <YanxuanSpecialCard item={item.YanxuanSpecial} />}
+      {itemType === IItemType.YanxuanSpecialAuthor && <YanxuanSpecialAuthorCard item={item.YanxuanSpecialAuthor} />}
     </>
   )
 }

src/Material/components/YanxuanSpecialAuthorCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { EyeOutlined } from '@ant-design/icons'
+
+import { IYanxuanSpecialAuthorItem } from 'Newest/Newest.service'
+import styles from '../css/ItemComponent.module.scss'
+export interface IYanxuanSpecialCardProps {
+  item: IYanxuanSpecialAuthorItem
+  title?: string // 标红的标题
+}
+/**专栏笔记/观点组件 */
+const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
+  const { item, title } = props
+  const handleToDetail = () => {
+    window.open(`/column/view/${item.Id}`)
+  }
+  if (!item) return null
+  return (
+    <div className={styles['item-article']} onClick={handleToDetail}>
+      <div className="item-article-title">
+        <div
+          className="item-article-title-content"
+          dangerouslySetInnerHTML={{
+            __html: `<img src=${
+              item.LabelKeywordImgLink || 'https://hzstatic.hzinsights.com/cygx_web/config/zhuanlan.png'
+            } class="mfyx-label-img" />`
+          }}
+        />
+      </div>
+
+      <div className={`item-article-annotation line-seven`}>
+        <div className={styles['head-img-specia-nick']}>
+          <img src={item?.HeadImg} alt="" />
+          <div className={styles['specia-nick-name']}>
+            <p>{item?.SpecialName}</p>
+            <p>{item?.NickName}</p>
+          </div>
+        </div>
+        <p className={styles['author-introduce-box']}>{item?.Introduction}</p>
+        <div className={styles['columnindex-count-wrapper']}>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.SpecialArticleNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>文章</div>
+          </div>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.CollectNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>被收藏</div>
+          </div>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.FansNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>粉丝</div>
+          </div>
+        </div>
+      </div>
+      <div className="item-time-right item-article-flex">
+        <div className="item-article-pv"></div>
+        <div className="item-article-publistdate">{dayjs(item.LatestPublishDate || '').format('YYYY-MM-DD')}</div>
+      </div>
+    </div>
+  )
+}
+
+export default YanxuanSpecialCard

src/Material/css/ItemComponent.module.scss

@@ -29,9 +29,9 @@
       font-size: 16px;
       line-height: 24px;
       color: #333333;
-      padding-top: 16px;      
+      padding-top: 16px;
       border-bottom: 1px solid #ebebeb;
-      .item-article-title-content{
+      .item-article-title-content {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -339,3 +339,54 @@
     }
   }
 }
+
+.head-img-specia-nick {
+  display: flex;
+  img {
+    width: 60px;
+    height: 60px;
+  }
+  .specia-nick-name {
+    margin-left: 10px;
+    p {
+      white-space: nowrap; /* 确保文本在一行内显示 */
+      overflow: hidden; /* 隐藏溢出的内容 */
+      text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+    }
+    :nth-child(1) {
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 32px;
+      color: #333333;
+    }
+  }
+}
+.author-introduce-box {
+  font-size: 14px;
+  color: #333333;
+  margin: 10px 0 !important;
+}
+.columnindex-count-wrapper {
+  display: flex;
+  width: 80%;
+  margin: 0 auto !important;
+  border-radius: 2px;
+  justify-content: space-between;
+  background: #333;
+  padding: 10px 20px;
+  .columnindex-count-item {
+    text-align: center;
+    &:last-child {
+      margin-right: 0;
+    }
+    .columnindex-count {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffe8a8;
+      line-height: 20px;
+    }
+    .columnindex-count-title {
+      line-height: 20px;
+    }
+  }
+}

src/Newest/Newest.service.ts

@@ -94,6 +94,19 @@ export interface IYanxuanSpecialItem extends IColumnDetail {
   BodyHighlight: string[] // 标红的内容
   LabelKeywordImgLink: string
 }
+
+export interface IYanxuanSpecialAuthorItem extends IColumnDetail {
+  FansNum: number
+  LatestPublishDate: string
+  Annotation: string
+  AuthorStatus: number
+  BodyHighlight: string[] // 标红的内容
+  LabelKeywordImgLink: string
+  SpecialArticleNum: number
+  CollectNum: number
+  FollowNum: number
+}
+
 export interface IReportSelectionItem {
   Abstract: string
   ArticleId: number