|
|
@@ -1,12 +1,29 @@
|
|
|
<template>
|
|
|
<div class="tab5">
|
|
|
<div class="conten" v-show="cut">
|
|
|
- <div class="row" v-for="i in 20" :key="i" @click="cutInfo">
|
|
|
- <img src="../../assets/img/demo.png" alt="" />
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ v-for="item in data"
|
|
|
+ :key="item.id"
|
|
|
+ @click="cutInfo(item)"
|
|
|
+ >
|
|
|
+ <img v-lazy="baseURL + item.thumb" alt="" />
|
|
|
<!-- 右边信息盒子 -->
|
|
|
<div class="row_right">
|
|
|
- <h2>张国荣</h2>
|
|
|
- <p>训练基地教研室士官教员</p>
|
|
|
+ <h2>
|
|
|
+ {{
|
|
|
+ item.name.length > 5
|
|
|
+ ? item.name.substring(0, 5) + "..."
|
|
|
+ : item.name
|
|
|
+ }}
|
|
|
+ </h2>
|
|
|
+ <p>
|
|
|
+ {{
|
|
|
+ item.job.length > 20
|
|
|
+ ? item.job.substring(0, 20) + "..."
|
|
|
+ : item.job
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
<div class="pitchOn">
|
|
|
<div>查看更多</div>
|
|
|
</div>
|
|
|
@@ -17,39 +34,49 @@
|
|
|
<div class="conten details" v-show="!cut">
|
|
|
<div class="det_left">
|
|
|
<span class="el-icon-arrow-left" @click="cut = true">返回荣誉榜</span>
|
|
|
- <img src="../../assets/img/demo.png" alt="" />
|
|
|
- <h3>张国荣</h3>
|
|
|
+ <img :src="baseURL + info.thumb" alt="" />
|
|
|
+ <h3>{{ info.name }}</h3>
|
|
|
</div>
|
|
|
<div class="det_right">
|
|
|
<h1>基本信息</h1>
|
|
|
<div class="line">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
- <div class="det_row">性别：男</div>
|
|
|
- <div class="det_row">政治面貌：党员</div>
|
|
|
- <div class="det_row">任职职位：财政部主任</div>
|
|
|
- <div class="det_row">任期：2005年10月 - 2009年12月</div>
|
|
|
- <h1 style="margin-top: 24px;">光辉荣誉</h1>
|
|
|
+ <div class="det_row">性别：{{ info.sex === "M" ? "男" : "女" }}</div>
|
|
|
+ <div class="det_row">政治面貌：{{ info.politics }}</div>
|
|
|
+ <div class="det_row">任职职位：{{ info.job }}</div>
|
|
|
+ <div class="det_row">任期：{{ time }}</div>
|
|
|
+ <h1 style="margin-top: 24px">光辉荣誉</h1>
|
|
|
<div class="line">
|
|
|
<div></div>
|
|
|
</div>
|
|
|
<!-- 富文本内容 -->
|
|
|
- <div class="det_txt">
|
|
|
- <p v-for="i in 30" :key="i">撒打算</p>
|
|
|
- </div>
|
|
|
+ <div class="det_txt" v-html="info.description"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import moment from "moment";
|
|
|
+import axios from "@/utils/request";
|
|
|
+import { leaderList, webVisit } from "@/utils/api";
|
|
|
export default {
|
|
|
name: "tab5",
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ time: "",
|
|
|
+ baseURL: "",
|
|
|
cut: true,
|
|
|
+ formData: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 99999,
|
|
|
+ searchKey: "",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ info: {},
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -59,12 +86,27 @@ export default {
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
// 点击显示详情
|
|
|
- cutInfo() {
|
|
|
+ async cutInfo(item) {
|
|
|
+ this.info = item;
|
|
|
this.cut = false;
|
|
|
+ // 处理日期
|
|
|
+ this.time =
|
|
|
+ moment(this.info.tenure.split(",")[0]).format("YYYY年MM月") +
|
|
|
+ "-" +
|
|
|
+ moment(this.info.tenure.split(",")[1]).format("YYYY年MM月");
|
|
|
+
|
|
|
+ // 记录访问量
|
|
|
+ await webVisit("leader", item.id);
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
+ async created() {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL;
|
|
|
+ // 获取列表
|
|
|
+ let res = await leaderList(this.formData);
|
|
|
+ this.data = res.data.records;
|
|
|
+ },
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
@@ -78,7 +120,7 @@ export default {
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.tab5 {
|
|
|
- padding: 100px 125px 20px 200px;
|
|
|
+ padding: 80px 125px 20px 200px;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: url("../../assets/img/tab5Bg.png");
|
|
|
@@ -86,8 +128,11 @@ export default {
|
|
|
.conten {
|
|
|
flex-wrap: wrap;
|
|
|
display: flex;
|
|
|
+ align-content: flex-start;
|
|
|
padding-right: 75px;
|
|
|
width: 100%;
|
|
|
+ height: 730px;
|
|
|
+ overflow-y: auto;
|
|
|
.row {
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
@@ -105,6 +150,7 @@ export default {
|
|
|
height: 180px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
+
|
|
|
.row_right {
|
|
|
padding: 0 30px;
|
|
|
flex: 1;
|
|
|
@@ -182,34 +228,34 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- .det_right{
|
|
|
+ .det_right {
|
|
|
flex: 1;
|
|
|
- &>h1{
|
|
|
- color: #BE1220;
|
|
|
+ & > h1 {
|
|
|
+ color: #be1220;
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
- .line{
|
|
|
+ .line {
|
|
|
position: relative;
|
|
|
width: 800px;
|
|
|
height: 1px;
|
|
|
- background-color: #AFAFAF;
|
|
|
+ background-color: #afafaf;
|
|
|
margin: 16px 0;
|
|
|
- &>div{
|
|
|
+ & > div {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: -2px;
|
|
|
width: 150px;
|
|
|
height: 5px;
|
|
|
- background-color: #BE1220;
|
|
|
+ background-color: #be1220;
|
|
|
}
|
|
|
}
|
|
|
- .det_row{
|
|
|
+ .det_row {
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
font-size: 18px;
|
|
|
color: #555555;
|
|
|
}
|
|
|
- .det_txt{
|
|
|
+ .det_txt {
|
|
|
padding-right: 20px;
|
|
|
width: 820px;
|
|
|
height: 350px;
|
