修改图片放大功能

web/src/assets/css/base.css

@@ -51,4 +51,22 @@ ul li {
 }
 .el-image-viewer__img{
   object-fit: cover;
+}
+.el-pagination button:disabled{
+  background-color: transparent;
+}
+.el-pagination .btn-next, .el-pagination .btn-prev{
+  background-color: transparent;
+}
+.el-image-viewer__actions__inner > i {
+  display: none;
+}
+.el-image-viewer__actions__inner .el-icon-refresh-left{
+  display: block;
+}
+.el-image-viewer__actions__inner .el-icon-refresh-right{
+  display: block;
+}
+.el-image-viewer__actions{
+  width: 120px;
 }

web/src/utils/api.js

@@ -37,4 +37,20 @@ export const leaderList = (data) => {
     url: '/web/leaderList',
     data
   })
+}
+// 领导列表
+export const studentList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/studentList',
+    data
+  })
+}
+// 军歌列表
+export const musicList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/musicList',
+    data
+  })
 }

web/src/views/tab3/index.vue

@@ -208,29 +208,29 @@ export default {
             myTemp.addEventListener("click", () => {
               this.imgBigShow = false;
             });
-            //因为污染自己写滚轮缩放
-            document
-              .querySelector(".el-image-viewer__wrapper")
-              .addEventListener("mousewheel", (event) => {
-                let delta = 0;
-                if (!event) event = window.event;
-                if (event.wheelDelta) {
-                  delta = event.wheelDelta / 120;
-                  if (window.opera) delta = -delta;
-                } else if (event.detail) {
-                  delta = -event.detail / 3;
+             //因为污染自己写滚轮缩放
+          document
+            .querySelector(".el-image-viewer__wrapper")
+            .addEventListener("mousewheel", (event) => {
+              let delta = 0;
+              if (!event) event = window.event;
+              if (event.wheelDelta) {
+                delta = event.wheelDelta / 120;
+                if (window.opera) delta = -delta;
+              } else if (event.detail) {
+                delta = -event.detail / 3;
+              }
+              let img = document.querySelector(".el-image-viewer__img");
+              if (delta > 0) {
+                let width = img.width;
+                img.width = width * 1.1;
+              } else if (delta < 0) {
+                let width = img.width;
+                if (width > 100) {
+                  img.width = width * 0.9;
                 }
-                let img = document.querySelector(".el-image-viewer__img");
-                if (delta > 0) {
-                  let width = img.width;
-                  img.width = width * 1.1;
-                } else if (delta < 0) {
-                  let width = img.width;
-                  if (width > 400) {
-                    img.width = width * 0.9;
-                  }
-                }
-              });
+              }
+            });
             const temp = document.querySelector(".el-image-viewer__close");
             temp.addEventListener("click", () => {
               this.imgBigShow = false;
@@ -287,7 +287,7 @@ export default {
       }
     });
 
-    document.addEventListener("fullscreenchange", (e) => {
+    document.addEventListener("fullscreenchange", () => {
       if (!document.fullscreenElement) {
         // console.log('退出啊fullscreenchange1111111111')
         setTimeout(() => {
@@ -298,7 +298,7 @@ export default {
       }
     });
 
-    document.addEventListener("MSFullscreenChange", (e) => {
+    document.addEventListener("MSFullscreenChange", () => {
       if (!document.msFullscreenElement) {
         // console.log('IE退出111111')
         setTimeout(() => {
@@ -308,7 +308,7 @@ export default {
         // console.log('IE进')
       }
     });
-    document.addEventListener("mozfullscreenchange", (e) => {
+    document.addEventListener("mozfullscreenchange", () => {
       if (!document.mozFullScreenElement) {
         // console.log('火狐退出1111111111111')
         this.$nextTick(() => {

web/src/views/tab4/audio.vue

@@ -0,0 +1,351 @@
+<template>
+  <div
+    class="images"
+  >
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      :src="audioSrc"
+    ></audio>
+    <div class="audiocon">
+      <div class="adcon">
+        <div class="bar">
+          <div class="activeLine" @click="seekTime"></div>
+          <div :style="{ left: currentPosi + '%' }" class="dot"></div>
+        </div>
+        <img
+          @click="bofang"
+          :src="
+            require(`@/assets/images/project/${
+              isPlay ? 'zanting' : 'bofang'
+            }.png`)
+          "
+          alt=""
+        />
+        <div class="time">
+          <span>{{ time }}</span
+          ><span> / {{ allTime }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audioSrc:{
+      type:String
+    }
+  },
+  data() {
+    return {
+      active: 0,
+      time: 0,
+      _audio: "",
+      isPlay: this.isMobile,
+      currentPosi: 0,
+      allTime: 0,
+    };
+  },
+  methods: {
+    bofang() {
+      if (this._audio.paused) {
+        this._audio.play();
+        this.isPlay = true;
+      } else {
+        this._audio.pause();
+        this.isPlay = false;
+      }
+    },
+    transTime(time) {
+      var duration = parseInt(time);
+      var minute = parseInt(duration / 60);
+      var sec = (duration % 60) + "";
+      var isM0 = ":";
+      if (minute == 0) {
+        minute = "00";
+      } else if (minute < 10) {
+        minute = "0" + minute;
+      }
+      if (sec.length == 1) {
+        sec = "0" + sec;
+      }
+      return minute + isM0 + sec;
+    },
+    updateProgress() {
+      this.currentPosi = (this._audio.currentTime / this._audio.duration) * 100;
+      this.time = this.transTime(this._audio.currentTime);
+    },
+
+    audioEnded() {
+      this._audio.currentTime = 0;
+      this._audio.pause();
+      this.isPlay = false;
+    },
+
+    seekTime(e) {
+      var rate = e.offsetX / e.target.clientWidth;
+      this._audio.currentTime = this._audio.duration * rate;
+      this.updateProgress();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this._audio = $("#audioTag")[0];
+      $("#audioTag").on("loadedmetadata", (e) => {
+        this.time = this.isMobile?'00:00':this.transTime(e.currentTarget.duration);
+        this.allTime = this.transTime(e.currentTarget.duration);
+        this._audio.play()
+        this.isPlay = true;
+      });
+
+      document.addEventListener("WeixinJSBridgeReady", function () {
+        this._audio.play()
+      }, false);
+
+      $("#audioTag").on("timeupdate", () => {
+        this.updateProgress();
+      });
+
+       $("#audioTag").on("timeupdate", () => {
+        this.updateProgress();
+      });
+
+      $("#audioTag").on("ended", () => {
+        this.audioEnded();
+      });
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.images {
+  overflow: hidden;
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  text-align: center;
+  .title {
+    padding: 0 80px;
+    display: inline-block;
+    color: #dba761;
+    font-weight: bold;
+    font-size: 36px;
+    height: 70px;
+    line-height: 70px;
+    background: #bc1515;
+    border-radius: 60px;
+    margin: 45px auto;
+  }
+  .img-con {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    padding-bottom: 40px;
+    > img {
+      max-width: 1000px;
+      max-height: 600px;
+    }
+  }
+  @color: #dba761;
+  .audiocon {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #c04340;
+    .adcon {
+      width: 94%;
+      margin: 0 auto;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        flex: auto;
+        position: relative;
+        background: none;
+        display: flex;
+        width: 80%;
+        height: 30px;
+        overflow: visible;
+        .activeLine {
+          height: 10px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: @color;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          width: @wh;
+          height: @wh;
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          background-color: #fff;
+          top: 50%;
+          transform: translate(-@wh*0.5, -50%);
+          border-radius: 50%;
+          cursor: pointer;
+        }
+      }
+
+      > img {
+        margin: 0 40px;
+        cursor: pointer;
+        width: 30px;
+        height: 36px;
+      }
+
+      .time {
+        width: 100px;
+        text-align: center;
+        > span {
+          &:first-of-type {
+            color: #fff;
+          }
+
+          &:last-of-type {
+            color: @color;
+          }
+        }
+      }
+    }
+  }
+}
+
+@position: 62px;
+.mbimages {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: bottom -@position;
+  text-align: center;
+  .title {
+    width: 90%;
+    padding: 10px;
+    display: inline-block;
+    color: #dba761;
+    font-weight: bold;
+    font-size: 18px;
+    background: #bc1515;
+    border-radius: 60px;
+    margin: 20px auto 0;
+  }
+
+  .img-con {
+    width: 90%;
+    margin: 0 auto;
+    > img {
+      width: 100%;
+    }
+  }
+
+  @color: #bc1515;
+  .audiocon {
+    width: 90%;
+    height: 80px;
+    margin: 0 auto;
+    .time {
+      width: 100%;
+      text-align: center;
+      > span {
+        &:first-of-type {
+          color: rgba(112, 112, 112, 1);
+        }
+
+        &:last-of-type {
+          color: @color;
+        }
+      }
+    }
+    .adcon {
+      width: 94%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        flex: auto;
+        position: relative;
+        background: none;
+        display: flex;
+        width: 80%;
+        height: 30px;
+        overflow: visible;
+        .activeLine {
+          height: 10px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: @color;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          width: @wh;
+          height: @wh;
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          background-color: rgba(219, 167, 97, 1);
+          top: 50%;
+          transform: translate(-@wh*0.5, -50%);
+          border-radius: 50%;
+          cursor: pointer;
+          border: 2px solid @color;
+        }
+      }
+
+      @whh: 36px;
+      .bfzt {
+        width: @whh;
+        height: @whh;
+        position: relative;
+        margin-left: 20px;
+        .bg {
+          width: 100%;
+          height: 100%;
+        }
+        .btnggg {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          cursor: pointer;
+          width: @whh*0.4;
+          height: @whh*0.4;
+        }
+      }
+    }
+  }
+}
+
+.noshow {
+  position: fixed;
+  top: -100%;
+  left: -100%;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+</style>

web/src/views/tab4/index copy.vue

@@ -1,110 +0,0 @@
-<!--  -->
-<template>
-<div class='tab4'>
-  <div class="conten">
-    <div v-for="item in imgList" :key="item.id"  @click="$router.push(item.url)">
-      <img :src="require('@/assets/img/tab5-'+item.id+'.png')" alt="">
-      <p>{{item.name}}</p>
-    </div>
-    <!-- 后面的盒子 -->
-    <div class="search" @click="$router.push('tab4-5')">
-      <div class="sea_con">
-        <i class="el-icon-search"></i>
-        <div>学籍查询</div>
-      </div>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-export default {
-  name: 'tab4',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-      imgList: [
-        { id: 1, name: '学校宣传片', url: '/tab4-1' },
-        { id: 2, name: '美丽校园', url: '/tab4-2' },
-        { id: 3, name: '校歌', url: '/tab4-3' },
-        { id: 4, name: '历任学校领导', url: '/tab4-4' }
-      ]
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab4{
-  .conten{
-    min-width: 1740px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    &>div{
-      cursor: pointer;
-      margin:50px 40px 0;
-      width: 500px;
-      height: auto;
-      &>img {
-        width: 500px;
-        height: 360px;
-        object-fit: cover;
-      }
-      &>p{
-        margin-top: 10px;
-        color: black;
-        text-align: center;
-      }
-    }
-    .search{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 2px dotted #ccc;
-      height: 360px;
-      .sea_con{
-        width: 100px;
-        height: 80px;
-        text-align: center;
-        &>i {
-          color: #b9412e;
-          font-size: 36px;
-        }
-        &>div {
-          border-radius: 5px;
-          margin-top: 8px;
-          width: 100px;
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          background-color: #b9412e;
-        }
-      }
-    }
-  }
-}
-</style>

web/src/views/tab4/index.vue

@@ -15,10 +15,12 @@
 <script>
 import tab4one from './tab4-1.vue'
 import tab4tow from './tab4-2.vue'
+import tab4three from './tab4-3.vue'
 import tab4four from './tab4-4.vue'
+import tab4five from './tab4-5.vue'
 export default {
   name: 'tab4',
-  components: {tab4one,tab4tow,tab4four},
+  components: {tab4one,tab4tow,tab4four,tab4five,tab4three},
   data () {
     // 这里存放数据
     return {
@@ -26,9 +28,9 @@ export default {
       imgList: [
         { id: 1, name: '学校宣传片', url: 'tab4one' },
         { id: 2, name: '美丽校园', url: 'tab4tow' },
-        { id: 3, name: '校歌', url: '/tab4-3' },
+        { id: 3, name: '军歌嘹亮', url: 'tab4three' },
         { id: 4, name: '历任学校领导', url: 'tab4four' },
-        { id: 5, name: '学籍查询', url: '/tab4-4' }
+        { id: 5, name: '学籍查询', url: 'tab4five' }
       ]
     }
   },
@@ -61,6 +63,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4{
+  background-color: #f2f2f2;
   height: 100%;
     .conten{
     padding: 50px 100px 0;
@@ -73,16 +76,17 @@ export default {
       height: 60px;
       border-bottom: 4px solid #b9412e;
       &>div {
+        font-weight: 700;
         font-size: 20px;
         text-align: center;
         line-height: 56px;
         width: 280px;
         cursor: pointer;
-        color: #5d5d5d;
+        color: #bc4b39;
       }
       .active {
         background-color: #b9412e;
-        color: #fde602;
+        color: #fff;
       }
     }
     .con_tab{

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

@@ -113,7 +113,7 @@ export default {
                 img.width = width * 1.1;
               } else if (delta < 0) {
                 let width = img.width;
-                if (width > 400) {
+                if (width > 100) {
                   img.width = width * 0.9;
                 }
               }
@@ -227,7 +227,7 @@ export default {
       cursor: pointer;
       margin: 20px 64px 10px 0;
       width: 260px;
-      height: auto;
+      height: 316px;
       /deep/.el-image__preview {
         object-fit: cover;
       }

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

@@ -1,84 +1,163 @@
 <template>
-  <div class="tab4-3">
-    <div class="top">我们是人民的武装</div>
-    <div class="audio">
-      <audio src="../../assets/video/demo.mp3" autoplay controls loop></audio>
+  <div class="tab4-3" v-if="musicList.length !== 0">
+    <div class="left">
+      <div class="title">歌单列表</div>
+      <p
+        v-for="(item, index) in musicList"
+        :key="item.id"
+        :class="{ active: audioInd === index }"
+        @click="cutAudio(item,index)"
+      >
+        <span>{{ index + 1 }}</span>&emsp;{{ item.name }}
+      </p>
     </div>
-    <div class="txt">
-      <p>向前！向前！向前！</p>
-      <p>我们的队伍向太阳！</p>
-      <p>脚踏着祖国的大地，</p>
-      <p>背负着民族的希望，</p>
-      <p>我们是一支不可战胜的力量。</p>
-      <p>我们是工农的子弟，</p>
-      <p>我们是人民的武装，</p>
-      <p>从无畏惧，绝不屈服，英勇战斗，</p>
-      <p>直到把反动派消灭干净，</p>
-      <p>毛泽东的旗帜高高飘扬。</p>
-      <p>听！风在呼啸军号响，</p>
-      <p>听！革命歌声多么嘹亮！</p>
-      <p>同志们整齐步伐奔向解放的战场，</p>
-      <p>同志们整齐步伐奔赴祖国的边疆，</p>
-      <p>向前！向前！</p>
-      <p>我们的队伍向太阳，</p>
-      <p>向最后的胜利，向全国的解放。</p>
+    <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
+
+    <div class="right">
+      <div class="right_top">
+        <!-- 歌词 -->
+        <div class="title">《{{ myObj.name }}》</div>
+        <div class="txt" v-html="myObj.description"></div>
+      </div>
+      <div class="right_bottom">
+        <Audio :audioSrc='baseURL+myObj.filePath'/>
+      </div>
     </div>
   </div>
+  <div class="tab4-3 conNull" v-else>暂 无 数 据</div>
 </template>
 
 <script>
+import Audio from './audio.vue'
+import axios from "@/utils/request";
+import { musicList } from "@/utils/api";
 export default {
-  name: 'tab4-3',
-  components: {},
-  data () {
+  name: "tab4-3",
+  components: {Audio},
+  data() {
     // 这里存放数据
-    return {}
+    return {
+      audioInd: 0,
+      baseURL: "",
+      musicList: [],
+      myObj: {},
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    //点击歌单列表
+    cutAudio(item,index){
+      this.audioInd=index
+      this.myObj=item
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  async mounted() {
+    let res = await musicList({ pageNum: 1, pageSize: 999 });
+    this.musicList = res.data.records;
+    this.myObj = this.musicList[0];
+    // this.videoSrc=this.musicList[0].filePath
+    // console.log(998, res);
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
+.conNull {
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #b9412e;
+}
+
+/deep/::-webkit-scrollbar-thumb {
+  background-color: #b9412e !important;
+  outline: 1px solid #b9412e !important;
+  outline-offset: 0;
+}
 .tab4-3 {
-  color: #555555;
-  position: relative;
+  display: flex;
   width: 100%;
-  height: 100%;
+  height: 675px;
   min-width: 1500px;
-  background: url("../../assets/img/tab4-3BAC.png");
-  background-size: 100% 100%;
-  .top{
-    position: absolute;
-    transform: translate(796px,40px);
-    font-size: 20px;
+  .left {
+    margin-right: 24px;
+    border-radius: 8px;
+    padding: 10px 0;
+    text-align: center;
     color: #b9412e;
+    width: 280px;
+    height: 100%;
+    overflow-y: auto;
+    background-color: #fff;
+    .title {
+      font-size: 28px;
+    }
+    p {
+      text-align: left;
+      padding: 0 20px 0 43px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+      font-size: 20px;
+      height: 40px;
+      line-height: 40px;
+      margin: 10px;
+      &:hover {
+        background-color: #b9412e;
+        color: #fff;
+      }
+    }
+    .active {
+      background-color: #b9412e;
+      color: #fff;
+    }
   }
-  .audio{
-    position: absolute;
-    top: 50%;
-    left: 300px;
-    transform: translateX(-50%);
-  }
-  .txt{
-    position: absolute;
-    transform: translate(800px,100px);
-    &>p{
-      padding: 10px 0;
+  .right {
+    flex: 1;
+    .right_top {
+      overflow-y: auto;
+      padding: 15px 50px;
+      background-color: #f3ebdd;
+      width: 100%;
+      height: 580px;
+      margin-bottom: 23px;
+      & > div {
+        margin: 10px 0;
+        text-align: center;
+        color: #c04340;
+      }
+      .title {
+        font-size: 30px;
+      }
+      .txt {
+        font-size: 24px;
+        /deep/p {
+          margin: 10px 0;
+        }
+      }
+    }
+    .right_bottom {
+      width: 100%;
+      height: 70px;
+      background-color: #c04340;
+      border-radius: 10px;
     }
   }
 }

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

@@ -1,119 +0,0 @@
-<!--  -->
-<template>
-<div class='tab4-4-1'>
-  <div class="left">
-      <div class="el-icon-arrow-left" @click="goBack"></div>
-      <img src="../../assets/img/demo.png" alt="">
-      <p>张国荣</p>
-  </div>
-  <div class="right">
-    <div>
-    <span>基本信息</span>
-    </div>
-    <p>性别：男</p>
-    <p>政治面貌：党员</p>
-    <p>任职职位：财政部主任</p>
-    <p>任期：2005年10月 - 2009年12月</p>
-    <div>
-    <span>领导简介</span>
-    </div>
-    <p>领导简介</p>
-  </div>
-</div>
-</template>
-
-<script>
-export default {
-  name: 'tab4-4-1',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    //点击返回
-    goBack(){
-      this.$router.push({
-        path: '/tab4',
-        query: {id:'tab4four'}
-      })
-    }
-
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab4-4-1{
-  display: flex;
-  min-width: 1000px;
-  height: 100%;
-  padding: 40px 0 0 100px;
-  color: #707070;
-  .left{
-    margin-right: 100px;
-    padding-top: 50px;
-    width: 200px;
-    height: auto;
-    &>div {
-      margin-left: -12px;
-      cursor: pointer;
-      font-size: 50px;
-      margin-bottom: 50px;
-    }
-    &>img{
-      width: 200px;
-      height: 230px;
-      object-fit: cover;
-    }
-    &>P {
-      margin-top: 8px;
-      text-align: center;
-    }
-  }
-  .right{
-    flex: 1;
-    padding-top: 150px;
-    &>div {
-      margin-top: 30px;
-      width: 1000px;
-      border-bottom: 1px solid #AFAFAF;
-      &>span{
-        transform: translateY(2px);
-        width: 105px;
-        border-bottom: 4px solid #b9412e;
-        display: block;
-        height: 50px;
-        font-size: 26px;
-        font-weight: 700;
-        color: #b9412e;
-      }
-    }
-    &>p {
-      margin: 15px 0;
-    }
-  }
-}
-
-</style>

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

@@ -38,7 +38,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="" />
+        <img :src="baseURL+txtObj.thumb" alt="" v-if='txtObj.thumb'/>
         <p>{{txtObj.name}}</p>
       </div>
       <div class="right">
@@ -116,11 +116,6 @@ export default {
       const res = await leaderList(data);
       this.total = res.data.total;
       this.myArr = res.data.records;
-      let temp = [];
-      res.data.records.forEach((v) => {
-        temp.push(this.baseURL + v.thumb);
-      });
-      this.srcList = temp;
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -192,7 +187,7 @@ export default {
       cursor: pointer;
       margin: 20px 64px 10px 0;
       width: 260px;
-      height: auto;
+      height: 316px;
 
       & > img {
         object-fit: cover;

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

@@ -1,112 +0,0 @@
-<!--  -->
-<template>
-<div class='tab4-5-1'>
-  <div class="left">
-      <div class="el-icon-arrow-left" @click="$router.push('/tab4-5')"></div>
-      <img src="../../assets/img/demo.png" alt="">
-      <p>张国荣</p>
-  </div>
-  <div class="right">
-    <div>
-    <span>基本信息</span>
-    </div>
-    <p>性别：男</p>
-    <p>政治面貌：党员</p>
-    <p>任职职位：财政部主任</p>
-    <p>任期：2005年10月 - 2009年12月</p>
-    <div>
-    <span>校园动态</span>
-    </div>
-    <p>校园动态</p>
-  </div>
-</div>
-</template>
-
-<script>
-export default {
-  name: 'tab4-5-1',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab4-5-1{
-  display: flex;
-  min-width: 1000px;
-  height: 100%;
-  padding: 40px 0 0 100px;
-  color: #707070;
-  .left{
-    margin-right: 100px;
-    padding-top: 50px;
-    width: 200px;
-    height: auto;
-    &>div {
-      margin-left: -12px;
-      cursor: pointer;
-      font-size: 50px;
-      margin-bottom: 50px;
-    }
-    &>img{
-      width: 200px;
-      height: 230px;
-      object-fit: cover;
-    }
-    &>P {
-      margin-top: 8px;
-      text-align: center;
-    }
-  }
-  .right{
-    flex: 1;
-    padding-top: 150px;
-    &>div {
-      margin-top: 30px;
-      width: 1000px;
-      border-bottom: 1px solid #AFAFAF;
-      &>span{
-        transform: translateY(2px);
-        width: 105px;
-        border-bottom: 4px solid #b9412e;
-        display: block;
-        height: 50px;
-        font-size: 26px;
-        font-weight: 700;
-        color: #b9412e;
-      }
-    }
-    &>p {
-      margin: 15px 0;
-    }
-  }
-}
-
-</style>

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

@@ -1,47 +1,75 @@
-<!--  -->
 <template>
   <div class="tab4-5">
     <div class="top">
-      学籍查询
       <div class="search">
         <el-input
-          placeholder="姓名搜索"
+          placeholder="请输入学籍号查询"
           suffix-icon="el-icon-search"
-          v-model="search"
+          v-model="formData.searchKey"
         >
         </el-input>
         <span class="btn" @click="mySearch"></span>
       </div>
     </div>
     <!-- 内容 -->
-    <div class="conten">
-      <div class="row" v-for="i in 10" :key="i" @click="$router.push('/tab4-5-1')">
-        <img src="../../assets/img/demo.png" alt="" />
-        <p>张国荣</p>
+    <div class="conten conNull" v-if="baseTxt && myArr.length === 0">
+      没有此学员！请确认后重新输入！
+    </div>
+    <div class="conten" v-else>
+      <div
+        class="row"
+        v-for="item in myArr"
+        :key="item.id"
+        @click="lookBigImg(item)"
+      >
+        <img class="imgLook" :src="baseURL + item.thumb" alt="" />
+        <p :title="item.name">{{ item.name }}</p>
       </div>
     </div>
-    <!-- 分页 -->
-    <!-- :page-sizes="[15, 30, 45, 60]"
-        :current-page="from2.pageNum"
-        @current-change="currentChange"
-        @size-change="sizeChange"
- -->
-    <div class="paging">
-      <el-pagination layout="prev,pager,next,jumper" :total="100">
-      </el-pagination>
+
+    <!-- 点击领导详情 -->
+    <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'/>
+        <p>{{ txtObj.name }}</p>
+      </div>
+      <div class="right">
+        <div>
+          <span>基本信息</span>
+        </div>
+        <p>性别：{{ txtObj.sex === "M" ? "男" : "女" }}</p>
+        <p>政治面貌：{{ txtObj.politics }}</p>
+        <p>学籍号：{{ txtObj.num }}</p>
+        <p>专业：{{ txtObj.job }}</p>
+        <div>
+          <span>校园动态</span>
+        </div>
+        <div class="intro" v-html="txtObj.description"></div>
+      </div>
     </div>
   </div>
 </template>
-
 <script>
+import axios from "@/utils/request";
+import { studentList } from "@/utils/api";
 export default {
-  name: 'tab4-5',
+  name: "tab4-5",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
     return {
-      search: ''
-    }
+      baseTxt: false,
+      details: false,
+      txtObj: {},
+      myArr: [],
+      formData: {
+        pageNum: 1,
+        pageSize: 999,
+        searchKey: "",
+      },
+      baseURL: "",
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -49,31 +77,65 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    mySearch () {
-      console.log('点击了搜索')
-    }
+    //点击图片，查看详情
+    lookBigImg(val) {
+      this.details = true;
+      this.txtObj = val;
+    },
+    mySearch() {
+      // console.log("点击了搜索");
+      if (this.formData.searchKey.trim() === "")
+        return this.$message.warning("请输入学籍号");
+      this.formData.pageNum = 1;
+      this.studentList(this.formData);
+    },
+    // 封装获取列表函数
+    async studentList(data) {
+      const res = await studentList(data);
+      this.total = res.data.total;
+      this.myArr = res.data.records;
+      this.baseTxt = true;
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    // this.studentList(this.formData);
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  mounted() {},
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
+/deep/::-webkit-scrollbar-thumb {
+  background-color: #b9412e !important;
+  outline: 1px solid #b9412e !important;
+  outline-offset: 0;
+}
+
+.conNull {
+  display: flex;
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #b9412e !important;
+}
 .tab4-5 {
-  position: relative;
-  min-width: 1600px;
-  height: 100%;
-  padding: 40px 40px 0;
+  // position: relative;
+  width: 100%;
+  height: 750px;
+  min-width: 1500px;
   color: black;
   .top {
+    height: 50px;
     position: relative;
     width: 100%;
     text-align: center;
@@ -81,8 +143,10 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
-      right: 140px;
-      bottom: 0;
+      width: 500px;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0px;
       position: absolute;
       .btn {
         cursor: pointer;
@@ -96,31 +160,109 @@ export default {
     }
   }
   .conten {
-    width: 1500px;
-    margin: 30px auto 0;
+    margin-top: 30px;
+    min-width: 1556px;
+    height: 680px;
     display: flex;
-    justify-content: start;
     flex-wrap: wrap;
+    justify-content: center;
+    overflow-y: auto;
     .row {
       cursor: pointer;
-      margin: 40px 50px;
+      margin: 20px 64px 10px 0;
+      width: 260px;
+      height: 316px;
+
+      & > img {
+        object-fit: cover;
+        border: 2px solid #b9412e;
+        width: 260px;
+        height: 280px;
+      }
+      & > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 18px;
+        color: #b9412e;
+        margin-top: 12px;
+        text-align: center;
+      }
+    }
+    .row:nth-of-type(5n) {
+      margin-right: 0;
+    }
+  }
+  .paging {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+  }
+  .details {
+    background-color: #fff;
+    z-index: 9999;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    // width: calc(100% - 160px);
+    width: 100%;
+    height: 100%;
+    padding: 0px 0 0 80px;
+    color: #707070;
+    .left {
+      margin-right: 100px;
+      padding-top: 50px;
       width: 200px;
       height: auto;
+      & > div {
+        margin-left: -12px;
+        cursor: pointer;
+        font-size: 50px;
+        margin-bottom: 30px;
+      }
       & > img {
         width: 200px;
         height: 230px;
         object-fit: cover;
       }
-      & > p {
+      & > P {
         margin-top: 8px;
         text-align: center;
       }
     }
+    .right {
+      flex: 1;
+      padding-top: 100px;
+      & > div {
+        margin-top: 30px;
+        width: 1000px;
+        border-bottom: 1px solid #afafaf;
+        & > span {
+          transform: translateY(2px);
+          width: 105px;
+          border-bottom: 4px solid #b9412e;
+          display: block;
+          height: 50px;
+          font-size: 26px;
+          font-weight: 700;
+          color: #b9412e;
+        }
+      }
+      & > p {
+        margin: 15px 0;
+        font-size: 16px;
+      }
+      .intro {
+        padding-top: 15px;
+        margin-top: 0px;
+        height: 450px;
+        overflow-y: auto;
+        border-bottom: none;
+        font-size: 16px;
+      }
+    }
   }
-    .paging{
-      position: absolute;
-      left: 50%;
-      bottom: 50px;
-      transform: translateX(-50%);
-    }}
+}
 </style>