<template>
  <common-header />
  <div class="content">
    <div class="main-img">
      <div
        class="img-left"
        v-for="(item, index) in adData"
        :key="index"
        v-show="index == 0 || index == 1"
      >
        <img :src="item.am_img" alt="" />
      </div>
      <div class="img-right">
        <img
          v-for="(item, index) in adData"
          :key="index"
          v-show="index == 2 || index == 3"
          :src="item.am_img"
          alt=""
        />
      </div>
    </div>
    <!-- 自主研学列表 -->
    <div class="online-study">
      <div>
        <span>自主研学</span>
        <span @click="zxxxDetail">查看更多</span>
      </div>

      <div class="study-list">
        <div
          class="list-left"
          v-for="(item, index) in zxxxData"
          :key="index"
          v-show="index == 0"
          @click="zxxxzyDetail(item.zzc_id)"
        >
          <img :src="item.zzc_img" alt="" />
        </div>
        <div class="list-right">
          <div
            class="r-right"
            v-for="(item, index) in zxxxData"
            :key="index"
            v-show="index > 0 && index < 4"
            @click="zxxxzyDetail(item.zzc_id)"
          >
            <img :src="item.zzc_img" alt="" />
            <div class="wenzi">
              <p>{{ item.zzc_name }}</p>
              <p>
                {{ item.zzc_jj }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 协同备课列表 -->
    <div class="online-study">
      <div>
        <span>协同备课</span>
        <span @click="xtbkDetail">查看更多</span>
      </div>

      <div class="study-list">
        <div
          class="list-left"
          v-for="(item, index) in xtbkData"
          :key="index"
          v-show="index == 0"
          style="cursor: pointer"
          @click="xtbknrDetail(item.zx_id)"
        >
          <img :src="item.zx_img" alt="" />
        </div>
        <div class="list-right">
          <div
            class="r-right"
            v-for="(item, index) in xtbkData"
            @click="xtbknrDetail(item.zx_id)"
            :key="index"
            v-show="index > 0"
          >
            <img :src="item.zx_img" alt="" />
            <div class="wenzi">
              <p>{{ item.zx_name }}</p>
              <p>
                {{ item.zx_brief }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 同步教研列表 -->
    <div class="online-study">
      <div>
        <span>同步教研</span>
        <span @click="tbjyDetail">查看更多</span>
      </div>

      <div class="study-list">
        <div
          class="list-left"
          v-for="(item, index) in tbjyData"
          :key="index"
          v-show="index == 0"
          style="cursor: pointer"
          @click="tbjynrDetail(item.zt_id)"
        >
          <img :src="item.zt_img" alt="" />
        </div>
        <div class="list-right">
          <div
            class="r-right"
            v-for="(item, index) in tbjyData"
            :key="index"
            v-show="index > 0"
            @click="tbjynrDetail(item.zt_id)"
          >
            <img :src="item.zt_img" alt="" />
            <div class="wenzi">
              <p>{{ item.zt_name }}</p>
              <p>
                {{ item.zt_content }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <common-footer />
</template>

<script>
import { getFullUrl } from "~/utils/helper";
import { zhjy_ad_list, zhjy_list, zxxx_kc_list } from "./api";
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
export default {
  name: "index",
  components: {
    CommonHeader,
    CommonFooter,
  },
  data() {
    return {
      adData: {},
      https: window.GLOBAL_CONFIG.api,
      zxxxData: [],
      tbjyData: [],
      xtbkData: [],
      am_position: "",
    };
  },
  methods: {
    zxxxDetail() {
      this.$router.push({ name: "zhjy_zhjyzxxx" });
    },
    xtbkDetail() {
      this.$router.push({ name: "zhjy_zhjyxtbk" });
    },
    tbjyDetail() {
      this.$router.push({ name: "zhjy_zhjytbjy" });
    },
    zxxxzyDetail(id) {
      this.$router.push({ name: "zhjy_zhjyzxxx_zxxxzy", params: { id: id } });
    },

    // zxxxspDetail(id) {

    // },
    xtbknrDetail(id) {
      this.$router.push({ name: "zhjy_zhjyxtbk_nrxq", params: { id: id } });
    },
    tbjynrDetail(id) {
      this.$router.push({ name: "zhjy_tbjy_detail", params: { id: id } });
    },
    getAdData() {
      let data = {
        page: this.page,
        limit: this.limit,
        am_position: "111",
      };
      zhjy_ad_list(data).then((res) => {
        this.adData = res.data.page_data;
      });
    },
    getListData() {
      let data = {};
      zhjy_list(data).then((res) => {
        this.tbjyData = res.data.tbjy;
        this.xtbkData = res.data.xtbk;
      });
      zxxx_kc_list().then((res) => {
        this.zxxxData = res.data.page_data;
      });
    },
  },
  mounted() {
    this.getAdData();
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1440px;
  background: #fcfeff;
  margin: 25px auto 0;
}
.main-img {
  width: 1440px;
  height: 240px;
  display: flex;
  margin-bottom: 70px;

  .img-left {
    width: 470px;
    height: 240px;
    margin-right: 13px;
    img {
      width: 100%;
      height: 240px;
    }
  }
  .img-right {
    width: 470px;
    height: 240px;

    flex-wrap: wrap;
    img {
      width: 100%;
      height: 115px;
      & + img {
        margin-bottom: 10px;
      }
    }
  }
}
.online-study {
  width: 1380px;
  margin: 20px auto;
  //标题
  & > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    & :nth-child(1) {
      font-size: 28px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #000000;
      line-height: 24px;
    }
    & :nth-child(2) {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #019ff9;
      line-height: 20px;
      cursor: pointer;
    }
  }
  //列表
  .study-list {
    display: flex;
    justify-content: space-between;
    width: 1380px;
    margin-bottom: 70px;
    box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);

    & > .list-left {
      width: 684px;
      height: 381px;
      cursor: pointer;
      img {
        width: 684px;
        height: 381px;
      }
    }
    & > .list-right {
      width: 700px;
      height: 381px;
      margin-left: 10px;
      background: #fff;
      // border: 1px solid #000000;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      .r-right {
        display: flex;
        justify-content: space-between;

        img {
          width: 200px;
          height: 120px;
          display: inline-block;
          box-sizing: border-box;
          margin-bottom: 10px;
          border-radius: 12px;
        }

        .wenzi {
          display: flex;
          flex-direction: column;
          width: 500px;
          height: 120px;

          p:first-of-type {
            display: inline-block;
            vertical-align: top;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            color: #050026;
            line-height: 22px;
            margin: 25px 14px 0 12px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          p:last-of-type {
            display: inline-block;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #949494;
            line-height: 20px;
            margin: 0px 14px 15px 12px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>

