feat: 新增7种简约纯色表格风格
新增风格: - slate 石板灰:专业商务 - sky 天空蓝:清爽明亮 - rose 玫瑰红:优雅大方 - amber 琥珀黄:温暖柔和 - emerald 翡翠绿:高贵典雅 - indigo 靛蓝色:沉稳内敛 - stone 石灰白:极简现代 特点:纯色表头,简洁干净,无渐变效果
This commit is contained in:
+42
@@ -81,6 +81,13 @@ C, 20, 30, 40</pre>
|
|||||||
<option value="gold">金色</option>
|
<option value="gold">金色</option>
|
||||||
<option value="coral">珊瑚</option>
|
<option value="coral">珊瑚</option>
|
||||||
<option value="mint">薄荷</option>
|
<option value="mint">薄荷</option>
|
||||||
|
<option value="slate">石板灰</option>
|
||||||
|
<option value="sky">天空蓝</option>
|
||||||
|
<option value="rose">玫瑰红</option>
|
||||||
|
<option value="amber">琥珀黄</option>
|
||||||
|
<option value="emerald">翡翠绿</option>
|
||||||
|
<option value="indigo">靛蓝色</option>
|
||||||
|
<option value="stone">石灰白</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -123,6 +130,13 @@ C, 20, 30, 40</pre>
|
|||||||
<option value="gold">金色</option>
|
<option value="gold">金色</option>
|
||||||
<option value="coral">珊瑚</option>
|
<option value="coral">珊瑚</option>
|
||||||
<option value="mint">薄荷</option>
|
<option value="mint">薄荷</option>
|
||||||
|
<option value="slate">石板灰</option>
|
||||||
|
<option value="sky">天空蓝</option>
|
||||||
|
<option value="rose">玫瑰红</option>
|
||||||
|
<option value="amber">琥珀黄</option>
|
||||||
|
<option value="emerald">翡翠绿</option>
|
||||||
|
<option value="indigo">靛蓝色</option>
|
||||||
|
<option value="stone">石灰白</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -260,6 +274,34 @@ C, 20, 30, 40</pre>
|
|||||||
<span class="theme-preview" style="background: linear-gradient(135deg, #00bfa5, #80cbc4)"></span>
|
<span class="theme-preview" style="background: linear-gradient(135deg, #00bfa5, #80cbc4)"></span>
|
||||||
<span class="theme-name">薄荷</span>
|
<span class="theme-name">薄荷</span>
|
||||||
</button>
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="slate" onclick="quickSwitchTheme('slate')">
|
||||||
|
<span class="theme-preview" style="background: #475569"></span>
|
||||||
|
<span class="theme-name">石板灰</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="sky" onclick="quickSwitchTheme('sky')">
|
||||||
|
<span class="theme-preview" style="background: #0ea5e9"></span>
|
||||||
|
<span class="theme-name">天空蓝</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="rose" onclick="quickSwitchTheme('rose')">
|
||||||
|
<span class="theme-preview" style="background: #e11d48"></span>
|
||||||
|
<span class="theme-name">玫瑰红</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="amber" onclick="quickSwitchTheme('amber')">
|
||||||
|
<span class="theme-preview" style="background: #f59e0b"></span>
|
||||||
|
<span class="theme-name">琥珀黄</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="emerald" onclick="quickSwitchTheme('emerald')">
|
||||||
|
<span class="theme-preview" style="background: #10b981"></span>
|
||||||
|
<span class="theme-name">翡翠绿</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="indigo" onclick="quickSwitchTheme('indigo')">
|
||||||
|
<span class="theme-preview" style="background: #6366f1"></span>
|
||||||
|
<span class="theme-name">靛蓝色</span>
|
||||||
|
</button>
|
||||||
|
<button class="theme-btn" data-theme="stone" onclick="quickSwitchTheme('stone')">
|
||||||
|
<span class="theme-preview" style="background: #78716c"></span>
|
||||||
|
<span class="theme-name">石灰白</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -570,6 +570,70 @@ const tableThemes = {
|
|||||||
borderColor: '#80cbc4',
|
borderColor: '#80cbc4',
|
||||||
stripeColor: '#e0f2f1',
|
stripeColor: '#e0f2f1',
|
||||||
titleColor: '#004d40'
|
titleColor: '#004d40'
|
||||||
|
},
|
||||||
|
// 简约纯色风格
|
||||||
|
slate: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#475569',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#334155',
|
||||||
|
borderColor: '#cbd5e1',
|
||||||
|
stripeColor: '#f8fafc',
|
||||||
|
titleColor: '#1e293b'
|
||||||
|
},
|
||||||
|
sky: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#0ea5e9',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#0c4a6e',
|
||||||
|
borderColor: '#bae6fd',
|
||||||
|
stripeColor: '#f0f9ff',
|
||||||
|
titleColor: '#0c4a6e'
|
||||||
|
},
|
||||||
|
rose: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#e11d48',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#881337',
|
||||||
|
borderColor: '#fecdd3',
|
||||||
|
stripeColor: '#fff1f2',
|
||||||
|
titleColor: '#881337'
|
||||||
|
},
|
||||||
|
amber: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#f59e0b',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#78350f',
|
||||||
|
borderColor: '#fde68a',
|
||||||
|
stripeColor: '#fffbeb',
|
||||||
|
titleColor: '#78350f'
|
||||||
|
},
|
||||||
|
emerald: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#10b981',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#064e3b',
|
||||||
|
borderColor: '#a7f3d0',
|
||||||
|
stripeColor: '#ecfdf5',
|
||||||
|
titleColor: '#064e3b'
|
||||||
|
},
|
||||||
|
indigo: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#6366f1',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#312e81',
|
||||||
|
borderColor: '#c7d2fe',
|
||||||
|
stripeColor: '#eef2ff',
|
||||||
|
titleColor: '#312e81'
|
||||||
|
},
|
||||||
|
stone: {
|
||||||
|
bgColor: '#ffffff',
|
||||||
|
headerBg: '#78716c',
|
||||||
|
headerColor: '#ffffff',
|
||||||
|
cellColor: '#44403c',
|
||||||
|
borderColor: '#d6d3d1',
|
||||||
|
stripeColor: '#fafaf9',
|
||||||
|
titleColor: '#292524'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user