<template>
  <div>
    <el-row>
      <el-col class="bgc">
        <!--首页图片-->
        <div class="top">

          <img src="@/assets/index/sy_bj1@2x.png" alt="">

        </div>
        <div class="next">
          <img src="@/assets/index/sy_icon_xh.png" alt="">
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="interval">
        <NewsCenter/>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <ResearchTrends/>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <PartyBuildingActivities/>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <TeachingStudent/>
      </el-col>
    </el-row>
    <el-row v-show="width>=1100">
      <el-col>
        <Bottom/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewsCenter from './components/news_center'
import PartyBuildingActivities from './components/party_building_activities.vue'
import ResearchTrends from './components/scientific_research_trends.vue'
import SlideshowCard from './components/slideshow_card.vue'
import TeachingStudent from './components/teaching_student.vue'
import Bottom from './components/bottom.vue'

export default {
  name: "index",
  components: {
    NewsCenter,
    PartyBuildingActivities,
    ResearchTrends,
    SlideshowCard,
    TeachingStudent,
    Bottom
  },
  data() {
    return {
      width: document.documentElement.clientWidth
    }
  },
}
</script>

<style scoped lang="scss">
.bgc {
  position: relative;

  .top {
    img {
      width: 100%;
    }
  }

  .next {
    //width: 100%;
    width: 6rem;
    left: 50%;
    bottom: 8rem;
    position: absolute;
    margin-left: -3rem;
    cursor: pointer;
    img{
      width: 100%;
    }
  }
}

.interval {
  margin-top: 5rem;
}
</style>
