心理胜任能力评估系统prospectiveMemoryAbility页面第一版

src/views/CognitiveAbilityTask/prospectiveMemoryAbility.vue

@@ -6,111 +6,85 @@
           @click="screenState()"
           src="../../assets/small-big.png"
           alt=""
-          style="
-      "
       />
-      <div class='glass'>
+      <div class='glass flex-column'>
 
         <div class="pbg" v-show="cdv" >
           <div  width="70%" center>
             <div class="mainbody middle activeTask3" :class="{ 'middle-flip': tc }">
-              <h2 style="text-align:center">AD临床记忆问卷</h2>
+              <h2 class="pbg_h2">AD临床记忆问卷</h2>
 
-              <div style="text-align:left;margin-top:40px;">
-                <h3 style="margin-left:10%;margin-bottom:10px">第一题：</h3>
-                <div style="margin-left:20%;">
+              <div class="pbg_content">
+                <h3 class="pbg_content_h3" >第一题：</h3>
+                <div class="pbg_content_div">
                   <el-radio v-model="radio1" label="A">A.忘记生活中某些细节，但是之后可以回想起来</el-radio></br>
                   <el-radio v-model="radio1" label="B">B.反复多次就同一细节询问家人</el-radio>
                 </div>
               </div>
 
-              <div style="text-align:left;margin-top:30px;">
-                <h3 style="margin-left:10%;margin-bottom:10px">第二题：</h3>
-                <div style="margin-left:20%;">
+              <div class="pbg_content" >
+                <h3 class="pbg_content_h3" >第二题：</h3>
+                <div class="pbg_content_div">
                   <el-radio v-model="radio2" label="A">A.说话时，不能立即想起某个单词或者人名</el-radio></br>
                   <el-radio v-model="radio2" label="B">B.说话说到一半，突然不知道下半句该说什么</el-radio>
                 </div>
               </div>
 
-              <div style="text-align:left;margin-top:30px;">
-                <h3 style="margin-left:10%;margin-bottom:10px">第三题：</h3>
-                <div style="margin-left:20%;">
+              <div class="pbg_content">
+                <h3 class="pbg_content_h3" >第三题：</h3>
+                <div class="pbg_content_div">
                   <el-radio v-model="radio3" label="A">A.不记得刚买的新家电的使用方法</el-radio></br>
                   <el-radio v-model="radio3" label="B">B.无法完成基础的日常家务</el-radio>
                 </div>
               </div>
               <!--<el-button class="start-bb" style="margin-top:60px;" @click="save()">保存</el-button>-->
-              <el-button class="start-bb" style="margin-top:60px;" @click="throttle()">保存</el-button>
+              <el-button class="start-bb" @click="throttle()">保存</el-button>
             </div>
           </div>
         </div>
 
-        <div>
-          <el-row>
-            <el-col :span='12'>
-              <h3 class="bTitle">前瞻记忆</h3>
-            </el-col>
-            <el-col :span='12'>
-              <div id="t1"    style="
-                height: 36px;
-                background: rgba(0, 0, 0, 0.39);
-
-                border-radius: 24px;
-                color: #ffffff;
-                padding-top: 10px;
-
-                margin-left: 250px;
-                padding-right: 10px;
-              " v-if="isBody2 == true" v-bind:text-content.prop="time1 + '(用时)'">用时</div>
-            </el-col>
-
-          </el-row>
-
-
-          <el-card
-              style="
-          margin-top: 20px;
-          background-color: white;
-          width:92%;
-          margin-left:4%;
-        "
-          >
-            <p style="text-align: left">
-              该任务需要您判断所呈现的四字词语是否为成语，如果是成语，就按“F”键，如果不是成语，就按“J”键；感知条件下要求判断所呈现的模糊数字图片
-              是否为“0”，是就按“F”键，否就按“J”键。需要注意的是当呈现的四字词语包含动物的名称或者数字下方出现黑色箭头时，按空格键反应。
-              每一屏呈现时间（回答时间）为2s。
-            </p>
-          </el-card>
+
+        <div class="flex-row title-line">
+          <h3 class="bTitle">前瞻记忆</h3>
+          <div id="t1">
+            <span v-if="isBody2">{{ time1 }} (用时)</span>
+          </div>
         </div>
 
 
-        <div v-if="(isclick == false)" class="btn">
-          <el-button style="margin-left:10%;" class="start-bb" @click.once="begintime">点我开始学习</el-button>
-        </div>
+        <el-card>
+          <p class="el-card_p">
+            该任务需要您判断所呈现的四字词语是否为成语，如果是成语，就按“F”键，如果不是成语，就按“J”键；感知条件下要求判断所呈现的模糊数字图片
+            是否为“0”，是就按“F”键，否就按“J”键。需要注意的是当呈现的四字词语包含动物的名称或者数字下方出现黑色箭头时，按空格键反应。
+            每一屏呈现时间（回答时间）为2s。
+          </p>
+        </el-card>
+
+
+        <el-button v-if="!isclick" class="start-btn" @click.once="begintime">点我开始学习</el-button>
         <div v-if="isBody2 == true" id="body2" >
-          <div style="width:50%;height:400px;border:solid;margin-left:25%;">
-            <div style="width:48%;float:left;font-size:x-large;text-align:center;padding-top:100px;">
+          <div class="body2_content">
+            <div class="body2_content_first" >
               <h1 v-if="isbreak">{{this.randomName[id].idiomName}}</h1>
-              <el-image v-else-if="isbreak==false&&isimg==true" :src="randomImg[this.imgid].img " style="width: 40%; height: 150px" />
+              <el-image v-else-if="isbreak==false&&isimg==true" :src="randomImg[this.imgid].img "  />
             </div>
-            <div style="width:50%;height:400px;float:right;border-left:solid;">
-              <h2 style="text-align:center;margin-top:10px;">操作</h2>
-              <div style="margin-top:70px;">
-                <el-button  style="width:40%;height:60px;" class="start-bb" @click="idomevent(2)">F键</el-button>
-                <el-button  style="width:40%;height:60px;" class="start-bb" @click="idomevent(3)">J键</el-button>
+            <div class="body2_content_second flex-column" >
+              <h2 class="body2_content_second_h2" >操作</h2>
+              <div class="body2_content_second_div flex-row" >
+                <el-button  class="start-btn" @click="idomevent(2)">F键</el-button>
+                <el-button  class="start-btn" @click="idomevent(3)">J键</el-button>
               </div>
-              <el-button  class="start-bb" style="margin-top:60px;width:40%;height:60px;" @click="idomevent(1)">空格</el-button>
+              <el-button  class="start-btn"  @click="idomevent(1)">空格</el-button>
             </div>
           </div>
         </div>
 
-        <div v-if="isBody3" style="margin-top:60px;text-align:center">
-          <h2 style="text-align:center;margin-bottom:20px;">测试结果</h2>
-          <div style="margin-left:25%;">
+        <div v-if="isBody3"  id="body3">
+          <h2 class="body3_h2" >测试结果</h2>
+          <div class="body3_div">
             <el-table
                 :data="tableData"
-                border
-                style="width: 70%;">
+                border>
               <el-table-column
                   prop="item"
                   label="项目"
@@ -127,7 +101,7 @@
               </el-table-column>
             </el-table>
           </div>
-          <el-button style="margin-top:20px;" class="start-bb"  @click="save1()">问卷调查</el-button>
+          <el-button  class="start-bb"  @click="save1()">问卷调查</el-button>
         </div>
 
       </div>
@@ -945,7 +919,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .img-bg1{
   height: 48px;
   width: 48px;
@@ -954,6 +928,45 @@ export default {
   right: 22px;
   cursor: pointer;
 }
+.glass {
+  padding-top: 20px;
+  width: 1132px;
+  height: 760px;
+
+  .pbg{
+    .pbg_h2{
+      text-align:center
+    }
+    .pbg_content{
+      text-align:left;
+      margin-top:40px;
+      .pbg_content_h3{
+        margin-left:10%;
+        margin-bottom:10px
+      }
+      .pbg_content_div{
+        margin-left:20%;
+      }
+    }
+  }
+
+  .title-line {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .start-btn {
+    width: 170px;
+    height: 48px;
+    background: rgb(87, 172, 187);
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    border-radius: 39px;
+    color: white;
+    margin-top: 60px;
+  }
+}
+
 .bTitle {
   font-size: 24px;
   color: #333333;
@@ -963,11 +976,79 @@ export default {
 
 #t1 {
   font-size: 20px;
+  height: 36px;
+
+  border-radius: 24px;
+  color: #ffffff;
+  padding-top: 10px;
+  margin-left: 250px;
+  padding-right: 10px;
+
+  span {
+    background: rgba(0, 0, 0, 0.39);
+  }
   /* margin-top: 30px; */
 }
-
+::v-deep .el-card{
+  margin-top: 20px;
+  background-color: white;
+  width:92%;
+}
+::v-deep .el-card_p{
+  text-align: left;
+  font-size: 24px;
+}
+.btn{
+  ::v-deep .start-bb{
+    margin-left:10%;
+    font-size: 16px;
+  }
+}
 #body2 {
   margin-top: 15px;
+  width:100%;
+  .body2_content{
+    width:50%;
+    height:400px;
+    border:solid;
+    margin-left:25%;
+    .body2_content_first{
+      width:48%;
+      float:left;
+      font-size:x-large;
+      text-align:center;
+      padding-top:100px;
+      h1{
+        font-size:60px;
+      }
+      .el-image{
+        width: 40%;
+        height: 150px;
+      }
+    }
+    .body2_content_second{
+      width: 50%;
+      height: 400px;
+      border-left:solid;
+
+      .body2_content_second_h2{
+        text-align: center;
+        margin-top: 30px;
+        font-size: 36px;
+      }
+
+      .body2_content_second_div {
+        margin-top: 30px;
+      }
+
+      .start-btn{
+        margin-top: 60px;
+        width: 110px;
+        height: 60px;
+        font-size: 20px;
+      }
+    }
+  }
 }
 .item {
   width: 200px;
@@ -976,14 +1057,29 @@ export default {
   margin-right: 10px;
   float: left;
 }
-
+#body3{
+  margin-top:60px;
+  text-align:center;
+  .body3_h2{
+    text-align:center;
+    margin-bottom:20px;
+  }
+  .body3_div{
+    margin-left:25%;
+    .el-table{
+      width: 70%;
+    }
+  }
+  .start-bb{
+    margin-top:20px;
+  }
+}
 .el-image {
   width: 100%;
   height: 100%;
 }
 .btn {
   margin-top: 60px;
-  margin-left: -10%;
 }
 .pbg {
   position: fixed;
@@ -1032,11 +1128,6 @@ export default {
   right: 0;
   bottom: 0; */
 }
-.glass {
-  padding-top: 20px;
-  width: 1132px;
-  height: 760px;
-}
 .start-bb {
   width: 170px;
   height: 48px;