75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<scroll-view class="room-tabs" scroll-x :show-scrollbar="false">
|
|
<view class="room-tabs__inner">
|
|
<view
|
|
v-for="room in rooms"
|
|
:key="room.id"
|
|
class="room-tabs__item"
|
|
:class="{ 'room-tabs__item--active': room.id === activeId }"
|
|
@tap="$emit('select', room.id)"
|
|
>
|
|
<text class="room-tabs__text">{{ room.name }}</text>
|
|
</view>
|
|
<view class="room-tabs__item room-tabs__item--add" @tap="$emit('add')">
|
|
<text class="room-tabs__text">+ 添加</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RoomTab } from '../../device.types'
|
|
|
|
defineProps<{
|
|
rooms: RoomTab[]
|
|
activeId: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
select: [id: string]
|
|
add: []
|
|
}>()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.room-tabs {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
padding: 8rpx 32rpx 24rpx;
|
|
}
|
|
|
|
.room-tabs__inner {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.room-tabs__item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16rpx 36rpx;
|
|
border-radius: 40rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
.room-tabs__item--active {
|
|
background: $color-primary;
|
|
}
|
|
|
|
.room-tabs__item--active .room-tabs__text {
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.room-tabs__item--add .room-tabs__text {
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
.room-tabs__text {
|
|
font-size: 28rpx;
|
|
color: $color-text;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|