134 lines
2.9 KiB
Vue
134 lines
2.9 KiB
Vue
<script>
|
|
export default {
|
|
onLaunch: function() {
|
|
console.log('App Launch')
|
|
},
|
|
onShow: function() {
|
|
console.log('App Show')
|
|
},
|
|
onHide: function() {
|
|
console.log('App Hide')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ====== 全局设计系统 ====== */
|
|
page {
|
|
/* 主色 - 仅用于交互元素 */
|
|
--color-primary: #409eff;
|
|
--color-primary-light: #ecf5ff;
|
|
--color-primary-disabled: #a0cfff;
|
|
|
|
/* 背景色 - 以白色为主 */
|
|
--bg-page: #f5f6fa;
|
|
--bg-card: #ffffff;
|
|
--bg-secondary: #f5f7fa;
|
|
--bg-tertiary: #f0f2f5;
|
|
|
|
/* 文字色 - 中性灰阶 */
|
|
--text-primary: #1d2129;
|
|
--text-regular: #4e5969;
|
|
--text-secondary: #86909c;
|
|
--text-placeholder: #c9cdd4;
|
|
--text-disabled: #e5e6eb;
|
|
|
|
/* 边框 */
|
|
--border-color: #e5e6eb;
|
|
--border-light: #f2f3f5;
|
|
|
|
/* 语义色 - 极简使用 */
|
|
--color-danger: #f77234;
|
|
--color-success: #00b42a;
|
|
--color-warning: #ff7d00;
|
|
|
|
/* 阴影 - 更柔和 */
|
|
--shadow-sm: 0 1rpx 4rpx rgba(0,0,0,0.04);
|
|
--shadow-md: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
|
--shadow-lg: 0 4rpx 16rpx rgba(0,0,0,0.08);
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 8rpx;
|
|
--radius-md: 12rpx;
|
|
--radius-lg: 16rpx;
|
|
--radius-xl: 20rpx;
|
|
|
|
/* 间距 */
|
|
--spacing-page: 28rpx;
|
|
--spacing-card: 24rpx;
|
|
--spacing-section: 20rpx;
|
|
|
|
background: var(--bg-page);
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* 全局重置 */
|
|
view, text, input, button, scroll-view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 通用卡片样式 */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* 主按钮 */
|
|
.btn-primary {
|
|
background: var(--color-primary);
|
|
color: #ffffff;
|
|
border-radius: var(--radius-md);
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
}
|
|
.btn-primary:active {
|
|
opacity: 0.85;
|
|
}
|
|
.btn-primary[disabled] {
|
|
background: var(--color-primary-disabled);
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
/* 输入框统一风格 */
|
|
.field-input, input[type="text"], input[type="password"] {
|
|
background: var(--bg-secondary);
|
|
border: 2rpx solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
padding: 20rpx 24rpx;
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
transition: border-color 0.2s;
|
|
}
|
|
.field-input:focus, input:focus {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* 页面标题 */
|
|
.page-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* 状态标签 */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 6rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
.tag-blue { background: var(--color-primary-light); color: var(--color-primary); }
|
|
.tag-green { background: #e8ffea; color: var(--color-success); }
|
|
.tag-orange { background: #fff3e8; color: var(--color-warning); }
|
|
.tag-red { background: #fff1e8; color: var(--color-danger); }
|
|
.tag-gray { background: var(--bg-tertiary); color: var(--text-secondary); }
|
|
</style>
|