.mbp-screen {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

.mbp-screen-1 {
position: relative;
color: white;
text-align: center;
overflow: hidden;
}

.mbp-background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
object-position: center center;
}

/* 确保内容在视频上层 */
.mbp-title, .mbp-buttons {
position: relative;
z-index: 2;
}

.mbp-authentication {
margin-top: calc(509 / 945 * 100vh);
display: flex;
justify-content: center;
z-index: 2;
gap: 10px;
}
.mbp-authentication img {
width: 164px;
height: 46px;
}

.mbp-title {
margin-top: 22px;
font-family: titleFontBold;
font-size: 72px;
font-weight: bold;
font-stretch: normal;
line-height: 54px;
letter-spacing: 0px;
color: #ffffff;
margin-bottom: 53px;
}

.mbp-btn {
display: inline-block;
padding: 0 40px;
margin: 0 16px;
line-height: 50px;
border-radius: 22px;
text-decoration: none;
font-family: ProductSans-Bold;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
}

.mbp-btn-contact {
background-color: #ffffff;
box-shadow: inset 4px 3px 18px 0px rgba(255, 235, 207, 0.59);
color: black;
}

.mbp-btn-datasheet {
background-image: linear-gradient(
#08b286,
#08b286),
linear-gradient(
#ffffff,
#ffffff);
background-blend-mode: normal,
normal;
color: white;
}

.mbp-screen-2 {
background-image: url(‘https://www.yealink.com/website-service/download/第二屏-背景(和视频平滑过渡).png’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
height: 772px;
margin-top: -130px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
}

.mbp-pro-title {
font-family: ProductSans-Bold;
font-size: 80px;
margin:293px 0 24px 0;
position: relative; /* 添加相对定位 */
color: white;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.3);
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}
.mbp-pro-title-container {
position: relative;
}
.mbp-pro-title-container::before {
position: absolute;
display: inline-block;
content: “”;
transform: translateZ(0);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(102deg, #1f4cc1, #90b6ff 50%, #e19eca 80%, #ffb4aa 88%, #f3ff62);
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: brightness(1.2);
}

.mbp-description {
margin-top: 16px;
font-family: Manrope3-Bold;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
line-height: 29px;
letter-spacing: 0px;
color: #6b655e;
}

.mbp-highlight {
color: white;
font-size: 36px;
}

.mbp-description span {
display: inline-block;
line-height: 1.4;
}

/* 修改过渡效果的样式 */
.mbp-fade-element {
opacity: 0;
transition: all 1s ease-in-out;
pointer-events: none;
}

/* 添加显示状态的类 */
.mbp-fade-in {
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}

.mbp-fade-out {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
transition: all 1s ease-in-out, visibility 0s 1s; /* 确保visibility在淡出动画结束后才改变 */
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
.mbp-screen-1 {
display: flex;
flex-direction: column;
}

.mbp-title {
order: 1;
width: 280px;
font-size: 30px;
margin-top: 0;
margin-bottom: 30px;
padding: 0 20px;
font-weight: normal;
font-stretch: normal;
color: #ffffff;
font-family: ProductSans-Bold;
letter-spacing: 0px;
margin-top: calc(717 / 1200 * 100vh);
}

.mbp-authentication {
order: 2;
margin-top: 0;
gap: 10px;
}

.mbp-authentication img {
width: 82px;
height: 23px;
}

.mbp-buttons {
display: none;
}

.mbp-btn {
width: 100%;
max-width: 280px;
margin: 8px 0;
text-align: center;
}

.mbp-pro-title {
font-size: 33px;
padding: 0 20px;
}

.mbp-description {
font-size: 18px;
padding: 0 20px;
font-weight: normal;
font-stretch: normal;
line-height: 29px;
letter-spacing: 0px;
}

.mbp-screen-2 {
padding: 40px 0;
}

.mbp-background-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
min-width: 100%;
min-height: 100%;
}
}

Pro Meetings On Board

Contact UsDatasheet

function handleMbpScroll() {
const scrollPosition = window.scrollY;
const section = document.querySelector(‘.mbp-screen-1’);
const sectionRect = section.getBoundingClientRect();
const sectionTop = sectionRect.top + window.scrollY; // 获取section相对于文档顶部的位置

const screen1Elements = document.querySelectorAll(‘.mbp-screen-1 .mbp-fade-element’);
const screen2Elements = document.querySelectorAll(‘.mbp-screen-2 .mbp-fade-element’);

// 只在元素在视口范围内时处理动画
if (scrollPosition >= sectionTop && scrollPosition = 0.2) {
screen1Elements.forEach(element => {
element.classList.add(‘mbp-fade-out’);
element.classList.remove(‘mbp-fade-in’);
});

screen2Elements.forEach(element => {
element.classList.add(‘mbp-fade-in’);
element.classList.remove(‘mbp-fade-out’);
});
} else {
screen1Elements.forEach(element => {
element.classList.remove(‘mbp-fade-out’);
element.classList.add(‘mbp-fade-in’);
});

screen2Elements.forEach(element => {
element.classList.remove(‘mbp-fade-in’);
element.classList.add(‘mbp-fade-out’);
});
}
}
}

document.addEventListener(‘DOMContentLoaded’, function() {
const screen1Elements = document.querySelectorAll(‘.mbp-screen-1 .mbp-fade-element’);
const screen2Elements = document.querySelectorAll(‘.mbp-screen-2 .mbp-fade-element’);

// 设置初始状态
screen1Elements.forEach(element => {
element.classList.add(‘mbp-fade-in’);
element.classList.remove(‘mbp-fade-out’);
});
screen2Elements.forEach(element => {
element.classList.add(‘mbp-fade-out’);
element.classList.remove(‘mbp-fade-in’);
});

// 绑定滚动事件
window.addEventListener(‘scroll’, handleMbpScroll, false);

// 初始检查
handleMbpScroll()
});

.designed-content {
text-align: center;
width: 90%;
margin: 0 auto;
}

.designed-content h1 {
font-size: 48px;
margin-bottom: 32px;
}

.designed-description {
font-size: 18px;
line-height: 1.6;
margin-bottom: 40px;
color: #cccccc;
}

.designed-highlight {
color: white;
font-size: 18px;
}

.designed-features-bar {
margin: 0 auto;
width: 100%;
height: 160px;
margin-top: 60px;
}

.designed-features-bar img {
width: 100%;
height: 100%;
object-fit: contain;
}

/* 添加动画相关样式 */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

@media screen and (max-width: 768px) {
.designed-content h1 {
font-size: 32px;
margin-bottom: 24px;
}

.designed-description {
font-size: 14px;
margin-bottom: 30px;
}

.designed-features-bar {
height: 120px;
margin-top: 40px;
}
}

Designed for
Simplicity

The MeetingBoard Pro combines video conferencing, display, and
               smart whiteboarding into a sleek, all-in-one solution offering 10-min
               setup and a clutter-free workspace.

let hasAnimated = false; // 添加标记来记录动画是否已触发

const observer = new IntersectionObserver((entries) =>{
entries.forEach(entry => {
const fadeElements = entry.target.querySelectorAll(‘.fade-in’);

if (entry.intersectionRatio > 0.85 && !hasAnimated) { // 当容器显示超过85%且动画未触发过
fadeElements.forEach(el => el.classList.add(‘visible’));
hasAnimated = true; // 标记动画已触发
} else if (entry.intersectionRatio === 0) { // 只有当元素完全离开视图时
fadeElements.forEach(el => el.classList.remove(‘visible’));
hasAnimated = false; // 重置标记
}
});
}, {
threshold: [0, 0.85] });

// 观察容器元素
observer.observe(document.querySelector(‘.designed-container’));

.meet-container {
width: 100%;
height: 100vh;
z-index: 1;
}

.meet-container.fixed {
position: fixed;
top: 0;
left: 0;
}

.meet-container.end-position {
position: absolute;
bottom: 0;
left: 0;
}

.meet-section {
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
}

.meet-content {
position: absolute;
top: 50%;
left: calc(233 / 1920 * 100vw);
transform: translateY(-50%);
z-index: 2;
max-width: 600px;
}

.meet-title {
margin-bottom: 52px;
font-weight: bold;
font-family: ProductSans-Bold;
font-size: 72px;
letter-spacing: 0px;
color: #ffffff;
}

.meet-description {
width: 498px;
height: 80px;
font-family: Manrope3-ExtraBold;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 0px;
color: #9b9b9b;
}

.meet-image-container {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
width: calc(1149 / 1920 * 100vw);
height: 648px
}

.meet-image {
width: 100%;
height: 100%;
border-radius: 54px;
object-fit: cover;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.meet-image.active {
opacity: 1;
}

.meet-progress-container {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
background-color: #1e1e1e;
box-shadow: inset 0px 0px 21px 0px rgba(153, 131, 107, 0.69);
border-radius: 28px;
width: 159px;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
}

.meet-progress-bar {
width: 34px;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.meet-progress-bar.dot {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
}

.meet-progress {
height: 100%;
background: #fff;
width: 0;
border-radius: 4px;
transition: width 0.1s ease;
}

.meet-progress-bar.dot .meet-progress {
width: 100%;
border-radius: 50%;
}

/* PC端样式 */
@media screen and (min-width: 769px) {
.meet-content {
position: absolute;
top: 50%;
left: calc(233 / 1920 * 100vw);
transform: translateY(-50%);
z-index: 2;
max-width: 600px;
}

.meet-title {
margin-bottom: 52px;
font-size: 72px;
letter-spacing: 0px;
}

.meet-description {
width: 498px;
height: 80px;
font-size: 20px;
line-height: 30px;
}

.meet-image-container {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
width: calc(1149 / 1920 * 100vw);
height: 648px;
}

.meet-section#meet-section2 {
display: none;
}
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
.meet-wrapper {
height: auto;
min-height: 100vh;
overflow: visible;
}

.meet-container {
position: relative;
height: auto;
}

.meet-container.fixed,
.meet-container.end-position {
position: relative; /* 移动端取消fixed和end-position定位 */
top: auto;
left: auto;
bottom: auto;
}

.meet-content {
position: relative;
padding: calc(185 / 750 * 100vw) calc(44 / 750 * 100vw) 0 calc(44 / 750 * 100vw);
left: 0;
transform: none;
max-width: 100%;
}

.meet-title {
text-align: center;
margin-bottom: calc(52 / 750 * 100vw);
font-family: ProductSans-Bold;
font-size: calc(72 / 750 * 100vw);
font-weight: normal;
font-stretch: normal;
letter-spacing: 0;
color: #ffffff;
}

.meet-description {
margin: 0 auto;
width: calc(498/750 * 100vw);
text-align: center;
height: auto;
font-family: Manrope3-ExtraBold;
font-size: calc(20 / 750 * 100vw);
font-weight: normal;
font-stretch: normal;
line-height: calc(30 / 750 * 100vw);
letter-spacing: 0;
color: #9b9b9b;
margin-bottom: calc(58 / 750 * 100vw);
}

.meet-image-container {
position: relative;
right: 0;
top: 0;
transform: none;
width: calc(710 / 750 * 100vw);
height: auto;
margin: 0 auto;
margin-bottom: calc(20 / 750 * 100vw);
}

.meet-image {
position: relative;
margin-bottom: calc(36 / 750 * 100vw);
border-radius: calc(54 / 750 * 100vw);
opacity: 1;
transform: none !important;
transition: none;
height: auto;
}

.meet-section {
height: auto;
overflow: visible;
padding-bottom: calc(40 / 750 * 100vw);
}

.meet-section#meet-section2 {
display: none;
}

.meet-progress-container {
display: none;
}
}

Meet Anywhere
Like A Pro

Move your smart meetings anywhere, or enjoy a clutter-free wall-hung integration. Both way, the easy way to kick off a hybrid meeting.

               

if (window.innerWidth >768) {
const wrapper = document.querySelector(‘.meet-wrapper’);
const container = document.querySelector(‘.meet-container’);
const image1 = document.getElementById(‘meet-image1’);
const image2 = document.getElementById(‘meet-image2’);
const progressBar1 = document.querySelector(‘.meet-progress-bar:first-child’);
const progressBar2 = document.querySelector(‘.meet-progress-bar:last-child’);
const progress1 = document.getElementById(‘meet-progress1’);
const progress2 = document.getElementById(‘meet-progress2’);

// 修改滚动监听逻辑
window.addEventListener(‘scroll’, () => {
const rect = wrapper.getBoundingClientRect();
const progress = -rect.top / (rect.height – window.innerHeight);

if (progress >= 0 && progress = 1) {
container.classList.remove(‘fixed’);
container.classList.add(‘end-position’);
} else {
container.classList.remove(‘fixed’);
container.classList.remove(‘end-position’);
resetAnimationState();
}
});

// 修改观察器逻辑
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const rect = wrapper.getBoundingClientRect();
const progress = -rect.top / (rect.height – window.innerHeight);

if (entry.isIntersecting && progress >= 0 && progress = 1) {
container.classList.remove(‘fixed’);
container.classList.add(‘end-position’);
} else {
container.classList.remove(‘fixed’);
container.classList.remove(‘end-position’);
window.removeEventListener(‘scroll’, handleMeetScroll);
resetAnimationState();
}
});
}, {
threshold: [0, 1],
rootMargin: “0px”
});

// 观察wrapper元素
observer.observe(wrapper);

// 滚动处理函数
function handleMeetScroll() {
const wrapperRect = wrapper.getBoundingClientRect();
// 计算从元素顶部开始的滚动进度
const progress = -wrapperRect.top / (wrapperRect.height – window.innerHeight);
const scrollProgress = Math.max(0, Math.min(100, progress * 100));

if (scrollProgress <= 40) {
const scale = 1 + (scrollProgress / 40) * 0.48;
image1.style.transform = `scale(${scale})`;
image1.classList.add('active');
image2.classList.remove('active');
image2.style.transform = 'scale(1)';

progressBar1.classList.remove('dot');
progressBar2.classList.add('dot');
progress1.style.width = `${(scrollProgress / 40) * 100}%`;
progress2.style.width = '100%';
} else if (scrollProgress <= 60) {
image1.style.transform = 'scale(1.48)';
image1.classList.add('active');
image2.classList.remove('active');
image2.style.transform = 'scale(1)';

progressBar1.classList.remove('dot');
progressBar2.classList.add('dot');
progress1.style.width = '100%';
progress2.style.width = '100%';
} else if (scrollProgress <= 100) {
const scale = 1 + ((scrollProgress – 60) / 40) * 0.48;
image2.style.transform = `scale(${scale})`;
image1.classList.remove('active');
image2.classList.add('active');
image1.style.transform = 'scale(1.48)';

progressBar1.classList.add('dot');
progressBar2.classList.remove('dot');
progress1.style.width = '100%';
progress2.style.width = `${((scrollProgress – 60) / 40) * 100}%`;
}
}

// 重置动画状态
function resetAnimationState() {
image1.style.transform = 'scale(1)';
image2.style.transform = 'scale(1)';
image1.classList.add('active');
image2.classList.remove('active');
progressBar1.classList.remove('dot');
progressBar2.classList.add('dot');
progress1.style.width = '0';
progress2.style.width = '100%';
}
} else {
// 移动端初始化图片状态
const image1 = document.getElementById('meet-image1');
const image2 = document.getElementById('meet-image2');

image1.classList.add('active');
image2.classList.remove('active');
image1.style.transform = 'none';
image2.style.transform = 'none';
}

.pro-5-container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 40px 0;
background-size: cover;
background-position: center;
padding: 20px;
color: #ffffff;
flex-wrap: wrap;
}

.pro-5-text, .pro-5-image {
max-width: 47%;
line-height: 1.5;
padding: 20px;
letter-spacing: 1px;
border-radius: 10px;
}

.pro-5-image img {
width: 100%;
height: auto;
display: block;
}

@media (max-width: 768px) {
.pro-5-text, .pro-5-image {
max-width: 100%;
}
}

The On-device IntelliFocus feature displays real-time close-up shots of the recent speakers, enabling you to stay focused on what truly matters. Feel free to make your point just as you would in a face-to-face conversation.

The Video Fence feature marks the boundaries of a virtual meeting space. Your colleagues only see and hear what’s inside, keeping the focus solely on your point.

.iwb-pen-container .is-pc {
display: block;
position: relative;
}

.iwb-pen-container .is-pc .word-left {
position: absolute;
left: 14vw;
top: 41vh;
}

.iwb-pen-container .is-pc .word-title {
font-size: 0.7rem;
background: linear-gradient(90deg, #b7956e, #cbb39f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;;
margin-bottom: 0.4rem;
font-weight: bold;
font-family: ProductSans;
}

.iwb-pen-container .is-pc .word-dec {
font-size: 0.2rem;
color: #9b9b9b;
width: 5.22rem;
line-height: 2;
font-weight: 600;
}

.iwb-pen-container .is-pc .word-dec span {
color: #ffffff;
font-size: 0.18rem;
}

.iwb-pen-container .is-pc .word-tip {
margin-top:0.2rem;
font-size: 0.15rem;
color: #9b9b9b;
width: 4.5rem;
line-height: 2;
}

.iwb-pen-container .is-pc .word-right {
position: absolute;
right: 9vw;
top: 43vh;
}

.iwb-pen-container .is-pc .word-right .word-line {
display: flex;
align-items: center;
}

.iwb-pen-container .is-pc .word-right .word-element {
font-size: 0.33rem;
color: #ad886b;
}

.iwb-pen-container .is-pc .word-right .word-element.center {
width: 1.7rem;
}

.iwb-pen-container .is-pc .word-right .word-split {
margin: 0 0.3rem;
height: 0.36rem;
width: 1px;
background-color: #ad886b;
}

.iwb-pen-container .is-mobile {
display: none;
}

@media (max-width: 1800px) {
.iwb-pen-container .is-pc .word-left {
top: 35vh;
left: 12vw;
}

.iwb-pen-container .is-pc .word-right {
right: 7vw;
top: 36vh;
}
}

@media (max-width: 1600px) {
.iwb-pen-container .is-pc .word-left {
top: 27vh;
}

.iwb-pen-container .is-pc .word-right {
top: 29vh;
}
}

@media (max-width: 1300px) {
.iwb-pen-container .is-pc .word-left {
top: 20vh;
left: 10vw;
}

.iwb-pen-container .is-pc .word-right {
right: 6vw;
top: 21vh;
}
}

@media (max-width: 1000px) {
.iwb-pen-container .is-pc .word-left {
top: 19vh;
left: 13vw;
}

.iwb-pen-container .is-pc .word-right {
right: 10vw;
top: 19vh;
}
}

@media (max-width: 900px) {
.iwb-pen-container .is-pc .word-left {
top: 12vh;
left: 12vw;
}

.iwb-pen-container .is-pc .word-right {
right: 6vw;
top: 12vh;
}
}

@media (max-width: 800px) {
.iwb-pen-container .is-pc {
display: none;
}

.iwb-pen-container .is-mobile {
display: block;
position: relative;
}

.iwb-pen-container .is-mobile .word-top {
position: absolute;
top: 24vw;
text-align: center;
transform: translateX(-50%);
left: 50%;
}

.iwb-pen-container .is-mobile .word-top .word-title {
font-size: 9vw;
background: linear-gradient(90deg, #b7956e, #cbb39f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;;
margin-bottom: 0.4rem;
margin-bottom: 7vw;
font-weight: 600;
}

.iwb-pen-container .is-mobile .word-top .word-dec {
font-size: 3vw;
color: #9b9b9b;
width: 85vw;
}

.iwb-pen-container .is-mobile .word-top .word-tip {
margin-top: 3.1vh;
font-size: 2vw;
color: #9b9b9b;
width: 85vw;
}

.iwb-pen-container .is-mobile .word-top .word-dec span {
font-size: 3vw;
color: #ffffff;
}

.iwb-pen-container .is-mobile .word-top .word-element {
margin-top: 14vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.iwb-pen-container .is-mobile .word-top .word-element .element-title {
width: 50%;
padding-left: 11svw;
font-size: 4vw;
color: #ad886b;
text-align: left;
line-height: 2.2;
}
}

Free Creation

The MeetingBoard Pro’s premium inking, collaborative diagrams, and rich content drive creativity and productivity with seamless real-time collaboration for brainstorming and planning.

Free Creation

The MeetingBoard Pro’s premium inking, collaborative diagrams, and rich content drive creativity and productivity with seamless real-time collaboration for brainstorming and planning.

.editor-switch-pic-mounting-container .mounting-wiring-pic-container {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transition: background-image 0.5s ease 0s;
}

.editor-switch-pic-mounting-container .mounting-menu-container {
position: absolute;
right: 0.12rem;
width: 0.68rem;
top: 50%;
transform: translate(-50%, -50%);
padding-top: 64px;
}

.editor-switch-pic-mounting-container .mounting-menu-common {
width: 100%;
background-color: #000000;
border-radius: 34px;
opacity: 0.8;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin-bottom: 0.08rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common.switch-common {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common .switch-title {
height: 0.42rem;
line-height: 1.5;
text-align: center;
color: #dcdcdc;
margin: 0.1rem 0 0.2rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common .switch-container {
width: 0.6rem;
height: 0.39rem;
margin: auto;
background-image: linear-gradient(#08b286, #08b286), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);
background-blend-mode: normal, normal, normal;
border-radius: 20px;
padding: 0 0.05rem;
display: flex;
align-items: center;
cursor: pointer;
justify-content: end;
}
.editor-switch-pic-mounting-container .mounting-menu-common .switch-container.close-switch {
justify-content: start;
background-image: linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);

}
.editor-switch-pic-mounting-container .mounting-menu-common.switch-common .switch-container.close-switch {
justify-content: start;
background-image: linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);

}

.editor-switch-pic-mounting-container .mounting-menu-common .switch-container .switch-button {
width: 0.28rem;
height: 0.28rem;
line-height: 0.39rem;
background-color: #ffffff;
border-radius: 50%;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-title {
height: 0.42rem;
line-height: 0.42rem;
color: #dcdcdc;
}

.editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block.is-select {
background-color: #ffffff;
border-radius: 21px;
width: 90%;
margin: auto;
}

.editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block.is-select .menu-title {
color: #1b1b1b;
}

.editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block:not(:last-child) {
margin-bottom: 0;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block {
text-align: center;
width: 100%;
cursor: pointer;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block.is-select .menu-pic {
background-color: #ffffff;

}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block.is-select .menu-dec {
color: #ffffff;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block:not(:last-child) {
margin-bottom: 0.25rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic {
width: 0.55rem;
height: 0.55rem;
background-color: #9c9c9c;
border-radius: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;

}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic img {
width: 70%;
height: 70%;

}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-dec {
color: #dcdcdc;
}

@media screen and (max-width: 800px) {
.editor-switch-pic-mounting-container .mounting-menu-container {
width: 1rem;
right: 0;
}
.editor-switch-pic-mounting-container .mounting-menu-common .menu-title {
height: 0.6rem;
line-height: 0.6rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic {
width: 0.8rem;
height: 0.8rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common.switch-common {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}

.editor-switch-pic-mounting-container .mounting-menu-common .switch-container {
width: 0.8rem;
height: 0.5rem;
}
.editor-switch-pic-mounting-container .mounting-menu-common .switch-title {
margin-bottom: 0.1rem;
}
.editor-switch-pic-mounting-container .mounting-menu-common .switch-container .switch-button {
width: 0.4rem;
height: 0.4rem;
}

}

Wall

Floor

Extend
A/V

Meeting Control

Room Schedule

$(function () {
const picRelationList = [
{ coordinate: [1, ”], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ” },
{ coordinate: [2, ”], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ” },
{ coordinate: [1, ‘1’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-ExtendAV.jpg’ },
{ coordinate: [1, ‘2’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-MeetingControl.jpg’ },
{ coordinate: [1, ‘3’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-RoomManagement.jpg’ },
{ coordinate: [1, ‘1,2’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-ExtendAV+MeetingControl.jpg’ },
{ coordinate: [1, ‘1,3’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-ExtendAV+RoomManagement.jpg’ },
{ coordinate: [1, ‘2,3’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-MeetingControl+RoomManagement.jpg’ },
{ coordinate: [1, ‘1,2,3’], url: ‘https://www.yealink.com/website-service/download/wall.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/wall-ExtendAV+MeetingControl+RoomManagement.jpg’ },

{ coordinate: [2, ‘1’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-ExtendAV.jpg’ },
{ coordinate: [2, ‘2’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-MeetingControl.jpg’ },
{ coordinate: [2, ‘3’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-RoomManagement.jpg’ },
{ coordinate: [2, ‘1,2’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-ExtendAV+MeetingControl.jpg’ },
{ coordinate: [2, ‘1,3’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-ExtendAV+RoomManagement.jpg’ },
{ coordinate: [2, ‘2,3’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-MeetingControl+RoomManagement.jpg’ },
{ coordinate: [2, ‘1,2,3’], url: ‘https://www.yealink.com/website-service/download/floor.jpg’, wiringUrl: ‘https://www.yealink.com/website-service/download/floor-ExtendAV+MeetingControl+RoomManagement.jpg’ },

];

function computedWidthAndHeigh() {
window.winwidth = $(window).width();
window.winheight = $(window).height();
let screenHeight = winwidth * 938 / 1920;
if (Math.abs(winwidth / winheight – 1920 / 938) 0) {
if (window.innerWidth {
$(element).innerHeight(’70vh’);
});
} else {
elements.each((index, element) => {
$(element).innerHeight(screenHeight);
});
}
}
}

$(window).resize(function () {
computedWidthAndHeigh();
});

$(‘.editor-switch-pic-mounting-container .menu-block’).click((element) => {
const currentClickElement = $(element.currentTarget);
const category = currentClickElement.data(‘category’);
const value = currentClickElement.data(‘value’);
$(`.editor-switch-pic-mounting-container .menu-block[data-category=”${category}”]`).removeClass(‘is-select’);
$(`.editor-switch-pic-mounting-container .menu-block[data-value=”${value}”][data-category=”${category}”]`).addClass(‘is-select’);

fillPic();
showWiring();
});

$(‘.editor-switch-pic-mounting-container .switch-container’).click((element) => {
const currentSwitch = $(element.currentTarget);
currentSwitch.toggleClass(‘close-switch’);
showWiring();
});

function getCurrentSelect() {
const selectPosition = $(‘.editor-switch-pic-mounting-container .menu-block.is-select[data-category=”position”]’).data(‘value’);
const switches = $(‘.editor-switch-pic-mounting-container .switch-container:not(.close-switch)’).map((index, element) => {
return $(element).data(‘switch’);
}).get();
return [selectPosition, switches.sort().join(‘,’)];
}

function showWiring() {
const coordinate = getCurrentSelect();
const item = picRelationList.find((item) => JSON.stringify(item.coordinate) === JSON.stringify(coordinate));
if (item) {
$(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, `url(${item.wiringUrl})`);
} else {
$(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, ”);
}
}

function fillPic() {
const coordinate = getCurrentSelect();
const item = picRelationList.find((item) => JSON.stringify(item.coordinate) === JSON.stringify(coordinate));
if (item) {
$(‘.editor-switch-pic-mounting-container .mounting-container’).css(‘background-image’, `url(${item.url})`);
} else {
$(‘.editor-switch-pic-mounting-container .mounting-container’).css(‘background-image’, ”);
}
}

computedWidthAndHeigh();
fillPic();
$(“.editor-switch-pic-mounting-container .switch-container”).addClass(‘close-switch’);
$(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, ”);
});

.panel-left-panel {
width: 520px;
background-color: #1b1b1b;
color: #fff;
}

.panel-menu-item {
box-sizing: border-box;
padding: 20px 0 20px 138px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.1);
color: #9b9b9b;
}

.panel-menu-item.active {
height: 221px;
color: #ffffff;
background-color: #0f0f0f;
}

.panel-menu-item.active >.panel-menu-text p {
display: block;
}

.panel-menu-item.active > .panel-menu-icon {
display: block;
}

.panel-menu-text {
flex: 1;
}

.panel-menu-text h3 {
margin: 0;
font-family: Manrope3-ExtraBold;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 0px;
}

.panel-menu-text p {
margin: 13px 0 0 0;
font-family: Manrope3-Regular;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 14px;
letter-spacing: 0px;
display: none;
}

.panel-menu-icon {
display: none;
position: relative;
width: 100px;
height: 57px;
img {
top: -10px;
width: 55px;
height: 44px;
position: absolute;
}
div {
position: absolute;
bottom: 0;
font-family: Manrope3-Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 14px;
letter-spacing: 0px;
color: #ffffff;
}
}

.panel-main-content {
flex: 1;
position: relative;
overflow: hidden;
background-color: #000;
}

.panel-main-content img {
width: 100%;
height: 100%;
object-fit: cover;
}

.panel-right-panel {
width: 217px;
background-color: #000000;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
gap: 29px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0.76;
}

.panel-control-item {
display: none; /* 默认隐藏所有控制图标 */
flex-direction: column;
align-items: center;
gap: 4px;
transition: transform 0.3s ease;
text-decoration: none;
}
.panel-control-item:hover {
transform: scale(1.05);}

.panel-control-text {
text-align: center;
font-family: Manrope3-Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 20px;
letter-spacing: 0px;
color: #ffffff;
}

.panel-underline {
text-decoration: none;
}

.panel-control-button {
width: 48px;
height: 48px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}

.panel-control-button:hover {
background-color: #f0f0f0;
}

.control-button img {
width: 20px;
height: 20px;
}

.control-text {
text-align: center;
font-family: Manrope3-Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 20px;
letter-spacing: 0px;
color: #ffffff;
}

.panel-room-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
display: block;
}

.panel-room-image.active {
opacity: 1;
}

/* PC端隐藏 panel-room-info – 移动到最上面 */
.panel-room-info {
display: none;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
.panel-wrapper {
flex-direction: column;
height: auto;
min-height: 100vh;
background-color: #000;
}

.panel-left-panel {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
background-color: #000;
order: 1;
padding: 0;
margin-bottom: 14px;
margin-top: 104px;
}

.panel-menu-item {
padding: 16px;
height: auto;
height: 50px;
border: none;
background-color: #1b1b1b;
justify-content: center;
text-align: center;
}

.panel-menu-item.active {
height: 50px;
background-color: #9c9c9c;
}

.panel-menu-text {
text-align: center;
padding: 0;
}

.panel-menu-text h3 {
font-size: 16px;
line-height: 20px;
margin: 0;
text-align: center;
}

/* 隐藏PC端不需要的元素 */
.panel-menu-text p,
.panel-menu-icon {
display: none !important;
}

/* 主要内容区域 */
.panel-main-content {
order: 2;
height: 250px;
position: relative;
flex: none;
}

/* 房间信息区域 – 确保这段代码在媒体查询中 */
.panel-room-info {
display: flex !important; /* 添加 !important 确保覆盖默认样式 */
order: 3;
align-items: center;
justify-content: space-between;
margin: 0 24px;
background-color: #000;
color: #fff;
height: 95px;
border-bottom: 1px solid #9b9b9b;
}

.panel-room-info-title {
gap: 8px;
color: #fff;
text-align: center;
font-family: Manrope3-Regular;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
line-height: 12px;
letter-spacing: 0px;
}

.panel-room-info-title img {
width: 85px;
height: 55px;
}

/* 右侧面板改为底部列表 */
.panel-right-panel {
position: static;
width: 100%;
order: 4;
padding: 20px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background-color: #000;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
opacity: 1;
}

.panel-control-item {
width: auto;
gap: 8px;
margin: 0;
}

.panel-control-item img {
width: 60px;
height: 60px;
object-fit: contain;
}

.panel-control-text {
text-align: center;
font-family: Manrope3-Regular;
font-size: 10px;
font-weight: normal;
font-stretch: normal;
line-height: 10px;
letter-spacing: 0px;
color: #ffffff;
}

.panel-underline {
text-decoration: underline;
}

/* 显示移动端专属元素 */
.mobile-only {
display: flex !important;
flex-direction: column;
align-items: center;
}
}

/* PC端隐藏mobile-only元素 */
.mobile-only {
display: none;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
.mobile-only {
display: flex;
}

.right-panel {
position: static;
width: 100%;
order: 4;
padding: 20px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
background-color: #000;
}

.control-item {
width: 100%;
gap: 0;
}
}

Small room

MeetingBoard 65 Pro

1-6 People

Medium room

MeetingBoard 75 Pro

6-12 People

Large room

MeetingBoard 86 Pro

12-20 People

Open space and

executive office

MeetingBoard 75 Pro

MB-FS-P650T

(optional)

MB-FS-P750T

(optional)

MB-FS-P860T

(optional)

MB-WallMount-650

(optional)

MB-WallMount-860

(optional)

CTP25

(optional)

CTP25

(suggested in executive office, optional)

MB-12X Pro

(optional)

CS10

(optional)

CM20

(optional)

PA20*

(optional)

VCM36-W

(optional)

Extensible A/V

1-6 People

// 页面加载时初始化
window.onload = function() {
// 获取当前激活的房间类型
const activeMenuItem = document.querySelector(‘.panel-menu-item.active’);
if (activeMenuItem && activeMenuItem.getAttribute(‘data-room’) === ‘small’) {
// 只有当激活的是small房间时才显示对应内容
document.getElementById(‘small_room’).classList.add(‘active’);

// 显示small房间对应的控制图标
document.querySelectorAll(‘.panel-control-item’).forEach(controlItem =>{
const showIn = controlItem.getAttribute(‘data-show-in’);
if (showIn && showIn.includes(‘small’)) {
controlItem.style.display = ‘flex’;
} else {
controlItem.style.display = ‘none’;
}
});
}
}

document.querySelectorAll(‘.panel-menu-item’).forEach(item => {
item.addEventListener(‘click’, function() {
document.querySelectorAll(‘.panel-menu-item’).forEach(i => i.classList.remove(‘active’));
this.classList.add(‘active’);

const roomType = this.getAttribute(‘data-room’);

document.querySelectorAll(‘.panel-room-image’).forEach(img => {
img.classList.remove(‘active’);
});

const targetImage = document.getElementById(`${roomType}_room`);
if (targetImage) {
targetImage.classList.add(‘active’);
}

const roomInfo = {
‘small’: {
icon: ‘http://yealink.org/wp-content/uploads/2025/04/small-optimized.png’,
text: ‘1-6 People’
},
‘medium’: {
icon: ‘http://yealink.org/wp-content/uploads/2025/04/medium-optimized.png’,
text: ‘6-12 People’
},
‘large’: {
icon: ‘http://yealink.org/wp-content/uploads/2025/04/large-optimized.png’,
text: ’12-20 People’
},
‘executive’: {
icon: ‘http://yealink.org/wp-content/uploads/2025/04/executive-optimized.png’,
text: ”
}
}[roomType];

const infoContainer = document.querySelector(‘.panel-room-info .panel-room-info-title:last-child’);
infoContainer.querySelector(‘img’).src = roomInfo.icon;
infoContainer.querySelector(‘div’).textContent = roomInfo.text;

// 修改控制图标显示逻辑
document.querySelectorAll(‘.panel-control-item’).forEach(controlItem => {
const showIn = controlItem.getAttribute(‘data-show-in’);
if (showIn) {
const shouldShow = showIn.split(‘,’).includes(roomType);
controlItem.style.display = shouldShow ? ‘flex’ : ‘none’;
}
});
});
});

const buttonContainerYd = document.getElementById(‘buttonContainer-yd’);
const contactButtonYd = document.getElementById(‘contactButton-yd’);
let hideTimeoutYd;
let buttonClickedYd = false;

function hideButtonYd() {
buttonContainerYd.style.opacity = ‘0’;
}

function showButtonYd() {
if (!buttonClickedYd) {
buttonContainerYd.style.opacity = ‘1’;
clearTimeout(hideTimeoutYd);
hideTimeoutYd = setTimeout(hideButtonYd, 2000);
}
}

function handleScrollYd() {
const scrollPositionYd = window.scrollY + window.innerHeight;
const thresholdYd = document.body.scrollHeight * 0.75;

if (scrollPositionYd {
buttonClickedYd = true;
hideButtonYd();
});

window.addEventListener(‘scroll’, handleScrollYd);

// 初始化时设置3秒后隐藏按钮
hideTimeoutYd = setTimeout(hideButtonYd, 3000);