<template>
  <div class="container">
    <div class="top-box">
      <headers :msg='msg'></headers>

      <div class="ny-banner">
        <img src="../../assets/gw/jxzy.png" alt="">
      </div>
    </div>
    <div class="news11">
      <div class="news11-list">
        <div class="news11-list-item" v-for="(item, index) in this.xlist" :key="index"  @click="goDeatail(item)">
          <div class="img">
            <div class="yl-right" v-if="item.imitationType == 1" > 国一流</div>
            <div class="yl-right" v-if="item.imitationType == 2" > 省一流</div>
            <img :src=" imgurl + item.imitationImage" class="imgWO" style="width: 100%; height: 100% ">
          </div>
          <div class="tt">
            {{ item.imitationTitle }}
          </div>
          <div class="tags">
            <div class="p">{{ item.imitationSchool }} | {{item.imitationTeach}} </div>
            <div class="icon"><i class="el-icon-user"></i>
              {{ item.imitationCount }}
            </div>
          </div>
          <div class="backmo">
            <p>{{ item.imitationTitle }}</p>
            <div style="color: #54a3fd">{{ item.imitationSchool }} | {{item.imitationTeach}}</div>
            <p class="psize"> {{item.imitationSummary}}</p>
          </div>
        </div>
        <!--        动画-->
      </div>
      <div class="pagin" >
        <el-pagination
          background
          layout="prev, pager, next"
          v-show="total>0"
          :total="total"
          :current-page.sync="queryParams.pageNum"
          :page-size.sync="queryParams.pageSize"
          @size-change="getWebBaseInfo"
          @current-change="getWebBaseInfo">
        </el-pagination>
      </div>

    </div>



    <!-- 详情数据穿透 -->
    <div class="team" v-if="isShowDetails">
      <div class="neirong" v-html="detailsContent"></div>
    </div>

    <footers></footers>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { getTab, getbanner, getBaseInfo, imitationList, imitationId } from '@/api/gw/home'
import headers from '@/views/officialWebsite/Components/header.vue'
import footers from '@/views/officialWebsite/Components/footer.vue'
export default {
  components: {
    footers,
    headers,
    Swiper,
    SwiperSlide,
  },
  name: 'HelloWorld',

  data() {
    return {
      msg:7,
      xlist:[],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
      isShowDetails:false,
      detailsContent:"",
      imgurl: process.env.VUE_APP_BASE_API,
      topSwiperData: {},
      teachingAchievements: [],
      pageContextList: [],
      swiperOptions: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "fraction",
        },
        spaceBetween: 2,
        notNextTick: true,
        loop: false,
        autoplay: false,//是否自动播放
        speed: 500,//播放速度
        slidesPerView: 'auto',
        // centeredslides: true,
        paginationclickable: true,
        on: {
          slidechangeTransitionEnd: function () {
            //处理手动操作轮播图后后不再自动轮播
            this.autoplay.start();
          }
        }
      },
      nav: [
        // { name: '教学团队' },
        // { name: '教学成果' },
      ],
      currentActive: 0,
      isMounted: false,

    }
  },
  created() {
    console.log("128xufang")
    // 页面加载完毕调用
    this.initPageData();
    this.getWebBaseInfo()
  },
  computed: {

  },

  methods: {
    goDeatail(data){

        imitationId(data.id).then(res=>{
          // console.log(res,'调用成功')
        })
        window.open(data.imitationLink, '_blank');

    },

    // 触发导航
    getCurrentActive(value) {
      if (this.currentActive == value) {
        return
      }
      this.currentActive = value
    },
    getWebBaseInfo() {
      imitationList(this.queryParams).then(res =>{
          this.xlist = res.rows
          this.total = res.total
      })

    },
    initPageData() {
      let routeParam = {
        "categoryId": this.$route.query.id,
        "pageNum": 1,
        "pageSize": 10
      }
    },
  }

}
</script>

<style scoped>
/* .container {
  background: #F5F5F5;
} */
.bj {
  background: #F5F5F5;
}

::v-deep .team .el-input__inner {
  width: 240px;
  border-radius: 50px;
}

.page-box {
  width: 82%;
  margin: 10px auto;
}



.d-s {
  display: flex;
  align-items: center;
}

.logo-box {
  width: 50px;
  height: 50px;
  background: #fff;
}

.logo-size {
  font-weight: 800;
  font-size: 24px;
  color: #FFFFFF;
  margin-left: 20px;

}

.x-x {
  margin-right: 20px;
  cursor: pointer;
}

.ny-banner {
  width: 100%;
}

.ny-banner img {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #EEEEEE;
}

.navigation .content {
  width: 80%;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.navigation .content .left {
  width: 30%;
  display: flex;

  align-items: center
}

.navigation img {

  width: 15px;
  margin-right: 10px;
}

.navigation p {

  /* margin-top: 5px; */
  color: #999;
}

.navigation span {

  color: #999;
}

.navigation span:last-child {
  font-weight: 700;
  color: #005375;
}

.navigation .content .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.navigation .content .right .nav-item {
  width: 200px;
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.navigation .content .right .active {
  border-bottom: 3px solid #005375;
  color: #005375;
  font-weight: bold;
}


.top-swiper {
  padding: 0;
  width: 80%;
  margin: 30px auto;
  background-color: #f6f7f9;
  height: 450px;
  position: relative;
  cursor: pointer;
}

::v-deep .top-swiper .swiper-pagination {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  width: 97%;
  /* background-color: #f0f; */
  right: 30px;
  bottom: 90px;
  font-weight: bold;
  font-size: 30px;
  color: #00A0E8;
}
::v-deep .top-swiper .swiper-pagination-current {
  font-size: 30px;
}
::v-deep .swiper-pagination-total {
  font-size: 24px;
  margin-top: 8px;
}

.top-swiper .banner-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 450px;
}

.top-swiper .banner-box .left {
  width: 50%;
  overflow: hidden;
  height: 450px;
}

.top-swiper .banner-box .left img {
  width: 100%;
  height: 100%;
}

.top-swiper .banner-box .right {
  width: 50%;
  padding: 30px;
}

.top-swiper .banner-box .right .time {
  font-size: 18px;
  color: #005375;
  margin-bottom: 20px;
}

.top-swiper .banner-box .right .tt {
  color: #005375;
  font-weight: bold;
  font-size: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 40px;
}

.top-swiper .banner-box .right .desc {
  font-size: 18px;
  color: #999999;
  line-height: 24px;
  overflow: hidden;
  /** 隐藏超出的内容 **/
  word-break: break-all;
  text-overflow: ellipsis;
  /** 多行 **/
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 3;
  /** 显示的行数 **/
}

.top-swiper .banner-box .right .more {
  width: 36px;
  height: 36px;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #005375;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #005375;
  margin-top: 40px;
}

.list {
  width: 80%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}

.list .item {
  width: 31%;
  height: 432px;
  margin-bottom: 30px;
  position: relative;
  ;
}

.list .item .img {
  width: 100%;
  height: 287px;
  border-radius: 0px 0px 0px 0px;
  overflow: hidden;
}

.list .item .img img {
  height: 100%;
}

.list .item .tt {
  font-weight: bold;
  font-size: 20px;
  color: #005375;
  margin: 15px 0;
}

.list .item .desc {
  overflow: hidden;
  /** 隐藏超出的内容 **/
  word-break: break-all;
  text-overflow: ellipsis;
  /** 多行 **/
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2;
  /** 显示的行数 **/
  font-size: 18px;
  color: #999999;
  line-height: 24px;
}

.list .item .time {
  position: absolute;
  bottom: 0;
  font-weight: 500;
  font-size: 18px;
  color: #005375;
}

.index-footer {
  background: #383838;
  padding-top: 30px;
}

.index-footer .footer {
  width: 80%;
  margin: 0 auto;
}

.index-footer .footer .logo {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.index-footer .footer .logo .footer-contact {}

.index-footer .footer .logo .footer-contact .p {
  display: inline-block;
  display: flex;
  float: left;
  margin-left: 50px;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  /* justify-content: flex-end; */
}

.index-footer .footer .logo .footer-contact .p img {
  margin-right: 10px;
}

.index-footer .footer .logo .footer-contact .p:nth-child(3) {
  width: 100%;
  clear: both;
  margin-top: 20px;
}

.index-footer .footer .footer-nav {
  display: flex;
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.index-footer .footer .footer-nav .footer-nav-item {
  width: 9%;
  margin-right: 1%;
}

.index-footer .footer .footer-nav .footer-nav-item:last-child {
  margin-right: 0;
}

.index-footer .footer .footer-nav .footer-nav-item .tt {

  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 18px;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.index-footer .footer .footer-nav .footer-nav-item .tt::after {
  content: "";
  width: 20px;
  height: 2px;
  background: #005375;
  border-radius: 0px 0px 0px 0px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.index-footer .footer .footer-nav .footer-nav-item a {
  text-decoration: none;

  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 16px;
  display: block;
  margin-bottom: 15px;
}

.index-footer .footer .footer-nav .footer-nav-item a:last-child {
  margin-bottom: 0;
}

.index-footer .footer .web_icp {
  display: flex;
  margin-top: 50px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.index-footer .footer .web_icp a {
  text-decoration: none;

  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 16px;
  margin-right: 30px;
}

.index-footer .footer .web_icp .right {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.index-footer .footer .web_icp .right div {
  margin-right: 25px;

  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 18px;

}

.news11-list {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;

}
.news11 .news11-list .news11-list-item {
  width: 24%;
  height: 324px;
  margin-bottom: 20px;
  position: relative;
  margin-right: 10px;
}

.news11 .news11-list .news11-list-item:hover>.backmo {
  width: 100%;
  height: 194px;
  box-sizing: border-box;
  padding: 10px 15px;
  transition: background-color 0.5s;
  background-color: rgba(0, 0, 0, 0.46) !important;
  color: #fff;
  border-radius: 10px;

}
.news11 .news11-list .news11-list-item .img {
  width: 100%;
  height: 194px;
  border-radius: 10px ;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}
.yl-right{
  position: absolute;
  background: #da4925;
  left: 0px;
  top: 0px;
  color: #fff;
  border-radius: 0px 0px 10px 0px;
  font-size: 12px;
  padding: 5px ;
}

.news11 .news11-list .news11-list-item .img img {
  aspect-ratio: 16/9;
}

.news11 .news11-list .news11-list-item .tt {
  height: 55px;
  line-height: 28px;
  font-size: 18px;
  overflow: hidden;
  /** 隐藏超出的内容 **/
  word-break: break-all;
  text-overflow: ellipsis;
  /** 多行 **/
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2;
  /** 显示的行数 **/
}
.psize{
  overflow: hidden;
  /** 隐藏超出的内容 **/
  word-break: break-all;
  text-overflow: ellipsis;
  /** 多行 **/
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 3;
}

.news11 .news11-list .news11-list-item .tags {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.backmo{
  width: 0%;
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;

}

.news11 .news11-list .news11-list-item .tags .p {
  font-size: 14px;
  color: #005375;
  font-weight: 700;
}

.news11 .news11-list .news11-list-item .tags i {
  color: #999999;
}

.news11 .news11-list .news11-list-item .tags .icon {
  color: #999999;
  font-size: 14px;
}
.pagin{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
::v-deep .el-pagination .el-pager li:not(.disabled) {
  border-radius: 100%;
  /* 圆形 */
  width: 50px;
  height: 50px;
  /* 按钮高度 */
  line-height: 50px;
  /* 文字垂直居中 */
  text-align: center;
  /* 文字水平居中 */
  margin: 0 15px;
  /* 按钮间距 */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #FFFFFF;

  border: 1px solid #DDDDDD;
}

/* 选中的页码按钮样式 */
::v-deep .el-pagination .el-pager .active {
  background-color: #005375;
;
  /* 背景颜色 */
  color: #fff;
  /* 文字颜色 */
}

::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev {

  background-color: #f4f4f5;
  color: #333;
  margin: 0 15px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #FFFFFF;

  border: 1px solid #DDDDDD;
}

::v-deep .el-pagination .btn-next .el-icon,
::v-deep .el-pagination .btn-prev .el-icon {
  font-size: 18px;
}
.page-box{
  width: 80%;
  margin: 10px auto;
}
</style>