核心体验
互动教育平台
每个人的学习方式都不同。这就是为什么我们将实时课程、游戏化工具和进度跟踪相结合，以支持您以最佳方式学习。
这不仅仅是内容。 这是一个完整的系统，旨在帮助事情顺利进行。
旨在引导。专为支持而打造。
加速学习的工具
智能工具和专家主导的教育为学习过程带来更清晰的体验——帮助你探索想法，理解复杂主题，并以自己的节奏学习。
互动金融素养
理清金钱
将复杂的财务话题转化为你可以一步步探索的内容。互动模块、指导活动和实践练习帮助你理解日常理财决策背后的理念。
期待内容：
.step1-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.step1-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.step1-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.step1-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.step1-progress-fill.animating {
transition: width linear;
}
.step1-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.step1-item.active {
width: 40px;
height: 40px;
}
.step1-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.step1-item.active .step1-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.step1-content {
text-align: left;
position: relative;
}
.step1-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.step1-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.step1-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.step1-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.step1-title {
font-size: 24px;
}
@media (max-width: 768px) {
.step1-title {
font-size: 16px;
}
}
class AnimatedSteps1 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.step1-item');
this.stepTexts = container.querySelectorAll('.step1-text');
this.continuousProgressFill = container.querySelector('.step1-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
结构化模块
互动活动
实际场景
专家主导教育
向熟悉该学科的人学习
与将理念付诸实践的教育者一起，超越理论。参加直播课程或点播学习涵盖商业、人工智能、金融素养、个人发展和心态的课程。
期待内容：
.steps2-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.steps2-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.steps2-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.steps2-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.steps2-progress-fill.animating {
transition: width linear;
}
.steps2-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.steps2-item.active {
width: 40px;
height: 40px;
}
.steps2-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.steps2-item.active .steps2-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.steps2-content {
text-align: left;
position: relative;
}
.steps2-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.steps2-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.steps2-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.steps2-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.steps2-title {
font-size: 24px;
}
@media (max-width: 768px) {
.steps2-title {
font-size: 16px;
}
}
class AnimatedSteps2 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.steps2-item');
this.stepTexts = container.querySelectorAll('.steps2-text');
this.continuousProgressFill = container.querySelector('.steps2-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
现场录音
点播课程
多元学科领域
人工智能学习伴侣
继续对话
好奇心不会按计划行事。通过AI驱动的学习对话，随时提出问题、回顾关键思想并探索相关话题，随时提供学习。
期待内容：
.steps3-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.steps3-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.steps3-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.steps3-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.steps3-progress-fill.animating {
transition: width linear;
}
.steps3-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.steps3-item.active {
width: 40px;
height: 40px;
}
.steps3-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.steps3-item.active .steps3-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.steps3-content {
text-align: left;
position: relative;
}
.steps3-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.steps3-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.steps3-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.steps3-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.steps3-title {
font-size: 24px;
}
@media (max-width: 768px) {
.steps3-title {
font-size: 16px;
}
}
class AnimatedSteps3 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.steps3-item');
this.stepTexts = container.querySelectorAll('.steps3-text');
this.continuousProgressFill = container.querySelector('.steps3-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
会话学习
明确的解释
主题探索
免責聲明
BE的产品仅提供教育内容和学习工具。不提供财务、投资或专业建议，也不保证具体的学习或财务成果。内容和特色因订阅而异。
学习这一点
与你同行
你需要时总会有支持和成长的空间。
关于BE俱乐部产品的常见问题
BE（BE Club）提供哪些产品？
BE（BE Club）提供三项教育科技产品：互动金融素养、专家主导教育和人工智能学习伙伴。
什么是BE（BE俱乐部）互动金融素养？
这是一种数字学习体验，采用结构化模块、指导活动和实践练习，使金融概念更易于探索和理解。
什么是BE（BE俱乐部）专家主导教育？
它结合了由商业、人工智能、金融素养、个人发展和心态等领域的教育者主导的现场课程和点播课程。
什么是BE（BE Club）AI学习伴侣？
它是一款由人工智能驱动的学习工具，允许用户提问、回顾关键观点并通过对话探讨相关话题。
我可以通过BE（BE俱乐部）学习哪些科目？
可选科目包括商业、人工智能、金融素养、个人发展和心态。内容因订阅而异。
BE（BE Club）产品适合初学者吗？
这些产品针对不同经验层级设计，内容引导用户从基础主题开始，并按自己的节奏推进。
BE（BE Club）是否提供现场和点播学习？
是的。可用的学习形式包括现场教师课程和点播课程。时间表、科目和可用性因订阅而异。
我如何访问BE（BE Club）产品？
BE（BE Club）产品通过订阅计划数字化交付。激活所选订阅后，访问权限将提供。
BE（BE Club）订阅包含哪些内容？
每个订阅都提供对特定产品、内容和功能的访问权限。请仔细审查套餐详情，因为访问内容因订阅和地区而异。
BE（BE Club）产品价格是多少？
价格会根据所选订阅和所在地而有所不同。请访问价格页面，比较您目前可用的选项。
我可以申请BE（BE Club）产品的退款吗？
符合条件的购买可能在7天或14天内获得退款，具体取决于您所在地区和适用条款。购买前请阅读退款政策。
我能依赖BE （BE Club） AI学习指南的回答吗？
AI学习伴侣旨在支持学习，但AI生成的回答可能不完整或不准确。重要信息应始终独立核实
免責聲明
BE（BE Club）产品仅供教育用途，不构成财务、投资、法律或税务建议。AI生成内容可能不完整或不准确，应进行独立核实。不保证具体的学习、专业或财务成果。