XDProjects/css/version2/index.less

.research-interests{
    &{
        background-color: #005389F5;
    }
    .head{
        height: 180px;
        background-image: url(../../images/version2/index/research-interests-head.png);
        background-size: 28% 100%;
        background-repeat: no-repeat;
        font-size: 40px;
        color: #fff;
        .body-container{
            height: 100%;
            display: flex;
            align-items: center;
            .title{
                width: 640px;
                text-align: justify;
            }            
        }
    }
    .research-interests-content{
        padding: 120px 0;
        .body-container{
            &{
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
            }     
            .item{
                &{
                    width: 50%;
                    padding-right: 50px;
                    box-sizing: border-box;                    
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 50px;
                }
                &:nth-child(2n){
                    padding-right: 0;
                    padding-left: 50px;
                } 
                &:nth-child(1),&:nth-child(2)  {
                    margin-top: 0;
                }               
                .logo{
                   width: 100px; 
                   height: 76px;
                   img{
                        display: block;
                        width: 100%; 
                        height: 100%;
                   }
                }
                .info{
                    width: 478px; 
                    height: 76px;  
                    flex: 1; 
                    background-image: url(../../images/version2/index/research-interests-bg.png);     
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    text-indent: 30px;
                    line-height: 76px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    a{
                        font-size: 18px;
                        color: #fff;
                    } 
                    &:hover{
                        a{
                            color: #E0620D;
                            text-decoration: underline;
                        }
                    }       
                }
            }                 
        }
    }
}
.new_center{
    &{
        background-image: url(../../images/version2/index/newsBg.png);     
        background-size: 100% 100%;
        background-repeat: no-repeat;     
        padding-bottom: 100px;  
    }
    .body-container{
        .head{
            height: 194px;
            display: flex;
            justify-content: space-between;
            align-items: center;   
            .title{
                color: #E0620D;
                font-size: 40px;
                font-weight: bold;
                position: relative;
                &::after{
                    display: block;
                    content: "";
                    position: absolute;
                    width: 199px;
                    height: 52px;
                    top: 26px;
                    left: 0;
                    z-index: 9999;
                    background-image: url(../../images/version2/index/NEWS.png);     
                    background-size: 100% 100%;
                    background-repeat: no-repeat;                      
                }
            }   
            .more{
                width: 122px;
                height: 30px;    
                line-height: 30px;            
                background-image: url(../../images/version2/index/news_more.png);     
                background-size: 100% 100%;
                background-repeat: no-repeat;   
                text-align: center; 
                span{
                    position: relative;
                    &::after{
                        display: block;
                        content: "";
                        width: 20px;
                        background-color: #333;
                        height: 1px;
                        position: absolute;
                        left: 100%;
                        top: 50%;
                        margin-left: 3px;
                    }
                    a{
                        color: #333;
                        font-size: 14px;                        
                    } 
                } 
                &:hover{
                    background-image: url(../../images/version2/index/news_more_hover.png);  
                    span{
                        a{
                            color: #fff;
                        }
                        &::after{
                            background-color: #fff;
                        }  
                    }                 
                }             
            }      
        }
        .news_content{
            &{
                display: flex;
                justify-content: space-between;
            }            
            .new_card{
                img{
                    width: 600px;
                    height: 398px;
                    display: block;
                }
                .info{
                    &{
                        width: 600px;
                        height: 132px;
                        color: #333;
                        background-color: #fff;
                        padding: 34px 0 0 40px;
                        position: relative;
                        box-sizing: border-box;
                    }
                    &::after{
                        display: block;
                        content: "";
                        position: absolute;
                        width: 4px;
                        height: 70%;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background-color: #ED6D17;
                    }
                    .time{
                        font-size: 16px;
                        line-height: 22px;
                    }
                    .message{
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        line-height: 28px;
                        margin-top: 12px;
                        a{
                            color: #333;
                            font-size: 16px;
                            &:hover{
                                color: #E0620D;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
            .new_list_container{
                .item{
                    &{
                        width: 500px;
                        height: 76px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding: 8px;
                        box-sizing: border-box;
                        background-color: #E2D8CF;
                        margin-top: 24px;
                    }
                    .logo{
                        .number,.time{
                            width: 66px;
                            height: 30px;
                            background-color: #ED6D17;
                            font-size: 18px;
                            font-weight: 600;
                            color: #fff; 
                            text-align: center;
                            line-height: 30px;
                        }
                        .time{
                            background-color: #005389;     
                            font-size: 12px;                                               
                        }
                    }
                    .info{
                        flex: 1;
                        line-height: 22px;
                        padding: 16px;
                        a{
                            font-size: 14px;
                            color: #333;
                            text-overflow: -o-ellipsis-lastline;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            line-clamp: 3;
                            -webkit-box-orient: vertical;   
                            &:hover{
                                color: #E0620D;
                            }                     
                        }
                    }
                }
            } 
        }       
    }
}