lq/wot-uniapp
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 小程序端

Browse Source 
2. 视频优化
This commit is contained in:
李琦
2026-07-30 14:11:51 +08:00
parent f36c2ae71e
commit fe5a5b6c0f
93 changed files with 12430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles/art-fonts.scss Normal file
View File

@@ -0,0 +1,48 @@
/**
* 从 PC 端 @fontsource 引入的本地字体（woff）。
* 放在 assets（非 static）：小程序 CSS 会把 <40KB 资源打成 base64，
* 避免再拷一份到 static 造成双倍体积。
*
* 与 PC 差异：Noto Sans SC 单 weight 约 1.5MB，主包装不下，故未引入；
* art-tokens 仍写 Noto 名，实际中文正文回退 PingFang SC / 系统黑体。
* 标题/eyebrow 用 Playfair + JetBrains，与 PC 英文层对齐。
*/
/* Playfair Display — 标题 / serif italic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('@/assets/fonts/playfair-display-latin-400-normal.woff') format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('@/assets/fonts/playfair-display-latin-400-italic.woff') format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('@/assets/fonts/playfair-display-latin-600-normal.woff') format('woff');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('@/assets/fonts/playfair-display-latin-700-normal.woff') format('woff');
}
/* JetBrains Mono — eyebrow / mono label */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('@/assets/fonts/jetbrains-mono-latin-400-normal.woff') format('woff');
}

322
src/styles/art-tokens.scss Normal file
View File

@@ -0,0 +1,322 @@
/* Art design tokens — ported from client/src/style.css */
/* 小程序里 min-height:100% 常失效，用 100vh 铺满视口；底色走 --art-bg，避免硬编码浅色闪屏 */
page {
min-height: 100vh;
background-color: rgb(var(--art-bg));
}
page,
.page-root {
--art-bg: 250, 248, 244;
--art-surface: 255, 255, 255;
--art-border: rgba(0, 0, 0, 0.08);
--art-text: 23, 23, 23;
--art-muted: 107, 107, 107;
--art-accent: 212, 179, 131;
--art-error: 239, 68, 68;
--art-admin-bg: 10, 10, 10;
--art-admin-card: 18, 18, 20;
--art-admin-hover: 26, 26, 28;
--art-nav-bg: rgba(250, 248, 244, 0.9);
--art-card-bg: rgba(255, 255, 255, 0.55);
--art-card-border: rgba(0, 0, 0, 0.07);
--art-hover-border: rgba(212, 179, 131, 0.55);
--art-shadow: 0 18px 40px -12px rgba(80, 55, 20, 0.14);
--art-overlay: rgba(0, 0, 0, 0.45);
background-color: rgb(var(--art-bg));
color: rgb(var(--art-text));
font-family: 'Noto Sans SC', 'PingFang SC', 'Helvetica Neue', sans-serif;
min-height: 100vh;
box-sizing: border-box;
}
.page-root.theme-dark,
.theme-dark {
--art-bg: 5, 5, 5;
--art-surface: 18, 18, 20;
--art-border: rgba(255, 255, 255, 0.08);
--art-text: 236, 236, 236;
--art-muted: 136, 136, 136;
--art-accent: 212, 179, 131;
--art-nav-bg: rgba(5, 5, 5, 0.85);
--art-card-bg: rgba(255, 255, 255, 0.02);
--art-card-border: rgba(255, 255, 255, 0.06);
--art-hover-border: rgba(212, 179, 131, 0.3);
--art-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
--art-overlay: rgba(0, 0, 0, 0.9);
background-color: rgb(var(--art-bg));
color: rgb(var(--art-text));
}
.page-root.admin-mode,
.admin-mode {
--art-bg: 10, 10, 10;
--art-surface: 18, 18, 20;
--art-text: 236, 236, 236;
--art-muted: 136, 136, 136;
background-color: rgb(var(--art-admin-bg));
}
.glass-nav {
background: var(--art-nav-bg);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--art-card-border);
}
.art-card {
background: var(--art-card-bg);
border: 1px solid var(--art-card-border);
border-radius: 16rpx;
overflow: hidden;
position: relative;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.art-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(212, 179, 131, 0.08) 100%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 0;
}
.art-card-press:active {
transform: translateY(-8rpx);
border-color: var(--art-hover-border);
box-shadow: var(--art-shadow);
}
.art-card-press:active::before {
opacity: 1;
}
.admin-card {
background: rgb(var(--art-admin-card));
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16rpx;
transition: background 0.25s ease, border-color 0.25s ease;
}
.admin-card:active {
background: rgb(var(--art-admin-hover));
border-color: rgba(212, 179, 131, 0.25);
}
.text-art-accent { color: rgb(var(--art-accent)); }
.text-art-muted { color: rgb(var(--art-muted)); }
.text-art-text { color: rgb(var(--art-text)); }
.font-serif-italic {
font-family: 'Playfair Display', 'Noto Serif SC', serif;
font-style: italic;
}
.font-mono-label {
font-family: 'JetBrains Mono', 'Menlo', monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 22rpx;
}
.page-pad { padding: 32rpx 32rpx 200rpx; }
.page-pad-tab { padding-bottom: 200rpx; }
.section-title {
font-family: 'Playfair Display', 'Noto Serif SC', serif;
font-style: italic;
font-size: 48rpx;
color: rgb(var(--art-text));
}
.hero-eyebrow {
color: rgb(var(--art-accent));
font-family: 'JetBrains Mono', monospace;
font-size: 22rpx;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 24rpx;
}
@keyframes art-reveal {
from { opacity: 0; transform: translateY(24rpx); }
to { opacity: 1; transform: translateY(0); }
}
.animate-reveal {
animation: art-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-reveal-delay {
animation: art-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
.fab-float {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.fab-float:active {
transform: scale(0.92);
}
/* Article markdown (mp-html / rich content) */
.article-md {
font-size: 30rpx;
line-height: 1.85;
color: rgb(var(--art-text));
word-break: break-word;
}
.article-md h1, .article-md h2, .article-md h3 {
font-family: 'Playfair Display', 'Noto Serif SC', serif;
margin: 1.2em 0 0.5em;
line-height: 1.35;
}
.article-md h1 { font-size: 44rpx; }
.article-md h2 { font-size: 38rpx; }
.article-md h3 { font-size: 34rpx; }
.article-md p { margin: 0.75em 0; }
.article-md a { color: rgb(var(--art-accent)); text-decoration: underline; }
.article-md blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 6rpx solid rgb(var(--art-accent));
color: rgb(var(--art-muted));
background: rgba(212, 179, 131, 0.08);
}
.article-md ul, .article-md ol { padding-left: 1.4em; margin: 0.75em 0; }
.article-md img { max-width: 100%; border-radius: 12rpx; margin: 0.75em 0; }
.article-md code {
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 0.88em;
background: rgba(127, 127, 127, 0.12);
padding: 0.1em 0.35em;
border-radius: 6rpx;
}
.article-md pre {
background: #1e1e1e;
color: #e8e8e8;
padding: 24rpx;
border-radius: 16rpx;
overflow-x: auto;
margin: 1em 0;
font-size: 24rpx;
line-height: 1.6;
}
.article-md pre code { background: transparent; padding: 0; color: inherit; }
.article-md table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 26rpx; }
.article-md th, .article-md td { border: 1px solid var(--art-border); padding: 12rpx; }
/* wot-ui 深浅色兜底：避免默认浅色组件压在 art 深色底上 */
.page-root,
.theme-dark {
--wot-navbar-color: rgb(var(--art-text));
--wot-navbar-desc-color: rgb(var(--art-text));
--wot-navbar-bg: rgb(var(--art-bg));
}
/* C 端暗色：输入保持轻量透明，贴合卡片氛围 */
.theme-dark:not(.admin-mode) .wd-input,
.page-root.theme-dark:not(.admin-mode) .wd-input {
--wot-input-bg: transparent;
--wot-color-bg: rgb(var(--art-surface));
--wot-input-inner-color: rgb(var(--art-text));
--wot-input-inner-placeholder-color: rgb(var(--art-muted));
color: rgb(var(--art-text));
}
.theme-dark:not(.admin-mode) .wd-input__inner,
.page-root.theme-dark:not(.admin-mode) .wd-input__inner {
color: rgb(var(--art-text)) !important;
}
.theme-dark:not(.admin-mode) .wd-textarea,
.page-root.theme-dark:not(.admin-mode) .wd-textarea {
--wot-textarea-bg: transparent;
--wot-textarea-inner-color: rgb(var(--art-text));
--wot-textarea-inner-placeholder-color: rgb(var(--art-muted));
}
.theme-dark .wd-cell,
.page-root.theme-dark .wd-cell {
--wot-cell-bg: rgb(var(--art-surface));
--wot-cell-title-color: rgb(var(--art-text));
--wot-cell-value-color: rgb(var(--art-muted));
--wot-cell-label-color: rgb(var(--art-muted));
}
/* 后台表单：可见底色 + 边框，避免与 admin-card 融成一片 */
.admin-mode .admin-card.form-card,
.page-root.admin-mode .admin-card.form-card {
padding: 24rpx;
}
.admin-mode .wd-input,
.page-root.admin-mode .wd-input,
.admin-mode .form-card .wd-input,
.page-root.admin-mode .form-card .wd-input {
--wot-input-bg: rgba(255, 255, 255, 0.06);
--wot-input-inner-color: rgb(var(--art-text));
--wot-input-inner-placeholder-color: rgb(var(--art-muted));
--wot-color-bg: rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12rpx;
margin-bottom: 16rpx;
padding: 4rpx 8rpx;
box-sizing: border-box;
color: rgb(var(--art-text));
}
.admin-mode .wd-input__inner,
.page-root.admin-mode .wd-input__inner {
color: rgb(var(--art-text)) !important;
}
.admin-mode .wd-textarea,
.page-root.admin-mode .wd-textarea,
.admin-mode .form-card .wd-textarea,
.page-root.admin-mode .form-card .wd-textarea {
--wot-textarea-bg: rgba(255, 255, 255, 0.06);
--wot-textarea-inner-color: rgb(var(--art-text));
--wot-textarea-inner-placeholder-color: rgb(var(--art-muted));
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12rpx;
margin-bottom: 16rpx;
padding: 8rpx;
box-sizing: border-box;
color: rgb(var(--art-text));
}
.admin-mode .admin-card {
border-color: rgba(255, 255, 255, 0.1);
}
.admin-form-field {
display: flex;
flex-direction: column;
gap: 10rpx;
margin-bottom: 8rpx;
}
.admin-form-field__label {
font-size: 24rpx;
color: rgb(var(--art-muted));
letter-spacing: 0.04em;
}
/* ActionSheet / Popup：暗色下避免默认白底 */
.theme-dark,
.page-root.theme-dark {
--wot-action-sheet-bg: rgb(var(--art-surface));
--wot-action-sheet-color: rgb(var(--art-text));
--wot-action-sheet-cancel-color: rgb(var(--art-muted));
--wot-popup-bg: rgb(var(--art-surface));
--wot-color-bg: rgb(var(--art-surface));
--wot-color-title: rgb(var(--art-text));
--wot-color-content: rgb(var(--art-text));
--wot-color-secondary: rgb(var(--art-muted));
--wot-color-border: var(--art-border);
}