feat: 英文字母描红开发

2026-04-03 15:21:04 +08:00
parent 206c44cf6d
commit 1ef6770810
37 changed files with 1812 additions and 179 deletions
@@ -0,0 +1,3 @@
+{
+    "component": true
+}
@@ -0,0 +1,44 @@
+@import '../../style/theme3.less';
+
+.nav-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background: fade(@bg-header, 85%);
+    backdrop-filter: blur(40rpx);
+    -webkit-backdrop-filter: blur(40rpx);
+    box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
+}
+
+.nav-bar__inner {
+    height: @nav-inner-height;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 @page-padding-x;
+    box-sizing: border-box;
+}
+
+.nav-bar__title {
+    font-size: @fs-nav-title;
+    font-weight: @fw-nav-title;
+    color: @color-nav-title;
+    letter-spacing: @ls-nav-title;
+    flex: 1;
+    min-width: 0;
+}
+
+.nav-bar__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: auto;
+}
+
+.nav-bar__placeholder {
+    width: 100%;
+    flex-shrink: 0;
+}
@@ -0,0 +1,22 @@
+import { NAV_INNER_PX } from '../../utils/navMetrics';
+
+Component({
+    options: { multipleSlots: true },
+    properties: {
+        title: { type: String, value: '' },
+        background: { type: String, value: '' },
+    },
+    data: {
+        statusBarHeight: 0,
+        navBlockHeight: 0,
+    },
+    lifetimes: {
+        attached() {
+            const { statusBarHeight } = wx.getWindowInfo();
+            this.setData({
+                statusBarHeight,
+                navBlockHeight: statusBarHeight + NAV_INNER_PX,
+            });
+        },
+    },
+});
@@ -0,0 +1,10 @@
+<view class="nav-bar" style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}">
+    <view class="nav-bar__inner">
+        <slot name="left"></slot>
+        <text class="nav-bar__title">{{title}}</text>
+        <view class="nav-bar__right">
+            <slot name="right"></slot>
+        </view>
+    </view>
+</view>
+<view class="nav-bar__placeholder" style="height: {{navBlockHeight}}px;"></view>