95 lines
3.6 KiB
Plaintext
95 lines
3.6 KiB
Plaintext
<view class="page">
|
||
<view class="topbar">
|
||
<view class="brand">
|
||
<view class="avatar-wrap"><image class="avatar" src="https://picsum.photos/270" mode="aspectFill" /></view>
|
||
<text class="brand-text">VocabMaster</text>
|
||
</view>
|
||
<view class="icon-btn">🔔</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="content">
|
||
<view class="header">
|
||
<text class="title">词库管理</text>
|
||
<text class="subtitle">管理并策划您的个人词汇集合。</text>
|
||
</view>
|
||
|
||
<view class="search-row">
|
||
<view class="search-box">
|
||
<text class="search-icon">🔎</text>
|
||
<text class="search-placeholder">搜索单词、短语或标签...</text>
|
||
</view>
|
||
<view class="filters">
|
||
<view class="filter-btn">类型 <text class="dim">单词/句子</text> ▾</view>
|
||
<view class="filter-btn">状态 <text class="dim">全部</text> ▾</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-grid">
|
||
<view class="word-card cyan">
|
||
<view class="card-top">
|
||
<view>
|
||
<text class="word-title">Ephemeral</text>
|
||
<text class="phonetic">/ɪˈfemərəl/</text>
|
||
</view>
|
||
<view class="status-dot done">✓</view>
|
||
</view>
|
||
<text class="meaning">adj. 短暂的，朝生暮死的</text>
|
||
<view class="progress-block">
|
||
<view class="progress-meta"><text>掌握度</text><text class="accent-cyan">95%</text></view>
|
||
<view class="progress-bar"><view class="fill cyan-fill"></view></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="word-card purple wide">
|
||
<view class="card-top">
|
||
<view>
|
||
<text class="word-title">Ubiquitous</text>
|
||
<text class="phonetic">/juːˈbɪkwɪtəs/</text>
|
||
</view>
|
||
<view class="status-dot learn">✎</view>
|
||
</view>
|
||
<view class="split">
|
||
<text class="meaning">adj. 普遍存在的，无处不在的</text>
|
||
<text class="example">"Smartphones have become ubiquitous in our daily lives."</text>
|
||
</view>
|
||
<view class="progress-block">
|
||
<view class="progress-meta"><text>掌握度</text><text class="accent-purple">60%</text></view>
|
||
<view class="progress-bar"><view class="fill purple-fill"></view></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="word-card pink">
|
||
<view class="card-top">
|
||
<view>
|
||
<text class="word-title">Obfuscate</text>
|
||
<text class="phonetic">/ˈɒbfəskeɪt/</text>
|
||
</view>
|
||
<view class="status-dot review">⟳</view>
|
||
</view>
|
||
<text class="meaning">v. 使模糊，使混乱，使费解</text>
|
||
<view class="progress-block">
|
||
<view class="progress-meta"><text>掌握度</text><text class="accent-pink">30%</text></view>
|
||
<view class="progress-bar"><view class="fill pink-fill"></view></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="word-card cyan">
|
||
<view class="card-top">
|
||
<view>
|
||
<text class="word-title">Cacophony</text>
|
||
<text class="phonetic">/kəˈkɒfəni/</text>
|
||
</view>
|
||
<view class="status-dot done">✓</view>
|
||
</view>
|
||
<text class="meaning">n. 刺耳的声音，杂音</text>
|
||
<view class="progress-block">
|
||
<view class="progress-meta"><text>掌握度</text><text class="accent-cyan">88%</text></view>
|
||
<view class="progress-bar"><view class="fill cyan-fill" style="width:88%"></view></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="fab">＋</view>
|
||
</view>
|