<template>
  <div id="footercontent">
    <div id="title" style="text-align: left">
      <strong style="
            width: 112px;
            height: 48px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 28px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 48px;">商务合作</strong>
    </div>
    <div id="CAL">
      <span class="itemtitle">CAL</span>
      <br/>
      <span class="itemcontent">13632037777 田先生</span>
    </div>
    <div id="EMAIL">
      <span class="itemtitle">EMAIL</span>
      <br/>
      <span class="itemcontent">Sevice@feishu.com</span>
    </div>
    <div id="WECHAT">
      <span class="itemtitle">WECHAT</span>
      <br/>
      <span class="itemcontent">KDesign公众号</span>
    </div>
    <div id="ADDRESS">
      <span class="itemtitle">ADDRESS</span>
      <br/>
      <span class="itemcontent">北京市朝阳区崔各庄创意产业</span>
    </div>
    <div id="QRCODE">
      <span class="itemtitle">微信扫码，添加商务同事</span>
      <br/>
      <img src="/QRCodeBottom.png">
    </div>
  </div>
</template>

<script>
export default {
  name: "FooterContent"
}
</script>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#footercontent
{
  display: grid;
  color:white;
}

@include media-breakpoint-between(xs, md) {
  #footercontent{
    max-width: 304px;
    min-height: 614px;
    grid-template-columns: repeat(1, 1fr);  /* 1列等分 */
    grid-template-rows: repeat(8,90px);   /* 8行高度120px */

  }
}

@include media-breakpoint-up(md) {
  #footercontent
  {
    width:714px;
    min-height: 338px;
    grid-template-columns: repeat(2, 1fr);  /* 2列等分 */
    grid-template-rows: repeat(4, 90px);   /* 4行高度120px */
  }
}

#title{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 1;
  }
  @include media-breakpoint-up(md) {
    grid-column: 1;
    grid-row: 1;
  }
}
#CAL{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 2;
  }
  @include media-breakpoint-up(md) {
    grid-column: 1;
    grid-row: 2;
  }
}
#EMAIL{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 3;
  }
  @include media-breakpoint-up(md) {
    grid-column: 1;
    grid-row: 3;
  }
}
#WECHAT{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 4;
  }
  @include media-breakpoint-up(md) {
    grid-column: 1;
    grid-row: 4;
  }
}
#ADDRESS{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 5;
  }
  @include media-breakpoint-up(md) {
    grid-column: 2;
    grid-row: 2;
  }
}
#QRCODE{
  @include media-breakpoint-between(xs, md) {
    grid-column: 1;
    grid-row: 6;
  }
  @include media-breakpoint-up(md) {
    grid-column: 2;
    grid-row: 3 / span 2;
  }
}

.itemtitle
{
  width: 179px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  line-height: 30px;
}
.itemcontent
{
  width: 198px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  line-height: 30px;
}

</style>
