完成教育基地静态

web/src/views/tab2/index.vue

@@ -72,7 +72,7 @@ export default {
       }
     }
     .row {
-      margin: 0 45px 45px 0;
+      margin: 0 85px 45px 0;
       padding-top: 10px;
       text-align: center;
       font-size: 18px;

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

@@ -1,149 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab4-1" v-if="videoList.length !== 0">
-    <!-- 左侧列表 -->
-    <div class="one_left">
-      <div
-        class="alone"
-        :class="{active:videoInd===index}"
-        v-for="(item,index) in videoList"
-        :key="item.id"
-        @click="videoChange(item,index)"
-      >
-        <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, webVisit } from "@/utils/api";
-export default {
-  name: "tab4-1",
-  components: {},
-  data() {
-    // 这里存放数据
-    return {
-      videoInd:0,
-      videoSrc: "",
-      videoList: [],
-      baseURL: "",
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    async videoChange(val,ind) {
-      this.videoSrc = val.filePath;
-      this.videoInd=ind
-      // 记录访问量
-      await webVisit("video", val.id);
-    },
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  async mounted() {
-    let res = await videoList({ pageNum: 1, pageSize: 999 });
-    this.videoList = res.data.records;
-    this.videoSrc = this.videoList[0].filePath;
-    // 进页面为第一个视频添加访问量
-    if(res.data.records[0]) await webVisit("video", res.data.records[0].id);
-    // console.log(998,res);
-  },
-  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 {
-  font-size: 30px;
-  align-items: center;
-  justify-content: center;
-  color: #b9412e;
-}
-.tab4-1 {
-  display: flex;
-  width: 100%;
-  height: 675px;
-  min-width: 1500px;
-  .one_left {
-    padding-right: 5px;
-    margin-right: 24px;
-    width: 280px;
-    height: 100%;
-    overflow-y: auto;
-    .alone {
-      position: relative;
-      cursor: pointer;
-      width: 100%;
-      height: 158px;
-      margin-bottom: 10px;
-      // border: 2px solid #b9412e;
-      &:hover{
-      border: 2px solid #b9412e;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-      & > 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, 0.8);
-        height: 24px;
-        line-height: 24px;
-        color: #fff;
-        text-align: center;
-      }
-    }
-    .active{
-      border: 2px solid #b9412e;
-    }
-  }
-  .one_right {
-    flex: 1;
-    & > video {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>

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

@@ -1,298 +0,0 @@
-<template>
-  <div class="tab4-2" v-if="myArr.length !== 0">
-    <div class="top">
-      <div class="search">
-        <el-input
-          placeholder="请输入内容"
-          suffix-icon="el-icon-search"
-          v-model="formData.searchKey"
-        >
-        </el-input>
-        <span class="btn" @click="mySearch">搜 索</span>
-      </div>
-    </div>
-    <!-- 内容 -->
-    <div class="conten">
-      <div class="row" v-for="(item, index) in myArr" :key="item.id">
-        <el-image
-          @click="lookBigImg(item, index)"
-          style="width: 260px; height: 280px"
-          :src="baseURL + item.thumb"
-          :preview-src-list="srcList"
-        >
-        </el-image>
-        <!-- <img src="../../assets/img/demo2.png" alt="" /> -->
-        <p :title="item.name">{{ item.name }}</p>
-      </div>
-    </div>
-    <!-- 分页 -->
-    <div class="paging">
-      <el-pagination
-        layout="prev,pager,next,jumper"
-        :total="total"
-        :current-page="formData.pageNum"
-        @current-change="currentChange"
-        @size-change="sizeChange"
-      >
-      </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,webVisit } from "@/utils/api";
-export default {
-  name: "tab4-2",
-  components: {},
-  data() {
-    // 这里存放数据
-    return {
-      tempNum: 0,
-      imgBigTxt: "",
-      imgBigShow: false,
-      myArr: [],
-      total: 0,
-      formData: {
-        pageNum: 1,
-        pageSize: 10,
-        searchKey: "",
-      },
-      baseURL: "",
-      srcList: [""],
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    //点击图片，查看大图
-   async lookBigImg(item, index) {
-      this.imgBigTxt = item.name;
-      this.tempNum = index;
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.imgBigShow = true;
-          //因为污染自己写滚轮缩放
-          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;
-                }
-              }
-            });
-          const myTemp = document.querySelector(".el-image-viewer__mask");
-          myTemp.addEventListener("click", () => {
-            this.imgBigShow = false;
-          });
-          const temp = document.querySelector(".el-image-viewer__close");
-          temp.addEventListener("click", () => {
-            this.imgBigShow = false;
-            // console.log('我点了里面的关闭')
-          });
-          // 左按钮
-          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;
-          });
-        }, 100);
-      });
-      // 记录访问量
-      await webVisit("img", item.id);
-    },
-    // 分页器方法
-    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() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    this.imgList(this.formData);
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  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 {
-  /*修改提示文字的颜色*/
-  /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;
-    color: #b9412e;
-    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: -20px;
-        top: 3px;
-        height: 40px;
-        width: 60px;
-      }
-    }
-  }
-  .conten {
-    margin-top: 10px;
-    min-width: 1556px;
-    height: 680px;
-    display: flex;
-    flex-wrap: wrap;
-    .row {
-      cursor: pointer;
-      margin: 20px 64px 10px 0;
-      width: 260px;
-      height: 316px;
-      /deep/.el-image__preview {
-        object-fit: cover;
-      }
-      & > img {
-        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: 20px;
-    transform: translateX(-50%);
-    /deep/.el-input__inner {
-      width: 30px;
-      height: 30px !important;
-      background-color: transparent;
-      border-radius: 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-3.vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="tab4-3" v-if="musicList.length !== 0">
-    <div class="left">
-      <div class="title">歌单列表</div>
-      <div class="listCon">
-        <p
-          :title="item.name"
-          v-for="(item, index) in musicList"
-          :key="item.id"
-          :class="{ active: audioInd === index }"
-          @click="cutMusic(item.id, index)"
-        >
-          <img
-            src="@/assets/images/tab4/11.png"
-            alt=""
-            v-if="audioInd === index"
-          />
-          <span v-else>{{ index + 1 }}</span>
-          &emsp;{{ item.name }}
-        </p>
-      </div>
-    </div>
-    <!-- <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"
-          :title="myObj.name"
-          @sonCutMu="sonCutMu"
-        />
-      </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, webVisit } from "@/utils/api";
-export default {
-  name: "tab4-3",
-  components: { Audio },
-  data() {
-    // 这里存放数据
-    return {
-      audioInd: 0,
-      baseURL: "",
-      musicList: [],
-      myObj: {},
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {
-    audioInd(index) {
-      this.myObj = this.musicList[index];
-      //控制被选中的音乐滚动在中间
-      const gundong = document.querySelector(".listCon");
-      gundong.scrollTo({ top: index * 40, behavior: "smooth" });
-    },
-  },
-  // 方法集合
-  methods: {
-    // 点击左侧音乐
-    async cutMusic(id, index) {
-      this.audioInd = index;
-      // 记录访问量
-      await webVisit("music", id);
-    },
-    //子组件传过来的上一首下一首方法
-    sonCutMu(val) {
-      if (val === "left") {
-        if (this.audioInd === 0) this.audioInd = this.musicList.length - 1;
-        else this.audioInd--;
-      } else {
-        if (this.audioInd === this.musicList.length - 1) this.audioInd = 0;
-        else this.audioInd++;
-      }
-    },
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  async mounted() {
-    let res = await musicList({ pageNum: 1, pageSize: 999 });
-    this.musicList = res.data.records;
-    this.myObj = this.musicList[0];
-    // 进页面为第一个视频添加访问量
-    if (res.data.records[0]) await webVisit("music", res.data.records[0].id);
-    // 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 {
-  display: flex;
-  width: 100%;
-  height: 675px;
-  min-width: 1500px;
-  .left {
-    margin-right: 24px;
-    border-radius: 8px;
-    padding: 10px 0;
-    text-align: center;
-    color: #b9412e;
-    width: 280px;
-    height: 100%;
-    background-color: #fff;
-    .title {
-      font-size: 28px;
-      margin-bottom: 10px;
-    }
-    .listCon {
-      height: 617px;
-      overflow-y: auto;
-    }
-    p {
-      text-align: left;
-      padding: 0 20px 0 50px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-      font-size: 20px;
-      height: 40px;
-      line-height: 40px;
-      margin: 10px 0;
-      & > img {
-        margin-top: -5px;
-      }
-      &:hover {
-        background-color: #b9412e;
-        color: #fff;
-      }
-      &:first-child {
-        margin-top: 0px;
-      }
-    }
-    .active {
-      background-color: #b9412e;
-      color: #fff;
-    }
-  }
-  .right {
-    flex: 1;
-    .right_top {
-      overflow-y: auto;
-      padding: 15px 50px;
-      background: url("../../assets/images/tab4/bg.png") #f3ebdd center center
-        no-repeat;
-      background-size: 750px 287px;
-      width: 100%;
-      height: 580px;
-      margin-bottom: 23px;
-      & > div {
-        margin: 10px 0;
-        text-align: center;
-        color: #c04340;
-      }
-      .title {
-        font-size: 30px;
-      }
-      .txt {
-        font-size: 22px;
-        /deep/p {
-          margin: 10px 0;
-          font-size: 18px;
-        }
-      }
-    }
-    .right_bottom {
-      width: 100%;
-      height: 70px;
-      background-color: #c04340;
-      border-radius: 10px;
-    }
-  }
-}
-</style>

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

@@ -1,327 +0,0 @@
-<template>
-  <div class="tab4-4" v-if="myArr.length !== 0">
-    <div class="top">
-      <div class="search">
-        <el-input
-          placeholder="请输入姓名"
-          suffix-icon="el-icon-search"
-          v-model="formData.searchKey"
-        >
-        </el-input>
-        <span class="btn" @click="mySearch">搜 索</span>
-      </div>
-    </div>
-    <!-- 内容 -->
-    <div class="conten">
-      <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>
-    <!-- 分页 -->
-    <div class="paging">
-      <el-pagination
-        layout="prev,pager,next,jumper"
-        :total="total"
-        :current-page="formData.pageNum"
-        @current-change="currentChange"
-        @size-change="sizeChange"
-      >
-      </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="" 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.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, webVisit } from "@/utils/api";
-export default {
-  name: "tab4-4",
-  components: {},
-  data() {
-    // 这里存放数据
-    return {
-      time: "",
-      details: false,
-      txtObj: {},
-      myArr: [],
-      total: 0,
-      formData: {
-        pageNum: 1,
-        pageSize: 10,
-        searchKey: "",
-      },
-      baseURL: "",
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    //点击图片，查看详情
-    async 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月");
-      // 记录访问量
-      await webVisit("leader", val.id);
-    },
-    // 分页器方法
-    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;
-    },
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    this.leaderList(this.formData);
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  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 {
-  /*修改提示文字的颜色*/
-  /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;
-    color: #b9412e;
-    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: -20px;
-        top: 3px;
-        height: 40px;
-        width: 60px;
-      }
-    }
-  }
-  .conten {
-    margin-top: 10px;
-    min-width: 1556px;
-    height: 680px;
-    display: flex;
-    flex-wrap: wrap;
-    .row {
-      cursor: pointer;
-      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%);
-    /deep/.el-input__inner {
-      width: 30px;
-      height: 30px !important;
-      background-color: transparent;
-      border-radius: 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;
-        /deep/p {
-          margin: 10px 0;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,312 +0,0 @@
-<template>
-  <div class="tab4-5">
-    <div class="top">
-      <div class="search">
-        <el-input
-          placeholder="请输入姓名"
-          suffix-icon="el-icon-search"
-          v-model="formData.searchKey"
-        >
-        </el-input>
-        <span class="btn" @click="mySearch">
-          <i class="el-icon-search"></i>&nbsp; 查 询</span
-        >
-      </div>
-    </div>
-    <!-- 内容 -->
-    <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>
-
-    <!-- 点击领导详情 -->
-    <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,webVisit } from "@/utils/api";
-export default {
-  name: "tab4-5",
-  components: {},
-  data() {
-    // 这里存放数据
-    return {
-      baseTxt: false,
-      details: false,
-      txtObj: {},
-      myArr: [],
-      formData: {
-        pageNum: 1,
-        pageSize: 999,
-        searchKey: "",
-      },
-      baseURL: "",
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    //点击图片，查看详情
-   async lookBigImg(val) {
-      this.details = true;
-      this.txtObj = val;
-      // 记录访问量
-      await webVisit("student", val.id);
-    },
-    mySearch() {
-      // console.log("点击了搜索");
-      if (this.formData.searchKey.trim() === "") {
-        this.myArr = [];
-        this.baseTxt = false;
-        return;
-      }
-
-      // 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() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    // this.studentList(this.formData);
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  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 {
-  /*修改提示文字的颜色*/
-  /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: 100px;
-    position: relative;
-    width: 100%;
-    text-align: center;
-    color: #b9412e;
-    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: -20px;
-        top: 3px;
-        height: 40px;
-        width: 80px;
-        /deep/.el-icon-search {
-          color: #fff;
-          font-weight: 400;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-  .conten {
-    margin-top: 50px;
-    min-width: 1556px;
-    height: 600px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    overflow-y: auto;
-    .row {
-      cursor: pointer;
-      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 {
-        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;
-        /deep/p {
-          margin: 10px 0;
-        }
-      }
-    }
-  }
-}
-</style>