<template>
  <div class="member">
    <Header active="3" />
    <div class="fixbox" @click="up">
      <img src="../assets/up.png" alt="" class="up-img" />
    </div>

    <div class="top">
      <img src="../assets/index.png" alt="" class="top-img" />
    </div>
    <div class="content-box">
      <div class="content title2">申请相关列表</div>
    </div>
    <div class="list1-box">
      <div class="list-item" v-for="(item, index) in list1" :key="index">
        <div class="item-top">
          {{item.title}}
        </div>
        <el-image
          style="width: 400px; height: 600px"
          :src="item.coverimage"
          :preview-src-list="list2"
          fit="cover"
        ></el-image>
      </div>
    </div>
    <div class="content-box">
      <div class="content title1">成员单位（副会长、理事、会员）</div>
    </div>
    <div class="list1-box">
      <!-- <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="item-left">
          <img :src="item.coverimage" alt="" class="item-avata" />
             <el-image
      style="width: 135px; height: 135px;border-radius: 10px 0px 0px 10px"
      :src="item.coverimage"
      fit="cover"></el-image>
        </div>
        <div class="item-right">
          <div class="nickname">{{ item.title }}</div>
          <div class="job">{{ item.author }}</div>
          <div class="honor">{{ item.synopsis }}</div>
        </div>
      </div>
      <div class="page-box">
        <div class="top-page">上一页</div>
        <div class="foot-page">下一页</div>
        <el-pagination
          layout="prev, pager, next"
          :page-size="20"
          :total="total"
          @current-change="handleSizeChange"
        >
        </el-pagination>
      </div> -->
      <div class="list-contant" v-html="list.content"></div>
    </div>

    <div class="foot"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "../components/header";
import { article_list, article_info } from "../request/api";

export default {
  name: "member",
  metaInfo: {
    title: "委员会成员",
  },
  components: {
    Header,
  },
  data() {
    return {
      total: 0,
      page: 1,
      limit: 20,
      list: {},
      list1: [],
      list2: [],
    };
  },
  created() {
    this.loadlist();
  },
  methods: {
    up() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    //分页改变
    handleSizeChange(val) {
      this.page = val;
      this.loadlist();
    },
    loadlist() {
      article_list({
        page: this.page,
        limit: this.limit,
        category_id: 33,
      }).then(({ data }) => {
        data.data.list.map((e) => {
          e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
          this.list2.push(e.coverimage);
        });
        this.list1 = data.data.list;
        console.log(this.list1);
      });
      article_info(
        {
          // page: this.page,
          // limit: this.limit,
          // category_id: 20,
        },
        44
      ).then(({ data }) => {
        // this.total = data.data.count;
        // data.data.list.map((e) => {
        //   e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
        // });
        this.list = data.data;
        // console.log(this.list);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-contant {
  //    margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #666666;
  line-height: 30px;
}
.page-box {
  text-align: right;
  width: 100%;
  padding-right: 40px;
  // display: flex;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 30px;
}
.member {
  line-height: 1;
  .top {
    width: 100%;
    height: 612px;
    .top-img {
      width: 100%;
      height: 100%;
    }
  }
  .content-box {
    width: 1232px;
    margin: 66px auto 45px;
    border-bottom: 2px solid #be0000;
    .content {
      text-align: left;
      height: 47px;
      background: #be0000;
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title1 {
      width: 360px;
    }
    .title2 {
      width: 168px;
    }
    .title3 {
      width: 188px;
    }
  }
  .list1-box {
    width: 1232px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
    .list-item{
      text-align: center;
      // margin: 0 auto;
      margin-bottom: 20px;
      .item-top{
        margin-bottom: 20px;
      }
    }
  }
  .foot {
    height: 310px;
    background-color: #be0000;
    margin-top: 120px;
  }
}
.fixbox {
  position: fixed;
  right: 20px;
  bottom: 30px;
  .up-img {
    width: 60px;
    height: 60px;
  }
}
</style>
