适配小程序代码结构
This commit is contained in:
79
unpackage/dist/dev/mp-weixin/pages/speaking_training_expression/speaking_training_expression.js
vendored
Normal file
79
unpackage/dist/dev/mp-weixin/pages/speaking_training_expression/speaking_training_expression.js
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
data() {
|
||||
return {
|
||||
activeId: "improv",
|
||||
subTabs: [
|
||||
{
|
||||
id: "improv",
|
||||
name: "即兴表达",
|
||||
brief: "现场反应、结构、落点",
|
||||
subtitle: "快速组织开头-主体-结尾,确保 30 秒内给出清晰框架",
|
||||
points: [
|
||||
{ title: "框架", body: "FAB/SCQA/总-分-总任选其一,句首给结论或预告结构。" },
|
||||
{ title: "铺垫", body: "用 1-2 个事实或案例支撑,每段不超过 3 句,控制语速。" },
|
||||
{ title: "收束", body: "结尾重复结论+下一步,避免无声结尾或跑题。" }
|
||||
],
|
||||
practice: "用 3 组随机词做 60 秒即兴:10 秒想结构,40 秒输出,10 秒总结;录音回听框架是否完整。",
|
||||
review: "检查是否有“嗯”“啊”等口癖、是否给出明确结论与行动项,如缺失下次优先补齐开头结尾。"
|
||||
},
|
||||
{
|
||||
id: "emotion",
|
||||
name: "情感表达",
|
||||
brief: "情绪、共情、故事化",
|
||||
subtitle: "通过语气、停顿与例子传递温度,让信息更易被接受",
|
||||
points: [
|
||||
{ title: "语气层次", body: "主张句提升能量,关怀句放慢语速、降低音量,形成对比。" },
|
||||
{ title: "共情回应", body: "用“我理解…”“听起来…”先反馈感受,再给建议或方案。" },
|
||||
{ title: "故事化", body: "用“冲突-转折-结果”讲 mini case,结尾抛问题或启发。" }
|
||||
],
|
||||
practice: "选一则客户场景,录制两版:平铺直叙 vs. 强调情感对比,回听音色/停顿变化;保留对比更强的版本。",
|
||||
review: "看听众是否能复述你的核心观点,若不能,精简信息点并增加停顿与例子。"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
activeTab() {
|
||||
return this.subTabs.find((t) => t.id === this.activeId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchSub(id) {
|
||||
this.activeId = id;
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
common_vendor.index.setNavigationBarTitle({ title: "表达" });
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.f($data.subTabs, (tab, k0, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(tab.name),
|
||||
b: common_vendor.t(tab.brief),
|
||||
c: tab.id,
|
||||
d: tab.id === $data.activeId ? 1 : "",
|
||||
e: common_vendor.o(($event) => $options.switchSub(tab.id), tab.id)
|
||||
};
|
||||
}),
|
||||
b: $options.activeTab
|
||||
}, $options.activeTab ? {
|
||||
c: common_vendor.t($options.activeTab.name),
|
||||
d: common_vendor.t($options.activeTab.subtitle),
|
||||
e: common_vendor.f($options.activeTab.points, (item, k0, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(item.title),
|
||||
b: common_vendor.t(item.body),
|
||||
c: item.title
|
||||
};
|
||||
}),
|
||||
f: common_vendor.t($options.activeTab.practice),
|
||||
g: common_vendor.t($options.activeTab.review)
|
||||
} : {});
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createPage(MiniProgramPage);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/speaking_training_expression/speaking_training_expression.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="expression-page"><view class="hero"><view class="hero-title">表达</view><view class="hero-desc">聚焦即兴与情感,让表达更流畅、更有感染力</view></view><view class="subtabs"><view wx:for="{{a}}" wx:for-item="tab" wx:key="c" class="{{['subtab', tab.d && 'active']}}" bindtap="{{tab.e}}"><text class="subtab-name">{{tab.a}}</text><text class="subtab-tip">{{tab.b}}</text></view></view><view wx:if="{{b}}" class="panel"><view class="panel-header"><view class="panel-title">{{c}}</view><view class="panel-subtitle">{{d}}</view></view><view class="points"><view wx:for="{{e}}" wx:for-item="item" wx:key="c" class="point-card"><view class="point-title">{{item.a}}</view><view class="point-body">{{item.b}}</view></view></view><view class="actions"><view class="action-card"><view class="action-title">练习方法</view><view class="action-body">{{f}}</view></view><view class="action-card"><view class="action-title">复盘提示</view><view class="action-body">{{g}}</view></view></view></view></view>
|
||||
120
unpackage/dist/dev/mp-weixin/pages/speaking_training_expression/speaking_training_expression.wxss
vendored
Normal file
120
unpackage/dist/dev/mp-weixin/pages/speaking_training_expression/speaking_training_expression.wxss
vendored
Normal file
@@ -0,0 +1,120 @@
|
||||
|
||||
.expression-page {
|
||||
min-height: 100vh;
|
||||
padding: 12px 12px calc(64px + env(safe-area-inset-bottom));
|
||||
background: #f7f8fb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #ff8b6a, #ffb58a);
|
||||
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.92;
|
||||
}
|
||||
.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: #ff986f;
|
||||
box-shadow: 0 6px 18px rgba(255, 152, 111, 0.22);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.points {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.point-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 10px 8px;
|
||||
min-height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.point-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.point-body {
|
||||
font-size: 12px;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user