项目背景

遍布全球的项目经验孕育出 VVS DESIGN 的全明星阵容,他们的设计团队成员和专家顾问皆由国际顶级设计事务所的主案核心组成,在技术和思维方面都堪称杰出的通才,深谙国际主流设计趋势,成熟理解中国市场,竭力为客户提供最高品质的设计服务。

在互联网迅猛发展的新形势下,岭界建筑原先的官网已经无法满足各种各样的屏幕尺寸,设计风格也落后于主流。

醒目的首页案例轮播

为了凸显项目案例,我们采用了全屏的首页轮播图,配合新颖的倒计时进度条,案例醒目的同时又不呆板,并且富有科技感。

配图1.jpg

新颖的照片墙

在项目案例和团队介绍页面,我们采用了新颖的照片墙设计。不同于一般的照片墙,我们的照片墙采用了不规则的排版,采用了4×N的格子分割,可自定义某张图片横跨的格子数,宽度高度均可自定义,非常灵活,在显示效果上也非常丰富。每个格子点开均可展示详情介绍。

配图2.jpg

配图4.jpg

响应式布局

我们针对各种屏幕做了自适应,每种屏幕上,均能展现最佳的显示效果。排版方式、字体大小、间距等都做了自定义的处理,响应式布局的breakpoint如下:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

配图5.png

在手机横屏观看案例的时候,我们会自动切换到全屏模式。

配图6.png

项目总结

Web技术发展到今天,与5年前已经今非昔比。我们在项目中采用了最新的Vue框架,配合服务端渲染,有利于搜索引擎优化。后台采用element-ui,简洁大方。后端采用Kotlin + Spring Boot。所有的新技术结合在一起,造就了岭界建筑富有设计感与科技感的全新官网。