FloorSpace.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <div class="floorSpace">
  3. <div
  4. class="floor-item"
  5. v-for="(item,index) in floorData"
  6. :key="index"
  7. >
  8. <div class="floor-num"><span>{{item.floorName}}</span></div>
  9. <div class="floor-space">
  10. <div
  11. class="space-name"
  12. v-for="(childItem,id) in item.data"
  13. :key="id"
  14. >
  15. <span>{{childItem.name}}</span>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'FloorSpace',
  24. data() {
  25. return {
  26. floorData: [
  27. {
  28. floorName: '8F',
  29. data: [
  30. { id: 1, name: '空间1' },
  31. { id: 2, name: '空间2' },
  32. { id: 3, name: '空间3' },
  33. ]
  34. },
  35. {
  36. floorName: '7F',
  37. data: [
  38. { id: 1, name: '空间1' },
  39. { id: 2, name: '空间2' },
  40. { id: 3, name: '空间3' },
  41. ]
  42. },
  43. ]
  44. }
  45. },
  46. }
  47. </script>
  48. <style lang="less" scoped>
  49. .floorSpace {
  50. .floor-item {
  51. display: flex;
  52. height: 130px;
  53. padding: 22px 0;
  54. box-sizing: border-box;
  55. }
  56. .floor-num {
  57. display: flex;
  58. margin: 0 23px;
  59. align-items: center;
  60. font-family: Persagy;
  61. font-size: 36px;
  62. font-weight: 700;
  63. line-height: 43px;
  64. color: #3b3558;
  65. }
  66. .floor-space {
  67. display: flex;
  68. }
  69. .space-name {
  70. margin-right: 8px;
  71. display: flex;
  72. justify-content: center;
  73. align-items: center;
  74. height: 86px;
  75. width: 90px;
  76. border-radius: 8px;
  77. background: #d9f5d6;
  78. }
  79. }
  80. </style>