project-message.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <script setup>
  2. import { propertyData } from "../configs/properites";
  3. import TitleHeader from "@/views/modules/project-config/com/titleHeader.vue";
  4. const emits = defineEmits(["onClickItem"]);
  5. // 当点击了项目
  6. const handleClickItem = (item) => {
  7. emits("onClickItem", item);
  8. };
  9. const router = useRouter();
  10. const goGlobalConfig = () => {
  11. router.push({ path: "/main/global-config" });
  12. };
  13. </script>
  14. <template>
  15. <div class="project-message-col">
  16. <TitleHeader> 工程信息</TitleHeader>
  17. <div class="project-msg-item">
  18. <span class="text-l">产品:</span>
  19. <span class="text-r">{{ "控制面板" }}</span>
  20. <span class="edit">
  21. <svg-icon icon-class="homeIcon2" />
  22. </span>
  23. </div>
  24. <div class="project-msg-item">
  25. <span class="text-l">工程类型:</span
  26. ><span class="text-r">{{ "控制面板" }}</span>
  27. </div>
  28. <div class="project-msg-item">
  29. <span class="text-l">版本:</span
  30. ><span class="text-r">{{ "控制面板" }}</span>
  31. </div>
  32. <div class="project-msg-item">
  33. <span class="text-l">创建时间:</span
  34. ><span class="text-r">{{ "控制面板" }}</span>
  35. </div>
  36. <div class="project-all-config" @click="goGlobalConfig">
  37. <svg-icon icon-class="project-config" />
  38. 全局配置
  39. </div>
  40. <div class="project-test-btn">
  41. <div class="name">测试项目</div>
  42. <div class="btn">
  43. <span>-</span>
  44. <span>+</span>
  45. </div>
  46. </div>
  47. <div class="project-list-cont">
  48. <div
  49. class="project-list-item"
  50. v-for="item in 10"
  51. :key="index"
  52. @click="handleClickItem(item)"
  53. >
  54. {{ item }}
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <style scoped lang="scss">
  60. .project-message-col {
  61. width: 200px;
  62. flex-shrink: 0;
  63. height: calc(100vh - $main-header-height);
  64. background-color: $hj-black-2;
  65. border-right: 1px solid $hj-white-4;
  66. .project-msg-item {
  67. position: relative;
  68. padding: 0 11px;
  69. margin-bottom: 10px;
  70. .text-l {
  71. font-size: var(--hj-fs-12);
  72. color: var(--fc-color-3);
  73. }
  74. .text-r {
  75. font-size: var(--hj-fs-14);
  76. color: var(--hj-white-1);
  77. }
  78. .edit {
  79. cursor: pointer;
  80. position: absolute;
  81. right: 20px;
  82. color: var(--hj-white-1);
  83. }
  84. }
  85. .project-all-config {
  86. width: 130px;
  87. height: 36px;
  88. line-height: 36px;
  89. margin: 0 auto;
  90. background: var(--fc-color-7);
  91. color: var(--hj-white-1);
  92. text-align: center;
  93. border-radius: 4px 4px 4px 4px;
  94. cursor: pointer;
  95. }
  96. .project-test-btn {
  97. display: flex;
  98. justify-content: space-between;
  99. margin: 0 12px;
  100. margin-top: 12px;
  101. position: relative;
  102. padding: 14px 0;
  103. &::before {
  104. position: absolute;
  105. top: 0;
  106. content: "";
  107. display: block;
  108. width: 100%;
  109. height: 1px;
  110. background-color: var(--hj-white-4);
  111. }
  112. .name {
  113. font-size: var(--hj-fs-14);
  114. font-weight: 400;
  115. color: var(--hj-white-1);
  116. }
  117. .btn {
  118. span {
  119. cursor: pointer;
  120. display: inline-block;
  121. width: 18px;
  122. height: 18px;
  123. text-align: center;
  124. line-height: 16px;
  125. border-radius: 0px 0px 0px 0px;
  126. border: 2px solid #ffffff;
  127. color: var(--hj-white-1);
  128. &:nth-of-type(2) {
  129. margin-left: 12px;
  130. }
  131. }
  132. }
  133. }
  134. .project-list-cont {
  135. height: 300px;
  136. overflow-y: auto;
  137. .project-list-item {
  138. cursor: pointer;
  139. font-size: var(--hj-fs-12);
  140. color: var(--hj-white-1);
  141. margin: 0 12px;
  142. margin-bottom: 12px;
  143. height: 36px;
  144. line-height: 36px;
  145. text-align: center;
  146. background: rgba(59, 124, 255, 0.5);
  147. border-radius: 4px 4px 4px 4px;
  148. border: 1px solid #3b7cff;
  149. }
  150. }
  151. }
  152. </style>