产品中心

css/about.css

@@ -137,6 +137,12 @@
   padding: 0 0.1rem;
   box-sizing: border-box;
 }
+.area_fs:hover{
+  cursor: pointer;
+    border-radius: 0.04rem;
+    box-shadow: 0 0 0.12rem #0000001a;
+    transform: translate(0, -4px);
+}
 .area_fs img {
   width: 0.88rem;
   height: 0.88rem;

css/product.css

@@ -187,17 +187,17 @@
   margin-right: 0.2rem;
 }
 .exam_item {
-  height: 1rem;
+  height: 0.9rem;
   margin-bottom: 0.2rem;
 }
  
 .exam_item img{
   width: 100%;
-  height: 1rem;
+  height: 100%;
 }
 .exam_content {
-  width: 100%;
-  height: 6rem;
+  width: 7rem;
+  height: 5rem;
   position: relative;
   overflow: hidden;
 }
@@ -213,9 +213,9 @@
   height:  100%;
 }
 .exam_content img {
-  width: 9.8rem;
+  width: 100%;
   height:  100%;
-  object-fit: cover;
+  /* object-fit: cover; */
 }
 .exam_slide{
   position: relative;
@@ -367,12 +367,12 @@
   position: relative;
 }
 .ques_item{
-  width: 2.4rem;
+  width: 2rem;
   position: absolute;
 }
 .ques_left{
  top: 4rem;
- left: 2.4rem;
+ left: 2.5rem;
 }
 .ques_centre {
   top: 2.2rem;

js/product.js

@@ -2,13 +2,11 @@ $(function () {
   $(".header_root").load("./comm/header.html");
   $(".footer_root").load("./comm/footer.html");
   //获取元素
-  var divheight = $(".exam_one").height() - 70;
+  var divheight = $(".exam_one").height();
   var container = $(".exam_container");
   var list = $(".show_exam");
   var buts = $(".exam_item");
-  var index = 1; //存放当前显示的图片的下标
-  var imgnum = 3; // 图片数量
-  var len = 1; //显示数量
+  var index = 0; //存放当前显示的图片的下标
   var interval = 5000; //位移时间间隔
   var timer;
 
@@ -25,31 +23,52 @@ $(function () {
     //   offset = "-=" + Math.abs(offset);
     // }
     offset = "-=" + Math.abs(offset);
-    if (index == 6) {
-      index = 1;
+    if (index == 5) {
+      index = 0;
       offset = 0;
-      console.log("最后一个");
     }
+    showButton();
     console.log("当前索引", index, top, offset);
     list.animate({ top: offset }, 300, function () {
       if (top > -200) {
       }
     });
   }
+  var imglist = [
+    {
+      blue: "../img/product/mtblue.png",
+      grey: "../img/product/mtgrey.png"
+    },
+    {
+      blue: "../img/product/zdblue.png",
+      grey: "../img/product/zdgrey.png"
+    },
+    {
+      blue: "../img/product/ydblue.png",
+      grey: "../img/product/ydgrey.png"
+    },
+    {
+      blue: "../img/product/yyblue.png",
+      grey: "../img/product/yygrey.png"
+    },
+    {
+      blue: "../img/product/sjblue.png",
+      grey: "../img/product/sjgrey.png"
+    }
+  ];
   //亮起小圆点
   function showButton() {
-    console.log("亮起小圆点", index);
-    //当前图片的小圆点亮起，其他小圆点不亮
-    buts
-      .eq(index - 1)
-      .addClass("active")
-      .siblings()
-      .removeClass("active");
+    var html = "";
+    buts.each(function (idx, item) {
+      if (idx == index) {
+        $(this).html(`<img src="${imglist[idx].blue}" />`);
+      } else {
+        $(this).html(`<img src="${imglist[idx].grey}" />`);
+      }
+    });
   }
-  console.log(divheight);
   // 鼠标离开图片区域时，轮播继续
   function play() {
-    console.log("鼠标离开");
     timer = setTimeout(function () {
       animate(divheight);
       play();
@@ -58,7 +77,6 @@ $(function () {
 
   //鼠标进入图片区域时，停止轮播
   function stop() {
-    console.log("鼠标进入");
     if (timer) {
       clearTimeout(timer);
       timer = null;
@@ -67,23 +85,16 @@ $(function () {
   // 点击事件
   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();
+  showButton();
 });

sections/product.html

@@ -24,7 +24,7 @@
     <div class="pro_content">
       <div class="piece">
         <div class="area piece_item">
-          <div class="area_title">区域大数据平台</div>
+          <div class="area_titles">区域大数据平台</div>
           <div class="area_comm">
             <p>
               推动信息技术与教育教学场景深度融合，构建一体化的“互联网+教育”大平台
@@ -95,7 +95,7 @@
       </div>
       <div class="piece piece_color">
         <div class="piece_item">
-          <div class="area_title">校园教学平台</div>
+          <div class="area_titles">校园教学平台</div>
           <div class="area_comm">
             <p>
               通过教学辅助工具，提高教学工作效率；通过数据管理工具，促进资源合理配置；通过优化师生服务，提升教育教学水平。
@@ -136,7 +136,7 @@
       </div>
       <div class="piece">
         <div class="piece_item">
-          <div class="area_title">考试及测评系统</div>
+          <div class="area_titles">考试及测评系统</div>
           <div class="area_comm">
             <p>
               通过便捷的网上组题、命题、评价、智能评卷、数据自动统计分析等流程
@@ -149,42 +149,37 @@
           <div class="exam_lbt">
             <div class="exam_container">
               <div class="exam_pagination">
-                <div data-index="1" class="exam_item">
-                  <img src="../img/product/mtblue.png" />
+                <div index="0" class="exam_item active">
+                  <img src="../img/product/mtgrey.png" />
                 </div>
-                <div data-index="2" class="exam_item">
-                  <img src="../img/product/zdblue.png" />
+                <div index="1" class="exam_item">
+                  <img src="../img/product/zdgrey.png" />
                 </div>
-                <div data-index="3" class="exam_item">
-                  <img src="../img/product/ydblue.png" />
+                <div index="2" class="exam_item">
+                  <img src="../img/product/ydgrey.png" />
                 </div>
-                <div data-index="4" class="exam_item">
-                  <img src="../img/product/yyblue.png" />
+                <div index="3" class="exam_item">
+                  <img src="../img/product/yygrey.png" />
                 </div>
-                <div data-index="5" class="exam_item">
-                  <img src="../img/product/sjblue.png" />
+                <div index="4" class="exam_item">
+                  <img src="../img/product/sjgrey.png" />
                 </div>
               </div>
               <div class="exam_content">
                 <div class="show_exam">
                   <div class="exam_slide">
-                    <span>1</span>
                     <img class="exam_one" 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>