drafts.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div id="drafts">
  3. <div class="tit">草稿箱</div>
  4. <div class="conent">
  5. <div class="left-nav">
  6. <Tree :data="treeData" @change="change"></Tree>
  7. </div>
  8. <div class="conent-right">
  9. <div class="conent-tit">
  10. <div class="tit-left">消防系统-4F</div>
  11. <div class="tit-right">
  12. <a-button>发布</a-button>
  13. <a-button type="primary">编辑</a-button>
  14. </div>
  15. </div>
  16. <div class="map"></div>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. const dataArr = [
  23. {
  24. id: "0",
  25. name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
  26. open: false,
  27. checked: "uncheck",
  28. children: [
  29. {
  30. id: "1",
  31. name: "一级1",
  32. open: false,
  33. checked: "uncheck",
  34. children: [
  35. { id: "12", name: "二级2", checked: "uncheck" },
  36. { id: "121", name: "二级3", checked: "uncheck" },
  37. { id: "122", name: "二级4", checked: "uncheck" },
  38. {
  39. id: "1321",
  40. name: "二级1",
  41. open: false,
  42. checked: "uncheck",
  43. children: [
  44. { id: "13", name: "三级2", checked: "uncheck" },
  45. { id: "131", name: "三级3", checked: "uncheck" },
  46. { id: "132", name: "三级4", checked: "uncheck" }
  47. ]
  48. }
  49. ]
  50. },
  51. {
  52. id: "2",
  53. name: "一级2",
  54. open: false,
  55. checked: "uncheck",
  56. children: [
  57. { id: "222", name: "二级2", checked: "uncheck" },
  58. { id: "2221", name: "二级1", checked: "uncheck" },
  59. { id: "2222", name: "二级3", checked: "uncheck" }
  60. ]
  61. },
  62. {
  63. id: "3",
  64. name: "一级3",
  65. open: false,
  66. checked: "uncheck",
  67. children: [
  68. { id: "322", name: "二级2", checked: "uncheck" },
  69. { id: "3220", name: "二级0", checked: "uncheck" },
  70. { id: "3221", name: "二级1", checked: "uncheck" }
  71. ]
  72. }
  73. ]
  74. }
  75. ];
  76. import Tree from "./../components/Tree/Tree.vue";
  77. export default {
  78. components: { Tree },
  79. data() {
  80. return {
  81. treeData:JSON.parse(JSON.stringify(dataArr))
  82. };
  83. },
  84. methods: {
  85. change() {}
  86. }
  87. };
  88. </script>
  89. <style lang="less" scoped>
  90. #drafts {
  91. widows: 100%;
  92. height: 100%;
  93. background: #f7f9fa;
  94. position: relative;
  95. .tit {
  96. width: 100%;
  97. height: 48px;
  98. display: flex;
  99. justify-content: center;
  100. align-items: center;
  101. border-bottom: #e4e5e7 solid 1px;
  102. font-size: 16px;
  103. font-weight: bold;
  104. }
  105. .conent {
  106. width: 100%;
  107. height: calc(100% - 48px);
  108. display: flex;
  109. position: relative;
  110. .left-nav {
  111. width: 224px;
  112. height: 100%;
  113. }
  114. .conent-right {
  115. flex: 1;
  116. height: 100%;
  117. background: #fff;
  118. .conent-tit {
  119. width: 100%;
  120. display: flex;
  121. height: 59px;
  122. border: 1px solid #eff0f1;
  123. align-items: center;
  124. justify-content: space-between;
  125. padding: 0 16px 0 16px;
  126. box-sizing: border-box;
  127. .tit-left {
  128. font-size: 16px;
  129. font-weight: bold;
  130. color: rgba(31, 35, 41, 1);
  131. }
  132. .tit-right {
  133. width: 146px;
  134. display: flex;
  135. justify-content: space-between;
  136. }
  137. }
  138. .map {
  139. width: 100%;
  140. height: calc(100% - 61px);
  141. background: red;
  142. }
  143. }
  144. }
  145. }
  146. </style>