心理胜任能力Bug修改

src/views/CognitiveAbilityTask/imageAssociation.vue

@@ -38,24 +38,24 @@
       </el-row>
 
       <el-card class="top-card">
-        <p style="text-align: left">
+        <p class="top-card-p" >
           注释：包括15对动物-水果图片，需要被试记住每个动物或是水果相对应的另一个动物或是水果，图片对将会展现两次，每个图片对各展示10秒，展示结束后进行即时回忆测查/即时再认测查，需要被试在看到图片后，大声迅速的报告与之对应的动物或者水果图片名称；再认测查会先出现动物图片，随后出现4张水果图片，其中1张为正确答案。30分钟后可进行延迟回忆测查/延迟再认测查。
         </p>
       </el-card>
-      <div v-if="isDelay == true && isok == false">
-        <h1 v-if="countDownDivShow" style="margin-top: 5rem;text-align: center">
+      <div v-if="isDelay == true && isok == false" class="top-buttons">
+        <h1 v-if="countDownDivShow" class="top-buttons-h1">
           延时测试剩余时间:{{ remainingTime }}分钟
         </h1>
         <div class="btn-content">
-          <el-button v-if="delayTestButtonShow" style="margin-top: 60px;" class="saveclass"
+          <el-button v-if="delayTestButtonShow"   class="saveclass"
                      @click="isOk">延时测试>></el-button>
-          <el-button style="margin-top: 60px" class="saveclass" @click="Renew('4')">重新开始测试>></el-button>
-          <el-button style="margin-top: 60px" class="saveclass" @click="goBack">退出测试>></el-button>
+          <el-button  class="saveclass" @click="Renew('4')">重新开始测试>></el-button>
+          <el-button  class="saveclass" @click="goBack">退出测试>></el-button>
         </div>
       </div>
       <div id="body1" class="txt-center" v-if="flag1 && isDelay == false">
         <!--设置图片的样式-->
-        <h5 style="margin-top: 15px">第{{ this.vernier + 1 }}遍</h5>
+        <h5 class="body1-h5" >第{{ this.vernier + 1 }}遍</h5>
         <div class="demo-image__placeholder">
           <div class="block">
             <el-image :src="image1" alt="等待开始测试" />
@@ -66,10 +66,10 @@
         </div>
         <div id="name">
           <div id="name1">
-            <h4>{{ animal1 }}</h4>
+            <h4 >{{ animal1 }}</h4>
           </div>
           <div id="name2">
-            <h4>{{ animal2 }}</h4>
+            <h4 >{{ animal2 }}</h4>
           </div>
         </div>
 
@@ -90,7 +90,7 @@
             (!flag1 && !flag2 && isDelay == false && isok == false) ||
             (!flag1 && !flag2 && isDelay == true && isok == true)
         ">
-      <div style="font-size: 24px; font-weight: 600;text-align: left; margin: 16px 0 16px 12%">回忆测试:</div>
+      <div class="body2-review" >回忆测试:</div>
       <div id="table">
         <el-row :gutter="20">
           <el-col :span="3">
@@ -357,7 +357,7 @@
             </el-col>
           </el-col>
         </el-row>
-        <p align="center" style="margin-bottom: 40px">
+        <p  class="save-p" align="center">
           <el-button @click="save1" class='saveCll'>保存</el-button>
         </p>
       </div>
@@ -367,17 +367,17 @@
             (flag2 && isDelay == false && isok == false) ||
             (flag2 && isDelay && isok)
         ">
-      <div style="font-size: 24px; font-weight: 600;text-align: left; margin: 16px 0">再认测试:</div>
+      <div class="body3-review">再认测试:</div>
 
       <div class="item-area">
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">1.</h5>
+              <h5 class="it1-h5" >1.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[0].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[0] }}</h5>
+              <h5 class="it11-h5">{{ name[0] }}</h5>
             </div>
           </div>
 
@@ -417,7 +417,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(0, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div" ></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[0]" label="5">F</el-radio>
@@ -430,11 +430,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">2.</h5>
+              <h5 class="it1-h5">2.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[1].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[1] }}</h5>
+              <h5 class="it11-h5">{{ name[1] }}</h5>
             </div>
           </div>
 
@@ -474,7 +474,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(1, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[1]" label="5">F</el-radio>
@@ -487,11 +487,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">3.</h5>
+              <h5 class="it1-h5">3.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[2].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[2] }}</h5>
+              <h5 class="it11-h5" >{{ name[2] }}</h5>
             </div>
           </div>
 
@@ -531,7 +531,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(2, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div  class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[2]" label="5">F</el-radio>
@@ -544,11 +544,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">4.</h5>
+              <h5 class="it1-h5">4.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[3].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[3] }}</h5>
+              <h5 class="it11-h5" >{{ name[3] }}</h5>
             </div>
           </div>
 
@@ -588,7 +588,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(3, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div" ></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[3]" label="5">F</el-radio>
@@ -601,11 +601,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">5.</h5>
+              <h5 class="it1-h5" >5.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[4].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[4] }}</h5>
+              <h5 class="it11-h5">{{ name[4] }}</h5>
             </div>
           </div>
 
@@ -645,7 +645,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(4, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div" ></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[4]" label="5">F</el-radio>
@@ -658,11 +658,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">6.</h5>
+              <h5 class="it1-h5">6.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[5].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[5] }}</h5>
+              <h5 class="it11-h5">{{ name[5] }}</h5>
             </div>
           </div>
 
@@ -702,7 +702,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(5, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div" ></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[5]" label="5">F</el-radio>
@@ -715,11 +715,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">7.</h5>
+              <h5 class="it1-h5">7.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[6].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[6] }}</h5>
+              <h5 class="it11-h5">{{ name[6] }}</h5>
             </div>
           </div>
 
@@ -759,7 +759,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(6, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[6]" label="5">F</el-radio>
@@ -772,11 +772,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">8.</h5>
+              <h5 class="it1-h5">8.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[7].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[7] }}</h5>
+              <h5 class="it11-h5">{{ name[7] }}</h5>
             </div>
           </div>
 
@@ -816,7 +816,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(7, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[7]" label="5">F</el-radio>
@@ -829,11 +829,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">9.</h5>
+              <h5 class="it1-h5">9.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[8].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[8] }}</h5>
+              <h5 class="it11-h5">{{ name[8] }}</h5>
             </div>
           </div>
 
@@ -873,7 +873,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(8, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[8]" label="5">F</el-radio>
@@ -886,11 +886,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">10.</h5>
+              <h5 class="it1-h5">10.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[9].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[9] }}</h5>
+              <h5 class="it11-h5">{{ name[9] }}</h5>
             </div>
           </div>
 
@@ -930,7 +930,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(9, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[9]" label="5">F</el-radio>
@@ -943,11 +943,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">11.</h5>
+              <h5 class="it1-h5">11.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[10].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[10] }}</h5>
+              <h5 class="it11-h5">{{ name[10] }}</h5>
             </div>
           </div>
 
@@ -987,7 +987,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(10, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[10]" label="5">F</el-radio>
@@ -1000,11 +1000,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">12.</h5>
+              <h5 class="it1-h5">12.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[11].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[11] }}</h5>
+              <h5 class="it11-h5">{{ name[11] }}</h5>
             </div>
           </div>
 
@@ -1044,7 +1044,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(11, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[11]" label="5">F</el-radio>
@@ -1057,11 +1057,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">13.</h5>
+              <h5 class="it1-h5">13.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[12].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[12] }}</h5>
+              <h5 class="it11-h5">{{ name[12] }}</h5>
             </div>
           </div>
 
@@ -1101,7 +1101,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(12, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[12]" label="5">F</el-radio>
@@ -1114,11 +1114,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">14.</h5>
+              <h5 class="it1-h5">14.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[13].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[13] }}</h5>
+              <h5 class="it11-h5">{{ name[13] }}</h5>
             </div>
           </div>
 
@@ -1158,7 +1158,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(13, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div1"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[13]" label="5">F</el-radio>
@@ -1171,11 +1171,11 @@
         <div class="item">
           <div class="it1 flex-row">
             <div>
-              <h5 style="text-align: left;font-size: 20px;margin-right: 10px;">15.</h5>
+              <h5 class="it1-h5" >15.</h5>
             </div>
             <div class="it11"><el-image :src="imageGroup[14].imga" /></div>
             <div>
-              <h5 style="font-size: 20px;margin-left: 10px;">{{ name[14] }}</h5>
+              <h5 class="it11-h5">{{ name[14] }}</h5>
             </div>
           </div>
 
@@ -1215,7 +1215,7 @@
             <div class="it24">
               <div class="it211" @click="sentCheck(14, '5')">
                 <el-image :src="forgetImg" />
-                <div style="width: 120rpx;line-height: 100px;text-align:center"></div>
+                <div class="it211-div"></div>
               </div>
               <div class="it212 flex-center">
                 <el-radio v-model="radio[14]" label="5">F</el-radio>
@@ -2509,7 +2509,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .bTitle {
   font-size: 24px;
   color: #333333;
@@ -2534,46 +2534,98 @@ export default {
   background-color: #f4f4f5;
   width: 80%;
   margin-left: 10%;
+  .top-card-p{
+    text-align: left;
+    font-size: 20px;
+  }
 }
-
-#table {
-  margin-left: 13%;
-}
-
-.grid-content {
-  border-radius: 4px;
-  height: 120px;
-  width: 120px;
-  background-color: inherit;
-}
-
-.row-bg {
-  padding: 10px 0;
+.top-buttons{
+  .top-buttons-h1{
+    margin-top: 5rem;
+    text-align: center
+  }
+  .btn-content{
+    .saveclass{
+      margin-top: 60px;
+    }
+  }
 }
-
 #body1 {
   margin-left: 5%;
   width: 90%;
+  .body1-h5{
+    margin-top: 15px;
+    font-size:20px;
+    height: 10px;
+    line-height: 10px;
+  }
 }
-
 #body2 {
   width: 90%;
-  /* margin-left: 5%; */
+  overflow-y: auto;
+  .body2-review{
+    font-size: 24px;
+    font-weight: 600;
+    text-align: left;
+    margin: 16px 0 16px 12%;
+  }
+}
+#table {
+  margin-left: 13%;
+  .save-p{
+    margin-bottom: 40px
+  }
 }
-
 #body3 {
   width: 80%;
   margin-left: 10%;
   height: calc(100% - 188px);
   overflow: hidden;
+  .body3-review{
+    font-size: 24px;
+    font-weight: 600;
+    text-align: left;
+    margin: 16px 0
+  }
 }
-
 .item-area {
   width: 100%;
   height: calc(100% - 120px);
   overflow-y: auto;
+  .item{
+    .it1{
+      .it1-h5{
+        text-align: left;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .it11-h5{
+        font-size: 20px;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+
+.grid-content {
+  border-radius: 4px;
+  height: 120px;
+  width: 120px;
+  background-color: inherit;
+}
+
+.row-bg {
+  padding: 10px 0;
 }
 
+
+
+
+
+
+
+
 .demo-image__placeholder {
   margin-top: 20px;
   margin-left: 30px;
@@ -2587,40 +2639,52 @@ export default {
   /* border: 2px solid black; */
   box-sizing: border-box;
 }
-
-#name1 {
-  /* float: left;
-      width: 300px;
+#name{
+  font-size: 22.5px;
+  #name1 {
+    /* float: left;
+        width: 300px;
+        height: 30px;
+        margin-right: 30px;
+        background: rgb(73, 151, 132); */
+    background: rgb(73, 151, 132);
+    display: inline-block;
+    margin-right: 30px;
+    width: 300px;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box;
+    font-size: 45px;
+    h4{
+      color: #fff;
       height: 30px;
-      margin-right: 30px;
-      background: rgb(73, 151, 132); */
-  background: rgb(73, 151, 132);
-  display: inline-block;
-  margin-right: 30px;
-  width: 300px;
-  height: 30px;
-  box-sizing: border-box;
-}
-
-#name2 {
-  /* float: right;
-      width: 300px;
+      line-height: 30px;
+      font-size: 22px;
+    }
+  }
+
+  #name2 {
+    /* float: right;
+        width: 300px;
+        height: 30px;
+        background: rgb(73, 151, 132); */
+    display: inline-block;
+    /* margin-right: 30px; */
+    background: rgb(73, 151, 132);
+    width: 300px;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box;
+    font-size: 45px;
+    h4{
+      color: #fff;
       height: 30px;
-      background: rgb(73, 151, 132); */
-  display: inline-block;
-  /* margin-right: 30px; */
-  background: rgb(73, 151, 132);
-  width: 300px;
-  height: 30px;
-  box-sizing: border-box;
+      line-height: 30px;
+      font-size: 22px;
+    }
+  }
 }
 
-#name1 h4,
-#name2 h4 {
-  color: #fff;
-  height: 30px;
-  line-height: 30px;
-}
 
 .el-image {
   height: 100%;
@@ -2687,6 +2751,11 @@ export default {
   width: 120px;
   height: 120px;
   cursor: pointer;
+  .it211-div{
+    width: 120rpx;
+    line-height: 100px;
+    text-align:center
+  }
 }
 
 .it212 {