mainFooter.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="footer">
  3. <div class="container">
  4. <el-row>
  5. <el-col :span="8">
  6. <div class="item">
  7. <img src="/qrcode/UU-Qr-Code.png">
  8. <div class="item-right">
  9. <p>手机UU</p>
  10. <p>快人一步</p>
  11. </div>
  12. </div>
  13. </el-col>
  14. <el-col :span="8">
  15. <div class="item">
  16. <img src="/qrcode/WeChat-Qr-Code.png">
  17. <div class="item-right">
  18. <p>微信扫描</p>
  19. <p>关注公众号</p>
  20. </div>
  21. </div>
  22. </el-col>
  23. <el-col :span="8">
  24. <div class="item">
  25. <p><a href="#">关于优软</a><a href="#" class="item-center">联系我们</a><a href="#">帮助</a></p>
  26. <p>&copy;2016 深圳市优软科技有限公司</p>
  27. <p>粤ICP备15112126号-2</p>
  28. </div>
  29. </el-col>
  30. </el-row>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. name: 'MainFooter'
  37. }
  38. </script>
  39. <style scoped type="text/scss" lang="scss">
  40. .footer{
  41. height: 200px;
  42. background: #fbfcfc;
  43. text-align: center;
  44. .item{
  45. padding-top:50px;
  46. img{
  47. vertical-align:middle;
  48. display:inline-block;
  49. width:100px;
  50. height:100px;
  51. }
  52. p{
  53. font-size: 14px;
  54. color:#999;
  55. margin-bottom:30px;
  56. text-align: left;
  57. a{
  58. color:#999;
  59. &:hover{
  60. color: #2f95dd;
  61. }
  62. &.item-center{
  63. margin:0 30px;
  64. }
  65. }
  66. }
  67. .item-right{
  68. display:inline-block;
  69. padding-left:20px;
  70. p{
  71. font-size: 14px;
  72. color:#999;
  73. margin-bottom:10px;
  74. }
  75. }
  76. }
  77. }
  78. </style>