xhkjedu
/
xh_web
關注 6
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

星火官网第一次提交

master
wangzhonglu 1 年之前
父節點
b192709bc1
當前提交
275f73ff80
共有 26 個檔案被更改，包括 359 行新增 和 0 行删除
分割檢視 顯示文件統計
  1. 0
    0
      css/about.css
  2. 26
    0
      css/comm.css
  3. 0
    0
      css/index.css
  4. 0
    0
      css/news.css
  5. 0
    0
      css/product.css
  6. 0
    0
      css/service.css
  7. 0
    0
      css/trial.css
  8. 20
    0
      index.html
  9. 0
    0
      js/about.js
  10. 6
    0
      js/index.js
  11. 0
    0
      js/news.js
  12. 0
    0
      js/product.js
  13. 0
    0
      js/service.js
  14. 0
    0
      js/trial.js
  15. 5
    0
      librarys/jquery@1.12.4/jquery.min.js
  16. 18
    0
      librarys/swiper@3.4.2/swiper.jquery.min.js
  17. 15
    0
      librarys/swiper@3.4.2/swiper.min.css
  18. 10
    0
      sections/about.html
  19. 43
    0
      sections/comm/footer.html
  20. 158
    0
      sections/comm/header.html
  21. 10
    0
      sections/news.html
  22. 10
    0
      sections/product.html
  23. 10
    0
      sections/service.html
  24. 10
    0
      sections/trial.html
  25. 1
    0
      utils/index.js
  26. 17
    0
      utils/rem.js

+ 0
- 0
css/about.css 查看文件


+ 26
- 0
css/comm.css 查看文件 

@@ -0,0 +1,26 @@
1 
+html,
2 
+body {
3 
+  margin: 0;
4 
+  padding: 0;
5 
+  font-size: 100px;
6 
+  line-height: 1;
7 
+  font-family: "Microsoft YaHei", "微软雅黑" !important;
8 
+  color: #333;
9 
+  box-sizing: border-box;
10 
+  background-color: #F5F7F9;
11 
+  user-select: none;
12 
+}
13 
+.header_root {
14 
+  position: fixed;
15 
+  width: 100%;
16 
+  color: #fff;
17 
+  background-color: transparent;
18 
+}
19 
+.header_root.bg_white {
20 
+  color: #333;
21 
+  background-color: #fff;
22 
+}
23 
+.header_root:hover {
24 
+  color: #333;
25 
+  background-color: #fff;
26 
+}

+ 0
- 0
css/index.css 查看文件


+ 0
- 0
css/news.css 查看文件


+ 0
- 0
css/product.css 查看文件


+ 0
- 0
css/service.css 查看文件


+ 0
- 0
css/trial.css 查看文件


+ 20
- 0
index.html 查看文件 

@@ -0,0 +1,20 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>河南星火燎原软件科技有限公司</title>
8 
+    <link rel="stylesheet" href="./librarys/swiper@3.4.2/swiper.min.css" />
9 
+    <link rel="stylesheet" href="./css/comm.css" />
10 
+    <link rel="stylesheet" href="./css/index.css" />
11 
+    <script src="./utils/rem.js"></script>
12 
+  </head>
13 
+  <body>
14 
+    <div class="header_root"></div>
15 
+    <div class="footer_root"></div>
16 
+    <script src="./librarys/jquery@1.12.4/jquery.min.js"></script>
17 
+    <script src="./librarys/swiper@3.4.2/swiper.jquery.min.js"></script>
18 
+    <script src="./js/index.js"></script>
19 
+  </body>
20 
+</html>

+ 0
- 0
js/about.js 查看文件


+ 6
- 0
js/index.js 查看文件 

@@ -0,0 +1,6 @@
1 
+$(function () {
2 
+  $(".header_root").load("./sections/comm/header.html");
3 
+  $(".footer_root").load("./sections/comm/footer.html");
4 
+  // nav传值显示下划线
5 
+  $(".header_root").data("nav_info", null);
6 
+});

+ 0
- 0
js/news.js 查看文件


+ 0
- 0
js/product.js 查看文件


+ 0
- 0
js/service.js 查看文件


+ 0
- 0
js/trial.js 查看文件


+ 5
- 0
librarys/jquery@1.12.4/jquery.min.js
文件差異過大導致無法顯示
查看文件


+ 18
- 0
librarys/swiper@3.4.2/swiper.jquery.min.js
文件差異過大導致無法顯示
查看文件


+ 15
- 0
librarys/swiper@3.4.2/swiper.min.css
文件差異過大導致無法顯示
查看文件


+ 10
- 0
sections/about.html 查看文件 

@@ -0,0 +1,10 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+  </head>
9 
+  <body></body>
10 
+</html>

+ 43
- 0
sections/comm/footer.html 查看文件 

@@ -0,0 +1,43 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+    <style>
9 
+      .footer_box {
10 
+        position: relative;
11 
+        font-size: 0.14rem;
12 
+        text-align: center;
13 
+        font-size: 0.14rem;
14 
+        color: #666;
15 
+        line-height: 0.3rem;
16 
+        background-color: #F5F7F9;
17 
+      }
18 
+      .footer_box .footer_left {
19 
+        position: absolute;
20 
+        left: 0;
21 
+        top: 0;
22 
+        bottom: 0;
23 
+        margin: auto 0;
24 
+      }
25 
+      .footer_box .footer_right {
26 
+        position: absolute;
27 
+        right: 0;
28 
+        top: 0;
29 
+        bottom: 0;
30 
+        margin: auto 0;
31 
+      }
32 
+    </style>
33 
+  </head>
34 
+  <body>
35 
+    <div class="footer_box">
36 
+      <div>Copyright@2003 -2017 All Rights Reserved 豫ICP备17031890号-1</div>
37 
+      <div>联系地址：郑州市郑东新区崇德街与博学路交叉口向东300米星联创科中心7楼 河南星火燎原软件科技有限公司所有</div>
38 
+      <div>全国客服热线 (09:00-22:00) 0371-58605588</div>
39 
+      <div class="footer_left">星火云鸽</div>
40 
+      <div class="footer_right">微信扫码</div>
41 
+    </div>
42 
+  </body>
43 
+</html>

+ 158
- 0
sections/comm/header.html 查看文件 

@@ -0,0 +1,158 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+    <style>
9 
+      .header_box {
10 
+        position: relative;
11 
+        margin: 0 auto;
12 
+        width: 13rem;
13 
+        height: 0.8rem;
14 
+        font-size: 0.14rem;
15 
+      }
16 
+      .header_box .header_right {
17 
+        float: right;
18 
+      }
19 
+      .header_box .header_right > .header_nav_item {
20 
+        position: relative;
21 
+        float: left;
22 
+        margin-left: 0.55rem;
23 
+        height: 0.8rem;
24 
+        line-height: 0.8rem;
25 
+        cursor: pointer;
26 
+      }
27 
+      .header_box .header_right > .header_nav_lang {
28 
+        position: relative;
29 
+        float: left;
30 
+        margin-left: 0.55rem;
31 
+        height: 0.8rem;
32 
+        line-height: 0.8rem;
33 
+        cursor: pointer;
34 
+      }
35 
+      .header_box .header_right > .header_nav_item > div::after {
36 
+        content: "";
37 
+        width: 0;
38 
+        position: absolute;
39 
+        background: #2d8cf0;
40 
+        height: 0.04rem;
41 
+        bottom: 0;
42 
+        left: 50%;
43 
+        transform: translateX(-50%);
44 
+        -webkit-transform: translateX(-50%);
45 
+        transition: all 0.3s ease-out;
46 
+        -webkit-transition: all 0.3s ease-out;
47 
+      }
48 
+      .header_box .header_right > .header_nav_item:hover > div::after,
49 
+      .header_box .header_right > .header_nav_item.selected > div::after {
50 
+        width: 100%;
51 
+      }
52 
+      .header_box .header_right > .header_nav_lang .nav_language_en {
53 
+        background-color: #2d8cf0;
54 
+        position: absolute;
55 
+        top: 0.6rem;
56 
+        left: 50%;
57 
+        transform: translateX(-50%) translateY(50%);
58 
+        -webkit-transform: translateX(-50%) translateY(50%);
59 
+        padding: 0.06rem 0;
60 
+        -webkit-transition: all 0.2s ease-in-out;
61 
+        transition: all 0.2s ease-in-out;
62 
+        visibility: hidden;
63 
+        opacity: 0;
64 
+        z-index: 100;
65 
+        text-align: center;
66 
+        font-size: 0.14rem;
67 
+        line-height: 0.4rem;
68 
+        color: #fff;
69 
+        border-radius: 0.08rem;
70 
+      }
71 
+      .header_box .header_right > .header_nav_lang:hover .nav_language_en {
72 
+        display: block;
73 
+        visibility: visible;
74 
+        transform: translateX(-50%) translateY(0%);
75 
+        -webkit-transform: translateX(-50%) translateY(0%);
76 
+        opacity: 1;
77 
+      }
78 
+      .header_box
79 
+        .header_right
80 
+        > .header_nav_lang:hover
81 
+        .nav_language_en::after {
82 
+        border-left: 0.07rem solid transparent;
83 
+        border-right: 0.07rem solid transparent;
84 
+        border-top: 0.09660254rem solid #2d8cf0;
85 
+        width: 0;
86 
+        height: 0;
87 
+        content: "";
88 
+        position: absolute;
89 
+        top: -0.08rem;
90 
+        left: 50%;
91 
+        transform: translateX(-50%) rotate(180deg);
92 
+        -webkit-transform: translateX(-50%) rotate(180deg);
93 
+      }
94 
+      .header_box .header_right > .header_nav_lang:hover .nav_language_en a {
95 
+        color: #fff;
96 
+        display: block;
97 
+        padding: 0;
98 
+        margin: 0 0.12rem;
99 
+        transition: all 0.3s ease-out;
100 
+        -webkit-transition: all 0.3s ease-out;
101 
+        text-decoration: none;
102 
+      }
103 
+    </style>
104 
+  </head>
105 
+  <body>
106 
+    <div class="header_box">
107 
+      <div></div>
108 
+      <div class="header_right">
109 
+        <div data-nav="1" class="header_nav_item nav_1">
110 
+          <div>产品中心</div>
111 
+        </div>
112 
+        <div data-nav="2" class="header_nav_item nav_2">
113 
+          <div>服务案例</div>
114 
+        </div>
115 
+        <div data-nav="3" class="header_nav_item nav_3">
116 
+          <div>关于我们</div>
117 
+        </div>
118 
+        <div data-nav="4" class="header_nav_item nav_4">
119 
+          <div>申请试用</div>
120 
+        </div>
121 
+        <div data-nav="5" class="header_nav_item nav_5">
122 
+          <div>新闻资讯</div>
123 
+        </div>
124 
+        <div class="header_nav_lang">
125 
+          中文
126 
+          <div class="nav_language_en">
127 
+            <a href="#" target="_blank">English</a>
128 
+          </div>
129 
+        </div>
130 
+      </div>
131 
+    </div>
132 
+    <script>
133 
+      $(function() {
134 
+        let nav_info = $(".header_root").data("nav_info");
135 
+        $(".header_box > .header_right > .header_nav_item").removeClass("selected");
136 
+        if (nav_info) {
137 
+          $(".header_box > .header_right > .header_nav_item.nav_" + nav_info).addClass("selected");
138 
+        }
139 
+        $(".header_box > .header_right").on("click", ".header_nav_item", function (ev) {
140 
+          $(".header_box > .header_right > .header_nav_item").removeClass("selected");
141 
+          let nav_num = $(this).data("nav");
142 
+          $(".header_box > .header_right > .header_nav_item.nav_" + nav_num).addClass("selected");
143 
+          if (nav_num === 1) {
144 
+            console.log("产品中心");
145 
+          } else if (nav_num === 2) {
146 
+            console.log("服务案例");
147 
+          } else if (nav_num === 3) {
148 
+            console.log("关于我们");
149 
+          } else if (nav_num === 4) {
150 
+            console.log("申请试用");
151 
+          } else if (nav_num === 5) {
152 
+            console.log("新闻资讯");
153 
+          }
154 
+        });
155 
+      });
156 
+    </script>
157 
+  </body>
158 
+</html>

+ 10
- 0
sections/news.html 查看文件 

@@ -0,0 +1,10 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+  </head>
9 
+  <body></body>
10 
+</html>

+ 10
- 0
sections/product.html 查看文件 

@@ -0,0 +1,10 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+  </head>
9 
+  <body></body>
10 
+</html>

+ 10
- 0
sections/service.html 查看文件 

@@ -0,0 +1,10 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+  </head>
9 
+  <body></body>
10 
+</html>

+ 10
- 0
sections/trial.html 查看文件 

@@ -0,0 +1,10 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-cn">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <title>Document</title>
8 
+  </head>
9 
+  <body></body>
10 
+</html>

+ 1
- 0
utils/index.js 查看文件 

@@ -0,0 +1 @@
1 
+jQuery.extend({});

+ 17
- 0
utils/rem.js 查看文件 

@@ -0,0 +1,17 @@
1 
+(function (doc, win) {
2 
+  var docEl = doc.documentElement,
3 
+    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
4 
+    recalc = function () {
5 
+      var clientWidth = docEl.clientWidth; //获取设备尺寸
6 
+      if (!clientWidth) return;
7 
+      if (clientWidth >= 1920) {
8 
+        //设计稿宽度
9 
+        docEl.style.fontSize = "100px";
10 
+      } else {
11 
+        docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
12 
+      }
13 
+    };
14 
+  if (!doc.addEventListener) return;
15 
+  win.addEventListener(resizeEvt, recalc, false); //绑定事件
16 
+  doc.addEventListener("DOMContentLoaded", recalc, false);
17 
+})(document, window);

Write Preview
Loading…
取消
儲存