首页

css/comm.css

@@ -25,10 +25,12 @@ body {
   color: #333;
   background-color: #fff;
 } 
-.header_root:hover .header_box .header_left .left_white {
+.header_root:hover .header_box .header_left .left_white,
+.header_root.bg_white .header_box .header_left .left_white {
   display: none;
 }
-.header_root:hover .header_box .header_left .left_gray {
+.header_root:hover .header_box .header_left .left_gray,
+.header_root.bg_white .header_box .header_left .left_gray {
   display: inline-block;
 }
 .footer_root {

css/index.css

@@ -151,23 +151,152 @@
   text-align: center;
 }
 .home_introduce_stitle {
-  padding: 0.22rem 0;
+  padding: 0.22rem 0 0.68rem;
   font-size: 0.16rem;
   color: #000;
   text-align: center;
 }
 .home_introduce_main {
-  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto 0.5rem;
   padding: 0.75rem 0;
   width: 13rem;
   background-color: #fff;
   color: #666;
   font-size: 0.16rem;
 }
-.home_introduce_main_left {
+.home_introduce_left {
   margin-left: 0.35rem;
+  width: 3rem;
 }
-.home_introduce_main_left .introduce_main_left_title {
+.home_introduce_left .introduce_left_title {
+  margin-bottom: 0.68rem;
   font-size: 0.28rem;
   color: #333;
+}
+.home_introduce_left .introduce_left_content {
+  line-height: 0.3rem;
+}
+.home_introduce_left .introduce_left_content_top {
+  margin-bottom: 0.3rem;
+}
+.home_introduce_right {
+  position: relative;
+  width: 9.65rem;
+}
+.home_introduce_right .right_main_img {
+  width: 3.958rem;
+  /* height: 3.8rem; */
+}
+.home_introduce_right .right_small_box1 {
+  position: absolute;
+  top: 0.4rem;
+  right: 0rem;
+  padding-left: 1.2rem;
+  width: 6rem;
+  height: 1.1rem;
+  background-color: #fff;
+  background-position: top left;
+  background: url("../img/home/intro/bine01.png");
+  background-size: 90% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+.home_introduce_right .right_small_box2 {
+  position: absolute;
+  top: 1.3rem;
+  right: 0.45rem;
+  padding-left: 1.2rem;
+  width: 6rem;
+  height: 1.1rem;
+  background-color: #fff;
+  background-position: top left;
+  background: url("../img/home/intro/bine02.png");
+  background-size: 90% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+.home_introduce_right .right_small_box3 {
+  position: absolute;
+  top: 2.2rem;
+  right: 0.8rem;
+  padding-left: 1.2rem;
+  width: 6rem;
+  height: 1.1rem;
+  background-color: #fff;
+  background-position: top left;
+  background: url("../img/home/intro/bine03.png");
+  background-size: 90% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+.home_introduce_right .right_small_box4 {
+  position: absolute;
+  top: 3.05rem;
+  right: 1.15rem;
+  padding-left: 1.2rem;
+  width: 6rem;
+  height: 1.1rem;
+  background-color: #fff;
+  background-position: top left;
+  background: url("../img/home/intro/bine04.png");
+  background-size: 90% 100%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+.introduce_right_title {
+  margin-top: 0.3rem;
+  margin-bottom: 0.15rem;
+  padding-left: 0.06rem;
+  border-left: 0.04rem  solid #2D8CF0;
+  font-size: 0.18rem;
+  color: #333;
+  font-weight: 700;
+}
+.introduce_right_stitle {
+  font-size: 0.12rem;
+}
+.home_serve {
+  background-color: #fff;
+}
+.home_serve_main {
+  margin: 0 auto;
+  width: 13rem;
+  text-align: center;
+  background-color: #fff;
+}
+.home_serve_main .home_serve_title {
+  padding: 1.07rem 0;
+  font-size: 0.4rem;
+  line-height: 0.6rem;
+  font-weight: 700;
+  color: #151720;
+}
+.home_serve_main .home_serve_item_box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.home_serve_item_box .home_serve_item {
+  padding-bottom: 1rem;
+  width: 20%;
+  line-height: 0.3rem;
+  text-align: center;
+}
+.home_serve_item img {
+  display: block;
+  margin: 0 auto;
+  width: 0.54rem;
+  height: 0.54rem;
+}
+.home_serve_item .home_serve_item_title {
+  padding: 0.27rem 0;
+  font-size: 0.24rem;
+  color: #000;
+}
+.home_serve_item .home_serve_item_stitle {
+  font-size: 0.16rem;
+  color: #666;
 }

index.html

@@ -94,23 +94,64 @@
       提升学校数据共享能力、加速释放数据价值
     </div>
     <div class="home_introduce_main">
-      <div class="home_introduce_main_left">
-        <div class="introduce_main_left_title">采集学生全过程</div>
-        <div>
-          <div>
-            学习行为数据,精准诊断学生知识点学习情况，<br />
-            让管理者基于数据科学决策，让教师基于学情<br />
-            精准教学，让学生基于知识掌握程度精准学习。
+      <div class="home_introduce_left">
+        <div class="introduce_left_title">采集学生全过程</div>
+        <div class="introduce_left_content introduce_left_content_top">
+          学习行为数据,精准诊断学生知识点学习情况，让管理者基于数据科学决策，让教师基于学情精准教学，让学生基于知识掌握程度精准学习。
+        </div>
+        <div class="introduce_left_content">
+          实现从个人到整体、从微观到宏观的全面数据呈现，帮助教育管理者快速了解教育动态，助力科学决策，助力师生增效减负。
+        </div>
+      </div>
+      <div class="home_introduce_right">
+        <img class="right_main_img" src="./img/home/intro/dizuo.png" />
+        <div class="right_small_box1">
+          <div class="introduce_right_title">区域大数据平台</div>
+          <div class="introduce_right_stitle">
+            决策数据支撑 信息化水平提升 教育资源平衡 区校资源共享
           </div>
-          <div>
-            实现从个人到整体、从微观到宏观的全面数据<br />
-            呈现，帮助教育管理者快速了解教育动态，助<br />
-            力科学决策，助力师生增效减负。
+        </div>
+        <div class="right_small_box2">
+          <div class="introduce_right_title">教学管理平台</div>
+          <div class="introduce_right_stitle">
+            助力精细管理 明确教学重点 教学实时监管
           </div>
         </div>
+        <div class="right_small_box3">
+          <div class="introduce_right_title">智慧教学</div>
+          <div class="introduce_right_stitle">实现因材施教 助力效率提升</div>
+        </div>
+        <div class="right_small_box4">
+          <div class="introduce_right_title">日常学习</div>
+          <div class="introduce_right_stitle">个性化学习 减负增效</div>
+        </div>
       </div>
-      <div>
-
+    </div>
+    <div class="home_serve">
+      <div class="home_serve_main">
+        <div class="home_serve_title">多项服务保障<br/>让学校、老师、学生无忧</div>
+        <div class="home_serve_item_box">
+          <div class="home_serve_item">
+            <img src="./img/home/serve/hailiangshujuziyuan.png" />
+            <div class="home_serve_item_title">海量数据资源</div>
+            <div class="home_serve_item_stitle">优质海量资源，教师不需要重新收集整理</div>
+          </div>
+          <div class="home_serve_item">
+            <img src="./img/home/serve/jingzhunhuaxiang.png" />
+            <div class="home_serve_item_title">精准画像</div>
+            <div class="home_serve_item_stitle">全程采集教学数据，深度挖掘开发精准画像，指导师生发展</div>
+          </div>
+          <div class="home_serve_item">
+            <img src="./img/home/serve/jiaoxueshujufenxi.png" />
+            <div class="home_serve_item_title">教学数据分析</div>
+            <div class="home_serve_item_stitle">薄弱知识点，归纳错因，体现能力变化曲线，帮助学生针对性训练</div>
+          </div>
+          <div class="home_serve_item">
+            <img src="./img/home/serve/zhihuipiyuejishu.png" />
+            <div class="home_serve_item_title">智慧批阅技术</div>
+            <div class="home_serve_item_stitle">一键组题自动同步至学生空间，学生提交后，平台自动批阅</div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="footer_root"></div>

sections/comm/footer.html

@@ -9,7 +9,7 @@
       .footer_box {
         position: relative;
         margin: 0 auto;
-        padding: 0.33rem;
+        padding: 0.33rem 0;
         width: 13rem;
         font-size: 0.14rem;
         text-align: center;

sections/comm/header.html

@@ -181,6 +181,14 @@
             console.log("语言切换");
           }
         });
+        $(window).on("scroll", function() {
+          let top = $(window).scrollTop();
+          if(top > 100){
+            $(".header_root").addClass("bg_white");
+          } else {
+            $(".header_root").removeClass("bg_white");
+          }
+        });
       });
     </script>
   </body>