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

<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>