<template>
  <div class="index">
    <div class="top">
      <!-- <img src="../assets/index.jpg" alt="" class="top-img" /> -->
      <el-carousel trigger="click" height="612px">
        <!-- <el-carousel-item v-for="(item, index) in listimg" :key="index">
          <img :src="item" alt="" class="small" />
        </el-carousel-item> -->
        <el-carousel-item v-for="item in listimg" :key="item">
          <img :src="item" alt="" class="small">
        </el-carousel-item>
        <!-- <el-carousel-item>
          <img src="../assets/index.jpg" alt="" class="small">
        </el-carousel-item> -->
      </el-carousel>
    </div>
    <div class="content-box">
      <div class="content title3">对外经济文化合作</div>
    </div>
    <div class="main">
      <div class="main-left">
        <el-carousel trigger="click" height="400px">
          <el-carousel-item v-for="(item, index) in list4" :key="index"
            ><img :src="item.coverimage" alt="" class="small"
          /></el-carousel-item>
        </el-carousel>
      </div>
      <div class="main-right">
        <div class="main-top">最新动态</div>
        <div class="main-item" v-for="(item, index) in list5" :key="index">
          <a :href="item.url" class="main-a">
            <div class="item-left">{{ item.title }}</div>
            <div class="item-right">{{ item.synopsis }}</div>
          </a>
        </div>
      </div>
    </div>
    <div class="bgi">
      <img src="../assets/index2.png" alt="" class="bgi-img" />
    </div>
    <div class="fixbox" @click="up">
      <img src="../assets/up.png" alt="" class="up-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-left">
          <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">
        <el-pagination
          layout="prev, pager, next"
          :page-size="6"
          :total="total"
          @current-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <div class="img-box">
      <img src="../assets/index1.png" alt="" class="img-img" />
    </div>
    <div class="content-box">
      <div class="content title2">委员会活动集锦</div>
    </div>
    <div class="wrap">
      <div class="list2-box">
        <div class="list2-item" v-for="(item, index) in list2" :key="index">
          <a :href="item.url"
            ><el-image
              style="width: 235px; height: 175px"
              :src="item.coverimage"
            ></el-image
          ></a>
        </div>
      </div>
    </div>
    <div class="content-box"><div class="content title2">委员会文化</div></div>
    <div class="list6" v-html="list6.content"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { article_list, loop, article_info } from "../request/api";
export default {
  name: "index",
  metaInfo: {
    title: "首页",
  },
  components: {},
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      list3src: [],
      total1: 0, //照片条数
      total: 0, //领导总条数
      page1: 1,
      page: 1,
      limit: 6,
      listimg: [], //轮播图
      info:
        "中国东方文化研究会对外经济文化工作委员会作为中国东方文化研究会对外文化与经济交流合作的内设机构，将不断加强中国文化国际传播能力，加强与世界各国，特别是“一带一路”沿线国家的文化与经济交流合作，促进交融互鉴，创新发展。秉承和而不同，互鉴互惠的理念，以深化文化产业供给侧改革发挥桥梁和纽带作用。积极响应国家文化“走出去”政策，讲好中国故事、传播好中国声音，展示中国形象，助推中华文化的国际影响力，策应国家战略，为建设社会主义文化强国做出积极贡献。",
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: {},
    };
  },
  created() {
    this.loadlist();
    article_info({}, 57).then(({ data }) => {
      this.list6 = data.data;
    });
  },

  methods: {
    up() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    handChange(val) {
      this.page1 = val;
      this.lindao(16);
    },
    //分页改变
    handleSizeChange(val) {
      this.page = val;
      this.lindao(15);
    },
    loadlist() {
      loop().then(({ data }) => {
        data.data.map((e) => {
          e = "http://ca.liuniu946.com/" + e;
          this.listimg.push(e);
        });
        this.lindao(15);
        this.lindao(16);
        this.lindao(17);
        this.lindao(31);
        this.lindao(32);
      });
    },
    //获取领导
    lindao(id) {
      let pagea;
      let limita;
      if (id == 15) {
        pagea = this.page;
        limita = 6;
      }
      if (id == 16) {
        pagea = this.page1;
        limita = 8;
      }
      if (id == 17) {
        pagea = 1;
        limita = 100;
      }
      if (id == 31) {
        pagea = 1;
        limita = 6;
      }
      if (id == 32) {
        pagea = 1;
        limita = 7;
      }
      article_list({
        category_id: id,
        page: pagea,
        limit: limita,
      }).then(({ data }) => {
        if (id == 15) {
          this.total = data.data.count;
          data.data.list.map((e) => {
            e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
          });
          this.list1 = data.data.list;
        }
        if (id == 16) {
          this.total1 = data.data.count;
          data.data.list.map((e) => {
            e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
            this.list3src.push(e.coverimage);
            console.log(this.list3src);
          });
          this.list3 = data.data.list;
        }
        if (id == 17) {
          data.data.list.map((e) => {
            e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
          });
          this.list2 = data.data.list;
        }
        if (id == 31) {
          data.data.list.map((e) => {
            e.coverimage = "http://ca.liuniu946.com/" + e.coverimage;
          });
          this.list4 = data.data.list;
        }
        if (id == 32) {
          this.list5 = data.data.list;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list6 {
  width: 1232px;
  margin: 50px auto 0;
  line-height: 30px;
}
.main {
  width: 1232px;
  margin: 50px auto 0;
  display: flex;
  border: 1px solid #999999;

  .main-left {
    flex: 1;
    .top {
      width: 100%;
      height: 50px;
      background-color: rbga(0, 0, 0, 0.4);
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .main-right {
    flex: 1;
    padding: 0 20px;
    .main-top {
      color: red;
      line-height: 50px;
      border-bottom: 1px solid red;
    }
    .main-a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px dashed #999999;
      color: #666666;
      line-height: 50px;
    }
    .main-a:hover {
      color: blue;
    }
  }
}
a {
  text-decoration: none;
}
.el-carousel__item .small {
  width: 100%;
  height: 612px;
  margin: 0;
}
.index {
  line-height: 1;
  .top {
    width: 100%;
    height: 612px;
    .top-img {
      width: 100%;
      height: 100%;
    }
  }
  .banner {
    width: 1232px;
  }
  .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: 109px;
    }
    .title2 {
      width: 168px;
    }
    .title3 {
      width: 188px;
    }
  }
  .list1-box {
    width: 1232px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;

    .list-item {
      width: 573px;
      height: 134px;
      background: #f4f4f4;
      border-radius: 10px;
      display: flex;
      margin-right: 40px;
      margin-bottom: 30px;
      .item-left {
        width: 135px;
        height: 135px;
        .item-avata {
          width: 135px;
          height: 135px;
          border-radius: 10px 0px 0px 10px;
        }
      }
      .item-right {
        padding-left: 20px;
        .nickname {
          font-size: 20px;
          font-weight: bold;
          color: #333333;
          line-height: 64px;
        }
        .job {
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          margin-bottom: 15px;
        }
        .honor {
          font-size: 14px;
          font-weight: 500;
          color: #666666;
        }
      }
    }
  }
  .page-box {
    text-align: right;
    width: 100%;
    padding-right: 40px;
    // display: flex;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 30px;
  }
  .img-box {
    width: 1234px;
    height: 241px;
    margin: 0 auto;
    .img-img {
      width: 1234px;
      height: 241px;
    }
  }
  .wrap {
    width: 1234px;
    margin: 0 auto;
    .list2-box {
      width: 1234px;
      height: 175px;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      .list2-item {
        width: 235px;
        height: 175px;
        margin-right: 30px;

        .list2-img {
          width: 235px;
          height: 175px;
        }
      }
    }
  }
  .list3-box {
    width: 1232px;
    margin: 0 auto;
    padding-left: 16px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    .list3-item {
      width: 285px;
      margin: 0 20px 30px 0;
      .item-top {
        width: 285px;
        .item-img {
          width: 285px;
          height: 145px;
        }
      }
      .item-title {
        text-align: center;
        margin-top: 13px;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
    .page-foot {
      width: 100%;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }
  }
  .bgi {
    width: 1234px;
    height: 224px;
    margin: 20px auto 0;
    .bgi-img {
      width: 1234px;
      height: 224px;
    }
  }
  .culture {
    width: 1234px;
    margin: 0 auto;
    display: flex;
    .culture-left {
      width: 600px;
      height: 300px;
      .left-img {
        width: 600px;
        height: 300px;
      }
    }
    .culture-right {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 37px;
      margin-left: 30px;
      padding-right: 20px;
      text-indent: 36px;
    }
  }

  .fixbox {
    position: fixed;
    right: 20px;
    bottom: 30px;
    .up-img {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
