調整 IRS UI 顯示：阈值卡牌字體大小動態調整

HiTeachCC/ClientApp/src/assets/css/OptionView.less

@@ -258,7 +258,7 @@ button {
   top: 10px;
   margin-left: 13%;
   margin-right: 130px;
-  max-width: 250px;
+  max-width: 300px;
   * {
     font-size: 14px;
     font-weight: bolder;
@@ -276,19 +276,20 @@ button {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
-  margin-top: 40px;
+  margin-top: 45px;
   /*margin-top: 1%;*/
 }
 .ans-show-stuno {
   position: absolute;
   display: inline-block;
-  left: 10% !important;
+  left: 9% !important;
   top: 7%;
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
-  font-size: 16px;
-  line-height: 19px !important;
+  text-align: center;
+  font-size: 10px;
+  line-height: 26px !important;
   border: 1px solid white;
 }
 .ans-hide-star{
@@ -313,7 +314,7 @@ button {
 .vice-studyshowcard {
   width: 100%;
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: 20px;
   overflow-y: scroll;
 }
 
@@ -339,7 +340,7 @@ button {
   right: 0px;
   width: 30px;
   height: 30px;
-  font-size: 20px;
+  //font-size: 20px;
  
   display: block;
   line-height: 30px;
@@ -429,7 +430,6 @@ button {
 .result-answer-error {
   /*width: 100px;*/
   width: 24%;
-
   background-color: #ddd;
   text-align: center;
   font-size: 1rem;
@@ -441,7 +441,6 @@ button {
 
 .result-answercorrect {
   width: 24%;
-
   background-color: #ddd;
   text-align: center;
   font-size: 1rem;

HiTeachCC/ClientApp/src/components/Chart/OptionView.vue

@@ -48,7 +48,7 @@
         <div class="rightlisticon" @click="hiddenShow()"><svg-icon icon-class="Close" /></div>
       </div>
       <div>
-        <ul class="studycard" v-if="status === 'default'" ref="getheight" :style="'height:' + cssheightL + 'px;'">
+        <ul class="studycard" v-if="status === 'default'" ref="getheight" :style="'height:' + cssheightL + 'px;'" >
           <!--默认-->
           <li v-for="(item, index) in student" :key="index + 'A'" :class="item.class" v-show="item.done && status === 'default' && Answerstatus === 0" :style="'width:' + widthvalue + 'px;margin-left:' + marginvalue + 'px;height:' + widthvalue + 'px;line-height:' + widthvalue + 'px'">
             <div :class="{ 'ans-show-stuno': AnswerShowhide === 'AnswerShow' && item.option !== '' }">{{ item.sort }}</div>
@@ -59,10 +59,10 @@
             <div class="answer-default-show" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
               <span>{{ item.option }}</span>
             </div>
-            <div class="answer-default" v-if="item.option === ''"><span> </span></div>
+            <div class="answer-default" v-if="item.option === ''" ><span> </span></div>
             <!--作答答案end-->
             <!--发言内容-->
-            <div class="q-pa-md">
+            <div class="q-pa-md" >
               <q-btn push class="statement-icon11" @click="angleshow()" v-if="item.statement !== ''">
                 <q-popup-proxy @before-hide="hideangleicon()" :offset="[65, -165]">
                   <draggable class="list-group" @start="statementToimage" @end="stickupend">
@@ -96,7 +96,7 @@
              <div class="ans-hide-star"  v-if="AnswerShowhide === 'AnswerHide' && item.option !== ''">*</div>
             <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
             <!--作答答案-->
-            <div class="answer-default" v-if="item.option === ''"><span> </span></div>
+            <div class="answer-default" v-if="item.option === ''" ><span> </span></div>
             <!--作答答案end-->
             <!--发言内容-->
             <div class="q-pa-md">
@@ -134,7 +134,7 @@
              <div class="answer-default-show" v-if="AnswerShowhide === 'AnswerShow' && item.option !== ''">
               <span>{{ item.option }}</span>
             </div>
-            <div class="answer-default" v-if="item.option === ''"><span> </span></div>
+            <div class="answer-default" v-if="item.option === ''" ><span> </span></div>
             <!--作答答案 设定答案后end-->
             <!--发言内容-->
             <div class="q-pa-md">
@@ -428,6 +428,7 @@ export default {
       dwidth: '',
       widthvalue: '',
       marginvalue: '',
+      fontSizeValue:'',
       /*设定答案icon value*/
       AnswerIconstyle: 'letter',
       /*poptip*/
@@ -467,29 +468,29 @@ export default {
       this.dwidth = this.$refs.getheight.offsetWidth
       this.valuestyle()
     })
-    // mockstudents
-    // let mockstudents = []
-    // for (let i = 1; i <= 100; i++) {
-    //   mockstudents.push({
-    //     sort: i,
-    //     id: '711545724451'+i,
-    //     accountid: '1637115457243'+i,
-    //     studentName: 'louise'+i,
-    //     sendTime: 1637115468066,
-    //     headImg: 'https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png',
-    //     option: 'B',
-    //     done: true,
-    //     score: 0,
-    //     rank: '',
-    //     class: 'studyboxone',
-    //     showcardclass: 'brand',
-    //     answerclass: 'studyboxone',
-    //     answerbrand: 'brand',
-    //     statement: '',
-    //     status: 'online'
-    //   })
-    // }
-    // this.$store.state.students=mockstudents
+    //mockstudents
+    let mockstudents = []
+    for (let i = 1; i <= 100; i++) {
+      mockstudents.push({
+        sort: i,
+        id: '711545724451'+i,
+        accountid: '1637115457243'+i,
+        studentName: 'louise'+i,
+        sendTime: 1637115468066,
+        headImg: 'https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png',
+        option: 'B',
+        done: true,
+        score: 0,
+        rank: '',
+        class: 'studyboxone',
+        showcardclass: 'brand',
+        answerclass: 'studyboxone',
+        answerbrand: 'brand',
+        statement: '',
+        status: 'online'
+      })
+    }
+    this.$store.state.students=mockstudents
   },
   computed: {
     watchStudents() {
@@ -1049,21 +1050,27 @@ export default {
       if (value === 5) {
         pwidth = 40
         pmarginleft = 50
+        this.fontSizeValue=36
       } else if (value === 10) {
         pwidth = 65
         pmarginleft = 30
+        this.fontSizeValue=36
       } else if (value === 15) {
         pwidth = 60
         pmarginleft = 30
+        this.fontSizeValue=30
       } else if (value === 20) {
         pwidth = 75
         pmarginleft = 20
+        this.fontSizeValue=20
       } else if (value === 25) {
         pwidth = 80
         pmarginleft = 17
+        this.fontSizeValue=20
       } else if (value === 30) {
         pwidth = 70
         pmarginleft = 27
+        this.fontSizeValue=12
       }
       let widthpercent = pwidth / value
       let marginpercent = pmarginleft / value
@@ -1085,6 +1092,11 @@ export default {
     }
   },
   watch: {
+    fontSizeValue:function(value){
+      for(let i=0; i<document.getElementsByClassName('studyboxone').length;i++){
+        document.getElementsByClassName('studyboxone')[i].style.fontSize=value+'px'
+      }
+    },
     watchStudents: {
       handler(e) {
         if (e) {