xhkjedu
/
xh_web
Watch 6
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

页首、页尾、首页

gzb
wangzhonglu 1 year ago
parent
275f73ff80
commit
ee5f6cdb25
32 changed files with 154 additions and 6 deletions
Split View Show Diff Stats
  1. 11
    1
      css/comm.css
  2. 20
    0
      css/index.css
  3. BIN
      img/home/banner/banner1.jpg
  4. BIN
      img/home/banner/banner2.jpg
  5. BIN
      img/home/intro/bine01.png
  6. BIN
      img/home/intro/bine02.png
  7. BIN
      img/home/intro/bine03.png
  8. BIN
      img/home/intro/bine04.png
  9. BIN
      img/home/intro/dizuo.png
  10. BIN
      img/home/scheme/banner.png
  11. BIN
      img/home/scheme/jiantou_right.png
  12. BIN
      img/home/serve/hailiangshujuziyuan.png
  13. BIN
      img/home/serve/jiaoxueshujufenxi.png
  14. BIN
      img/home/serve/jingzhunhuaxiang.png
  15. BIN
      img/home/serve/zhihuipiyuejishu.png
  16. BIN
      img/home/superiority/datong.png
  17. BIN
      img/home/superiority/fuwu.png
  18. BIN
      img/home/superiority/shuju.png
  19. BIN
      img/home/superiority/zhuanzhu.png
  20. BIN
      img/logo_info/close.png
  21. BIN
      img/logo_info/erweima.png
  22. BIN
      img/logo_info/footer_logo.png
  23. BIN
      img/logo_info/footer_title.png
  24. BIN
      img/logo_info/header_logo.png
  25. BIN
      img/logo_info/header_logo1.png
  26. BIN
      img/logo_info/header_title.png
  27. BIN
      img/logo_info/header_title1.png
  28. BIN
      img/logo_info/weixin.png
  29. 12
    0
      index.html
  30. 6
    0
      js/index.js
  31. 73
    2
      sections/comm/footer.html
  32. 32
    3
      sections/comm/header.html

+ 11
- 1
css/comm.css View File 

@@ -4,7 +4,7 @@ body {
4 4 
   padding: 0;
5 5 
   font-size: 100px;
6 6 
   line-height: 1;
7 
-  font-family: "Microsoft YaHei", "微软雅黑" !important;
7 
+  font-family: "Source Han Sans CN" !important;
8 8 
   color: #333;
9 9 
   box-sizing: border-box;
10 10 
   background-color: #F5F7F9;

@@ -15,6 +15,7 @@ body {
15 15 
   width: 100%;
16 16 
   color: #fff;
17 17 
   background-color: transparent;
18 
+  z-index: 9999;
18 19 
 }
19 20 
 .header_root.bg_white {
20 21 
   color: #333;

@@ -23,4 +24,13 @@ body {
23 24 
 .header_root:hover {
24 25 
   color: #333;
25 26 
   background-color: #fff;
27 
+}
28 
+.header_root:hover .header_box .header_left .left_white {
29 
+  display: none;
30 
+}
31 
+.header_root:hover .header_box .header_left .left_gray {
32 
+  display: inline-block;
33 
+}
34 
+.footer_root {
35 
+  background-color: #F5F7F9;
26 36 
 }

+ 20
- 0
css/index.css View File 

@@ -0,0 +1,20 @@
1 
+.home_swiper_container.swiper-container .swiper-slide img {
2 
+  display: block;
3 
+  width: 100%;
4 
+  height: 9.42rem;
5 
+  object-fit: cover;
6 
+}
7 
+.home_swiper_container.swiper-container .swiper-wrapper .swiper-slide::after {
8 
+  content: "";
9 
+  position: absolute;
10 
+  width: 100%;
11 
+  height: 9.42rem;
12 
+  left: 0;
13 
+  top: 0;
14 
+  z-index: 1;
15 
+  background: linear-gradient(
16 
+    180deg,
17 
+    rgba(50, 55, 62, 0) 30.34%,
18 
+    rgba(13, 27, 46, 0.7) 100%
19 
+  );
20 
+}

BIN
img/home/banner/banner1.jpg View File


BIN
img/home/banner/banner2.jpg View File


BIN
img/home/intro/bine01.png View File


BIN
img/home/intro/bine02.png View File


BIN
img/home/intro/bine03.png View File


BIN
img/home/intro/bine04.png View File


BIN
img/home/intro/dizuo.png View File


BIN
img/home/scheme/banner.png View File


BIN
img/home/scheme/jiantou_right.png View File


BIN
img/home/serve/hailiangshujuziyuan.png View File


BIN
img/home/serve/jiaoxueshujufenxi.png View File


BIN
img/home/serve/jingzhunhuaxiang.png View File


BIN
img/home/serve/zhihuipiyuejishu.png View File


BIN
img/home/superiority/datong.png View File


BIN
img/home/superiority/fuwu.png View File


BIN
img/home/superiority/shuju.png View File


BIN
img/home/superiority/zhuanzhu.png View File


BIN
img/logo_info/close.png View File


BIN
img/logo_info/erweima.png View File


BIN
img/logo_info/footer_logo.png View File


BIN
img/logo_info/footer_title.png View File


BIN
img/logo_info/header_logo.png View File


BIN
img/logo_info/header_logo1.png View File


BIN
img/logo_info/header_title.png View File


BIN
img/logo_info/header_title1.png View File


BIN
img/logo_info/weixin.png View File


+ 12
- 0
index.html View File 

@@ -12,6 +12,18 @@
12 12 
   </head>
13 13 
   <body>
14 14 
     <div class="header_root"></div>
15 
+    <div class="home_swiper_container swiper-container">
16 
+      <div class="swiper-wrapper">
17 
+        <div class="swiper-slide">
18 
+          <img src="./img/home/banner/banner1.jpg" />
19 
+        </div>
20 
+        <div class="swiper-slide">
21 
+          <img src="./img/home/banner/banner2.jpg" />
22 
+        </div>
23 
+      </div>
24 
+      <!-- 如果需要分页器 -->
25 
+      <div class="swiper-pagination"></div>
26 
+    </div>
15 27 
     <div class="footer_root"></div>
16 28 
     <script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
17 29 
     <script src="./librarys/swiper@3.4.2/swiper.jquery.min.js"></script>

+ 6
- 0
js/index.js View File 

@@ -3,4 +3,10 @@ $(function () {
3 3 
   $(".footer_root").load("./sections/comm/footer.html");
4 4 
   // nav传值显示下划线
5 5 
   $(".header_root").data("nav_info", null);
6 
+  let mySwiper = new Swiper ('.home_swiper_container.swiper-container', {
7 
+    loop: true,
8 
+    autoplay: 5000,
9 
+    // 如果需要分页器
10 
+    pagination: '.swiper-pagination'
11 
+  })
6 12 
 });

+ 73
- 2
sections/comm/footer.html View File 

@@ -8,6 +8,9 @@
8 8 
     <style>
9 9 
       .footer_box {
10 10 
         position: relative;
11 
+        margin: 0 auto;
12 
+        padding: 0.33rem;
13 
+        width: 13rem;
11 14 
         font-size: 0.14rem;
12 15 
         text-align: center;
13 16 
         font-size: 0.14rem;

@@ -21,6 +24,13 @@
21 24 
         top: 0;
22 25 
         bottom: 0;
23 26 
         margin: auto 0;
27 
+        cursor: pointer;
28 
+      }
29 
+      .footer_box .footer_left > img {
30 
+        display: inline-block;
31 
+        margin-right: 0.08rem;
32 
+        margin-top: 0.63rem;
33 
+        height: 0.3rem;
24 34 
       }
25 35 
       .footer_box .footer_right {
26 36 
         position: absolute;

@@ -28,6 +38,51 @@
28 38 
         top: 0;
29 39 
         bottom: 0;
30 40 
         margin: auto 0;
41 
+        cursor: pointer;
42 
+      }
43 
+      .footer_box .footer_right > img {
44 
+        display: inline-block;
45 
+        margin-top: 0.57rem;
46 
+        height: 0.42rem;
47 
+      }
48 
+      .footer_box .footer_right .footer_qrCode {
49 
+        display: none;
50 
+        position: absolute;
51 
+        bottom: 1.12rem;
52 
+        left: -0.8rem;
53 
+        width: 2rem;
54 
+        background-color: #fff;
55 
+        box-shadow: 0 0 14px 0 #00000038;
56 
+        z-index: 9999;
57 
+      }
58 
+      .footer_box .footer_right:hover .footer_qrCode {
59 
+        display: block;
60 
+      }
61 
+      .footer_box .footer_right .footer_qrCode_title {
62 
+        padding: 0.12rem 0;
63 
+        font-size: 0.12rem;
64 
+        color: #999;
65 
+        font-weight: 700;
66 
+        background-color: #F5F7F9;
67 
+      }
68 
+      .footer_box .footer_right .footer_qrCode img {
69 
+        display: block;
70 
+        margin: 0.16rem auto;
71 
+        width: 1.23rem;
72 
+      }
73 
+      .footer_box
74 
+        .footer_right .footer_qrCode::after {
75 
+        border-left: 0.14rem solid transparent;
76 
+        border-right: 0.14rem solid transparent;
77 
+        border-bottom: 0.14rem solid #fff;
78 
+        width: 0;
79 
+        height: 0;
80 
+        content: "";
81 
+        position: absolute;
82 
+        bottom: -0.08rem;
83 
+        left: 50%;
84 
+        transform: translateX(-50%) rotate(180deg);
85 
+        -webkit-transform: translateX(-50%) rotate(180deg);
31 86 
       }
32 87 
     </style>
33 88 
   </head>

@@ -36,8 +91,24 @@
36 91 
       <div>Copyright@2003 -2017 All Rights Reserved 豫ICP备17031890号-1</div>
37 92 
       <div>联系地址：郑州市郑东新区崇德街与博学路交叉口向东300米星联创科中心7楼 河南星火燎原软件科技有限公司所有</div>
38 93 
       <div>全国客服热线 (09:00-22:00) 0371-58605588</div>
39 
-      <div class="footer_left">星火云鸽</div>
40 
-      <div class="footer_right">微信扫码</div>
94 
+      <div class="footer_left">
95 
+        <img src="../../img/logo_info/footer_logo.png" />
96 
+        <img src="../../img/logo_info/footer_title.png" />
97 
+      </div>
98 
+      <div class="footer_right">
99 
+        <img src="../../img/logo_info/weixin.png" />
100 
+        <div class="footer_qrCode">
101 
+          <div class="footer_qrCode_title">星火燎原公众号</div>
102 
+          <img src="../../img/logo_info/erweima.png" />
103 
+        </div>
104 
+      </div>
41 105 
     </div>
106 
+    <script>
107 
+      $(function () {
108 
+        $(".footer_box .footer_left").click(function () {
109 
+          window.location.href = "/index.html";
110 
+        });
111 
+      });
112 
+    </script>
42 113 
   </body>
43 114 
 </html>

+ 32
- 3
sections/comm/header.html View File 

@@ -13,6 +13,22 @@
13 13 
         height: 0.8rem;
14 14 
         font-size: 0.14rem;
15 15 
       }
16 
+      .header_box .header_left {
17 
+        float: left;
18 
+        cursor: pointer;
19 
+      }
20 
+      .header_box .header_left > img {
21 
+        display: inline-block;
22 
+        margin-top: 0.24rem;
23 
+        margin-right: 0.08rem;
24 
+        height: 0.32rem;
25 
+      }
26 
+      .header_box .header_left .left_white {
27 
+        display: inline-block;
28 
+      }
29 
+      .header_box .header_left .left_gray {
30 
+        display: none;
31 
+      }
16 32 
       .header_box .header_right {
17 33 
         float: right;
18 34 
       }

@@ -104,7 +120,12 @@
104 120 
   </head>
105 121 
   <body>
106 122 
     <div class="header_box">
107 
-      <div></div>
123 
+      <div class="header_left">
124 
+        <img class="left_white" src="../../img/logo_info/header_logo.png" />
125 
+        <img class="left_white" src="../../img/logo_info/header_title.png" />
126 
+        <img class="left_gray" src="../../img/logo_info/header_logo1.png" />
127 
+        <img class="left_gray" src="../../img/logo_info/header_title1.png" />
128 
+      </div>
108 129 
       <div class="header_right">
109 130 
         <div data-nav="1" class="header_nav_item nav_1">
110 131 
           <div>产品中心</div>

@@ -121,16 +142,22 @@
121 142 
         <div data-nav="5" class="header_nav_item nav_5">
122 143 
           <div>新闻资讯</div>
123 144 
         </div>
124 
-        <div class="header_nav_lang">
145 
+        <div data-nav="6" class="header_nav_item nav_6">
146 
+          <div>中文 | English</div>
147 
+        </div>
148 
+        <!-- <div class="header_nav_lang">
125 149 
           中文
126 150 
           <div class="nav_language_en">
127 151 
             <a href="#" target="_blank">English</a>
128 152 
           </div>
129 
-        </div>
153 
+        </div> -->
130 154 
       </div>
131 155 
     </div>
132 156 
     <script>
133 157 
       $(function() {
158 
+        $(".header_box .header_left").click(function () {
159 
+          window.location.href = "/index.html";
160 
+        });
134 161 
         let nav_info = $(".header_root").data("nav_info");
135 162 
         $(".header_box > .header_right > .header_nav_item").removeClass("selected");
136 163 
         if (nav_info) {

@@ -150,6 +177,8 @@
150 177 
             console.log("申请试用");
151 178 
           } else if (nav_num === 5) {
152 179 
             console.log("新闻资讯");
180 
+          } else if (nav_num === 6) {
181 
+            console.log("语言切换");
153 182 
           }
154 183 
         });
155 184 
       });

Write Preview
Loading…
Cancel
Save