Просмотр исходного кода

bug fix: 答题游戏没考虑到选择项文字过长的情况。

任一存 2 лет назад
Родитель
Сommit
034dca5e25
1 измененных файлов с 30 добавлено и 4 удалено
  1. 30 4
      game/src/views/ExamPaper2.vue

+ 30 - 4
game/src/views/ExamPaper2.vue

@@ -40,8 +40,16 @@
         }"
         @click="onClickOption(index)"
       >
+        <div class="code" />
         <div class="option-text">
-          {{ option }}
+          <div
+            class="option-text-inner"
+            :class="{
+              marquee: option.length > 12
+            }"
+          >
+            {{ option }}
+          </div>
         </div>
         <div
           v-show="isSubmitted && selectedIdx === index && questionList[currentQuestionIdx].rightOptionIdx === index"
@@ -361,7 +369,6 @@ if (store.state.ifScoreLimitReached) {
       padding-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       width: 100%;
       display: flex;
-      justify-content: space-between;
       align-items: center;
       font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Source Han Sans SC, Source Han Sans SC;
@@ -381,13 +388,31 @@ if (store.state.ifScoreLimitReached) {
         color: #FF6A6A;
         border: 1px solid #FF6A6A;
       }
-      > .option-text {
+      > .code{
+        flex: 0 0 auto;
+        margin-right: 0.5em;
         &::before {
           content: counter(count, upper-alpha);
-          margin-right: 0.5em;
+        }
+      }
+      > .option-text {
+        flex: 0 0 auto;
+        width: 80%;
+        overflow: hidden;
+        >.option-text-inner{
+          text-align: initial;
+          white-space: nowrap;
+        }
+        >.option-text-inner.marquee{
+          animation: marquee 8s linear infinite;
+          @keyframes marquee {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
+          }
         }
       }
       > .result-tip {
+        flex: 0 0 auto;
         > img.correct-icon {
           width: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           height: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -469,4 +494,5 @@ if (store.state.ifScoreLimitReached) {
     padding-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 }
+
 </style>