parent
8211bcd028
commit
ff742c0c43
@ -1,2 +1,10 @@
|
||||
// app.js
|
||||
App({})
|
||||
App({
|
||||
onLaunch() {
|
||||
wx.cloud.init({
|
||||
env: 'cloud1-0g2sr1117862afae'
|
||||
});
|
||||
|
||||
console.log('小程序启动，云环境初始化完成');
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
// pages/home/nome.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
review(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/review/review'
|
||||
})
|
||||
},
|
||||
filter(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/textbookFilter/textbookFilter'
|
||||
})
|
||||
},
|
||||
question(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/pendingQuestion/pendingQuestion'
|
||||
})
|
||||
},
|
||||
search(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
<!--pages/home/home.wxml-->
|
||||
<view class="container">
|
||||
<view class="user-info">
|
||||
<text class="user-name">欢迎回来{{userInfo.nickName || '勤奋的'}}小朋友</text>
|
||||
<image
|
||||
class="user-avatar"
|
||||
src="{{userInfo.avatarUrl || '/images/default-avatar.png'}}"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bottom-buttons">
|
||||
<button class="func-btn" bind:tap="search">
|
||||
<image class="btn-icon" src="/images/icon-search.png" mode="widthFix"></image>
|
||||
|
||||
</button>
|
||||
<button class="func-btn" bindtap="question">
|
||||
<image class="btn-icon" src="/images/icon-answer.png" mode="widthFix"></image>
|
||||
|
||||
</button>
|
||||
<button class="func-btn" catch:tap="filter">
|
||||
<image class="btn-icon" src="/images/icon-filter.png" mode="widthFix"></image>
|
||||
|
||||
</button>
|
||||
<button class="func-btn" catch:tap="review">
|
||||
<image class="btn-icon" src="/images/icon-review.png" mode="widthFix"></image>
|
||||
|
||||
</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
@ -1,50 +0,0 @@
|
||||
/* pages/home/home.wxss */
|
||||
.bottom-buttons {
|
||||
display: flex; /* 按钮横向排列 */
|
||||
position: fixed;
|
||||
justify-content: space-around;
|
||||
bottom: 200rpx ;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0); /* 顶部边框分隔 */
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
left : 0%;
|
||||
}
|
||||
.func-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: transparent; /* 清除默认按钮背景 */
|
||||
border-top: 1px solid rgba(255, 255, 255, 0);
|
||||
width: 20%;
|
||||
}
|
||||
.btn-icon {
|
||||
width: 200rpx;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 30rpx 20rpx;
|
||||
top: 0;
|
||||
right:0;
|
||||
position: absolute; /* 脱离文档流，基于父容器 .home-container 定位 */
|
||||
z-index: 1; /* 确保在其他元素上方显示 */
|
||||
}
|
||||
/* 头像：圆形裁剪，固定大小 */
|
||||
.user-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%; /* 圆形 */
|
||||
border: 2rpx solid #000; /* 白色边框增加层次感 */
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); /* 轻微阴影 */
|
||||
margin-right: 20rpx; /* 与昵称间距 */
|
||||
}
|
||||
|
||||
/* 昵称：字体大小和颜色 */
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.container{
|
||||
position: relative; /* 关键：让子元素 .user-info 能基于它做绝对定位 */
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
}
|
||||
"usingComponents": {},
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle": "light"
|
||||
}
|
||||
@ -1,6 +1,68 @@
|
||||
<!--index.wxml-->
|
||||
<view class="page-container">
|
||||
<!-- 头部区域 -->
|
||||
<view class="header-section">
|
||||
<text class="header-title">古诗学习</text>
|
||||
<text class="header-subtitle">传承经典文化，品味诗词之美</text>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
Weixin
|
||||
</view>
|
||||
<!-- 功能按钮网格 -->
|
||||
<view class="function-grid">
|
||||
<view class="function-item" bindtap="review">
|
||||
<view class="function-icon">📚</view>
|
||||
<text class="function-text">复习</text>
|
||||
</view>
|
||||
<view class="function-item" bindtap="question">
|
||||
<view class="function-icon">❓</view>
|
||||
<text class="function-text">问答</text>
|
||||
</view>
|
||||
<view class="function-item" bindtap="search">
|
||||
<view class="function-icon">🔎</view>
|
||||
<text class="function-text">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 诗歌列表区域 -->
|
||||
<view class="poem-section">
|
||||
<view class="list-header">
|
||||
<text class="list-title">推荐诗歌</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" wx:if="{{isLoading}}">
|
||||
<text class="state-icon">⏳</text>
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view class="error-state" wx:elif="{{loadError}}">
|
||||
<text class="state-icon">⚠️</text>
|
||||
<text class="state-text">加载失败，请重试</text>
|
||||
<button class="btn-retry" bindtap="loadPoemsFromDatabase">重新加载</button>
|
||||
<button class="btn-mock" bindtap="useMockData">使用示例数据</button>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:elif="{{poems.length === 0}}">
|
||||
<text class="state-icon">📖</text>
|
||||
<text class="state-text">暂无诗歌数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 诗歌列表 -->
|
||||
<view class="poem-list" wx:else>
|
||||
<view class="poem-item" wx:for="{{poems}}" wx:key="_id" data-id="{{item._id}}">
|
||||
<view class="poem-content">
|
||||
<text class="poem-title">{{item.title}}</text>
|
||||
<view class="poem-meta">
|
||||
<text class="poem-author">{{item.author}}</text>
|
||||
<text class="poem-dynasty">{{item.dynasty}}</text>
|
||||
</view>
|
||||
<text class="poem-preview">点击学习经典唐诗</text>
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
<view class="btn-study" bindtap="goToStudy" data-id="{{item._id}}">学习</view>
|
||||
<view class="btn-recite" bindtap="goToRecite" data-id="{{item._id}}">背诵</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,10 +1,226 @@
|
||||
/**index.wxss**/
|
||||
page {
|
||||
height: 100vh;
|
||||
/* 页面容器 */
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 60rpx 40rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 功能按钮区域 */
|
||||
.function-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 40rpx;
|
||||
background: white;
|
||||
margin: 20rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.function-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 诗歌列表区域 */
|
||||
.poem-section {
|
||||
background: white;
|
||||
margin: 0 40rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.scrollarea {
|
||||
|
||||
.list-header {
|
||||
padding: 30rpx 40rpx 20rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.poem-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.poem-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 40rpx;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.poem-item:active {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.poem-content {
|
||||
flex: 1;
|
||||
overflow-y: hidden;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.poem-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.poem-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.poem-author {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.poem-dynasty {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
background: #f0f0f0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.poem-preview {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.btn-study, .btn-recite {
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-study {
|
||||
background-color: #1989fa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-study:active {
|
||||
background-color: #1576d9;
|
||||
}
|
||||
|
||||
.btn-recite {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-recite:active {
|
||||
background-color: #06a652;
|
||||
}
|
||||
|
||||
/* 状态样式 */
|
||||
.loading-state, .empty-state, .error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.state-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 30rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.btn-retry, .btn-mock {
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
margin: 10rpx 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-retry {
|
||||
background-color: #1989fa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-retry:active {
|
||||
background-color: #1576d9;
|
||||
}
|
||||
|
||||
.btn-mock {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-mock:active {
|
||||
background-color: #06a652;
|
||||
}
|
||||
@ -1,2 +1,83 @@
|
||||
<!--pages/keyWord/keyWord.wxml-->
|
||||
<text>pages/keyWord/keyWord.wxml</text>
|
||||
<view class="header">
|
||||
<text class="title">关键词回答</text>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<!-- 问题显示框 -->
|
||||
<view class="form-group">
|
||||
<text class="label">问题：</text>
|
||||
<view class="question-box">
|
||||
<text class="question-text">{{question}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关键词管理区域 -->
|
||||
<view class="form-group">
|
||||
<text class="label">关键词管理：</text>
|
||||
|
||||
<!-- 当前关键词路径显示 -->
|
||||
<view class="keyword-path-box">
|
||||
<text class="path-label">当前路径：</text>
|
||||
<text class="path-text">{{getCurrentKeywordPath()}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 当前层级关键词选择 -->
|
||||
<view class="keywords-level-section">
|
||||
<text class="level-title">第{{currentLevel + 1}}级关键词</text>
|
||||
|
||||
<!-- 已有关键词列表 -->
|
||||
<view class="keywords-list">
|
||||
<block wx:for="{{availableKeywords}}" wx:key="*this">
|
||||
<view class="keyword-item" bindtap="selectKeyword" data-keyword="{{item}}">
|
||||
{{item}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 新建关键词区域 -->
|
||||
<view class="new-keyword-section">
|
||||
<view class="create-new-btn {{isCreatingNew ? 'active' : ''}}" bindtap="toggleCreateNew">
|
||||
<text class="btn-icon">+</text>
|
||||
{{isCreatingNew ? '取消新建' : '新建关键词'}}
|
||||
</view>
|
||||
|
||||
<view wx:if="{{isCreatingNew}}" class="new-keyword-input">
|
||||
<input
|
||||
value="{{newKeyword}}"
|
||||
placeholder="请输入新关键词"
|
||||
bindinput="onNewKeywordInput"
|
||||
class="keyword-input"
|
||||
focus="{{isCreatingNew}}"
|
||||
/>
|
||||
<button class="confirm-btn" bindtap="confirmNewKeyword">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关键词操作按钮 -->
|
||||
<view class="keyword-actions">
|
||||
<button wx:if="{{currentLevel > 0}}" class="action-btn back-btn" bindtap="goBack">
|
||||
返回上一级
|
||||
</button>
|
||||
<button class="action-btn reset-btn" bindtap="resetKeywords">
|
||||
重置关键词
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 答案输入框 -->
|
||||
<view class="form-group">
|
||||
<text class="label">答案：</text>
|
||||
<textarea
|
||||
class="textarea answer-textarea"
|
||||
placeholder="请输入问题的答案"
|
||||
value="{{answer}}"
|
||||
bindinput="onAnswerInput"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<button class="submit-btn" type="primary" bindtap="submitAnswer">提交</button>
|
||||
</view>
|
||||
@ -1 +1,231 @@
|
||||
/* pages/keyWord/keyWord.wxss */
|
||||
/* pages/keyWord/keyWord.wxss */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.question-box {
|
||||
background-color: #f9f9f9;
|
||||
border: 1rpx solid #eee;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
/* 关键词路径显示 */
|
||||
.keyword-path-box {
|
||||
background-color: #f0f8ff;
|
||||
border: 1rpx solid #d1e9ff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.path-label {
|
||||
font-size: 28rpx;
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.path-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
/* 关键词层级区域 */
|
||||
.keywords-level-section {
|
||||
background-color: #fafafa;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.level-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 关键词列表 */
|
||||
.keywords-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.keyword-item {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.keyword-item:active {
|
||||
background: #096dd9;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 新建关键词区域 */
|
||||
.new-keyword-section {
|
||||
border-top: 1rpx dashed #e8e8e8;
|
||||
padding-top: 25rpx;
|
||||
}
|
||||
|
||||
.create-new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx;
|
||||
border: 2rpx dashed #1890ff;
|
||||
color: #1890ff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.create-new-btn.active {
|
||||
background: #e6f7ff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.new-keyword-input {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.keyword-input {
|
||||
flex: 1;
|
||||
border: 1rpx solid #ddd;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #52c41a;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.confirm-btn:active {
|
||||
background: #389e0d;
|
||||
}
|
||||
|
||||
/* 关键词操作按钮 */
|
||||
.keyword-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: #faad14;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
background: #d48806;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-btn:active {
|
||||
background: #cf1322;
|
||||
}
|
||||
|
||||
/* 答案输入框 */
|
||||
.textarea {
|
||||
width: 100%;
|
||||
border: 1rpx solid #eee;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
min-height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.answer-textarea {
|
||||
min-height: 500rpx;
|
||||
}
|
||||
|
||||
/* 提交按钮 */
|
||||
.submit-btn {
|
||||
margin-top: 40rpx;
|
||||
font-size: 32rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
background: #096dd9;
|
||||
}
|
||||
|
||||
/* 去除textarea默认样式 */
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
@ -1 +1,102 @@
|
||||
/* pages/pendingQuestion/pendingQuestion.wxss */
|
||||
/* pages/pendingQuestion/pendingQuestion.wxss */
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.question-list {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid rgb(123, 135, 168);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.question-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.question-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.question-time {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部导航栏样式 */
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
border-top: 1rpx solid #e0e0e0;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #07c160;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.question-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 80rpx 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
// pages/questionAnswer/questionAnswer.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
<!--pages/questionAnswer/questionAnswer.wxml-->
|
||||
<text>pages/questionAnswer/questionAnswer.wxml</text>
|
||||
@ -1 +0,0 @@
|
||||
/* pages/questionAnswer/questionAnswer.wxss */
|
||||
@ -1,2 +1,64 @@
|
||||
<!--pages/recite/recite.wxml-->
|
||||
<text>pages/recite/recite.wxml</text>
|
||||
<view class="recite-container">
|
||||
<!-- 头部标题 -->
|
||||
<view class="header">
|
||||
<text class="title">背诵《{{poemTitle}}》</text>
|
||||
<text class="subtitle">{{poemAuthor}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 语音识别结果 -->
|
||||
<view class="recognition-section">
|
||||
<text class="section-title">识别结果：</text>
|
||||
<textarea class="result-textarea" placeholder='等待说话...' value='{{content}}' bindinput="onContentInput"></textarea>
|
||||
</view>
|
||||
|
||||
<!-- 检查按钮 -->
|
||||
<view class="check-section">
|
||||
<button class="btn-check" type="primary" bindtap="checkRecitation" wx:if="{{content && !showResult}}">检查背诵</button>
|
||||
</view>
|
||||
|
||||
<!-- 正确率显示 -->
|
||||
<view class="result-section" wx:if="{{showResult}}">
|
||||
<!-- 进度条样式正确率显示 -->
|
||||
<view class="accuracy-progress-container">
|
||||
<view class="accuracy-header">
|
||||
<text class="accuracy-title">背诵评分</text>
|
||||
<text class="accuracy-value">{{accuracyRate}}%</text>
|
||||
</view>
|
||||
|
||||
<!-- 背诵时长和时间显示 -->
|
||||
<view class="info-section">
|
||||
<!-- 背诵用时 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">背诵用时</text>
|
||||
<text class="info-value duration-value">{{reciteDuration}}</text>
|
||||
</view>
|
||||
<!-- 背诵时间 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">背诵时间</text>
|
||||
<text class="info-value date-value">{{reciteDateTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-bar">
|
||||
<view class="progress-bg">
|
||||
<view class="progress-fill"
|
||||
style="width: {{accuracyRate}}%; background: {{accuracyRate >= 90 ? '#4CAF50' : accuracyRate >= 70 ? '#FFC107' : accuracyRate >= 50 ? '#FF9800' : '#F44336'}};">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价文字 -->
|
||||
<text class="accuracy-comment">{{accuracyRate >= 90 ? '优秀！背诵得非常准确' : accuracyRate >= 70 ? '良好！继续保持' : accuracyRate >= 50 ? '一般，还需要练习' : '需要多加练习'}}</text>
|
||||
</view>
|
||||
|
||||
<button class="btn-reset" type="default" bindtap="resetRecitation">重新背诵</button>
|
||||
</view>
|
||||
|
||||
<!-- 录音控制按钮 -->
|
||||
<view class="control-buttons" wx:if="{{!showResult}}">
|
||||
<button class="btn-record-start" type="primary" size="mini" bindtap="touchStart">开始录音</button>
|
||||
<button class="btn-record-stop" type="warn" size="mini" bindtap="touchEnd">结束录音</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -1 +1,218 @@
|
||||
/* pages/recite/recite.wxss */
|
||||
/* pages/recite/recite.wxss */
|
||||
.recite-container {
|
||||
padding: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
padding: 30rpx 0;
|
||||
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
||||
border-radius: 15rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 原文和识别结果区域 */
|
||||
.original-section,
|
||||
.recognition-section {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.original-text {
|
||||
font-size: 34rpx;
|
||||
line-height: 1.8;
|
||||
color: #444;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 34rpx;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #f9f9f9;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 正确率显示区域 */
|
||||
.result-section {
|
||||
text-align: center;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
/* 进度条样式正确率显示 */
|
||||
.accuracy-progress-container {
|
||||
background: #fff;
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.accuracy-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 背诵信息显示区域 */
|
||||
.info-section {
|
||||
margin-bottom: 30rpx;
|
||||
padding: 15rpx 0;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 信息项样式 */
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 背诵时长样式 */
|
||||
.duration-value {
|
||||
color: #007AFF;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 背诵时间样式 */
|
||||
.date-value {
|
||||
color: #34C759;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.accuracy-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.accuracy-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-bar {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.progress-bg {
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 15rpx;
|
||||
transition: width 0.6s ease;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 评价文字 */
|
||||
.accuracy-comment {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
padding: 20rpx 0;
|
||||
background: #f9f9f9;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 检查按钮区域 */
|
||||
.check-section {
|
||||
text-align: center;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
width: 60%;
|
||||
font-size: 36rpx;
|
||||
padding: 20rpx 0;
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 重置按钮 */
|
||||
.btn-reset {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* 控制按钮区域 */
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.btn-record-start,
|
||||
.btn-record-stop {
|
||||
width: 280rpx;
|
||||
font-size: 34rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.recite-container {
|
||||
max-width: 800rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@ -1 +1,215 @@
|
||||
/* pages/review/review.wxss */
|
||||
/* pages/review/review.wxss */
|
||||
|
||||
/* 页面容器 */
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 遗忘曲线区域 */
|
||||
.curve-section {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.curve-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.curve-description {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgb(126, 123, 123);
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 复习计划区域 */
|
||||
.plan-section {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 复习古诗列表 */
|
||||
.poem-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.poem-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poem-item.urgent {
|
||||
border-left: 8rpx solid #ff6b6b;
|
||||
}
|
||||
|
||||
.poem-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.poem-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.poem-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.poem-details {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.poem-author {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.review-tag {
|
||||
background-color: #ff6b6b;
|
||||
color: white;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
margin-left: 16rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.poem-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.meta-item.retention-rate {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.meta-item.next-review {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.poem-stats {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.study-btn, .recite-btn {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 0;
|
||||
margin: 0;
|
||||
border-radius: 40rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.study-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.recite-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 今日复习统计 */
|
||||
.today-summary {
|
||||
margin-top: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.today-count {
|
||||
font-size: 28rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.today-count .highlight {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
@ -1,2 +1,98 @@
|
||||
<!--pages/search/search.wxml-->
|
||||
<text>pages/search/search.wxml</text>
|
||||
<view class="search-container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrapper">
|
||||
<input
|
||||
class="search-input"
|
||||
placeholder="搜索古诗名、作者或诗句"
|
||||
value="{{keyword}}"
|
||||
bindinput="onInput"
|
||||
bindconfirm="doSearch"
|
||||
confirm-type="search"
|
||||
/>
|
||||
<view wx:if="{{keyword}}" class="clear-btn" bindtap="clearInput">
|
||||
<text>✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-btn" bindtap="doSearch">搜索</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view wx:if="{{isLoading}}" class="loading-section">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">搜索中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<view wx:if="{{!showResults && !isLoading && searchHistory.length > 0}}" class="history-section">
|
||||
<view class="history-header">
|
||||
<text class="history-title">搜索历史</text>
|
||||
<text class="clear-history" bindtap="clearHistory">清除</text>
|
||||
</view>
|
||||
<view class="history-tags">
|
||||
<view
|
||||
wx:for="{{searchHistory}}"
|
||||
wx:key="*this"
|
||||
class="history-tag"
|
||||
bindtap="searchByHistory"
|
||||
data-keyword="{{item}}"
|
||||
>
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<view wx:if="{{!showResults && !isLoading && searchHistory.length === 0}}" class="empty-section">
|
||||
<text class="empty-text">请输入关键词搜索古诗</text>
|
||||
<text class="empty-subtext">支持搜索古诗名、作者、诗句内容</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<view wx:if="{{showResults && !isLoading}}" class="results-section">
|
||||
<view class="results-header">
|
||||
<text class="results-title">搜索结果 ({{total}})</text>
|
||||
</view>
|
||||
|
||||
<view class="results-list">
|
||||
<view
|
||||
wx:for="{{searchResults}}"
|
||||
wx:key="_id"
|
||||
class="result-item"
|
||||
bindtap="goToStudy"
|
||||
data-poem="{{item}}"
|
||||
>
|
||||
<view class="poem-info">
|
||||
<view class="poem-title">{{item.title}}</view>
|
||||
<view class="poem-meta">
|
||||
<text class="poem-author">{{item.author}}</text>
|
||||
<text class="poem-dynasty">{{item.dynasty}}</text>
|
||||
</view>
|
||||
<view class="poem-content">{{item.content}}</view>
|
||||
</view>
|
||||
<view class="study-btn">
|
||||
<text>学习</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无结果状态 -->
|
||||
<view wx:if="{{searchResults.length === 0}}" class="empty-results">
|
||||
<text class="empty-icon">🔍</text>
|
||||
<text class="empty-text">没有找到相关古诗</text>
|
||||
<text class="empty-subtext">换个关键词试试吧</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view wx:if="{{hasMore && searchResults.length > 0}}" class="load-more" bindtap="onReachBottom">
|
||||
<text class="load-more-text">点击加载更多</text>
|
||||
<text class="load-more-tips">已加载 {{searchResults.length}} / {{total}} 条</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多数据 -->
|
||||
<view wx:if="{{!hasMore && searchResults.length > 0}}" class="no-more">
|
||||
<text>没有更多数据了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -1 +1,302 @@
|
||||
/* pages/search/search.wxss */
|
||||
/* pages/search/search.wxss */
|
||||
.search-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 搜索栏样式 */
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #07c160;
|
||||
color: white;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid #f0f0f0;
|
||||
border-top: 4rpx solid #07c160;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 搜索历史 */
|
||||
.history-section {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.clear-history {
|
||||
font-size: 26rpx;
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.history-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.history-tag {
|
||||
background: #f8f9fa;
|
||||
padding: 16rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
border: 1rpx solid #e9ecef;
|
||||
}
|
||||
|
||||
.history-tag:active {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-section {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 搜索结果 */
|
||||
.results-section {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.result-item:active {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.poem-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.poem-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.poem-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.poem-author {
|
||||
font-size: 26rpx;
|
||||
color: #07c160;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.poem-dynasty {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.poem-content {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.study-btn {
|
||||
background: #07c160;
|
||||
color: white;
|
||||
padding: 15rpx 25rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 空结果状态 */
|
||||
.empty-results {
|
||||
text-align: center;
|
||||
padding: 80rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 加载更多 */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
background: #f8f9fa;
|
||||
margin: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.load-more:active {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #07c160;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.load-more-tips {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 没有更多数据 */
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
background: #f8f9fa;
|
||||
margin: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
@ -1,2 +1,124 @@
|
||||
<!--pages/all.wxml-->
|
||||
<text>pages/all.wxml</text>
|
||||
<!-- pages/study/study.wxml -->
|
||||
<view class="study-container">
|
||||
<!-- 加载状态 -->
|
||||
<view wx:if="{{isLoading}}" class="loading-state">
|
||||
<view class="loading-content">
|
||||
<image src="/images/loading.gif" class="loading-icon"></image>
|
||||
<text class="loading-text">诗歌加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view wx:elif="{{loadError}}" class="error-state">
|
||||
<view class="error-content">
|
||||
<image src="/images/error-icon.png" class="error-icon"></image>
|
||||
<text class="error-title">加载失败</text>
|
||||
<text class="error-desc">{{originalText}}</text>
|
||||
<button class="btn-retry" bindtap="reloadData">重新加载</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 正常内容 -->
|
||||
<view wx:else class="poem-detail">
|
||||
<!-- 头部卡片 -->
|
||||
<view class="header-card">
|
||||
<view class="poem-basic-info">
|
||||
<view class="poem-title">{{poemTitle}}</view>
|
||||
<view class="poem-meta">
|
||||
<text class="poet-info">{{poetInfo}}</text>
|
||||
<view class="poem-type-tag">{{poemType}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮组 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 语音播报按钮 -->
|
||||
<button class="btn-speak" type="default" size="mini" bindtap="speakPoem">
|
||||
<text class="btn-icon">🔊</text>
|
||||
语音播报
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 诗歌内容卡片 -->
|
||||
<view class="content-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">诗歌原文</text>
|
||||
<!-- 诗歌原文语音播报按钮 -->
|
||||
<button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="content">
|
||||
<text class="btn-icon">🔊</text>
|
||||
</button>
|
||||
<view class="header-actions">
|
||||
<button class="btn-copy" bindtap="copyContent">
|
||||
<text class="btn-icon">📋</text>
|
||||
复制
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="original-text">
|
||||
<text class="poem-content">{{originalText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 译文卡片 -->
|
||||
<view class="content-card">
|
||||
<view class="section-header" bindtap="toggleTranslation">
|
||||
<view class="section-title-wrapper">
|
||||
<text class="card-title">诗歌译文</text>
|
||||
<!-- 译文语音播报按钮 -->
|
||||
<button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="translation">
|
||||
<text class="btn-icon">🔊</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="toggle-wrapper">
|
||||
<text class="toggle-text">{{showTranslation ? '收起' : '展开'}}</text>
|
||||
<text class="toggle-icon">{{showTranslation ? '▲' : '▼'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{showTranslation}}" class="translation-text">
|
||||
<text class="translation-content">{{translationText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 背景信息卡片 -->
|
||||
<view class="content-card">
|
||||
<view class="section-header" bindtap="toggleBackground">
|
||||
<view class="section-title-wrapper">
|
||||
<text class="card-title">创作背景</text>
|
||||
<!-- 背景语音播报按钮 -->
|
||||
<button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="background">
|
||||
<text class="btn-icon">🔊</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="toggle-wrapper">
|
||||
<text class="toggle-text">{{showBackground ? '收起' : '展开'}}</text>
|
||||
<text class="toggle-icon">{{showBackground ? '▲' : '▼'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{showBackground}}" class="background-text">
|
||||
<text class="background-content">{{backgroundInfo}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 作者信息卡片 -->
|
||||
<view class="content-card">
|
||||
<view class="card-header">
|
||||
<view class="section-title-wrapper">
|
||||
<image src="/images/author-icon.png" class="section-icon"></image>
|
||||
<text class="card-title">作者简介</text>
|
||||
<!-- 作者简介语音播报按钮 -->
|
||||
<button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="author">
|
||||
<text class="btn-icon">🔊</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="author-text">
|
||||
<text class="author-content">{{authorInfo}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部背诵按钮 -->
|
||||
<view class="bottom-container">
|
||||
<button class="recite-button" bindtap="goToRecite">开始背诵</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -1 +1,350 @@
|
||||
/* pages/all.wxss */
|
||||
/* pages/study/study.wxss */
|
||||
|
||||
/* 页面容器 */
|
||||
.study-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 30rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #ff6b6b;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 50rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btn-retry {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 60rpx;
|
||||
font-size: 30rpx;
|
||||
box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* 诗歌详情样式 */
|
||||
.poem-detail {
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
.header-card,
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.content-card:active {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 头部卡片 */
|
||||
.header-card {
|
||||
padding: 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 操作按钮组 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
/* 文本区域语音播报按钮样式 */
|
||||
.btn-speak-text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 20rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* 小喇叭图标按钮样式 */
|
||||
.btn-speak-icon {
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.poem-title {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.poem-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.poet-info {
|
||||
font-size: 30rpx;
|
||||
opacity: 0.9;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.poem-type-tag {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
/* 内容卡片内部样式 */
|
||||
.content-card {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 复制按钮 */
|
||||
.btn-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
border: 1rpx solid #e9ecef;
|
||||
border-radius: 30rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-speak {
|
||||
font-size: 28rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
/* 诗歌内容 */
|
||||
.original-text {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.poem-content {
|
||||
font-size: 36rpx;
|
||||
line-height: 1.8;
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* 译文内容 */
|
||||
.translation-text {
|
||||
padding-top: 25rpx;
|
||||
border-top: 1rpx solid #f1f3f4;
|
||||
}
|
||||
|
||||
.translation-content {
|
||||
font-size: 30rpx;
|
||||
line-height: 1.7;
|
||||
color: #555;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* 背景信息 */
|
||||
.background-text {
|
||||
padding-top: 25rpx;
|
||||
border-top: 1rpx solid #f1f3f4;
|
||||
}
|
||||
|
||||
.background-content {
|
||||
font-size: 30rpx;
|
||||
line-height: 1.7;
|
||||
color: #555;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* 作者信息 */
|
||||
.author-text {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.author-content {
|
||||
font-size: 30rpx;
|
||||
line-height: 1.7;
|
||||
color: #555;
|
||||
white-space: pre-line;
|
||||
margin-bottom: 16px; /* 恢复正常边距 */
|
||||
}
|
||||
|
||||
/* 底部背诵按钮容器 */
|
||||
.bottom-container {
|
||||
margin: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 背诵按钮样式 */
|
||||
.recite-button {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
border-radius: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
|
||||
}
|
||||
|
||||
.recite-button:active {
|
||||
background-color: #06ad56;
|
||||
box-shadow: 0 2px 6px rgba(7, 193, 96, 0.4);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 480px) {
|
||||
.study-container {
|
||||
padding: 15rpx;
|
||||
}
|
||||
|
||||
.header-card,
|
||||
.content-card {
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.poem-title {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.poem-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
// pages/textbookFilter/textbookFilter.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
<!--pages/textbookFilter/textbookFilter.wxml-->
|
||||
<text>pages/textbookFilter/textbookFilter.wxml</text>
|
||||
@ -1 +0,0 @@
|
||||
/* pages/textbookfilter/textbookfilter.wxss */
|
||||
@ -1,48 +1,42 @@
|
||||
{
|
||||
"libVersion": "3.10.2",
|
||||
"projectname": "miniprogram-1",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"compileHotReLoad": true
|
||||
},
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "pages/login/login",
|
||||
"pathName": "pages/login/login",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "pages/guiding/guiding",
|
||||
"pathName": "pages/guiding/guiding",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "pages/search/search",
|
||||
"pathName": "pages/search/search",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "pages/home/home",
|
||||
"pathName": "pages/home/home",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
"libVersion": "3.10.2",
|
||||
"projectname": "miniprogram-2",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"compileHotReLoad": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"useStaticServer": false,
|
||||
"useLanDebug": false,
|
||||
"showES6CompileOption": false,
|
||||
"checkInvalidKey": true,
|
||||
"ignoreDevUnusedFiles": true,
|
||||
"bigPackageSizeSupport": false
|
||||
},
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "pages/question/question",
|
||||
"pathName": "pages/question/question",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "pages/managePoems/managePoems",
|
||||
"pathName": "pages/managePoems/managePoems",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue