【发布时间】：2023-04-07 00:08:01
【问题描述】：
我想根据团队颜色在角度为每个团队设置不同的颜色，并且数据 teamid 来自后端。
我正在使用 *ngFor 显示匹配列表，因此无法设置每个匹配 div 的样式。请向我建议如何动态设置 .card:after 样式。
我尝试过使用 [style.--card:after]='blue' 但它不起作用
这里是我的代码的 GitHub 链接：https://github.com/suraj903/SportsGeek-WebApp/tree/master/src/app/user/match-list
现场链接：https://sportsgeek-webapp.herokuapp.com/ 用户名：帕坦伽利 密码：123123
html :-
<body [style.background-image]="'url(' + stadium + ')'">
<div class="card" *ngFor="let matchdata of matchData" routerLink="betting-page/{{matchdata.matchId}}">
<h2> {{matchdata.name}}</h2>
<div class="match-details">
<div class="team1">
<img loading="lazy" style="border-radius: 50%; " src={{matchdata.team1Logo}} />
<h3 class="team-name"> {{matchdata.team1}} </h3>
</div>
<div class="details">
<h3 class="date"> {{matchdata.startDatetime | date :'medium':'UTC' }} </h3>
<h1 class="versus">VS</h1>
<h4 class="venue"> {{matchdata.venue}} </h4>
</div>
<div class="team2">
<img loading="lazy" style="border-radius: 50%; " src="{{matchdata.team2Logo}}" />
<h3 class="team-name">{{matchdata.team2}} </h3>
</div>
</div>
</div>
</body>
CSS :-
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
height: auto;
align-self: flex-start;
}
.card {
transform: translate(-4%, 5%);
width: auto;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
overflow: hidden;
transition: 0.5s;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
height: 100%;
margin: 20px;
}
.card:hover {
background: #fff;
}
.card:before {
content: '';
position: absolute;
bottom: -70%;
left: -120%;
width: 100%;
height: 100%;
background: #7300ab;
transition: 0.5s;
z-index: -1;
box-sizing: border-box;
border-top: 5px solid #430064;
transform: skewX(-5deg);
}
.card:hover:before {
left: -50%;
}
.card:after {
content: '';
position: absolute;
bottom: -70%;
right: -120%;
width: 100%;
height: 100%;
background: #ff0;
transition: 0.5s;
z-index: -1;
box-sizing: border-box;
border-top: 5px solid #ef9b0f;
transform: skewX(-5deg);
}
.card:hover:after {
right: -50%;
}
.card h2 {
width: 100%;
margin: 0;
padding: 20px;
text-align: center;
box-sizing: border-box;
transition: 0.5s;
}
.card:hover h2 {
background: #ff0057;
color: #fff;
}
.match-details {
position: relative;
}
.versus {
width: 50px;
height: 50px;
font-size: 24px;
border-radius: 50%;
background: #e91e63;
color: #fff;
text-align: center;
line-height: 50px;
margin: 20px auto;
}
.venue {
padding-bottom: 100px;
}
.date {
margin: 20px 0 0;
}
.team1 {
width: 200px;
float: left;
padding: 10px 20px 20px;
box-sizing: border-box;
text-align: center;
}
.team2 {
width: 200px;
float: left;
padding: 10px 20px 20px;
box-sizing: border-box;
text-align: center;
}
.team1 img,
.team2 img {
width: 100%;
}
.details {
width: 200px;
min-height: 200px;
float: left;
text-align: center;
}
h3.team-name {
padding: 15px 0 0;
text-align: right;
transition: 0.5s;
margin-top: 40px;
}
.team1 h3.team-name {
text-align: left;
}
.card:hover .team1 h3.team-name {
color: white;
}
【问题讨论】：
-
请。将代码的相关部分作为文本添加到问题中。
-
no @ChristophLütjen 它没有回答我的问题。我已经添加了有问题的html和css代码，请看一下。
-
据我了解，您想在卡上应用差异样式取决于团队 ID 吗？
-
是的 @AmirSaadallah 和 teamId 来自后端使用 forloop 所以我不能将样式应用于每个 div 中的不同团队......