Files
miniprogram-1/miniprogram/components/score-modal/score-modal.wxml
2025-12-21 21:18:57 +08:00

76 lines
3.5 KiB
Plaintext

<view wx:if="{{hasScoreInfo}}">
<view class="score-modal-content {{visible ? 'show' : ''}}">
<view class="score-modal-header">
<view class="score-modal-title"></view>
<t-icon name="close" class="score-modal-close" size="40rpx" bindtap="onClose" />
</view>
<scroll-view class="score-container" scroll-y="true">
<view class="score-image-container">
<t-icon wx:if="{{sentence && sentence.file_id}}" name="{{playIconName}}" class="score-modal-play" size="60rpx" bindtap="onPlay"></t-icon>
<view class="score-text">{{sentence.content}}</view>
</view>
<view class="score-overview">
<view class="score-circles">
<view class="circle-item">
<view class="circle-progress" style="{{circleProgressStyle}}">
<text class="total-score-value">{{totalScore}}</text>
<text class="total-score-label">总分</text>
</view>
</view>
<view class="circle-item">
<view class="circle-progress" style="{{accuracyCircleStyle}}">
<text class="total-score-value">{{accuracyScore}}</text>
<text class="total-score-label">准确性</text>
</view>
</view>
<view class="circle-item">
<view class="circle-progress" style="{{completenessCircleStyle}}">
<text class="total-score-value">{{completenessScore}}</text>
<text class="total-score-label">完整性</text>
</view>
</view>
<view class="circle-item">
<view class="circle-progress" style="{{fluencyCircleStyle}}">
<text class="total-score-value">{{fluencyScore}}</text>
<text class="total-score-label">流利度</text>
</view>
</view>
</view>
</view>
<view class="match-tag-legend">
<view class="legend-header">
<view class="legend-items">
<view class="legend-item" wx:for="{{matchTagLegend}}" wx:key="tag">
<view class="color-box" style="background-color: {{item.color}}"></view>
<text class="legend-text">{{item.description}}</text>
</view>
</view>
</view>
</view>
<view class="word-scores-list">
<view class="word-score-item" wx:for="{{wordScores}}" wx:key="word" style="background-color: {{matchTagLegend[item.matchTag || 0].color}}">
<view class="word-header">
<text class="word-text">{{item.word}}</text>
<view class="word-score-details">
<view class="word-score-row">
<text class="word-score-label">准确性</text>
<text class="word-score-value">{{item.pronAccuracy}}</text>
</view>
<view class="word-score-row">
<text class="word-score-label">流利度</text>
<text class="word-score-value">{{item.pronFluency}}</text>
</view>
</view>
</view>
<view class="phone-infos" wx:if="{{item.phoneInfos && item.phoneInfos.length > 0}}">
<view class="phone-info-item" wx:for="{{item.phoneInfos}}" wx:for-item="phoneInfo" wx:key="phone" style="background-color: {{matchTagLegend[phoneInfo.matchTag || 0].color}}">
<text class="phone-text">[{{phoneInfo.phone}}]</text>
<text class="phone-score">{{phoneInfo.pronAccuracy}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>