feat:登录注册完成

src/pages/device/components/room-tabs/index.vue

@@ -0,0 +1,74 @@
+<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>