rooms page in building-drawer

src/assets/images/member.svg

+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.78115 3.96471C2.66423 3.68263 2.60406 3.3803 2.60406 3.07498C2.60406 2.45836 2.84916 1.86699 3.28545 1.43097C3.72173 0.994953 4.31346 0.75 4.93046 0.75C5.54746 0.75 6.13919 0.994953 6.57547 1.43097C7.01176 1.86699 7.25686 2.45836 7.25686 3.07498C7.25686 3.3803 7.19668 3.68263 7.07977 3.96471C6.96286 4.24679 6.7915 4.5031 6.57547 4.71899C6.35945 4.93489 6.10298 5.10614 5.82073 5.22298C5.53848 5.33983 5.23597 5.39996 4.93046 5.39996C4.62495 5.39996 4.32244 5.33983 4.04018 5.22298C3.75793 5.10614 3.50147 4.93489 3.28545 4.71899C3.06942 4.5031 2.89806 4.24679 2.78115 3.96471Z" fill="currentColor"/>
+<path d="M5.01301 10.6275C5.08055 10.3425 5.31319 10.2675 5.62838 10.2525L5.20062 9.69751L5.76346 9.21751C6.18023 9.63682 6.70959 9.92652 7.28756 10.0516C7.86554 10.1767 8.4674 10.1319 9.02042 9.92251L6.91916 8.01752L6.52142 8.45252L5.65089 7.57503L7.07675 6.14254C7.1162 6.10312 7.19795 6.0933 7.27119 6.0845C7.29548 6.08158 7.31885 6.07878 7.33941 6.07504C7.39462 6.06501 7.49347 6.0684 7.59106 6.07174C7.63938 6.0734 7.6874 6.07504 7.72964 6.07504C7.85693 6.06273 7.98264 6.03761 8.10487 6.00004H8.17991L8.60017 6.39754L7.93977 7.08753L9.80089 9.11252C11.3243 7.44003 8.25496 5.30255 8.25496 5.30255C8.9513 5.28625 9.63094 5.51678 10.1735 5.9533C10.7161 6.38983 11.0865 7.00418 11.2192 7.68753C11.3264 8.50116 11.1516 9.32695 10.7239 10.0275L11.1967 10.3875C10.9191 10.695 10.4013 11.25 10.3862 11.25C10.3795 11.25 10.3217 11.1884 10.2471 11.109C10.155 11.0108 10.0373 10.8854 9.95848 10.815C9.9284 10.7935 9.89423 10.7785 9.85809 10.7707C9.82195 10.763 9.7846 10.7627 9.74836 10.77C9.17173 11.039 8.541 11.1721 7.90477 11.1591C7.26855 11.1461 6.64379 10.9874 6.07865 10.695L5.61337 11.25C5.54583 11.25 4.93796 10.9275 5.01301 10.6275Z" fill="currentColor"/>
+<path d="M4.64372 8.51472C4.7661 8.68417 4.88127 8.84365 4.93051 8.91746C4.94723 8.95657 4.95585 8.99867 4.95585 9.04121C4.95585 9.08374 4.94723 9.12584 4.93051 9.16495C4.68514 9.6729 4.42614 10.1763 4.16765 10.6787L4.16751 10.679C4.09399 10.8218 4.02052 10.9646 3.94741 11.1074C3.94741 11.1599 3.83485 11.2424 3.78232 11.2424C3.02901 11.2686 2.27495 11.2208 1.53096 11.0999C0.825537 10.9574 0.750491 10.7549 0.750491 10.0949C0.733999 8.9324 1.13316 7.80212 1.87617 6.90747C2.13974 6.61112 2.46521 6.37624 2.8296 6.21943C3.19399 6.06262 3.58839 5.9877 3.98494 5.99998C3.98494 5.99998 6.00365 5.96248 6.13873 5.99998C6.27381 6.03748 6.38638 6.07498 6.28132 6.17248L4.28512 8.00996C4.35689 8.11756 4.50495 8.32257 4.64372 8.51472Z" fill="currentColor"/>
+</svg>

src/components/MyComponent/main.styl

@@ -48,6 +48,7 @@ $table-bg(opacity = 0.3)
 
 $red = #dd505E
 $light-red = #FCF4F5
+$pink = #faadbb
 
 $blue = #3D7FE9
 $light-blue = #ECEFFA

src/main.ts

@@ -22,6 +22,7 @@ import {
   NDatePicker,
   NSwitch,
   NInputNumber,
+  NCarousel,
 } from 'naive-ui'
 
 const naive = create({
@@ -42,6 +43,7 @@ const naive = create({
     NDatePicker,
     NSwitch,
     NInputNumber,
+    NCarousel,
   ],
 })
 

src/view/components/building-drawer.vue

@@ -15,8 +15,62 @@
           楼宇
         </div>
       </template>
+      <div class="content">
         <p class="name">某某社区某某居委某某小区</p>
-      <div class="list">
+        <div v-if="showBuildingDetail" class="building">
+          <div class="nav">
+            <p>{{ curBuilding }}</p>
+            <span @click="showBuildingDetail = false">
+              返回
+              <n-icon size=".09rem">
+                <ArrowDown />
+              </n-icon>
+            </span>
+          </div>
+          <div v-if="floors && floors.length > 0" class="floors">
+            <div v-for="(item, i) in floors" :key="i">
+              <div class="title">
+                <p>{{ item.floor }}</p>
+                <div>
+                  <span>户数：{{ item.room }} </span>
+                  <span>党员数：{{ item.member }}</span>
+                </div>
+              </div>
+              <n-carousel show-arrow>
+                <div
+                  v-for="(_, segmentIndex) in new Array(
+                    Math.ceil(item.rooms.length / 4),
+                  )"
+                  :key="segmentIndex"
+                  class="rooms"
+                >
+                  <div
+                    v-for="(room, index) in item.rooms.slice(
+                      segmentIndex * 4,
+                      segmentIndex + 4,
+                    )"
+                    :key="index"
+                    class="room"
+                  >
+                    <div class="members">
+                      <n-icon
+                        v-for="(m, n) in room.members"
+                        :key="n"
+                        class="icon"
+                        size=".1rem"
+                      >
+                        <svg-icon :data="member" original />
+                      </n-icon>
+                    </div>
+                    <p>{{ room.name }}</p>
+                  </div>
+                </div>
+              </n-carousel>
+            </div>
+          </div>
+          <n-empty v-else style="margin-top: 0.2rem" size="small" />
+        </div>
+        <div v-else class="list">
           <div
             v-for="(item, i) in list"
             :key="i"
@@ -24,7 +78,7 @@
             @click="setBuilding(item)"
           >
             <p>
-            <n-icon class="dot" size=".1rem">
+              <n-icon class="dot" size=".08rem">
                 <svg-icon :data="dot" />
               </n-icon>
               {{ item }}
@@ -37,15 +91,17 @@
             </span>
           </div>
         </div>
+      </div>
     </n-drawer-content>
   </n-drawer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import store from '@/store'
 import dot from '@images/dot.svg'
-import { ArrowForward, ArrowBack } from '@vicons/ionicons5'
+import { ArrowForward, ArrowBack, ArrowDown } from '@vicons/ionicons5'
+import member from '@images/member.svg'
 const show = computed(() => store.state.showBuildingDrawer)
 const back = () => store.commit('SET_BUILDING_DRAWER', false)
 const closeDrawer = () => {
@@ -55,9 +111,73 @@ const closeDrawer = () => {
 
 const curBuilding = ref<string | null>(null)
 const showBuildingDetail = ref(false)
+onMounted(() => (showBuildingDetail.value = false))
 const setBuilding = (name: string) => (curBuilding.value = name)
+const floors = ref<any[]>([])
 const buildingNext = (name: string) => {
   setBuilding(name)
+  floors.value = [
+    {
+      floor: 'XXF',
+      room: 4,
+      member: 3,
+      rooms: [
+        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+      ],
+    },
+    {
+      floor: 'XXF',
+      room: 4,
+      member: 3,
+      rooms: [
+        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+      ],
+    },
+    {
+      floor: 'XXF',
+      room: 4,
+      member: 3,
+      rooms: [
+        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+      ],
+    },
+    {
+      floor: 'XXF',
+      room: 4,
+      member: 3,
+      rooms: [
+        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+      ],
+    },
+    {
+      floor: 'XXF',
+      room: 4,
+      member: 3,
+      rooms: [
+        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+        { name: 'XXX', members: [1, 2, 3, 4, 5] },
+      ],
+    },
+  ]
   showBuildingDetail.value = true
   // TODO
 }
@@ -81,11 +201,19 @@ const list = [
     &:hover
       color $red
       background $light-red
+.content
+  display flex
+  flex-direction column
+  height 100%
 .name
   margin .1rem
 .list
+  border-top .01rem solid $light-gray
   padding 0 .1rem
   background #f7f7f7
+  box-sizing border-box
+  flex 1
+  overflow-y auto
   >div
     $flex-align()
     justify-content space-between
@@ -109,4 +237,84 @@ const list = [
       font-size .09rem
       &:hover
         font-family $font-ping-medium
+.building
+  display flex
+  flex-direction column
+  flex 1
+  overflow-y auto
+  .nav
+    $flex-align()
+    justify-content space-between
+    padding .08rem
+    background #f7f7f7
+    box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
+    p
+      font-family $font-ping-medium
+    span
+      color $red
+      font-size .09rem
+      cursor pointer
+  .floors
+    padding .08rem
+    background $light-gray
+    flex 1
+    overflow-y auto
+    >div
+      background $white-bg
+      border-radius .04rem
+      padding .08rem 0
+      margin-bottom .08rem
+      box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
+      .title
+        $flex-align()
+        justify-content space-between
+        margin-bottom .05rem
+        padding 0 .1rem
+        font-family $font-ping-medium
+        p
+          color $red
+        span
+          color $font
+          font-size .08rem
+          margin-left .1rem
+      .rooms
+        overflow hidden
+        white-space nowrap
+        padding 0 .1rem
+        .room
+          width 23%
+          border-radius .04rem
+          border .01rem solid $light-gray
+          display inline-block
+          margin-right 1.6%
+          .members
+            display flex
+            flex-wrap wrap
+            background $light-red
+            height .4rem
+            box-sizing border-box
+            overflow hidden
+            >.icon
+              padding .04rem
+              cursor pointer
+              &:hover
+              &.on
+                color $pink
+          p
+            text-align center
+</style>
+<style lang="stylus">
+@import '../../components/MyComponent/main.styl'
+.floors
+  .n-carousel
+    .n-carousel__arrow
+      width .16rem
+      height @width
+      color $red
+      &.n-carousel__arrow--left
+        left -0.02rem
+      &.n-carousel__arrow--right
+        right -0.02rem
+    .n-carousel__dots
+      display none
 </style>

src/view/components/filter-drawer.vue

@@ -87,7 +87,7 @@
                 @click="setArea(item)"
               >
                 <p>
-                  <n-icon class="dot" size=".1rem">
+                  <n-icon class="dot" size=".08rem">
                     <svg-icon :data="dot" />
                   </n-icon>
                   {{ item }}
@@ -108,7 +108,7 @@
                 @click="setCommittee(item)"
               >
                 <p>
-                  <n-icon class="dot" size=".1rem">
+                  <n-icon class="dot" size=".08rem">
                     <svg-icon :data="dot" />
                   </n-icon>
                   {{ item }}
@@ -129,7 +129,7 @@
                 @click="setCommunity(item)"
               >
                 <p>
-                  <n-icon class="dot" size=".1rem">
+                  <n-icon class="dot" size=".08rem">
                     <svg-icon :data="dot" />
                   </n-icon>
                   {{ item }}