diff --git a/src/components/other/index.vue b/src/components/other/index.vue
index de410e8..2be2a77 100644
--- a/src/components/other/index.vue
+++ b/src/components/other/index.vue
@@ -439,36 +439,48 @@
-
-
-
- {{ switchItem.switchName }}
-
-
-
- 重命名
- 定时
- 设置
- setSwitchOpen({ value, event }, switchItem)"
- />
+
+
+
+
+
+
+
+ {{ switchItem.switchName }}
+ 运行中
+ 已关闭
+
+
+
+
+
+ 重命名
+
+
+ 定时
+
+
+ 设置
+
+
+ setSwitchOpen({ value, event }, switchItem)"
+ />
+
@@ -2416,51 +2428,49 @@ defineExpose({
// 控制器区域样式
.controller-item {
- margin-bottom: 10px;
+ margin-bottom: 12px;
.controller-header {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 12px 0;
+ padding: 12px 0 10px 0;
+ border-bottom: 1px solid #f0f0f0;
+ margin-bottom: 10px;
.controller-name {
- font-size: 30px;
- font-weight: 600;
- color: #222;
display: flex;
align-items: center;
- gap: 10px;
+ gap: 8px;
+
+ .controller-title {
+ font-size: 30px;
+ font-weight: 600;
+ color: #222;
+ }
.error-tag {
- font-size: 24px;
+ font-size: 22px;
font-weight: 400;
color: #bf290e;
background: rgba(191, 41, 14, 0.1);
- padding: 4px 12px;
+ padding: 4px 10px;
border-radius: 4px;
}
}
-
- .controller-actions {
- .param-setting-link {
- font-size: 28px;
- color: #1589E9;
- cursor: pointer;
- transition: opacity 0.2s ease;
-
- &:active {
- opacity: 0.7;
- }
- }
- }
+ }
+
+ .switch-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
}
.switch-item {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 15px 0;
+ padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
@@ -2472,34 +2482,72 @@ defineExpose({
display: flex;
align-items: center;
gap: 12px;
+ min-width: 0;
- .switch-icon {
+ .switch-icon-wrapper {
+ flex-shrink: 0;
width: 40px;
height: 40px;
- flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .switch-icon {
+ width: 40px;
+ height: 40px;
+ }
}
- .switch-name {
- font-size: 28px;
- color: #333;
- font-weight: 500;
+ .switch-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+
+ .switch-name {
+ font-size: 28px;
+ color: #333;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .switch-status {
+ font-size: 22px;
+ color: #09b8c2;
+
+ &.off {
+ color: #999;
+ }
+ }
}
}
.switch-right {
+ flex-shrink: 0;
display: flex;
align-items: center;
- gap: 20px;
+ gap: 12px;
- .switch-setting-link {
- font-size: 28px;
- color: #1589E9;
- cursor: pointer;
- white-space: nowrap;
- transition: opacity 0.2s ease;
+ .switch-actions {
+ display: flex;
+ gap: 8px;
- &:active {
- opacity: 0.7;
+ .action-btn {
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 24px;
+ background: #fff;
+ border: 1px solid #e5e5e5;
+ color: #666;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+
+ &:active {
+ background: #f5f5f5;
+ }
}
}
}