87 lines
3.4 KiB
Vue
87 lines
3.4 KiB
Vue
<template>
|
||
<view class="learn-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||
<CustomNavBar title="探索" />
|
||
<view class="content">
|
||
<view class="intro">
|
||
<text class="eyebrow">FOCUS CORE · JOURNAL</text>
|
||
<text class="title">读懂每一次练习。</text>
|
||
<text class="subtitle">关于器械、动作与身体的小小发现。</text>
|
||
</view>
|
||
<view class="library">
|
||
<button v-for="entry in exploreEntries" :key="entry.id" class="lesson-card"
|
||
hover-class="lesson-card--pressed" :aria-label="entry.title + '，' + entry.format" @tap="openEntry(entry)">
|
||
<view class="cover"><image class="cover-image" :src="entry.cover" mode="aspectFit" /></view>
|
||
<view class="card-body">
|
||
<view class="card-meta"><text>{{ entry.category }}</text><text class="meta-dot">·</text><text>{{ entry.format }}</text></view>
|
||
<view class="card-heading"><text class="card-title">{{ entry.title }}</text><text class="card-arrow" aria-hidden="true">↗</text></view>
|
||
<text class="card-summary">{{ entry.summary }}</text>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onShareAppMessage } from '@dcloudio/uni-app'
|
||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||
import { getSystemLayout } from '../../utils/system'
|
||
import { exploreEntries, type ExploreEntry } from '../../content/explore'
|
||
|
||
const { navBarHeight } = getSystemLayout()
|
||
function openEntry(entry: ExploreEntry) { uni.navigateTo({ url: entry.path }) }
|
||
onShareAppMessage(() => ({ title: '探索 | 读懂每一次练习 · Focus Core', path: '/pages/learn/index' }))
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.learn-page {
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background: #f8f7f2;
|
||
color: #374438;
|
||
}
|
||
.content { padding: 44rpx 40rpx 64rpx; }
|
||
.intro { padding: 18rpx 0 48rpx; }
|
||
.eyebrow {
|
||
display: block;
|
||
font: 19rpx Baskerville, 'Times New Roman', serif;
|
||
letter-spacing: 3rpx;
|
||
color: #98a18e;
|
||
}
|
||
.title {
|
||
display: block;
|
||
margin-top: 23rpx;
|
||
font-family: 'Songti SC', STSong, serif;
|
||
font-size: 45rpx;
|
||
line-height: 1.55;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
.subtitle { display: block; margin-top: 16rpx; font-size: 23rpx; line-height: 1.8; color: #929a87; }
|
||
.library { display: flex; flex-direction: column; gap: 32rpx; }
|
||
.lesson-card {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
border: 1rpx solid #e1e6d8;
|
||
border-radius: 25rpx;
|
||
background: #fffefa;
|
||
text-align: left;
|
||
line-height: normal;
|
||
transition: opacity .16s;
|
||
&::after { border: 0; }
|
||
&--pressed { opacity: .75; }
|
||
}
|
||
.cover { height: 270rpx; background: #eef1e6; }
|
||
.cover-image { display: block; width: 100%; height: 100%; }
|
||
.card-body { padding: 28rpx 30rpx 32rpx; }
|
||
.card-meta { display: flex; align-items: center; gap: 12rpx; color: #909b80; font-size: 18rpx; letter-spacing: 1rpx; }
|
||
.meta-dot { color: #b8c2a9; }
|
||
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-top: 17rpx; }
|
||
.card-title { font: 33rpx/1.5 'Songti SC', STSong, serif; letter-spacing: 2rpx; }
|
||
.card-arrow { flex-shrink: 0; font-size: 30rpx; color: #7f9170; line-height: 1; }
|
||
.card-summary { display: block; margin-top: 11rpx; font-size: 23rpx; line-height: 1.8; color: #929b88; }
|
||
@media (prefers-reduced-motion: reduce) { .lesson-card { transition: none; } }
|
||
</style>
|