css样式修改

css/utils.scss

@@ -483,7 +483,9 @@
 .m-0-auto {
   margin: 0 auto;
 }
-
+.m-40 {
+  margin: 40rpx;
+}
 .m-t-4 {
   margin-top: 4rpx;
 }

pages/index/index.vue

@@ -1,8 +1,15 @@
 <template>
   <view class="window-box">
     <ly-back :showBack="false"/>
-    <view class="search w100 h100 flex-center-center">
+    <view class="search w100 h100 flex-center-center main">
+      <view class="w60 h60 bg2 flex-center-center flex-wrap flex-dir-column">
+        <view>请将卡片放入感应区</view>
+        <view >
+          <uv-image :src="pD.imgUrl+ '/index-card.png'" width="500px" height="306px"></uv-image>
+        </view>
+      </view>
       <view class="btn btn-primary" @click="search">扫码</view>
+      <view class="btn btn-primary" @click="next">下一页</view>
       <!--      <view class="btn btn-primary" @click="toSelect">手动选择</view>-->
     </view>
   </view>
@@ -18,6 +25,7 @@ const pD = reactive({
   title: '学生未激活',
   select: 0,
   selectMax: 1,
+  imgUrl:'/static',
 })
 const queryForm = reactive({
   student_id: 0,
@@ -37,12 +45,33 @@ const search = async () => {
   }
   // navTo('pages/task/info')
 }
+const next = ()=>{
+  navTo('pages/task/info', {
+    id: queryForm.student_id,
+  })
+}
 const toSelect = () => {
   navTo('pages/classes/select')
 }
 </script>
 
 <style lang="scss" scoped>
+.main{
+  background-image: url('static/index-bg.png');
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.bg2{
+  background-image: url('static/index-bg2.png');
+  width: 80%;
+  height: 80%;
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
 .info-item {
   display: flex;
   align-items: center;

pages/index/init.vue

@@ -1,53 +1,79 @@
 <template>
   <view class="window-box dis-flex flex-y-center">
-    <view class="steps h100 w30 flex-center-center">
-      <uv-steps :current="current" :customStyle="[{
-        width:'70%',
-        height:'90vh',
-      }]" activeIcon="checkmark" direction="column" inactiveIcon="arrow-right">
-        <uv-steps-item :iconSize="60" title="网络检测"></uv-steps-item>
-        <uv-steps-item :iconSize="60" title="登录"></uv-steps-item>
-        <uv-steps-item :iconSize="60" title="运行"></uv-steps-item>
-      </uv-steps>
-    </view>
-    <view class="form-box h100 w60 flex-start-center flex-dir-column">
-      <view class="w100 h90 flex-start-center">
+    <view class="steps w40 form-box">
+<!--      <uv-steps :current="current" :customStyle="[{-->
+<!--        width:'70%',-->
+<!--        height:'90vh',-->
+<!--      }]" activeIcon="checkmark" direction="column" inactiveIcon="arrow-right">-->
+<!--        <uv-steps-item :iconSize="60" title="网络检测"></uv-steps-item>-->
+<!--        <uv-steps-item :iconSize="60" title="登录"></uv-steps-item>-->
+<!--        <uv-steps-item :iconSize="60" title="运行"></uv-steps-item>-->
+<!--      </uv-steps>-->
+      <view class="h90 dis-flex flex-wrap flex-y-center step">
+        <view v-for="(item,index) in pd.steps" class="w100">
+          <view class="dis-flex flex-y-center flex-x-evenly p-r" :class="[current < index? 'opacity' :'']">
+            <view class="circle dis-flex flex-center-center f-u-41 f-w-b p-r" :class="['circle-'+index]">
+              <text>{{index+1}}</text>
+              <view v-if="item.next" class="p-a next">
+                <uv-image :src="pd.imgUrl+item.next" width="22px" height="97px" mode="widthFix"></uv-image>
+              </view>
+            </view>
+            <view class="dian" :class="['dian-'+index]"></view>
+            <view class="content dis-flex flex-center-center col-f f-u-51 f-w-b">
+              <view class="w80 p-b-20 b-b p-l-20">{{item.title}}</view>
+            </view>
+            <view v-if="item.img" class="p-a bg">
+              <uv-image :src="pd.imgUrl+item.img" width="86px" height="97px"></uv-image>
+            </view>
+          </view>
+        </view>
+      </view>
 
-        <view v-if="current === 0" class="flex-dir-column">
+    </view>
+    <view class="form-box w60 flex-center-center flex-dir-column">
+      <view class="w100 h70 flex-center-center w-bg b-r-15 p-r">
+        <view v-if="current === 0" class="w100">
           <view v-if="pd.network.search" class="f-42 col-c t-a-c">
             网络检测中。。。
           </view>
-          <view v-if="pd.network.type === 'none'" class="" @click="network">重新检测网络</view>
+<!--          <view @click="network">重新检测网络</view>-->
           <template v-else>
-            <view class="f-42 col-green t-a-c">
-              当前网络：{{ pd.network.type === 'unknown' ? '未知网络但可用' : pd.network.type }}
+            <view class="dis-flex flex-wrap flex-dir-column flex-center-center ">
+              <view>
+                <uv-image :src="pd.imgUrl+ '/login-wifi.png'" width="150px" height="150px"></uv-image>
+              </view>
+              <view class="f-u-35 col-9 t-a-c p-t-10">
+                当前网络：{{ pd.network.type === 'unknown' ? '未知网络但可用' : pd.network.type }}
+              </view>
             </view>
-            <view class="btn btn" @click="currentAdd">下一步</view>
           </template>
+          <view class="p-a btns">
+            <view class="btn btn-primary w100" @click="next">{{pd.network.type === 'none' ? '重新检测网络':'下一步'}}</view>
+          </view>
         </view>
 
-        <view v-if="current === 1" class="flex-dir-column">
-          <view v-if="pd.login" class="f-42 col-c t-a-c">
-            自动登录中。。。
+        <view v-if="current === 1" class="flex-dir-column w100">
+          <view class=" dis-flex flex-center-center w100">
+            <view v-if="pd.login" class="f-42 col-c t-a-c">
+              自动登录中。。。
+            </view>
+            <view v-else class="w50">
+              <uv-form ref="form" :model="pd.loginForm" labelPosition="left" label-width="80px">
+                <uv-form-item borderBottom label="设备码" leftIcon="order" prop="pd.loginForm.mac">
+                  <uv-input v-model="pd.loginForm.mac" border="none"/>
+                </uv-form-item>
+                <uv-form-item borderBottom label="密码" leftIcon="lock-fill" prop="pd.loginForm.pwd">
+                  <uv-input v-model="pd.loginForm.pwd" border="none" type="password"/>
+                </uv-form-item>
+              </uv-form>
+            </view>
           </view>
-          <view v-else class="">
-            <uv-form ref="form" :model="pd.loginForm" labelPosition="left">
-              <uv-form-item borderBottom label="设备码" prop="pd.loginForm.mac">
-                <uv-input v-model="pd.loginForm.mac" border="none"/>
-              </uv-form-item>
-              <uv-form-item borderBottom label="密码" prop="pd.loginForm.pwd">
-                <uv-input v-model="pd.loginForm.pwd" border="none" type="password"/>
-              </uv-form-item>
-              <uv-form-item borderBottom label="　" prop="pd.loginForm.mac">
-                <view class="w100">
-                  <view class="btn btn-primary" @click="loginHandle">登录</view>
-                </view>
-              </uv-form-item>
-            </uv-form>
+          <view class=" p-a btns">
+            <view class="btn btn-primary w100" @click="loginHandle">登录</view>
           </view>
         </view>
 
-        <view v-if="current === 2" class="f-42 col-green t-a-c ">
+        <view v-if="current === 2" class="f-42 col-green t-a-c flex-center-center">
           <uv-icon name="checkmark-circle" size="80"/>
           检测完成，正在进入系统
         </view>
@@ -74,6 +100,7 @@ const userStore = useUserStore()
 const configStore = useConfigStore()
 
 const current = ref(0)
+
 const pd = reactive({
   network: {
     search: false,
@@ -84,6 +111,8 @@ const pd = reactive({
     mac: '',
     pwd: '',
   },
+  imgUrl:'/static',
+  steps:[{title:'网络检测',img:'/login-image1.png',next:'/login-next1.png'},{title:'登陆',next:'/login-next1.png'},{title:'进入系统'}],
 })
 const machineList = ref(JSON.parse(JSON.stringify(machineTypeList)))
 
@@ -99,15 +128,6 @@ const currentAdd = async () => {
   }
 }
 
-const restartCheck = () => {
-  current.value = 0
-}
-
-const loginHandle = () => {
-  pd.login = true
-  currentAdd()
-}
-
 const network = async () => {
   pd.network.search = true
   try {
@@ -119,6 +139,25 @@ const network = async () => {
   }
 }
 
+const next = async ()=>{
+  if(current.value === 0){
+    if(pd.network.type === 'none'){
+      await network()
+    }else {
+      await currentAdd()
+    }
+  }
+}
+
+const restartCheck = () => {
+  current.value = 0
+}
+
+const loginHandle = () => {
+  pd.login = true
+  currentAdd()
+}
+
 const machineChange = (item) => {
   configStore.setMachineType(item)
   currentAdd()
@@ -137,11 +176,10 @@ onActivated(() => {
 
 <style lang="scss" scoped>
 .window-box {
-  background: #398CFF;
+  background: #EBEDF4;
 }
 
 .steps {
-  background: red;
 
   > > > .uv-steps-item {
     background: green;
@@ -153,6 +191,75 @@ onActivated(() => {
 }
 
 .form-box {
-  padding-left: 10vw;
+  padding: 2.5vw;
+}
+.step{
+
+  .circle{
+    width: 90rpx;
+    height: 90rpx;
+    border-radius: 50%;
+
+    &-0{
+      background-color: #FFFFFF;
+      border: 8rpx solid #027EEC;
+      color: #027EEC;
+    }
+
+    &-1{
+      background-color: #FFFFFF;
+      border: 8rpx solid #17ACC3;
+      color: #17ACC3;
+    }
+
+    &-2{
+      background-color: #FFFFFF;
+      border: 8rpx solid #F7B03C;
+      color: #F7B03C;
+    }
+  }
+
+  .dian{
+    width: 28rpx;
+    height: 28rpx;
+    border-radius: 50%;
+    &-0{
+      background-color: #027EEC;
+    }
+
+    &-1{
+      background-color: #17ACC3;
+    }
+
+    &-2{
+      background-color: #F7B03C;
+    }
+  }
+  .content{
+    background-image: url('static/login-bg1.png');
+    width: 500rpx;
+    height: 200rpx;
+    background-position: center center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .bg{
+    right: 7%;
+    top: -35%;
+  }
+  .next{
+    top: 100%;
+    transform: translateY(60%)
+  }
+}
+
+.opacity{
+  opacity: 0.5;
+}
+.btns{
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200rpx;
 }
 </style>

pages/task/info.vue

@@ -1,41 +1,89 @@
 <template>
-  <view class="window-box dis-flex">
+  <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 class="window w40 flex-center-center flex-dir-column">
-      <student-info :student="student"/>
-    </view>
-    <view class="w60 h100 dis-flex flex-x-center flex-dir-column">
-      <template v-if="configStore.mType === 7">
-        <view class="info-item">
-          <view class="info-item-label">身高</view>
-          <view class="">
-            <view class="col-checked f-64">{{ queryForm.value1 }}</view>
-          </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>
-        <view class="info-item">
-          <view class="info-item-label">体重</view>
-          <view class="">
-            <view class="col-checked f-64">{{ queryForm.value2 }}</view>
+      </view>
+
+      <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>
           </view>
         </view>
-      </template>
-      <view v-if="configStore.mType === 8" class="info-item">
-        <view class="info-item-label">肺活量</view>
-        <view class="">
-          <view class="btn btn-primary">进入肺活量</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>
+
+            <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 v-if="configStore.mType === 9" class="info-item">
-        <view class="info-item-label">视力</view>
-        <view class="">
-          <view class="btn btn-primary">进入视力</view>
-        </view>
+
+      <view class="info-item" @click="toTask(10)">
+        <view class="btn btn-primary">进入测试</view>
       </view>
-      <!--      <view class="info-item" @click="toTask(10)">-->
-      <!--        <view class="btn btn-primary">进入测试</view>-->
-      <!--      </view>-->
     </view>
+<!--    <view class="window w40 flex-center-center flex-dir-column">-->
+<!--      <student-info :student="student"/>-->
+<!--    </view>-->
+<!--    <view class="w60 h100 dis-flex flex-x-center flex-dir-column">-->
+<!--      <template v-if="configStore.mType === 7">-->
+<!--        <view class="info-item">-->
+<!--          <view class="info-item-label">身高</view>-->
+<!--          <view class="">-->
+<!--            <view class="col-checked f-64">{{ queryForm.value1 }}</view>-->
+<!--          </view>-->
+<!--        </view>-->
+<!--        <view class="info-item">-->
+<!--          <view class="info-item-label">体重</view>-->
+<!--          <view class="">-->
+<!--            <view class="col-checked f-64">{{ queryForm.value2 }}</view>-->
+<!--          </view>-->
+<!--        </view>-->
+<!--      </template>-->
+<!--      <view v-if="configStore.mType === 8" class="info-item">-->
+<!--        <view class="info-item-label">肺活量</view>-->
+<!--        <view class="">-->
+<!--          <view class="btn btn-primary">进入肺活量</view>-->
+<!--        </view>-->
+<!--      </view>-->
+<!--      <view v-if="configStore.mType === 9" class="info-item">-->
+<!--        <view class="info-item-label">视力</view>-->
+<!--        <view class="">-->
+<!--          <view class="btn btn-primary">进入视力</view>-->
+<!--        </view>-->
+<!--      </view>-->
+<!--    </view>-->
     <ly-modal ref="modelRef"></ly-modal>
   </view>
 </template>
@@ -44,7 +92,7 @@
 import {onActivated, onMounted, reactive, ref} from "vue";
 import {formatZero} from "@/utils/util";
 import {useConfigStore} from "@/store/useConfigStore";
-import {confirmModal, getBeforePage, navTo, redirectTo, showToast} from "@/utils/app";
+import {redirectTo} from "@/utils/app";
 import debounce from "@/utils/debounce";
 import studentInfo from "./studentInfo"
 import storage from "@/utils/storage";
@@ -63,6 +111,10 @@ const queryForm = reactive({
   value1: 0,
   value2: 0,
 })
+const pageData = reactive({
+  status: 0,
+  card:[{name:'BMI',img:'/card-bg1.png'},{name:'肺活量',img:'/card-bg2 .png'},{name:'视力',img:'/card-bg3.png'}]
+})
 const search = () => {
   queryForm.student_id = 2260
 }
@@ -96,6 +148,10 @@ const countDownHandle = () => {
   })
 }
 
+const toTask = () => {
+  pageData.status  = 1
+}
+
 // 挂载完成之后
 onMounted((r) => {
   // student = storage.getKey(`student-${r.id}`)
@@ -140,4 +196,38 @@ onActivated(() => {
   align-items: center;
   font-size: 60rpx;
 }
+
+.baseMessage {
+  background: linear-gradient(180deg, #FFFFFF 0%, #E0EDF8 100%);
+  box-shadow: 0px 0px 8px 1px #498CFC;
+}
+
+.avatar {
+  border: 8rpx solid #498CFC;
+  border-radius: 50%;
+  top: 0;
+  transform: translateY(-50%);
+  left: 60rpx;
+}
+
+.checkMessage {
+  background: linear-gradient(180deg, #498CFC 0%, #E0EDF8 100%);
+}
+.cardbg{
+  width: 500rpx;
+  height: 180rpx;
+  background-size: 100%;
+  border-radius: 15rpx;
+  margin-bottom: 20rpx;
+
+  &-0{
+    background: url('static/card-bg1.png') no-repeat center center;
+  }
+  &-1{
+    background: url('static/card-bg2.png') no-repeat center center;
+  }
+  &-2{
+    background: url('static/card-bg3.png') no-repeat center center;
+  }
+}
 </style>

pages/task/studentInfo.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="">
-    <view class="window w40 flex-center-center flex-dir-column">
-      <uv-image :src="`${imgUrl}/avatar-${props.student.gender==2?'girl':'boy'}.png`"/>
-      <view class="">{{ props.student.jname || '' }}</view>
+    <view class="window flex-center-center flex-dir-column">
+      <uv-image width="60px" height="60px" :src="`${imgUrl}/avatar-${props.student.gender==2?'girl':'boy'}.png`"/>
+<!--      <view class="">{{ props.student.jname || '' }}</view>-->
     </view>
   </view>
 </template>
@@ -31,5 +31,4 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 </style>