日常开发

src/views/gesture/index.vue

@@ -4,7 +4,7 @@
     <div class="menu">
       <swiper v-if="projectList.length" :slides-per-view="5" :space-between="0" :initialSlide="2" :loop="true"
         :centeredSlides="true" :modules="[Navigation]" @swiper="onSwiper">
-        <swiper-slide v-for="(item, index) in projectList" :key="index" @click="getOption(item)">
+        <swiper-slide v-for="(item, index) in projectList" :key="index">
           <div class="li">
             <div class="pic"><img :src="'static/images/train/' + item.key + '.png'"></div>
             <div class="name">

src/views/test/index.vue

@@ -4,7 +4,9 @@
 
     <div class="main">
       <div class="left">
-        <div class="title"></div>
+        <div class="title">
+          <el-input class="myInput" :prefix-icon="Search" v-model="keywords" placeholder="搜索" clearable />
+        </div>
         <ul>
           <li>初一春季体育测试</li>
           <li>初一春季体育测试</li>
@@ -49,6 +51,7 @@
 <script setup name="TrainIndex" lang="ts">
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Grid } from 'swiper/modules';
+import { Search } from '@element-plus/icons-vue'
 import 'swiper/css';
 import 'swiper/css/grid';
 
@@ -59,8 +62,9 @@ const optionWindowRef = ref();
 const data = reactive<any>({
   projectList: [],
   timerManager: {},
+  keywords: '',
 });
-const { projectList, timerManager } = toRefs(data);
+const { projectList, timerManager, keywords } = toRefs(data);
 
 /**
  * 获取项目
@@ -142,17 +146,28 @@ $waiPadding: 6.51rem;
   overflow: hidden;
 
   .title {
-    height: 7.05vh;
-    line-height: 7.05vh;
+    height: 8.3vh;
     width: 100%;
-    text-align: center;
-    color: #1A293A;
-    font-size: 1.65rem;
+    padding: 0 8%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
     background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
     border-top-left-radius: 1.6rem;
     border-top-right-radius: 1.6rem;
+
+    ::v-deep(.myInput) {
+      width: 100%;
+      height: 4.5vh;
+
+      .el-input__wrapper {
+        border-radius: 2vh;
+        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+      }
+    }
   }
 
+
   ul {
     height: 100%;
     overflow-y: scroll;
@@ -165,7 +180,7 @@ $waiPadding: 6.51rem;
       border-bottom: 1px solid #48677E;
       font-size: 1.6rem;
       color: #ffffff;
-      padding: 1.6vh 0 1.6vh 1.5rem;
+      padding: 1.6vh 0 1.6vh 2rem;
 
       &:last-child {
         border-bottom: none;