lyf
ba59642bc7
- 集中定义深圳自然博物馆品牌字体栈 - 全局覆盖 H5 与 uni-app 根节点字体 - 基础视图、文本、表单元素统一继承字体 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
123 lines
2.2 KiB
Vue
123 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { onLaunch } from '@dcloudio/uni-app'
|
|
|
|
onLaunch(() => {
|
|
console.log('App Launch')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './styles/variables.scss';
|
|
|
|
/* 设计系统 CSS 变量 */
|
|
:root {
|
|
/* 主色调 */
|
|
--museum-accent: #E0DF00;
|
|
--museum-accent-dark: #C2C600;
|
|
|
|
/* 背景色 */
|
|
--museum-bg-map: #F6F8F5;
|
|
--museum-bg-light: #F9FAFB;
|
|
--museum-bg-surface: #FFFFFF;
|
|
--museum-bg-cream: #F5F5ED;
|
|
|
|
/* 文字色 */
|
|
--museum-text-primary: #000000;
|
|
--museum-text-secondary: #3F3F3F;
|
|
--museum-text-tertiary: #696962;
|
|
--museum-text-disabled: #ADB0B4;
|
|
|
|
/* 边框色 */
|
|
--museum-border-light: #E5E5E5;
|
|
--museum-border-medium: #DEDEDE;
|
|
--museum-border-dark: #C2C6D6;
|
|
|
|
/* 辅助色 */
|
|
--museum-poi-marker: #5ED0E4;
|
|
--museum-overlay: rgba(0, 0, 0, 0.2);
|
|
|
|
/* 圆角 */
|
|
--radius-phone: 32px;
|
|
--radius-card: 16px;
|
|
--radius-button: 8px;
|
|
--radius-small: 6px;
|
|
--radius-mini: 5.5px;
|
|
|
|
/* 间距 */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
/* 模糊 */
|
|
--blur-light: blur(5px);
|
|
--blur-medium: blur(10px);
|
|
--blur-heavy: blur(12px);
|
|
}
|
|
|
|
/* 全局样式重置 */
|
|
page,
|
|
body,
|
|
#app,
|
|
uni-app,
|
|
uni-page,
|
|
uni-page-body {
|
|
background-color: var(--museum-bg-light);
|
|
font-family: var(--museum-font-family);
|
|
font-size: 14px;
|
|
color: var(--museum-text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
view,
|
|
text,
|
|
button,
|
|
input,
|
|
textarea,
|
|
uni-view,
|
|
uni-text,
|
|
uni-button,
|
|
uni-input,
|
|
uni-textarea,
|
|
:where(#app, uni-app, uni-page, uni-page-body) * {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* 通用工具类 */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.text-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text-ellipsis-2 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|