adminHeader.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <div class="header">
  3. <div class="container">
  4. <el-row>
  5. <el-col :span="6">
  6. <div class="f-title">
  7. <img src="" alt="">
  8. <span>商家预约后台管理系统</span>
  9. </div>
  10. </el-col>
  11. <el-col :span="8">
  12. <ul class="f-nav">
  13. <li class="active"><span>首页</span></li>
  14. <li><span>消息</span><i>23</i></li>
  15. </ul>
  16. </el-col>
  17. </el-row>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'adminHeader'
  24. }
  25. </script>
  26. <style scoped type="text/scss" lang="scss">
  27. // 头部信息
  28. .header{
  29. background: #2f95dd;
  30. height:50px;
  31. vertical-align: middle;
  32. .f-title{
  33. img{
  34. display:inline-block;
  35. width:36px;
  36. height:36px;
  37. border-radius:50%;
  38. background: #fff;
  39. margin-top:7px;
  40. }
  41. span{
  42. font-size: 18px;
  43. font-weight: bold;
  44. color:#fff;
  45. margin-left:15px;
  46. vertical-align: top;
  47. line-height: 50px;
  48. }
  49. }
  50. .f-nav{
  51. margin-left:30px;
  52. li{
  53. display:inline-block;
  54. position:relative;
  55. width:75px;
  56. margin:0 50px;
  57. text-align: center;
  58. &.active:after{
  59. position:absolute;
  60. bottom:0;
  61. left:50%;
  62. margin-left:-7px;
  63. display:block;
  64. content: '';
  65. width:0;
  66. height:0;
  67. border:7px solid #2f95dd;
  68. border-bottom:7px solid #fff;
  69. }
  70. span{
  71. line-height: 50px;
  72. font-size: 16px;
  73. color:#fff;
  74. }
  75. i{
  76. position:absolute;
  77. top:7px;
  78. right:-3px;
  79. display:block;
  80. width:24px;
  81. height:24px;
  82. line-height: 24px;
  83. background: #e35b61;
  84. border-radius:50%;
  85. text-align: center;
  86. font-size: 12px;
  87. font-style:normal;
  88. color:#fff;
  89. }
  90. }
  91. }
  92. }
  93. </style>