使用原生 js + scss 实现守望先锋官网复刻

原网站做的非常nice，我复刻起来略显粗糙，水平不够继续学习，奋斗.jpg！

• 基本页面的复刻。
• 使用 flex / grid 布局。
• 完成页面功能。
• 实现响应式布局。

原网站的适配基本以960px和640px为界限，使用方法为媒介查询。

• 顶部导航条
  • 一旦小于网页原有宽度，顶部黑色导航条即会被隐藏，换成白色导航条。
• 视频模块
  • 整体宽度不变，如果宽度小于640px，两个按钮会从水平布局到垂直布局。
• SectionBanner
  • 宽度小于960px，图片和文字会变成垂直方向上居中布局。
  • 宽度小于640px，标题字体大小会减小。
• SaleBanner
  • 宽度小于960px，图片和文字会变成垂直方向上居中布局。
  • 宽度小于640px，标题字体大小会减小。
• NewsBanner
  • 宽度小于960px，四个新闻模块和图片会分离，变成垂直方向上居中布局，但网格还是2*2。
  • 宽度小于640px，四个新闻模块会变成单栏布局，1*4。
• heroSection
  • 宽度小于960px，英雄展示模块会被隐藏。
• footer-link and footer
  • 基本上没有大的变化，做了响应式的缩放。
• site-nav
  • 一旦小于网页原有宽度，site-nav导航条就会隐藏。
  • 一旦网页下滑，就会吸顶 （fixed）

• 视频的暂停与播放。

• 英雄的选中与切换。

• 按钮选中功能

• 部分超链接跳转（因为有点多可能没做全）

• 吸顶导航条的下拉框效果(时间原因只做了GAME这一个，其他做法应该一致)。

• nav-mobile点击显示左侧菜单栏，以及背景暗化和inner-text的展开。