├── images ├── keji.jpg ├── favicon.ico ├── activity01-image.jpg ├── people-in-couch-1024248.jpg ├── business-woman-2697954_1920.jpg ├── watercrafts-on-river-3464632.jpg ├── man-wearing-black-suit-2955376.jpg ├── red-suspension-bridge-3493772.jpg ├── apple-laptop-notebook-office-39284.jpg ├── blur-close-up-code-computer-546819.jpg ├── person-holding-a-smartphone-892757.jpg ├── photo-of-imac-near-macbook-1029757.jpg ├── apple-apple-device-design-desk-285814.jpg ├── adult-business-computer-contemporary-380769.jpg ├── smiling-woman-wearing-black-sweater-1587009.jpg ├── bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg ├── gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg ├── person-using-black-and-white-smartphone-and-holding-blue-230544.jpg └── selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg ├── README.md ├── libs ├── glide │ ├── glide.core.min.css │ ├── glide.theme.min.css │ └── glide.min.js ├── smooth-scroll │ └── smooth-scroll.polyfills.min.js ├── scrollReveal │ └── scrollreveal.min.js ├── anime │ └── anime.min.js └── isotope │ └── isotope.pkgd.min.js ├── main.js ├── index.html ├── style.css └── LICENSE /images/keji.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/keji.jpg -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/favicon.ico -------------------------------------------------------------------------------- /images/activity01-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/activity01-image.jpg -------------------------------------------------------------------------------- /images/people-in-couch-1024248.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/people-in-couch-1024248.jpg -------------------------------------------------------------------------------- /images/business-woman-2697954_1920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/business-woman-2697954_1920.jpg -------------------------------------------------------------------------------- /images/watercrafts-on-river-3464632.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/watercrafts-on-river-3464632.jpg -------------------------------------------------------------------------------- /images/man-wearing-black-suit-2955376.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/man-wearing-black-suit-2955376.jpg -------------------------------------------------------------------------------- /images/red-suspension-bridge-3493772.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/red-suspension-bridge-3493772.jpg -------------------------------------------------------------------------------- /images/apple-laptop-notebook-office-39284.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/apple-laptop-notebook-office-39284.jpg -------------------------------------------------------------------------------- /images/blur-close-up-code-computer-546819.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/blur-close-up-code-computer-546819.jpg -------------------------------------------------------------------------------- /images/person-holding-a-smartphone-892757.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/person-holding-a-smartphone-892757.jpg -------------------------------------------------------------------------------- /images/photo-of-imac-near-macbook-1029757.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/photo-of-imac-near-macbook-1029757.jpg -------------------------------------------------------------------------------- /images/apple-apple-device-design-desk-285814.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/apple-apple-device-design-desk-285814.jpg -------------------------------------------------------------------------------- /images/adult-business-computer-contemporary-380769.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/adult-business-computer-contemporary-380769.jpg -------------------------------------------------------------------------------- /images/smiling-woman-wearing-black-sweater-1587009.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/smiling-woman-wearing-black-sweater-1587009.jpg -------------------------------------------------------------------------------- /images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg -------------------------------------------------------------------------------- /images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg -------------------------------------------------------------------------------- /images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg -------------------------------------------------------------------------------- /images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/11509tiger/Enterprise-website/HEAD/images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 商业化首页——星尘科技 2 | 3 | 响应式企业官网，预览请点击：https://11509tiger.github.io/Enterprise-website/index.html 4 | 5 | 技术要点： 6 | 使用原生JavaScript实现，页面整体采用grid布局，局部使用flex布局进行调整，使用media实现响应式页面。 7 | 使用的libs文件下包括下面js插件 8 | anime 9 | glide 10 | isotope 11 | scrollReveal 12 | smooth-scroll 13 | -------------------------------------------------------------------------------- /libs/glide/glide.core.min.css: -------------------------------------------------------------------------------- 1 | .glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl} 2 | -------------------------------------------------------------------------------- /libs/glide/glide.theme.min.css: -------------------------------------------------------------------------------- 1 | .glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing} 2 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const headerEl = document.querySelector("header"); 2 | const scrollToTop = document.querySelector(".scrollToTop"); 3 | // 监听窗口滑动事件 4 | window.addEventListener("scroll", () => { 5 | let height = headerEl.getBoundingClientRect().height; // 获取所占屏幕空间的矩形区域高度 6 | // 向下滑动距离超过800 7 | if (window.pageYOffset - height > 800) { 8 | if (!headerEl.classList.contains("sticky")) { // 先判断是否有这个属性，有就不添加，没有就添加 9 | headerEl.classList.add("sticky"); 10 | } 11 | } else { 12 | headerEl.classList.remove("sticky"); 13 | } 14 | // 向下滑动超过2000像素 就显示 15 | if (window.pageYOffset > 2000) { 16 | scrollToTop.style.display = "block"; 17 | } else { 18 | scrollToTop.style.display = "none"; 19 | } 20 | }) 21 | 22 | const glide = new Glide(".glide"); 23 | const captionsEL = document.querySelectorAll(".slide-caption"); 24 | // 获取轮播执行前后 状态值 25 | glide.on(["mount.after", "run.after"], () => { 26 | const caption = captionsEL[glide.index]; // 返回当前轮播的下标来获取captionsEL对应的标题 27 | anime({ 28 | targets: caption.children, 29 | opacity: [0, 1], 30 | duration: 400, // 动画执行时间 执行函数-线性 31 | easing: "linear", 32 | delay: anime.stagger(400, { start: 300 }), 33 | translateY: [anime.stagger([40, 10]), 0] // 从下方移动到上方 34 | }); 35 | }); 36 | // 轮播前还原透明度为0 这样每次轮播时都有动画效果 37 | glide.on("run.before", () => { 38 | document.querySelectorAll(".slide-caption > *").forEach(el => { 39 | el.style.opacity = 0; 40 | }); 41 | }); 42 | glide.mount(); 43 | // 成功案例 调用isotope.js 添加动画效果 44 | const isotope = new Isotope(".cases", { 45 | layoutMode: "fitRows", // 行模式布局，占满一行才到下一行 46 | itemSelector: ".case-item" // 指定每个案例的元素 47 | }); 48 | // 获取筛选按钮 实例 49 | const filterBtns = document.querySelector(".filter-btns"); 50 | // 给筛选按钮的容器设置监听事件 51 | filterBtns.addEventListener("click", e => { 52 | let { target } = e; // 获取target 53 | const filterOption = target.getAttribute("data-filter"); // 获取点击的按钮筛选的类别 54 | if (filterOption) { 55 | // 把已经有了 active 属性按钮取消 把点中的按钮加上 active 属性 forEach 取消所有按钮属性 56 | document 57 | .querySelectorAll(".filter-btn.active") 58 | .forEach(btn => btn.classList.remove("active")); 59 | target.classList.add("active"); 60 | isotope.arrange({ filter: filterOption }); // 把 filterOption 传进去 61 | } 62 | }) 63 | // 定义一个通用的配置项 64 | const staggeringOption = { 65 | // 延迟300毫秒出现 从下到上 有50像素的移动 动画执行500毫秒 动画函数 66 | delay: 300, 67 | distance: "50px", 68 | duration: 500, 69 | easing: "ease-in-out", 70 | origin: "bottom" 71 | } 72 | // 滑动时动画效果 引入配置项 把所有属性都拿出来 加上一个新的属性 73 | // 再返回一个新的对象--有6个属性（下一个对象延迟350毫秒出现）// 关于我们 服务流程 74 | ScrollReveal().reveal(".feature", { ...staggeringOption, interval: 350 }); 75 | ScrollReveal().reveal(".service-item", { ...staggeringOption, interval: 350 }); 76 | // 数据增长 设置背景视差效果 获取实例 把对象传进来 77 | const dataSectionEl = document.querySelector(".data-section"); 78 | ScrollReveal().reveal(".data-section", { 79 | // 对属性的内容进行动画 用函数把当前内容传进来 80 | // 从0到内部定义好的数字 动画执行时间2秒 按1增长 越来越快的动画效果 81 | beforeReveal: () => { 82 | anime({ 83 | targets: ".data-piece .num", 84 | innerHTML: el => { 85 | return [0, el.innerHTML]; 86 | }, 87 | duration: 2000, 88 | round: 1, 89 | easing: "easeInExpo" 90 | }); 91 | dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)`; 92 | } 93 | }); 94 | // 监听window滚动事件 95 | window.addEventListener("scroll", () => { 96 | // 获取bottom和top 当前容器到浏览器底部和顶部的距离 来判断是否在可见范围内 97 | const bottom = dataSectionEl.getBoundingClientRect().bottom; 98 | const top = dataSectionEl.getBoundingClientRect().top; 99 | // 判断出现 X轴不动 移动Y轴 100 | if (bottom >= 0 && top <= window.innerHeight) { 101 | dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`; 102 | } 103 | }); 104 | // 初始化scroll实例 传递选择器并对其进行监听 配置固定的导航 并向下滚动多80px 105 | const scroll = new SmoothScroll('nav a[href*="#"], .scrollToTop a[href*="#"]', { 106 | header: "header", 107 | offset: 80 108 | }); 109 | // 添加监听事件 当开始滚动时 全屏导航打开状态 就取消这个状态 110 | document.addEventListener("scrollStart", () => { 111 | if (headerEl.classList.contains("open")) { 112 | headerEl.classList.remove("open"); 113 | } 114 | }); 115 | // 监听探索更多--关于我们 注册点击事件 利用上面初始化好的scroll 调用函数 把参数传递进来 116 | const exploreBtnEls = document.querySelectorAll(".explore-btn"); 117 | exploreBtnEls.forEach(exploreBtnEl => { 118 | exploreBtnEl.addEventListener("click", () => { 119 | scroll.animateScroll(document.querySelector("#about-us")); 120 | }); 121 | }); 122 | // 折叠按钮 获取实例 添加点击事件 123 | const burgerEl = document.querySelector(".burger"); 124 | burgerEl.addEventListener("click", () => { 125 | headerEl.classList.toggle("open"); 126 | }) 127 | 128 | -------------------------------------------------------------------------------- /libs/smooth-scroll/smooth-scroll.polyfills.min.js: -------------------------------------------------------------------------------- 1 | /*! smooth-scroll v16.1.2 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */ 2 | window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,n=(this.document||this.ownerDocument).querySelectorAll(e),o=this;do{for(t=n.length;0<=--t&&n.item(t)!==o;);}while(t<0&&(o=o.parentElement));return o}),(function(){if("function"==typeof window.CustomEvent)return;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e})(),(function(){for(var r=0,e=["ms","moz","webkit","o"],t=0;to.durationMax?o.durationMax:o.durationMin&&a=v)return M.cancelScroll(!0),o=t,a=u,0===(n=i)&&document.body.focus(),a||(n.focus(),document.activeElement!==n&&(n.setAttribute("tabindex","-1"),n.focus(),n.style.outline="none"),q.scrollTo(0,o)),H("scrollStop",s,i,c),!(C=m=null)},b=function(e){var t,n,o;m||(m=e),w+=e-m,d=l+y*(n=r=1<(r=0===S?0:w/S)?1:r,"easeInQuad"===(t=s).easing&&(o=n*n),"easeOutQuad"===t.easing&&(o=n*(2-n)),"easeInOutQuad"===t.easing&&(o=n<.5?2*n*n:(4-2*n)*n-1),"easeInCubic"===t.easing&&(o=n*n*n),"easeOutCubic"===t.easing&&(o=--n*n*n+1),"easeInOutCubic"===t.easing&&(o=n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1),"easeInQuart"===t.easing&&(o=n*n*n*n),"easeOutQuart"===t.easing&&(o=1- --n*n*n*n),"easeInOutQuart"===t.easing&&(o=n<.5?8*n*n*n*n:1-8*--n*n*n*n),"easeInQuint"===t.easing&&(o=n*n*n*n*n),"easeOutQuint"===t.easing&&(o=1+--n*n*n*n*n),"easeInOutQuint"===t.easing&&(o=n<.5?16*n*n*n*n*n:1+16*--n*n*n*n*n),t.customEasing&&(o=t.customEasing(n)),o||n),q.scrollTo(0,Math.floor(d)),E(d,g)||(C=q.requestAnimationFrame(b),m=e)};0===q.pageYOffset&&q.scrollTo(0,0),f=i,h=s,u||history.pushState&&h.updateURL&&history.pushState({smoothScroll:JSON.stringify(h),anchor:f.id},document.title,f===document.documentElement?"#top":"#"+f.id),"matchMedia"in q&&q.matchMedia("(prefers-reduced-motion)").matches?q.scrollTo(0,Math.floor(g)):(H("scrollStart",s,i,c),M.cancelScroll(!0),q.requestAnimationFrame(b))}};var t=function(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(a=e.target.closest(o))&&"a"===a.tagName.toLowerCase()&&!e.target.closest(A.ignore)&&a.hostname===q.location.hostname&&a.pathname===q.location.pathname&&/#/.test(a.href)){var t,n;try{t=r(decodeURIComponent(a.hash))}catch(e){t=r(a.hash)}if("#"===t){if(!A.topOnEmptyHash)return;n=document.documentElement}else n=document.querySelector(t);(n=n||"#top"!==t?n:document.documentElement)&&(e.preventDefault(),(function(e){if(history.replaceState&&e.updateURL&&!history.state){var t=q.location.hash;t=t||"",history.replaceState({smoothScroll:JSON.stringify(e),anchor:t||q.pageYOffset},document.title,t||q.location.href)}})(A),M.animateScroll(n,a))}},n=function(e){if(null!==history.state&&history.state.smoothScroll&&history.state.smoothScroll===JSON.stringify(A)){var t=history.state.anchor;"string"==typeof t&&t&&!(t=document.querySelector(r(history.state.anchor)))||M.animateScroll(t,null,{updateURL:!1})}};M.destroy=function(){A&&(document.removeEventListener("click",t,!1),q.removeEventListener("popstate",n,!1),M.cancelScroll(),C=O=a=A=null)};return (function(){if(!("querySelector"in document&&"addEventListener"in q&&"requestAnimationFrame"in q&&"closest"in q.Element.prototype))throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.";M.destroy(),A=F(I,e||{}),O=A.header?document.querySelector(A.header):null,document.addEventListener("click",t,!1),A.updateURL&&A.popstate&&q.addEventListener("popstate",n,!1)})(),M}})); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 星尘科技—创新型网络技术企业 14 | 15 | 16 | 17 | 18 |
19 | 20 | 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 |
43 |
44 |

让科技如星尘般闪烁

45 |

科技创新大平台，智慧生活新引擎。

46 | 47 |
48 |
49 | 50 |
51 |
52 |
53 |

目标是星尘大海

54 |

凝聚科技创意，成就创新梦想。

55 | 56 |
57 |
58 | 59 | 60 |
61 |
62 |
63 | 64 |
65 | 67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 |
75 |
76 |

关于我们

77 |

网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网站营销活动策划相关的企业组织。

78 |
79 |
80 | 81 |

品牌创意

82 |

为企业设计独特的并能完美呈现企业价值观的视觉

83 |
84 |
85 | 86 |

整合营销

87 |

通过市场进行分析、制定网络营销战略、实施策略

88 |
89 |
90 | 91 |

电子商务

92 |

根据企业需求，开设不同的销售渠道，进行网上直销

93 |
94 |
95 | 96 |

网页设计

97 |

准确根据企业向浏览者传递的信息进行网站功能策划

98 |
99 |
100 | 101 |

网站优化

102 |

合理设计，并将网站推广到国内各大知名网站及搜索引擎

103 |
104 |
105 | 106 |

网站架构

107 |

定位目标群体并通过绑定域名和服务器，把网站展现给全世界

108 |
109 |
110 |
111 |
112 |

成功案例

113 |
114 | 115 | 116 | 117 | 118 |
119 |
120 |
121 | 122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 |
133 | 134 |
135 |
136 | 137 |
138 |
139 | 140 |
141 |
142 | 143 |
144 |
145 |
146 |
147 |

服务流程

148 |

网络综合公司，提供包括网络基础服务（如域名、主机、邮箱）和网络增值服务（如网络建设和推广，网站优化）等业务

149 |
150 |
151 | 152 |

需求沟通

153 |

客户提出网站建设的基本需求，包括设计需求和功能需求

154 |
155 |
156 | 157 |

项目评估

158 |

根据客户提出的需求进行评估，估算出相应的时间与费用

159 |
160 |
161 | 162 |

签订合同

163 |

合作双方确认费用、工期、合作要求的基础上，双方共同签订合同

164 |
165 |
166 | 167 |

提案阶段

168 |

完成网站初稿DEMO设计，包括首页风格，内页风格页面

169 |
170 |
171 | 172 |

制作阶段

173 |

完成所有页面的设计，进行程序开发以及前后台的页面整合

174 |
175 |
176 | 177 |

网站验收

178 |

根据合同条款进行网站验收，并签署网站验收确认单

179 |
180 |
181 |
182 |
183 |

团队介绍

184 |
185 |
186 |
187 | 188 |
189 |

Jack

190 |

前端工程师

191 | 197 |
198 |
199 |
200 | 201 |
202 |

Mary

203 |

UI设计师

204 | 210 |
211 |
212 |
213 | 214 |
215 |

Linda

216 |

后端工程师

217 | 223 |
224 |
225 |
226 | 227 |
228 |

Ewan

229 |

市场专员

230 | 236 |
237 |
238 |
239 |
240 |
241 | 242 |
2918
243 |
行代码
244 |
245 |
246 | 247 |
319
248 |
个奖项
249 |
250 |
251 | 252 |
1588
253 |
位客户
254 |
255 |
256 | 257 |
200
258 |
个项目
259 |
260 |
261 |
262 |

公司动态

263 |

关注公司动态，第一时间获取一手消息

264 |
265 |
266 |
267 | 268 |
269 |
270 |

271 | 2020年1月2日 272 |

273 |

33条评论

274 |
275 |

星尘科技！不一样的网络公司

276 |
网络公司原本指的是提供网络服务的互联网内容提供商ICP公司，提供互联网接入的ISP公司，提供内容托管的IDC供应商，还有无线接入、网络游戏、网络视频、网络培训、网络销售。
277 | 278 |
279 |
280 |
281 | 282 |
283 |
284 |

285 | 2020年2月3日 286 |

287 |

66条评论

288 |
289 |

星尘科技！不一样的网络公司

290 |
网络公司原本指的是提供网络服务的互联网内容提供商ICP公司，提供互联网接入的ISP公司，提供内容托管的IDC供应商，还有无线接入、网络游戏、网络视频、网络培训、网络销售。
291 | 292 |
293 |
294 |
295 | 296 |
297 |
298 |

299 | 2020年3月4日 300 |

301 |

88条评论

302 |
303 |

星尘科技！不一样的网络公司

304 |
网络公司原本指的是提供网络服务的互联网内容提供商ICP公司，提供互联网接入的ISP公司，提供内容托管的IDC供应商，还有无线接入、网络游戏、网络视频、网络培训、网络销售。
305 | 306 |
307 |
308 |
309 |
310 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | -------------------------------------------------------------------------------- /libs/scrollReveal/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.5 2 | 3 | Copyright 2018 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return g.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return g.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function v(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=y(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),rn.running=_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.1.0",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v-1&&_.splice(o,1);for(var s=0;s * { 155 | opacity: 0; 156 | } 157 | 158 | .backdrop { 159 | background: var(--backdrop-color); 160 | z-index: 60; 161 | position: absolute; 162 | width: 100%; 163 | height: 100%; 164 | left: 0; 165 | top: 0; 166 | opacity: 0.5; 167 | } 168 | 169 | .explore-btn { 170 | padding: 14px 32px; 171 | background-color: var(--primary-color); 172 | border: 0; 173 | border-radius: 4px; 174 | color: var(--text-color-lightest); 175 | font-size: 18px; 176 | cursor: pointer; 177 | outline: none; 178 | } 179 | 180 | /* 内容区域 */ 181 | /* 通用样式 */ 182 | 183 | .content-wrapper { 184 | display: flex; 185 | justify-content: center; 186 | align-items: center; 187 | flex-direction: column; 188 | } 189 | /* 每个列水平居中对齐 */ 190 | section { 191 | display: grid; 192 | justify-items: center; 193 | max-width: 1180px; 194 | padding: 0 80px; 195 | } 196 | 197 | .section-bg { 198 | position: relative; 199 | } 200 | /* 放在内容的最下方 */ 201 | .section-bg::before { 202 | content: ""; 203 | display: block; 204 | position: absolute; 205 | background-color: #f9fbfb; 206 | width: 100vw; 207 | height: 100%; 208 | z-index: -1; 209 | } 210 | 211 | .title1 { 212 | font-size: 34px; 213 | color: var(--text-color-darker); 214 | } 215 | 216 | .title1::after { 217 | content: ""; 218 | display: block; 219 | width: 80%; 220 | height: 4px; 221 | background-color: var(--primary-color); 222 | margin-top: 14px; 223 | transform: translateX(10%); 224 | } 225 | 226 | .intro { 227 | margin: 28px 0 60px 0; 228 | font-size: 18px; 229 | color: var(--text-color-dark-gray); 230 | } 231 | 232 | /* 关于我们 */ 233 | .about-us { 234 | padding-bottom:32px; 235 | } 236 | 237 | .features { 238 | display: grid; 239 | grid-template-columns: repeat(3, 1fr); 240 | grid-template-rows: 126px 126px; 241 | column-gap: 5vw; 242 | } 243 | /* 给自定义的行和列名字 */ 244 | .feature { 245 | display: grid; 246 | grid-template-areas: 247 | "icon title" 248 | "icon content"; 249 | grid-template-columns: 60px 1fr; 250 | grid-template-rows: 1fr 3fr; 251 | } 252 | 253 | .feature i.fas { 254 | grid-area: icon; 255 | font-size: 34px; 256 | color: var(--primary-color); 257 | } 258 | 259 | .feature-title { 260 | grid-area: title; 261 | font-size: 18px; 262 | color: var(--text-color-darker); 263 | } 264 | 265 | .feature-content { 266 | grid-area: content; 267 | color: var(--text-color-gray); 268 | margin-top: 8px; 269 | } 270 | 271 | /* 成功案例 */ 272 | .showcases { 273 | max-width: unset; 274 | padding: 0; 275 | padding-top: 72px; 276 | } 277 | 278 | .filter-btns { 279 | margin-top: 54px; 280 | margin-bottom: 38px; 281 | } 282 | 283 | .filter-btn { 284 | margin: 0 7px; 285 | background-color: var(--secondary-color); 286 | border: 0; 287 | color: var(--text-color-dark-gray); 288 | padding: 8px 18px; 289 | border-radius: 4px; 290 | cursor: pointer; 291 | transition: 0.4s; 292 | } 293 | 294 | .filter-btn:focus, 295 | .filter-btn:active { 296 | outline: none; 297 | } 298 | 299 | .filter-btn.active, 300 | .filter-btn:hover{ 301 | background-color: var(--primary-color); 302 | color: white; 303 | } 304 | 305 | .showcases .cases { 306 | width: 100vw; 307 | } 308 | 309 | .showcases .case-item { 310 | width: 25vw; 311 | height: 20vw; 312 | overflow: hidden; 313 | } 314 | 315 | .case-item img { 316 | height: 100%; 317 | object-fit: cover; 318 | } 319 | 320 | /* 服务流程 */ 321 | .service { 322 | padding-top: 131px; 323 | } 324 | 325 | .services { 326 | display: grid; 327 | grid-template-columns: repeat(3,1fr); 328 | grid-template-rows: 1fr 1fr; 329 | column-gap: 38px; 330 | row-gap: 34px; 331 | } 332 | 333 | .service-item { 334 | display: grid; 335 | grid-template-areas: 336 | "icon title" 337 | "icon content"; 338 | grid-template-columns: 70px 1fr; 339 | grid-template-rows: 1fr 3fr; 340 | padding: 24px; 341 | box-shadow: 0px 0px 18px rgba(0,0,0,0.06); 342 | } 343 | 344 | .service-item i.fas { 345 | grid-area: icon; 346 | font-size: 42px; 347 | color: var(--primary-color); 348 | padding-top: 6px; 349 | } 350 | 351 | .service-title { 352 | grid-area: title; 353 | font-size: 24px; 354 | color: var(--text-color-darker); 355 | } 356 | 357 | .service-content { 358 | grid-area: content; 359 | color: var(--text-color-gray); 360 | margin-top: 8px; 361 | font-size: 16px; 362 | line-height: 30px; 363 | } 364 | 365 | /* 团队介绍 */ 366 | .team-intro { 367 | margin-top: 48px; 368 | padding-top: 62px; 369 | padding-bottom: 52px; 370 | } 371 | 372 | .team-members { 373 | display: grid; 374 | grid-template-columns: repeat(4,1fr); 375 | column-gap: 24px; 376 | margin-top: 86px; 377 | } 378 | 379 | .team-member { 380 | background-color: white; 381 | box-shadow: 0px 0px 24px rgba(0,0,0,0.2); 382 | text-align: center; 383 | padding-bottom: 28px; 384 | transition: 0.4s; 385 | display: grid; 386 | justify-items: center; 387 | } 388 | 389 | .profile-image { 390 | overflow: hidden; 391 | } 392 | 393 | .profile-image img { 394 | width: 100%; 395 | height: 264px; 396 | object-fit: cover; 397 | object-position: top center; 398 | } 399 | 400 | .team-member .name { 401 | margin-top: 18px; 402 | font-size: 18px; 403 | font-weight: 500; 404 | color: var(--text-color-dark); 405 | } 406 | 407 | .team-member .position { 408 | color: var(--text-color-dark-gray); 409 | margin-top: 12px; 410 | margin-bottom: 18px; 411 | } 412 | 413 | .social-links { 414 | width: 100%; 415 | max-width: 200px; 416 | display: flex; 417 | justify-content: space-between; 418 | padding: 0 42px; 419 | } 420 | 421 | .social-links li { 422 | list-style: none; 423 | } 424 | 425 | .social-links li a { 426 | color: var(--text-color-dark); 427 | text-decoration: none; 428 | } 429 | /* 照片放大效果 */ 430 | .team-member:hover { 431 | transform: translateY(-20px) scale(1.05); 432 | box-shadow: 0px 0px 36px reba(0,0,0,0.1); 433 | } 434 | 435 | /* 数据部分 */ 436 | .data-section { 437 | max-width: unset; 438 | width: 100vw; 439 | height: 255px; 440 | background-image: url(images/adult-business-computer-contemporary-380769.jpg); 441 | background-size: cover; 442 | background-position: center; 443 | display: grid; 444 | /* 最大值不能超过220px 最小值自行调整 */ 445 | grid-template-columns: repeat(4,minmax(auto,220px)); 446 | justify-content: center; 447 | align-items: center; 448 | position: relative; 449 | z-index: 20; 450 | } 451 | 452 | .data-section::before{ 453 | content:""; 454 | display: block; 455 | position: absolute; 456 | background-color: var(--backdrop-color); 457 | width: 100%; 458 | height: 100%; 459 | z-index: 1; 460 | } 461 | 462 | .data-piece { 463 | width: 250px; 464 | display: grid; 465 | grid-template-rows: repeat(3,1fr); 466 | justify-items: center; 467 | color: white; 468 | position: relative; 469 | z-index: 40; 470 | } 471 | 472 | .data-piece i.fas { 473 | font-size: 44px; 474 | } 475 | 476 | .data-piece .num { 477 | margin-top: 7px; 478 | font-size: 41px; 479 | font-weight: 600; 480 | } 481 | 482 | .data-piece .data-desc { 483 | font-size: 18px; 484 | font-weight: 500; 485 | } 486 | 487 | /* 公司动态 */ 488 | .company-activities { 489 | margin-top: 88px; 490 | } 491 | 492 | .activities { 493 | display: grid; 494 | grid-template-columns: repeat(3,1fr); 495 | column-gap: 24px; 496 | } 497 | 498 | .activity { 499 | box-shadow: 0px 0px 24px rgba(0,0,0,0.1); 500 | padding: 24px; 501 | transition: 0.4s; 502 | } 503 | 504 | .act-image-wrapper { 505 | height: 255px; 506 | overflow: hidden; 507 | /* 与上面的24像素重叠，然后抵消 */ 508 | margin: -24px; 509 | margin-bottom: 0; 510 | } 511 | 512 | .act-image-wrapper img { 513 | min-height: 300px; 514 | object-fit: cover; 515 | } 516 | 517 | .activity .meta { 518 | margin-top: 20px; 519 | margin-bottom: 12px; 520 | color: var(--text-color-light-gray); 521 | font-size: 12px; 522 | display: flex; 523 | } 524 | 525 | /* 直接取评论元素 */ 526 | .activity .meta >p:last-child { 527 | margin-left: 36px; 528 | } 529 | 530 | .act-title { 531 | color: var(--text-color-dark); 532 | font-size: 18px; 533 | margin-bottom: 16px; 534 | } 535 | 536 | .activity article { 537 | color: var(--text-color-gray); 538 | letter-spacing: 0.54px; 539 | line-height: 24px; 540 | } 541 | 542 | .readmore-btn { 543 | border: 0; 544 | color: white; 545 | background-color: var(--primary-color); 546 | border-radius: 4px; 547 | padding: 6px 14px; 548 | margin-top: 24px; 549 | } 550 | 551 | .activity:hover { 552 | transform: translateY(-20px) scale(1.05); 553 | box-shadow: 0px 0px 36px rgba(0,0,0,0.1); 554 | } 555 | 556 | /* 底部信息 */ 557 | footer { 558 | margin-top: 124px; 559 | background-color: #181818; 560 | display: grid; 561 | justify-items: center; 562 | padding-top: 72px; 563 | padding-bottom: 24px; 564 | } 565 | 566 | .footer-menus { 567 | width: 100%; 568 | max-width: 1180px; 569 | display: grid; 570 | grid-template-columns: 2fr repeat(4,1fr); 571 | padding: 0 80px; 572 | position: relative; 573 | } 574 | 575 | .menu-title { 576 | font-size: 16px; 577 | color: white; 578 | font-weight: 500; 579 | margin-bottom: 20px; 580 | } 581 | 582 | .contact-us { 583 | justify-self: start; 584 | color: var(--text-color-lightest); 585 | } 586 | 587 | .contact-us p:not(:first-child) { 588 | padding-bottom: 16px; 589 | } 590 | 591 | .menu-items li { 592 | list-style: none; 593 | padding-bottom: 8px; 594 | } 595 | 596 | .menu-items li a { 597 | text-decoration: none; 598 | font-weight: 300; 599 | color: var(--text-color-lightest); 600 | } 601 | 602 | .icp-info { 603 | margin-top: 24px; 604 | margin-bottom: 16px; 605 | } 606 | /* 从第一个到最后一个 */ 607 | .icp-info, 608 | .rights { 609 | grid-column: 1/-1; 610 | justify-self: center; 611 | color: white; 612 | } 613 | 614 | .scrollToTop { 615 | display: none; 616 | position: relative; 617 | z-index: 300; 618 | } 619 | 620 | .scrollToTop a { 621 | width: 32px; 622 | height: 32px; 623 | border-radius: 4px; 624 | display: flex; 625 | align-items: center; 626 | justify-content: center; 627 | background-color: var(--primary-color); 628 | color: white; 629 | text-decoration: none; 630 | position: fixed; 631 | bottom: 60px; 632 | right: 30px; 633 | } 634 | 635 | @media (max-width: 1100px){ 636 | header nav { 637 | display: none; 638 | } 639 | header { 640 | grid-template-columns: repeat(2, 1fr); 641 | } 642 | 643 | header .burger { 644 | display: block; 645 | width: 20px; 646 | height: 6px; 647 | position: relative; 648 | justify-self: end; 649 | cursor: pointer; 650 | } 651 | 652 | .burger-line1, 653 | .burger-line2, 654 | .burger-line3{ 655 | width: 20px; 656 | height: 2px; 657 | background-color: var(--text-color-lightest); 658 | } 659 | 660 | .burger-line1 { 661 | position: absolute; 662 | top: -6px; 663 | } 664 | .burger-line3 { 665 | position: absolute; 666 | top: 6px; 667 | } 668 | 669 | header.open nav { 670 | display: grid; 671 | position: absolute; 672 | left: 0; 673 | top: 0; 674 | width: 100vw; 675 | height: 100vh; 676 | background-color: white; 677 | grid-auto-rows: max-content; 678 | justify-items: end; 679 | padding: 0 40px; 680 | opacity: 0; 681 | animation: slideDown 0.6s ease-out forwards; 682 | } 683 | 684 | header.open nav > * { 685 | color: var(--text-color-darker); 686 | animation: showMenu 0.5s linear forwards 0.4s; 687 | font-size: 18px; 688 | margin: 4px 0; 689 | opacity: 0; 690 | } 691 | 692 | header.open nav > i.fas { 693 | margin-top: 10px; 694 | } 695 | 696 | header.open .burger-line1, 697 | header.open .burger-line2, 698 | header.open .burger-line3, 699 | header.sticky .burger-line1, 700 | header.sticky .burger-line2, 701 | header.sticky .burger-line3 { 702 | background-color: var(--text-color-darker); 703 | transition: 0.4s ease; 704 | } 705 | 706 | header.open .burger-line1 { 707 | transform: rotate(45deg) translate(3px,5px); 708 | } 709 | 710 | header.open .burger-line2 { 711 | transform: translateX(5px); 712 | opacity: 0; 713 | } 714 | 715 | header.open .burger-line3 { 716 | transform: rotate(-45deg) translate(3px,-5px); 717 | } 718 | 719 | header.open .logo { 720 | z-index: 40; 721 | color: var(--text-color-darker); 722 | } 723 | 724 | @keyframes slideDown { 725 | from { 726 | height: 0; 727 | opacity: 0; 728 | } 729 | 730 | to { 731 | height: 100vh; 732 | padding-top: 80px; 733 | opacity: 1; 734 | } 735 | } 736 | 737 | @keyframes showMenu { 738 | from { 739 | opacity: 0; 740 | transform: translateY(-1vh); 741 | } 742 | 743 | to { 744 | opacity: 1; 745 | transform: translateY(0); 746 | } 747 | } 748 | 749 | .service-item .service-title { 750 | font-size: 20px; 751 | } 752 | 753 | .service-item .service-content { 754 | font-size: 14px; 755 | line-height: 24px; 756 | } 757 | 758 | .team-members { 759 | grid-template-columns: repeat(2,1fr); 760 | row-gap: 36px; 761 | column-gap: 6vw; 762 | } 763 | 764 | .activities { 765 | grid-template-columns: repeat(2,1fr); 766 | row-gap: 36px; 767 | } 768 | } 769 | 770 | @media(max-width: 992px) { 771 | .slide-caption h1 { 772 | font-size: 48px; 773 | } 774 | 775 | .slide-caption h3 { 776 | font-size: 18px; 777 | } 778 | 779 | .features, .services { 780 | grid-template-columns: repeat(2,1fr); 781 | grid-template-rows: unset; /* 取消固定行模式布局 */ 782 | } 783 | 784 | .data-section { 785 | grid-template-columns: repeat(2,minmax(200px,auto)); 786 | padding: 24px 0; 787 | height: auto; 788 | row-gap: 24px; 789 | background-size: 200%; 790 | } 791 | 792 | .showcases .case-item { 793 | width: calc(100vw / 3); 794 | } 795 | } 796 | 797 | @media(max-width: 768px) { 798 | section, 799 | .footer-menus { 800 | padding: 0 40px; 801 | } 802 | 803 | .footer-menus { 804 | grid-template-columns: 2fr repeat(2,1fr); 805 | row-gap: 24px; 806 | } 807 | 808 | .contact-us { 809 | grid-row: 1/3; 810 | } 811 | 812 | .footer-menu { 813 | text-align: right; 814 | } 815 | 816 | .activities { 817 | grid-template-columns: 1fr; 818 | row-gap: 36px; 819 | } 820 | 821 | .data-section { 822 | grid-template-columns: 1fr; 823 | background-size: 400%; 824 | } 825 | 826 | .team-members { 827 | grid-template-columns: minmax(200px,400px); 828 | } 829 | 830 | .features, .services { 831 | grid-template-columns: 1fr; 832 | } 833 | 834 | .showcases .case-item { 835 | width: calc(100vw/2); 836 | height: 30vw; 837 | } 838 | } 839 | 840 | @media (max-width: 576px) { 841 | .slide-caption h1 { 842 | font-size: 28px; 843 | } 844 | 845 | .slide-caption h3 { 846 | font-size: 14px; 847 | } 848 | 849 | .explore-btn { 850 | font-size: 14px; 851 | padding: 8px 18px; 852 | } 853 | 854 | .showcases .case-item { 855 | width: 100vw; 856 | height: 60vw; 857 | } 858 | 859 | .footer-menus { 860 | grid-template-columns: 1fr; 861 | } 862 | 863 | .footer-menu { 864 | justify-self: start; 865 | text-align: left; 866 | } 867 | } 868 | -------------------------------------------------------------------------------- /libs/glide/glide.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Glide.js v3.3.0 3 | * (c) 2013-2019 Jędrzej Chałubek (http://jedrzejchalubek.com/) 4 | * Released under the MIT License. 5 | */ 6 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Glide=e()}(this,function(){"use strict";var n={type:"slider",startAt:0,perView:1,focusAt:0,gap:10,autoplay:!1,hoverpause:!0,keyboard:!0,bound:!1,swipeThreshold:80,dragThreshold:120,perSwipe:"|",touchRatio:.5,touchAngle:45,animationDuration:400,rewind:!0,rewindDuration:800,animationTimingFunc:"cubic-bezier(.165, .840, .440, 1)",waitForTransition:!0,throttle:10,direction:"ltr",peek:0,breakpoints:{},classes:{swipeable:"glide--swipeable",dragging:"glide--dragging",direction:{ltr:"glide--ltr",rtl:"glide--rtl"},type:{slider:"glide--slider",carousel:"glide--carousel"},slide:{clone:"glide__slide--clone",active:"glide__slide--active"},arrow:{disabled:"glide__arrow--disabled"},nav:{active:"glide__bullet--active"}}};function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t=function(t,e,n){return e&&s(t.prototype,e),n&&s(t,n),t};function s(t,e){for(var n=0;n":"<","<":">","=":"="};function A(t,e){return{modify:function(t){return e.Direction.is("rtl")?-t:t}}}function P(i,r,s){var o=[function(t,n){return{modify:function(t){var e=Math.floor(t/n.Sizes.slideWidth);return t+n.Gaps.value*e}}},function(t,e){return{modify:function(t){return t+e.Clones.grow/2}}},function(n,i){return{modify:function(t){if(0<=n.settings.focusAt){var e=i.Peek.value;return u(e)?t-e.before:t-e}return t}}},function(s,o){return{modify:function(t){var e=o.Gaps.value,n=o.Sizes.width,i=s.settings.focusAt,r=o.Sizes.slideWidth;return"center"===i?t-(n/2-r/2):t-r*i-e*i}}}].concat(i._t,[A]);return{mutate:function(t){for(var e=0;e")||r.Run.isOffset("|>")?t+(e-n):(e+n)%t},getTravelDistance:function(){var t=r.Sizes.slideWidth*i.settings.perView;return r.Run.isOffset(">")||r.Run.isOffset("|>")?-1*t:t}};return n.on("move",function(t){if(!i.isType("carousel")||!r.Run.isOffset())return s.set(t.movement);r.Transition.after(function(){n.emit("translate.jump"),s.set(r.Sizes.slideWidth*i.index)});var e=r.Sizes.slideWidth*r.Translate.getStartIndex();return s.set(e-r.Translate.getTravelDistance())}),n.on("destroy",function(){s.remove()}),s},Transition:function(n,i,t){var r=!1,e={compose:function(t){var e=n.settings;return r?t+" 0ms "+e.animationTimingFunc:t+" "+this.duration+"ms "+e.animationTimingFunc},set:function(t){var e=0"!==i||">"!==n)if("<"!==i||"<"!==n){if("|"===i&&(r=u.settings.perView||1),">"===i||"|"===i&&">"===n){var s=function(t){var e=u.index;if(u.isType("carousel"))return e+t;return e+(t-e%t)}(r);return e=this.length},isOffset:function(t){var e=0"===e?"|"===this.move.direction&&">"===this.move.steps:"|<"===e?"|"===this.move.direction&&"<"===this.move.steps:this.move.direction===e):this._o},isBound:function(){return u.isType("slider")&&"center"!==u.settings.focusAt&&u.settings.bound}};return d(a,"move",{get:function(){return this._m},set:function(t){var e=t.substr(1);this._m={direction:t.substr(0,1),steps:e?y(e)?y(e):e:0}}}),d(a,"length",{get:function(){var t=u.settings,e=n.Html.slides.length;return this.isBound()?e-1-(y(t.perView)-1)+y(t.focusAt):e-1}}),d(a,"offset",{get:function(){return this._o}}),a},Swipe:function(d,h,v){var r=new H,p=0,m=0,g=0,n=!1,s=!!C&&{passive:!0},t={mount:function(){this.bindSwipeStart()},start:function(t){if(!n&&!d.disabled){this.disable();var e=this.touches(t);p=null,m=y(e.pageX),g=y(e.pageY),this.bindSwipeMove(),this.bindSwipeEnd(),v.emit("swipe.start")}},move:function(t){if(!d.disabled){var e=d.settings,n=e.touchAngle,i=e.touchRatio,r=e.classes,s=this.touches(t),o=y(s.pageX)-m,u=y(s.pageY)-g,a=Math.abs(o<<2),c=Math.abs(u<<2),l=Math.sqrt(a+c),f=Math.sqrt(c);if(!(180*(p=Math.asin(f/l))/Math.PI")):h.Move.make(),h.Html.root.classList.remove(r.dragging),this.unbindSwipeMove(),this.unbindSwipeEnd(),v.emit("swipe.end")}},bindSwipeStart:function(){var e=this,t=d.settings,n=t.swipeThreshold,i=t.dragThreshold;n&&r.on(L[0],h.Html.wrapper,function(t){e.start(t)},s),i&&r.on(L[1],h.Html.wrapper,function(t){e.start(t)},s)},unbindSwipeStart:function(){r.off(L[0],h.Html.wrapper,s),r.off(L[1],h.Html.wrapper,s)},bindSwipeMove:function(){var e=this;r.on(R,h.Html.wrapper,b(function(t){e.move(t)},d.settings.throttle),s)},unbindSwipeMove:function(){r.off(R,h.Html.wrapper,s)},bindSwipeEnd:function(){var e=this;r.on(D,h.Html.wrapper,function(t){e.end(t)})},unbindSwipeEnd:function(){r.off(D,h.Html.wrapper)},touches:function(t){return-1")),37===t.keyCode&&e.Run.make(e.Direction.resolve("<"))}};return n.on(["destroy","update"],function(){r.unbind()}),n.on("update",function(){r.mount()}),n.on("destroy",function(){i.destroy()}),r},Autoplay:function(e,n,t){var i=new H,r={mount:function(){this.start(),e.settings.hoverpause&&this.bind()},start:function(){var t=this;e.settings.autoplay&&l(this._i)&&(this._i=setInterval(function(){t.stop(),n.Run.make(">"),t.start()},this.time))},stop:function(){this._i=clearInterval(this._i)},bind:function(){var t=this;i.on("mouseover",n.Html.root,function(){t.stop()}),i.on("mouseout",n.Html.root,function(){t.start()})},unbind:function(){i.off(["mouseover","mouseout"],n.Html.root)}};return d(r,"time",{get:function(){var t=n.Html.slides[e.index].getAttribute("data-glide-autoplay");return y(t||e.settings.autoplay)}}),t.on(["destroy","update"],function(){r.unbind()}),t.on(["run.before","pause","destroy","swipe.start","update"],function(){r.stop()}),t.on(["run.after","play","swipe.end"],function(){r.start()}),t.on("update",function(){r.mount()}),t.on("destroy",function(){i.destroy()}),r},Breakpoints:function(t,e,n){var i=new H,r=t.settings,s=j(r.breakpoints),o=a({},r),u={match:function(t){if(void 0!==window.matchMedia)for(var e in t)if(t.hasOwnProperty(e)&&window.matchMedia("(max-width: "+e+"px)").matches)return t[e];return o}};return a(r,u.match(s)),i.on("resize",window,b(function(){t.settings=h(r,u.match(s))},t.settings.throttle)),n.on("update",function(){s=j(s),o=a({},r)}),n.on("destroy",function(){i.off("resize",window)}),u}};function B(){return i(this,B),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(B.__proto__||Object.getPrototypeOf(B)).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(B,p),t(B,[{key:"mount",value:function(t){var e=0