样式调整

web/src/assets/css/base.css

@@ -35,6 +35,8 @@ ul li {
   color: #b9412e;
 }
 .el-pager li.active{
+  width: 30px;
+  height: 30px;
   background-color: #b9412e;
   border-radius: 50%;
   color: #fff;

web/src/views/tab3/index.vue

@@ -77,7 +77,7 @@
       <!-- 关闭按钮 -->
       <div class="btnX el-icon-close" @click="myVideoShow = false"></div>
       <div class="videoPlay">
-        <video :src="myVideoSrc" v-if="myVideoSrc" controls></video>
+        <video :src="myVideoSrc" v-if="myVideoSrc" controls autoplay></video>
       </div>
     </div>
   </div>

web/src/views/tab4/tab4-1.vue

@@ -107,7 +107,7 @@ export default {
         background-color: rgba(0,0,0,.8);
         height: 24px;
         line-height: 24px;
-        color: #B9412E;
+        color: #fff;
         text-align: center;
       }
     }

web/src/views/tab4/tab4-2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tab4-2" v-if="myArr.length!==0">
+  <div class="tab4-2" v-if="myArr.length !== 0">
     <div class="top">
       <div class="search">
         <el-input
@@ -8,7 +8,7 @@
           v-model="formData.searchKey"
         >
         </el-input>
-        <span class="btn" @click="mySearch"></span>
+        <span class="btn" @click="mySearch">搜 索</span>
       </div>
     </div>
     <!-- 内容 -->
@@ -39,7 +39,7 @@
     <!-- 大图预览里面的文字显示 -->
     <div class="imgBigShow" v-if="imgBigShow">{{ imgBigTxt }}</div>
   </div>
-  <div class="tab4-2 conNull" v-else> 暂 无 数 据 </div>
+  <div class="tab4-2 conNull" v-else>暂 无 数 据</div>
 </template>
 <script>
 import axios from "@/utils/request";
@@ -182,20 +182,38 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-.conNull{
+.conNull {
   display: flex;
   font-size: 30px;
   align-items: center;
   justify-content: center;
-  color: #B9412E !important;
+  color: #b9412e !important;
 }
 .tab4-2 {
+  /*修改提示文字的颜色*/
+  /deep/input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #B9412E;
+  }
+  /deep/input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #B9412E;
+  }
+  /deep/input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #B9412E;
+  }
+  /deep/input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #B9412E;
+  }
   // position: relative;
   width: 100%;
   height: 750px;
   min-width: 1500px;
   color: black;
   .top {
+    height: 10px;
     position: relative;
     width: 100%;
     text-align: center;
@@ -203,22 +221,33 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
+  /deep/.el-input__inner {
+    border-radius: 40px;
+    border: 1px solid #b9412e;
+  }
+      width: 350px;
       left: 0;
       bottom: -10px;
       position: absolute;
       .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        z-index: 999;
+        background-color: #b9412e;
+        border-radius: 40px;
         cursor: pointer;
         position: absolute;
-        right: 0;
-        top: 0;
+        right: -20px;
+        top: 3px;
         height: 40px;
-        width: 40px;
-        background-color: transparent;
+        width: 60px;
       }
     }
   }
   .conten {
-    margin-top: 30px;
+    margin-top: 10px;
     min-width: 1556px;
     height: 680px;
     display: flex;

web/src/views/tab4/tab4-4.vue

@@ -8,7 +8,7 @@
           v-model="formData.searchKey"
         >
         </el-input>
-        <span class="btn" @click="mySearch"></span>
+        <span class="btn" @click="mySearch">搜 索</span>
       </div>
     </div>
     <!-- 内容 -->
@@ -150,12 +150,30 @@ export default {
   color: #b9412e !important;
 }
 .tab4-4 {
+  /*修改提示文字的颜色*/
+  /deep/input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #B9412E;
+  }
+  /deep/input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #B9412E;
+  }
+  /deep/input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #B9412E;
+  }
+  /deep/input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #B9412E;
+  }
   // position: relative;
   width: 100%;
   height: 750px;
   min-width: 1500px;
   color: black;
   .top {
+    height: 10px;
     position: relative;
     width: 100%;
     text-align: center;
@@ -163,22 +181,33 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
+  /deep/.el-input__inner {
+    border-radius: 40px;
+    border: 1px solid #b9412e;
+  }
+      width: 350px;
       left: 0;
       bottom: -10px;
       position: absolute;
       .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        z-index: 999;
+        background-color: #b9412e;
+        border-radius: 40px;
         cursor: pointer;
         position: absolute;
-        right: 0;
-        top: 0;
+        right: -20px;
+        top: 3px;
         height: 40px;
-        width: 40px;
-        background-color: transparent;
+        width: 60px;
       }
     }
   }
   .conten {
-    margin-top: 30px;
+    margin-top: 10px;
     min-width: 1556px;
     height: 680px;
     display: flex;

web/src/views/tab4/tab4-5.vue

@@ -3,12 +3,14 @@
     <div class="top">
       <div class="search">
         <el-input
-          placeholder="请输入学籍号查询"
+          placeholder="请输入姓名"
           suffix-icon="el-icon-search"
           v-model="formData.searchKey"
         >
         </el-input>
-        <span class="btn" @click="mySearch"></span>
+        <span class="btn" @click="mySearch">
+          <i class="el-icon-search"></i>&nbsp; 查 询</span
+        >
       </div>
     </div>
     <!-- 内容 -->
@@ -31,7 +33,7 @@
     <div class="details" v-show="details">
       <div class="left">
         <div class="el-icon-arrow-left" @click="details = false"></div>
-        <img :src="baseURL + txtObj.thumb" alt="" v-if='txtObj.thumb'/>
+        <img :src="baseURL + txtObj.thumb" alt="" v-if="txtObj.thumb" />
         <p>{{ txtObj.name }}</p>
       </div>
       <div class="right">
@@ -84,8 +86,13 @@ export default {
     },
     mySearch() {
       // console.log("点击了搜索");
-      if (this.formData.searchKey.trim() === "")
-        return this.$message.warning("请输入学籍号");
+      if (this.formData.searchKey.trim() === ""){
+        this.myArr=[]
+        this.baseTxt=false
+        return
+      }
+
+        // return this.$message.warning("不能为空！");
       this.formData.pageNum = 1;
       this.studentList(this.formData);
     },
@@ -129,13 +136,30 @@ export default {
   color: #b9412e !important;
 }
 .tab4-5 {
+  /*修改提示文字的颜色*/
+  /deep/input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #b9412e;
+  }
+  /deep/input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #b9412e;
+  }
+  /deep/input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #b9412e;
+  }
+  /deep/input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #b9412e;
+  }
   // position: relative;
   width: 100%;
   height: 750px;
   min-width: 1500px;
   color: black;
   .top {
-    height: 50px;
+    height: 100px;
     position: relative;
     width: 100%;
     text-align: center;
@@ -143,26 +167,41 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
+      /deep/.el-input__inner {
+        border-radius: 40px;
+        border: 1px solid #b9412e;
+      }
       width: 500px;
       left: 50%;
       transform: translateX(-50%);
       bottom: 0px;
       position: absolute;
       .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        z-index: 999;
+        background-color: #b9412e;
+        border-radius: 40px;
         cursor: pointer;
         position: absolute;
-        right: 0;
-        top: 0;
+        right: -20px;
+        top: 3px;
         height: 40px;
-        width: 40px;
-        background-color: transparent;
+        width: 80px;
+        /deep/.el-icon-search {
+          color: #fff;
+          font-weight: 400;
+          font-size: 16px;
+        }
       }
     }
   }
   .conten {
-    margin-top: 30px;
+    margin-top: 50px;
     min-width: 1556px;
-    height: 680px;
+    height: 600px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -189,9 +228,9 @@ export default {
         text-align: center;
       }
     }
-    .row:nth-of-type(5n) {
-      margin-right: 0;
-    }
+    // .row:nth-of-type(5n) {
+    //   margin-right: 0;
+    // }
   }
   .paging {
     position: absolute;