|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div class="page-container"> |
|
|
|
<!-- 背景装饰 --> |
|
|
|
<div class="background-decoration"></div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 主内容区域 --> |
|
|
|
<div class="main-content"> |
|
|
|
<!-- 房间选择面板 --> |
|
|
|
@ -16,13 +16,13 @@ |
|
|
|
<!-- 房间列表 --> |
|
|
|
<div class="room-list"> |
|
|
|
<!-- 房间项 --> |
|
|
|
<div |
|
|
|
v-for="room in getParentRooms" |
|
|
|
<div |
|
|
|
v-for="room in getParentRooms" |
|
|
|
:key="room.id" |
|
|
|
class="room-group" |
|
|
|
> |
|
|
|
<!-- 父房间 --> |
|
|
|
<div |
|
|
|
<div |
|
|
|
class="room-item parent-room" |
|
|
|
:class="{ 'active': selectedRoom === room.id }" |
|
|
|
@click="toggleRoomExpansion(room)" |
|
|
|
@ -52,8 +52,8 @@ |
|
|
|
|
|
|
|
<!-- 子房间列表 --> |
|
|
|
<div v-if="expandedRooms.includes(room.id)" class="child-rooms"> |
|
|
|
<div |
|
|
|
v-for="childRoom in getChildRooms(room.id)" |
|
|
|
<div |
|
|
|
v-for="childRoom in getChildRooms(room.id)" |
|
|
|
:key="childRoom.id" |
|
|
|
class="room-item child-room" |
|
|
|
:class="{ 'active': selectedRoom === childRoom.id }" |
|
|
|
@ -90,9 +90,9 @@ |
|
|
|
<button @click="showAddRoomDialog" class="btn-secondary"> |
|
|
|
<i class="fa fa-plus"></i> 新增大房间 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
@click="enterRoom" |
|
|
|
class="btn-primary" |
|
|
|
<button |
|
|
|
@click="enterRoom" |
|
|
|
class="btn-primary" |
|
|
|
:disabled="!selectedRoom" |
|
|
|
:class="{ 'disabled': !selectedRoom }" |
|
|
|
> |
|
|
|
@ -108,8 +108,8 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 右键菜单 --> |
|
|
|
<div |
|
|
|
v-if="contextMenu.visible" |
|
|
|
<div |
|
|
|
v-if="contextMenu.visible" |
|
|
|
:style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }" |
|
|
|
class="context-menu" |
|
|
|
> |
|
|
|
@ -135,9 +135,9 @@ |
|
|
|
<div class="dialog-body"> |
|
|
|
<div class="form-group"> |
|
|
|
<label>房间名称</label> |
|
|
|
<input |
|
|
|
v-model="dialog.form.name" |
|
|
|
type="text" |
|
|
|
<input |
|
|
|
v-model="dialog.form.name" |
|
|
|
type="text" |
|
|
|
placeholder="请输入房间名称" |
|
|
|
class="form-input" |
|
|
|
> |
|
|
|
@ -303,7 +303,7 @@ export default { |
|
|
|
alert('请输入房间名称') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.dialog.mode === 'add') { |
|
|
|
const newRoom = { |
|
|
|
id: Date.now(), |
|
|
|
@ -355,7 +355,7 @@ export default { |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background-image: |
|
|
|
background-image: |
|
|
|
radial-gradient(circle at 20% 20%, rgba(22, 93, 255, 0.05) 0%, transparent 50%), |
|
|
|
radial-gradient(circle at 80% 80%, rgba(22, 93, 255, 0.05) 0%, transparent 50%); |
|
|
|
pointer-events: none; |
|
|
|
@ -947,47 +947,46 @@ button { |
|
|
|
.page-container { |
|
|
|
padding: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.system-header { |
|
|
|
margin-bottom: 20px; |
|
|
|
padding: 0 16px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.system-title h1 { |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.room-panel { |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.panel-header { |
|
|
|
padding: 20px 24px 16px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.panel-header h2 { |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.room-item { |
|
|
|
padding: 14px 24px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.child-room { |
|
|
|
padding-left: 48px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.add-child-room { |
|
|
|
padding: 10px 24px 10px 48px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.action-buttons { |
|
|
|
padding: 20px 24px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.dialog { |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
