refactor: restructure css files into common and page-specific styles
This commit is contained in:
shenghuo2
416
styles/smart.css
Normal file
416
styles/smart.css
Normal file
@ -0,0 +1,416 @@
|
||||
/* 智能场景页面专用样式 */
|
||||
|
||||
/* 智能场景页面样式 */
|
||||
.smart-tabs {
|
||||
display: flex;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.smart-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.smart-tab.active {
|
||||
color: #ff6900;
|
||||
border-bottom-color: #ff6900;
|
||||
}
|
||||
|
||||
.smart-content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 场景列表 */
|
||||
.scene-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 场景项目 */
|
||||
.scene-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.scene-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.scene-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.scene-icon.blue {
|
||||
background: #007AFF;
|
||||
}
|
||||
|
||||
.scene-icon.green {
|
||||
background: #34C759;
|
||||
}
|
||||
|
||||
.scene-icon.purple {
|
||||
background: #AF52DE;
|
||||
}
|
||||
|
||||
.scene-icon.orange {
|
||||
background: #FF9500;
|
||||
}
|
||||
|
||||
.scene-icon.yellow {
|
||||
background: #FFCC02;
|
||||
}
|
||||
|
||||
.scene-icon.dark-purple {
|
||||
background: #5856D6;
|
||||
}
|
||||
|
||||
.scene-icon.blue-light {
|
||||
background: #32D74B;
|
||||
}
|
||||
|
||||
.scene-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.scene-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.scene-execute-btn {
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.scene-execute-btn:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.scene-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.scene-status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.scene-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.scene-devices {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.device-tag {
|
||||
background-color: #f8f8f8;
|
||||
color: #666;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 自动化相关样式 */
|
||||
.automation-list {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.automation-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.automation-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.automation-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #4CAF50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.automation-icon.gray {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
.automation-arrow {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.automation-notification {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #FF5722;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.automation-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.automation-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.automation-count {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.automation-toggle {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 自动化页面的切换开关样式 */
|
||||
.automation-toggle .toggle-switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
appearance: none;
|
||||
background: #ddd;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.automation-toggle .toggle-switch:checked {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.automation-toggle .toggle-switch:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.automation-toggle .toggle-switch:checked:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* 添加按钮 */
|
||||
.add-scene-btn {
|
||||
background-color: #ff6900;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.add-scene-btn:hover {
|
||||
background-color: #e55a00;
|
||||
}
|
||||
|
||||
.add-scene-btn i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 过滤器部分 */
|
||||
.filter-section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.filter-dropdown {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-dropdown i {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 控制部分 */
|
||||
.control-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.control-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.control-icon.purple {
|
||||
background: #AF52DE;
|
||||
}
|
||||
|
||||
.control-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.control-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.control-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
/* 自动化部分 */
|
||||
.automation-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.automation-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 空状态文本 */
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
Reference in New Issue
Block a user