fix ui

miniprogram/pages/assessment/assessment.wxml

@@ -77,7 +77,7 @@
   <!-- 评分结果弹窗 -->
   <view wx:if="{{isScoreModalOpen && hasScoreInfo}}">
     <!-- <view class="score-modal-mask" bindtap="onCloseScoreModal"></view> -->
-    <view class="score-modal-content {{scoreModalVisible ? 'show' : ''}}" catchtouchmove="true">
+    <view class="score-modal-content {{scoreModalVisible ? 'show' : ''}}">
       <view class="score-modal-header">
         <view class="score-modal-title">
           <!-- <span>口语评分结果</span> -->
@@ -86,9 +86,9 @@
       </view>
       <view class="score-container">
         <view class="score-image-container">
-          <t-icon wx:if="{{currentSentence && currentSentence.file_id}}" name="{{playIconName}}" class="score-modal-play" size="80rpx" bindtap="playAssessmentVoice"></t-icon>
+          <t-icon wx:if="{{currentSentence && currentSentence.file_id}}" name="{{playIconName}}" class="score-modal-play" size="60rpx" bindtap="playAssessmentVoice"></t-icon>
           <!-- <image wx:if="{{currentSentence && currentSentence.file_id}}" src="{{playIconSrc}}" class="score-modal-play" bind:tap="playAssessmentVoice" mode="aspectFit" /> -->
-          <span class="score-text">{{currentSentence.content}}</span>
+          <view class="score-text">{{currentSentence.content}}</view>
         </view>
         <view class="score-overview">
           <view class="score-circles">
@@ -121,7 +121,7 @@
         <!-- MatchTag 说明 -->
         <view class="match-tag-legend">
           <view class="legend-header">
-            <text class="legend-title">匹配说明：</text>
+            <!-- <text class="legend-title">匹配说明：</text> -->
             <view class="legend-items">
               <view class="legend-item" wx:for="{{matchTagLegend}}" wx:key="tag">
                 <view class="color-box" style="background-color: {{item.color}}"></view>

miniprogram/pages/assessment/assessment.wxss

@@ -315,14 +315,24 @@
 .score-container {
   display: flex;
   flex-direction: column;
-  padding: 20rpx 40rpx;
+  padding: 24rpx;
   transition: all 0.3s ease-in-out;
 }
 
 .score-image-container {
   display: flex;
   align-items: center;
-  height: 120rpx;
+  padding: 24rpx 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;
 }
 
 .expanded .score-overview {
@@ -334,10 +344,10 @@
 }
 
 .circle-progress {
-  width: 150rpx;
-  height: 150rpx;
+  width: 120rpx;
+  height: 120rpx;
   border-radius: 50%;
-  background: #f0f0f0;
+  background: #f7f7f7;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -345,47 +355,22 @@
   position: relative;
 }
 
-.circle-canvas {
-  position: absolute;
-  width: 150rpx;
-  height: 150rpx;
-  top: 0;
-  left: 0;
-}
-
-.circle-progress::before {
-  content: '';
-  position: absolute;
-  width: 150rpx;
-  height: 150rpx;
-  border-radius: 50%;
-  background: #ffffff;
-}
-
-.circle-progress::after{
-    content: "";
-    position: absolute;
-    inset: 8rpx;
-    background: #ffffff;
-    border-radius: inherit;
-}
-
 .total-score-value {
   font-size: 28rpx;
   color: #001858;
-  font-weight: bold;
+  font-weight: 600;
   position: relative;
   z-index: 1;
   line-height: 28rpx;
 }
 
 .total-score-label {
-  font-size: 22rpx;
+  font-size: 20rpx;
   color: #666666;
   position: relative;
   z-index: 1;
-  margin-top: 4rpx;
-  line-height: 22rpx;
+  margin-top: 8rpx;
+  line-height: 20rpx;
 }
 
 .score-details {
@@ -450,8 +435,7 @@
 /* 单词评分列表样式 */
 .match-tag-legend {
   /* margin-top: 40rpx; */
-  padding: 16rpx 0;
-  border-top: 1rpx solid #f0f0f0;
+  padding: 24rpx;
 }
 
 .legend-header {
@@ -494,17 +478,19 @@
   display: flex;
   flex-direction: column;
   gap: 16rpx;
-  height: calc(100vh - 420rpx);
+  /* height: calc(100vh - 420rpx); */
   overflow-y: auto;
+  border-radius: 24rpx;
 }
 
 .word-score-item {
   display: flex;
   flex-direction: column;
   gap: 12rpx;
-  padding: 16rpx;
-  border-bottom: 1rpx solid #e0e0e0;
-  transition: background-color 0.3s ease;
+  padding: 20rpx;
+  /* border-bottom: 1rpx solid #e0e0e0; */
+  /* border-radius: 12rpx; */
+  border-bottom: 2rpx solid #eee;
 }
 
 .word-score-item:last-child {
@@ -527,9 +513,9 @@
   display: flex;
   align-items: center;
   gap: 8rpx;
-  padding: 4rpx 8rpx;
-  border-radius: 4rpx;
-  border: 1rpx solid #e0e0e0;
+  padding: 6rpx 10rpx;
+  border-radius: 8rpx;
+  border: 1rpx solid rgba(0,0,0,0.06);
 }
 
 .phone-text {
@@ -819,8 +805,8 @@
 
 .score-modal-play {
   flex-shrink: 0;
-  width: 80rpx;
-  height: 80rpx;
+  /* width: 80rpx; */
+  /* height: 80rpx; */
   margin-right: 20rpx;
 }
 
@@ -843,7 +829,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #fff;
+  background: #f8fafc;
   z-index: 999;
   transform: translateY(100%);
   transition: transform 0ms ease-out;
@@ -875,27 +861,29 @@
 }
 
 .score-circles {
-  height: 200rpx;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
+  padding: 24rpx;
 }
 
 .circle-item {
-  /* flex: 1; */
   display: flex;
   justify-content: center;
+  background-color: #eee;
+  border-radius: 50%;
 }
 
 .circle-item .circle-progress::before {
-  width: 120rpx;
-  height: 120rpx;
 }
 .circle-progress::before {
   content: '';
   position: absolute;
-  width: 150rpx;
-  height: 150rpx;
+  width: 100rpx;
+  height: 100rpx;
+  top: 10rpx;
+  left: 10rpx;
   border-radius: 50%;
   background: #ffffff;
 }