first commit
This commit is contained in:
File diff suppressed because it is too large
Load Diff
Vendored
+9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,28 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('../fonts/iconfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 36rpx;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-back::before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-more::before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-emoji::before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-add::before {
|
||||
content: "\e604";
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -0,0 +1,258 @@
|
||||
// 蓝白亮色主题 (Light Theme)
|
||||
:root,
|
||||
.theme-light {
|
||||
--primary-color: #2B7CE9;
|
||||
--primary-dark: #1E5F99;
|
||||
--primary-light: #5A9EF0;
|
||||
--primary-gradient: linear-gradient(135deg, #2B7CE9 0%, #5A9EF0 100%);
|
||||
--background: #F8FAFC;
|
||||
--background-light: #FFFFFF;
|
||||
--surface: #fff;
|
||||
--surface-hover: #F8FAFC;
|
||||
--border: #E2E8F0;
|
||||
--border-light: #F1F5F9;
|
||||
--accent: #3498db;
|
||||
--text-color: #1A202C;
|
||||
--text-secondary: #718096;
|
||||
--text-muted: #A0AEC0;
|
||||
--title-color: #1A202C;
|
||||
--subtitle-color: #718096;
|
||||
--icon-color: #2B7CE9;
|
||||
--gray: #E2E8F0;
|
||||
--gray-dark: #A0AEC0;
|
||||
--gray-light: #F7FAFC;
|
||||
--gray-lighter: #F8FAFC;
|
||||
--shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.08);
|
||||
--shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* 功能色 */
|
||||
--blue: #3182CE;
|
||||
--blue-light: #63B3ED;
|
||||
--red: #E53E3E;
|
||||
--red-light: #FC8181;
|
||||
--green: #38A169;
|
||||
--green-light: #68D391;
|
||||
--yellow: #D69E2E;
|
||||
--yellow-light: #F6E05E;
|
||||
--purple: #805AD5;
|
||||
--purple-light: #B794F6;
|
||||
--orange: #DD6B20;
|
||||
--orange-light: #FBD38D;
|
||||
--pink: #D53F8C;
|
||||
--pink-light: #F687B3;
|
||||
--cyan: #319795;
|
||||
--cyan-light: #4FD1C7;
|
||||
|
||||
/* 状态色 */
|
||||
--success: #38A169;
|
||||
--success-light: #C6F6D5;
|
||||
--warning: #D69E2E;
|
||||
--warning-light: #FEFCBF;
|
||||
--error: #E53E3E;
|
||||
--error-light: #FED7D7;
|
||||
--info: #3182CE;
|
||||
--info-light: #BEE3F8;
|
||||
|
||||
/* 组件色 */
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
--badge-bg: #E53E3E;
|
||||
--badge-text: #fff;
|
||||
--tab-active: #2B7CE9;
|
||||
--tab-inactive: #A0AEC0;
|
||||
--button-primary: #2B7CE9;
|
||||
--button-primary-hover: #1E5F99;
|
||||
--button-secondary: #E2E8F0;
|
||||
--button-secondary-hover: #CBD5E0;
|
||||
|
||||
/* 渐变 */
|
||||
--gradient-primary: linear-gradient(135deg, #2B7CE9 0%, #5A9EF0 100%);
|
||||
--gradient-success: linear-gradient(135deg, #38A169 0%, #68D391 100%);
|
||||
--gradient-warning: linear-gradient(135deg, #D69E2E 0%, #F6E05E 100%);
|
||||
--gradient-error: linear-gradient(135deg, #E53E3E 0%, #FC8181 100%);
|
||||
--gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
|
||||
}
|
||||
|
||||
// 黑暗主题 (Dark Theme)
|
||||
.theme-dark {
|
||||
--primary-color: #2B7CE9;
|
||||
--primary-dark: #113358;
|
||||
--background: #171B26;
|
||||
--surface: #23273A;
|
||||
--border: #283044;
|
||||
--accent: #317CD9;
|
||||
--text-color: #ececec;
|
||||
--text-secondary: #8D93A4;
|
||||
--title-color: #fff;
|
||||
--subtitle-color: #8D93A4;
|
||||
--icon-color: #5DA6FF;
|
||||
--gray: #232b3a;
|
||||
--shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.35);
|
||||
|
||||
/* 功能色 */
|
||||
--blue: #4FC3F7;
|
||||
--red: #FF648A;
|
||||
--green: #44D7B6;
|
||||
--yellow: #FFD76F;
|
||||
--gray-light: #202537;
|
||||
--white: #23273A;
|
||||
--badge-bg: #FF648A;
|
||||
--badge-text: #fff;
|
||||
--tab-active: #5DA6FF;
|
||||
--tab-inactive: #5f6a86;
|
||||
}
|
||||
|
||||
:root{
|
||||
--fa-width:1.25em;
|
||||
}
|
||||
|
||||
.fas{
|
||||
width: 1.25em !important;
|
||||
}
|
||||
|
||||
.top_bar{
|
||||
height: 176rpx !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.underline{
|
||||
border-bottom: 1rpx solid #efefef;
|
||||
}
|
||||
/* 统一的顶部导航样式 */
|
||||
.unified-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background: var(--gradient-primary);
|
||||
box-shadow: var(--shadow-lg);
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
}
|
||||
|
||||
.unified-header .header-content {
|
||||
padding: 20rpx 30rpx;
|
||||
padding-top: calc(var(--status-bar-height) + 20rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.unified-header .header-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.unified-header .header-left,
|
||||
.unified-header .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 80rpx;
|
||||
}
|
||||
|
||||
.unified-header .header-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.unified-header .header-icon {
|
||||
color: var(--white);
|
||||
font-size: 36rpx;
|
||||
padding: 10rpx;
|
||||
// border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.unified-header .header-icon:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.unified-header .badge {
|
||||
position: absolute;
|
||||
top: 5rpx !important;
|
||||
right: 30rpx !important;
|
||||
background-color: var(--error);
|
||||
color: var(--white);
|
||||
font-size: .3rem !important;
|
||||
padding: 6rpx 9rpx !important;
|
||||
// padding: 10rpx !important;
|
||||
border-radius: 50%;
|
||||
// min-width: 24rpx;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 支持安全区域的设备 */
|
||||
@supports (padding: max(0px)) {
|
||||
.unified-header {
|
||||
height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.unified-header .header-content {
|
||||
padding-top: calc(var(--status-bar-height) + 20rpx + env(safe-area-inset-top));
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面容器适配 */
|
||||
.page-container {
|
||||
padding-top: calc(var(--status-bar-height) + 88rpx);
|
||||
min-height: 100vh;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* 安全区域适配 */
|
||||
@supports (padding: max(0px)) {
|
||||
.page-container {
|
||||
padding-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||||
}
|
||||
}
|
||||
|
||||
/* 统一的内容区域样式 */
|
||||
.unified-content {
|
||||
padding: 30rpx;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
min-height: calc(100vh - 120rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.items-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: calc(var(--status-bar-height, 0rpx) + 88rpx);
|
||||
background-color: var(--surface);
|
||||
border-bottom: 1rpx solid var(--border);
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* 浏览器环境下的固定定位 */
|
||||
.attendance-container .chat-header:not(.top_bar .chat-header) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
padding-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
/* 移动设备下的导航栏样式 */
|
||||
.top_bar .chat-header {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
Reference in New Issue
Block a user