石墨仪设备 前端仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
3.3 KiB

6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
  1. <template>
  2. <div class="header">
  3. <div class="header_logo">
  4. <img :src="logo" class="logo"/>
  5. <div>长春黄金研究院有限公司</div>
  6. </div>
  7. <div class="header_time">
  8. {{ currentTime }}
  9. </div>
  10. <div class="header_user">
  11. <img :src="AvatarSvg" width="40px" height="40px"/>
  12. <div class="user_name">Admin</div>
  13. </div>
  14. </div>
  15. </template>
  16. <script lang="ts" setup>
  17. import logo from '@/assets/logo.svg'
  18. import AvatarSvg from '@/assets/avatar.svg'
  19. import { ref, onMounted } from 'vue'
  20. import {eventBus} from '@/eventBus'
  21. import { getFormattedDateTime } from '@/utils'
  22. const menuId = ref(0)
  23. const time = getFormattedDateTime()
  24. const currentTime = ref(time)
  25. onMounted(()=>{
  26. //测试页面返回时,需要调整菜单
  27. eventBus.on('menuId', (value:number)=>{
  28. menuId.value = value
  29. })
  30. })
  31. </script>
  32. <style lang="scss" scoped>
  33. @use "@/assets/style/mixin.scss" as *;
  34. .header{
  35. display: flex;
  36. align-items: center;
  37. background: #e9e9e9;
  38. align-items: center;
  39. height: var(--headerHeight);
  40. .header_logo{
  41. display: flex;
  42. font-size: 36px;
  43. align-items: center;
  44. width: 700px;
  45. color: #8799AB;
  46. gap: 5px;
  47. padding-left: 50px;
  48. .logo{
  49. height:85px;
  50. width:85px;
  51. }
  52. }
  53. .header_time{
  54. width: 375px;
  55. height: 80px;
  56. font-size: 28px;
  57. display: flex;
  58. align-items: center;
  59. margin-left: 54%;
  60. background: white;
  61. justify-content: center;
  62. border-radius: 10px;
  63. }
  64. .header_ins{
  65. display: flex;
  66. align-items: center;
  67. border-radius: 5px;
  68. width: 444px;
  69. height: 80px;
  70. background: #FFFFFF;
  71. }
  72. .header_container{
  73. margin-left: 10px;
  74. display: flex;
  75. align-items: center;
  76. border-radius: 5px;
  77. width: 500px;
  78. height: 80px;
  79. background: #FFFFFF;
  80. .waste_status{
  81. padding:5px 5px;
  82. width: 75%;
  83. }
  84. .waste_detail{
  85. display: flex;
  86. justify-content: flex-end;
  87. width: 40%;
  88. }
  89. }
  90. .header_user{
  91. display: flex;
  92. align-items: center;
  93. justify-content: flex-end;
  94. gap: 5px;
  95. margin-left: 30px;
  96. }
  97. .user_name{
  98. font-size: 34px;
  99. color: #393F46;
  100. }
  101. }
  102. .circle {
  103. width: 30px;
  104. height: 30px;
  105. background-color: green;
  106. border-radius: 50%;
  107. margin-left: 10px;
  108. }
  109. :deep(.van-dropdown-menu__bar){
  110. background-color: #1871F8;
  111. border-radius: 5px;
  112. height: 30px;
  113. width: 90px;
  114. .van-ellipsis{
  115. color:white;
  116. }
  117. }
  118. :deep(.van-dropdown-item__content){
  119. width: 150px;
  120. margin-left: 170px;
  121. }
  122. .text_size{
  123. font-size:30px;
  124. padding-right: 5px;
  125. }
  126. </style>