|
|
@@ -1,54 +1,85 @@
|
|
|
<template>
|
|
|
<div class="tab4-5">
|
|
|
- <div class="search" @keyup.enter="mySearch" v-show="!details">
|
|
|
- <el-input
|
|
|
- placeholder="姓名/学籍号"
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- v-model="formData.searchKey"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <span class="btn" @click="mySearch"></span>
|
|
|
+ <div class="search" @keyup.enter="mySearch" :class="{ active: baseTxt }">
|
|
|
+ <el-input
|
|
|
+ placeholder="姓名/学籍号"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="formData.searchKey"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <span class="btn" @click="mySearch"></span>
|
|
|
</div>
|
|
|
<!-- 内容 -->
|
|
|
- <div class="conten conNull" v-if="myArr.length === 0">
|
|
|
- <img src="@/assets/img/nullData.png" alt="">
|
|
|
+ <div class="conten conNull" v-if="myArr.length === 0 && baseTxt">
|
|
|
+ <img src="@/assets/img/nullData.png" alt="" />
|
|
|
<p>暂无查询数据</p>
|
|
|
</div>
|
|
|
- <div class="conten" v-else v-show="!details">
|
|
|
+ <div class="conten" v-else>
|
|
|
<div
|
|
|
- class="row"
|
|
|
+ class="leadBox"
|
|
|
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>
|
|
|
+ <img v-lazy="baseURL + item.thumb" alt="" />
|
|
|
+ <div class="leadTxt">
|
|
|
+ <h2>
|
|
|
+ {{
|
|
|
+ item.name.length > 6
|
|
|
+ ? item.name.substring(0, 6) + "..."
|
|
|
+ : item.name
|
|
|
+ }}
|
|
|
+ </h2>
|
|
|
+ <p class="leadTxtOne">{{ item.politics }}</p>
|
|
|
+ <p>
|
|
|
+ {{
|
|
|
+ item.job.length > 8 ? item.job.substring(0, 8) + "..." : item.job
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</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 class="leadInfo" v-if="leadShow">
|
|
|
+ <div class="infoBox">
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <div
|
|
|
+ class="leadBack el-icon-arrow-left"
|
|
|
+ @click="leadShow = false"
|
|
|
+ ></div>
|
|
|
+ <div class="leadInfoOne">
|
|
|
+ <img v-lazy="baseURL + txtObj.thumb" alt="" />
|
|
|
</div>
|
|
|
- <p>性别：{{ txtObj.sex === "M" ? "男" : "女" }}</p>
|
|
|
- <p>政治面貌：{{ txtObj.politics }}</p>
|
|
|
- <p>学籍号：{{ txtObj.num }}</p>
|
|
|
- <p>专业：{{ txtObj.job }}</p>
|
|
|
- <div>
|
|
|
- <span>校园动态</span>
|
|
|
+ <div class="leadInfoTow">
|
|
|
+ <div class="row">
|
|
|
+ <div>姓名：</div>
|
|
|
+ <div>{{ txtObj.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>性别：</div>
|
|
|
+ <div>{{ txtObj.sex === "M" ? "男" : "女" }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>政治面貌：</div>
|
|
|
+ <div>{{ txtObj.politics }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>学籍号：</div>
|
|
|
+ <div>{{ txtObj.num }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>专业：</div>
|
|
|
+ <div>{{ txtObj.job }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="leadInfoThree">
|
|
|
+ <h2>简介</h2>
|
|
|
+ <div class="intro" v-html="txtObj.description"></div>
|
|
|
</div>
|
|
|
- <div class="intro" v-html="txtObj.description"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div> </div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import axios from "@/utils/request";
|
|
|
import { studentList,webVisit } from "@/utils/api";
|
|
|
@@ -56,10 +87,10 @@ export default {
|
|
|
name: "tab4-5",
|
|
|
components: {},
|
|
|
data() {
|
|
|
- // 这里存放数据
|
|
|
+ //这里存放数据
|
|
|
return {
|
|
|
baseTxt: false,
|
|
|
- details: false,
|
|
|
+ leadShow: false,
|
|
|
txtObj: {},
|
|
|
myArr: [],
|
|
|
formData: {
|
|
|
@@ -70,130 +101,93 @@ export default {
|
|
|
baseURL: "",
|
|
|
};
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
+ //监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
+ //监控data中的数据变化
|
|
|
watch: {},
|
|
|
- // 方法集合
|
|
|
+ //方法集合
|
|
|
methods: {
|
|
|
- //点击图片，查看详情
|
|
|
- async lookBigImg(val) {
|
|
|
- this.details = true;
|
|
|
+ // 点击单个查看详情
|
|
|
+ async lookBigImg(val) {
|
|
|
+ this.leadShow = true;
|
|
|
this.txtObj = val;
|
|
|
// 记录访问量
|
|
|
- await webVisit("student", val.id);
|
|
|
+ await webVisit("leader", val.id);
|
|
|
},
|
|
|
+ // 点击搜索
|
|
|
mySearch() {
|
|
|
- // console.log("点击了搜索");
|
|
|
if (this.formData.searchKey.trim() === "") {
|
|
|
this.myArr = [];
|
|
|
- this.baseTxt = false;
|
|
|
- return;
|
|
|
+ // return;
|
|
|
+ return this.$notify.warning({
|
|
|
+ position: "bottom-right",
|
|
|
+ message: "不能为空",
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
- // return this.$message.warning("不能为空！");
|
|
|
- this.formData.pageNum = 1;
|
|
|
+ this.baseTxt = true;
|
|
|
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实例）
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
// 获取服务器前缀地址
|
|
|
this.baseURL = axios.defaults.baseURL;
|
|
|
- // this.studentList(this.formData);
|
|
|
},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {},
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ let temp = document.querySelector(".orientation-tip");
|
|
|
+ temp.style.display = "none";
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {
|
|
|
+ setTimeout(() => {
|
|
|
+ let temp = document.querySelector(".orientation-tip");
|
|
|
+ temp.style.display = "";
|
|
|
+ }, 100);
|
|
|
+ }, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
-/deep/::-webkit-scrollbar-thumb {
|
|
|
- background-color: #D8B581 !important;
|
|
|
- outline: 1px solid #D8B581 !important;
|
|
|
- outline-offset: 0;
|
|
|
-}
|
|
|
-
|
|
|
.conNull {
|
|
|
+ margin-top: 150px;
|
|
|
width: 100%;
|
|
|
- display: block !important;
|
|
|
- height: 500px !important;
|
|
|
- &>img{
|
|
|
- margin: 100px auto 30px;
|
|
|
- display: block;
|
|
|
- width: 150px;
|
|
|
+ text-align: center;
|
|
|
+ & > img {
|
|
|
+ margin-bottom: 10px;
|
|
|
height: 150px;
|
|
|
+ padding-left: 20px;
|
|
|
}
|
|
|
- &>p{
|
|
|
+ & > p {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
- color: #AC1D29;
|
|
|
+ color: #ac1d29;
|
|
|
}
|
|
|
}
|
|
|
.tab4-5 {
|
|
|
position: relative;
|
|
|
- /*修改提示文字的颜色*/
|
|
|
- /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;
|
|
|
- padding: 30px 200px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 620px;
|
|
|
- color: black;
|
|
|
+ padding: 10px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
.search {
|
|
|
z-index: 10;
|
|
|
- /*修改提示文字的颜色*/
|
|
|
- /deep/input::-webkit-input-placeholder {
|
|
|
- /* WebKit browsers */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input:-moz-placeholder {
|
|
|
- /* Mozilla Firefox 4 to 18 */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input::-moz-placeholder {
|
|
|
- /* Mozilla Firefox 19+ */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input:-ms-input-placeholder {
|
|
|
- /* Internet Explorer 10+ */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
-
|
|
|
- width: 700px;
|
|
|
+ width: 96%;
|
|
|
height: 50px;
|
|
|
position: absolute;
|
|
|
- top: -25px;
|
|
|
+ top: 40%;
|
|
|
left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
/deep/.el-input__suffix {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
@@ -206,6 +200,10 @@ export default {
|
|
|
border: 1px solid #be1220;
|
|
|
}
|
|
|
.btn {
|
|
|
+ color: #ac1d29;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
@@ -214,130 +212,115 @@ export default {
|
|
|
width: 50px;
|
|
|
border-radius: 50%;
|
|
|
background-color: transparent;
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
+ .active {
|
|
|
+ position: static;
|
|
|
+ transform: translate(0, 0);
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /deep/.el-input__suffix {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border-radius: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
.conten {
|
|
|
- padding-right: 80px;
|
|
|
- padding-bottom: 30px;
|
|
|
- margin-top: 30px;
|
|
|
- height: 550px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
- .row {
|
|
|
- box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
+ .leadBox {
|
|
|
+ display: flex;
|
|
|
background-color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- margin: 20px 55px 10px 0;
|
|
|
- width: 190px;
|
|
|
- height: 270px;
|
|
|
-
|
|
|
+ box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
+ width: 100%;
|
|
|
+ height: 112px;
|
|
|
+ margin-bottom: 10px;
|
|
|
& > img {
|
|
|
+ width: 137px;
|
|
|
+ height: 112px;
|
|
|
object-fit: cover;
|
|
|
- width: 190px;
|
|
|
- height: 233px;
|
|
|
- }
|
|
|
- & > p {
|
|
|
- padding: 0 5px;
|
|
|
- height: 37px;
|
|
|
- line-height: 37px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 18px;
|
|
|
- color: #b9412e;
|
|
|
- text-align: center;
|
|
|
+ margin-right: 15px;
|
|
|
}
|
|
|
- &:hover{
|
|
|
- background-color: #be1220;
|
|
|
- border: 2px solid #be1220;
|
|
|
- & > img{
|
|
|
- width: 186px;
|
|
|
- height: 229px;
|
|
|
+ .leadTxt {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ & > h2 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
- & > p{
|
|
|
- color: #fff;
|
|
|
+ .leadTxtOne {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .row:nth-of-type(6n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
}
|
|
|
- .paging {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 20px;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- .details {
|
|
|
+ // 详情
|
|
|
+ .leadInfo {
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20px;
|
|
|
z-index: 9999;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
top: 0;
|
|
|
- display: flex;
|
|
|
- // width: calc(100% - 160px);
|
|
|
- width: 100%;
|
|
|
- height: 620px;
|
|
|
- padding: 30px 200px 0 200px;
|
|
|
- color: #707070;
|
|
|
- .left {
|
|
|
- margin-right: 100px;
|
|
|
- padding-top: 20px;
|
|
|
- width: 200px;
|
|
|
- height: auto;
|
|
|
- & > div {
|
|
|
- cursor: pointer;
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 30px;
|
|
|
- color: #BE1220;
|
|
|
- }
|
|
|
+ left: 0;
|
|
|
+ background: url("../../assets/imgM/bigBac.png") #ede7db center center;
|
|
|
+ .infoBox{
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .leadBack {
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .leadInfoOne {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
& > img {
|
|
|
- width: 210px;
|
|
|
- height: 300px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- & > P {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 20px;
|
|
|
- margin-top: 8px;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
+ max-width: 70%;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- & > 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;
|
|
|
+ .leadInfoTow {
|
|
|
+ padding: 20px;
|
|
|
+ border-top: 3px solid #b92e2e;
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ & > div {
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- & > p {
|
|
|
- margin: 15px 0;
|
|
|
- font-size: 16px;
|
|
|
+ }
|
|
|
+ .leadInfoThree {
|
|
|
+ & > h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #b92e2e;
|
|
|
+ background: url("../../assets/imgM/tb3TopAc.png") left center no-repeat;
|
|
|
+ padding-left: 30px;
|
|
|
+ border-bottom: 3px solid #b92e2e;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 37px;
|
|
|
}
|
|
|
.intro {
|
|
|
- padding-top: 15px;
|
|
|
- margin-top: 0px;
|
|
|
- border-bottom: none;
|
|
|
- font-size: 16px;
|
|
|
- /deep/p {
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
