yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

服务范围初步部署

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-05 17:54:39 +08:00
parent 8176538942
commit 006d348e63
2 changed files with 310 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/ExamplesRes/Examplesbanner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

310
src/components/Homepage.vue
View File

@ -19,6 +19,96 @@
<img src="/HomepageRes/homepageK.png" width="100%" height="100%"/>
</div>
</div>
<div class="pageroot" id="fwfw" style="background-color: black;">
<div id="fwfwcontent" class="normalcontentdiv">
<span class="normalcontenttitle" style="color: white;">
我们的服务范围
</span>
<span class="normalcontenttext" style="color: white;">
面向数字体验设计、服务体验设计、空间体验设计、品牌体验策略、创新业务探索、产品体验塑造等，我们基于人本创新思维，帮助您匠心打造极致、自然、情感的差异化用户体验设计，让产品在竞争中脱颖而出。
</span>
</div>
<div id="fwfwlogos">
<div class="fwfwlogodiv" id="fwfwlogo01">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/cptycx.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
产品体验创新
</span>
<span class="fwfwitemen">
Digital&nbsp;Video&nbsp;Creative&nbsp;Design
</span>
</div>
</div>
<div class="fwfwlogodiv" id="fwfwlogo02">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/ppty.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
品牌体验/平面设计
</span>
<span class="fwfwitemen">
Business&nbsp;Brand&nbsp;Experience
</span>
</div>
</div>
<div class="fwfwlogodiv" id="fwfwlogo03">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/swdhcysj.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
三维动画创意设计
</span>
<span class="fwfwitemen">
Digital Video Creative Dedign
</span>
</div>
</div>
<div class="fwfwlogodiv" id="fwfwlogo04">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/qyszhzx.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
企业数字化创新
</span>
<span class="fwfwitemen">
Digital&nbsp;Video&nbsp;Creative&nbsp;Design
</span>
</div>
</div>
<div class="fwfwlogodiv" id="fwfwlogo05">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/cytg.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
创意推广/运营设计
</span>
<span class="fwfwitemen">
Digital&nbsp;Video&nbsp;Creative&nbsp;Design
</span>
</div>
</div>
<div class="fwfwlogodiv" id="fwfwlogo06">
<div class="fwfwlogoimdiv">
<img src="/HomepageRes/fwfw/2ddx.png"/>
</div>
<div class="fwfwitemcontent">
<span class="fwfwitemcn">
2D动效/视频广告制作
</span>
<span class="fwfwitemen">
Digital&nbsp;Video&nbsp;Creative&nbsp;Design
</span>
</div>
</div>
</div>
</div>
</div>
</template>
@ -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;
}
}
</style>