产品中心

css/about.css

   z-index: 1000;
 }
 .leftjt {
-  left: 0;
+  left: 0.2rem;
 }
 .rightjt {
-  right: 0;
+  right: 0.2rem;
 }
 .showdata {
   width: 90%;
   height: 1.6rem;
   margin: 0 auto;
   position: relative;
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 .line {
   width: 100%;
   font-size: 0.36rem;
   font-weight: bold;
 }
+.develop_data{
+  padding: 0 5%;
+  margin: 0.4rem 0 0.2rem;
+  display: flex;
+  justify-content: space-between;
+}
+.dev_list{
+  width: 33%;
+  height: 2rem;
+}
+.dev_item{
+  color: #666666;
+  font-size: 0.14rem;
+  line-height: 0.5rem;
+  padding-right: 0.2rem;
+  overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.dev_item span{
+  color: #016cff;
+}

css/product.css

 .pro_header{
   width: 100%;
   height: 3.9rem;
+  position: relative;
 }
 .pro_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;
+}
 .piece {
   width: 100%;
   /* height: 8rem; */
   border-radius: 0.1rem;
   background: #fefeffff;
   border: 1px solid #f1f4fc;
-  padding: 0.5rem 0.2rem 0.1rem;
+  padding: 0 0.2rem 0.1rem;
   box-sizing: border-box;
   background-color: #fefeff;
+  text-align: center;
+}
+.area_item img{
+  width: 0.56rem;
+  height: 0.56rem;
+  display: inline-block;
+  margin: 0;
 }
 .area_item div{
   text-align: center;
 }
 .exam_lbt .lbt_right {
   width: 70%;
+}
+.school_flex{
+  display: flex;
+  margin-top: 1rem;
+  justify-content: center;
+}
+.school_img{
+  width: 4.7rem;
+  height: 4.7rem;
+}
+.school{
+  width: 4rem;
+  text-align: right;
+}
+.school_item{
+  width: 2.4rem;
+  height: 0.47rem;
+  background-color: white;
+  border-radius: 0.04rem;
+  box-shadow: 0 0 0.12rem #0000001a;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+.school_item span{
+  color: #2d8cf0;
+  font-size: 0.16rem;
+  text-align: center;
+}
+.school_item img{
+  width: 0.58rem;
+    height: 0.58rem;
 }

js/about.js

-// 请求接口前缀
-var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/list";
-// $.ajax({
-//   type: "POST",
-//   url: Baseurl,
-//   data: JSON.stringify({
-//     examid: 434,
-//     classid: 9666
-//   }),
-//   dataType: "json",
-//   contentType: "application/json; charset=utf-8",
-//   success: function (data) {
-//     if (data.code === 0) {
-//       loadSectionHtml(data.obj);
-//     } else {
-//       alert(data.msg);
-//     }
-//   }
-// });
 var datalist = [
   { time: 2023 },
   { time: 2022 },
   { time: 2017 }
 ];
 
+// 请求接口前缀 3.6.1 中文列表
+var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/listc";
+$.ajax({
+  type: "POST",
+  url: Baseurl,
+  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}">
                     <div class="round_item">
                     <div class="round_i"></div>
-                    <div class="round_d">${item.time}</div>
+                    <div class="round_d">${item.dhyear}</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">';
+    }
+
+    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() - 54;
-console.log(divwidth);
 var container = $(".showdata");
 var list = $(".rounds");
 var buts = $(".round_q");
 var timer;
 var offsetpx = (datalist.length - len) * divwidth; //可偏移度
 var offleft = 0; //当前偏移量
-console.log(offsetpx);
 function animate(offset) {
-  console.log(index);
+  if (datalist.length <= 5) {
+    return;
+  }
   var left = parseInt(list.css("left")) + offset;
-  console.log(left, offset);
   var absnum = Math.abs(offset);
   if (left < 0 - offsetpx) {
     //右侧没有数据时不偏移
   if (offset > 0) {
     offset = "+=" + offset;
     offleft = offleft + absnum;
-    console.log(offset);
   } else {
     offset = "-=" + Math.abs(offset);
     offleft = offleft - absnum;
-    console.log(0 - absnum, absnum);
-  }
-  // if (index == datalist.length) {
-  //   offset = 0 - (datalist.length - 5) * absnum;
-  //   offleft = offset;
-  //   console.log(offset);
-  // }
-  console.log(offset, offleft, "当前偏移量");
-  if (offset >= 0) {
-    console.log(44444);
+  }
+  if (index < 5 && offleft >= 0) {
     return;
   }
   list.animate({ left: offset }, 300, function () {
     if (left > -200) {
-      console.log(22, (0 - offset) * len);
-      list.css("left", (0 - offset) * len);
+      // list.css("left", (0 - offset) * len);
     }
     if (index == datalist.length) {
+      //轮播最后一条
       offset = 0 - (datalist.length - 5) * absnum;
       offleft = offset;
       list.css("left", offset);
-      console.log(offset, 1231312);
     }
   });
 }
+//点击高亮滚动
+function animates(offset) {
+  if (datalist.length <= 5) {
+    return;
+  }
+  var left = parseInt(list.css("left")) + offset; //获取元素属性
+  if (index <= 5 && left >= 0) {
+    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 () {
+    if (left > -200) {
+      list.css("left", (0 - offset) * len);
+    }
+  });
+}
 //亮起小圆点
 function showButton() {
   //当前图片的小圆点亮起，其他小圆点不亮
-  console.log(index, "gaoliang");
   buts
     .eq(index - 1)
     .addClass("active")
 });
 // 鼠标离开图片区域时，轮播继续
 function play() {
+  if (datalist.length <= 5) {
+    return;
+  }
   timer = setTimeout(function () {
     next.trigger("click");
     play();
 
 //鼠标进入图片区域时，停止轮播
 function stop() {
-  clearTimeout(timer);
+  if (timer) {
+    clearTimeout(timer);
+  }
 }
 
 // 右按钮点击事件
 next.bind("click", function () {
+  if (datalist.length <= 5) {
+    return;
+  }
   // 判断当前是否在动画
   if (list.is(":animated")) {
     return;
   // 判断当前图片是否是最后一张
   if (index == datalist.length) {
     index = 1;
-    console.log(222222);
     offleft = 0;
     list.animate({ left: 0 }, 300, () => {});
   } else {
     index += 1;
   }
-  console.log(offleft, "当前偏移量");
-  console.log("you", index);
   animate(0 - divwidth);
+  showdata(index - 1);
   showButton();
   stop();
 });
 
 // 左按钮事件
 prev.bind("click", function () {
+  if (datalist.length <= 5) {
+    return;
+  }
   // 判断当前是否在动画
   if (list.is(":animated")) {
     return;
   }
-  console.log(index);
+
   // 判断当前图片是否是第一张
   if (index == 1) {
     index = datalist.length;
   } else {
     index -= 1;
   }
-  console.log("zuo", index);
-  console.log(offleft, "当前偏移量");
+
   animate(divwidth);
+  showdata(index - 1);
   showButton();
+
   stop();
 });
 
     }
     // 获取属性
     var myIndex = parseInt($(this).attr("index"));
-    console.log(myIndex);
+    if (myIndex == index) {
+      return;
+    }
     //计算偏移量
     var offset = (0 - divwidth) * (myIndex - index);
-    if (myIndex <= 2) {
-      offset = 0;
-      console.log(myIndex, 33333);
-    }
-    console.log(offleft, "当前偏移量");
-    animate(offset);
-
+    animates(offset);
+    // list.animate({ left: -360 });
     //切换后，更新当前的偏移量
     index = myIndex;
-
+    showdata(index - 1);
     showButton();
   });
 });
-
+showdata(0);
 container.hover(stop, play);
 
 play();

sections/about.html

   </head>
   <body>
     <div class="ab_header">
-      <img src="../img/product.png" />
+      <img src="../img/about/banner.png" />
       <div class="suspension">
         <div>关于我们</div>
         <p>
               </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>
+            <div class="dev_list">
+              <div class="dev_item">
+                <span>11</span> &nbsp;-&nbsp; 123423423423
+              </div>
+            </div>
+            <div class="dev_list">
+              <div class="dev_item">
+                <span>11</span> &nbsp;-&nbsp; 123423423423
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

sections/product.html

   </head>
   <body>
     <div class="pro_header">
-      <img src="../img/product.png" />
+      <img src="../img/product/banner.png" />
+      <div class="suspension">
+        <div>产品中心</div>
+        <p>致力于成为优质教育解决方案提供商 教育现代化的推动者</p>
+      </div>
     </div>
     <div class="pro_content">
       <div class="piece">
           <div class="area_content">
             <div class="area_list">
               <div class="area_item three">
+                <img src="../img/product/area1.png" />
                 <div>互联互通</div>
                 <p>
                   整合省、市、区/县、校多级数据，建立多源
                 </p>
               </div>
               <div class="area_item three">
+                <img src="../img/product/area2.png" />
                 <div>决策支撑</div>
                 <p>
                   利用大数据技术，对基础数据进行多维度、
                 </p>
               </div>
               <div class="area_item three">
+                <img src="../img/product/area3.png" />
                 <div>智慧教育</div>
                 <p>
                   借助“大数据+AI”，为决策者提供精准、可
             </div>
             <div class="area_list" style="margin-top: 0.3rem">
               <div class="area_item four">
+                <img src="../img/product/area4.png" />
                 <div>资源整合</div>
                 <p>
                   支持多源、多类数据接入，对外 提供标准数据接口，满足后续业
                 </p>
               </div>
               <div class="area_item four">
+                <img src="../img/product/area5.png" />
                 <div>区域部署</div>
                 <p>支持多种部署方式，满足用户各 个场景下的实际需求</p>
               </div>
               <div class="area_item four">
+                <img src="../img/product/area6.png" />
                 <div>资源共享</div>
                 <p>实现各级教育管理机构优质教 育资源的共建共享和均衡配置</p>
               </div>
               <div class="area_item four">
+                <img src="../img/product/area7.png" />
                 <div>统一平台</div>
                 <p>
                   提供一站式管理界面，实现各个 业务系统统一操作、维护，增加
               通过教学辅助工具，提高教学工作效率；通过数据管理工具，促进资源合理配置；通过优化师生服务，提升教育教学水平。
             </p>
           </div>
+          <div class="school_flex">
+            <div class="school_left school">
+              <div class="school_item">
+                <img src="../img/product/school1.png" />
+                <span>应用资源一体化</span>
+              </div>
+            </div>
+            <img class="school_img" src="../img/product/school0.png" />
+            <div class="school_right school"></div>
+          </div>
         </div>
       </div>
       <div class="piece">