kdofficial/src/components/Homepage.vue

<script setup>
import ExamplesContent from './ExamplesContent.vue'
import Partners from './Tools/Partners.vue'
import { useBootstrapBreakpoint } from './useBreakpoint.js';
import bannervideopreload from "@/assets/bannervideopreload.png";
import HpgVideo from "@/assets/HpgVideo.mp4";
import kdesignblack from "@/assets/HomepageRes/kdesignblack.svg";
import NewK from "@/assets/HomepageRes/NewK.png";
import cptycx from "@/assets/HomepageRes/fwfw/cptycx.png";
import ppty from "@/assets/HomepageRes/fwfw/ppty.png";
import swdhcysj from "@/assets/HomepageRes/fwfw/swdhcysj.png";
import qyszhzx from "@/assets/HomepageRes/fwfw/qyszhzx.png";
import cytg from "@/assets/HomepageRes/fwfw/cytg.png";
import ddx from "@/assets/HomepageRes/fwfw/2ddx.png";

const { breakpoint } = useBootstrapBreakpoint();
</script>

<template>
  <div id="homepageroot" class="pageroot">
     <div id="homepagebanner" class="videorootbanner">
      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
             id="bannervideo" muted autoplay="autoplay" loop="loop"
             playsinline webkit-playsinline
             class="bannervideos"
             x5-video-player-type="h5-page">
        <source :src="HpgVideo" type="video/mp4"></source>
      </video>
      <video v-else
             id="bannervideo" muted autoplay="autoplay" loop="loop"
             playsinline webkit-playsinline
             class="bannervideos"
             x5-video-player-type="h5-page">
        <source :src="HpgVideo" type="video/mp4"></source>
      </video>
      <div id="hpbanner" 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="secondwhite" class="pageroot">
    <div id="whiteK" class="normalcontentdiv">
      <span class="normalcontenttitle">
        <img :src="kdesignblack" id="logoblack"/>
      </span>
      <span class="normalcontenttext">
        一家涵盖<b>品牌创新/产品设计/新媒体制作</b>的一站式综合服务体<br />我们致力于聚焦数字时代的人文体验，整合各领域专业与优势，构建用户与产品/品牌的新型关系
      </span>
    </div>
    <div id="bigKlogomobile" v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'||breakpoint==='lg'">
      <div id="bigKlogo">
        <img :src="NewK" width="100%" height="100%"/>
      </div>
    </div>
    <div id="bigKlogo" v-else>
      <img :src="NewK" 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;">
        我们提供：<b>2D/3D视觉动效设计制作、三维模型设计制作、视频创意剪辑制作、产品界面设计、人工智能（AI）生成设计、品牌策略升级、活动/会议设计、产品创意探索</b>。基于人本创新思维，助您匠心打造极致、自然、情感的差异化用户体验，让产品和项目在竞争中脱颖而出。
      </span>
    </div>
    <div id="fwfwlogos">
      <div class="fwfwlogodiv" id="fwfwlogo01">
        <div class="fwfwlogoimdiv">
          <img :src="cptycx"/>
        </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="ppty"/>
        </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="swdhcysj"/>
        </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="qyszhzx"/>
        </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="cytg"/>
        </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="ddx"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
            2D动效/视频广告制作
          </span>
          <span class="fwfwitemen">
            Digital&nbsp;Video&nbsp;Creative&nbsp;Design
          </span>
        </div>
        </div>
      </div>
    </div>
    <ExamplesContent></ExamplesContent>
    <a href="/Examples" style="text-decoration: none;">
    <div style="display: flex;justify-content: center;
        width: 100%;background-color: white;">
      <div id="seemorebutton">
        查看更多
      </div>
      </div>
    </a>
    <Partners></Partners>
  </div>
</template>

<script>
export default {
  name: "Homepage",
  mounted() {
    this.$nextTick(function() {
      this.video_autoplay();
      this.handleVideoLoad();
    });
  },
  methods:{
    video_autoplay:function(){
      document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('bannervideo')
        if (video) {
          video.muted = true;
          video.play();
        }
      });
    },
    handleVideoLoad: function() {
      const video = document.getElementById('bannervideo');
      const container = document.getElementById('homepagebanner');

      if (video && container) {
        // 优化：使用loadedmetadata事件，这是视频尺寸信息可用的最早时机
        const handleVideoReady = () => {
          container.classList.add('video-loaded');
          // 移除事件监听器避免重复触发
          video.removeEventListener('loadedmetadata', handleVideoReady);
          video.removeEventListener('canplay', handleVideoReady);
        };

        video.addEventListener('loadedmetadata', handleVideoReady);
        video.addEventListener('canplay', handleVideoReady);

        // 如果视频已经有尺寸信息，立即触发
        if (video.videoWidth > 0) {
          handleVideoReady();
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/publicstyle.scss";
#bigKlogomobile {
  display: flex;
  justify-content: center;
  // align-items: center; /* 如果也需要垂直居中 */
  width: 100%; /* 确保父容器占满宽度以正确居中子元素 */
}

#seemorebutton{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: white;
  max-width: 300px;
  //height: 74px;
  border: 2px solid #000000;
  @include media-breakpoint-between(xs, md) {
    margin-left: 32px;
    margin-right: 32px;
  }
  @include media-breakpoint-between(md,xxl){
    margin-left: 100px;
    margin-right: 100px;
  }
  @include media-breakpoint-up(xxl) {
    margin-left: 256px;
    margin-right: 256px;
  }
  overflow-wrap: break-word;
  color: rgba(13, 13, 13, 1);
  //font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  line-height: 48px;
  transition: background 0.5s, color 0.5s;
  @include media-breakpoint-between(xs, md) {
    height: 44px;
  }

  @include media-breakpoint-up(md) {
    height: 74px;
    font-size: 24px;
    //line-height: 48px;
  }
}
#seemorebutton:hover{
  background-color: black;
  color: white;
}

#hpbanner{

}

#secondwhite
{
  width: 100%;
  background-color: white;
  //默认是纵向排列
  @include media-breakpoint-between(xs, md) {
    padding-bottom: 97px;
  }

  @include media-breakpoint-between(md, xl) {
    padding-bottom: 97px;
  }

  @include media-breakpoint-up(xl) {
    flex-direction: row;
    padding-bottom: 253px;
  }
}

#whiteK{
  @include media-breakpoint-between(xs, md) {
    margin-top: 96px;
  }

  @include media-breakpoint-between(md, xl) {

  }

  @include media-breakpoint-up(xl) {
    margin-top: 245px;
    max-width: 654px;
  }
}

#logoblack{
  @include media-breakpoint-between(xs, md) {
    width: 116px;
    height: 20.67px;
  }

  @include media-breakpoint-up(md) {
    width: 235.42px;
    height: 42px;
  }
}

#bigKlogo{
  @include media-breakpoint-between(xs, xl) {
    margin-top: 57px;
  }

  @include media-breakpoint-between(xs, md) {
    width: 326px;
  }

  @include media-breakpoint-between(md, xl) {
    width: 326px;
  }

  @include media-breakpoint-up(xl) {
    margin-top: 221px;
    width: 326px;
  }
}

#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;
    //网格布局
    grid-template-columns: repeat(1, minmax(1fr,168px));  /* 1列等分 */
    grid-template-rows: repeat(6, minmax(94px,1fr));   /* 6行高度120px */
  }

  @include media-breakpoint-between(xs, lg){
    margin-bottom: 48px;
  }
  @include media-breakpoint-up(lg){
    margin-bottom: 77.4px;
  }

  @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, lg){
    margin-bottom: 48px;
  }
  @include media-breakpoint-up(lg){
    margin-bottom: 84.6px;
  }
}

.fwfwlogoimdiv{
  margin-top: 7px;
  @include media-breakpoint-between(xs, lg){
    width: 62px;
    height: 32px;
  }
  @include media-breakpoint-up(lg){
    width: 96px;
    height: 48px;
  }
}

.fwfwlogoimdiv img{
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.fwfwitemcontent{
  display: flex;
  flex-direction: column;
  @include media-breakpoint-between(xs, lg){
    min-height: 32px;
    margin-left: 16px;
  }
  @include media-breakpoint-up(lg){
    min-height: 48px;
    margin-left: 16px;
  }
}

.fwfwitemcn{
  @include media-breakpoint-between(xs, lg){
    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(lg){
    overflow-wrap: break-word;
    color: white;
    font-size: 22.4px;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32px;
  }
}
.fwfwitemen{
  margin-top: 2px;
  @include media-breakpoint-between(xs, lg){
    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(lg){
    overflow-wrap: break-word;
    color: white;
    font-size: 16px;
    letter-spacing: -0.5px;
    font-family: DINPro-Regular;
    font-weight: normal;
    text-align: left;
    line-height: 20.8px;
  }
}

#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>