haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact match center and enable league icons

Browse Source
This commit is contained in:
hajimi
2026-08-02 17:04:11 +08:00
parent 734ef15e8c
commit 95f03af60e
3 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_match/components/MatchCenterScheduleCard.vue
+52 -52
View File
@@ -140,9 +140,9 @@ const handlePrimaryAction = () => {
<style lang="scss" scoped>
.center-match-card {
padding: 22rpx 24rpx 20rpx;
padding: 16rpx 18rpx 14rpx;
border: 1rpx solid #e7eaf0;
border-radius: 24rpx;
border-radius: 18rpx;
background: #fff;
box-shadow: 0 10rpx 28rpx rgba(34, 48, 86, 0.07);
@@ -159,33 +159,33 @@ const handlePrimaryAction = () => {
&__head {
min-width: 0;
justify-content: space-between;
gap: 16rpx;
gap: 10rpx;
}
&__league {
min-width: 0;
flex: 1;
color: #202534;
font-size: 25rpx;
font-size: 22rpx;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
}
&__league-icon {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
&__league-dot {
width: 12rpx;
height: 12rpx;
margin-right: 12rpx;
width: 10rpx;
height: 10rpx;
margin-right: 9rpx;
border-radius: 50%;
background: #156bf6;
box-shadow: 0 0 0 6rpx #eaf2ff;
box-shadow: 0 0 0 5rpx #eaf2ff;
flex-shrink: 0;
}
@@ -198,53 +198,53 @@ const handlePrimaryAction = () => {
&__date {
color: #8b92a0;
font-size: 22rpx;
font-size: 20rpx;
flex-shrink: 0;
}
&__live-tag {
height: 38rpx;
padding: 0 14rpx;
gap: 8rpx;
border-radius: 10rpx;
height: 32rpx;
padding: 0 10rpx;
gap: 6rpx;
border-radius: 8rpx;
background: #fff0f0;
color: #f04444;
font-size: 21rpx;
font-size: 19rpx;
font-weight: 700;
flex-shrink: 0;
}
&__live-bars {
height: 20rpx;
gap: 4rpx;
height: 16rpx;
gap: 3rpx;
align-items: flex-end;
view {
width: 4rpx;
width: 3rpx;
border-radius: 4rpx;
background: #f04444;
&:nth-child(1) {
height: 10rpx;
height: 8rpx;
}
&:nth-child(2) {
height: 20rpx;
height: 16rpx;
}
&:nth-child(3) {
height: 15rpx;
height: 12rpx;
}
}
}
&__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 170rpx minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) 144rpx minmax(0, 1fr);
align-items: center;
gap: 12rpx;
min-height: 190rpx;
padding: 18rpx 8rpx 12rpx;
gap: 8rpx;
min-height: 154rpx;
padding: 14rpx 4rpx 10rpx;
}
&__team,
@@ -256,8 +256,8 @@ const handlePrimaryAction = () => {
}
&__team-logo {
width: 86rpx;
height: 86rpx;
width: 72rpx;
height: 72rpx;
flex-shrink: 0;
&--fallback {
@@ -267,16 +267,16 @@ const handlePrimaryAction = () => {
justify-content: center;
background: linear-gradient(145deg, #eaf2ff 0%, #d9e7ff 100%);
color: #176cf6;
font-size: 32rpx;
font-size: 28rpx;
font-weight: 800;
}
}
&__team-name {
width: 100%;
margin-top: 12rpx;
margin-top: 8rpx;
color: #171b26;
font-size: 28rpx;
font-size: 24rpx;
font-weight: 700;
line-height: 1.3;
text-align: center;
@@ -291,7 +291,7 @@ const handlePrimaryAction = () => {
&__score {
color: #111522;
font-size: 48rpx;
font-size: 40rpx;
font-weight: 800;
letter-spacing: 3rpx;
line-height: 1;
@@ -299,9 +299,9 @@ const handlePrimaryAction = () => {
&__minute,
&__day {
margin-top: 14rpx;
margin-top: 10rpx;
color: #4e5667;
font-size: 23rpx;
font-size: 21rpx;
&--live {
color: #10a83d;
@@ -310,31 +310,31 @@ const handlePrimaryAction = () => {
}
&__status-text {
margin-top: 5rpx;
margin-top: 4rpx;
color: #10a83d;
font-size: 22rpx;
font-size: 20rpx;
}
&__time {
margin-top: 6rpx;
margin-top: 4rpx;
color: #116cf7;
font-size: 38rpx;
font-size: 32rpx;
font-weight: 800;
line-height: 1.1;
}
&__actions {
gap: 26rpx;
gap: 14rpx;
}
&__button {
flex: 1;
min-width: 0;
height: 68rpx;
height: 54rpx;
justify-content: center;
gap: 12rpx;
border-radius: 14rpx;
font-size: 27rpx;
gap: 8rpx;
border-radius: 12rpx;
font-size: 23rpx;
font-weight: 700;
box-sizing: border-box;
@@ -354,19 +354,19 @@ const handlePrimaryAction = () => {
&__play-icon {
width: 0;
height: 0;
border-top: 9rpx solid transparent;
border-bottom: 9rpx solid transparent;
border-left: 14rpx solid #fff;
border-top: 8rpx solid transparent;
border-bottom: 8rpx solid transparent;
border-left: 12rpx solid #fff;
}
&__ai-mark {
height: 34rpx;
min-width: 34rpx;
padding: 0 6rpx;
height: 30rpx;
min-width: 30rpx;
padding: 0 5rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.22);
font-size: 18rpx;
line-height: 34rpx;
font-size: 16rpx;
line-height: 30rpx;
text-align: center;
}