1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <template>
- <div class="floorSpace">
- <div
- class="floor-item"
- v-for="(item,index) in floorData"
- :key="index"
- >
- <div class="floor-num"><span>{{item.floorName}}</span></div>
- <div class="floor-space">
- <div
- class="space-name"
- v-for="(childItem,id) in item.data"
- :key="id"
- >
- <span>{{childItem.name}}</span>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'FloorSpace',
- data() {
- return {
- floorData: [
- {
- floorName: '8F',
- data: [
- { id: 1, name: '空间1' },
- { id: 2, name: '空间2' },
- { id: 3, name: '空间3' },
- ]
- },
- {
- floorName: '7F',
- data: [
- { id: 1, name: '空间1' },
- { id: 2, name: '空间2' },
- { id: 3, name: '空间3' },
- ]
- },
- ]
- }
- },
- }
- </script>
- <style lang="less" scoped>
- .floorSpace {
- .floor-item {
- display: flex;
- height: 130px;
- padding: 22px 0;
- box-sizing: border-box;
- }
- .floor-num {
- display: flex;
- margin: 0 23px;
- align-items: center;
- font-family: Persagy;
- font-size: 36px;
- font-weight: 700;
- line-height: 43px;
- color: #3b3558;
- }
- .floor-space {
- display: flex;
- }
- .space-name {
- margin-right: 8px;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 86px;
- width: 90px;
- border-radius: 8px;
- background: #d9f5d6;
- }
- }
- </style>
|