口才和会议场景
This commit is contained in:
zhonghua1
261
pages/speaking_training_voice/speaking_training_voice.vue
Normal file
261
pages/speaking_training_voice/speaking_training_voice.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="voice-page">
|
||||
<view class="hero">
|
||||
<view class="hero-title">语音</view>
|
||||
<view class="hero-desc">快速查看语音训练的三大侧重点</view>
|
||||
</view>
|
||||
|
||||
<view class="subtabs">
|
||||
<view
|
||||
v-for="tab in subTabs"
|
||||
:key="tab.id"
|
||||
class="subtab"
|
||||
:class="{ active: tab.id === activeId }"
|
||||
@click="switchSub(tab.id)"
|
||||
>
|
||||
<text class="subtab-name">{{ tab.name }}</text>
|
||||
<text class="subtab-tip">{{ tab.brief }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel" v-if="activeTab">
|
||||
<view class="panel-header">
|
||||
<view class="panel-title">{{ activeTab.name }}</view>
|
||||
<view class="panel-subtitle">{{ activeTab.subtitle }}</view>
|
||||
</view>
|
||||
|
||||
<view class="metrics">
|
||||
<view v-for="item in activeTab.metrics" :key="item.label" class="metric-card">
|
||||
<view class="metric-label">{{ item.label }}</view>
|
||||
<view class="metric-value">{{ item.value }}</view>
|
||||
<view class="metric-tip">{{ item.tip }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="actions">
|
||||
<view class="action-card">
|
||||
<view class="action-title">练习建议</view>
|
||||
<view class="action-body">{{ activeTab.action }}</view>
|
||||
</view>
|
||||
<view class="action-card">
|
||||
<view class="action-title">复盘要点</view>
|
||||
<view class="action-body">{{ activeTab.review }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeId: 'accuracy',
|
||||
subTabs: [
|
||||
{
|
||||
id: 'accuracy',
|
||||
name: '发音精度',
|
||||
brief: '音准、咬字、重音',
|
||||
subtitle: '聚焦音素清晰度与重音落点，减少模糊音和吞字',
|
||||
metrics: [
|
||||
{ label: '清晰度', value: '稳定', tip: '短句、数字、专有名词保持口型完整' },
|
||||
{ label: '重音', value: '需关注', tip: '强调关键信息词，辅助语速控制' },
|
||||
{ label: '连读/停顿', value: '正常', tip: '逗号轻停，句末完整收音' },
|
||||
],
|
||||
action: '先慢速朗读，录音后比对重音与口型，再逐步提升语速。',
|
||||
review: '回听时标记含糊音并单独练习，必要时拆分到音节再合并句子。',
|
||||
},
|
||||
{
|
||||
id: 'speed',
|
||||
name: '语速分析',
|
||||
brief: '节奏、停顿、呼吸',
|
||||
subtitle: '匹配听众接受节奏，避免过快或过慢导致信息缺失',
|
||||
metrics: [
|
||||
{ label: '整体语速', value: '适中', tip: '保持 160-190 wpm 的自然节奏' },
|
||||
{ label: '节奏感', value: '均衡', tip: '强调-弱化交替，段落前 0.5s 启发听众' },
|
||||
{ label: '停顿控制', value: '良好', tip: '每 8-12 词轻停一次，句间换气' },
|
||||
],
|
||||
action: '用节拍器/背景节奏辅助朗读，练习“快读-慢读”交替增强调度感。',
|
||||
review: '观察停顿是否落在语义边界，避免在句中随机断裂或抢读。',
|
||||
},
|
||||
{
|
||||
id: 'breath',
|
||||
name: '气息共鸣',
|
||||
brief: '共鸣、支撑、能量',
|
||||
subtitle: '通过腹式呼吸与口腔共鸣，让声音更有穿透力与持久度',
|
||||
metrics: [
|
||||
{ label: '呼吸支撑', value: '待提升', tip: '句首深吸，腹压稳定输出尾音' },
|
||||
{ label: '共鸣位置', value: '口腔', tip: '尝试上腭共鸣，避免鼻音过重' },
|
||||
{ label: '能量输出', value: '平稳', tip: '重点句前预留气息，末尾不泄气' },
|
||||
],
|
||||
action: '做 4-4-6 呼吸（吸-停-呼），再练“嗯~啊”滑音找到上腭与面罩共鸣。',
|
||||
review: '录音感受音色位置是否前置，尾音是否塌陷，必要时降低语速稳气。',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
activeTab() {
|
||||
return this.subTabs.find((t) => t.id === this.activeId);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchSub(id) {
|
||||
this.activeId = id;
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
// 确保原生标题与 Tab 名称一致
|
||||
uni.setNavigationBarTitle({ title: '语音' });
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.voice-page {
|
||||
min-height: 100vh;
|
||||
padding: 12px 12px calc(64px + env(safe-area-inset-bottom));
|
||||
background: #f6f7fb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #4f8ef7, #72b2ff);
|
||||
color: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 16px 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.subtabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.subtab {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e6e8ed;
|
||||
border-radius: 10px;
|
||||
padding: 10px 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.subtab.active {
|
||||
border-color: #4f8ef7;
|
||||
box-shadow: 0 6px 18px rgba(79, 142, 247, 0.18);
|
||||
}
|
||||
|
||||
.subtab-name {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
color: #1f2933;
|
||||
}
|
||||
|
||||
.subtab-tip {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 14px 12px 16px;
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.panel-subtitle {
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 10px 8px;
|
||||
min-height: 90px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.metric-tip {
|
||||
font-size: 12px;
|
||||
color: #4b5563;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 10px 10px 12px;
|
||||
}
|
||||
|
||||
.action-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.action-body {
|
||||
font-size: 12px;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user