style: compact match odds panel
This commit is contained in:
@@ -160,30 +160,30 @@ onMounted(() => void fetchOdds())
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.odds-board { min-height: 100%; padding: 28rpx 24rpx 40rpx; box-sizing: border-box; background: #f8fafc; }
|
||||
.odds-board__heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 4rpx 24rpx; }
|
||||
.odds-board__title { display: block; color: #111827; font-size: 34rpx; font-weight: 700; }
|
||||
.odds-board__hint, .odds-board__time { color: #9aa2ad; font-size: 22rpx; }
|
||||
.odds-board__hint { display: block; margin-top: 8rpx; }
|
||||
.market-tabs { display: flex; gap: 16rpx; margin-bottom: 20rpx; }
|
||||
.market-tabs__item { flex: 1; height: 70rpx; display: flex; align-items: center; justify-content: center; border-radius: 18rpx; background: #f1f3f6; color: #707781; font-size: 27rpx; }
|
||||
.odds-board { min-height: 100%; padding: 20rpx 18rpx 28rpx; box-sizing: border-box; background: #f8fafc; }
|
||||
.odds-board__heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 2rpx 16rpx; }
|
||||
.odds-board__title { display: block; color: #111827; font-size: 30rpx; font-weight: 700; }
|
||||
.odds-board__hint, .odds-board__time { color: #9aa2ad; font-size: 20rpx; }
|
||||
.odds-board__hint { display: block; margin-top: 4rpx; }
|
||||
.market-tabs { display: flex; gap: 10rpx; margin-bottom: 14rpx; }
|
||||
.market-tabs__item { flex: 1; height: 58rpx; display: flex; align-items: center; justify-content: center; border-radius: 14rpx; background: #f1f3f6; color: #707781; font-size: 24rpx; }
|
||||
.market-tabs__item--active { background: #1769ff; color: #fff; font-weight: 600; box-shadow: 0 10rpx 24rpx rgba(23, 105, 255, .18); }
|
||||
.odds-table-wrap { overflow: hidden; border: 1rpx solid #e5e9ef; border-radius: 18rpx; background: #fff; }
|
||||
.odds-table { width: 100%; }
|
||||
.odds-table__row { min-height: 72rpx; display: grid; grid-template-columns: 1.05fr 1.1fr 1.25fr 1.1fr .9fr; align-items: center; border-top: 1rpx solid #edf0f4; color: #343941; font-size: 23rpx; text-align: center; }
|
||||
.odds-table__row { min-height: 62rpx; display: grid; grid-template-columns: 1.05fr 1.1fr 1.25fr 1.1fr .9fr; align-items: center; border-top: 1rpx solid #edf0f4; color: #343941; font-size: 21rpx; text-align: center; }
|
||||
.odds-table__row:first-child { border-top: 0; }
|
||||
.odds-table__row--head { min-height: 68rpx; background: #f8fafc; color: #69717d; font-size: 22rpx; }
|
||||
.odds-table__row--head { min-height: 56rpx; background: #f8fafc; color: #69717d; font-size: 20rpx; }
|
||||
.odds-table__source { font-weight: 600; }
|
||||
.odds-table__line { color: #222831; font-size: 24rpx; }
|
||||
.odds-table__odd { font-size: 28rpx; font-weight: 600; }
|
||||
.odds-table__line { color: #222831; font-size: 22rpx; }
|
||||
.odds-table__odd { font-size: 25rpx; font-weight: 600; }
|
||||
.odds-table__odd i { margin-left: 4rpx; font-style: normal; font-size: 17rpx; }
|
||||
.odds-table__odd--up { color: #e53935; }
|
||||
.odds-table__odd--down { color: #36a653; }
|
||||
.odds-table__odd--muted, .odds-table__update { color: #9aa2ad; }
|
||||
.odds-table__update { font-size: 21rpx; }
|
||||
.odds-board__more { margin: 18rpx; height: 66rpx; display: flex; align-items: center; justify-content: center; border: 2rpx solid #1769ff; border-radius: 34rpx; color: #1769ff; font-size: 27rpx; }
|
||||
.odds-board__state { min-height: 420rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18rpx; color: #97a0ad; font-size: 25rpx; }
|
||||
.odds-trend { margin-top: 20rpx; padding: 24rpx; border: 1rpx solid #e5e9ef; border-radius: 18rpx; background: #fff; }
|
||||
.odds-trend__head { display: flex; justify-content: space-between; color: #222831; font-size: 27rpx; font-weight: 600; }
|
||||
.odds-trend__empty { color: #9aa2ad; font-size: 22rpx; font-weight: 400; }
|
||||
.odds-table__update { font-size: 19rpx; }
|
||||
.odds-board__more { margin: 12rpx; height: 54rpx; display: flex; align-items: center; justify-content: center; border: 2rpx solid #1769ff; border-radius: 28rpx; color: #1769ff; font-size: 24rpx; }
|
||||
.odds-board__state { min-height: 320rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #97a0ad; font-size: 22rpx; }
|
||||
.odds-trend { margin-top: 14rpx; padding: 18rpx; border: 1rpx solid #e5e9ef; border-radius: 14rpx; background: #fff; }
|
||||
.odds-trend__head { display: flex; justify-content: space-between; color: #222831; font-size: 24rpx; font-weight: 600; }
|
||||
.odds-trend__empty { color: #9aa2ad; font-size: 20rpx; font-weight: 400; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user