261 lines
9.4 KiB
Vue
261 lines
9.4 KiB
Vue
<script setup>
|
||
import { useBootstrapBreakpoint } from './useBreakpoint.js';
|
||
import Wanted from "./Wanted.vue";
|
||
const { breakpoint } = useBootstrapBreakpoint();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="pageroot" id="aboutusroot">
|
||
<div id="aboutusbanner" class="videorootbanner">
|
||
<!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
|
||
<!-- src="/AboutusVideo.gif"-->
|
||
<!-- class="videoimg"/>-->
|
||
<img v-if="$isMobile.phone"
|
||
src="/AboutusVideo.gif"
|
||
class="videoimg"/>
|
||
<video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
|
||
poster="/AboutusVideoPreload.png"
|
||
controls=""
|
||
id="abtbannervideo"
|
||
muted autoplay="autoplay"
|
||
loop="loop" playsinline webkit-playsinline
|
||
class="bannervideos">
|
||
<source src="/AboutusVideo.mp4" type="video/mp4"></source>
|
||
</video>
|
||
<video v-else
|
||
poster="/AboutusVideoPreload.png"
|
||
id="abtbannervideo"
|
||
muted autoplay="autoplay"
|
||
loop="loop" playsinline webkit-playsinline
|
||
class="bannervideos">
|
||
<source src="/AboutusVideo.mp4" type="video/mp4"></source>
|
||
</video>
|
||
<div id="abtbanner" class="bannerovervideo">
|
||
<div class="bannercontent">
|
||
<span class="banner1">多年专业深耕<br /></span>
|
||
<span class="banner2">赋能客户产品体验创新</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
|
||
<div id="hpbanner2" style="z-index: 0;">
|
||
<div class="bannercontent">
|
||
<span class="banner1" style="color: black;">多年专业深耕<br /></span>
|
||
<span class="banner2" style="color: black;">赋能客户产品体验创新</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="gslc" class="pageroot">
|
||
<div class="normalcontentdiv" id="gslcblk">
|
||
<span class="normalcontenttitle">公司介绍</span>
|
||
<span class="normalcontenttext">
|
||
K DESIGN 在创意与梦想的交织中诞生。<br/>
|
||
<br/>
|
||
成立伊始，我们确立了以创新设计与高质量制作服务客户的理念。深入市场调研，拜访众多家企业与行业前辈，精准把握行业需求，打造一家涵盖品牌创新/产品设计/新媒体制作的一站式综合服务体。
|
||
<br/><br/>
|
||
目前，我们已为多家企业服务共创，从品牌创新升级到设计制作落地，我们具备完善的服务流程以及保证各项目高质效落地交付的综合能力。我们在保障客户利益的同时与客户共同成长进步，确保每一次的服务都让客户满意，并且已与部分客户达成战略合作关系。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div id="hxtd" class="pageroot">
|
||
<div class="normalcontentdiv" id="hxtdblk">
|
||
<span class="normalcontenttitle" style="color: white;">团队宣言</span>
|
||
<span class="normalcontenttext" style="color: white;">
|
||
我们的团队成员来自各大互联网企业、科技企业以及广告、设计传播行业，每位成员都具备多年跨领域的设计与专业制作经验，部分核心团队成员从业10-15年以上。我们坚信，设计是一门综合的艺术，是科学与艺术和商业的完美结合。体验不止于视觉呈现，更是传递情感与创造价值的方式与媒介。
|
||
<br/><br/>
|
||
从用户体验全流程出发，我们注重每一个细节，力求通过设计打破人与产品之间的壁垒，构建自然、流畅且富有情感的交互体验。凭借多元化的能力和丰富的经验，我们能够从不同视角剖析问题，为客户提供定制化且极具前瞻性的体验设计方案，助力产品在市场中脱颖而出，实现商业价值与用户体验的双赢。
|
||
<br/><br/>
|
||
我们认为设计是一项讲良心的服务。我们用心服务好每一位客户，严格把控交付质量，与您共同成长共创未来。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div id="sjsj" class="pageroot" style="background-color: white;">
|
||
<div class="normalcontentdiv" id="sjsjblk">
|
||
<span class="normalcontenttitle" style="background-color: white;">设计瞬间</span>
|
||
</div>
|
||
<div v-if="breakpoint==='xs'||breakpoint==='sm'" id="sjsjimgwep">
|
||
<img src="/AboutusRes/pcp1wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp2wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp3wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp4wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp5wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp6wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
<img src="/AboutusRes/pcp7wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||
</div>
|
||
<div v-else id="sjsjimg">
|
||
<div class="imgrow" style="width: 100%; height: auto;">
|
||
<div class="imageitem" style="width: 62.571428571428571428571428571429%;">
|
||
<img src="/AboutusRes/pcp1.png"/>
|
||
</div>
|
||
<div class="imageitem" style="width:1.428571428571428571428571428571%;"></div>
|
||
<div class="imageitem" style="width: 36%;background-color: black;">
|
||
<img src="/AboutusRes/pcp2.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
|
||
<div class="imageitem" style="width: 32.142857142857142857142857142857%">
|
||
<img class="sjsjpic" src="/AboutusRes/pcp3.png"/>
|
||
</div>
|
||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||
<div class="imageitem" style="width: 32.142857142857142857142857142857%">
|
||
<img src="/AboutusRes/pcp4.png"/>
|
||
</div>
|
||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||
<div class="imageitem" style="width: 32.857142857142857142857142857143%">
|
||
<img src="/AboutusRes/pcp5.png"/>
|
||
</div>
|
||
</div>
|
||
<div class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
|
||
<div class="imageitem" style="width: 50%;">
|
||
<img src="/AboutusRes/pcp6.png"/>
|
||
</div>
|
||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||
<div class="imageitem" style="width: 48.571428571428571428571428571429%;">
|
||
<img src="/AboutusRes/pcp7.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="normalcontentdiv" id="jrwmblk">
|
||
<span class="normalcontenttitle" style="background-color: white;">加入我们</span>
|
||
</div>
|
||
<Wanted></Wanted>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Aboutus"
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "src/publicstyle.scss";
|
||
#aboutusbanner {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: black;
|
||
@include media-breakpoint-between(xs, md) {
|
||
aspect-ratio: 1.92;
|
||
}
|
||
}
|
||
|
||
#aboutusbannercontent{
|
||
@include media-breakpoint-between(xs, md) {
|
||
margin-left: 32px;
|
||
margin-right: 32px;
|
||
}
|
||
}
|
||
|
||
#jrwmblk{
|
||
@include media-breakpoint-between(xs, md) {
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
margin-bottom: 24px;
|
||
}
|
||
}
|
||
|
||
#abubanner{
|
||
align-items: flex-start; /* 控制水平对齐 - 靠左 */
|
||
justify-content: center;
|
||
@include media-breakpoint-between(xs, md) {
|
||
background-image: url('/AboutusRes/aboutusbanner_wep.png');
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
background-image: url('/AboutusRes/aboutusbanner.png');
|
||
}
|
||
}
|
||
|
||
#gslc{
|
||
@include media-breakpoint-between(xs, md) {
|
||
padding-bottom: 64px;
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
padding-bottom: 80px;
|
||
}
|
||
}
|
||
|
||
#sjsj{
|
||
@include media-breakpoint-between(xs, md) {
|
||
padding-bottom: 48px;
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
padding-bottom: 160px;
|
||
}
|
||
}
|
||
|
||
#hxtd{
|
||
/* 背景图垂直、水平均居中 */
|
||
background-position: center center;
|
||
/* 背景图不平铺 */
|
||
background-repeat: no-repeat;
|
||
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
|
||
background-attachment: scroll;
|
||
@include media-breakpoint-between(xs, md) {
|
||
background-size:100%;
|
||
padding-bottom: 112px;
|
||
background-image: url('/AboutusRes/innerteamwep.png');
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
padding-bottom: 164px;
|
||
background-image: url('/AboutusRes/innerteam.png');
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
@media (min-width: 375px) {
|
||
/* 让背景图基于容器大小伸缩 */
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
#hxtdblk{
|
||
@include media-breakpoint-between(xs, md) {
|
||
margin-top: 112px;
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
margin-top: 135px;
|
||
}
|
||
}
|
||
|
||
#sjsjimg{
|
||
margin-top: 56px;
|
||
height: auto;
|
||
@include media-breakpoint-between(md,xxl){
|
||
margin-left: 100px;
|
||
margin-right: 100px;
|
||
}
|
||
@include media-breakpoint-up(xxl) {
|
||
margin-left: 256px;
|
||
margin-right: 256px;
|
||
}
|
||
}
|
||
|
||
#sjsjimgwep{
|
||
width: 100%;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.imgrow{
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.imageitem{
|
||
position: relative;
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|