usoft-town/components/default/footer.vue

<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-info">
        <div class="footer-left">
          <p>
            <a href="#">开放平台</a>
            <a href="#">法律条款</a>
            <a href="#">联系我们</a>
            <a href="#">关于我们</a>
          </p>
          <span>版权所有：深圳市优软科技有限公司 Copyright @ 2017 All Rights Reserved</span>
        </div>
        <div class="footer-right">
          <div class="r_text">
            <p>服务热线：</p>
            <span style="font-size: 24px;">0755-26994808</span>
          </div>
          <div class="r_app">
            <img src="/qrcode/uu.jpg">
            <p style="padding-top:15px;">APP 下载</p>
          </div>
          <div class="r_weixin">
            <img src="/qrcode/uas.jpg">
            <p style="padding-top:15px;">微信公众号</p>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
  export default {
    name: 'FooterView'
  }
</script>

<style scoped>
  .footer{
    width:100%;
    background: #474443;
    padding-top:20px;
  }
  .container{
    padding:0;
  }
  .footer .footer-info{
    width:100%;
    height:153px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding-left:15px;
    padding-right:20px;
  }
  .footer .footer-info .footer-left{
    width:500px;
    color:#fff;
  }
  .footer .footer-info .footer-left p{
    margin-bottom:30px;
  }
  .footer .footer-info .footer-left p a{
      color:#fff;
    margin-right:25px;
  }
  .footer .footer-info .footer-left p a:hover{
    color:#5280e3;
    text-decoration: none;
    cursor:pointer;
  }
  .footer .footer-info .footer-left span{}

  .footer .footer-info .footer-right{
    width:450px;
    height: 153px;
    color:#fff;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .footer .footer-right .r_text{
    text-align: right;
  }
  .footer .footer-right .r_app{
    text-align: center;
    margin-left:50px;
  }
  .footer .footer-right .r_weixin{
    text-align: center;
    margin-left:40px;
  }
</style>