main

分支 (1)

管理

管理

main

phase-1
/
首页.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../第一阶段项目/首页.css" />
    <link rel="stylesheet" href="../第一阶段项目/首页1.css" />
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <!-- 手机端显示ul -->
    <script>
      $(function () {
        $(".image0").click(function () {
          var bElement = $(".head-right");
          if (bElement.is(":visible")) {
            bElement.hide();
          } else {
            bElement.show();
          }
        });
      });
    </script>
    <!-- 新闻内容切换 -->
    <script>
      $(function () {
        $(".news1:first").show().siblings(".news1").hide();
        var index = 0;
        $(".img-right").click(() => {
          console.log(index);
          index++;
          if (index < 3) {
            $(".news1").eq(index).show().siblings(".news1").hide();
          } else {
            index = -1;
          }
        });
        $(".img-left").click(() => {
          console.log(index);
          index--;
          if (index >= 0) {
            $(".news1").eq(index).show().siblings(".news1").hide();
          } else {
            index = 3;
          }
        });
      });
    </script>
  </head>
  <body>
    <div class="box">
      <!-- 头部 -->
      <div class="top">
        <div class="head">
          <div class="head-left">
            <img src="../第一阶段项目/img/2-min.png" alt="" />
            <img class="image0" src="../第一阶段项目/img/图片1.png" alt="" />
          </div>
          <div class="head-right">
            <ul class="ul1">
              <span class="span1"
                ><li><a href="../第一阶段项目/首页.html">首页</a></li></span
              >
              <li>
                <a href="../第一阶段项目/部门概况/部门概况.html">部门情况</a>
              </li>
              <li>
                <a href="../第一阶段项目/师资队伍/师资队伍.html#one"
                  >师资队伍</a
                >
              </li>
              <li><a href="#">思政建设</a></li>
              <li><a href="#">红馆</a></li>
              <li><a href="#">心理健康教育中心</a></li>
              <li><a href="#">科学教研</a></li>
              <li><a href="#">学生社团</a></li>
            </ul>
            <input class="input1" type="text" placeholder="请输入关键词搜索" />
            <img class="image2" src="../第一阶段项目/img/放大镜.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="image" src="../第一阶段项目/img/1-min.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="image" src="../第一阶段项目/img/1-min.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="image" src="../第一阶段项目/img/1-min.png" alt="" />
          </div>
        </div>
        <!--如果需要滚动条-->
        <div class="swiper-pagination"></div>
      </div>
      <!-- 新闻公告 -->
      <div class="new">
        <div class="news">
          <p class="color">
            XIN WEN GONG GAO<span class="newcolor">新闻公告</span>
          </p>
          <!-- 中间 -->
          <div class="conter">
            <div class="news1">
              <div class="news-left">
                <img
                  class="image3"
                  src="../第一阶段项目/img/3-min.png"
                  alt=""
                />
                <div class="p1">传承八一精神 凝聚奋进力量</div>
              </div>
              <div class="news-right">
                <p>
                  1&nbsp; &nbsp;"为党育人 为国育才" ——9位法大教师倾情讲
                  述育人故事
                </p>
                <div class="border"></div>
                <p>2022-11-02</p>
                <p>
                  三尺讲台育英才，一方舞台展风采。“课比天大，是福一字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契…
                </p>
                <div class="bottom">
                  <div>
                    <img
                      class="img-left"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                    <img
                      class="img-right"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                  </div>
                  <p><span>1</span>/3</p>
                </div>
              </div>
            </div>
            <div class="news1">
              <div class="news-left">
                <img
                  class="image3"
                  src="../第一阶段项目/img/5-min.png"
                  alt=""
                />
                <div class="p1">传承八一精神 凝聚奋进力量</div>
              </div>
              <div class="news-right">
                <p>
                  2&nbsp; &nbsp;"为党育人 为国育才" ——9位法大教师倾情讲
                  述育人故事
                </p>
                <div class="border"></div>
                <p>2022-11-02</p>
                <p>
                  三尺讲台育英才，一方舞台展风采。“课比天大，是福一字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契…
                </p>
                <div class="bottom">
                  <div>
                    <img
                      class="img-left"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                    <img
                      class="img-right"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                  </div>
                  <p><span>2</span>/3</p>
                </div>
              </div>
            </div>
            <div class="news1">
              <div class="news-left">
                <img
                  class="image3"
                  src="../第一阶段项目/img/3-min.png"
                  alt=""
                />
                <div class="p1">传承八一精神 凝聚奋进力量</div>
              </div>
              <div class="news-right">
                <p>
                  3&nbsp; &nbsp;"为党育人 为国育才" ——9位法大教师倾情讲
                  述育人故事
                </p>
                <div class="border"></div>
                <p>2022-11-02</p>
                <p>
                  三尺讲台育英才，一方舞台展风采。“课比天大，是福一字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契…
                </p>
                <div class="bottom">
                  <div>
                    <img
                      class="img-left"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                    <img
                      class="img-right"
                      src="../第一阶段项目/img/4-min.png"
                      alt=""
                    />
                  </div>
                  <p><span>3</span>/3</p>
                </div>
              </div>
            </div>
          </div>
          <div class="all">
            <div class="empty"></div>
            <div class="news-bottom">
              <div class="left">
                <p>
                  <span>"为党育人 为国育才”——9位法大教师倾情讲述育</span
                  >三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-
                  块匾，是心照不宣的默契三尺讲台育英才...
                </p>

                <p>
                  <img
                    class="image11"
                    src="../第一阶段项目/img/11-min.png"
                    alt=""
                  />2022-11-02
                </p>
              </div>
              <div class="center">
                <p>
                  <span>"为党育人 为国育才”——9位法大教师倾情讲述育</span>
                  三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-
                  块匾，是心照不宣的默契三尺讲台育英才...
                </p>

                <p>
                  <img
                    class="image11"
                    src="../第一阶段项目/img/11-min.png"
                    alt=""
                  />2022-11-02
                </p>
              </div>

              <div class="right">
                <p>
                  <span>"为党育人 为国育才”——9位法大教师倾情讲述育</span
                  >三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-
                  块匾，是心照不宣的默契三尺讲台育英才...
                </p>

                <p>
                  <img
                    class="image11"
                    src="../第一阶段项目/img/11-min.png"
                    alt=""
                  />2022-11-02
                </p>
              </div>
            </div>
          </div>
          <!-- 查看更多 -->
          <div class="news3">
            查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 党建引领 -->
      <div class="Party">
        <div class="Party-box">
          <div class="Party-title">
            <div>党建引领</div>
            <div>DANG JIAN YIN LING</div>
          </div>
          <div class="Party-middle">
            <div class="Party-m-para">
              <div class="img">
                <img src="../第一阶段项目/img/5-min.png" alt="" />
              </div>
              <div class="Party-content">
                <div class="left">
                  <div>02</div>
                  <div>2022-11</div>
                </div>
                <div class="right">
                  关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                </div>
              </div>
            </div>
            <div class="Party-m-para">
              <div class="img">
                <img src="../第一阶段项目/img/5-min.png" alt="" />
              </div>
              <div class="Party-content">
                <div class="left">
                  <div>02</div>
                  <div>2022-11</div>
                </div>
                <div class="right">
                  关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                </div>
              </div>
            </div>
            <div class="Party-m-para">
              <div class="img">
                <img src="../第一阶段项目/img/5-min.png" alt="" />
              </div>
              <div class="Party-content">
                <div class="left">
                  <div>02</div>
                  <div>2022-11</div>
                </div>
                <div class="right">
                  关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="Party3">
          查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
        </div>
      </div>
      <!-- 教研动态 -->
      <div class="research">
        <div class="researchs">
          <p class="color">
            XIN WEN GONG GAO<span class="newcolor">教研动态</span>
          </p>
          <div class="researchs1">
            <div class="researchs1-left">
              <img class="image3" src="../第一阶段项目/img/6-min.png" alt="" />
              <p>"为党育人 为国育才"</p>
            </div>
            <div class="researchs-right">
              <div class="right-box">
                <li>"为党育人 为国育才"</li>
                <p>2022-11-2</p>
              </div>
              <div class="right-box">
                <li>"为党育人 为国育才"</li>
                <p>2022-11-2</p>
              </div>
              <div class="right-box">
                <li>"为党育人 为国育才"</li>
                <p>2022-11-2</p>
              </div>
              <div class="right-box">
                <li>"为党育人 为国育才"</li>
                <p>2022-11-2</p>
              </div>
              <div class="right-box">
                <li>"为党育人 为国育才"</li>
                <p>2022-11-2</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="research3">
          查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
        </div>
      </div>
      <!-- 社会服务 -->
      <div class="societyone">
        <div class="society">
          <p class="color">
            SHE HUI FU WU<span class="newcolor">社会服务</span>
          </p>
          <div class="society1">
            <div class="society-left">
              <div class="left-top">
                <img
                  class="image3"
                  src="../第一阶段项目/img/10-min.png"
                  alt=""
                />
              </div>
              <div class="left-bottom">
                <p>形势与政策报告会之“新东欧地缘政治冲突及...</p>
                <p>
                  形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘\政治冲突及形势与政策报告会之“新东欧地缘政治冲突及及…
                </p>
                <p>
                  <img src="../第一阶段项目/img/11-min.png" alt="" /><span
                    >2022-09-29</span
                  >
                </p>
              </div>
            </div>
            <div class="society-right">
              <div class="right-top">
                <img src="../第一阶段项目/img/8-min.png" alt="" />
                <p>红馆</p>
              </div>
              <div class="right-bottom">
                <img src="../第一阶段项目/img/9-min.png" alt="" />
                <p>心理健康中心</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="news3">
          查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
        </div>
      </div>
      <!-- 主题活动 -->
      <div class="topic">
        <div class="news">
          <p class="color">
            ZHU TI HUO DONG<span class="newcolor">主题活动</span>
          </p>
        </div>
        <div class="all">
          <div class="news-bottom">
            <div class="center">
              <div class="center-top">
                <img src="../第一阶段项目/img/12-min.png" alt="" />
                <p>山东城院"五心工程"温暖校园</p>
              </div>
              <div class="center-bottom">
                <p>3月24日,一场别开生面的平台通过网络直播的形式拉开帷幕...</p>
              </div>
            </div>
            <div class="center">
              <div class="center-top">
                <img src="../第一阶段项目/img/13-min.png" alt="" />
                <p>划重点!一图读懂山东城院“十四五”发 展规划</p>
              </div>
              <div class="center-bottom">
                <p>
                  3月20日下午,烟台市高新区管委副主任李如鹏、市教育局高新区分局..
                </p>
              </div>
            </div>
            <div class="center">
              <div class="center-top">
                <img src="../第一阶段项目/img/13-min.png" alt="" />
                <p>划重点!一图读懂山东城院“十四五”发 展规划</p>
              </div>
              <div class="center-bottom">
                <p>
                  3月20日下午,烟台市高新区管委副主任李如鹏、市教育局高新区分局..
                </p>
              </div>
            </div>
            <div class="center">
              <div class="center-top">
                <img src="../第一阶段项目/img/13-min.png" alt="" />
                <p>划重点!一图读懂山东城院“十四五”发 展规划</p>
              </div>
              <div class="center-bottom">
                <p>
                  3月20日下午,烟台市高新区管委副主任李如鹏、市教育局高新区分局..
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="news3">
          查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
        </div>
      </div>
      <!-- 马院风采 -->
      <div class="mien">
        <div class="mien-title">
          <div class="mien-title1">MA YUAN FENG CAI</div>
          <div class="mien-title2">马院风采</div>
        </div>
        <div class="mien-center">
          <div class="swiper mySwiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/1.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/2.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/3.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/4.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/5.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/6.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/7.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/8.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="../第一阶段项目/img/9.jpg" alt="" />
              </div>
            </div>
            <!-- <div class="swiper-pagination"></div> -->
          </div>
        </div>
        <div class="mien-bottom">
          <text class="mien-bottom1">友情链接：</text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
          <text class="mien-bottom2"><a href="#">山东教育局</a></text>
        </div>
        <div class="mien-photo">
          <img src="../第一阶段项目/img/10.jpg" alt="" />
          <img src="../第一阶段项目/img/1.jpg" alt="" />
          <img src="../第一阶段项目/img/2.jpg" alt="" />
          <img src="../第一阶段项目/img/3.jpg" alt="" />
        </div>
        <!-- 查看更多 -->
        <div class="news3">
          查看更多<img src="../第一阶段项目/img/4-min.png" alt="" />
        </div>
      </div>
      <!-- 底部 -->
      <div class="foot">
        <div class="foottop">
          <div class="foot1">
            <div class="foot1-1">
              <img src="../第一阶段项目/img/2-min.png" alt="" />
            </div>
            <div class="foot1-2">
              <p>
                地址:&nbsp;&nbsp; 山东省烟台市高新区海天路1001号
                &nbsp;&nbsp;&nbsp;办公室电话:0535-293876
              </p>
            </div>
            <div class="foot1-3">
              <img src="../第一阶段项目/img/收款码.jpg" alt="" />
            </div>
          </div>
        </div>
        <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
      </div>
    </div>
  </body>
  <script>
    // 轮播图
    var mySwiper = new Swiper(".swiper", {
      autoplay: {
        delay: 2000,
      },
      loop: true, //循环模式选项// 如果需要滚动条
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
  <script>
    var swiper = new Swiper(".mySwiper2", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      autoplay: {
        delay: 2000,
      },
    });
  </script>
</html>