headers.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <div class="header_box">
  3. <div class="header_left">
  4. <img src="https://css.huijiaoyun.com/tianyu_edu/area/888888/images/logo/logo.png?v=0818" class="logo_img"/>
  5. <div class="header_list">
  6. <ul>
  7. <a href=""><li v-for="items in navlist" class="nav_name">{{items.name}}</li></a>
  8. </ul>
  9. </div>
  10. </div>
  11. <div class="header_right">
  12. <div class="login_btn"><button>登录</button></div>
  13. <div class="helper"><button>教学助手</button></div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. navlist: [
  22. { "id": 1, "name": '首页', "url": '' },
  23. { "id": 2, "name": '资源', "url": '' },
  24. { "id": 3, "name": '名师', "url": '' },
  25. { "id": 4, "name": '活动', "url": '' },
  26. ],
  27. }
  28. }
  29. }
  30. </script>
  31. <style scoped>
  32. .header_box {
  33. width: 1200px;
  34. height: 85px;
  35. background-color:#fff;
  36. margin:0 auto;
  37. }
  38. .header_left {
  39. width: 800px;
  40. float: left;
  41. height: 75px;
  42. }
  43. .header_right {
  44. width: 400px;;
  45. float: left;
  46. height: 75px;
  47. }
  48. .logo_img {
  49. float: left;
  50. margin-left:5%;
  51. }
  52. .header_list {
  53. float: left;
  54. width:70%;
  55. padding-left:15%;
  56. }
  57. .nav_name {
  58. width: 15%;
  59. float: left;
  60. list-style: none;
  61. display: block;
  62. height: 38px;
  63. line-height: 85px;
  64. padding: 0 5px;
  65. margin: 0 11px;
  66. font-size: 18px;
  67. color: #555555;
  68. text-align:center;
  69. }
  70. .login_btn {
  71. width:30%;
  72. display:block;
  73. float:left;
  74. margin-left:40%;
  75. }
  76. .login_btn button {
  77. width: 85px;
  78. text-align: center;
  79. background: #26b5ff;
  80. color: #fff;
  81. height: 35px;
  82. line-height: 35px;
  83. margin: 22px 22px 0px 22px;
  84. border: 0;
  85. border-radius: 10px;
  86. font-size:18px;
  87. }
  88. .helper {
  89. width: 30%;
  90. display: block;
  91. float: left;
  92. padding-top:22px;
  93. }
  94. .helper button {
  95. padding: 0 17px;
  96. color: #288add;
  97. border: 1px solid #2196f3;
  98. height: 30px;
  99. line-height: 30px;
  100. background: #fff;
  101. font-size: 18px;
  102. }
  103. </style>