53 lines
3.1 KiB
Plaintext
53 lines
3.1 KiB
Plaintext
.score-modal-content {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #f8fafc;
|
|
z-index: 999;
|
|
transform: translateY(100%);
|
|
transition: transform 0ms ease-out;
|
|
}
|
|
.score-modal-content.show { transform: translateY(0); }
|
|
.score-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 48rpx;
|
|
}
|
|
.score-modal-title { display: flex; align-items: center; gap: 16rpx; }
|
|
.score-modal-close { position: absolute; top: 12rpx; right: 12rpx; color: #666; }
|
|
.score-container { overflow-y: auto; }
|
|
.score-image-container { display: flex; align-items: center; padding: 0 0 0 12rpx; min-height: 120rpx; }
|
|
.score-text { flex: 1; font-size: 30rpx; line-height: 42rpx; color: #001858; font-weight: 600; word-break: break-word; }
|
|
.score-modal-play { flex-shrink: 0; margin-right: 20rpx; }
|
|
.score-overview {}
|
|
.score-circles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 24rpx; }
|
|
.circle-item { display: flex; justify-content: center; background-color: #eee; border-radius: 50%; }
|
|
.circle-progress { width: 120rpx; height: 120rpx; border-radius: 50%; background: #f7f7f7; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
|
.circle-progress::before { content: ''; position: absolute; width: 100rpx; height: 100rpx; top: 10rpx; left: 10rpx; border-radius: 50%; background: #ffffff; }
|
|
.total-score-value { font-size: 28rpx; color: #001858; font-weight: 600; position: relative; z-index: 1; line-height: 28rpx; }
|
|
.total-score-label { font-size: 20rpx; color: #666666; position: relative; z-index: 1; margin-top: 8rpx; line-height: 20rpx; }
|
|
.match-tag-legend { padding: 24rpx; }
|
|
.legend-header { display: flex; align-items: center; gap: 16rpx; }
|
|
.legend-items { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
|
.legend-item { display: flex; align-items: center; gap: 8rpx; }
|
|
.color-box { width: 20rpx; height: 20rpx; border: 1rpx solid #e0e0e0; border-radius: 4rpx; }
|
|
.legend-text { font-size: 22rpx; color: #666; }
|
|
.word-scores-list { display: flex; flex-direction: column; gap: 16rpx; overflow-y: auto; border-radius: 24rpx; }
|
|
.word-score-item { display: flex; flex-direction: column; gap: 12rpx; padding: 20rpx; border-bottom: 2rpx solid #eee; }
|
|
.word-score-item:last-child { border-bottom: none; }
|
|
.word-header { display: flex; justify-content: space-between; align-items: center; }
|
|
.phone-infos { display: flex; flex-wrap: wrap; gap: 8rpx; }
|
|
.phone-info-item { display: flex; align-items: center; gap: 8rpx; padding: 6rpx 10rpx; border-radius: 8rpx; border: 1rpx solid rgba(0,0,0,0.06); }
|
|
.phone-text { font-size: 24rpx; line-height: 24rpx; color: #333; }
|
|
.phone-score { font-size: 24rpx; line-height: 24rpx; color: #666; }
|
|
.word-text { font-size: 28rpx; color: #333; font-weight: 500; }
|
|
.word-score-details { display: flex; gap: 24rpx; }
|
|
.word-score-row { display: flex; align-items: center; gap: 8rpx; justify-content: flex-end; }
|
|
.word-score-label { font-size: 22rpx; color: #666; }
|
|
.word-score-value { font-size: 22rpx; color: #333; font-weight: 500; text-align: right; }
|
|
|