diff --git a/public/ExamplesRes/Examplesbanner.png b/public/ExamplesRes/Examplesbanner.png index 6e35463..84cebe1 100644 Binary files a/public/ExamplesRes/Examplesbanner.png and b/public/ExamplesRes/Examplesbanner.png differ diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue index bbcecac..db815ca 100644 --- a/src/components/Homepage.vue +++ b/src/components/Homepage.vue @@ -19,6 +19,96 @@ +
+
+ + 我们的服务范围 + + + 面向数字体验设计、服务体验设计、空间体验设计、品牌体验策略、创新业务探索、产品体验塑造等，我们基于人本创新思维，帮助您匠心打造极致、自然、情感的差异化用户体验设计，让产品在竞争中脱颖而出。 + +
+
+
+
+ +
+
+ + 产品体验创新 + + + Digital Video Creative Design + +
+
+
+
+ +
+
+ + 品牌体验/平面设计 + + + Business Brand Experience + +
+
+
+
+ +
+
+ + 三维动画创意设计 + + + Digital Video Creative Dedign + +
+
+
+
+ +
+
+ + 企业数字化创新 + + + Digital Video Creative Design + +
+
+
+
+ +
+
+ + 创意推广/运营设计 + + + Digital Video Creative Design + +
+
+
+
+ +
+
+ + 2D动效/视频广告制作 + + + Digital Video Creative Design + +
+
+
+
@@ -109,4 +199,224 @@ export default { height: 290px; } } + +#fwfwcontent{ + @include media-breakpoint-between(xs, md){ + margin-bottom: 64px; + } + @include media-breakpoint-up(md){ + margin-bottom: 146px; + } +} + +#fwfwlogos{ + display: grid; + @include media-breakpoint-between(xs, md) { + margin-left: 32px; + margin-right: 32px; + margin-bottom: 96px; + //网格布局 + grid-template-columns: repeat(1, minmax(1fr,168px)); /* 1列等分 */ + grid-template-rows: repeat(6, minmax(94px,1fr)); /* 6行高度120px */ + } + @include media-breakpoint-up(md){ + margin-bottom: 162px; + } + + @include media-breakpoint-between(md,xxl){ + margin-left: 100px; + margin-right: 100px; + } + @include media-breakpoint-up(xxl) { + margin-left: 256px; + margin-right: 256px; + } + + //网格布局 + @include media-breakpoint-between(md,xl){ + grid-template-columns: repeat(2, minmax(1fr,340px)); /* 2列等分 */ + grid-template-rows: repeat(3, minmax(94px,1fr)); /* 3行高度120px */ + } + + @include media-breakpoint-up(xl){ + grid-template-columns: repeat(3, minmax(1fr,340px)); /* 3列等分 */ + grid-template-rows: repeat(2, minmax(94px,1fr)); /* 2行高度120px */ + } +} + +.fwfwlogodiv{ + display: flex; + flex-direction: row; + @include media-breakpoint-between(xs, md){ + margin-bottom: 48px; + } + @include media-breakpoint-up(md){ + margin-bottom: 94px; + } +} + +.fwfwlogoimdiv{ + margin-top: 7px; + @include media-breakpoint-between(xs, md){ + width: 62px; + height: 32px; + } + @include media-breakpoint-up(md){ + width: 120px; + height: 60px; + } +} + +.fwfwlogoimdiv img{ + object-fit: fill; + width: 100%; + height: 100%; +} + +.fwfwitemcontent{ + display: flex; + flex-direction: column; + @include media-breakpoint-between(xs, md){ + width: 62px; + min-height: 32px; + margin-left: 16px; + } + @include media-breakpoint-up(md){ + width: 120px; + min-height: 60px; + margin-left: 28px; + } +} + +.fwfwitemcn{ + @include media-breakpoint-between(xs, md){ + overflow-wrap: break-word; + color: white; + font-size: 18px; + font-family: PingFangSC-Regular; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 25px; + } + @include media-breakpoint-up(md){ + overflow-wrap: break-word; + color: white; + font-size: 28px; + font-family: PingFangSC-Regular; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 40px; + } +} +.fwfwitemen{ + margin-top: 2px; + @include media-breakpoint-between(xs, md){ + overflow-wrap: break-word; + color: white; + font-size: 14px; + letter-spacing: -0.3499999940395355px; + font-family: DINPro-Regular; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 18px; + } + @include media-breakpoint-up(md){ + overflow-wrap: break-word; + color: white; + font-size: 20px; + letter-spacing: -0.5px; + font-family: DINPro-Regular; + font-weight: normal; + text-align: left; + line-height: 26px; + } +} + +#fwfwlogo01{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 1; + } + @include media-breakpoint-between(md,xl){ + grid-column: 1; + grid-row: 1; + } + @include media-breakpoint-up(xl){ + grid-column: 1; + grid-row: 1; + } +} +#fwfwlogo02{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 2; + } + @include media-breakpoint-between(md,xl){ + grid-column: 2; + grid-row: 1; + } + @include media-breakpoint-up(xl){ + grid-column: 2; + grid-row: 1; + } +} +#fwfwlogo03{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 3; + } + @include media-breakpoint-between(md,xl){ + grid-column: 1; + grid-row: 2; + } + @include media-breakpoint-up(xl){ + grid-column: 3; + grid-row: 1; + } +} +#fwfwlogo04{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 4; + } + @include media-breakpoint-between(md,xl){ + grid-column: 2; + grid-row: 2; + } + @include media-breakpoint-up(xl){ + grid-column: 1; + grid-row: 2; + } +} +#fwfwlogo05{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 5; + } + @include media-breakpoint-between(md,xl){ + grid-column: 1; + grid-row: 3; + } + @include media-breakpoint-up(xl){ + grid-column: 2; + grid-row: 2; + } +} +#fwfwlogo06{ + @include media-breakpoint-between(xs, md) { + grid-column: 1; + grid-row: 6; + } + @include media-breakpoint-between(md,xl){ + grid-column: 2; + grid-row: 3; + } + @include media-breakpoint-up(xl){ + grid-column: 3; + grid-row: 2; + } +}