feixinyun/components/Footer.vue

<template>
  <div class="footer">
    <div class="footer-link">
      <div class="center1200 link-content">
        <div class="company">
          <img src="./../public/images/footer-logo.png" />
          <p>飞信云科技有限公司</p>
          <p>公司地址：武汉市北辰光谷里A8栋2002</p>
          <p>联系电话：027-63492056</p>
          <p>公司邮箱：pengde@flysms.cn</p>
        </div>
        <div class="link-val">
          <div class="link-val-item" v-for="item in 3">
            <p class="link-val-label">产品介绍</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
            <p>通知短信</p>
          </div>
        </div>
        <div class="code-box">
          <p class="code-title">关注飞信云</p>
          <p class="code-hint">飞信云公众号</p>
          <div class="code-val"></div>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="center1200 copyright-content">
        <div class="copyright-left">
          <span>Feixinyun.飞信云</span>
          <span>©️ 2021 ALL RIGHTS RESERVED. 保留所有权利</span>
        </div>
        <div class="copyright-right">
          <p>鄂 ICP 备 16035411 号 -1</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.footer {
  width: 100%;
  .footer-link {
    background-color: #2e3444;
    padding: var(--size-59) 0 var(--size-49);
    .link-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .company {
        flex-shrink: 0;
        width: 380px;
        p {
          opacity: 0.7;
          font-size: var(--size-14);
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          padding-top: 22px;
        }
      }
      .link-val {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .link-val-item {
          flex: 1;
          padding-right: 10px;
          p {
            opacity: 0.7;
            font-size: var(--size-14);
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
            padding-top: 16px;
          }
          .link-val-label {
            opacity: 0.9;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: bold;
            color: #ffffff;
            padding: 0 0 10px;
          }
        }
      }
      .code-box {
        flex-shrink: 0;
        width: 171px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .code-title {
          opacity: 0.9;
          text-align: center;
          font-size: var(--size-16);
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          color: #ffffff;
        }
        .code-hint {
          text-align: center;
          padding: 15px 0;
          opacity: 0.7;
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          color: #ffffff;
        }
        .code-val {
          width: 171px;
          height: 171px;
          background: #ffffff;
          padding: 15px;
        }
      }
    }
  }
  .footer-copyright {
    width: 100%;
    background: #222735;
    .copyright-content {
      height: 102px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #666666;
      line-height: 48px;
      .copyright-left {
      }
      .copyright-right {
      }
    }
  }
}
</style>