产品中心

css/about.css

 }
 .area_fs {
   width: 2.8rem;
-  height: 2.8rem;
+  height: 3rem;
   background-color: white;
   color: #333333;
   text-align: center;
 .area_fs img {
   width: 0.9rem;
   height: 0.8rem;
-  margin: 0 auto 0;
+  margin: 0.4rem auto 0.2rem;
 }
 .area_fs div {
   font-size: 0.18rem;
 .rounds {
   width: 100%;
   position: absolute;
-  top: 25%;
+  top: 30%;
   left: 0;
   transform: translate(0, -50%);
   white-space: nowrap;
 }
 .dev_item span{
   color: #016cff;
+}
+.bot_fs img{
+  margin-bottom: 0;
 }

css/product.css

 }
 .piece {
   width: 100%;
-  /* height: 8rem; */
 }
 .piece_color{
   background-color: #f5f6f9ff;
 .four {
   width: calc(25% - 0.2rem);
 }
-.exam_lbt{
-  display: flex;
-}
-.exam_lbt .lbt_left{
-  width: 30%;
-}
-.lbt_left div{
-  font-size: .2rem;
-}
-.exam_lbt .lbt_right {
-  width: 70%;
-}
 .school_flex{
   display: flex;
   margin-top: 1rem;
 .school{
   width: 4rem;
   text-align: right;
+  position: relative;
 }
 .school_item{
   width: 2.4rem;
-  height: 0.47rem;
+  height: 0.4rem;
   background-color: white;
   border-radius: 0.04rem;
   box-shadow: 0 0 0.12rem #0000001a;
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
+  position: absolute;
+  right: 0.5rem;
 }
-.school_item span{
+.school_itemr {
+  width: 2.4rem;
+  height: 0.4rem;
+  background-color: white;
+  border-radius: 0.04rem;
+  box-shadow: 0 0 0.12rem #0000001a;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 0.5rem;
+}
+.school span{
   color: #2d8cf0;
   font-size: 0.16rem;
   text-align: center;
 }
-.school_item img{
-  width: 0.58rem;
-    height: 0.58rem;
+.school img{
+  width: 0.54rem;
+    height: 0.54rem;
+    margin-right: -0.1rem;
+    margin-left: 0.2rem;
+}
+.area_item:hover{
+  box-shadow: 0 0 0.12rem #0000001a;
+  transform: translate(0, -4px);
+}
+.school_itemr img{
+  margin-left: -0.1rem;
+  margin-right: 0.2rem;
+}
+.s1{
+    top: 0.8rem;
+}
+.s2{
+  top:2.4rem;
+  right: 1rem;
+}
+.s3 {
+  top: 4rem;
+}
+.s4 {
+  top: 0.8rem;
+}
+
+.s5 {
+  top: 2.4rem;
+  left: 1rem;
+}
+
+.s6 {
+  top: 4rem;
+}
+
+.exam_lbt{
+  margin-top: 0.4rem;
+}
+.exam_container{
+  display: flex;
+}
+.exam_pagination{
+  display: inline-block;
+  width: 3rem;
+  margin-right: 0.2rem;
+}
+.exam_item {
+  height: 1rem;
+}
+ 
+.exam_item img{
+  width: 100%;
+  height: 1rem;
+}
+.exam_content {
+  width: 100%;
+  height: 5rem;
+  position: relative;
+  overflow: hidden;
+}
+.show_exam{
+  width: 100%;
+  height: 5rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.exam_content img {
+  width: 9.8rem;
+  height: 5rem;
+  object-fit: cover;
+}
+.exam_slide{
+  position: relative;
+}
+.exam_slide span{
+  position: absolute;
 }

css/service.css

+*{
+  margin: 0;
+}
 .ser_header {
   width: 100%;
   height: 3.9rem;
 .ser_conn{
   color: #999999;
     font-size: 0.16rem;
-    margin-top: 0.3rem;
+    margin: 0.1rem 0;
+    margin-right: 0.2rem;
 }
 .ser_school{
   display:flex;
+  flex-wrap: wrap;
   margin-top: 0.2rem;
 }
 .ser_sc_info{
-  width: 14.3%;
-  height: 2rem;
+  width: 1.85rem;
+  height: 1.9rem;
   text-align: center;
 }
 .ser_sc_info img{
   color: #333333;
   font-size: 0.16rem;
 }
-.ser_comm{
-  display: flex;
-  flex-wrap: wrap;
+.ser_comms{
+  margin: 0.3rem 0;
+  
+}
+.ser_lbt{
+/* white-space: nowrap; */
 }
 .ser_con {
-  width: calc(33% - 0.15rem);
+  display: inline-block;
+  width: 4.14rem;
   height: 3.4rem;
   background-color: #f5f7f9ff;
   padding: 0.2rem;
   box-sizing: border-box;
-  margin: 0 0.25rem 0.4rem 0;
+  /* margin-right: 0.3rem; */
 }
 .ser_con img{
   width: 100%;
   color: #333333;
     font-size: 0.16rem;
     text-align: center;
-}
-.ser_con:nth-child(3n) {
-   margin-right: 0;
- }
+    line-height: 0.4rem;
+}

css/trial.css

+body{
+  background-color: white;
+}
+*{
+  margin: 0;
+}
+.tri_header {
+  width: 100%;
+  height: 3.9rem;
+  position: relative;
+}
+
+.tri_header img {
+  width: 100%;
+  height: 100%;
+}
+
+.suspension {
+  position: absolute;
+  left: 2rem;
+  top: 1.3rem;
+  color: white;
+}
+
+.suspension div {
+  font-weight: bold;
+  font-size: 0.4rem;
+  margin-bottom: 0.4rem;
+}
+
+.suspension p {
+  font-size: 0.16rem;
+}
+.tri_content{
+  width: 13rem;
+  margin: 1rem auto;
+}
+.ser_title {
+  color: #000000;
+  letter-spacing: 0.01rem;
+  font-size: 0.4rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 0.2rem;
+}
+
+.ser_comm p {
+  width: 100%;
+  color: #999999;
+  font-size: 0.16rem;
+  text-align: center;
+  letter-spacing: 0.02rem;
+  line-height: 0.3rem;
+  margin: 0;
+}
+.submit_data{
+  margin-top: 0.4rem;
+}
+.submit_list{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.4rem;
+}
+.submit_item{
+  width: 32%;
+  display: flex;
+  flex-direction:column-reverse;
+  position: relative;
+}
+.submit_item p{
+  color: #333333;
+  font-size: 0.16rem;
+  font-weight: bold;
+  line-height: 0.3rem;
+  margin-bottom: 0.1rem;
+}
+.submit_item input{
+  width: calc(100% - 0.2rem);
+  display: inline-block;
+  height: 0.36rem;
+    border: 1px solid #cccccc;
+  border-radius: 0.06rem;
+  outline-style: none; /*获取焦点时边框*/
+  padding-left: 0.1rem;
+}
+::-webkit-input-placeholder {
+  /* WebKit browsers，webkit内核浏览器 */
+  color: #ccc;
+}
+.submit_comm p{
+  color: #333333;
+    font-size: 0.16rem;
+    font-weight: bold;
+    line-height: 0.3rem;
+    margin-bottom: 0.1rem;
+}
+.submit_comm #comm{
+  width: calc(100% - 0.2rem);
+  outline-style: none;
+    /*获取焦点时边框*/
+    border: 1px solid #cccccc;
+    padding: 0.06rem;
+    font-family: Microsoft YaHei;
+}
+.subject_data{
+  padding: 0.6rem 0 1.6rem;
+}
+.btn{
+  width: 3.2rem;
+  height: 0.48rem;
+  margin: 0 auto;
+  background-color: #2d8cf0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.btn span{
+  color: white;
+  font-size: 0.16rem;
+}
+.btn img{
+  margin-left: 0.2rem;
+  width: 0.2rem;
+  height: 0.06rem;
+}
+.submit_item .showerr{
+  position: absolute;
+  bottom: -0.4rem;
+  color: red !important;
+  font-size: 0.14rem;
+  /* visibility: hidden; */
+}

js/about.js

 ];
 
 // 请求接口前缀 3.6.1 中文列表
-var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/listc";
 $.ajax({
   type: "POST",
-  url: Baseurl,
+  url: $.baseUrl + "dh/listc",
   dataType: "json",
   async: false,
   contentType: "application/json; charset=utf-8",
   success: function (data) {
     if (data.code === 0) {
-      // datalist = data.obj;
+      datalist = data.obj;
     } else {
       alert(data.msg);
     }
   html += `<div class="round_q" index = "${idx + 1}">
                     <div class="round_item">
                     <div class="round_i"></div>
-                    <div class="round_d">${item.time}</div>
+                    <div class="round_d">${item.dhyear || item.time}</div>
                   </div></div>`;
 });
 $(".rounds").width(datalist.length * 2.34 + "rem");
   $(".develop_data").html(html);
 }
 //获取元素
-var divwidth = $(".round_q:first").width() - 54;
-var container = $(".showdata");
+var divwidth = $(".round_q:first").width();
 var list = $(".rounds");
 var buts = $(".round_q");
 var prev = $(".leftjt");
     .removeClass("active");
 }
 
-$(".develop_container").bind("mouseenter", () => {
-  clearTimeout(timer);
-    timer=null;
-});
-$(".develop_container").bind("mouseleave", () => {
-  play();
-});
 // 鼠标离开图片区域时，轮播继续
 function play() {
   if (datalist.length <= 5) {
 function stop() {
   if (timer) {
     clearTimeout(timer);
-    timer=null;
+    timer = null;
   }
 }
 
   animate(divwidth);
   showdata(index - 1);
   showButton();
-
- 
 });
 
 // 小圆点点击事件
     var offset = (0 - divwidth) * (myIndex - index);
     index = myIndex;
     animates(offset);
-    // list.animate({ left: -360 });
-    
+
     showdata(index - 1);
     showButton();
     stop();
   });
 });
 showdata(0);
-container.hover(stop, play);
+$(".develop_container").hover(stop, play);
 
 play();

js/product.js

-var mySwiper = new Swiper ('.swiper-container', {
-           slidesPerView: 1,
-        spaceBetween: 30,
-        pagination: ".swiper-pagination",
-        nextButton: ".swiper-button-next",
-        prevButton: ".swiper-button-prev",
-        paginationClickable: true,
-        autoplay: 3000,
-        loop: true,
-})       
-        console.log(2);
+//获取元素
+var divheight = $(".show_exam:first").height();
+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);
+  console.log(index, top, offset);
+  // 边界判断
+  if (offset > 0) {
+    offset = "+=" + offset;
+  } else {
+    offset = "-=" + Math.abs(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;
+  }
+}
+// 点击事件
+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);
+
+play();

js/service.js

+// 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);
+    }
+  }
+});
+//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);
+    }
+  }
+});
+var serSwiper = new Swiper(".ser_swiper_container.swiper-container", {
+  slidesPerView: 3,
+  centeredSlides: true,
+  loop: true,
+  autoplay: 3000
+});

js/trial.js

+$(".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

           <div class="area_title" style="margin: 0.5rem 0">
             我们始终秉承的愿景
           </div>
-          <div class="area_four">
+          <div class="area_four bot_fs">
             <div class="area_fs" style="height: 2rem">
               <img src="../img/about/icon5.png" />
               <div>燃星星之火</div>
           </div>
           <div class="develop_data">
             <div class="dev_list">
-              <div class="dev_item" title="">
-                <span>11</span> &nbsp;-&nbsp;
-                123e2323234萨队啊收到阿斯加皇帝啊啥的啊是的和i啊上帝啊啥的哈斯哈电视
-              </div>
-              <div class="dev_item">
-                <span>11</span> &nbsp;-&nbsp; 123e2323234
-              </div>
-              <div class="dev_item">
-                <span>11</span> &nbsp;-&nbsp; 123e2323234
-              </div>
-              <div class="dev_item">
-                <span>11</span> &nbsp;-&nbsp; 123e2323234
-              </div>
+              <div class="dev_item" title=""><span></span> &nbsp;-&nbsp;</div>
+              <div class="dev_item"><span></span> &nbsp;-&nbsp;</div>
+              <div class="dev_item"><span></span> &nbsp;-&nbsp;</div>
+              <div class="dev_item"><span></span> &nbsp;-&nbsp;</div>
             </div>
             <div class="dev_list">
-              <div class="dev_item">
-                <span>11</span> &nbsp;-&nbsp; 123423423423
-              </div>
+              <div class="dev_item"><span></span> &nbsp;-&nbsp;</div>
             </div>
             <div class="dev_list">
-              <div class="dev_item">
-                <span>11</span> &nbsp;-&nbsp; 123423423423
-              </div>
+              <div class="dev_item"><span></span> &nbsp;-&nbsp;</div>
             </div>
           </div>
         </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>
+  <script src="../utils/index.js"></script>
   <script src="../js/about.js"></script>
 </html>

sections/product.html

           </div>
           <div class="school_flex">
             <div class="school_left school">
-              <div class="school_item">
+              <div class="school_item s1">
                 <img src="../img/product/school1.png" />
                 <span>应用资源一体化</span>
               </div>
+              <div class="school_item s2">
+                <img src="../img/product/school2.png" />
+                <span>校园资源体系化</span>
+              </div>
+              <div class="school_item s3">
+                <img src="../img/product/school3.png" />
+                <span>智慧校园一站化</span>
+              </div>
             </div>
             <img class="school_img" src="../img/product/school0.png" />
-            <div class="school_right school"></div>
+            <div class="school_right school">
+              <div class="school_itemr s4">
+                <img src="../img/product/school4.png" />
+                <span>教育决策科学化</span>
+              </div>
+              <div class="school_itemr s5">
+                <img src="../img/product/school5.png" />
+                <span>精准教学个性化</span>
+              </div>
+              <div class="school_itemr s6">
+                <img src="../img/product/school6.png" />
+                <span>教学管理数据化</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
           </div>
           <!-- 轮播图 -->
           <div class="exam_lbt">
-            <div class="lbt_left">
-              <div class="lbt_title">命题智能化</div>
-              <div class="lbt_title">命题智能化</div>
-              <div class="lbt_title">命题智能化</div>
-              <div class="lbt_title">命题智能化</div>
-              <div class="lbt_title">命题智能化</div>
+            <div class="exam_container">
+              <div class="exam_pagination">
+                <div data-index="1" class="exam_item">
+                  <img src="../img/product/mtblue.png" />
+                </div>
+                <div data-index="2" class="exam_item">
+                  <img src="../img/product/zdblue.png" />
+                </div>
+                <div data-index="3" class="exam_item">
+                  <img src="../img/product/ydblue.png" />
+                </div>
+                <div data-index="4" class="exam_item">
+                  <img src="../img/product/yyblue.png" />
+                </div>
+                <div data-index="5" class="exam_item">
+                  <img src="../img/product/sjblue.png" />
+                </div>
+              </div>
+              <div class="exam_content">
+                <div class="show_exam">
+                  <div class="exam_slide">
+                    <span>1</span>
+                    <img src="../img/product/mtznh.png" />
+                  </div>
+                  <div class="exam_slide">
+                    <span>2</span>
+                    <img src="../img/product/zdqss.png" />
+                  </div>
+                  <div class="exam_slide">
+                    <span>3</span>
+                    <img src="../img/product/ydsss.png" />
+                  </div>
+                  <div class="exam_slide">
+                    <span>4</span>
+                    <img src="../img/product/yyxlg.png" />
+                  </div>
+                  <div class="exam_slide">
+                    <span>5</span>
+                    <img src="../img/product/sjfxq.png" />
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="lbt_right">img</div>
           </div>
         </div>
       </div>
     </div>
-
-    <!-- <div class="lbnt_container swiper-container">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide"><img src="../img/WechatIMG200.jpeg" /></div>
-        <div class="swiper-slide"><img src="../img/WechatIMG201.jpeg" /></div>
-        <div class="swiper-slide"><img src="../img/WechatIMG202.jpeg" /></div>
-        <div class="swiper-slide"><img src="../img/WechatIMG205.jpeg" /></div>
-        <div class="swiper-slide"><img src="../img/WechatIMG206.jpeg" /></div>
-        <div class="swiper-slide"><img src="../img/WechatIMG207.jpeg" /></div>
-      </div>
-      <div class="swiper-pagination"></div>
-      <div class="swiper-button-prev"></div>
-      <div class="swiper-button-next"></div>
-      <div class="swiper-scrollbar"></div>
-    </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

     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../librarys/swiper@3.4.2/swiper.min.css" />
     <link rel="stylesheet" href="../css/comm.css" />
     <link rel="stylesheet" href="../css/service.css" />
     <script src="../utils/rem.js"></script>
   </head>
   <body>
     <div class="ser_header">
-      <img src="../img/product.png" />
+      <img src="../img/about/service.png" />
       <div class="suspension">
         <div>服务案例</div>
         <p>云鸽最新资讯，让一切皆有可能</p>
       <div class="ser_comm">
         <p>提供智慧教学服务，提供高质量的同步课堂、互动课堂教学系统等方案</p>
       </div>
+      <div class="ser_swiper_container swiper-container">
+        <div class="swiper-wrapper ser_lbt">
+          <div class="swiper-slide ser_con">
+            <img src="" />
+            <div>管城外国语</div>
+          </div>
+        </div>
+      </div>
       <div class="ser_conn">部分合作学校（排名不分先后）</div>
       <div class="ser_school">
         <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_sc_info">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-      </div>
-      <div class="ser_comm">
-        <div class="ser_con">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_con">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_con">
-          <img src="../img/product.png" />
-          <div>管城外国语</div>
-        </div>
-        <div class="ser_con">
-          <img src="../img/product.png" />
+          <img src="" />
           <div>管城外国语</div>
         </div>
       </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>
+  <script src="../utils/index.js"></script>
   <script src="../js/service.js"></script>
 </html>

sections/trial.html

     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../css/comm.css" />
+    <link rel="stylesheet" href="../css/trial.css" />
+    <script src="../utils/rem.js"></script>
     <title>申请试用</title>
   </head>
   <body>
-    试用
+    <div class="tri_header">
+      <img src="../img/about/trial.png" />
+      <div class="suspension">
+        <div>申请试用</div>
+        <p>携手合作 真诚服务</p>
+      </div>
+    </div>
+    <div class="tri_content">
+      <div class="ser_title">欢迎留言咨询</div>
+      <div class="ser_comm">
+        <p>填写以下信息，我们会有专人第一时间与您联系，为您开辟专属试用通道</p>
+      </div>
+      <div class="submit_data">
+        <div class="submit_list">
+          <div class="submit_item">
+            <input
+              type="text"
+              maxlength="32"
+              id="account"
+              placeholder="请输入联系人"
+            />
+            <p>姓名</p>
+            <p class="err_account showerr">姓名不能为空</p>
+          </div>
+          <div class="submit_item">
+            <input
+              type="text"
+              maxlength="16"
+              id="phone"
+              placeholder="请输入联系电话"
+            />
+            <p>联系电话</p>
+            <p class="err_phone showerr">联系电话不能为空</p>
+          </div>
+          <div class="submit_item">
+            <input
+              type="text"
+              maxlength="64"
+              id="mailbox"
+              placeholder="请输入邮箱"
+            />
+            <p>邮箱</p>
+            <p class="err_mailbox showerr">请输入正确的邮箱地址！</p>
+          </div>
+        </div>
+        <div class="submit_comm">
+          <p>问题描述</p>
+          <textarea
+            type="text"
+            maxlength="512"
+            id="comm"
+            placeholder="请输入问题描述"
+            rows="6"
+          ></textarea>
+        </div>
+        <div class="subject_data">
+          <div class="btn">
+            <span>提交申请</span><img src="../img/about/submit.png" />
+          </div>
+        </div>
+      </div>
+    </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>
+  <script src="../utils/index.js"></script>
+  <script src="../js/trial.js"></script>
 </html>

utils/index.js

 jQuery.extend({
   baseUrl: "//xhwebapitest.xhkjedu.com/",
-  showImageUrl: "//schoolstatictest.xhkjedu.com/static/",
+  showImageUrl: "//xhwebstatictest.xhkjedu.com/",
   //毫秒时间转换为yyyy-MM-dd
   msToDateString: function (ms) {
     let date = new Date(ms);
     return year + "-" + month + "-" + day;
   },
   // 读取url参数
-  getQueryVariable: function(variable) {
+  getQueryVariable: function (variable) {
     let query = window.location.search.substring(1);
     query = decodeURI(query);
     let vars = query.split("&");