Front_End_CN/src/pages/layout/footer.vue

<template>
  <div class="footer">
    <div class="layout">
      <div class="infos">
        <div class="wlbm">
          <popup
            :icon="require('@/assets/images/01wx.png')"
            :hovericon="require('@/assets/images/01wx_h.png')"
            :code="require('@/assets/images/code_wx.jpg')"
          />
          <popup
            :icon="require('@/assets/images/02wb.png')"
            :hovericon="require('@/assets/images/02wb_h.png')"
            :code="require('@/assets/images/code_wb.jpg')"
          />
          <!-- <popup
            :icon="require('@/assets/images/03in.png')"
            :hovericon="require('@/assets/images/03in_h.png')"
            href="https://www.linkedin.com/company/4dage/"
          /> -->
          <popup
            :icon="require('@/assets/images/04fb.png')"
            :hovericon="require('@/assets/images/04fb_h.png')"
            href="https://www.facebook.com/4DAGE/"
          />
          <popup
            :icon="require('@/assets/images/05dy.png')"
            :hovericon="require('@/assets/images/05dy_h.png')"
            :code="require('@/assets/images/code_dy.jpg')"
          />
        </div>
        <p><span>商务合作</span>sales@4dage.com</p>
        <p><span>媒体采访</span>pr@4dage.com</p>
        <p><span>联系电话</span>400-6698-025</p>
        <a href="http://show.4dage.com/brochure" target="_blank">下载四维时代企业介绍</a>
      </div>
      <div class="relevant">
        <div>
          <a href="http://www.4dkankan.com/index.html?lang=zh" target="_blank">四维看看</a>
          <a href="http://www.4dmodel.com/" target="_blank">四维模库</a>
          <a href="http://www.cgaii.com" target="_blank">中德人工智能研究院</a>
        </div>
        <p>Copyright © 2019 4DAGE Co., Ltd. All rights reserved. </p>
        <p><a href="http://www.miitbeian.gov.cn">粤ICP备14078495号-2</a></p>
      </div>
    </div>
  </div>
</template>

<script>
import popup from '@/components/popup'

export default {
  name: 'Footer',
  components: {popup}
}
</script>

<style scoped>
  .footer {
    padding-top: 40px;
    padding-bottom: 50px;
    background-color: #292929 !important;
  }

  .footer .layout {
    margin: 0 auto;
    max-width: 1440px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer .layout::after {
    content: '';
    display: block;
    clear: both;
  }

  .infos {
    float: left;
  }

  .wlbm {
    margin-bottom: 15px;
    text-align: left;
  }

  .wlbm a:last-child {
    margin-right: 0;
  }

  .infos > p {
    font-size: 14px;
    color: #fff;
    line-height: 1.8;
  }

  .infos > p > span {
    display: inline-block;
    width: 90px;
    text-align: right;
  }

  .infos > p > span::after {
    content: ':';
    /* display: inline-block; */
    float: right;
    padding: 0 15px;
  }

  .infos > a {
    color: #00b4ed;
    font-size: 14px;
    text-decoration: underline;
    display: inline-block;
    line-height: 25px;
  }

  .relevant {
    margin-top: 10px;
    float: right;
  }

  .relevant > div {
    margin-bottom: 8px;
  }

  .relevant > div > a {
    color: #00b4ed;
    font-size: 14px;
    text-decoration: underline;
    display: inline-block;
    line-height: 25px;
  }

  .relevant > div > a:nth-child(2) {
    margin: 0 42px;
  }

  .relevant > p {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 8px;
  }

  @media screen and (max-width: 1050px) {
    .wlbm {
      text-align: center;
    }
    .footer {
      padding-top: 30px;
      padding-bottom: 20px;
    }
    .infos > p {
      text-align: center;
      margin-bottom: 10px;
    }

    .infos > p > span {
      display: block;
      color: #00b4ed;
      width: auto;
      text-align: center;
    }

    .infos > p > span::after {
      display: none;
    }
    .infos {
      float: none;
    }

    .infos > a {
      display: block;
      text-align: center;
    }
    .relevant {
      float: none;
      margin-top: 20px;
    }

    .relevant > div {
      text-align: center;
      margin-bottom: 15px;
    }

    .relevant > div > a {
      margin: 0 10px;
    }

    .relevant > div > a:nth-child(2) {
      margin-left: 0;
      margin-right: 0;
      margin-top: 15px;
    }

    .relevant > p {
      text-align: center;
    }
  }
</style>