日常开发

src/components/ChooseStudent/index.vue

@@ -7,23 +7,25 @@
       <div class="optionWindow" v-if="optionWindow.show">
         <div class="box">
           <div class="top">
-            <div>手动选择学生</div>
-            <div @click="close">关闭</div>
+            <div class="title">手动选择</div>
+            <div class="close" @click="close"></div>
           </div>
           <div class="content">
             <div class="searchBox">
-              <el-select v-model="optionForm.grade" :popper-append-to-body="false" placeholder="年级" clearable>
+              <el-select class="select" v-model="optionForm.grade" :popper-append-to-body="false" placeholder="年级"
+                clearable>
                 <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
-              <el-select v-model="optionForm.class" :popper-append-to-body="false" placeholder="班级" clearable>
+              <el-select class="select" v-model="optionForm.class" :popper-append-to-body="false" placeholder="班级"
+                clearable>
                 <el-option v-for="item in classData" :key="item.value" :label="item.name" :value="item.id" />
               </el-select>
-              <el-input v-model="optionForm.name" placeholder="请输入学生姓名" clearable />
-              <el-button type="primary" @click="getStudent">搜索</el-button>
+              <el-input class="input" v-model="optionForm.name" placeholder="请输入学生姓名" clearable />
+              <el-button class="button" type="primary" @click="getSearchStudent">搜索</el-button>
             </div>
             <div class="tableBox">
-              <el-table :data="tableData" border class="table" @row-click="handleSelectionChange"
-                @row-dblclick="confirm" highlight-current-row>
+              <el-table :data="tableData" class="table" @row-click="handleSelectionChange" @row-dblclick="confirm"
+                highlight-current-row>
                 <el-table-column label="头像" width="120">
                   <template #default="scope">
                     <el-avatar :src="scope.row.face_pic || scope.row.logo_url" />
@@ -34,15 +36,15 @@
                 <el-table-column prop="genderName" label="性别" />
                 <el-table-column prop="student_number" label="学号" />
               </el-table>
-
-              <el-pagination layout="sizes, prev, pager, next" :total="page.total" :page-size="page.size"
+            </div>
+            <div class="page">
+              <el-pagination layout="prev, pager, next" :total="page.total" :page-size="page.size"
                 :page-sizes="[20, 60, 120]" :current-page="page.page" @size-change="handleSizeChange"
                 @current-change="handleCurrentChange" />
             </div>
           </div>
           <div class="bottom">
-            <div @click="close">取消</div>
-            <div @click="confirm">确定</div>
+            <div class="btn" @click="confirm">确定</div>
           </div>
         </div>
       </div>
@@ -80,7 +82,7 @@ const data = reactive<any>({
   tableData: [],
   page: {
     current: 1,
-    size: 60,
+    size: 100,
     total: 0,
   },
   selectValue: [],
@@ -150,17 +152,23 @@ const getStudent = () => {
   });
 };
 
+//搜索
+const getSearchStudent = () => {
+  page.value.current = 1;
+  getStudent();
+};
+
 //切换页码
 const handleCurrentChange = (data: number) => {
-  page.value.current = data
-  getStudent()
+  page.value.current = data;
+  getStudent();
 };
 
 //切换页数
 const handleSizeChange = (data: number) => {
-  page.value.current = 1
-  page.value.size = data
-  getStudent()
+  page.value.current = 1;
+  page.value.size = data;
+  getStudent();
 };
 
 //被选行
@@ -188,7 +196,7 @@ defineExpose({
   optionWindow
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .mask {
   position: fixed;
   height: 100vh;
@@ -213,37 +221,142 @@ defineExpose({
 
   .box {
     width: 50%;
-    background: #000000;
+    border-radius: 1.6rem;
+    background: linear-gradient(60deg, #092941 -85%, #2A484B 96%);
+    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
+    padding: 20px;
 
     .top {
       color: #ffffff;
       display: flex;
-      justify-content: space-around;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .title {
+        font-size: 1.93rem;
+        color: #13ED84;
+      }
+
+      .close {
+        width: 3.2rem;
+        height: 3.2rem;
+        box-sizing: border-box;
+        border: 1px solid #979797;
+        background-image: url("@/assets/images/common/close.png");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 45% 45%;
+        background-color: rgba(216, 216, 216, 0.8);
+        border-radius: 50%;
+        transition: all 0.5s;
+        cursor: pointer;
+
+        &:hover {
+          transform: rotate(180deg);
+          background-color: rgba(216, 216, 216, 1);
+        }
+      }
     }
 
     .content {
-
+      margin-bottom: 20px;
 
       .searchBox {
+        margin-bottom: 10px;
         display: flex;
+        justify-content: space-between;
+
+        .select,
+        .input {
+          width: 27%;
+        }
+
+        .el-select__wrapper {
+          border-radius: 15px;
+          color: #1A293A;
+          background: radial-gradient(30% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%) !important;
+        }
+
+        .el-input__wrapper {
+          width: 25%;
+          background: #ffffff;
+          border-radius: 15px;
+        }
+
+        .button {
+          color: #1A293A;
+          background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+          box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+          border: none;
+        }
+
       }
 
       .tableBox {
         .table {
-          height: 40vh;
+          height: 50vh;
+          border-radius: 1.6rem;
+          margin-bottom: 10px;
+          overflow: hidden;
+        }
+
+        .el-table__body tr {
+          cursor: pointer;
+        }
+
+        .el-table__body tr.current-row>td.el-table__cell {
+          color: #1A293A;
+          background: #07FFE7;
+        }
+      }
+
+      .page {
+
+        .el-pagination {
+          display: flex;
+          justify-content: center;
+
+          .el-pager {
+            margin: 0 10px !important;
+            background: #D8D8D8;
+            box-sizing: border-box;
+            border: 1px solid #979797;
+            border-radius: 15px;
+            overflow: hidden;
+          }
+
+          .btn-prev,
+          .btn-next {
+            border-radius: 50%;
+            background: radial-gradient(116% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+          }
         }
       }
     }
 
     .bottom {
-      height: 60px;
+      height: 3.59rem;
       align-items: center;
       color: #ffffff;
       display: flex;
       justify-content: space-around;
+
+      .btn {
+        width: 33%;
+        height: 3.59rem;
+        line-height: 3.59rem;
+        font-size: 2rem;
+        margin: 0 auto;
+        border-radius: 0.83rem;
+        font-size: 2rem;
+        text-align: center;
+        color: #1A293A;
+        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+        cursor: pointer;
+      }
     }
   }
-
-
 }
 </style>

src/components/FaceWindow/index.vue

@@ -121,9 +121,9 @@ defineExpose({
 
         .shine {
           position: absolute;
-          left: -4vh;
+          left: -5vh;
           top: 0;
-          width: 4vh;
+          width: 5vh;
           height: 22.3vh;
           animation: shineani 3s infinite;
           -webkit-animation: shineani 3s infinite;
@@ -163,11 +163,11 @@ defineExpose({
 
 @keyframes shineani {
   0% {
-    left: -4vh;
+    left: -5vh;
   }
 
   100% {
-    left: 26.3vh;
+    left: calc(22.3vh + 5vh);
   }
 }
 </style>

src/views/login/index.vue

@@ -171,6 +171,7 @@ $waiPadding: 6.51rem;
         border-radius: 0.83rem;
         font-size: 2rem;
         opacity: 1;
+        text-align: center;
         cursor: pointer;
         background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
         box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);

src/views/train/test.vue

@@ -17,7 +17,7 @@
           <div class="top-left" @click="getChooseStudent">
             <div class="top-left-center">
               <div class="pic" :class="{ 'pic2': faceCheckStu.student_id }" v-if="faceCheckStu.student_id"> <img
-                  :src="faceCheckStu.logo_url || faceCheckStu.face_pic" /></div>
+                  :src="faceCheckStu.face_pic || faceCheckStu.logo_url" /></div>
               <div class="pic" v-else>
                 <img src="@/assets/images/test/profilePicture.png" />
               </div>
@@ -442,6 +442,7 @@ const getChooseStudent = () => {
  * 返回被选学生
 */
 const returnStudent = (data: any) => {
+  chooseStudentRef.value.close();
   faceCheckStu.value = data;
   faceWindowRef.value.open();
   //然后定时自动关闭