信息检索页面

web/public/static/css/css/main.css

@@ -2448,11 +2448,11 @@ hr {
 body, html {
     height: 100%;
     width: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     line-height: normal;
     color: rgba(255, 255, 255, .9);
     -webkit-font-smoothing: subpixel-antialiased;
-    background: #373737;
+    /* background: #373737; */
     /*background: -moz-radial-gradient(at 50% bottom,ellipse cover,rgba(71,77,83,1) 0,rgba(35,38,40,1) 53%,rgba(17,18,19,1) 100%);
     background: -webkit-gradient(radial,at 50% bottom,0,center center,100%,color-stop(0,rgba(71,77,83,1)),color-stop(53%,rgba(35,38,40,1)),color-stop(100%,rgba(17,18,19,1)));
     background: -webkit-radial-gradient(at 50% bottom,ellipse cover,rgba(71,77,83,1) 0,rgba(35,38,40,1) 53%,rgba(17,18,19,1) 100%);

web/public/static/css/main.css

@@ -2448,11 +2448,11 @@ hr {
 body, html {
     height: 100%;
     width: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     line-height: normal;
     color: rgba(255, 255, 255, .9);
     -webkit-font-smoothing: subpixel-antialiased;
-    background: #373737;
+    /* background: #373737; */
     /*background: -moz-radial-gradient(at 50% bottom,ellipse cover,rgba(71,77,83,1) 0,rgba(35,38,40,1) 53%,rgba(17,18,19,1) 100%);
     background: -webkit-gradient(radial,at 50% bottom,0,center center,100%,color-stop(0,rgba(71,77,83,1)),color-stop(53%,rgba(35,38,40,1)),color-stop(100%,rgba(17,18,19,1)));
     background: -webkit-radial-gradient(at 50% bottom,ellipse cover,rgba(71,77,83,1) 0,rgba(35,38,40,1) 53%,rgba(17,18,19,1) 100%);

web/src/assets/css/base.css

@@ -48,4 +48,7 @@ ul li {
 .el-image__preview{
   object-fit: cover;
   border: 2px solid #b9412e;
+}
+.el-image-viewer__img{
+  object-fit: cover;
 }

web/src/pages/Home.vue

@@ -211,6 +211,7 @@ export default {
   z-index: 99;
 }
 .parent-body {
+  overflow: hidden;
   position: absolute;
   right: 0;
   bottom: 0;

web/src/router/index.js

@@ -43,48 +43,6 @@ const routes = [
         name: 'tab4',
         meta: { myInd: 4 },
         component: () => import('../views/tab4/index.vue')
-      },
-      {
-        path: 'tab4-1',
-        name: 'tab4-1',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-1.vue')
-      },
-      {
-        path: 'tab4-2',
-        name: 'tab4-2',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-2.vue')
-      },
-      {
-        path: 'tab4-3',
-        name: 'tab4-3',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-3.vue')
-      },
-      {
-        path: 'tab4-4',
-        name: 'tab4-4',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-4.vue')
-      },
-      {
-        path: 'tab4-4-1',
-        name: 'tab4-4-1',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-4-1.vue')
-      },
-      {
-        path: 'tab4-5',
-        name: 'tab4-5',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-5.vue')
-      },
-      {
-        path: 'tab4-5-1',
-        name: 'tab4-5-1',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/tab4-5-1.vue')
       }
     ]
   }

web/src/utils/api.js

@@ -14,3 +14,27 @@ export const goodDetail = (id) => {
     url: `/web/goodDetail/${id}`
   })
 }
+// 学院宣传片列表
+export const videoList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/videoList',
+    data
+  })
+}
+// 美丽校园列表列表
+export const imgList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/imgList',
+    data
+  })
+}
+// 领导列表
+export const leaderList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/leaderList',
+    data
+  })
+}

web/src/views/tab2/index.vue

@@ -82,12 +82,14 @@ export default {
   margin: 0 auto;
   .swiper-container {
     padding-top: 200px;
+    min-width: 1500px;
     width: 100%;
     height: 100%;
     .swiper-wrapper {
       .swiper-slide {
+        font-size: 18px;
         text-align: center;
-        color: black;
+        color: #b9412e;
         width: 100%;
         height: 500px;
         overflow: hidden;

web/src/views/tab3/index.vue

@@ -24,28 +24,25 @@
     </div>
     <!-- 右侧内容 -->
     <!-- 没有数据时 -->
-    <div class="hint" v-if="myArr.length===0">暂 无 数 据</div>
+    <div class="hint" v-if="myArr.length === 0">暂 无 数 据</div>
     <div class="right" v-else>
-      <div
-        class="row"
-        v-for="item in myArr"
-        :key="item.id"
-        @click="goodClick(item)"
-      >
+      <div class="row" v-for="item in myArr" :key="item.id">
         <!-- 模型/视频 -->
         <img
+          @click="goodClick(item)"
           :src="baseURL + item.thumb"
           alt=""
-          v-if="formData.type === 'model'||formData.type === 'video'"
+          v-if="formData.type === 'model' || formData.type === 'video'"
         />
         <!-- 图库 -->
-          <el-image
-            v-else-if="formData.type === 'img'"
-            style="width: 418px; height: 200px"
-            :src="baseURL+item.thumb"
-            :preview-src-list="srcList"
-          >
-          </el-image>
+        <el-image
+          @click="goodClick(item)"
+          v-else-if="formData.type === 'img'"
+          style="width: 418px; height: 200px"
+          :src="baseURL + item.thumb"
+          :preview-src-list="srcList"
+        >
+        </el-image>
         <p class="listTxt" :title="item.name">{{ item.name }}</p>
       </div>
       <!-- 分页 -->
@@ -53,7 +50,7 @@
         <el-pagination
           layout="prev,pager,next,jumper"
           :total="total"
-          :page-size='9'
+          :page-size="9"
           :current-page="formData.pageNum"
           @current-change="currentChange"
           @size-change="sizeChange"
@@ -72,53 +69,54 @@
       </div>
     </div>
     <!-- 大图预览里面的文字显示 -->
-    <div class="imgBigShow" v-if="imgBigShow">{{imgBigNum}} / {{srcList.length}}</div>
+    <div class="imgBigShow" v-if="imgBigShow">
+      {{ imgBigNum }} / {{ srcList.length }}
+    </div>
     <!-- 视频档案里面的弹窗 -->
     <div class="model" v-if="myVideoShow">
-        <!-- 关闭按钮 -->
-      <div class=" btnX el-icon-close" @click="myVideoShow = false"></div>
+      <!-- 关闭按钮 -->
+      <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></video>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import axios from '@/utils/request'
-import { goodList, goodDetail } from '@/utils/api'
+import axios from "@/utils/request";
+import { goodList, goodDetail } from "@/utils/api";
 export default {
-  name: 'tab3',
+  name: "tab3",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
     return {
       total: 0,
-      baseURL: '',
+      baseURL: "",
       fullscreen: false,
       modelShow: false,
       listData: [
-        { id: 1, name: '实物模型', type: 'model' },
-        { id: 2, name: '专题图库', type: 'img' },
-        { id: 3, name: '视频档案', type: 'video' }
+        { id: 1, name: "实物模型", type: "model" },
+        { id: 2, name: "专题图库", type: "img" },
+        { id: 3, name: "视频档案", type: "video" },
       ],
       formData: {
-        sortType: 0,
         pageNum: 1,
         pageSize: 9,
-        searchKey: '',
-        type: 'model'
+        searchKey: "",
+        type: "model",
       },
       myArr: [],
-      mySrc: '',
-      srcList: [''],
+      mySrc: "",
+      srcList: [""],
       // 大图预览里面的文字显示
       imgBigShow: false,
       imgBigNum: 1,
       // 视频档案数据
       myVideoShow: false,
-      myVideoSrc: ''
-    }
+      myVideoSrc: "",
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -127,182 +125,210 @@ export default {
   // 方法集合
   methods: {
     // 分页器方法
-    currentChange (val) {
+    currentChange(val) {
       // console.log('当前页改变了', val)
-      this.formData.pageNum = val
-      this.goodList(this.formData)
+      this.formData.pageNum = val;
+      this.goodList(this.formData);
     },
-    sizeChange (val) {
+    sizeChange(val) {
       // console.log('条数改变了', val)
-      this.formData.pageNum = 1
-      this.formData.pageSize = val
-      this.goodList(this.formData)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.goodList(this.formData);
     },
     // 点击模型全屏
-    screen () {
-      const element = this.$refs.ifrCon // 获取容器
+    screen() {
+      const element = this.$refs.ifrCon; // 获取容器
       if (this.fullscreen) {
         // 如果已经全屏了就退出全屏
 
         if (document.exitFullscreen) {
-          document.exitFullscreen()
+          document.exitFullscreen();
         } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen()
+          document.webkitCancelFullScreen();
         } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen()
+          document.mozCancelFullScreen();
         } else if (document.msExitFullscreen) {
-          document.msExitFullscreen()
+          document.msExitFullscreen();
         }
       } else {
         // 如果不是全屏就变成全屏
         if (element.requestFullscreen) {
-          element.requestFullscreen()
+          element.requestFullscreen();
         } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen()
+          element.webkitRequestFullScreen();
         } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen()
+          element.mozRequestFullScreen();
         } else if (element.msRequestFullscreen) {
           // IE11
-          element.msRequestFullscreen()
+          element.msRequestFullscreen();
         }
       }
 
-      this.fullscreen = !this.fullscreen
+      this.fullscreen = !this.fullscreen;
     },
     // 点击模型
-    async goodClick (item) {
-      if (item.type === 'model') {
-        this.mySrc = '/4dage/Model.html?m=' + item.filePath
+    async goodClick(item) {
+      if (item.type === "model") {
+        this.mySrc = "/4dage/Model.html?m=" + item.filePath;
         // this.mySrc = '/4dage/Model.html'
-        this.modelShow = true
-      } else if (item.type === 'img') {
-        this.imgBigNum = 1
-        const res = await goodDetail(item.id)
+        this.modelShow = true;
+      } else if (item.type === "img") {
+        this.imgBigNum = 1;
+        const res = await goodDetail(item.id);
         // console.log(998, res)
-        const temp = []
-        res.data.file.forEach(v => {
+        const temp = [];
+        res.data.file.forEach((v) => {
           // console.log(998, v)
-          if (v.isIndex === 1) temp.push(this.baseURL + v.filePath)
+          if (v.isIndex === 1) temp.push(this.baseURL + v.filePath);
           else {
             setTimeout(() => {
-              temp.push(this.baseURL + v.filePath)
-            }, 0)
+              temp.push(this.baseURL + v.filePath);
+            }, 0);
           }
-        })
-        this.srcList = temp
+        });
+        this.srcList = temp;
         this.$nextTick(() => {
           setTimeout(() => {
-            this.imgBigShow = true
+            this.imgBigShow = true;
             // 左按钮
-            const tempLeft = document.querySelector('.el-image-viewer__prev')
-            tempLeft.addEventListener('click', () => {
-              this.imgBigNum--
-              if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length
-            })
+            const tempLeft = document.querySelector(".el-image-viewer__prev");
+            tempLeft.addEventListener("click", () => {
+              this.imgBigNum--;
+              if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length;
+            });
             // 右按钮
-            const tempRight = document.querySelector('.el-image-viewer__next')
-            tempRight.addEventListener('click', () => {
-              this.imgBigNum++
-              if (this.imgBigNum === this.srcList.length + 1) this.imgBigNum = 1
-            })
-            const temp = document.querySelector('.el-image-viewer__close')
-            temp.addEventListener('click', () => {
-              this.imgBigShow = false
-              this.srcList = ['']
+            const tempRight = document.querySelector(".el-image-viewer__next");
+            tempRight.addEventListener("click", () => {
+              this.imgBigNum++;
+              if (this.imgBigNum === this.srcList.length + 1)
+                this.imgBigNum = 1;
+            });
+            const myTemp = document.querySelector(".el-image-viewer__mask");
+            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;
+                }
+                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;
+              this.srcList = [""];
               // console.log('我点了里面的关闭')
-            })
-          }, 100)
-        })
-      } else if (item.type === 'video') {
-        this.myVideoShow = true
-        this.myVideoSrc = this.baseURL + item.filePath
+            });
+          }, 100);
+        });
+      } else if (item.type === "video") {
+        this.myVideoShow = true;
+        this.myVideoSrc = this.baseURL + item.filePath;
       }
     },
-    cutTab (val) {
-      if (this.formData.type === val.type) return
-      this.formData.pageNum = 1
-      this.formData.type = val.type
-      this.goodList(this.formData)
+    cutTab(val) {
+      if (this.formData.type === val.type) return;
+      this.formData.pageNum = 1;
+      this.formData.type = val.type;
+      this.goodList(this.formData);
     },
-    mySearch () {
-      this.formData.pageNum = 1
-      this.goodList(this.formData)
+    mySearch() {
+      this.formData.pageNum = 1;
+      this.goodList(this.formData);
     },
     // 封装获取列表函数
-    async goodList (data) {
-      const res = await goodList(data)
-      this.total = res.data.total
-      this.myArr = res.data.records
+    async goodList(data) {
+      const res = await goodList(data);
+      this.total = res.data.total;
+      this.myArr = res.data.records;
       // if (this.formData.type === 'img') {
       //   this.myArr.forEach(v => {
       //     this.srcList = [this.baseURL + v.thumb]
       //   })
       // }
       // console.log(998, res)
-    }
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  created() {
     // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
-    this.goodList(this.formData)
+    this.baseURL = axios.defaults.baseURL;
+    this.goodList(this.formData);
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  mounted() {
     // 监听esc事件
-    document.addEventListener('webkitfullscreenchange', (e) => {
+    document.addEventListener("webkitfullscreenchange", (e) => {
       if (!e.currentTarget.webkitIsFullScreen) {
         // console.log('退出啊webkitIsFullScreen11111111111')
         setTimeout(() => {
-          this.fullscreen = false
-        }, 100)
+          this.fullscreen = false;
+        }, 100);
       } else {
         // console.log('进入webkitIsFullScreen')
       }
-    })
+    });
 
-    document.addEventListener('fullscreenchange', (e) => {
+    document.addEventListener("fullscreenchange", (e) => {
       if (!document.fullscreenElement) {
         // console.log('退出啊fullscreenchange1111111111')
         setTimeout(() => {
-          this.fullscreen = false
-        }, 100)
+          this.fullscreen = false;
+        }, 100);
       } else {
         // console.log('进入fullscreenchange')
       }
-    })
+    });
 
-    document.addEventListener('MSFullscreenChange', (e) => {
+    document.addEventListener("MSFullscreenChange", (e) => {
       if (!document.msFullscreenElement) {
         // console.log('IE退出111111')
         setTimeout(() => {
-          this.fullscreen = false
-        }, 100)
+          this.fullscreen = false;
+        }, 100);
       } else {
         // console.log('IE进')
       }
-    })
-    document.addEventListener('mozfullscreenchange', (e) => {
+    });
+    document.addEventListener("mozfullscreenchange", (e) => {
       if (!document.mozFullScreenElement) {
         // console.log('火狐退出1111111111111')
         this.$nextTick(() => {
           setTimeout(() => {
-            this.fullscreen = false
-          }, 100)
-        })
+            this.fullscreen = false;
+          }, 100);
+        });
       } else {
         // console.log('火狐进')
       }
-    })
+    });
   },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .tab3 {
@@ -351,7 +377,7 @@ export default {
       }
     }
   }
-  .hint{
+  .hint {
     font-size: 36px;
     min-width: 1200px;
     flex: 1;
@@ -392,6 +418,8 @@ export default {
       transform: translateX(-50%);
     }
     .listTxt {
+      font-size: 18px;
+      color: #b9412e;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -430,37 +458,39 @@ export default {
         color: #fff;
       }
     }
-          .btnX {
-        cursor: pointer;
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        color: #fff;
-        font-size: 40px;
-      }
+    .btnX {
+      cursor: pointer;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      color: #fff;
+      font-size: 40px;
+    }
 
-    .videoPlay{
+    .videoPlay {
       border: 2px solid #b9412e;
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       width: 800px;
       height: auto;
-      video{
-        vertical-align:top;
+      video {
+        vertical-align: top;
         width: 100%;
       }
     }
   }
-  .imgBigShow{
+  .imgBigShow {
+    padding: 3px 5px;
+    background-color: rgba(0, 0, 0, 0.7);
+    font-size: 18px;
     z-index: 9999;
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
-    bottom:100px;
+    bottom: 100px;
     color: #fff;
-    font-size: 16px;
   }
 }
 </style>

web/src/views/tab4/index.vue

@@ -2,29 +2,32 @@
 <div class='tab4'>
   <div class="conten">
       <div class="con_top">
-        <div :class="{active:imgListInd===item.id}" v-for="item in imgList" :key="item.id" @click="cutTab(item.id)">{{item.name}}</div>
-      </div>
-      <!-- 学校宣传片 -->
-      <div class="con_tab con_tab1" v-show="imgListInd===1">
-        <video src="@/assets/video/loop.mp4" controls></video>
+        <div :class="{active:imgListInd===item.url}" v-for="item in imgList" :key="item.id" @click="cutTab(item.url)">{{item.name}}</div>
       </div>
+      <!-- 动态组件 -->
+      <keep-alive>
+        <component :is="imgListInd"></component>
+      </keep-alive>
   </div>
 </div>
 </template>
 
 <script>
+import tab4one from './tab4-1.vue'
+import tab4tow from './tab4-2.vue'
+import tab4four from './tab4-4.vue'
 export default {
   name: 'tab4',
-  components: {},
+  components: {tab4one,tab4tow,tab4four},
   data () {
     // 这里存放数据
     return {
-      imgListInd: 1,
+      imgListInd: 'tab4one',
       imgList: [
-        { id: 1, name: '学校宣传片', url: '/tab4-1' },
-        { id: 2, name: '美丽校园', url: '/tab4-2' },
+        { id: 1, name: '学校宣传片', url: 'tab4one' },
+        { id: 2, name: '美丽校园', url: 'tab4tow' },
         { id: 3, name: '校歌', url: '/tab4-3' },
-        { id: 4, name: '历任学校领导', url: '/tab4-4' },
+        { id: 4, name: '历任学校领导', url: 'tab4four' },
         { id: 5, name: '学籍查询', url: '/tab4-4' }
       ]
     }
@@ -36,13 +39,12 @@ export default {
   // 方法集合
   methods: {
     // 点击顶部的tab栏切换
-    cutTab (tabId) {
-      this.imgListInd = tabId
+    cutTab (val) {
+      this.imgListInd = val
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
-
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
@@ -61,7 +63,7 @@ export default {
 .tab4{
   height: 100%;
     .conten{
-    padding: 100px 100px 0;
+    padding: 50px 100px 0;
     height: 100%;
     min-width: 1740px;
     .con_top{
@@ -74,7 +76,7 @@ export default {
         font-size: 20px;
         text-align: center;
         line-height: 56px;
-        width: 200px;
+        width: 280px;
         cursor: pointer;
         color: #5d5d5d;
       }

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

@@ -1,16 +1,35 @@
 <!--  -->
 <template>
-<div class='tab4-1'></div>
+<div class='tab4-1' v-if="videoList.length!==0">
+  <!-- 左侧列表 -->
+  <div class="one_left">
+    <div class="alone" v-for="item in videoList" :key="item.id" @click="videoChange(item.filePath)">
+      <div class="video_name" :title="item.name">{{item.name}}</div>
+      <img :src="baseURL + item.thumb" alt="">
+    </div>
+  </div>
+  <!-- 右侧视频 -->
+  <div class="one_right">
+    <video v-if="videoSrc" :src="baseURL+videoSrc" autoplay controls></video>
+  </div>
+</div>
+<div class='tab4-1 conNull' v-else>
+  暂 无 数 据
+</div>
 </template>
 
 <script>
+import axios from '@/utils/request'
+import {videoList} from '@/utils/api'
 export default {
   name: 'tab4-1',
   components: {},
   data () {
     // 这里存放数据
     return {
-
+      videoSrc:'',
+      videoList:[],
+      baseURL:''
     }
   },
   // 监听属性 类似于data概念
@@ -19,15 +38,21 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    videoChange(url){
+      this.videoSrc=url
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
-
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
+ async mounted () {
+  let res = await videoList({pageNum:1,pageSize:999})
+  this.videoList=res.data.records
+  this.videoSrc=this.videoList[0].filePath
+  // console.log(998,res);
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -39,11 +64,60 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+   /deep/::-webkit-scrollbar-thumb{
+    background-color: #b9412e !important;
+    outline: 1px solid #b9412e !important;
+    outline-offset: 0;
+   }
+.conNull{
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #B9412E;
+}
 .tab4-1{
+  display: flex;
   width: 100%;
-  height: 100%;
+  height: 675px;
   min-width: 1500px;
-  background: url("../../assets/img/tab4-1BAC.png");
-  background-size: 100% 100%;
+  .one_left{
+    margin-right: 24px;
+    width: 280px;
+    height: 100%;
+    overflow-y: auto;
+    .alone{
+      position: relative;
+      cursor: pointer;
+      width: 99%;
+      height: 158px;
+      margin-bottom: 10px;
+      &>img{
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+      .video_name{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap; 
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0,0,0,.8);
+        height: 24px;
+        line-height: 24px;
+        color: #B9412E;
+        text-align: center;
+      }
+    }
+  }
+  .one_right{
+    flex: 1;
+    &>video{
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>

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

@@ -1,13 +1,11 @@
-<!--  -->
 <template>
-  <div class="tab4-2">
+  <div class="tab4-2" v-if="myArr.length!==0">
     <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>
@@ -15,45 +13,56 @@
     </div>
     <!-- 内容 -->
     <div class="conten">
-      <div
-        class="row"
-        v-for="i in 8"
-        :key="i"
-      >
+      <div class="row" v-for="(item, index) in myArr" :key="item.id">
         <el-image
-          style="width: 380px; height: 240px"
-          :src="url"
+          @click="lookBigImg(item.name, index)"
+          style="width: 260px; height: 280px"
+          :src="baseURL + item.thumb"
           :preview-src-list="srcList"
         >
         </el-image>
         <!-- <img src="../../assets/img/demo2.png" alt="" /> -->
-        <p>图片名称</p>
+        <p :title="item.name">{{ item.name }}</p>
       </div>
     </div>
     <!-- 分页 -->
-    <!-- :page-sizes="[15, 30, 45, 60]"
-        :current-page="from2.pageNum"
+    <div class="paging">
+      <el-pagination
+        layout="prev,pager,next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
         @current-change="currentChange"
         @size-change="sizeChange"
- -->
-    <div class="paging">
-      <el-pagination layout="prev,pager,next,jumper" :total="100">
+      >
       </el-pagination>
     </div>
+    <!-- 大图预览里面的文字显示 -->
+    <div class="imgBigShow" v-if="imgBigShow">{{ imgBigTxt }}</div>
   </div>
+  <div class="tab4-2 conNull" v-else> 暂 无 数 据 </div>
 </template>
-
 <script>
+import axios from "@/utils/request";
+import { imgList } from "@/utils/api";
 export default {
-  name: 'tab4-2',
+  name: "tab4-2",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
     return {
-      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-      srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
-      search: ''
-    }
+      tempNum: 0,
+      imgBigTxt: "",
+      imgBigShow: false,
+      myArr: [],
+      total: 0,
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      baseURL: "",
+      srcList: [""],
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -61,29 +70,130 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    mySearch () {
-      console.log('点击了搜索')
-    }
+    //点击图片，查看大图
+    lookBigImg(name, index) {
+      this.imgBigTxt = name;
+      this.tempNum = index;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.imgBigShow = true;
+          // 左按钮
+          const tempLeft = document.querySelector(".el-image-viewer__prev");
+          tempLeft.addEventListener("click", () => {
+            this.tempNum--;
+            if (this.tempNum < 0) this.tempNum = this.myArr.length - 1;
+            this.imgBigTxt = this.myArr[this.tempNum].name;
+          });
+          // 右按钮
+          const tempRight = document.querySelector(".el-image-viewer__next");
+          tempRight.addEventListener("click", () => {
+            this.tempNum++;
+            if (this.tempNum === this.myArr.length) this.tempNum = 0;
+            this.imgBigTxt = this.myArr[this.tempNum].name;
+          });
+          const myTemp = document.querySelector(".el-image-viewer__mask");
+          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;
+              }
+              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;
+            // console.log('我点了里面的关闭')
+          });
+          //鼠标滚轮事件
+          // console.log(998,$('.el-image-viewer__img'));
+          // // let tempDom = document.querySelector(".el-image-viewer__img");
+          // $('.el-image-viewer__img').on("wheel", (e) => {
+
+          //   console.log(11111111111);
+          //   e.stopPropagation()
+          //   e.preventDefault()
+          // });
+        }, 100);
+      });
+    },
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+      this.imgList(this.formData);
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.imgList(this.formData);
+    },
+    mySearch() {
+      // console.log("点击了搜索");
+      this.formData.pageNum = 1;
+      this.imgList(this.formData);
+    },
+    // 封装获取列表函数
+    async imgList(data) {
+      const res = await imgList(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实例）
-  created () {},
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    this.imgList(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>
+.conNull{
+  display: flex;
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #B9412E !important;
+}
 .tab4-2 {
-  position: relative;
-  min-width: 1600px;
-  height: 100%;
-  padding: 40px 40px 0;
+  // position: relative;
+  width: 100%;
+  height: 750px;
+  min-width: 1500px;
   color: black;
   .top {
     position: relative;
@@ -93,8 +203,8 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
-      right: 50px;
-      bottom: 0;
+      left: 0;
+      bottom: -10px;
       position: absolute;
       .btn {
         cursor: pointer;
@@ -109,33 +219,52 @@ export default {
   }
   .conten {
     margin-top: 30px;
-    min-width: 1650px;
+    min-width: 1556px;
+    height: 680px;
     display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
     .row {
       cursor: pointer;
-      margin: 40px 0px;
-      width: 380px;
+      margin: 20px 64px 10px 0;
+      width: 260px;
       height: auto;
-      /deep/.el-image__preview{
+      /deep/.el-image__preview {
         object-fit: cover;
       }
       & > img {
-        width: 380px;
-        height: 240px;
+        width: 260px;
+        height: 280px;
       }
       & > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 18px;
+        color: #b9412e;
         margin-top: 8px;
         text-align: center;
       }
     }
+    .row:nth-of-type(5n) {
+      margin-right: 0;
+    }
   }
   .paging {
     position: absolute;
     left: 50%;
-    bottom: 50px;
+    bottom: 20px;
+    transform: translateX(-50%);
+  }
+  .imgBigShow {
+    padding: 3px 5px;
+    background-color: rgba(0, 0, 0, 0.7);
+    font-size: 18px;
+    z-index: 9999;
+    position: fixed;
+    left: 50%;
     transform: translateX(-50%);
+    bottom: 100px;
+    color: #fff;
   }
 }
 </style>

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

@@ -2,7 +2,7 @@
 <template>
 <div class='tab4-4-1'>
   <div class="left">
-      <div class="el-icon-arrow-left" @click="$router.push('/tab4-4')"></div>
+      <div class="el-icon-arrow-left" @click="goBack"></div>
       <img src="../../assets/img/demo.png" alt="">
       <p>张国荣</p>
   </div>
@@ -38,6 +38,13 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    //点击返回
+    goBack(){
+      this.$router.push({
+        path: '/tab4',
+        query: {id:'tab4four'}
+      })
+    }
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）

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

@@ -1,13 +1,11 @@
-<!--  -->
 <template>
-  <div class="tab4-4">
+  <div class="tab4-4" v-if="myArr.length !== 0">
     <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>
@@ -15,33 +13,73 @@
     </div>
     <!-- 内容 -->
     <div class="conten">
-      <div class="row" v-for="i in 10" :key="i" @click="$router.push('/tab4-4-1')">
-        <img src="../../assets/img/demo.png" alt="" />
-        <p>张国荣</p>
+      <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"
+    <div class="paging">
+      <el-pagination
+        layout="prev,pager,next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
         @current-change="currentChange"
         @size-change="sizeChange"
- -->
-    <div class="paging">
-      <el-pagination layout="prev,pager,next,jumper" :total="100">
+      >
       </el-pagination>
     </div>
+    <!-- 点击领导详情 -->
+    <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="" />
+        <p>{{txtObj.name}}</p>
+      </div>
+      <div class="right">
+        <div>
+          <span>基本信息</span>
+        </div>
+        <p>性别：{{txtObj.sex==='M'?'男':'女'}}</p>
+        <p>政治面貌：{{txtObj.politics}}</p>
+        <p>任职职位：{{txtObj.job}}</p>
+        <p>任期：{{time}}</p>
+        <div>
+          <span>领导简介</span>
+        </div>
+        <div class="intro" v-html="txtObj.description"></div>
+      </div>
+    </div>
   </div>
+  <div class="tab4-4 conNull" v-else>暂 无 数 据</div>
 </template>
-
 <script>
+import moment from 'moment'
+import axios from "@/utils/request";
+import { leaderList } from "@/utils/api";
 export default {
-  name: 'tab4-4',
+  name: "tab4-4",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
     return {
-      search: ''
-    }
+      time:'',
+      details: false,
+      txtObj:{},
+      myArr: [],
+      total: 0,
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      baseURL: "",
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -49,29 +87,78 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    mySearch () {
-      console.log('点击了搜索')
-    }
+    //点击图片，查看详情
+    lookBigImg(val) {
+      this.details=true
+      this.txtObj=val
+      // 处理日期
+      this.time = moment((this.txtObj.tenure.split(','))[0]).format('YYYY年MM月') + '-' + moment((this.txtObj.tenure.split(','))[1]).format('YYYY年MM月')
+    },
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+      this.leaderList(this.formData);
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.leaderList(this.formData);
+    },
+    mySearch() {
+      // console.log("点击了搜索");
+      this.formData.pageNum = 1;
+      this.leaderList(this.formData);
+    },
+    // 封装获取列表函数
+    async leaderList(data) {
+      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实例）
-  created () {},
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    this.leaderList(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-4 {
-  position: relative;
-  min-width: 1600px;
-  height: 100%;
-  padding: 40px 40px 0;
+  // position: relative;
+  width: 100%;
+  height: 750px;
+  min-width: 1500px;
   color: black;
   .top {
     position: relative;
@@ -81,8 +168,8 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
-      right: 50px;
-      bottom: 0;
+      left: 0;
+      bottom: -10px;
       position: absolute;
       .btn {
         cursor: pointer;
@@ -97,30 +184,105 @@ export default {
   }
   .conten {
     margin-top: 30px;
-    width: 100%;
+    min-width: 1556px;
+    height: 680px;
     display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
     .row {
       cursor: pointer;
-      margin: 40px 50px;
-      width: 200px;
+      margin: 20px 64px 10px 0;
+      width: 260px;
       height: auto;
+
       & > img {
-        width: 200px;
-        height: 230px;
         object-fit: cover;
+        border: 2px solid #b9412e;
+        width: 260px;
+        height: 280px;
       }
       & > p {
-        margin-top: 8px;
+        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: 50px;
-      transform: translateX(-50%);
-    }}
+  .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 {
+      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;
+    }
+  }
+}}
 </style>