青岛上朝科技 官网

本页面需要在服务器环境下访问( 可使用 yarn run dev( npm run dev ) 预览 ), 勿直接浏览静态页面

使用技术:

技术名称 作用 版本
Vuejs 框架 2.2.2
Vue-Router Vue路由 2.3.0
Vuex Vue状态管理 2.2.1
Muse UI UI框架 2.0.0-rc.5
Pug Node模版 2.0.0-beta11
Sass 样式预处理器( node-sass ) 4.5.1
Webpack 模块打包 2.2.1
Gulp 自动构建( 压缩图片 ) 3.9.1

Build Setup / 开发流程

# install dependencies
npm install

# 国内环境建议使用cnpm install
cnpm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.


Shangchao-Website优化

  • 需要优化Team组件内的图片样式, 改用flex方式
  • PC版本, header头部选中下划线 要在底部, 更改样式效果( 增粗. 更清晰 )
  • 手机版本, header头部不需要 shadow效果
  • '招贤纳士' 文字大小样式需要统一, 只有标题需要大字体, 其他皆为统一字体大小
  • 整体页面字体保持'微软雅黑'字体( 不做系统判断 )
  • 偶尔首页 顶部导航点击事件 失效( 偶尔能实现 )
  • 跳转路由时, 保存跳转前的位置信息
  • 用'Font Awesome' 替换 'Material-icons' ( FA字体库的样式更多 )
  • 当从'电商'详情页 返回首页时 总是跳到首页地图位置( 其他页面无此问题 )
  • 添加 '1024px'像素 页面适配 —— 适配 iPad Pro页面
  • 优化 'APP'详情页 - '六大服务' 文字样式( 移动端 )
  • 移动端下, 大部分详情页返回首页出现跳转错误( 跳到页面底部 )
  • 使用滚动到元素的VueJS指令 - 屏幕滚动插件, 添加一个'回到顶部'的功能键
  • 使用图片懒加载插件
  • 添加'联系电话'的浮动按钮, 触发事件 -> 展示联系电话
  • 将首页 - '服务简介' 模块的桌面样式 添加参考图( 修改展示样式为 表格下展示 )
  • 光纤环境下 - 加载速度已到11m, 须做图片优化 与 性能优化

优化修改记录

  • 2017.3.31

    修复移动端 系统文字禁止放大问题( 未测试 ) —— 小米手机 系统文字放大造成页面结构错误, 字体超出结构

    优化头部meta标签 - 已加注释说明

    添加离线情况下的网页图标 - 改为'上朝科技'正式图标; 删除'A+office'图标

    优化 'APP'详情页 - '六大服务' 文字样式( 移动端 )

    重构 'ContactUs' 联系我们 组件

    完全支持 iPad Pro的 1024像素效果, 并完成测试( chrome模拟 )

  • 2017.4.1

    修复上一版本 在移动端下, 页面显示错误( 修复meta错误 )

    通过压缩网站 再次压缩图片( bg.png已压缩到极限, 无法再压缩 )

Shangchao Website

(官网案例) - 上朝科技 - Vue 2.0 - SPA项目

Shangchao Website Info

⭐ Stars21
🔗 Source Codegithub.com
🕒 Last Updatea year ago
🕒 Created6 years ago
🐞 Open Issues1
➗ Star-Issue Ratio21
😎 Authordidilinkin