0

我想将人员信息的水平列表制作为卡片。我将在 Angular 中使用 matcard 组件的 ngfor。

相关专家.component.html：

<div  [ngStyle]="{'direction' :rtl? 'rtl':'ltr'}" style="margin:1%">
<h3 class="title">{{"relevantExperts.title"|transloco|uppercase}}</h3>

<div class="horizontalListContainer" >
<div [ngClass]="{'horizontalListRtl':rtl,'horizontalListLtr':!rtl}">
    <app-relevant-experts-card *ngFor="let person of relevantExpertsPersons" [relevantExpert]=person [lang]='this.lang'></app-relevant-experts-card>
</div>
<button mat-fab [ngClass]="{'buttonRtl':rtl,'buttonLtr':!rtl}"><mat-icon class="moreIcon" style="color:black">more_horiz</mat-icon></button>
</div>

相关专家.component.css：

    .title
{
    color: rgb(58,141,222);
    font-weight: 500;  
}

.horizontalListLtr
{
    display:flex; 
    overflow:hidden;
    mask-image: linear-gradient(to left,rgba(0,0,0,0),#000,#000, #000);
}

.horizontalListRtl
{
    display:flex; 
    overflow:hidden;
    mask-image: linear-gradient(to right,rgba(0,0,0,0),#000,#000, #000);
}

.buttonRtl
{
    position: absolute;
    align-self: center;
    left: 40px;
    background-color: rgb(230, 230, 230);
    box-shadow: none !important;
    border-style: solid;
    border-color:rgb(170, 170, 170) ;
    border-width: 1px;
    height: 65px;
    width: 65px;
}

.buttonLtr
{
    position: absolute;
    align-self: center;
    right: 40px;
    background-color: rgb(230, 230, 230);
    box-shadow: none !important;
    border-style: solid;
    border-color:rgb(170, 170, 170) ;
    border-width: 1px;
    height: 65px;
    width: 65px;
}

.buttonRtl:hover .moreIcon 
{
    animation: moreIconColorChange 0.25s ease-in-out;
    animation-fill-mode: both;
}


.buttonLtr:hover .moreIcon 
{
    animation: moreIconColorChange 0.25s ease-in-out;
    animation-fill-mode: both;
}

.horizontalListContainer
{
    position: relative;
    display: flex;
}

@keyframes moreIconColorChange
{
    from
    {
        color: black;
    }
    to
    {
        color: rgb(58,141,222);;
    }
}

相关专家卡组件：

.mat-card
{
    position:relative;
    display:flex;
    height :60px;
    width: 210px;
    margin: 10px;
    border-radius: 3cm;
    box-shadow: 0 0 30px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
}

.mat-card-avatar
{
    display:flex;
    position:relative;
    align-self: center;
    transform:scale(140%);
}

.mat-card-avatar-image
{
    border-radius: 100%;
}

.mat-card-text-block
{
    position:absolute;
    top: 8px;
    left: 65px;
}

.mat-card:hover
{
    animation: cardHover 0.25s ease-in-out;
    animation-fill-mode: both;
    cursor: pointer;
}

.mat-card:hover .icon 
{
    animation: arrowIcon 0.25s linear;
    animation-fill-mode: both;
}

.iconAr
{
    position:absolute; 
    display: flex;
    align-self: center; 
    transform: rotate(180deg);
    left: 10px;
}

.iconOther
{
    position:absolute; 
    display: flex;
    align-self: center;
    right: 10px;
}

@keyframes cardHover
{
    from
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1.05);
    }
}

@keyframes arrowIcon
{
    from
    {
        transform: translateX(0);
    }
    to
    {
        transform: translateX(5px);
        color: rgb(58,141,222);
    }
}
    <mat-card class="mat-card" (click)="relevantExpertClicked()">
    <mat-card-header>
        <div mat-card-avatar class="mat-card-avatar" [ngStyle]="{'left':lang==='ar'?'6px':'-6px'}">
            <img class="mat-card-avatar-image" src="{{relevantExpert.image}}">
        </div>

        <div class="mat-card-text-block">    
            <mat-card-title><p style="font-size: 15px;">{{relevantExpert.name}}</p></mat-card-title>
            <mat-card-subtitle><p style="font-size: 15px;">{{relevantExpert.occupation |transloco}}</p></mat-card-subtitle>
        </div>

    </mat-card-header>

    <div [ngClass]="{'iconAr':lang=='ar','iconOther':lang!='ar'}">
        <mat-icon class="icon">arrow_forward</mat-icon>
    </div>
</mat-card>

我能够或多或少地使用brite force和重复代码创建它，但我想以两种方式优化我的代码：

1- 该网站也有阿拉伯语版本，因此需要 rtl 方向。但是，并非我卡内的所有组件都被翻转（例如人的图标和箭头图标）。什么会导致这个问题？

2- 我给出的尺寸以像素为单位。但是，我希望组件具有相对大小（百分比）。但是，一旦我使用百分比，卡片就会立即变形和不居中。

谁能帮我识别我在代码中犯的错误？将不胜感激。

谢谢你！

4

0 回答 0