3.3.1 提测

src/Material/components/YanxuanSpecialAuthorCard.tsx

@@ -18,7 +18,7 @@ const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
   if (!item) return null
   return (
     <div className={styles['item-article']} onClick={handleToDetail}>
-      <div className="item-article-title">
+      <div className="item-article-title-author">
         <div
           className="item-article-title-content"
           dangerouslySetInnerHTML={{
@@ -29,12 +29,12 @@ const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
         />
       </div>
 
-      <div className={`item-article-annotation line-seven`}>
+      <div>
         <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>{item?.SpecialName}</div>
+            <div>{item?.NickName}</div>
           </div>
         </div>
         <p className={styles['author-introduce-box']}>{item?.Introduction}</p>

src/Material/css/ItemComponent.module.scss

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