345 lines
8.4 KiB
Plaintext
345 lines
8.4 KiB
Plaintext
<script lang="uts">
|
|
export default {
|
|
onLaunch: function () {
|
|
console.log('App Launch')
|
|
},
|
|
onShow: function () {
|
|
console.log('App Show')
|
|
},
|
|
onHide: function () {
|
|
console.log('App Hide')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ===== 全局重置样式 (App-UVUE 不支持标签选择器和通配符，已注释) ===== */
|
|
/*
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #262626;
|
|
background-color: #f0f2f5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
view, text, input, textarea, button {
|
|
box-sizing: border-box;
|
|
}
|
|
*/
|
|
|
|
/* ===== 全局主题色 (建议移动到 uni.scss 或使用 class) ===== */
|
|
/* :root 选择器在 UVUE 中可能不支持，建议定义为 class */
|
|
.theme-vars {
|
|
/* 主色调 */
|
|
--primary-color: #1890ff;
|
|
--primary-hover: #40a9ff;
|
|
--primary-active: #096dd9;
|
|
|
|
/* 成功色 */
|
|
--success-color: #52c41a;
|
|
--success-hover: #73d13d;
|
|
--success-active: #389e0d;
|
|
|
|
/* 警告色 */
|
|
--warning-color: #faad14;
|
|
--warning-hover: #ffc53d;
|
|
--warning-active: #d48806;
|
|
|
|
|
|
/* 错误色 */
|
|
--error-color: #ff4d4f;
|
|
--error-hover: #ff7875;
|
|
--error-active: #d4380d;
|
|
|
|
/* 中性色 */
|
|
--text-primary: #262626;
|
|
--text-secondary: #595959;
|
|
--text-disabled: #bfbfbf;
|
|
--text-inverse: #ffffff;
|
|
|
|
/* 边框色 */
|
|
--border-color: #d9d9d9;
|
|
--border-color-light: #f0f0f0;
|
|
--border-color-dark: #bfbfbf;
|
|
|
|
/* 背景色 */
|
|
--background-color: #ffffff;
|
|
--background-color-light: #fafafa;
|
|
--background-color-dark: #f5f5f5;
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-xl: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
|
|
/* 圆角 */
|
|
--border-radius-sm: 2px;
|
|
--border-radius: 4px;
|
|
--border-radius-lg: 6px;
|
|
--border-radius-xl: 8px;
|
|
|
|
/* 间距 */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-xxl: 48px;
|
|
|
|
/* 字体大小 */
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 14px;
|
|
--font-size: 16px;
|
|
--font-size-lg: 18px;
|
|
--font-size-xl: 20px;
|
|
--font-size-xxl: 24px;
|
|
|
|
/* 行高 */
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
}
|
|
|
|
/* ===== 全局字体设置 ===== */
|
|
.text-xs { font-size: var(--font-size-xs); }
|
|
.text-sm { font-size: var(--font-size-sm); }
|
|
.text-base { font-size: var(--font-size); }
|
|
.text-lg { font-size: var(--font-size-lg); }
|
|
.text-xl { font-size: var(--font-size-xl); }
|
|
.text-2xl { font-size: var(--font-size-xxl); }
|
|
|
|
.font-medium { font-weight: 400; } /* UVUE不支持500 */
|
|
.font-semibold { font-weight: 700; } /* UVUE不支持600 */
|
|
.font-bold { font-weight: 700; }
|
|
|
|
/* ===== 全局颜色类 ===== */
|
|
.text-primary { color: var(--primary-color); }
|
|
.text-success { color: var(--success-color); }
|
|
.text-warning { color: var(--warning-color); }
|
|
.text-error { color: var(--error-color); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-disabled { color: var(--text-disabled); }
|
|
|
|
/* ===== 全局背景类 ===== */
|
|
.bg-white { background-color: var(--background-color); }
|
|
.bg-light { background-color: var(--background-color-light); }
|
|
.bg-dark { background-color: var(--background-color-dark); }
|
|
|
|
/* ===== 全局边框类 ===== */
|
|
.border { border: 1px solid var(--border-color); }
|
|
.border-light { border: 1px solid var(--border-color-light); }
|
|
.border-primary { border: 1px solid var(--primary-color); }
|
|
|
|
/* ===== 全局阴影类 ===== */
|
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
.shadow { box-shadow: var(--shadow); }
|
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
|
|
/* ===== 全局圆角类 ===== */
|
|
.rounded-sm { border-radius: var(--border-radius-sm); }
|
|
.rounded { border-radius: var(--border-radius); }
|
|
.rounded-lg { border-radius: var(--border-radius-lg); }
|
|
.rounded-xl { border-radius: var(--border-radius-xl); }
|
|
|
|
/* ===== 全局间距类 ===== */
|
|
.m-1 { margin: var(--spacing-xs); }
|
|
.m-2 { margin: var(--spacing-sm); }
|
|
.m-3 { margin: var(--spacing); }
|
|
.m-4 { margin: var(--spacing-lg); }
|
|
.m-5 { margin: var(--spacing-xl); }
|
|
|
|
.p-1 { padding: var(--spacing-xs); }
|
|
.p-2 { padding: var(--spacing-sm); }
|
|
.p-3 { padding: var(--spacing); }
|
|
.p-4 { padding: var(--spacing-lg); }
|
|
.p-5 { padding: var(--spacing-xl); }
|
|
|
|
/* ===== 全局布局类 ===== */
|
|
.flex { display: flex; }
|
|
.inline-flex { display: flex; } /* UVUE仅支持flex */
|
|
.block { display: flex; } /* UVUE仅支持flex */
|
|
.inline-block { display: flex; } /* UVUE仅支持flex */
|
|
|
|
.flex-col { flex-direction: column; }
|
|
.flex-row { flex-direction: row; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
|
|
.items-start { align-items: flex-start; }
|
|
.items-center { align-items: center; }
|
|
.items-end { align-items: flex-end; }
|
|
.items-stretch { align-items: stretch; }
|
|
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
|
|
.flex-1 { flex: 1; }
|
|
.flex-auto { flex: auto; }
|
|
.flex-none { flex: none; }
|
|
|
|
/* ===== 全局工具类 ===== */
|
|
.w-full { width: 100%; }
|
|
.h-full { height: 100%; }
|
|
.text-left { text-align: left; }
|
|
.text-center { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
/* .cursor-pointer { cursor: pointer; } */
|
|
/* .cursor-default { cursor: default; } */
|
|
|
|
/* ===== 响应式断点 (App-UVUE 不支持 @media :root) ===== */
|
|
/*
|
|
@media (min-width: 1200px) {
|
|
:root {
|
|
--container-width: 1200px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1199px) and (min-width: 768px) {
|
|
:root {
|
|
--container-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:root {
|
|
--container-width: 100%;
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* ===== App根容器 ===== */
|
|
.app-root {
|
|
/* min-height: 100vh; */ /* UVUE不支持vh */
|
|
background-color: var(--background-color);
|
|
flex: 1;
|
|
}
|
|
|
|
/* ===== 24栅格系统 (App-UVUE暂不支持百分比max-width) ===== */
|
|
/*
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 calc(-1 * var(--spacing-sm));
|
|
}
|
|
|
|
.col {
|
|
padding: 0 var(--spacing-sm);
|
|
}
|
|
|
|
.col-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
|
|
|
|
/* Grid system disabled */
|
|
/* (Grid system md disabled) */
|
|
|
|
/* ===== 按钮基础样式 ===== */
|
|
.btn {
|
|
display: flex; /* UVUE 不支持 inline-flex */
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-sm) var(--spacing);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 400;
|
|
line-height: var(--line-height-tight);
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--border-radius);
|
|
/* cursor: pointer; */
|
|
transition: all 0.2s ease;
|
|
/* user-select: none; */
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
/* cursor: not-allowed; */
|
|
}
|
|
|
|
.btn-primary {
|
|
color: var(--text-inverse);
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* .btn-primary:hover:not(:disabled) {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
} */
|
|
|
|
.btn-secondary {
|
|
color: var(--text-secondary);
|
|
background-color: var(--background-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* .btn-secondary:hover:not(:disabled) {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
} */
|
|
|
|
/* ===== 卡片基础样式 ===== */
|
|
.card {
|
|
background-color: var(--background-color);
|
|
border: 1px solid var(--border-color-light);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 输入框基础样式 ===== */
|
|
.input {
|
|
display: flex; /* UVUE 不支持 block */
|
|
width: 100%;
|
|
padding: var(--spacing-sm) var(--spacing);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-tight);
|
|
color: var(--text-primary);
|
|
background-color: var(--background-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.input:focus {
|
|
/* outline: none; */
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
/* ===== 滚动条样式 (App-UVUE 不支持 CSS 滚动条设置) ===== */
|
|
/*
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background-color-light);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-disabled);
|
|
}
|
|
*/
|
|
</style>
|