Skip to content

H
huamu
Commit 34c3372a authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

rooms page in building-drawer

parent 296296c8
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 25 deletions
src/assets/images/member.svg 0 → 100755
View file @ 34c3372a
<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
View file @ 34c3372a
......@@ -48,6 +48,7 @@ $table-bg(opacity = 0.3)
$red = #dd505E
$light-red = #FCF4F5
$pink = #faadbb
$blue = #3D7FE9
$light-blue = #ECEFFA
......
src/main.ts
View file @ 34c3372a
......@@ -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
View file @ 34c3372a
......@@ -15,26 +15,81 @@
楼宇
</div>
</template>
<p class="name">某某社区某某居委某某小区</p>
<div class="list">
<div
v-for="(item, i) in list"
:key="i"
:class="{ on: curBuilding === item }"
@click="setBuilding(item)"
>
<p>
<n-icon class="dot" size=".1rem">
<svg-icon :data="dot" />
</n-icon>
{{ item }}
</p>
<span class="next" @click="buildingNext(item)">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<ArrowForward />
</n-icon>
</span>
<div class="content">
<p class="name">某某社区某某居委某某小区</p>
<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"
:class="{ on: curBuilding === item }"
@click="setBuilding(item)"
>
<p>
<n-icon class="dot" size=".08rem">
<svg-icon :data="dot" />
</n-icon>
{{ item }}
</p>
<span class="next" @click="buildingNext(item)">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<ArrowForward />
</n-icon>
</span>
</div>
</div>
</div>
</n-drawer-content>
......@@ -42,10 +97,11 @@
</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
View file @ 34c3372a
......@@ -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 }}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment