<template>
  <div id="index">
    <el-row>
      <el-col>
        <!--首页图片-->
        <div class="top">
          <img src="@/assets/index/sy_bj1@2x.png" alt="">
        </div>
      </el-col>
    </el-row>
    <!--新闻中心-->
    <div class="new_center">
      <el-row>
        <el-col :offset="3" :span="18">
          <!--正文部分-->
          <div class="news_center">
            <!--标题-->
            <div class="title">{{ $t('message.news_center') }}</div>
            <div class="divider">
              <div class="divider_left">

              </div>




















              <el-divider class="name">News Center</el-divider>
            </div>
            <!--录播图-->
            <div class="slideshow">
              <el-carousel trigger="click" height="51rem">
                <el-carousel-item v-for="item in 4" :key="item">
                  <div>
                    <img src="@/assets/index/t1@2x.png" alt="">
                    <div class="bottom_title">
                      <el-row>
                        <el-col :offset="2" :span="18">
                          {{ item }}喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <!--轮播图下的新闻-->
            <div class="new_context">
              <el-row>
                <el-col :span="6">
                  <div class="new_content">
                    <div class="thumbnail">
                      <img src="@/assets/index/t2.png" alt="">
                    </div>
                    <div class="new_title">
                      <p>
                        信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
                      </p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="new_content">
                    <div class="thumbnail">
                      <img src="@/assets/index/t3.png" alt="">
                    </div>
                    <div class="new_title">
                      <p>
                        “学党史 担使命”一班一品牌，班班展风采——信息科学与技术学院2020-2021…
                      </p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="new_content">
                    <div class="thumbnail">
                      <img src="@/assets/index/t4.png" alt="">
                    </div>
                    <div class="new_title">
                      <p>
                        西南交大第十届青年教师教学竞赛信息学院初赛顺利举行
                      </p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="new_content">
                    <div class="thumbnail">
                      <img src="@/assets/index/t5.png" alt="">
                    </div>
                    <div class="new_title">
                      <p>
                        “奋斗青春 梦想起航” 西南交通大学信息科学与技术学院2021级新生开学典礼
                      </p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <!--更多-->
          <div class="more_title">{{ $t('message.more') }}</div>
          <div class="more_img">
            <img src="@/assets/index/sy_icon_zhdl.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>
    <!--科学研究-->
    <div class="scientific_research">
      <el-row>
        <el-col :offset="3" :span="18">
          <div>
            <!--标题-->
            <div class="title" style="background: #FFFFFF; color: #1956BC;margin-bottom: 2rem;">科学研究</div>
            <div class="divider" style="width: 80rem;">
              <el-divider class="name">
                <div >Scientific research trends</div>
              </el-divider>
            </div>

            <el-row>
              <el-col :offset="3" :span="18">
                <div class="first">
                  <el-row>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh1.png" alt="">
                        </div>
                        <div class="text">科研院关于组织申报国家重点研发计划 …</div>
                        <div class="time">2021.11.10</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh6.png" alt="">
                        </div>
                        <div class="text">科技部关于发布国家重点研发计划“科…</div>
                        <div class="time">2021.10.21</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh2.png" alt="">
                        </div>
                        <div class="text">科研院关于组织申报国家重点研发计划…</div>
                        <div class="time">2021.11.10</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh7.png" alt="">
                        </div>
                        <div class="text">西南交通大学关于2021年度国家自然…</div>
                        <div class="time">2021.10.21</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh3.png" alt="">
                        </div>
                        <div class="text">科研院关于组织申报国家重点研发计划…</div>
                        <div class="time">2021.11.10</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh8.png" alt="">
                        </div>
                        <div class="text">关于召开2021年度国家自然科学基金项…</div>
                        <div class="time">2021.10.21</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh4.png" alt="">
                        </div>
                        <div class="text">关于2021年度四川省科技奖励提名工作…</div>
                        <div class="time">2021.11.10</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh9.png" alt="">
                        </div>
                        <div class="text">《成都市经济和信息化局关于更新完善…</div>
                        <div class="time">2021.10.21</div>
                      </div>
                      <div style="margin-left: 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh5.png" alt="">
                        </div>
                        <div class="text">国家自然科学基金委员会中德科学中心…</div>
                        <div class="time">2021.11.10</div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="row_text">
                        <div class="img">
                          <img src="@/assets/index/sy_icon_bh10.png" alt="">
                        </div>
                        <div class="text">关于征集适宜向“一带一路”国家转移的…</div>
                        <div class="time">2021.10.21</div>
                      </div>
                    </el-col>
                  </el-row>


                </div>
              </el-col>
            </el-row>

            <!--更多-->
            <div class="more_title" style="margin-bottom: 2rem;background: #FFFFFF; color: #1956BC">
              {{ $t('message.more') }}
            </div>
            <div class="divider" style="width: 66rem;">
              <el-divider>
                <div class="name">学术交流</div>
              </el-divider>
            </div>
            <el-row>
              <el-col :offset="3" :span="18">
                <div class="communication">
                  <div class="communication_row">
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="2" :offset="1">
                            <div class="communication_img">
                              <img src="@/assets/index/sy_icon_b1.png" alt="">
                            </div>
                          </el-col>
                          <el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
                          <el-col :span="4">
                            <div class="communication_time">
                              2021.10.11
                            </div>
                          </el-col>
                        </el-row>
                        <div style="margin:2rem 0 2rem 4rem">
                          <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="3">
                            <div class="communication_img">
                              <img src="@/assets/index/sy_icon_b1.png" alt="">
                            </div>
                          </el-col>
                          <el-col :span="16"><span>范平志教授学术讲座-《妙语茶香之科…</span></el-col>
                          <el-col :span="4">
                            <div class="communication_time">
                              2021.10.11
                            </div>
                          </el-col>
                        </el-row>
                        <div style="margin:2rem 0 2rem 4rem">
                          <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="3">
                          <div class="communication_img">
                            <img src="@/assets/index/sy_icon_b1.png" alt="">
                          </div>
                        </el-col>
                        <el-col :span="16"><span>徐加鹏博士学术报告-通信受限随机系…</span></el-col>
                        <el-col :span="4">
                          <div class="communication_time">
                            2021.10.11
                          </div>
                        </el-col>
                      </el-row>
                      <div style="margin:2rem 0 2rem 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="3">
                          <div class="communication_img">
                            <img src="@/assets/index/sy_icon_b1.png" alt="">
                          </div>
                        </el-col>
                        <el-col :span="16"><span>复旦大学蒋轶教授学术报告</span></el-col>
                        <el-col :span="4">
                          <div class="communication_time">
                            2021.10.11
                          </div>
                        </el-col>
                      </el-row>
                      <div style="margin:2rem 0 2rem 4rem">
                        <hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="3">
                          <div class="communication_img">
                            <img src="@/assets/index/sy_icon_b1.png" alt="">
                          </div>
                        </el-col>
                        <el-col :span="16"><span>剑桥大学博士后李鹤博士学术报告：异…</span></el-col>
                        <el-col :span="4">
                          <div class="communication_time">
                            2021.10.11
                          </div>
                        </el-col>
                      </el-row>
                      <div style="margin:2rem 0 0 4rem">
                        <!--<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">-->

                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="3">
                          <div class="communication_img">
                            <img src="@/assets/index/sy_icon_b1.png" alt="">
                          </div>
                        </el-col>
                        <el-col :span="16"><span>剑桥大学博士后李鹤博士学术报告：异…</span></el-col>
                        <el-col :span="4">
                          <div class="communication_time">
                            2021.10.11
                          </div>
                        </el-col>
                      </el-row>
                      <div style="margin:2rem 0 0 4rem">
                        <!--<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">-->
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>

            <!--更多-->
            <div class="more_title" style="background: #FFFFFF; color: #1956BC">{{ $t('message.more') }}</div>
            <div class="more_img" style="margin-bottom: 1rem">
              <img src="@/assets/index/sy_icon_zhdb.png" alt="">
            </div>


          </div>
        </el-col>
      </el-row>
    </div>
    <!--党群工作-->
    <div class="party_building_active">

      <el-row>
        <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="3">
          <div class="grid-content"></div>
        </el-col>
        <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="18">
          <!--标题-->
          <div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">党群工作</div>
          <div class="divider" style="width: 80rem;">
            <el-divider>
              <div class="name">Party Building Activities</div>
            </el-divider>
          </div>

          <div>
            <SlideshowCard/>
          </div>

          <!--更多-->
          <div class="more_title" style="background: #DA2D2D; color: #FFFFFF">{{ $t('message.more') }}</div>

          <div class="more_img" style="margin-bottom: 1rem">
            <img src="@/assets/index/sy_icon_zhdh.png" alt="">
          </div>


          <div class="divider" style="width: 64rem; margin-top: 2rem;">
            <el-divider>
              <div class="name">党史教育</div>
            </el-divider>
          </div>

          <div class="phe">
            <el-row>
              <el-col :offset="3" :span="18">
                <el-row>
                  <el-col :span="4">
                    <div class="phe_img">
                      <img src="@/assets/index/1.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="17">
                    <div class="phe_context">
                      <div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
                      <div class="phe_context_text">
                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="phe_time">2021.11.10</div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="3" :span="18">
                <el-row>
                  <el-col :span="4">
                    <div class="phe_img">
                      <img src="@/assets/index/1.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="17">
                    <div class="phe_context">
                      <div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
                      <div class="phe_context_text">
                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="phe_time">2021.11.10</div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="3" :span="18">
                <el-row>
                  <el-col :span="4">
                    <div class="phe_img">
                      <img src="@/assets/index/1.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="17">
                    <div class="phe_context">
                      <div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
                      <div class="phe_context_text">
                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="phe_time">2021.11.10</div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="3" :span="18">
                <el-row>
                  <el-col :span="4">
                    <div class="phe_img">
                      <img src="@/assets/index/1.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="17">
                    <div class="phe_context">
                      <div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
                      <div class="phe_context_text">
                        为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="phe_time">2021.11.10</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </div>
    <!--教学工作-->
    <div class="teaching_and_student">
      <el-row>
        <el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content"></div>
        </el-col>
        <el-col :xs="22" :sm="22" :md="20" :lg="18" :xl="14">
          <!--教学工作-->
          <div class="title">教学工作</div>
          <div class="divider" style="width: 76rem;">
            <el-divider>
              <div class="name">Teaching and student</div>
            </el-divider>
          </div>
          <div class="tw">
            <el-row>
              <el-col :span="3">
                <div class="tw_time">
                  <div class="tw_top">
                    28
                  </div>
                  <div class="tw_bottoms">
                    2021-10
                  </div>
                </div>
              </el-col>
              <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
                <div class="tw_context">
                  <div class="tw_context_title">
                    不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                  </div>
                  <div class="tw_context_text">
                    为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                  </div>
                </div>
              </el-col>
              <el-col :span="3" :offset="1">
                <div class="tw_img">
                  <img src="@/assets/index/tw1.png" alt="">
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-row>
                <el-col :span="3">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" :offset="1">
                  <div class="tw_img">
                    <img src="@/assets/index/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-row>
                <el-col :span="3">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" :offset="1">
                  <div class="tw_img">
                    <img src="@/assets/index/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-row>
                <el-col :span="3">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" :offset="1">
                  <div class="tw_img">
                    <img src="@/assets/index/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-row>
                <el-col :span="3">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" :offset="1">
                  <div class="tw_img">
                    <img src="@/assets/index/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
            </el-row>
          </div>


          <!--更多-->
          <div class="more_title">{{ $t('message.more') }}</div>
          <div class="more_img">
            <img src="@/assets/index/sy_icon_zhdl.png" alt="">
          </div>
        </el-col>
        <el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="3">
          <div class="grid-content"></div>
        </el-col>
      </el-row>
    </div>
    <!--下方开始-->
    <!--    <div class="bottom">-->
    <!--      <el-row>-->
    <!--        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">-->
    <!--          <div class="grid-content"></div>-->
    <!--        </el-col>-->
    <!--        <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">-->
    <!--          <div class="table">-->
    <!--            <table>-->
    <!--              <tr>-->
    <!--                <td rowspan="6">-->
    <!--                  <div class="left">-->
    <!--                    <div class="table_img">-->
    <!--                      <img src="@/assets/index/sy_icon_sjzx.png" alt="">-->
    <!--                    </div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--                <td>-->
    <!--                  <div class="right one">-->
    <!--                    <div class="table_tr_left">职工人数</div>-->
    <!--                    <div class="table_tr_right">667人</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--              <tr>-->
    <!--                <td>-->
    <!--                  <div class="right tow">-->
    <!--                    <div class="table_tr_left">在校学生人数</div>-->
    <!--                    <div class="table_tr_right">667人</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--              <tr>-->
    <!--                <td>-->
    <!--                  <div class="right three">-->
    <!--                    <div class="table_tr_left">研究生导师</div>-->
    <!--                    <div class="table_tr_right">667人</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--              <tr>-->
    <!--                <td>-->
    <!--                  <div class="right fourth">-->
    <!--                    <div class="table_tr_left">科研团队</div>-->
    <!--                    <div class="table_tr_right">28000人</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--              <tr>-->
    <!--                <td>-->
    <!--                  <div class="right five">-->
    <!--                    <div class="table_tr_left">高层次人才</div>-->
    <!--                    <div class="table_tr_right">18个</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--              <tr>-->
    <!--                <td>-->
    <!--                  <div class="right sex">-->
    <!--                    <div class="table_tr_left">重大项目</div>-->
    <!--                    <div class="table_tr_right">280000个</div>-->
    <!--                  </div>-->
    <!--                </td>-->
    <!--              </tr>-->
    <!--            </table>-->
    <!--          </div>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->


  </div>
</template>

<script>
import SlideshowCard from './components/slideshow_card'

export default {
  name: "index",
  components: {
    SlideshowCard
  },
  data() {
    return {
      scroll: 0,
    }
  },
  mounted() { //监听scroll方法
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() { //及时释放
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      /*
      if (window.pageYOffset < 960) {
        if (window.pageYOffset > this.scroll) {
          console.log("向下")

          window.scrollTo({top: 960, behavior: 'smooth',})
          // this.backtop(960,false);
        } else if (window.pageYOffset < this.scroll) {
          console.log("向上")

          // this.backtop(0,true);
          window.scrollTo({top: -500, behavior: 'smooth',})
        }
      }
      this.scroll = window.pageYOffset
      console.log(window.pageYOffset)
      */
    },	//返回顶部
    backtop(top, type) {
      // 实现滚动效果
      const timeTop = setInterval(() => {
        if (type) {
          document.body.scrollTop = document.documentElement.scrollTop = top -= 50
          if (top <= 0) {
            clearInterval(timeTop)
          }
        }
      }, 10)
    },
  }
}
</script>

<style scoped lang="scss">
.el-divider__text{

  background-color: transparent;
}
#index {
  .title {
    margin: 4rem auto 1rem;
    width: 23.2rem;
    height: 5.9rem;
    background: #1956BC;
    border-radius: 2.95rem;
    font-size: 2.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 5.9rem;
    text-align: center;
  }

  .more_title {
    margin: 4rem auto 1rem;
    width: 12.8rem;
    height: 3.6rem;
    background: #1956BC;
    border-radius: 1.8rem;
    font-size: 1.4rem;
    line-height: 3.6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
  }

  .more_img {
    text-align: center;
    margin-top: 2rem;
  }

  .divider {
    width: 70rem;
    margin: 0 auto 1rem;
    clear: left;
    height: 3rem;
    line-height: 3rem;

    .name {
      font-size: 2rem;
      background-color: transparent;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1956BC;
      margin-left: 3rem;
      margin-right: 3rem;
    }
  }

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

  .news_center {
    .slideshow {
      width: 100%;

      .el-carousel__arrow {
        top: 93%;
        display: block;
      }

      .bottom_title {
        width: 100%;
        height: 7rem;
        background: #1956BC;
        opacity: 0.89;
        position: absolute;
        bottom: 0;
        line-height: 7rem;
        font-size: 2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }

      img {
        width: 100%;
      }
    }

    .new_context {

      margin-top: 3rem;

      .new_content {
        margin: 0 auto;
        height: 23rem;
        width: 22.6rem;
        border: 0.1rem solid #CAD9F3;
        border-radius: 1.4rem;
      }

      .new_content:hover {
        box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
      }

      .thumbnail {
        height: 14rem;
      }

      .new_title {
        font-size: 1.6rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin: 1rem 1rem 0rem 1rem;
        color: #262626;
        line-height: 2.2rem;
      }
    }


  }

  .scientific_research {
    margin-top: 2rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
    width: 100%;
    background-image: url("../../assets/index/scientific_research_trends/sy_bj2.png");

    .first {
      padding-top: 1rem;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 2.4rem;

      .divider {
        margin: 0 auto;
        margin: 0;
        padding: 0;
        width: 44rem;
      }

      .row_text {
        margin-top: 2rem;
        height: 2.6rem;
        line-height: 2.6rem;
        margin-bottom: 2rem;
        color: #1956BC;
        font-family: PingFangSC-Medium, PingFang SC;
        clear: left;

        div {
          float: left;
        }

        .img {
          margin-left: 2.5rem;
        }

        .text {
          margin-left: 1rem;
          font-size: 1.8rem;
          font-weight: 500;
        }

        .time {
          text-align: center;
          font-size: 1.2rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          width: 7.2rem;
          height: 2.2rem;
          line-height: 2.2rem;
          border-radius: 1.1rem;
          border: 0.1rem solid #1956BC;
          margin-left: 3rem;
        }
      }
    }

    .communication {
      width: 100%;
      margin-top: 1rem;
      //height: 24rem;
      background: rgba(255, 255, 255, 0.9);
      padding-top: 3rem;

      span {
        line-height: 2.6rem;
        font-size: 1.8rem;
        font-weight: 500;
        color: #1956BC;
      }

      .communication_img {
        width: 100%;
        //height: 2.6rem;
        //margin-left: 3rem;

      }

      .communication_time {
        font-size: 1.2rem;
        font-weight: 400;
        color: #1956BC;
        line-height: 2.6rem;
      }
    }
  }

  .party_building_active {
    background-image: url('../../assets/index/party_building_activities/sy_bj3.png');

    .phe {
      font-family: PingFangSC-Medium, PingFang SC;
      margin-top: 4rem;
      margin-bottom: 4rem;

      .phe_context {
        .phe_context_title {
          cursor: pointer;
          font-size: 2rem;
          font-weight: 600;
          color: #161616;
          letter-spacing: 2px;
        }

        .phe_context_title:hover {
          color: #DA2D2D;
        }

        .phe_context_text {
          margin-top: 0.8rem;
          font-size: 1.6rem;
          color: #565656;
          letter-spacing: 1px;
        }
      }

      .phe_time {
        text-align: right;
        font-size: 2rem;
        font-weight: 500;
        color: #565656;
        letter-spacing: 2px;
      }
    }
  }

  .teaching_and_student {

    .tw {
      margin-top: 4rem;
    }

    .tw_time {
      border-right: .2rem solid #D5D5D5;
      height: 10rem;
      width: 10rem;
      color: #1956BC;
      text-align: center;

      .tw_top {
        height: 8rem;
        width: 100%;
        line-height: 8rem;
        font-size: 5.2rem;
      }

      .tw_bottoms {
        height: 2rem;
        width: 100%;
        font-size: 1.4rem;
      }
    }

    .tw_context {

      font-family: PingFangSC-Medium, PingFang SC;
      color: #161616;

      .tw_context_title {
        font-size: 2rem;
        font-weight: 600;
        padding-right: 2rem;

      }

      .tw_context_text {
        margin-top: .8rem;
        font-size: 1.6rem;
        font-weight: 400;
      }
    }

    .tw_img {
      width: 7vw;

      img {
        width: 100%;
      }
    }


  }

  .bottom {
    margin-top: 2rem;
    background-image: url('../../assets/index/sy_bj4.png');
    //height: 66rem;

    .table {
      margin: 4rem 0 0 0;
      width: 100%;


      tr {
        width: 100%;
      }

      td {
        width: 50%;
        margin: 0;
        padding: 0;
      }

      .left {
        width: 100%;
        height: 55rem;

        .table_img {
          //width: 17.6vw;
          text-align: right;
          padding-top: 6rem;
        }
      }

      .right {
        width: 123%;
        height: 6.8rem;
        clear: left;
        position: relative;
        color: #FFFFFF;

        .table_tr_left {
          position: absolute;
          font-size: 1.6rem;
          height: 100%;
          line-height: 6.8rem;
          float: left;
          left: 12.5rem;
        }

        .table_tr_right {
          position: absolute;
          font-size: 2.4rem;
          float: left;
          right: 3.3rem;
          height: 100%;
          line-height: 6.8rem;
        }
      }

      .one {
        background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
      }

      .tow {
        margin-left: 6rem;
        background-image: url("../../assets/index/footer/sy_icon_yjs.png");
      }

      .three {
        margin-left: 12rem;
        background-image: url("../../assets/index/footer/sy_icon_kytd.png");
      }

      .fourth {
        margin-left: 18rem;
        background-image: url("../../assets/index/footer/sy_icon_gccrc.png");
      }

      .five {
        margin-left: 12rem;
        background-image: url("../../assets/index/footer/sy_icon_gzrs.png");
      }

      .sex {
        margin-left: 6rem;
        background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
      }

    }

  }

}
</style>
