优化样式

src/components/title/index.scss

@@ -35,5 +35,9 @@
   }
   &.font-22:hover::before{
     font-size: 17px;
+    top: 4px;
+  }
+  &.font-20:hover::before{
+    top: 5px;
   }
 }

src/forge/Head/Header.js

@@ -324,7 +324,7 @@ class NewHeader extends Component {
     } = this.state;
     const navbarlist = [
       {
-        "name": "军用可控开源社区",
+        "name": "菌用可控开源社区",
         "link": "/factory",
         "index": "1",
         "hidden": false

src/forge/Main/projecthome/v2/components/communityDynamic.jsx

@@ -4,6 +4,7 @@ import { getSubDocList, getNewsDetail } from '../../../../Information/api';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import moment from 'moment';
 import { rollingButton, slidingArrowButton } from '../../../../../components/button';
+import { HoverUnderline } from '../../../../../components/title';
 
 const CommunityDynamic = ({isVisible}) => {
   const [list1, setList1] = useState([]);
@@ -65,7 +66,11 @@ const CommunityDynamic = ({isVisible}) => {
           {list1.slice(1,5).map((item, index) => (
             <Fragment key={index}>
               <div className="news-item-v2">
-                <Link to={`/news/${item.id}`}><div className='font-20 font-bd title-border-to-right task-hide'>{item.name}</div></Link>
+                <Link to={`/news/${item.id}`}>
+                  <HoverUnderline classname='font-20 font-bd task-hide'>
+                    {item.name}
+                  </HoverUnderline>
+                </Link>
                 <p className='task-hide-2 opacity8' style={{ lineHeight: 'normal' }}>{item.summary}</p>
               </div>
               {index < 3 && <Divider type="vertical" style={{ height: '60px' }} className="mt20 opacity8" />}
@@ -109,7 +114,7 @@ const CommunityDynamic = ({isVisible}) => {
             {list3.slice(0,4).map((item, index) => (
               <li key={index} className="activity-item-v2 df">
                 <span className="font-16 flex1 AlignCenter">
-                  {/* <Link to={`/news/${item.id}`} className="title-border-to-right task-hide">{item.name}</Link> */}
+                  {/* <Link to={`/news/${item.id}`} className="task-hide">{item.name}</Link> */}
                   <span className='task-hide'>{item.name}</span>
                   {index === 0 && <span className="hot-tag color-white ml5">NEW</span>}
                 </span>

src/forge/projectHome/projectList/index.jsx

@@ -5,6 +5,7 @@ import axios from "axios";
 import { Link } from "react-router-dom";
 import { getImageUrl, timeAgo } from "educoder";
 import Nodata from "../../Nodata";
+import { HoverUnderline } from "../../../components/title";
 const { Panel } = Collapse;
 
 // 开源协作首页
@@ -190,7 +191,11 @@ function ProjectList() {
                   <div className="FlexAJ">
                     <div className="AlignCenter flex1">
                       {author.image_url && <img src={getImageUrl(`${author.image_url}`)} alt="" className="author_img mr10" />}
-                      <Link to={url} className="task-hide font-22 title-border-to-right" title={i.name}>{author.name}/{i.name}</Link>
+                      <Link to={url} className="task-hide" title={i.name}>
+                        <HoverUnderline classname="font-22 project_list_all_list_item-name task-hide">
+                          {author.name}/{i.name}
+                        </HoverUnderline>
+                      </Link>
                     </div>
                     <span className="count_box ml30">
                       {/* 点赞数 */}

src/forge/projectHome/projectList/index.scss

@@ -10,46 +10,6 @@
     color: #2149d4;
   }
 
-  // 标题悬停：下划线从左到右滑出
-  .title-border-to-right {
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      content: '';
-      width: 0;
-      height: 1px;
-      background-color: #2149d4;
-      transition: all 0.5s ease;
-    }
-
-    &:hover {
-      padding-right: 30px;
-
-      &+.hot-tag {
-        display: none;
-      }
-    }
-
-    &:hover::after {
-      width: 100%;
-    }
-
-    &:hover::before {
-      content: "\e9c4";
-      font-family: 'iconfont';
-      font-weight: normal;
-      position: absolute;
-      right: 0px;
-      font-size: 16px;
-      top: 6px;
-    }
-  }
-
   .author_img {
     width: 24px;
     height: 24px;
@@ -267,12 +227,28 @@
     padding: 2px 25px;
     background-color: #f7f9fd;
     border-radius: 17px;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(120deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
+      transition-delay: 0.5s;
+    }
 
     &.active {
       font-weight: normal;
       font-size: 16px;
       color: #ffffff;
       background-color: #091221;
+      &::before {
+        left: 100%;
+        transition: left 0.5s ease-in-out;
+      }
     }
   }
 }
@@ -379,6 +355,14 @@
         height: 30px;
         border-radius: 6px;
       }
+      .project_list_all_list_item-name{
+        &:hover{
+          padding-right: 30px;
+          &::before{
+            top: 5px;
+          }
+        }
+      }
 
       .count_box span {
         padding: 4px 12px;

src/forums/list/index.jsx

@@ -10,6 +10,7 @@ import icon10 from '../image/icon10.png';
 import Nodata from "../../forge/Nodata";
 import { forumSectionId } from "../static";
 import { rollingButton } from "../../components/button";
+import { HoverUnderline } from "../../components/title";
 
 function List(props) {
   const {mygetHelmetapi, location} = props;
@@ -220,7 +221,11 @@ function List(props) {
               return <div className="forums-list4-item">
                 <div className="pr80 AlignCenter">
                   {orderIndex < 3 ? <img src={sortImg1[orderIndex]} width={24} className="mr10"/> : <span className="font-bd font-20 mr10">{orderIndex + 1}</span>}
-                  <Link to={`/forums/${item.id}`} className="forums-list4-item-link font-22 task-hide">{item.subject}<i className="iconfont icon-jiantou3 ml5 font-20"></i></Link>
+                  <Link to={`/forums/${item.id}`} className="forums-list4-item-link task-hide">
+                    <HoverUnderline classname="font-22 task-hide">
+                      {item.subject}
+                    </HoverUnderline>
+                  </Link>
                   {item.sticky && <Tag color="#d06d3c">置顶</Tag>}
                   {item.is_original && <Tag color="#7e41f1">原创</Tag>}
                   {item.is_fine && <Tag color="#2E89FF">精华</Tag>}

src/forums/list/index.scss

@@ -238,27 +238,9 @@
     }
   }
   .forums-list4-item-link{
-    position: relative;
-    .icon-jiantou3{
-      display: none;
-    }
-    &::before{
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 1px;
-      background-color: #2149d4;
-      transition: width 1s ease;
-    }
     &:hover{
-      color:#2149d4;
-      &::before{
-        width: 100%;
-      }
-      .icon-jiantou3{
-        display: inline-block;
+      .hover-underline{
+        padding-right: 30px;
       }
       & ~ .ant-tag{
         display: none;

src/news/list/index.jsx

@@ -104,11 +104,11 @@ function List() {
       <div className="activities-box pb80">
         <div className="font-40 font-bd center mb60 pt60">精彩活动</div>
         {firstActivity && <div className="first-activity width1600 FlexAJ">
-          <Link style={{whiteSpace: 'break-spaces'}} className="font-36 font-bd lineh-50" to={`/news/${firstActivity.id}`}>{firstActivity.summary}</Link>
+          <Link style={{whiteSpace: 'break-spaces'}} className="font-36 font-bd lineh-50 first-activity-name" to={`/news/${firstActivity.id}`}>{firstActivity.summary}</Link>
           <img src={firstActivity.headImg} alt="" width={186} className="headImg"/>
           <span className="font-38 font-bd lineh-50">{moment(firstActivity.name).format('MM/DD')}<br/>{moment(firstActivity.name).format('HH:MM')}</span>
           <RenderHtml value={firstActivity.content} className="first-activity-content"/>
-          <img src={require('../image/icon1.png')} style={{width: '88px', height: '88px'}}/>
+          <Link to={`/news/${firstActivity.id}`}><i className="iconfont icon-jiantou4"></i></Link>
         </div>}
         <div className="activity-list-box width1600 pt40">
           {list2.slice(1, 6).map(item=>{

src/news/list/index.scss

@@ -95,6 +95,14 @@
     position: relative;
     bottom: -15px;
   }
+  .icon-jiantou4{
+    font-size: 90px !important;
+  }
+  &:hover{
+    .icon-jiantou4{
+      color: #2149d4;
+    }
+  }
 }
 .firstDynamics{
   background-image: url('../image/bk3.png');