css样式修改

css/utils.scss

@@ -102,7 +102,9 @@
 .flex-x-end {
   justify-content: flex-end;
 }
-
+.flex-y-start {
+  align-content: flex-start;
+}
 .flex-y-center {
   align-items: center;
 }
@@ -175,7 +177,9 @@
   justify-content: space-around;
   align-items: center;
 }
-
+.flex-grow{
+  flex-grow:1,
+}
 .flex-two {
   box-sizing: border-box;
   flex: 0 0 50%;
@@ -765,7 +769,9 @@
 .p-l-40 {
   padding-left: 40rpx;
 }
-
+.p-l-50 {
+  padding-left: 50rpx;
+}
 .p-r-10 {
   padding-right: 10rpx;
 }

pages/task/info.vue

@@ -1,57 +1,72 @@
 <template>
   <view class="window-box dis-flex" style="background-color: #E9ECF2">
     <ly-back :autoBack="false" @backClick="backClick"/>
-    <view v-if="countDown > 0" class="countDown">{{ formatZero(countDown, 2) }}</view>
+    <view v-if="countDown >= 0" class="countDown">{{ formatZero(countDown, 2) }}</view>
 
     <view class="w100 flex-center-center flex-dir-column">
       <view class="baseMessage w80 p-r">
         <view class="p-a avatar">
           <student-info :student="student"/>
         </view>
-        <view class="dis-flex flex-wrap flex-y-center t-a-c m-40" style="height: 80px">
-          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
-          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
-          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
-          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
-          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
+        <view class="dis-flex flex-wrap flex-y-center m-40" style="height: 80px;text-align: center">
+          <view class="flex-three p-10">姓名：{{pageData.studentInfo.name}}</view>
+          <view class="flex-three p-10">性别：{{pageData.studentInfo.gender}}</view>
+          <view class="flex-three p-10">班级：{{pageData.studentInfo.class}}</view>
+          <view class="flex-three p-10">模式：{{pageData.studentInfo.model}}</view>
+          <view class="flex-three p-10">学校：{{pageData.studentInfo.school}}</view>
         </view>
       </view>
 
-      <view class="dis-flex w80 ">
+      <view class="dis-flex w80">
         <view v-if="pageData.status == 1" class="m-t-50 p-r-20">
-          <view v-for="(item,index) in pageData.card" class="cardbg b-r-15" :class="['cardbg-'+index]">
-            <view class=" f-u-35 flex-center-center " style="height: 90%;background-color: #FFFFFF;border-radius: 15rpx 15rpx 25rpx 25rpx">
-              {{item.name}}
+          <view v-for="(item,index) in pageData.card" :key="index" class="cardbg b-r-15" @click="showDetail(item)" :class="['cardbg-'+index]">
+            <view class="f-u-35 dis-flex flex-y-center checkCard p-l-20 p-r-20 p-t-20 p-b-5">
+              <view class="circle" :class="['circle-'+index]"></view>
+              <view class="flex-grow t-a-c">
+                <view class="f-w-b">{{item.name}}</view>
+                <view class="f-u-32 font-color p-10">
+                  <view v-if="pageData.status == 1" class="t-a-c f-w-5 f-u-29">
+                    <view v-if="item.value1">{{item.title1}}:{{item.value1}}</view>
+                    <view class="m-t-10" v-if="item.value2">{{item.title2}}:{{item.value2}}</view>
+                  </view>
+                </view>
+              </view>
             </view>
           </view>
         </view>
 
-        <view class="checkMessage w80 p-40 m-t-50 b-r-15 flex-center-center flex-dir-column">
-          <view class="f-u-35 col-f p-20">待检测项目</view>
-          <view class="w-bg w100 b-r-15 m-t-10 dis-flex flex-wrap p-t-20 p-b-20">
-            <view class="flex-two t-a-c p-10">
-              <view>*(BMI)</view>
-              <view>待检测</view>
-            </view>
-            <view class="flex-two t-a-c p-10">
-              <view>*(BMI)</view>
-              <view>待检测</view>
-            </view>
-            <view class="flex-two t-a-c p-10">
-              <view>*(BMI)</view>
-              <view>待检测</view>
+        <view class="checkMessage p-40 m-t-50 b-r-15 flex-center-center flex-dir-column flex-grow" style="min-height: 500rpx">
+          <view class="f-u-35 col-f p-20">{{pageData.status == 1?'检测结果展示':'待检测项目'}}</view>
+          <view class="w-bg w100 b-r-15 m-t-10 flex-y-start flex-wrap flex-grow ">
+            <view v-for="(item,index) in pageData.card" :key="index" class="flex-two t-a-c p-20 f-u-32 f-w-b">
+              <view class="flex-center-center">
+                <view class="circle1" :class="['circleBg-'+index]"></view>
+                <view class="p-l-10">{{ item.name }} </view>
+              </view>
+              <view v-if="pageData.status == 0" class="t-a-c col-red f-w-5 p-l-50"> {{ item.status }} </view>
+              <view v-if="pageData.status == 1" class="t-a-c f-w-5 p-l-50 p-t-20 font-color dis-flex flex-x-center">
+                <view v-if="item.value1">{{item.title1}}:{{item.value1}}</view>
+                <view class="p-l-20" v-if="item.value2">{{item.title2}}:{{item.value2}}</view>
+              </view>
             </view>
 
-            <view class="flex-two p-10"></view>
-            <view class="flex-two p-10" style="height: 40px"></view>
-            <view class="flex-two p-10" style="height: 40px"></view>
           </view>
         </view>
       </view>
 
-      <view class="info-item" @click="toTask(10)">
-        <view class="btn btn-primary">进入测试</view>
+
+      <view class="dis-flex flex-x-center w100 m-t-50">
+        <view v-if="pageData.status == 0" class="w10" @click="toTask(10)">
+          <view class="btn btn-primary w100">进入测试</view>
+        </view>
+        <view v-if="pageData.status == 1" class="w10">
+          <view class="btn btn-primary w100">重新检测</view>
+        </view>
+        <view v-if="pageData.status == 1" class="w10 m-l-50" @click="logout">
+          <view class="btn btn-primary w100">完成</view>
+        </view>
       </view>
+
     </view>
 <!--    <view class="window w40 flex-center-center flex-dir-column">-->
 <!--      <student-info :student="student"/>-->
@@ -113,7 +128,18 @@ const queryForm = reactive({
 })
 const pageData = reactive({
   status: 0,
-  card:[{name:'BMI',img:'/card-bg1.png'},{name:'肺活量',img:'/card-bg2 .png'},{name:'视力',img:'/card-bg3.png'}]
+  studentInfo:{
+    name:'测试',
+    gender:'男',
+    class:'xx年级xx班',
+    model:'机器录入',
+    school:'xxxx学校',
+  },
+  card:[
+    {name:'BMI',img:'/card-bg1.png',status:'待检测',value1:'175cm',value2:'54kg',title1:'身高',title2:'体重'},
+    {name:'肺活量',img:'/card-bg2 .png',status:'待检测',value1:'3500ml',title1:'肺活量'},
+    {name:'视力',img:'/card-bg3.png',status:'待检测',value1:'5.0',value2:'5.0',title1:'左眼',title2:'右眼'}
+  ]
 })
 const search = () => {
   queryForm.student_id = 2260
@@ -124,6 +150,9 @@ const backClick = () => {
     title: '温馨提示',
     content: '确认要退出吗？',
     showCancelButton: true,
+    confirm:()=>{
+      logout()
+    }
   })
   // confirmModal('请认要退出吗？').then(() => {
   //   redirectTo('pages/index/index')
@@ -143,11 +172,13 @@ const countDownHandle = () => {
     },
     endCallback: () => {
       // 清空缓存学生信息
-      // logout()
+      logout()
     },
   })
 }
-
+const showDetail = (item)=>{
+  console.log(item)
+}
 const toTask = () => {
   pageData.status  = 1
 }
@@ -215,7 +246,7 @@ onActivated(() => {
 }
 .cardbg{
   width: 500rpx;
-  height: 180rpx;
+  height: 230rpx;
   background-size: 100%;
   border-radius: 15rpx;
   margin-bottom: 20rpx;
@@ -230,4 +261,49 @@ onActivated(() => {
     background: url('static/card-bg3.png') no-repeat center center;
   }
 }
+
+.checkCard{
+
+  height: 80%;
+  background-color: #FFFFFF;
+  border-radius: 15rpx 15rpx 25rpx 25rpx;
+
+  .circle{
+    width: 130rpx;
+    height: 130rpx;
+    border-radius: 50%;
+    &-0{
+      background-color: #027EEC;
+    }
+
+    &-1{
+      background-color: #F7B03C;
+    }
+
+    &-2{
+      background-color: #17ACC3;
+    }
+  }
+}
+.circle1{
+  width: 35rpx;
+  height: 35rpx;
+  border-radius: 50%;
+}
+.circleBg{
+  &-0{
+    background-color: #027EEC;
+  }
+
+  &-1{
+    background-color: #F7B03C;
+  }
+
+  &-2{
+    background-color: #17ACC3;
+  }
+}
+.font-color{
+  color: #153269;
+}
 </style>