reservation-ssr/components/default/Footer.vue

<template>
  <footer>
    <div class="container">
      <el-row>
        <el-col :span="16">
            <div class="item">
              <ul class="list-unstyled">
                <li><p>了解详情</p></li>
                <li><a href="#">UAS</a></li>
                <li><a href="#">UU互联</a></li>
                <li><a href="#">解决方案</a></li>
              </ul>
            </div>
            <div class="item">
              <ul class="list-unstyled">
                <li><p>关于优软</p></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">发展历程</a></li>
                <li><a href="#">新闻中心</a></li>
              </ul>
            </div>
            <div class="item">
              <ul class="list-unstyled">
                <li><p>常用链接</p></li>
                <li><a href="#">优软云</a></li>
                <li><a href="#">优软商城</a></li>
                <li><a href="#">B2B商务</a></li>
              </ul>
            </div>
            <div class="item">
              <ul class="list-unstyled">
                <li><p>我要体验</p></li>
                <li><a href="#">优企云服</a></li>
              </ul>
            </div>
        </el-col>
        <el-col :span="4">
          <div class="qrcode">
            <img src="/footer/uu_qrcode.png">
            <p>手机UU</p>
            <p>快人一步</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="qrcode">
            <img src="/footer/uas_qrcode.jpg">
            <p>微信扫描</p>
            <p>关注公众号</p>
          </div>
        </el-col>
      </el-row>
      <hr/>
      <el-row style="padding-top:25px;">
        <el-col :span="12"><span>
          <span>咨询电话： <em>0755-26994808</em></span>
        </span></el-col>
        <el-col :span="12" class="text-right"><span>
          版权所有： 深圳市优软科技有限公司 Copyright @ 2017 All Rights Reserved
        </span></el-col>
      </el-row>
    </div>
  </footer>
</template>

<script>
    export default {
      name: 'footer-view'
    }
</script>

<style type="text/scss" scoped lang="scss">
  footer{
    padding:70px 0 30px 0;
    background: #474443;
    color:#fff;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      span{
        color:#999;
        &:last-child{
          line-height: 30px;
        }
      }
      em{
        font-size: 28px;
        color:#eee;
      }
      p{color:#eee;}
      .item{
        display:inline-block;
        width:20%;
        vertical-align: top;
        ul{
          li{
            p{
              margin-bottom:30px;
            }
            a{
              display:block;
              height:38px;
              line-height: 38px;
              font-size: 14px;
              color:#8e8d8d;
              &:hover{
                cursor:pointer;
              }
            }
          }
        }
      }
      .qrcode{
        text-align: center;
        img{
          width:100px;
          height:100px;
          margin-bottom:20px;
        }
      }
    }
    hr{
      border:1px dashed #cbcbcb;
      margin:0;
    }
  }

</style>