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
admin/src/views/match/league/index.vue
+1 -1
View File
@@ -67,7 +67,7 @@
<el-input v-model="editData.label" <el-input v-model="editData.label"
:placeholder="editData.type === 'sport' ? '请输入体育类型名称' : '请输入联赛名称'" /> :placeholder="editData.type === 'sport' ? '请输入体育类型名称' : '请输入联赛名称'" />
</el-form-item> </el-form-item>
<el-form-item v-if="editData.type === 'sport'" label="图标"> <el-form-item label="图标">
<material-picker v-model="editData.icon" :limit="1" /> <material-picker v-model="editData.icon" :limit="1" />
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="排序">
uniapp/src/packages_match/components/MatchCenterScheduleCard.vue
+52 -52
View File
@@ -140,9 +140,9 @@ const handlePrimaryAction = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.center-match-card { .center-match-card {
padding: 22rpx 24rpx 20rpx; padding: 16rpx 18rpx 14rpx;
border: 1rpx solid #e7eaf0; border: 1rpx solid #e7eaf0;
border-radius: 24rpx; border-radius: 18rpx;
background: #fff; background: #fff;
box-shadow: 0 10rpx 28rpx rgba(34, 48, 86, 0.07); box-shadow: 0 10rpx 28rpx rgba(34, 48, 86, 0.07);
@@ -159,33 +159,33 @@ const handlePrimaryAction = () => {
&__head { &__head {
min-width: 0; min-width: 0;
justify-content: space-between; justify-content: space-between;
gap: 16rpx; gap: 10rpx;
} }
&__league { &__league {
min-width: 0; min-width: 0;
flex: 1; flex: 1;
color: #202534; color: #202534;
font-size: 25rpx; font-size: 22rpx;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
&__league-icon { &__league-icon {
width: 34rpx; width: 28rpx;
height: 34rpx; height: 28rpx;
margin-right: 10rpx; margin-right: 8rpx;
flex-shrink: 0; flex-shrink: 0;
} }
&__league-dot { &__league-dot {
width: 12rpx; width: 10rpx;
height: 12rpx; height: 10rpx;
margin-right: 12rpx; margin-right: 9rpx;
border-radius: 50%; border-radius: 50%;
background: #156bf6; background: #156bf6;
box-shadow: 0 0 0 6rpx #eaf2ff; box-shadow: 0 0 0 5rpx #eaf2ff;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -198,53 +198,53 @@ const handlePrimaryAction = () => {
&__date { &__date {
color: #8b92a0; color: #8b92a0;
font-size: 22rpx; font-size: 20rpx;
flex-shrink: 0; flex-shrink: 0;
} }
&__live-tag { &__live-tag {
height: 38rpx; height: 32rpx;
padding: 0 14rpx; padding: 0 10rpx;
gap: 8rpx; gap: 6rpx;
border-radius: 10rpx; border-radius: 8rpx;
background: #fff0f0; background: #fff0f0;
color: #f04444; color: #f04444;
font-size: 21rpx; font-size: 19rpx;
font-weight: 700; font-weight: 700;
flex-shrink: 0; flex-shrink: 0;
} }
&__live-bars { &__live-bars {
height: 20rpx; height: 16rpx;
gap: 4rpx; gap: 3rpx;
align-items: flex-end; align-items: flex-end;
view { view {
width: 4rpx; width: 3rpx;
border-radius: 4rpx; border-radius: 4rpx;
background: #f04444; background: #f04444;
&:nth-child(1) { &:nth-child(1) {
height: 10rpx; height: 8rpx;
} }
&:nth-child(2) { &:nth-child(2) {
height: 20rpx; height: 16rpx;
} }
&:nth-child(3) { &:nth-child(3) {
height: 15rpx; height: 12rpx;
} }
} }
} }
&__body { &__body {
display: grid; 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; align-items: center;
gap: 12rpx; gap: 8rpx;
min-height: 190rpx; min-height: 154rpx;
padding: 18rpx 8rpx 12rpx; padding: 14rpx 4rpx 10rpx;
} }
&__team, &__team,
@@ -256,8 +256,8 @@ const handlePrimaryAction = () => {
} }
&__team-logo { &__team-logo {
width: 86rpx; width: 72rpx;
height: 86rpx; height: 72rpx;
flex-shrink: 0; flex-shrink: 0;
&--fallback { &--fallback {
@@ -267,16 +267,16 @@ const handlePrimaryAction = () => {
justify-content: center; justify-content: center;
background: linear-gradient(145deg, #eaf2ff 0%, #d9e7ff 100%); background: linear-gradient(145deg, #eaf2ff 0%, #d9e7ff 100%);
color: #176cf6; color: #176cf6;
font-size: 32rpx; font-size: 28rpx;
font-weight: 800; font-weight: 800;
} }
} }
&__team-name { &__team-name {
width: 100%; width: 100%;
margin-top: 12rpx; margin-top: 8rpx;
color: #171b26; color: #171b26;
font-size: 28rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
line-height: 1.3; line-height: 1.3;
text-align: center; text-align: center;
@@ -291,7 +291,7 @@ const handlePrimaryAction = () => {
&__score { &__score {
color: #111522; color: #111522;
font-size: 48rpx; font-size: 40rpx;
font-weight: 800; font-weight: 800;
letter-spacing: 3rpx; letter-spacing: 3rpx;
line-height: 1; line-height: 1;
@@ -299,9 +299,9 @@ const handlePrimaryAction = () => {
&__minute, &__minute,
&__day { &__day {
margin-top: 14rpx; margin-top: 10rpx;
color: #4e5667; color: #4e5667;
font-size: 23rpx; font-size: 21rpx;
&--live { &--live {
color: #10a83d; color: #10a83d;
@@ -310,31 +310,31 @@ const handlePrimaryAction = () => {
} }
&__status-text { &__status-text {
margin-top: 5rpx; margin-top: 4rpx;
color: #10a83d; color: #10a83d;
font-size: 22rpx; font-size: 20rpx;
} }
&__time { &__time {
margin-top: 6rpx; margin-top: 4rpx;
color: #116cf7; color: #116cf7;
font-size: 38rpx; font-size: 32rpx;
font-weight: 800; font-weight: 800;
line-height: 1.1; line-height: 1.1;
} }
&__actions { &__actions {
gap: 26rpx; gap: 14rpx;
} }
&__button { &__button {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 68rpx; height: 54rpx;
justify-content: center; justify-content: center;
gap: 12rpx; gap: 8rpx;
border-radius: 14rpx; border-radius: 12rpx;
font-size: 27rpx; font-size: 23rpx;
font-weight: 700; font-weight: 700;
box-sizing: border-box; box-sizing: border-box;
@@ -354,19 +354,19 @@ const handlePrimaryAction = () => {
&__play-icon { &__play-icon {
width: 0; width: 0;
height: 0; height: 0;
border-top: 9rpx solid transparent; border-top: 8rpx solid transparent;
border-bottom: 9rpx solid transparent; border-bottom: 8rpx solid transparent;
border-left: 14rpx solid #fff; border-left: 12rpx solid #fff;
} }
&__ai-mark { &__ai-mark {
height: 34rpx; height: 30rpx;
min-width: 34rpx; min-width: 30rpx;
padding: 0 6rpx; padding: 0 5rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.22);
font-size: 18rpx; font-size: 16rpx;
line-height: 34rpx; line-height: 30rpx;
text-align: center; text-align: center;
} }
uniapp/src/packages_match/components/MatchCenterTabsPanel.vue
+14 -14
View File
@@ -1024,19 +1024,19 @@ onMounted(() => {
} }
.match-group { .match-group {
padding-top: 14rpx; padding-top: 8rpx;
&__header { &__header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14rpx 34rpx 16rpx; padding: 10rpx 24rpx;
gap: 10rpx; gap: 8rpx;
background: #f7f8fb; background: #f7f8fb;
} }
&__dot { &__dot {
width: 16rpx; width: 14rpx;
height: 16rpx; height: 14rpx;
border-radius: 50%; border-radius: 50%;
&--live { &--live {
@@ -1053,13 +1053,13 @@ onMounted(() => {
} }
&__title { &__title {
font-size: 31rpx; font-size: 28rpx;
font-weight: 800; font-weight: 800;
color: #222735; color: #222735;
} }
&__count { &__count {
font-size: 23rpx; font-size: 21rpx;
color: #7f8592; color: #7f8592;
} }
@@ -1067,14 +1067,14 @@ onMounted(() => {
margin-left: auto; margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10rpx; gap: 6rpx;
color: #747b88; color: #747b88;
font-size: 23rpx; font-size: 21rpx;
} }
&__arrow { &__arrow {
color: #737b89; color: #737b89;
font-size: 42rpx; font-size: 34rpx;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
transition: transform 0.25s ease; transition: transform 0.25s ease;
@@ -1087,23 +1087,23 @@ onMounted(() => {
.match-card-wrap { .match-card-wrap {
position: relative; position: relative;
margin: 0 34rpx 22rpx; margin: 0 24rpx 14rpx;
} }
.match-content__bottom-space { .match-content__bottom-space {
height: calc(120rpx + env(safe-area-inset-bottom)); height: calc(100rpx + env(safe-area-inset-bottom));
} }
.content-loading, .content-loading,
.content-empty, .content-empty,
.content-nomore { .content-nomore {
padding: 70rpx 0; padding: 50rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10rpx; gap: 10rpx;
color: #8b93a7; color: #8b93a7;
font-size: 24rpx; font-size: 22rpx;
} }
.content-loading { .content-loading {