kdofficial/src/components/Homepage.vue

<script setup>
import ExamplesContent from './ExamplesContent.vue'
import Partners from './Tools/Partners.vue'
</script>
<template>
<div id="homepageroot" class="pageroot">
  <div id="homepagebanner" style="width: 100%;height: auto;background-color: black; position: relative">
    <video poster="/bannervideopreload.png" controls="" id="bannervideo" muted autoplay="autoplay" loop="loop" playsinline webkit-playsinline style="width: 100%;z-index: 0;">
      <source src="/April29th_batch.mp4" type="video/mp4"></source>
    </video>
    <div id="hpbanner">
      <div class="bannercontent">
        <span class="banner1">为用户创造美好体验<br /></span>
        <span class="banner2">驱动商业可持续增长</span>
      </div>
    </div>
  </div>
  <div id="secondwhite" class="pageroot">
    <div id="whiteK" class="normalcontentdiv">
      <span class="normalcontenttitle">
        <img src="/HomepageRes/kdesignblack.png" id="logoblack"/>
      </span>
      <span class="normalcontenttext">
        涵盖品牌创新/产品设计/新媒体制作的一站式综合服务体<br />我们致力于聚焦数字时代的人文体验，整合各领域专业与优势<br />构建用户与产品/品牌的新型关系
      </span>
    </div>
    <div id="bigKlogo">
      <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>
  <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();
    });
  },
  methods:{
    video_autoplay:function(){
      document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('bannervideo')
        if (video) {
          video.muted = true;
          video.play();
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/publicstyle.scss";

#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{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

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

#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) {
    margin-left: 32px;
    width: 161.8px;
    height: 144px;
  }

  @include media-breakpoint-between(md, xl) {
    margin-left: 100px;
    width: 326px;
    height: 290px;
  }

  @include media-breakpoint-up(xl) {
    margin-top: 221px;
    width: 326px;
    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;
    //网格布局
    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>