产品中心

css/about.css

@@ -48,7 +48,9 @@
   text-align: center;
   margin-bottom: 0.4rem;
 }
-
+.area_client{
+  margin-top:1rem ;
+}
 .area_comm p {
   color: #000000;
   font-size: 0.16rem;
@@ -136,8 +138,8 @@
   box-sizing: border-box;
 }
 .area_fs img {
-  width: 0.9rem;
-  height: 0.8rem;
+  width: 0.88rem;
+  height: 0.88rem;
   margin: 0.4rem auto 0.2rem;
 }
 .area_fs div {

css/comm.css

@@ -35,4 +35,25 @@ body {
 }
 .footer_root {
   background-color: #F5F7F9;
+}
+.header_info {
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 13rem;
+  height: 0.84rem;
+  color: white;
+}
+
+.header_title {
+  font-size: 0.36rem;
+  font-weight: 700;
+}
+
+.header_stitle {
+  padding-top: 0.3rem;
+  font-size: 0.16rem;
 }

css/product.css

@@ -37,10 +37,9 @@
  margin:0 auto;
  padding: 1rem 0 0.4rem;
 }
-.area_title{
-  color: #000000;
-  letter-spacing: 0.01rem;
+.area_titles{
   font-size: 0.4rem;
+  color: #333333;
   font-weight: bold;
   text-align: center;
   margin-bottom: 0.4rem;
@@ -61,7 +60,7 @@
   justify-content: space-between;
 }
 .area_item{
-  height: 3.3rem;
+  height: 3rem;
   border-radius: 0.1rem;
   background: #fefeffff;
   border: 1px solid #f1f4fc;
@@ -223,4 +222,220 @@
 }
 .exam_slide span{
   position: absolute;
+}
+.area_client {
+  margin-top: 1rem;
+}
+.area_top {
+  display: flex;
+}
+
+.area_left {
+  flex: 3;
+  text-align: right;
+}
+
+.area_num {
+  color: #2d8cf0;
+  font-weight: bold;
+  font-size: 0.48rem;
+}
+
+.area_tit {
+  color: #333333;
+  font-weight: bold;
+  font-size: 0.18rem;
+  line-height: 0.6rem;
+}
+
+.area_jia {
+  color: #2d8cf0;
+  font-weight: bold;
+  font-size: 0.36rem;
+  margin-top: -0.1rem;
+}
+
+.area_com {
+  color: #333333;
+  font-size: 0.16rem;
+  line-height: 0.3rem;
+  text-align: left;
+}
+
+.area_right {
+  flex: 3;
+  text-align: left;
+}
+
+.area_spacing {
+  padding-top: 0.3rem;
+  height: 2.1rem;
+  display: flex;
+  flex-direction: column;
+}
+.area_li{
+  display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    margin-bottom: 0.2rem;
+}
+.area_lis{
+  display: flex;
+    align-items: center;
+    margin-bottom: 0.2rem;
+}
+.area_title{
+  color: #333333;
+  font-size: 0.18rem;
+  font-weight: bold;
+  margin-left: 0.1rem;
+}
+.area_top img {
+  width: 5rem;
+  height: 5rem;
+  margin: 0 0.6rem;
+}
+.area_spacing img {
+  width: 0.3rem;
+  height: 0.3rem;
+  margin: 0;
+}
+.area_approve {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.area_bot {
+  margin-top: 0.3rem;
+}
+.bot_con{
+  width: 3rem;
+  margin: 0 auto;
+}
+.bot_con img{
+  width: 0.3rem;
+    height: 0.3rem;
+}
+.area_teaching{
+  display: flex;
+  margin: 1rem 0 0.4rem;
+}
+.teach_item{
+  padding: 0.6rem;
+  box-sizing: border-box;
+  height: 6.4rem;
+}
+.teach_title{
+  display: inline-block;
+  line-height: 0.38rem;
+  width: 1rem;
+  height: 0.34rem;
+  border-radius: 0.2rem;
+  border: 2px solid #333333;
+  color: #000000;
+  font-weight: bold;
+  font-size: 0.2rem;
+  text-align: center;
+  margin-bottom: 0.3rem;
+}
+.teach_comm{
+  color: #333333;
+  font-size: 0.16rem;
+  line-height: 0.3rem;
+}
+.teach_left{
+  background-image: url("../img/product/teach_left.png");
+    background-size: cover;
+}
+.teach_centre {
+  background-image: url("../img/product/teach_centre.png");
+  background-size: cover;
+}
+.teach_right {
+  background-image: url("../img/product/teach_right.png");
+  background-size: cover;
+}
+.area_ques{
+  width: 100%;
+  background-image: url("../img/product/ques.png");
+  background-size: cover;
+}
+.ques_content{
+  width: 100%;
+  height: 7rem;
+  position: relative;
+}
+.ques_item{
+  width: 2.4rem;
+  position: absolute;
+}
+.ques_left{
+ top: 4rem;
+ left: 2.4rem;
+}
+.ques_centre {
+  top: 2.2rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ques_centre .ques_title{
+  text-align: center;
+}
+.ques_right {
+  width: 2rem;
+  top: 4rem;
+  right: 2.4rem;
+}
+.ques_right .ques_title{
+  text-align: right;
+}
+.ques_title{
+  color: #333333;
+  font-weight: bold;
+  font-size: 0.28rem;
+  margin-bottom: 0.1rem;
+}
+.ques_comm {
+  color: #333333;
+  font-size: 0.16rem;
+  line-height: 0.3rem;
+}
+.Microcourse{
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.Microcourse .mic_pig{
+  width: 7rem;
+  height: 5rem;
+}
+.mic_item{
+  width: 4.4rem;
+  padding-right: 0.4rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.2rem;
+}
+.mic_title{
+  color: #333333;
+  font-size: 0.26rem;
+  margin-bottom: 0.2rem;
+}
+.mic_comm{
+  color: #666666;
+  font-size: 0.16rem;
+  line-height: 0.3rem;
+}
+.mic_item img{
+  margin: 0 0.4rem;
+  width: 0.46rem;
+  height: 0.46rem;
+}
+.mic_item:hover{
+  cursor: pointer;
+  border-radius:0.04rem ;
+  box-shadow: 0 0 0.12rem #0000001a;
+    transform: translate(0, -4px);
 }

css/service.css

@@ -100,4 +100,7 @@
     font-size: 0.16rem;
     text-align: center;
     line-height: 0.4rem;
+}
+.ser_swiper_container{
+  margin: 0.5rem 0;
 }

css/trial.css

@@ -54,7 +54,7 @@ body{
   margin: 0;
 }
 .submit_data{
-  margin-top: 0.4rem;
+  margin-top: 0.6rem;
 }
 .submit_list{
   display: flex;

js/about.js

@@ -1,228 +1,232 @@
-var datalist = [
-  { time: 2023 },
-  { time: 2022 },
-  { time: 2021 },
-  { time: 2020 },
-  { time: 2019 },
-  { time: 2018 },
-  { time: 2017 }
-];
+$(function () {
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
+  var datalist = [
+    { time: 2023 },
+    { time: 2022 },
+    { time: 2021 },
+    { time: 2020 },
+    { time: 2019 },
+    { time: 2018 },
+    { time: 2017 }
+  ];
 
-// 请求接口前缀 3.6.1 中文列表
-$.ajax({
-  type: "POST",
-  url: $.baseUrl + "dh/listc",
-  dataType: "json",
-  async: false,
-  contentType: "application/json; charset=utf-8",
-  success: function (data) {
-    if (data.code === 0) {
-      datalist = data.obj;
-    } else {
-      alert(data.msg);
+  // 请求接口前缀 3.6.1 中文列表
+  $.ajax({
+    type: "POST",
+    url: $.baseUrl + "dh/listc",
+    dataType: "json",
+    async: false,
+    contentType: "application/json; charset=utf-8",
+    success: function (data) {
+      if (data.code === 0) {
+        datalist = data.obj;
+      } else {
+        alert(data.msg);
+      }
     }
-  }
-});
-var html = "";
-$.each(datalist, (idx, item) => {
-  html += `<div class="round_q" index = "${idx + 1}">
+  });
+  var html = "";
+  $.each(datalist, (idx, item) => {
+    html += `<div class="round_q" index = "${idx + 1}">
                     <div class="round_item">
                     <div class="round_i"></div>
                     <div class="round_d">${item.dhyear || item.time}</div>
                   </div></div>`;
-});
-$(".rounds").width(datalist.length * 2.34 + "rem");
-$(".rounds").html(html);
-$(".round_q:first").addClass("active"); //默认第一个添加背景色
-function showdata(index) {
-  var list = datalist[index].details,
-    html = '<div class="dev_list">';
-  if (!list || list.length == 0) {
-    return;
-  }
-  $.each(list, (idx, item) => {
-    if (idx % 4 == 0 && idx) {
-      html += '</div><div class="dev_list">';
+  });
+  $(".rounds").width(datalist.length * 2.34 + "rem");
+  $(".rounds").html(html);
+  $(".round_q:first").addClass("active"); //默认第一个添加背景色
+  function showdata(index) {
+    var list = datalist[index].details,
+      html = '<div class="dev_list">';
+    if (!list || list.length == 0) {
+      return;
     }
+    $.each(list, (idx, item) => {
+      if (idx % 4 == 0 && idx) {
+        html += '</div><div class="dev_list">';
+      }
 
-    html += `<div class="dev_item" title="${item.content}">
+      html += `<div class="dev_item" title="${item.content}">
                 <span>${item.dhmonth}</span> &nbsp;-&nbsp; ${item.content}
               </div>`;
-  });
-  if (list.length < 9) {
-    html += '</div><div class="dev_list">';
-  } else if (list.length < 5) {
-    html += '</div><div class="dev_list"></div><div class="dev_list"></div>';
-  }
-  $(".develop_data").html(html);
-}
-//获取元素
-var divwidth = $(".round_q:first").width();
-var list = $(".rounds");
-var buts = $(".round_q");
-var prev = $(".leftjt");
-var next = $(".rightjt");
+    });
+    if (list.length < 9) {
+      html += '</div><div class="dev_list">';
+    } else if (list.length < 5) {
+      html += '</div><div class="dev_list"></div><div class="dev_list"></div>';
+    }
+    $(".develop_data").html(html);
+  }
+  //获取元素
+  var divwidth = $(".round_q:first").width();
+  var list = $(".rounds");
+  var buts = $(".round_q");
+  var prev = $(".leftjt");
+  var next = $(".rightjt");
 
-var index = 1; //存放当前显示的图片的下标
-var len = 5; //显示数量
-var interval = 5000; //位移时间间隔
-var timer;
-var offsetpx = (datalist.length - len) * divwidth; //可偏移度
-var offleft = 0; //当前偏移量
-function animate(offset) {
-  if (datalist.length <= 5) {
-    return;
-  }
-  var left = parseInt(list.css("left")) + offset;
-  var absnum = Math.abs(offset);
-  if (left < 0 - offsetpx) {
-    //右侧没有数据时不偏移
-    return;
-  }
-  // 边界判断
-  if (offset > 0) {
-    offset = "+=" + offset;
-    offleft = offleft + absnum;
-  } else {
-    offset = "-=" + Math.abs(offset);
-    offleft = offleft - absnum;
-  }
-  if (index < 5 && offleft >= 0) {
-    return;
-  }
-  list.animate({ left: offset }, 300, function () {
-    if (left > -200) {
-      // list.css("left", (0 - offset) * len);
+  var index = 1; //存放当前显示的图片的下标
+  var len = 5; //显示数量
+  var interval = 5000; //位移时间间隔
+  var timer;
+  var offsetpx = (datalist.length - len) * divwidth; //可偏移度
+  var offleft = 0; //当前偏移量
+  function animate(offset) {
+    if (datalist.length <= 5) {
+      return;
     }
-    if (index == datalist.length) {
-      //轮播最后一条
-      offset = 0 - (datalist.length - 5) * absnum;
-      offleft = offset;
-      list.css("left", offset);
+    var left = parseInt(list.css("left")) + offset;
+    var absnum = Math.abs(offset);
+    if (left < 0 - offsetpx) {
+      //右侧没有数据时不偏移
+      return;
     }
-  });
-}
-//点击高亮滚动
-function animates(offset) {
-  if (datalist.length <= 5) {
-    return;
-  }
-  var left = parseInt(list.css("left")) + offset; //获取元素属性
-  if (index < 6 && left >= 0) {
-    list.animate({ left: 0 }, 300, function () {});
-    return;
-  }
-  // 边界判断
-  if (left < 0 - offsetpx) {
-    offset = 0 - offsetpx;
-  } else {
+    // 边界判断
     if (offset > 0) {
-      offset = "+=" + divwidth;
-      offleft = offleft;
+      offset = "+=" + offset;
+      offleft = offleft + absnum;
     } else {
-      offset = "-=" + divwidth;
-      offleft = offset;
+      offset = "-=" + Math.abs(offset);
+      offleft = offleft - absnum;
     }
+    if (index < 5 && offleft >= 0) {
+      return;
+    }
+    list.animate({ left: offset }, 300, function () {
+      if (left > -200) {
+        // list.css("left", (0 - offset) * len);
+      }
+      if (index == datalist.length) {
+        //轮播最后一条
+        offset = 0 - (datalist.length - 5) * absnum;
+        offleft = offset;
+        list.css("left", offset);
+      }
+    });
+  }
+  //点击高亮滚动
+  function animates(offset) {
+    if (datalist.length <= 5) {
+      return;
+    }
+    var left = parseInt(list.css("left")) + offset; //获取元素属性
+    if (index < 6 && left >= 0) {
+      list.animate({ left: 0 }, 300, function () {});
+      return;
+    }
+    // 边界判断
+    if (left < 0 - offsetpx) {
+      offset = 0 - offsetpx;
+    } else {
+      if (offset > 0) {
+        offset = "+=" + divwidth;
+        offleft = offleft;
+      } else {
+        offset = "-=" + divwidth;
+        offleft = offset;
+      }
+    }
+    list.animate({ left: offset }, 300, function () {});
   }
-  list.animate({ left: offset }, 300, function () {});
-}
-//亮起小圆点
-function showButton() {
-  //当前图片的小圆点亮起，其他小圆点不亮
-  buts
-    .eq(index - 1)
-    .addClass("active")
-    .siblings()
-    .removeClass("active");
-}
-
-// 鼠标离开图片区域时，轮播继续
-function play() {
-  if (datalist.length <= 5) {
-    return;
-  }
-  timer = setTimeout(function () {
-    next.trigger("click");
-    play();
-  }, interval);
-}
-
-//鼠标进入图片区域时，停止轮播
-function stop() {
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
+  //亮起小圆点
+  function showButton() {
+    //当前图片的小圆点亮起，其他小圆点不亮
+    buts
+      .eq(index - 1)
+      .addClass("active")
+      .siblings()
+      .removeClass("active");
   }
-}
 
-// 右按钮点击事件
-next.bind("click", function () {
-  if (datalist.length <= 5) {
-    return;
-  }
-  // 判断当前是否在动画
-  if (list.is(":animated")) {
-    return;
+  // 鼠标离开图片区域时，轮播继续
+  function play() {
+    if (datalist.length <= 5) {
+      return;
+    }
+    timer = setTimeout(function () {
+      next.trigger("click");
+      play();
+    }, interval);
   }
 
-  // 判断当前图片是否是最后一张
-  if (index == datalist.length) {
-    index = 1;
-    offleft = 0;
-    list.animate({ left: 0 }, 300, () => {});
-  } else {
-    index += 1;
+  //鼠标进入图片区域时，停止轮播
+  function stop() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
   }
-  animate(0 - divwidth);
-  showdata(index - 1);
-  showButton();
-  stop();
-});
 
-// 左按钮事件
-prev.bind("click", function () {
-  if (datalist.length <= 5) {
-    return;
-  }
-  // 判断当前是否在动画
-  if (list.is(":animated")) {
-    return;
-  }
+  // 右按钮点击事件
+  next.bind("click", function () {
+    if (datalist.length <= 5) {
+      return;
+    }
+    // 判断当前是否在动画
+    if (list.is(":animated")) {
+      return;
+    }
 
-  // 判断当前图片是否是第一张
-  if (index == 1) {
-    index = datalist.length;
-  } else {
-    index -= 1;
-  }
-  stop();
-  animate(divwidth);
-  showdata(index - 1);
-  showButton();
-});
+    // 判断当前图片是否是最后一张
+    if (index == datalist.length) {
+      index = 1;
+      offleft = 0;
+      list.animate({ left: 0 }, 300, () => {});
+    } else {
+      index += 1;
+    }
+    animate(0 - divwidth);
+    showdata(index - 1);
+    showButton();
+    stop();
+  });
 
-// 小圆点点击事件
-buts.each(function () {
-  $(this).bind("click", function () {
-    // 判断当前是否在进行动画
-    if (list.is(":animated") || $(this).attr("class") == "on") {
+  // 左按钮事件
+  prev.bind("click", function () {
+    if (datalist.length <= 5) {
       return;
     }
-    var myIndex = parseInt($(this).attr("index"));
-    if (myIndex == index) {
+    // 判断当前是否在动画
+    if (list.is(":animated")) {
       return;
     }
-    //计算偏移量
-    var offset = (0 - divwidth) * (myIndex - index);
-    index = myIndex;
-    animates(offset);
 
+    // 判断当前图片是否是第一张
+    if (index == 1) {
+      index = datalist.length;
+    } else {
+      index -= 1;
+    }
+    stop();
+    animate(divwidth);
     showdata(index - 1);
     showButton();
-    stop();
   });
-});
-showdata(0);
-$(".develop_container").hover(stop, play);
 
-play();
+  // 小圆点点击事件
+  buts.each(function () {
+    $(this).bind("click", function () {
+      // 判断当前是否在进行动画
+      if (list.is(":animated") || $(this).attr("class") == "on") {
+        return;
+      }
+      var myIndex = parseInt($(this).attr("index"));
+      if (myIndex == index) {
+        return;
+      }
+      //计算偏移量
+      var offset = (0 - divwidth) * (myIndex - index);
+      index = myIndex;
+      animates(offset);
+
+      showdata(index - 1);
+      showButton();
+      stop();
+    });
+  });
+  showdata(0);
+  $(".develop_container").hover(stop, play);
+
+  play();
+});

js/product.js

@@ -1,85 +1,89 @@
-//获取元素
-var divheight = $(".exam_one").height()-70;
-var container = $(".exam_container");
-var list = $(".show_exam");
-var buts = $(".exam_item");
-var index = 1; //存放当前显示的图片的下标
-var imgnum = 3; // 图片数量
-var len = 1; //显示数量
-var interval = 5000; //位移时间间隔
-var timer;
+$(function () {
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
+  //获取元素
+  var divheight = $(".exam_one").height() - 70;
+  var container = $(".exam_container");
+  var list = $(".show_exam");
+  var buts = $(".exam_item");
+  var index = 1; //存放当前显示的图片的下标
+  var imgnum = 3; // 图片数量
+  var len = 1; //显示数量
+  var interval = 5000; //位移时间间隔
+  var timer;
 
-function animate(offset) {
-  var top = parseInt(list.css("top")) + offset;
-  console.log(list.css("top"));
-  var absnum = Math.abs(offset);
-  index++
- 
-  // 边界判断
-  // if (offset > 0) {
-  //   offset = "+=" + offset;
-  // } else {
-  //   offset = "-=" + Math.abs(offset);
-  // }
-  offset = "-=" + Math.abs(offset);
-  if(index == 6){
-    index = 1;
-    offset=0;
-    console.log("最后一个");
-  }
-  console.log("当前索引",index, top, offset)
-  list.animate({ top: offset }, 300, function () {
-    if (top > -200) {
-    }
-  });
-}
-//亮起小圆点
-function showButton() {
-  console.log("亮起小圆点", index);
-  //当前图片的小圆点亮起，其他小圆点不亮
-  buts
-    .eq(index - 1)
-    .addClass("active")
-    .siblings()
-    .removeClass("active");
-}
-console.log(divheight);
-// 鼠标离开图片区域时，轮播继续
-function play() {
-  console.log("鼠标离开");
-  timer = setTimeout(function () {
-    animate(divheight);
-    play();
-  }, interval);
-}
+  function animate(offset) {
+    var top = parseInt(list.css("top")) + offset;
+    console.log(list.css("top"));
+    var absnum = Math.abs(offset);
+    index++;
 
-//鼠标进入图片区域时，停止轮播
-function stop() {
-  console.log("鼠标进入");
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
-  }
-}
-// 点击事件
-buts.each(function () {
-  $(this).bind("click", function () {
-    // 判断当前是否在进行动画
-    if (list.is(":animated") || $(this).attr("class") == "on") {
-      return;
+    // 边界判断
+    // if (offset > 0) {
+    //   offset = "+=" + offset;
+    // } else {
+    //   offset = "-=" + Math.abs(offset);
+    // }
+    offset = "-=" + Math.abs(offset);
+    if (index == 6) {
+      index = 1;
+      offset = 0;
+      console.log("最后一个");
     }
-    var myIndex = parseInt($(this).attr("index"));
-    if (myIndex == index) {
-      return;
+    console.log("当前索引", index, top, offset);
+    list.animate({ top: offset }, 300, function () {
+      if (top > -200) {
+      }
+    });
+  }
+  //亮起小圆点
+  function showButton() {
+    console.log("亮起小圆点", index);
+    //当前图片的小圆点亮起，其他小圆点不亮
+    buts
+      .eq(index - 1)
+      .addClass("active")
+      .siblings()
+      .removeClass("active");
+  }
+  console.log(divheight);
+  // 鼠标离开图片区域时，轮播继续
+  function play() {
+    console.log("鼠标离开");
+    timer = setTimeout(function () {
+      animate(divheight);
+      play();
+    }, interval);
+  }
+
+  //鼠标进入图片区域时，停止轮播
+  function stop() {
+    console.log("鼠标进入");
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
     }
-    //计算偏移量
-    var offset = (0 - divwidth) * (myIndex - index);
-    index = myIndex;
-    animates(offset);
-    showButton();
-    stop();
+  }
+  // 点击事件
+  buts.each(function () {
+    $(this).bind("click", function () {
+      // 判断当前是否在进行动画
+      if (list.is(":animated") || $(this).attr("class") == "on") {
+        return;
+      }
+      var myIndex = parseInt($(this).attr("index"));
+      if (myIndex == index) {
+        return;
+      }
+      //计算偏移量
+      var offset = (0 - divwidth) * (myIndex - index);
+      index = myIndex;
+      animates(offset);
+      showButton();
+      stop();
+    });
   });
-});
-container.hover(stop, play);
+  container.hover(stop, play);
 
-play();
+  play();
+});

js/service.js

@@ -1,58 +1,61 @@
-// 6.5.1 中文列表 学校图标
-var school_logo = [],
-  html_logo = "",
-  html_data = "";
-school_data = [];
-$.ajax({
-  type: "POST",
-  url: $.baseUrl + "/sl/listc",
-  dataType: "json",
-  async: false,
-  contentType: "application/json; charset=utf-8",
-  success: function (data) {
-    if (data.code === 0) {
-      school_logo = data.obj;
-      $.each(school_logo, (idx, item) => {
-        html_logo += ` <div class="ser_sc_info">
+$(function () {
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
+  // 6.5.1 中文列表 学校图标
+  var school_logo = [],
+    html_logo = "",
+    html_data = "";
+  school_data = [];
+  $.ajax({
+    type: "POST",
+    url: $.baseUrl + "/sl/listc",
+    dataType: "json",
+    async: false,
+    contentType: "application/json; charset=utf-8",
+    success: function (data) {
+      if (data.code === 0) {
+        school_logo = data.obj;
+        $.each(school_logo, (idx, item) => {
+          html_logo += ` <div class="ser_sc_info">
           <img src="${$.showImageUrl}${item.schoollogo}" />
           <div>${item.schoolname}</div>
         </div>`;
-      });
-      $(".ser_school").html(html_logo);
-    } else {
-      alert(data.msg);
+        });
+        $(".ser_school").html(html_logo);
+      } else {
+        alert(data.msg);
+      }
     }
-  }
-});
-//5.5.1 中文列表  服务数据
-$.ajax({
-  type: "POST",
-  url: $.baseUrl + "/sc/listc",
-  dataType: "json",
-  data: JSON.stringify({
-    size: 30
-  }),
-  async: false,
-  contentType: "application/json; charset=utf-8",
-  success: function (data) {
-    if (data.code === 0) {
-      school_data = data.obj;
-      school_data = school_data.concat(data.obj);
-      $.each(school_data, (idx, item) => {
-        html_data += ` <div class="swiper-slide ser_con">
+  });
+  //5.5.1 中文列表  服务数据
+  $.ajax({
+    type: "POST",
+    url: $.baseUrl + "/sc/listc",
+    dataType: "json",
+    data: JSON.stringify({
+      size: 30
+    }),
+    async: false,
+    contentType: "application/json; charset=utf-8",
+    success: function (data) {
+      if (data.code === 0) {
+        school_data = data.obj;
+        school_data = school_data.concat(data.obj);
+        $.each(school_data, (idx, item) => {
+          html_data += ` <div class="swiper-slide ser_con">
           <img src="${$.showImageUrl}${item.scpic}" />
           <div>${item.scname}</div>
         </div>`;
-      });
-      $(".swiper-wrapper").html(html_data);
-    } else {
-      alert(data.msg);
+        });
+        $(".swiper-wrapper").html(html_data);
+      } else {
+        alert(data.msg);
+      }
     }
-  }
-});
-var serSwiper = new Swiper(".ser_swiper_container.swiper-container", {
-  slidesPerView: 3,
-  centeredSlides: true,
-  loop: true,
-  autoplay: 3000
+  });
+  var serSwiper = new Swiper(".ser_swiper_container.swiper-container", {
+    slidesPerView: 3,
+    loop: true,
+    autoplay: 3000
+  });
 });

js/trial.js

@@ -1,90 +1,186 @@
-$(".err_account").hide();
-$(".err_phone").hide();
-$(".err_mailbox").hide();
-//姓名
-$("#account").blur(() => {
-  let name = $("#account").val();
-  if (!name) {
-    $(".err_account").show();
-  }
-});
-$("#account").focus(() => {
+$(function () {
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
   $(".err_account").hide();
-});
-//联系电话
-$("#phone").blur(() => {
-  let phone = $("#phone").val();
-  if (!phone) {
-    $(".err_phone").show();
-  }
-});
-$("#phone").focus(() => {
   $(".err_phone").hide();
-});
-
-//邮箱
-$("#mailbox").blur(() => {
-  let mailbox = $("#mailbox").val();
-  var filter =
-    /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
-  let blnTest = filter.test(mailbox);
-  if (!blnTest) {
-    $(".err_mailbox").show();
-  }
-});
-$("#mailbox").focus(() => {
   $(".err_mailbox").hide();
-});
-$("#mailbox").bind("input propertychange change", function (event) {
-  let mailbox = $("#mailbox").val();
-  var filter =
-    /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
-  let blnTest = filter.test(mailbox);
-  if (!blnTest) {
-    $(".err_mailbox").show();
-  } else {
+  //姓名
+  $("#account").blur(() => {
+    let name = $("#account").val();
+    if (!name) {
+      $(".err_account").show();
+    }
+  });
+  $("#account").focus(() => {
+    $(".err_account").hide();
+  });
+  //联系电话
+  $("#phone").blur(() => {
+    let phone = $("#phone").val();
+    if (!phone) {
+      $(".err_phone").show();
+    }
+  });
+  $("#phone").focus(() => {
+    $(".err_phone").hide();
+  });
+
+  //邮箱
+  $("#mailbox").blur(() => {
+    let mailbox = $("#mailbox").val();
+    var filter =
+      /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
+    let blnTest = filter.test(mailbox);
+    if (!blnTest) {
+      $(".err_mailbox").show();
+    }
+  });
+  $("#mailbox").focus(() => {
     $(".err_mailbox").hide();
-  }
-});
-//提交
-var Loading = false;
+  });
+  $("#mailbox").bind("input propertychange change", function (event) {
+    let mailbox = $("#mailbox").val();
+    var filter =
+      /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
+    let blnTest = filter.test(mailbox);
+    if (!blnTest) {
+      $(".err_mailbox").show();
+    } else {
+      $(".err_mailbox").hide();
+    }
+  });
+  //提交
+  var Loading = false;
 
-$(".btn").click(() => {
-  if (Loading) {
-    return;
-  }
-  let name = $("#account").val();
-  if (!name) {
-    $(".err_account").show();
-    return;
-  }
-  let phone = $("#phone").val();
-  if (!phone) {
-    $(".err_phone").show();
-    return;
-  }
-  var data = {
-    account: $("#account").val(),
-    phone: $("#phone").val(),
-    mailbox: $("#mailbox").val(),
-    commcomm: $("#comm").val()
-  };
-  Loading = true;
-  //7.1.2 申请试用--添加
-  $.ajax({
-    type: "POST",
-    url: $.baseUrl + "fc/add",
-    dataType: "json",
-    async: false,
-    data: JSON.stringify(data),
-    contentType: "application/json; charset=utf-8",
-    success: function (data) {
-      Loading = false;
-      if (data.code === 0) {
-        alert("申请成功");
-      } else {
-        alert(data.msg);
+  $(".btn").click(() => {
+    if (Loading) {
+      return;
+    }
+    let name = $("#account").val();
+    if (!name) {
+      $(".err_account").show();
+      return;
+    }
+    let phone = $("#phone").val();
+    if (!phone) {
+      $(".err_phone").show();
+      return;
+    }
+    var data = {
+      account: $("#account").val(),
+      phone: $("#phone").val(),
+      mailbox: $("#mailbox").val(),
+      commcomm: $("#comm").val()
+    };
+    Loading = true;
+    //7.1.2 申请试用--添加
+    $.ajax({
+      type: "POST",
+      url: $.baseUrl + "fc/add",
+      dataType: "json",
+      async: false,
+      data: JSON.stringify(data),
+      contentType: "application/json; charset=utf-8",
+      success: function (data) {
+        Loading = false;
+        if (data.code === 0) {
+          alert("申请成功");
+        } else {
+          alert(data.msg);
+        }
       }
+    });
+  });
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
+  $(".err_account").hide();
+  $(".err_phone").hide();
+  $(".err_mailbox").hide();
+  //姓名
+  $("#account").blur(() => {
+    let name = $("#account").val();
+    if (!name) {
+      $(".err_account").show();
+    }
+  });
+  $("#account").focus(() => {
+    $(".err_account").hide();
+  });
+  //联系电话
+  $("#phone").blur(() => {
+    let phone = $("#phone").val();
+    if (!phone) {
+      $(".err_phone").show();
+    }
+  });
+  $("#phone").focus(() => {
+    $(".err_phone").hide();
+  });
+
+  //邮箱
+  $("#mailbox").blur(() => {
+    let mailbox = $("#mailbox").val();
+    var filter =
+      /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
+    let blnTest = filter.test(mailbox);
+    if (!blnTest) {
+      $(".err_mailbox").show();
+    }
+  });
+  $("#mailbox").focus(() => {
+    $(".err_mailbox").hide();
+  });
+  $("#mailbox").bind("input propertychange change", function (event) {
+    let mailbox = $("#mailbox").val();
+    var filter =
+      /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
+    let blnTest = filter.test(mailbox);
+    if (!blnTest) {
+      $(".err_mailbox").show();
+    } else {
+      $(".err_mailbox").hide();
     }
   });
+  //提交
+  var Loading = false;
+
+  $(".btn").click(() => {
+    if (Loading) {
+      return;
+    }
+    let name = $("#account").val();
+    if (!name) {
+      $(".err_account").show();
+      return;
+    }
+    let phone = $("#phone").val();
+    if (!phone) {
+      $(".err_phone").show();
+      return;
+    }
+    var data = {
+      account: $("#account").val(),
+      phone: $("#phone").val(),
+      mailbox: $("#mailbox").val(),
+      commcomm: $("#comm").val()
+    };
+    Loading = true;
+    //7.1.2 申请试用--添加
+    $.ajax({
+      type: "POST",
+      url: $.baseUrl + "fc/add",
+      dataType: "json",
+      async: false,
+      data: JSON.stringify(data),
+      contentType: "application/json; charset=utf-8",
+      success: function (data) {
+        Loading = false;
+        if (data.code === 0) {
+          alert("申请成功");
+        } else {
+          alert(data.msg);
+        }
+      }
+    });
+  });
 });

sections/about.html

@@ -11,12 +11,14 @@
     <title>关于我们</title>
   </head>
   <body>
+    <div class="header_root bg_white"></div>
     <div class="ab_header">
       <img src="../img/about/banner.png" />
-      <div class="suspension">
-        <div>关于我们</div>
-        <p>
-          适用于大班课、培训直播、课堂直播、空中课堂等在线教培场景，师生可随时随地开展教学活动
+      <div class="header_info">
+        <div class="header_title">关于我们</div>
+        <p class="header_stitle">
+          以“ 大数据 + Ai
+          ”技术为依托，整合优质教育资源，为各类教育教学场景提供辅助的智慧教育平台
         </p>
       </div>
     </div>
@@ -26,15 +28,15 @@
           <div class="area_title">星火燎原</div>
           <div class="area_comm">
             <p>
-              星火云鸽是河南星火燎原软件科技有限公司旗下自主品牌，公司成立于2017年6月，坐落于郑州龙子湖智慧岛。
+              星火燎原是一家业内领先的优质教育解决方案提供商，用创新的产品和服务为教育现代化做出贡献。
             </p>
             <p>
-              我们秉承"依托教育、研究教育、服务教育”的理念，致力于智慧教育综合解决方案服务。公司拥有一支以教育教研服务与产品技术研发为主的精英团队，用实力打造具有无缝
-              隙、智能化、可进化的特色教育生态体系，自主研发精准教育大数据平台，向基础教育领域提供教、学、考、评、管系列产品及服务，涵盖校园管理、智慧教学、学情分析系统、升
-              学测评系统等，同时提供教育信息化系统集成服务。
+              星火燎原成立于2017年6月，坐落于郑州龙子湖智慧岛。公司一直秉承"依托教育、研究教育、服务教育”的发展理念，致力于为用户提供完整的信息建设与应用解决方案。
             </p>
             <p>
-              星火科技自成立以来，始终坚持教育以人为本的初心，立志为教育创造一个注重学生个性发展、寓教于乐、和谐融洽、高效智能的快乐世界！
+              星火燎原深度融合校园管理、智慧教学、学情分析、考试测评等系统，精心打造教育大数据平台，并借助平台对数据进行多维度、全方位、立体化的挖掘、采集、分析，通过科
+              学算法，
+              把数据充分应用到智慧教育方面，真正实现为学校、老师、学生和家长提供管理、教学、学习、辅导、沟通交流等方面的精准指导。
             </p>
             <p></p>
           </div>
@@ -65,7 +67,7 @@
               <div class="area_right">
                 <div class="area_spacing">
                   <div class="area_com" style="margin-bottom: 0.5rem">
-                    自主知识产权致力于身份安全
+                    保障自身合法权益
                   </div>
                   <div class="area_tit">其他资质证书</div>
                   <div style="display: flex">
@@ -193,6 +195,7 @@
         </div>
       </div>
     </div>
+    <div class="footer_root"></div>
   </body>
   <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
   <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>

sections/product.html

@@ -11,11 +11,14 @@
     <title>产品中心</title>
   </head>
   <body>
+    <div class="header_root bg_white"></div>
     <div class="pro_header">
       <img src="../img/product/banner.png" />
-      <div class="suspension">
-        <div>产品中心</div>
-        <p>致力于成为优质教育解决方案提供商 教育现代化的推动者</p>
+      <div class="header_info">
+        <div class="header_title">产品中心</div>
+        <p class="header_stitle">
+          致力于成为优质教育解决方案提供商 教育现代化的推动者
+        </p>
       </div>
     </div>
     <div class="pro_content">
@@ -190,7 +193,188 @@
           </div>
         </div>
       </div>
+      <div class="piece piece_color">
+        <div class="piece_item">
+          <div class="area_titles">网课平台</div>
+          <div class="area_comm">
+            <p>
+              真实还原线下教学场景，支持文字、音频、视频直播多种模式，可实现多种互动形式；
+            </p>
+            <p>
+              支持直播回放和统计实时生成；支持一键布置作业及预习且不限形式。
+            </p>
+          </div>
+          <div class="area_client">
+            <div class="area_top">
+              <div class="area_left">
+                <div class="area_spacing">
+                  <div class="area_li">
+                    <div class="area_title">互动多样趣味丰富</div>
+                    <img src="../img/product/cour1.png" />
+                  </div>
+                  <div class="area_com">
+                    以教育、学习为主要应用场景，服务于学校教育教
+                    学与管理、学生学习和生活以及家校互动等方面
+                  </div>
+                </div>
+                <div class="area_spacing">
+                  <div class="area_li">
+                    <div class="area_title">纸笔书写好习惯</div>
+                    <img src="../img/product/cour2.png" />
+                  </div>
+                  <div class="area_com">
+                    教师可进行实时板书，展示解题过程；
+                    对学生优秀或错误答案进行批注，密切 师生关系，促进学生发展
+                  </div>
+                </div>
+              </div>
+              <img src="../img/product/cour0.png" />
+              <div class="area_right">
+                <div class="area_spacing">
+                  <div class="area_lis">
+                    <img src="../img/product/cour3.png" />
+                    <div class="area_title">操作简单易上手</div>
+                  </div>
+                  <div class="area_com">
+                    客户端软硬件统一操作，贴合教师日
+                    常课堂教学习惯，交互简单易学
+                  </div>
+                </div>
+                <div class="area_spacing">
+                  <div class="area_lis">
+                    <img src="../img/product/cour3.png" />
+                    <div class="area_title">影音清晰低延迟</div>
+                  </div>
+                  <div class="area_com">
+                    学生认得清，老师看得清，无拘束
+                    拾音，声音清晰，弱网传输自适应 各种网络
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="area_bot">
+              <div class="bot_con">
+                <div class="area_lis">
+                  <img src="../img/product/cour3.png" />
+                  <div class="area_title">影音清晰低延迟</div>
+                </div>
+                <div class="area_com">
+                  学生认得清，老师看得清，无拘束 拾音，声音清晰，弱网传输自适应
+                  各种网络
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="piece">
+        <div class="piece_item">
+          <div class="area_titles">智慧教学系统</div>
+          <div class="area_comm">
+            <p>
+              融合技术与教学场景，重塑教学流程。为学校打造涵盖课前、课中、课后全场景的智慧课堂
+            </p>
+          </div>
+          <div class="area_teaching">
+            <div class="teach_item teach_left">
+              <div class="teach_title">课前</div>
+              <div class="teach_comm">
+                以精品备课资源为依托，辅助教师 优化教学方案，培养学生预习习惯，
+                提高课堂授课效率。
+              </div>
+            </div>
+            <div class="teach_item teach_centre">
+              <div class="teach_title">课中</div>
+              <div class="teach_comm">
+                提高学生课堂专注度、参与度， 采集过程性学习数据，帮助教师
+                提高教学效率，提高学生知识留 存率。
+              </div>
+            </div>
+            <div class="teach_item teach_right">
+              <div class="teach_title">课后</div>
+              <div class="teach_comm">
+                通过多维数据采集、分析，实现 老师精准“教”、学生精准“学”，
+                助力师生增效减负
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="piece piece_color area_ques">
+        <div class="piece_item">
+          <div class="area_titles">校本资源库</div>
+          <div class="area_comm">
+            <p>
+              包含资源库系统、题库系统、同步视频系统、电子书系统，可提供全面、优质、精细的本地化资源，
+            </p>
+            <p>
+              支持教师在已有资源的基础上进行自定义章节教学，沉淀优质教学方法与内容，从而形成单校的个性化资源库
+            </p>
+          </div>
+          <div class="ques_content">
+            <div class="ques_item ques_left">
+              <div class="ques_title">全面</div>
+              <div class="ques_comm">
+                包含小、初、高各年级全 部章节、重点难点、历年 真题。
+              </div>
+            </div>
+            <div class="ques_item ques_centre">
+              <div class="ques_title">优质</div>
+              <div class="ques_comm">
+                平台资源、校本资源、第三方 资源多方整合精选，更有众多
+                名校资源可供选择。
+              </div>
+            </div>
+            <div class="ques_item ques_right">
+              <div class="ques_title">精细</div>
+              <div class="ques_comm">
+                题库中试题包含答案、解 析、知识点、难度等精细
+                化标签，教师可随时调取 使用，支撑日常备课、教 学、测试。
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="piece">
+        <div class="piece_item">
+          <div class="area_titles">云鸽微课</div>
+          <div class="area_comm">
+            <p>线上课程高效创作工具，助于老师辅导教学</p>
+            <p>
+              实现学生自主学、处处学、随时学精准辅导教学、重难点知识点讲解，支持录屏、截图、导入文档、录制、打印、批注等功能
+            </p>
+          </div>
+          <div class="Microcourse">
+            <div>
+              <div class="mic_item">
+                <img src="../img/product/teacher.png" />
+                <div>
+                  <div class="mic_title">教师维度</div>
+                  <div class="mic_comm">
+                    帮助教师突破教学中的重难点，实现分层教学，让不同层
+                    次的学生都得到应有的提升
+                  </div>
+                </div>
+              </div>
+              <div class="mic_item">
+                <img src="../img/product/student.png" />
+                <div>
+                  <div class="mic_title">教师维度</div>
+                  <div class="mic_comm">
+                    帮助教师突破教学中的重难点，实现分层教学，让不同层
+                    次的学生都得到应有的提升
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <img class="mic_pig" src="../img/product/Pigeon.png" />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+    <div class="footer_root"></div>
   </body>
   <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
   <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>

sections/service.html

@@ -16,11 +16,12 @@
     </style>
   </head>
   <body>
+    <div class="header_root bg_white"></div>
     <div class="ser_header">
       <img src="../img/about/service.png" />
-      <div class="suspension">
-        <div>服务案例</div>
-        <p>云鸽最新资讯，让一切皆有可能</p>
+      <div class="header_info">
+        <div class="header_title">服务案例</div>
+        <p class="header_stitle">聚焦行业资讯，掌握前沿发展脉络</p>
       </div>
     </div>
     <div class="ser_content">
@@ -44,6 +45,7 @@
         </div>
       </div>
     </div>
+    <div class="footer_root"></div>
   </body>
   <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
   <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>

sections/trial.html

@@ -10,11 +10,12 @@
     <title>申请试用</title>
   </head>
   <body>
+    <div class="header_root bg_white"></div>
     <div class="tri_header">
       <img src="../img/about/trial.png" />
-      <div class="suspension">
-        <div>申请试用</div>
-        <p>携手合作 真诚服务</p>
+      <div class="header_info">
+        <div class="header_title">申请试用</div>
+        <p class="header_stitle">携手合作 真诚服务</p>
       </div>
     </div>
     <div class="tri_content">
@@ -72,6 +73,7 @@
         </div>
       </div>
     </div>
+    <div class="footer_root"></div>
   </body>
   <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
   <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>