|
|
@@ -1,82 +1,69 @@
|
|
|
+<!-- -->
|
|
|
<template>
|
|
|
<div class="tab4-4">
|
|
|
- <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>
|
|
|
- <!-- 内容 -->
|
|
|
- <div class="conten" v-if="myArr.length !== 0" v-show="!details">
|
|
|
- <div
|
|
|
- class="row"
|
|
|
- v-for="item in myArr"
|
|
|
- :key="item.id"
|
|
|
- @click="lookBigImg(item)"
|
|
|
- >
|
|
|
- <img class="imgLook" :src="baseURL + item.thumb" alt="" />
|
|
|
- <!-- 右边信息盒子 -->
|
|
|
- <div class="row_right">
|
|
|
- <h2 :title="item.name">
|
|
|
- {{
|
|
|
- item.name.length > 5
|
|
|
- ? item.name.substring(0, 5) + "..."
|
|
|
- : item.name
|
|
|
- }}
|
|
|
- </h2>
|
|
|
- <p>{{ item.politics }}</p>
|
|
|
- <p>
|
|
|
- {{
|
|
|
- item.job.length > 5 ? item.job.substring(0, 5) + "..." : item.job
|
|
|
- }}
|
|
|
- </p>
|
|
|
- <div class="pitchOn">
|
|
|
- <div>查看更多</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="leadBox"
|
|
|
+ v-for="item in myArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="lookLeadInfo(item)"
|
|
|
+ >
|
|
|
+ <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 class="tab4-4 conNull" v-else>
|
|
|
- <img src="@/assets/img/nullData.png" alt="">
|
|
|
- <p>暂无查询数据</p>
|
|
|
- </div>
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="paging" v-show="!details">
|
|
|
- <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 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.job }}</p>
|
|
|
- <p>任期：{{ time }}</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.job }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>任期：</div>
|
|
|
+ <div>{{ time }}</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>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import moment from "moment";
|
|
|
import axios from "@/utils/request";
|
|
|
@@ -85,30 +72,29 @@ export default {
|
|
|
name: "tab4-4",
|
|
|
components: {},
|
|
|
data() {
|
|
|
- // 这里存放数据
|
|
|
+ //这里存放数据
|
|
|
return {
|
|
|
time: "",
|
|
|
- details: false,
|
|
|
- txtObj: {},
|
|
|
+ baseURL: "",
|
|
|
myArr: [],
|
|
|
- total: 0,
|
|
|
formData: {
|
|
|
pageNum: 1,
|
|
|
- pageSize: 8,
|
|
|
+ pageSize: 99999,
|
|
|
searchKey: "",
|
|
|
},
|
|
|
- baseURL: "",
|
|
|
+ leadShow: false,
|
|
|
+ txtObj: {},
|
|
|
};
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
+ //监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
+ //监控data中的数据变化
|
|
|
watch: {},
|
|
|
- // 方法集合
|
|
|
+ //方法集合
|
|
|
methods: {
|
|
|
- //点击图片，查看详情
|
|
|
- async lookBigImg(val) {
|
|
|
- this.details = true;
|
|
|
+ // 点击单个查看详情
|
|
|
+ async lookLeadInfo(val) {
|
|
|
+ this.leadShow = true;
|
|
|
this.txtObj = val;
|
|
|
// 处理日期
|
|
|
this.time =
|
|
|
@@ -117,304 +103,121 @@ export default {
|
|
|
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实例）
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
// 获取服务器前缀地址
|
|
|
this.baseURL = axios.defaults.baseURL;
|
|
|
this.leaderList(this.formData);
|
|
|
},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ 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 {
|
|
|
- display: block !important;
|
|
|
- height: 500px !important;
|
|
|
- &>img{
|
|
|
- margin: 100px auto 30px;
|
|
|
- display: block;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
- &>p{
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- color: #AC1D29;
|
|
|
- }
|
|
|
- }
|
|
|
.tab4-4 {
|
|
|
- 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;
|
|
|
-
|
|
|
- .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;
|
|
|
- height: 50px;
|
|
|
- position: absolute;
|
|
|
- top: -25px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- /deep/.el-input__suffix {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- font-size: 20px;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- /deep/.el-input__inner {
|
|
|
- border-radius: 50px;
|
|
|
- height: 50px;
|
|
|
- border: 1px solid #be1220;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 50px;
|
|
|
- width: 50px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- .conten {
|
|
|
- margin-top: 50px;
|
|
|
- height: 500px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 10px;
|
|
|
+ .leadBox {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .row {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
+ width: 100%;
|
|
|
+ height: 112px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ & > img {
|
|
|
+ width: 137px;
|
|
|
+ height: 112px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .leadTxt {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
- cursor: pointer;
|
|
|
- width: 350px;
|
|
|
- height: 190px;
|
|
|
- border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fbf8f8;
|
|
|
- margin: 0 35px 35px 0;
|
|
|
- &:nth-of-type(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- & > img {
|
|
|
- width: 150px;
|
|
|
- height: 190px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .row_right {
|
|
|
- padding: 0 30px;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #a17e3a;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ & > h2 {
|
|
|
font-size: 20px;
|
|
|
-
|
|
|
- & > p {
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- margin-top: 25px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .pitchOn {
|
|
|
- margin-top: 25px;
|
|
|
- position: relative;
|
|
|
- font-size: 14px;
|
|
|
- color: #be1220;
|
|
|
- width: 58px;
|
|
|
- height: 55px;
|
|
|
- display: none;
|
|
|
- background: url("../../assets/img/tab5pitch.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- & > div {
|
|
|
- line-height: 14px;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- position: absolute;
|
|
|
- top: 58%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
- &:hover {
|
|
|
- padding: 5px;
|
|
|
- background-color: #be1220;
|
|
|
- & > img {
|
|
|
- width: 140px;
|
|
|
- height: 180px;
|
|
|
- }
|
|
|
- .row_right {
|
|
|
- color: #fff;
|
|
|
- & > P {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .pitchOn {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
+ .leadTxtOne {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
}
|
|
|
- .row:nth-of-type(4n) {
|
|
|
- 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 {
|
|
|
+ // 详情
|
|
|
+ .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: #D32424;
|
|
|
+ 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>
|
