{"id":13164,"date":"2025-04-29T15:22:50","date_gmt":"2025-04-29T08:22:50","guid":{"rendered":"http:\/\/yealink.org\/-product-\/pro-view-with-more-eyes\/"},"modified":"2025-04-29T15:25:10","modified_gmt":"2025-04-29T08:25:10","slug":"pro-view-with-more-eyes","status":"publish","type":"product","link":"https:\/\/yealink.org\/bn\/-product-\/pro-view-with-more-eyes\/","title":{"rendered":"Pro View with More Eyes"},"content":{"rendered":"
\n Meeting Board Pro<\/title>\/* 顶部横条颜色定制黑底白字 *\/<br \/>\n.product-detail-banner .banner-top {background: #222222;}<br \/>\n.product-detail-banner .banner-top .banner-left .on {color: #fff;}<br \/>\n.product-detail-banner .banner-top .banner-right .on {color:#fff;}<br \/>\n.product-detail-banner .banner-top .banner-right span, .product-detail-banner .banner-top .banner-right span a {color: #b5b5b5;}<br \/>\n.product-detail-banner .banner-top .banner-left span.bannerLink>a:hover {color: #fff;}<br \/>\n.product-detail-banner .banner-top .banner-right span.bannerLink>a:hover {color: #ffffff}<\/p>\n<p>.mbp-screen {<br \/>\n width: 100%;<br \/>\n height: 100vh;<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n align-items: center;<br \/>\n }<\/p>\n<p> .mbp-screen-1 {<br \/>\n position: relative;<br \/>\n color: white;<br \/>\n text-align: center;<br \/>\n overflow: hidden;<br \/>\n }<\/p>\n<p> .mbp-background-video {<br \/>\n position: absolute;<br \/>\n top: 0;<br \/>\n left: 0;<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n object-fit: cover;<br \/>\n z-index: 0;<br \/>\n object-position: center center;<br \/>\n }<\/p>\n<p> \/* 确保内容在视频上层 *\/<br \/>\n .mbp-title, .mbp-buttons {<br \/>\n position: relative;<br \/>\n z-index: 2;<br \/>\n }<\/p>\n<p> .mbp-authentication {<br \/>\n margin-top: calc(509 \/ 945 * 100vh);<br \/>\n display: flex;<br \/>\n justify-content: center;<br \/>\n z-index: 2;<br \/>\n gap: 10px;<br \/>\n }<br \/>\n .mbp-authentication img {<br \/>\n width: 164px;<br \/>\n height: 46px;<br \/>\n }<\/p>\n<p> .mbp-title {<br \/>\n margin-top: 22px;<br \/>\n font-family: titleFontBold;<br \/>\n font-size: 72px;<br \/>\n font-weight: bold;<br \/>\n font-stretch: normal;<br \/>\n line-height: 54px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n margin-bottom: 53px;<br \/>\n }<\/p>\n<p> .mbp-btn {<br \/>\n display: inline-block;<br \/>\n padding: 0 40px;<br \/>\n margin: 0 16px;<br \/>\n line-height: 50px;<br \/>\n border-radius: 22px;<br \/>\n text-decoration: none;<br \/>\n font-family: ProductSans-Bold;<br \/>\n font-size: 20px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n }<\/p>\n<p> .mbp-btn-contact {<br \/>\n background-color: #ffffff;<br \/>\n box-shadow: inset 4px 3px 18px 0px rgba(255, 235, 207, 0.59);<br \/>\n color: black;<br \/>\n }<\/p>\n<p> .mbp-btn-datasheet {<br \/>\n background-image: linear-gradient(<br \/>\n #08b286,<br \/>\n #08b286),<br \/>\n linear-gradient(<br \/>\n #ffffff,<br \/>\n #ffffff);<br \/>\n background-blend-mode: normal,<br \/>\n normal;<br \/>\n color: white;<br \/>\n }<\/p>\n<p> .mbp-screen-2 {<br \/>\n background-image: url(‘https:\/\/www.yealink.com\/website-service\/download\/第二屏-背景(和视频平滑过渡).png’);<br \/>\n background-size: cover;<br \/>\n background-position: center;<br \/>\n background-repeat: no-repeat;<br \/>\n color: white;<br \/>\n text-align: center;<br \/>\n height: 772px;<br \/>\n margin-top: -130px;<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n justify-content: flex-start;<br \/>\n align-items: center;<br \/>\n position: relative;<br \/>\n }<\/p>\n<p> .mbp-pro-title {<br \/>\n font-family: ProductSans-Bold;<br \/>\n font-size: 80px;<br \/>\n margin:293px 0 24px 0;<br \/>\n position: relative; \/* 添加相对定位 *\/<br \/>\n color: white;<br \/>\n 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);<br \/>\n filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));<br \/>\n }<br \/>\n .mbp-pro-title-container {<br \/>\n position: relative;<br \/>\n }<br \/>\n .mbp-pro-title-container::before {<br \/>\n position: absolute;<br \/>\n display: inline-block;<br \/>\n content: “”;<br \/>\n transform: translateZ(0);<br \/>\n -webkit-text-fill-color: transparent;<br \/>\n -webkit-background-clip: text;<br \/>\n background-clip: text;<br \/>\n background-image: linear-gradient(102deg, #1f4cc1, #90b6ff 50%, #e19eca 80%, #ffb4aa 88%, #f3ff62);<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n left: 0;<br \/>\n top: 0;<br \/>\n filter: brightness(1.2);<br \/>\n }<\/p>\n<p> .mbp-description {<br \/>\n margin-top: 16px;<br \/>\n font-family: Manrope3-Bold;<br \/>\n font-size: 36px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 29px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #6b655e;<br \/>\n }<\/p>\n<p> .mbp-highlight {<br \/>\n color: white;<br \/>\n font-size: 36px;<br \/>\n }<\/p>\n<p> .mbp-description span {<br \/>\n display: inline-block;<br \/>\n line-height: 1.4;<br \/>\n }<\/p>\n<p> \/* 修改过渡效果的样式 *\/<br \/>\n .mbp-fade-element {<br \/>\n opacity: 0;<br \/>\n transition: all 1s ease-in-out;<br \/>\n pointer-events: none;<br \/>\n }<\/p>\n<p> \/* 添加显示状态的类 *\/<br \/>\n .mbp-fade-in {<br \/>\n opacity: 1 !important;<br \/>\n pointer-events: auto !important;<br \/>\n visibility: visible !important;<br \/>\n }<\/p>\n<p> .mbp-fade-out {<br \/>\n opacity: 0 !important;<br \/>\n pointer-events: none !important;<br \/>\n visibility: hidden !important;<br \/>\n transition: all 1s ease-in-out, visibility 0s 1s; \/* 确保visibility在淡出动画结束后才改变 *\/<br \/>\n }<\/p>\n<p> \/* 移动端适配 *\/<br \/>\n @media screen and (max-width: 768px) {<br \/>\n .mbp-screen-1 {<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n }<\/p>\n<p> .mbp-title {<br \/>\n order: 1;<br \/>\n width: 280px;<br \/>\n font-size: 30px;<br \/>\n margin-top: 0;<br \/>\n margin-bottom: 30px;<br \/>\n padding: 0 20px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n color: #ffffff;<br \/>\n font-family: ProductSans-Bold;<br \/>\n letter-spacing: 0px;<br \/>\n margin-top: calc(717 \/ 1200 * 100vh);<br \/>\n }<\/p>\n<p> .mbp-authentication {<br \/>\n order: 2;<br \/>\n margin-top: 0;<br \/>\n gap: 10px;<br \/>\n }<\/p>\n<p> .mbp-authentication img {<br \/>\n width: 82px;<br \/>\n height: 23px;<br \/>\n }<\/p>\n<p> .mbp-buttons {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> .mbp-btn {<br \/>\n width: 100%;<br \/>\n max-width: 280px;<br \/>\n margin: 8px 0;<br \/>\n text-align: center;<br \/>\n }<\/p>\n<p> .mbp-pro-title {<br \/>\n font-size: 33px;<br \/>\n padding: 0 20px;<br \/>\n }<\/p>\n<p> .mbp-description {<br \/>\n font-size: 18px;<br \/>\n padding: 0 20px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 29px;<br \/>\n letter-spacing: 0px;<br \/>\n }<\/p>\n<p> .mbp-screen-2 {<br \/>\n padding: 40px 0;<br \/>\n }<\/p>\n<p> .mbp-background-video {<br \/>\n position: absolute;<br \/>\n top: 50%;<br \/>\n left: 50%;<br \/>\n transform: translate(-50%, -50%);<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n object-fit: cover;<br \/>\n min-width: 100%;<br \/>\n min-height: 100%;<br \/>\n }<br \/>\n }<!-- 第一屏 --><\/p>\n<section class=\"mbp-screen mbp-screen-1\"><video class=\"mbp-background-video\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" poster=\"https:\/\/www.yealink.com\/website-service\/download\/IWB_first_screen.jpg\"><source src=\"https:\/\/www.yealink.com\/website-service\/download\/15862bc2-c667-4eec-8db5-b96185cddd78.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<div class=\"mbp-authentication mbp-fade-element\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/authentication-teams.png\" title=\"authentication-teams\"> <img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/authentication-zoom.png\" title=\"authentication-zoom\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/authentication-mode.png\" title=\"authentication-mode\"><\/div>\n<h1 class=\"mbp-title mbp-fade-element\">Pro Meetings On Board<\/h1>\n<div class=\"mbp-buttons mbp-fade-element\"><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/microsoft-teams-rooms-meetingboardpro#contact_form\" class=\"mbp-btn mbp-btn-contact\">Contact Us<\/a><a href=\"https:\/\/support.yealink.com\/en\/portal\/knowledge\/show?id=678731ec86cc615abc245616\" target=\"_blank\" class=\"mbp-btn mbp-btn-datasheet\">Datasheet<\/a><\/div>\n<\/section>\n<p><!-- 第二屏 --><\/p>\n<section class=\"mbp-screen mbp-screen-2\">\n<div class=\"mbp-pro-title-container\">\n<h2 class=\"mbp-pro-title mbp-fade-element\" data-text=\"MeetingBoard Pro\">MeetingBoard Pro<\/h2>\n<\/div>\n<p class=\"mbp-description mbp-fade-element\">For <span class=\"mbp-highlight\">small to large<\/span><br \/> meeting rooms and <span class=\"mbp-highlight\">open<\/span> spaces<\/p>\n<\/section>\n<p>function handleMbpScroll() {<br \/>\n const scrollPosition = window.scrollY;<br \/>\n const section = document.querySelector(‘.mbp-screen-1’);<br \/>\n const sectionRect = section.getBoundingClientRect();<br \/>\n const sectionTop = sectionRect.top + window.scrollY; \/\/ 获取section相对于文档顶部的位置<\/p>\n<p> const screen1Elements = document.querySelectorAll(‘.mbp-screen-1 .mbp-fade-element’);<br \/>\n const screen2Elements = document.querySelectorAll(‘.mbp-screen-2 .mbp-fade-element’);<\/p>\n<p> \/\/ 只在元素在视口范围内时处理动画<br \/>\n if (scrollPosition >= sectionTop && scrollPosition = 0.2) {<br \/>\n screen1Elements.forEach(element => {<br \/>\n element.classList.add(‘mbp-fade-out’);<br \/>\n element.classList.remove(‘mbp-fade-in’);<br \/>\n });<\/p>\n<p> screen2Elements.forEach(element => {<br \/>\n element.classList.add(‘mbp-fade-in’);<br \/>\n element.classList.remove(‘mbp-fade-out’);<br \/>\n });<br \/>\n } else {<br \/>\n screen1Elements.forEach(element => {<br \/>\n element.classList.remove(‘mbp-fade-out’);<br \/>\n element.classList.add(‘mbp-fade-in’);<br \/>\n });<\/p>\n<p> screen2Elements.forEach(element => {<br \/>\n element.classList.remove(‘mbp-fade-in’);<br \/>\n element.classList.add(‘mbp-fade-out’);<br \/>\n });<br \/>\n }<br \/>\n }<br \/>\n }<\/p>\n<p> document.addEventListener(‘DOMContentLoaded’, function() {<br \/>\n const screen1Elements = document.querySelectorAll(‘.mbp-screen-1 .mbp-fade-element’);<br \/>\n const screen2Elements = document.querySelectorAll(‘.mbp-screen-2 .mbp-fade-element’);<\/p>\n<p> \/\/ 设置初始状态<br \/>\n screen1Elements.forEach(element => {<br \/>\n element.classList.add(‘mbp-fade-in’);<br \/>\n element.classList.remove(‘mbp-fade-out’);<br \/>\n });<br \/>\n screen2Elements.forEach(element => {<br \/>\n element.classList.add(‘mbp-fade-out’);<br \/>\n element.classList.remove(‘mbp-fade-in’);<br \/>\n });<\/p>\n<p> \/\/ 绑定滚动事件<br \/>\n window.addEventListener(‘scroll’, handleMbpScroll, false);<\/p>\n<p> \/\/ 初始检查<br \/>\n handleMbpScroll()<br \/>\n });<!--!doctype--><br \/>\n<\/article>\n<article id=\"temp_680da48412d71110503925bd\" class=\"temp-page1\">\n <title>Designed for Simplicity<\/title>.designed-container {<br \/>\n width: 100%;<br \/>\n height: 100vh;<br \/>\n background-image: url(‘https:\/\/www.yealink.com\/website-service\/download\/IWB_fixed_base.png’);<br \/>\n background-size: cover;<br \/>\n background-position: center;<br \/>\n background-repeat: no-repeat;<br \/>\n background-attachment: fixed;<br \/>\n color: white;<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n align-items: center;<br \/>\n justify-content: center;<br \/>\n padding: 20px;<br \/>\n overflow-y: auto;<br \/>\n position: relative;<br \/>\n }<\/p>\n<p> .designed-content {<br \/>\n text-align: center;<br \/>\n width: 90%;<br \/>\n margin: 0 auto;<br \/>\n }<\/p>\n<p> .designed-content h1 {<br \/>\n font-size: 48px;<br \/>\n margin-bottom: 32px;<br \/>\n }<\/p>\n<p> .designed-description {<br \/>\n font-size: 18px;<br \/>\n line-height: 1.6;<br \/>\n margin-bottom: 40px;<br \/>\n color: #cccccc;<br \/>\n }<\/p>\n<p> .designed-highlight {<br \/>\n color: white;<br \/>\n font-size: 18px;<br \/>\n }<\/p>\n<p> .designed-features-bar {<br \/>\n margin: 0 auto;<br \/>\n width: 100%;<br \/>\n height: 160px;<br \/>\n margin-top: 60px;<br \/>\n }<\/p>\n<p> .designed-features-bar img {<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n object-fit: contain;<br \/>\n }<\/p>\n<p> \/* 添加动画相关样式 *\/<br \/>\n .fade-in {<br \/>\n opacity: 0;<br \/>\n transform: translateY(20px);<br \/>\n transition: opacity 0.8s ease, transform 0.8s ease;<br \/>\n }<\/p>\n<p> .fade-in.visible {<br \/>\n opacity: 1;<br \/>\n transform: translateY(0);<br \/>\n }<\/p>\n<p> @media screen and (max-width: 768px) {<br \/>\n .designed-content h1 {<br \/>\n font-size: 32px;<br \/>\n margin-bottom: 24px;<br \/>\n }<\/p>\n<p> .designed-description {<br \/>\n font-size: 14px;<br \/>\n margin-bottom: 30px;<br \/>\n }<\/p>\n<p> .designed-features-bar {<br \/>\n height: 120px;<br \/>\n margin-top: 40px;<br \/>\n }<br \/>\n }<\/p>\n<div class=\"designed-container\">\n<div class=\"designed-content\">\n<h1 class=\"fade-in\">Designed for <br \/> Simplicity<\/h1>\n<p class=\"designed-description fade-in\">The <span class=\"designed-highlight\">MeetingBoard Pro<\/span> combines video conferencing, display, and <br \/>\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0smart whiteboarding into a sleek, <span class=\"designed-highlight\">all-in-one solution<\/span> offering <span class=\"designed-highlight\">10-min <br \/>\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0setup<\/span> and a <span class=\"designed-highlight\">clutter-free<\/span> workspace.<\/p>\n<div class=\"designed-features-bar fade-in\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/iwb-simplicity.png\" alt=\"Features Bar\" title=\"iwb-simplicity\"><\/div>\n<\/div>\n<\/div>\n<p>let hasAnimated = false; \/\/ 添加标记来记录动画是否已触发<\/p>\n<p> const observer = new IntersectionObserver((entries) =>{<br \/>\n entries.forEach(entry => {<br \/>\n const fadeElements = entry.target.querySelectorAll(‘.fade-in’);<\/p>\n<p> if (entry.intersectionRatio > 0.85 && !hasAnimated) { \/\/ 当容器显示超过85%且动画未触发过<br \/>\n fadeElements.forEach(el => el.classList.add(‘visible’));<br \/>\n hasAnimated = true; \/\/ 标记动画已触发<br \/>\n } else if (entry.intersectionRatio === 0) { \/\/ 只有当元素完全离开视图时<br \/>\n fadeElements.forEach(el => el.classList.remove(‘visible’));<br \/>\n hasAnimated = false; \/\/ 重置标记<br \/>\n }<br \/>\n });<br \/>\n }, {<br \/>\n threshold: [0, 0.85]\n });<\/p>\n<p> \/\/ 观察容器元素<br \/>\n observer.observe(document.querySelector(‘.designed-container’));<!--!doctype--><br \/>\n<\/article>\n<article id=\"temp_680da36656b7296cceb3b223\" class=\"temp-page1\">\n .meet-wrapper {<br \/>\n background-color: #000;<br \/>\n color: #fff;<br \/>\n overflow: hidden;<br \/>\n height: 200vh;<br \/>\n position: relative;<br \/>\n }<\/p>\n<p> .meet-container {<br \/>\n width: 100%;<br \/>\n height: 100vh;<br \/>\n z-index: 1;<br \/>\n }<\/p>\n<p> .meet-container.fixed {<br \/>\n position: fixed;<br \/>\n top: 0;<br \/>\n left: 0;<br \/>\n }<\/p>\n<p> .meet-container.end-position {<br \/>\n position: absolute;<br \/>\n bottom: 0;<br \/>\n left: 0;<br \/>\n }<\/p>\n<p> .meet-section {<br \/>\n height: 100vh;<br \/>\n width: 100%;<br \/>\n position: relative;<br \/>\n overflow: hidden;<br \/>\n }<\/p>\n<p> .meet-content {<br \/>\n position: absolute;<br \/>\n top: 50%;<br \/>\n left: calc(233 \/ 1920 * 100vw);<br \/>\n transform: translateY(-50%);<br \/>\n z-index: 2;<br \/>\n max-width: 600px;<br \/>\n }<\/p>\n<p> .meet-title {<br \/>\n margin-bottom: 52px;<br \/>\n font-weight: bold;<br \/>\n font-family: ProductSans-Bold;<br \/>\n font-size: 72px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .meet-description {<br \/>\n width: 498px;<br \/>\n height: 80px;<br \/>\n font-family: Manrope3-ExtraBold;<br \/>\n font-size: 20px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 30px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #9b9b9b;<br \/>\n }<\/p>\n<p> .meet-image-container {<br \/>\n position: absolute;<br \/>\n right: 10%;<br \/>\n top: 50%;<br \/>\n transform: translateY(-50%);<br \/>\n width: calc(1149 \/ 1920 * 100vw);<br \/>\n height: 648px<br \/>\n }<\/p>\n<p> .meet-image {<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n border-radius: 54px;<br \/>\n object-fit: cover;<br \/>\n opacity: 0;<br \/>\n position: absolute;<br \/>\n top: 0;<br \/>\n left: 0;<br \/>\n transform-origin: center center;<br \/>\n transition: opacity 0.3s ease, transform 0.3s ease;<br \/>\n }<\/p>\n<p> .meet-image.active {<br \/>\n opacity: 1;<br \/>\n }<\/p>\n<p> .meet-progress-container {<br \/>\n position: absolute;<br \/>\n bottom: 30px;<br \/>\n left: 50%;<br \/>\n transform: translateX(-50%);<br \/>\n display: flex;<br \/>\n gap: 20px;<br \/>\n background-color: #1e1e1e;<br \/>\n box-shadow: inset 0px 0px 21px 0px rgba(153, 131, 107, 0.69);<br \/>\n border-radius: 28px;<br \/>\n width: 159px;<br \/>\n height: 55px;<br \/>\n display: flex;<br \/>\n justify-content: center;<br \/>\n align-items: center;<br \/>\n }<\/p>\n<p> .meet-progress-bar {<br \/>\n width: 34px;<br \/>\n height: 8px;<br \/>\n background: rgba(255, 255, 255, 0.2);<br \/>\n border-radius: 4px;<br \/>\n position: relative;<br \/>\n overflow: hidden;<br \/>\n transition: all 0.3s ease;<br \/>\n }<\/p>\n<p> .meet-progress-bar.dot {<br \/>\n width: 8px !important;<br \/>\n height: 8px !important;<br \/>\n border-radius: 50% !important;<br \/>\n }<\/p>\n<p> .meet-progress {<br \/>\n height: 100%;<br \/>\n background: #fff;<br \/>\n width: 0;<br \/>\n border-radius: 4px;<br \/>\n transition: width 0.1s ease;<br \/>\n }<\/p>\n<p> .meet-progress-bar.dot .meet-progress {<br \/>\n width: 100%;<br \/>\n border-radius: 50%;<br \/>\n }<\/p>\n<p> \/* PC端样式 *\/<br \/>\n @media screen and (min-width: 769px) {<br \/>\n .meet-content {<br \/>\n position: absolute;<br \/>\n top: 50%;<br \/>\n left: calc(233 \/ 1920 * 100vw);<br \/>\n transform: translateY(-50%);<br \/>\n z-index: 2;<br \/>\n max-width: 600px;<br \/>\n }<\/p>\n<p> .meet-title {<br \/>\n margin-bottom: 52px;<br \/>\n font-size: 72px;<br \/>\n letter-spacing: 0px;<br \/>\n }<\/p>\n<p> .meet-description {<br \/>\n width: 498px;<br \/>\n height: 80px;<br \/>\n font-size: 20px;<br \/>\n line-height: 30px;<br \/>\n }<\/p>\n<p> .meet-image-container {<br \/>\n position: absolute;<br \/>\n right: 10%;<br \/>\n top: 50%;<br \/>\n transform: translateY(-50%);<br \/>\n width: calc(1149 \/ 1920 * 100vw);<br \/>\n height: 648px;<br \/>\n }<\/p>\n<p> .meet-section#meet-section2 {<br \/>\n display: none;<br \/>\n }<br \/>\n }<\/p>\n<p> \/* 移动端样式 *\/<br \/>\n @media screen and (max-width: 768px) {<br \/>\n .meet-wrapper {<br \/>\n height: auto;<br \/>\n min-height: 100vh;<br \/>\n overflow: visible;<br \/>\n }<\/p>\n<p> .meet-container {<br \/>\n position: relative;<br \/>\n height: auto;<br \/>\n }<\/p>\n<p> .meet-container.fixed,<br \/>\n .meet-container.end-position {<br \/>\n position: relative; \/* 移动端取消fixed和end-position定位 *\/<br \/>\n top: auto;<br \/>\n left: auto;<br \/>\n bottom: auto;<br \/>\n }<\/p>\n<p> .meet-content {<br \/>\n position: relative;<br \/>\n padding: calc(185 \/ 750 * 100vw) calc(44 \/ 750 * 100vw) 0 calc(44 \/ 750 * 100vw);<br \/>\n left: 0;<br \/>\n transform: none;<br \/>\n max-width: 100%;<br \/>\n }<\/p>\n<p> .meet-title {<br \/>\n text-align: center;<br \/>\n margin-bottom: calc(52 \/ 750 * 100vw);<br \/>\n font-family: ProductSans-Bold;<br \/>\n font-size: calc(72 \/ 750 * 100vw);<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n letter-spacing: 0;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .meet-description {<br \/>\n margin: 0 auto;<br \/>\n width: calc(498\/750 * 100vw);<br \/>\n text-align: center;<br \/>\n height: auto;<br \/>\n font-family: Manrope3-ExtraBold;<br \/>\n font-size: calc(20 \/ 750 * 100vw);<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: calc(30 \/ 750 * 100vw);<br \/>\n letter-spacing: 0;<br \/>\n color: #9b9b9b;<br \/>\n margin-bottom: calc(58 \/ 750 * 100vw);<br \/>\n }<\/p>\n<p> .meet-image-container {<br \/>\n position: relative;<br \/>\n right: 0;<br \/>\n top: 0;<br \/>\n transform: none;<br \/>\n width: calc(710 \/ 750 * 100vw);<br \/>\n height: auto;<br \/>\n margin: 0 auto;<br \/>\n margin-bottom: calc(20 \/ 750 * 100vw);<br \/>\n }<\/p>\n<p> .meet-image {<br \/>\n position: relative;<br \/>\n margin-bottom: calc(36 \/ 750 * 100vw);<br \/>\n border-radius: calc(54 \/ 750 * 100vw);<br \/>\n opacity: 1;<br \/>\n transform: none !important;<br \/>\n transition: none;<br \/>\n height: auto;<br \/>\n }<\/p>\n<p> .meet-section {<br \/>\n height: auto;<br \/>\n overflow: visible;<br \/>\n padding-bottom: calc(40 \/ 750 * 100vw);<br \/>\n }<\/p>\n<p> .meet-section#meet-section2 {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> .meet-progress-container {<br \/>\n display: none;<br \/>\n }<br \/>\n }<\/p>\n<div class=\"meet-wrapper\">\n<div class=\"meet-container\">\n<div class=\"meet-section\" id=\"meet-section1\">\n<div class=\"meet-content\">\n<h1 class=\"meet-title\">Meet Anywhere<br \/>Like A Pro<\/h1>\n<p class=\"meet-description\">Move your smart meetings anywhere, or enjoy a clutter-free wall-hung integration. Both way, the easy way to kick off a hybrid meeting.<\/p>\n<\/div>\n<div class=\"meet-image-container\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/open-space.png\" class=\"meet-image active\" id=\"meet-image1\" title=\"open-space\"> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/wall-mounted.png\" class=\"meet-image\" id=\"meet-image2\" title=\"wall-mounted\"><\/div>\n<\/div>\n<div class=\"meet-progress-container\">\n<div class=\"meet-progress-bar\">\n<div class=\"meet-progress\" id=\"meet-progress1\"><\/div>\n<\/div>\n<div class=\"meet-progress-bar meet-dot\">\n<div class=\"meet-progress\" id=\"meet-progress2\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>if (window.innerWidth >768) {<br \/>\n const wrapper = document.querySelector(‘.meet-wrapper’);<br \/>\n const container = document.querySelector(‘.meet-container’);<br \/>\n const image1 = document.getElementById(‘meet-image1’);<br \/>\n const image2 = document.getElementById(‘meet-image2’);<br \/>\n const progressBar1 = document.querySelector(‘.meet-progress-bar:first-child’);<br \/>\n const progressBar2 = document.querySelector(‘.meet-progress-bar:last-child’);<br \/>\n const progress1 = document.getElementById(‘meet-progress1’);<br \/>\n const progress2 = document.getElementById(‘meet-progress2’);<\/p>\n<p> \/\/ 修改滚动监听逻辑<br \/>\n window.addEventListener(‘scroll’, () => {<br \/>\n const rect = wrapper.getBoundingClientRect();<br \/>\n const progress = -rect.top \/ (rect.height – window.innerHeight);<\/p>\n<p> if (progress >= 0 && progress = 1) {<br \/>\n container.classList.remove(‘fixed’);<br \/>\n container.classList.add(‘end-position’);<br \/>\n } else {<br \/>\n container.classList.remove(‘fixed’);<br \/>\n container.classList.remove(‘end-position’);<br \/>\n resetAnimationState();<br \/>\n }<br \/>\n });<\/p>\n<p> \/\/ 修改观察器逻辑<br \/>\n const observer = new IntersectionObserver((entries) => {<br \/>\n entries.forEach(entry => {<br \/>\n const rect = wrapper.getBoundingClientRect();<br \/>\n const progress = -rect.top \/ (rect.height – window.innerHeight);<\/p>\n<p> if (entry.isIntersecting && progress >= 0 && progress = 1) {<br \/>\n container.classList.remove(‘fixed’);<br \/>\n container.classList.add(‘end-position’);<br \/>\n } else {<br \/>\n container.classList.remove(‘fixed’);<br \/>\n container.classList.remove(‘end-position’);<br \/>\n window.removeEventListener(‘scroll’, handleMeetScroll);<br \/>\n resetAnimationState();<br \/>\n }<br \/>\n });<br \/>\n }, {<br \/>\n threshold: [0, 1],<br \/>\n rootMargin: “0px”<br \/>\n });<\/p>\n<p> \/\/ 观察wrapper元素<br \/>\n observer.observe(wrapper);<\/p>\n<p> \/\/ 滚动处理函数<br \/>\n function handleMeetScroll() {<br \/>\n const wrapperRect = wrapper.getBoundingClientRect();<br \/>\n \/\/ 计算从元素顶部开始的滚动进度<br \/>\n const progress = -wrapperRect.top \/ (wrapperRect.height – window.innerHeight);<br \/>\n const scrollProgress = Math.max(0, Math.min(100, progress * 100));<\/p>\n<p> if (scrollProgress <= 40) {<br \/>\n const scale = 1 + (scrollProgress \/ 40) * 0.48;<br \/>\n image1.style.transform = `scale(${scale})`;<br \/>\n image1.classList.add('active');<br \/>\n image2.classList.remove('active');<br \/>\n image2.style.transform = 'scale(1)';<\/p>\n<p> progressBar1.classList.remove('dot');<br \/>\n progressBar2.classList.add('dot');<br \/>\n progress1.style.width = `${(scrollProgress \/ 40) * 100}%`;<br \/>\n progress2.style.width = '100%';<br \/>\n } else if (scrollProgress <= 60) {<br \/>\n image1.style.transform = 'scale(1.48)';<br \/>\n image1.classList.add('active');<br \/>\n image2.classList.remove('active');<br \/>\n image2.style.transform = 'scale(1)';<\/p>\n<p> progressBar1.classList.remove('dot');<br \/>\n progressBar2.classList.add('dot');<br \/>\n progress1.style.width = '100%';<br \/>\n progress2.style.width = '100%';<br \/>\n } else if (scrollProgress <= 100) {<br \/>\n const scale = 1 + ((scrollProgress – 60) \/ 40) * 0.48;<br \/>\n image2.style.transform = `scale(${scale})`;<br \/>\n image1.classList.remove('active');<br \/>\n image2.classList.add('active');<br \/>\n image1.style.transform = 'scale(1.48)';<\/p>\n<p> progressBar1.classList.add('dot');<br \/>\n progressBar2.classList.remove('dot');<br \/>\n progress1.style.width = '100%';<br \/>\n progress2.style.width = `${((scrollProgress – 60) \/ 40) * 100}%`;<br \/>\n }<br \/>\n }<\/p>\n<p> \/\/ 重置动画状态<br \/>\n function resetAnimationState() {<br \/>\n image1.style.transform = 'scale(1)';<br \/>\n image2.style.transform = 'scale(1)';<br \/>\n image1.classList.add('active');<br \/>\n image2.classList.remove('active');<br \/>\n progressBar1.classList.remove('dot');<br \/>\n progressBar2.classList.add('dot');<br \/>\n progress1.style.width = '0';<br \/>\n progress2.style.width = '100%';<br \/>\n }<br \/>\n } else {<br \/>\n \/\/ 移动端初始化图片状态<br \/>\n const image1 = document.getElementById('meet-image1');<br \/>\n const image2 = document.getElementById('meet-image2');<\/p>\n<p> image1.classList.add('active');<br \/>\n image2.classList.remove('active');<br \/>\n image1.style.transform = 'none';<br \/>\n image2.style.transform = 'none';<br \/>\n }<!--!doctype--><br \/>\n<\/article>\n<article id=\"temp_67eba86d2221a94aca6cf28e\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\" style=\"background-image: url(https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250425\/20250425085923737b3c.jpg)\">\n<div class=\"col\" data-diy=\",15%,15%\">\n<div class=\"txt\">\n<div class=\"title c-f40\">\n<h2 style=\"text-align: center\"><span style=\"font-weight: bold;font-size: 40px\"><br \/><\/span><\/h2>\n<p><span style=\"font-weight: bold;font-size: 40px\"><br \/><\/span><\/p>\n<h1><span style=\"font-size: 70px;font-family: ProductSans\">Pro View with More Eyes<\/span><\/h1>\n<\/p><\/div>\n<p> <small class=\"c-f18\"><br \/>\n <\/small><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">MeetingBoard Pro is equipped with a built-in <span style=\"font-family: articleFontRegular;font-size: 18px\">triple 50 MP camera<\/span>\u00a0system featuring\u00a0<\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">telephoto and wide-angle lenses,\u00a0<\/span><\/strong><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">ensuring crystal-clear details even from afar.\u00a0<\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">Wherever you’re seated, <span style=\"font-family: articleFontRegular;font-size: 18px\">you’ll always look your best.<\/span><\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><span style=\"font-family: articleFontRegular;font-size: 18px\"><br \/><\/span><\/span><\/strong><\/p>\n<p><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/1745571524126085604.png\" title=\"1745571524126085604\" alt=\"\u6444\u50cf\u5934\u76f8\u5173\u56fe\u6807.png\"><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\"10rem,,\">\n<p> <img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/20250425085908112190e.png\" class=\"photo\" title=\"20250425085908112190e\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_680b5d1656b7296cceb3b1e2\" class=\"temp-page1\">\n .pro-5-container-totle {<br \/>\n background-image: url(‘https:\/\/www.yealink.com\/website-service\/download\/网页-2_06_副本.webp’);<br \/>\n padding: 10%;<br \/>\n font-size: 18px;<br \/>\n background-size: cover;<br \/>\n}<\/p>\n<p>.pro-5-container {<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n justify-content: space-between;<br \/>\n margin: 40px 0;<br \/>\n background-size: cover;<br \/>\n background-position: center;<br \/>\n padding: 20px;<br \/>\n color: #ffffff;<br \/>\n flex-wrap: wrap;<br \/>\n}<\/p>\n<p>.pro-5-text, .pro-5-image {<br \/>\n max-width: 47%;<br \/>\n line-height: 1.5;<br \/>\n padding: 20px;<br \/>\n letter-spacing: 1px;<br \/>\n border-radius: 10px;<br \/>\n}<\/p>\n<p>.pro-5-image img {<br \/>\n width: 100%;<br \/>\n height: auto;<br \/>\n display: block;<br \/>\n}<\/p>\n<p>@media (max-width: 768px) {<br \/>\n .pro-5-text, .pro-5-image {<br \/>\n max-width: 100%;<br \/>\n }<br \/>\n}<\/p>\n<div class=\"pro-5-container-totle c-f18\">\n<div class=\"pro-5-container\">\n<div class=\"pro-5-text\">The <strong>On-device IntelliFocus<\/strong> 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.<\/div>\n<div class=\"pro-5-image\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/intellifocus_e589afe69cac.webp\" alt=\"IntelliFocus\" title=\"intellifocus_e589afe69cac\"><\/div>\n<\/div>\n<div class=\"pro-5-container\">\n<div class=\"pro-5-image\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/video-fence_e589afe69cac.webp\" alt=\"Video Fence\" title=\"video-fence_e589afe69cac\"><\/div>\n<div class=\"pro-5-text\">The <strong>Video Fence<\/strong> 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.<\/div>\n<\/div>\n<\/div>\n<\/article>\n<article id=\"temp_680b514812d7111050392509\" class=\"temp-page23 temp-common\">\n<div class=\"mod_audio_contrast audio_bd_box\" style=\"background-image: url(http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/2025042906301111005dc.jpg)\">\n <img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/2025042906301111005dc.jpg\" title=\"2025042906301111005dc\"><\/p>\n<div class=\"res_ope_box\" style=\"right: 14.95%\">\n<p> <strong><\/p>\n<div class=\"mod_aud_name c-f40\">\n<h2><span style=\"font-family: ProductSans\">Pro Sound Designed\u00a0for Meetings<\/span><\/h2>\n<\/p><\/div>\n<p> <\/strong><\/p>\n<div class=\"mod_aud_info c-f18\">\n<p><span style=\"font-family: Manrope3;font-size: 16px\">MeetingBoard Pro delivers immersive stereo sound with powerful 36W speakers, ensuring rich audio coverage for large meeting spaces. It’s 16-MEMS mic arrays, enhanced by AI, provide crystal-clear conversations and full-duplex coverage up to 12 meters, guaranteeing every voice is heard with precision.<\/span><\/p>\n<\/p><\/div>\n<div class=\"contrast_box\">\n<div class=\"btn_play_box\">\n<div class=\"btn_play\">\n <span class=\"icon_box\"><br \/>\n <img decoding=\"async\" class=\"pause_img\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/btn_p.png\" title=\"btn_p\"><br \/>\n <img decoding=\"async\" class=\"play_img\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/btn_play.png\" title=\"btn_play\"><br \/>\n <\/span><\/p>\n<div>\n <audio id=\"aud_01\" class=\"aud_box aud_dispose\" src=\"https:\/\/www.yealink.com\/website-service\/attachment\/product\/other\/20250428\/2025042802064344342f1.MP3\"><\/audio><br \/>\n <audio id=\"aud_02\" class=\"aud_box aud_dispose_no\" src=\"https:\/\/www.yealink.com\/website-service\/attachment\/product\/other\/20250428\/2025042802065463891d8.MP3\"><\/audio>\n <\/div>\n<\/p><\/div>\n<p> <span class=\"hint_text\">Play<\/span>\n <\/div>\n<p> <span><\/span><\/p>\n<div class=\"btn_cut_box\">\n Original<\/p>\n<div class=\"btn_cut\">\n <span><\/span>\n <\/div>\n<p> Pro Sound\n <\/p><\/div>\n<\/p><\/div>\n<div class=\"audio_progress_box\">\n<div class=\"audio_progress\">\n <span class=\"timeline\"><\/span>\n <\/div>\n<div class=\"audio_pro_show\">\n <span class=\"audio_pro_current\">00:00<\/span>\/<br \/>\n <span class=\"audio_pro_total\">00:00<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_67eba86d2221a94aca6cf293\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\">\n<div class=\"col\" data-diy=\",16%,16%\">\n<div class=\"txt\">\n<div class=\"title c-f40\">\n<h2><\/h2>\n<h1><span style=\"font-family: ProductSans;font-size: 70px\">Pro Core, Flexibility Secured<\/span><\/h1>\n<\/p><\/div>\n<p> <small class=\"c-f18\"><br \/>\n <\/small><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">MeetingBoard Pro features\u00a0<span>Android solution or Windows solution<\/span>,<\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">letting you choose between\u00a0<strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><span>Windows\u00a0<\/span><\/span><\/strong><\/span><\/strong><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">and <span>Android <\/span><\/span><\/strong><strong><span style=\"font-family: articleFontRegular;font-size: 18px\">to suit your needs.<\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><br \/><\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><br \/><\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/1745826666589001605.png\" title=\"1745826666589001605\" alt=\"\u53cc\u7cfb\u7edf.png\"><\/span><\/strong><\/p>\n<p><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"><br \/><\/span><\/strong><\/p>\n<p><span style=\"font-size: 12px;font-family: ProductSans\">*MDEP stands for Microsoft Device Ecosystem Platform. MeetingBoard Pro will support MDEP soon.\u00a0<\/span><strong><span style=\"font-family: articleFontRegular;font-size: 18px\"> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span><\/strong><\/p>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\",20%,20%\">\n<p> <img decoding=\"async\" src=\"\" alt=\"\" class=\"photo\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_680b010956b7296cceb3b0e8\" class=\"temp-page1\">\n .iwb-pen-container img {<br \/>\n width: 100%;<br \/>\n height: auto;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc {<br \/>\n display: block;<br \/>\n position: relative;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-left {<br \/>\n position: absolute;<br \/>\n left: 14vw;<br \/>\n top: 41vh;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-title {<br \/>\n font-size: 0.7rem;<br \/>\n background: linear-gradient(90deg, #b7956e, #cbb39f);<br \/>\n -webkit-background-clip: text;<br \/>\n -webkit-text-fill-color: transparent;<br \/>\n background-clip: text;<br \/>\n text-fill-color: transparent;;<br \/>\n margin-bottom: 0.4rem;<br \/>\n font-weight: bold;<br \/>\n font-family: ProductSans;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-dec {<br \/>\n font-size: 0.2rem;<br \/>\n color: #9b9b9b;<br \/>\n width: 5.22rem;<br \/>\n line-height: 2;<br \/>\n font-weight: 600;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-dec span {<br \/>\n color: #ffffff;<br \/>\n font-size: 0.18rem;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-tip {<br \/>\n margin-top:0.2rem;<br \/>\n font-size: 0.15rem;<br \/>\n color: #9b9b9b;<br \/>\n width: 4.5rem;<br \/>\n line-height: 2;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n position: absolute;<br \/>\n right: 9vw;<br \/>\n top: 43vh;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right .word-line {<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right .word-element {<br \/>\n font-size: 0.33rem;<br \/>\n color: #ad886b;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right .word-element.center {<br \/>\n width: 1.7rem;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right .word-split {<br \/>\n margin: 0 0.3rem;<br \/>\n height: 0.36rem;<br \/>\n width: 1px;<br \/>\n background-color: #ad886b;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> @media (max-width: 1800px) {<br \/>\n .iwb-pen-container .is-pc .word-left {<br \/>\n top: 35vh;<br \/>\n left: 12vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n right: 7vw;<br \/>\n top: 36vh;<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 1600px) {<br \/>\n .iwb-pen-container .is-pc .word-left {<br \/>\n top: 27vh;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n top: 29vh;<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 1300px) {<br \/>\n .iwb-pen-container .is-pc .word-left {<br \/>\n top: 20vh;<br \/>\n left: 10vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n right: 6vw;<br \/>\n top: 21vh;<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 1000px) {<br \/>\n .iwb-pen-container .is-pc .word-left {<br \/>\n top: 19vh;<br \/>\n left: 13vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n right: 10vw;<br \/>\n top: 19vh;<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 900px) {<br \/>\n .iwb-pen-container .is-pc .word-left {<br \/>\n top: 12vh;<br \/>\n left: 12vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-pc .word-right {<br \/>\n right: 6vw;<br \/>\n top: 12vh;<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 800px) {<br \/>\n .iwb-pen-container .is-pc {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile {<br \/>\n display: block;<br \/>\n position: relative;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top {<br \/>\n position: absolute;<br \/>\n top: 24vw;<br \/>\n text-align: center;<br \/>\n transform: translateX(-50%);<br \/>\n left: 50%;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-title {<br \/>\n font-size: 9vw;<br \/>\n background: linear-gradient(90deg, #b7956e, #cbb39f);<br \/>\n -webkit-background-clip: text;<br \/>\n -webkit-text-fill-color: transparent;<br \/>\n background-clip: text;<br \/>\n text-fill-color: transparent;;<br \/>\n margin-bottom: 0.4rem;<br \/>\n margin-bottom: 7vw;<br \/>\n font-weight: 600;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-dec {<br \/>\n font-size: 3vw;<br \/>\n color: #9b9b9b;<br \/>\n width: 85vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-tip {<br \/>\n margin-top: 3.1vh;<br \/>\n font-size: 2vw;<br \/>\n color: #9b9b9b;<br \/>\n width: 85vw;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-dec span {<br \/>\n font-size: 3vw;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-element {<br \/>\n margin-top: 14vw;<br \/>\n display: flex;<br \/>\n flex-wrap: wrap;<br \/>\n justify-content: center;<br \/>\n }<\/p>\n<p> .iwb-pen-container .is-mobile .word-top .word-element .element-title {<br \/>\n width: 50%;<br \/>\n padding-left: 11svw;<br \/>\n font-size: 4vw;<br \/>\n color: #ad886b;<br \/>\n text-align: left;<br \/>\n line-height: 2.2;<br \/>\n }<br \/>\n }<\/p>\n<div class=\"iwb-pen-container\">\n<div class=\"is-pc\">\n<div class=\"word-left\">\n<div class=\"word-title\">Free Creation<\/div>\n<div class=\"word-dec\">The MeetingBoard Pro’s <span>premium inking<\/span>, collaborative diagrams, and rich content <span>drive creativity<\/span> and productivity with <span>seamless real-time<\/span> collaboration for brainstorming and planning.<\/div>\n<\/div>\n<div class=\"word-right\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/e6898be58699e983a8e58886e59bbee6a0872028329.png\" alt=\"\u7b14\u5c3e\u64e6\u62ed\" width=\"555\" height=\"385\" border=\"0\" vspace=\"0\" title=\"\u7b14\u5c3e\u64e6\u62ed\" style=\"width: 5.55rem;height: 3.85rem\"><\/div>\n<p><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/e7bd91e9a1b5-2_09.jpg\" title=\"e7bd91e9a1b5-2_09\"><\/div>\n<div class=\"is-mobile\">\n<div class=\"word-top\">\n<div class=\"word-title\">Free Creation<\/div>\n<div class=\"word-dec\">The MeetingBoard Pro’s <span>premium inking<\/span>, collaborative diagrams, and rich content <span>drive creativity<\/span> and productivity with <span>seamless real-time<\/span> collaboration for brainstorming and planning.<\/div>\n<div class=\"word-element\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/e6898be58699e983a8e58886e59bbee6a0872028329.png\" alt=\"\u7b14\u5c3e\u64e6\u62ed\" width=\"555\" height=\"385\" border=\"0\" vspace=\"0\" title=\"\u7b14\u5c3e\u64e6\u62ed\" style=\"width: 5.55rem;height: 3.85rem\"><\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/pen-mobile.jpg\" title=\"pen-mobile\"><\/div>\n<\/div>\n<\/article>\n<article id=\"temp_67eba86d2221a94aca6cf29e\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\">\n<div class=\"col\" data-diy=\",,\">\n<div class=\"txt\">\n<div class=\"title c-f40\">\n<h2><\/h2>\n<h2><\/h2>\n<h2><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/1745572500119005207.png\" title=\"1745572500119005207\" alt=\"\u5206\u4eab\u56fe\u6807.png\"><\/h2>\n<h2>Share Ideas<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\"5rem,8%,8%\">\n<p> <img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/202504280152296517b08.png\" class=\"photo\" title=\"202504280152296517b08\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_680edfae12d71110503925e7\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\" style=\"background-image: url(https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250428\/202504280154375586fdf.jpg)\">\n<div class=\"col\" data-diy=\",10%,\">\n<div class=\"txt\">\n<p> <small class=\"c-f18\"><br \/>\n <\/small><\/p>\n<p style=\"text-align: left\"><span style=\"font-size: 12px;font-family: ProductSans\">*PA20 is not available for the United States market.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\",,\">\n<p> <img decoding=\"async\" src=\"\" alt=\"\" class=\"photo\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_67eba86d2221a94aca6cf2a4\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\" style=\"background-image: url(https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250425\/20250425092018258f798.jpg)\">\n<div class=\"col\" data-diy=\",20%,20%\">\n<div class=\"txt\">\n<div class=\"title c-f40\">\n<h1><span style=\"font-size: 70px;font-family: ProductSans\"><br \/><\/span><\/h1>\n<h1><span style=\"font-size: 70px;font-family: ProductSans\">Show Anything<\/span><\/h1>\n<\/p><\/div>\n<p> <small class=\"c-f18\"><br \/>\n <\/small><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\">The MeetingBoard Pro features a stunning <span style=\"font-family: Manrope3\">4K multi-touch LCD screen<\/span> available in <span style=\"font-family: Manrope3\">65, 75, or 86 inches<\/span>, delivering vibrant colors and precise lighting. With <span style=\"font-family: Manrope3\">anti-glare coatings<\/span>, it guarantees excellent readability and a seamless, natural touchscreen experience.<\/span><\/strong><\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\",,\">\n<p> <img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/20250425092030583b349.png\" class=\"photo\" title=\"20250425092030583b349\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_67eba86e2221a94aca6cf2a5\" class=\"only-temp4 temp-page4 temp-common\">\n<div class=\"row\" style=\"background-image: url(https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250425\/20250425093130867633f.jpg)\">\n<div class=\"col\" data-diy=\",25%,25%\">\n<div class=\"txt\">\n<div class=\"title c-f40\">\n<h1><span style=\"font-family: ProductSans;font-size: 50px\"><strong><br \/><\/strong><\/span><\/h1>\n<h1><span style=\"font-family: ProductSans;font-size: 70px\"><strong>Meet Your Way<\/strong><\/span><\/h1>\n<\/p><\/div>\n<p> <small class=\"c-f18\"><br \/>\n <\/small><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\">Yealink MeetingBoard Pro supports <span style=\"font-size: 18px;font-family: Manrope3\">diverse cloud meeting platforms<\/span>.\u00a0<\/span><\/strong><\/span><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\">No matter which platform you use, start your meeting right now!<\/span><\/strong><\/span><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\"><br \/><\/span><\/strong><\/span><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\"><br \/><\/span><\/strong><\/span><\/p>\n<p><span style=\"font-size: 18px\"><strong><span style=\"font-family: Manrope3\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/1745573392207071392.png\" title=\"1745573392207071392\" alt=\"\u5e73\u53f0.png\"><\/span><\/strong><\/span><\/p>\n<p><span style=\"font-family: Manrope3;font-size: 16px\"><\/span><\/p>\n<div class=\"f-center\" style=\"text-align:\" data-btn-diy=\"1\">\n <a class=\"z-btn btn-diy\" data-img-width=\"289\" data-img-height=\"55\" data-select-url=\"https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250425\/20250425093106790d377.png\" data-unselect-url=\"https:\/\/www.yealink.com\/website-service\/attachment\/product\/image\/20250425\/202504250931031712cd8.png\" href=\"https:\/\/www.yealink.com\/en\/onepage\/generalmode\"><\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col\" data-diy=\",,\">\n<p> <img decoding=\"async\" src=\"\" alt=\"\" class=\"photo\"><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<article id=\"temp_680da34756b7296cceb3b222\" class=\"temp-page1\">\n .editor-switch-pic-mounting-container .mounting-container {<br \/>\n position: relative;<br \/>\n background-size: cover;<br \/>\n background-position: center center;<br \/>\n background-repeat: no-repeat;<br \/>\n transition: background-image 0.5s ease 0s;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-wiring-pic-container {<br \/>\n position: absolute;<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n background-size: cover;<br \/>\n background-position: center center;<br \/>\n background-repeat: no-repeat;<br \/>\n transition: background-image 0.5s ease 0s;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-container {<br \/>\n position: absolute;<br \/>\n right: 0.12rem;<br \/>\n width: 0.68rem;<br \/>\n top: 50%;<br \/>\n transform: translate(-50%, -50%);<br \/>\n padding-top: 64px;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common {<br \/>\n width: 100%;<br \/>\n background-color: #000000;<br \/>\n border-radius: 34px;<br \/>\n opacity: 0.8;<br \/>\n padding-top: 0.4rem;<br \/>\n padding-bottom: 0.4rem;<br \/>\n margin-bottom: 0.08rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common.switch-common {<br \/>\n padding-top: 0.2rem;<br \/>\n padding-bottom: 0.2rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .switch-title {<br \/>\n height: 0.42rem;<br \/>\n line-height: 1.5;<br \/>\n text-align: center;<br \/>\n color: #dcdcdc;<br \/>\n margin: 0.1rem 0 0.2rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .switch-container {<br \/>\n width: 0.6rem;<br \/>\n height: 0.39rem;<br \/>\n margin: auto;<br \/>\n background-image: linear-gradient(#08b286, #08b286), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);<br \/>\n background-blend-mode: normal, normal, normal;<br \/>\n border-radius: 20px;<br \/>\n padding: 0 0.05rem;<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n cursor: pointer;<br \/>\n justify-content: end;<br \/>\n }<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-common .switch-container.close-switch {<br \/>\n justify-content: start;<br \/>\n background-image: linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);<\/p>\n<p> }<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-common.switch-common .switch-container.close-switch {<br \/>\n justify-content: start;<br \/>\n background-image: linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#8e8e8e, #8e8e8e), linear-gradient(#ffffff, #ffffff);<\/p>\n<p> }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .switch-container .switch-button {<br \/>\n width: 0.28rem;<br \/>\n height: 0.28rem;<br \/>\n line-height: 0.39rem;<br \/>\n background-color: #ffffff;<br \/>\n border-radius: 50%;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-title {<br \/>\n height: 0.42rem;<br \/>\n line-height: 0.42rem;<br \/>\n color: #dcdcdc;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block.is-select {<br \/>\n background-color: #ffffff;<br \/>\n border-radius: 21px;<br \/>\n width: 90%;<br \/>\n margin: auto;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block.is-select .menu-title {<br \/>\n color: #1b1b1b;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common.switch-common .menu-block:not(:last-child) {<br \/>\n margin-bottom: 0;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block {<br \/>\n text-align: center;<br \/>\n width: 100%;<br \/>\n cursor: pointer;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block.is-select .menu-pic {<br \/>\n background-color: #ffffff;<\/p>\n<p> }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block.is-select .menu-dec {<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block:not(:last-child) {<br \/>\n margin-bottom: 0.25rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic {<br \/>\n width: 0.55rem;<br \/>\n height: 0.55rem;<br \/>\n background-color: #9c9c9c;<br \/>\n border-radius: 50%;<br \/>\n margin: auto;<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n justify-content: center;<\/p>\n<p> }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic img {<br \/>\n width: 70%;<br \/>\n height: 70%;<\/p>\n<p> }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-dec {<br \/>\n color: #dcdcdc;<br \/>\n }<\/p>\n<p> @media screen and (max-width: 800px) {<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-container {<br \/>\n width: 1rem;<br \/>\n right: 0;<br \/>\n }<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-common .menu-title {<br \/>\n height: 0.6rem;<br \/>\n line-height: 0.6rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .menu-block .menu-pic {<br \/>\n width: 0.8rem;<br \/>\n height: 0.8rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common.switch-common {<br \/>\n padding-top: 0.3rem;<br \/>\n padding-bottom: 0.3rem;<br \/>\n }<\/p>\n<p> .editor-switch-pic-mounting-container .mounting-menu-common .switch-container {<br \/>\n width: 0.8rem;<br \/>\n height: 0.5rem;<br \/>\n }<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-common .switch-title {<br \/>\n margin-bottom: 0.1rem;<br \/>\n }<br \/>\n .editor-switch-pic-mounting-container .mounting-menu-common .switch-container .switch-button {<br \/>\n width: 0.4rem;<br \/>\n height: 0.4rem;<br \/>\n }<\/p>\n<p> }<\/p>\n<div class=\"editor-switch-pic-mounting-container\">\n<div class=\"one-screen-style mounting-container\">\n<div class=\"mounting-wiring-pic-container\"><\/div>\n<div class=\"mounting-menu-container\">\n<div class=\"mounting-menu-common\">\n<div class=\"menu-block is-select\" data-category=\"position\" data-value=\"1\">\n<div class=\"menu-pic\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/installation-01.svg\" alt=\"SVG Image\" title=\"installation-01\"><\/div>\n<div class=\"menu-dec c-f14\">Wall<\/div>\n<\/div>\n<div class=\"menu-block\" data-category=\"position\" data-value=\"2\">\n<div class=\"menu-pic\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/installation-02.svg\" alt=\"SVG Image\" title=\"installation-02\"><\/div>\n<div class=\"menu-dec c-f14\">Floor<\/div>\n<\/div>\n<\/div>\n<div class=\"mounting-menu-common wiring-module-container\">\n<div class=\"switch-container\" data-switch=\"1\">\n<div class=\"switch-button\"><\/div>\n<\/div>\n<div class=\"switch-title c-f14\">Extend<br \/>A\/V<\/div>\n<div class=\"switch-container\" data-switch=\"2\">\n<div class=\"switch-button\"><\/div>\n<\/div>\n<div class=\"switch-title c-f14\">Meeting Control<\/div>\n<div class=\"switch-container\" data-switch=\"3\">\n<div class=\"switch-button\"><\/div>\n<\/div>\n<div class=\"switch-title c-f14\">Room Schedule<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>$(function () {<br \/>\n const picRelationList = [<br \/>\n { coordinate: [1, ”], url: ‘https:\/\/www.yealink.com\/website-service\/download\/wall.jpg’, wiringUrl: ” },<br \/>\n { coordinate: [2, ”], url: ‘https:\/\/www.yealink.com\/website-service\/download\/floor.jpg’, wiringUrl: ” },<br \/>\n { coordinate: [1, ‘1’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/wall.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/wall-ExtendAV.jpg’ },<br \/>\n { coordinate: [1, ‘2’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/wall.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/wall-MeetingControl.jpg’ },<br \/>\n { coordinate: [1, ‘3’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/wall.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/wall-RoomManagement.jpg’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<\/p>\n<p> { coordinate: [2, ‘1’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/floor.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/floor-ExtendAV.jpg’ },<br \/>\n { coordinate: [2, ‘2’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/floor.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/floor-MeetingControl.jpg’ },<br \/>\n { coordinate: [2, ‘3’], url: ‘https:\/\/www.yealink.com\/website-service\/download\/floor.jpg’, wiringUrl: ‘https:\/\/www.yealink.com\/website-service\/download\/floor-RoomManagement.jpg’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<br \/>\n { 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’ },<\/p>\n<p> ];<\/p>\n<p> function computedWidthAndHeigh() {<br \/>\n window.winwidth = $(window).width();<br \/>\n window.winheight = $(window).height();<br \/>\n let screenHeight = winwidth * 938 \/ 1920;<br \/>\n if (Math.abs(winwidth \/ winheight – 1920 \/ 938) 0) {<br \/>\n if (window.innerWidth {<br \/>\n $(element).innerHeight(’70vh’);<br \/>\n });<br \/>\n } else {<br \/>\n elements.each((index, element) => {<br \/>\n $(element).innerHeight(screenHeight);<br \/>\n });<br \/>\n }<br \/>\n }<br \/>\n }<\/p>\n<p> $(window).resize(function () {<br \/>\n computedWidthAndHeigh();<br \/>\n });<\/p>\n<p> $(‘.editor-switch-pic-mounting-container .menu-block’).click((element) => {<br \/>\n const currentClickElement = $(element.currentTarget);<br \/>\n const category = currentClickElement.data(‘category’);<br \/>\n const value = currentClickElement.data(‘value’);<br \/>\n $(`.editor-switch-pic-mounting-container .menu-block[data-category=”${category}”]`).removeClass(‘is-select’);<br \/>\n $(`.editor-switch-pic-mounting-container .menu-block[data-value=”${value}”][data-category=”${category}”]`).addClass(‘is-select’);<\/p>\n<p> fillPic();<br \/>\n showWiring();<br \/>\n });<\/p>\n<p> $(‘.editor-switch-pic-mounting-container .switch-container’).click((element) => {<br \/>\n const currentSwitch = $(element.currentTarget);<br \/>\n currentSwitch.toggleClass(‘close-switch’);<br \/>\n showWiring();<br \/>\n });<\/p>\n<p> function getCurrentSelect() {<br \/>\n const selectPosition = $(‘.editor-switch-pic-mounting-container .menu-block.is-select[data-category=”position”]’).data(‘value’);<br \/>\n const switches = $(‘.editor-switch-pic-mounting-container .switch-container:not(.close-switch)’).map((index, element) => {<br \/>\n return $(element).data(‘switch’);<br \/>\n }).get();<br \/>\n return [selectPosition, switches.sort().join(‘,’)];<br \/>\n }<\/p>\n<p> function showWiring() {<br \/>\n const coordinate = getCurrentSelect();<br \/>\n const item = picRelationList.find((item) => JSON.stringify(item.coordinate) === JSON.stringify(coordinate));<br \/>\n if (item) {<br \/>\n $(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, `url(${item.wiringUrl})`);<br \/>\n } else {<br \/>\n $(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, ”);<br \/>\n }<br \/>\n }<\/p>\n<p> function fillPic() {<br \/>\n const coordinate = getCurrentSelect();<br \/>\n const item = picRelationList.find((item) => JSON.stringify(item.coordinate) === JSON.stringify(coordinate));<br \/>\n if (item) {<br \/>\n $(‘.editor-switch-pic-mounting-container .mounting-container’).css(‘background-image’, `url(${item.url})`);<br \/>\n } else {<br \/>\n $(‘.editor-switch-pic-mounting-container .mounting-container’).css(‘background-image’, ”);<br \/>\n }<br \/>\n }<\/p>\n<p> computedWidthAndHeigh();<br \/>\n fillPic();<br \/>\n $(“.editor-switch-pic-mounting-container .switch-container”).addClass(‘close-switch’);<br \/>\n $(“.editor-switch-pic-mounting-container .mounting-wiring-pic-container”).css(“background-image”, ”);<br \/>\n});<br \/>\n<\/article>\n<article id=\"temp_680da47c12d71110503925bc\" class=\"temp-page1\">\n <title>\u4f1a\u8bae\u5ba4\u63a7\u5236\u9762\u677f<\/title>.panel-wrapper {<br \/>\n position: relative;<br \/>\n display: flex;<br \/>\n height: 100vh;<br \/>\n margin: 0;<br \/>\n }<\/p>\n<p> .panel-left-panel {<br \/>\n width: 520px;<br \/>\n background-color: #1b1b1b;<br \/>\n color: #fff;<br \/>\n }<\/p>\n<p> .panel-menu-item {<br \/>\n box-sizing: border-box;<br \/>\n padding: 20px 0 20px 138px;<br \/>\n cursor: pointer;<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n justify-content: space-between;<br \/>\n border-bottom: 1px solid rgba(255,255,255,0.1);<br \/>\n color: #9b9b9b;<br \/>\n }<\/p>\n<p> .panel-menu-item.active {<br \/>\n height: 221px;<br \/>\n color: #ffffff;<br \/>\n background-color: #0f0f0f;<br \/>\n }<\/p>\n<p> .panel-menu-item.active >.panel-menu-text p {<br \/>\n display: block;<br \/>\n }<\/p>\n<p> .panel-menu-item.active > .panel-menu-icon {<br \/>\n display: block;<br \/>\n }<\/p>\n<p> .panel-menu-text {<br \/>\n flex: 1;<br \/>\n }<\/p>\n<p> .panel-menu-text h3 {<br \/>\n margin: 0;<br \/>\n font-family: Manrope3-ExtraBold;<br \/>\n font-size: 24px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 30px;<br \/>\n letter-spacing: 0px;<br \/>\n }<\/p>\n<p> .panel-menu-text p {<br \/>\n margin: 13px 0 0 0;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 16px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 14px;<br \/>\n letter-spacing: 0px;<br \/>\n display: none;<br \/>\n }<\/p>\n<p> .panel-menu-icon {<br \/>\n display: none;<br \/>\n position: relative;<br \/>\n width: 100px;<br \/>\n height: 57px;<br \/>\n img {<br \/>\n top: -10px;<br \/>\n width: 55px;<br \/>\n height: 44px;<br \/>\n position: absolute;<br \/>\n }<br \/>\n div {<br \/>\n position: absolute;<br \/>\n bottom: 0;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 14px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 14px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n }<br \/>\n }<\/p>\n<p> .panel-main-content {<br \/>\n flex: 1;<br \/>\n position: relative;<br \/>\n overflow: hidden;<br \/>\n background-color: #000;<br \/>\n }<\/p>\n<p> .panel-main-content img {<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n object-fit: cover;<br \/>\n }<\/p>\n<p> .panel-right-panel {<br \/>\n width: 217px;<br \/>\n background-color: #000000;<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n align-items: center;<br \/>\n padding: 15px 0;<br \/>\n position: absolute;<br \/>\n right: 0;<br \/>\n top: 0;<br \/>\n bottom: 0;<br \/>\n gap: 29px;<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n justify-content: center;<br \/>\n opacity: 0.76;<br \/>\n }<\/p>\n<p> .panel-control-item {<br \/>\n display: none; \/* 默认隐藏所有控制图标 *\/<br \/>\n flex-direction: column;<br \/>\n align-items: center;<br \/>\n gap: 4px;<br \/>\n transition: transform 0.3s ease;<br \/>\n text-decoration: none;<br \/>\n }<br \/>\n.panel-control-item:hover {<br \/>\n transform: scale(1.05);}<\/p>\n<p> .panel-control-text {<br \/>\n text-align: center;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 14px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 20px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .panel-underline {<br \/>\n text-decoration: none;<br \/>\n }<\/p>\n<p> .panel-control-button {<br \/>\n width: 48px;<br \/>\n height: 48px;<br \/>\n background-color: white;<br \/>\n border-radius: 50%;<br \/>\n display: flex;<br \/>\n align-items: center;<br \/>\n justify-content: center;<br \/>\n cursor: pointer;<br \/>\n transition: all 0.3s ease;<br \/>\n }<\/p>\n<p> .panel-control-button:hover {<br \/>\n background-color: #f0f0f0;<br \/>\n }<\/p>\n<p> .control-button img {<br \/>\n width: 20px;<br \/>\n height: 20px;<br \/>\n }<\/p>\n<p> .control-text {<br \/>\n text-align: center;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 14px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 20px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .panel-room-image {<br \/>\n width: 100%;<br \/>\n height: 100%;<br \/>\n object-fit: cover;<br \/>\n position: absolute;<br \/>\n top: 0;<br \/>\n left: 0;<br \/>\n opacity: 0;<br \/>\n transition: opacity 0.3s ease;<br \/>\n display: block;<br \/>\n }<\/p>\n<p> .panel-room-image.active {<br \/>\n opacity: 1;<br \/>\n }<\/p>\n<p> \/* PC端隐藏 panel-room-info – 移动到最上面 *\/<br \/>\n .panel-room-info {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> \/* 移动端适配 *\/<br \/>\n @media screen and (max-width: 768px) {<br \/>\n .panel-wrapper {<br \/>\n flex-direction: column;<br \/>\n height: auto;<br \/>\n min-height: 100vh;<br \/>\n background-color: #000;<br \/>\n }<\/p>\n<p> .panel-left-panel {<br \/>\n width: 100%;<br \/>\n height: auto;<br \/>\n display: grid;<br \/>\n grid-template-columns: repeat(2, 1fr);<br \/>\n gap: 10px;<br \/>\n background-color: #000;<br \/>\n order: 1;<br \/>\n padding: 0;<br \/>\n margin-bottom: 14px;<br \/>\n margin-top: 104px;<br \/>\n }<\/p>\n<p> .panel-menu-item {<br \/>\n padding: 16px;<br \/>\n height: auto;<br \/>\n height: 50px;<br \/>\n border: none;<br \/>\n background-color: #1b1b1b;<br \/>\n justify-content: center;<br \/>\n text-align: center;<br \/>\n }<\/p>\n<p> .panel-menu-item.active {<br \/>\n height: 50px;<br \/>\n background-color: #9c9c9c;<br \/>\n }<\/p>\n<p> .panel-menu-text {<br \/>\n text-align: center;<br \/>\n padding: 0;<br \/>\n }<\/p>\n<p> .panel-menu-text h3 {<br \/>\n font-size: 16px;<br \/>\n line-height: 20px;<br \/>\n margin: 0;<br \/>\n text-align: center;<br \/>\n }<\/p>\n<p> \/* 隐藏PC端不需要的元素 *\/<br \/>\n .panel-menu-text p,<br \/>\n .panel-menu-icon {<br \/>\n display: none !important;<br \/>\n }<\/p>\n<p> \/* 主要内容区域 *\/<br \/>\n .panel-main-content {<br \/>\n order: 2;<br \/>\n height: 250px;<br \/>\n position: relative;<br \/>\n flex: none;<br \/>\n }<\/p>\n<p> \/* 房间信息区域 – 确保这段代码在媒体查询中 *\/<br \/>\n .panel-room-info {<br \/>\n display: flex !important; \/* 添加 !important 确保覆盖默认样式 *\/<br \/>\n order: 3;<br \/>\n align-items: center;<br \/>\n justify-content: space-between;<br \/>\n margin: 0 24px;<br \/>\n background-color: #000;<br \/>\n color: #fff;<br \/>\n height: 95px;<br \/>\n border-bottom: 1px solid #9b9b9b;<br \/>\n }<\/p>\n<p> .panel-room-info-title {<br \/>\n gap: 8px;<br \/>\n color: #fff;<br \/>\n text-align: center;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 12px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 12px;<br \/>\n letter-spacing: 0px;<br \/>\n }<\/p>\n<p> .panel-room-info-title img {<br \/>\n width: 85px;<br \/>\n height: 55px;<br \/>\n }<\/p>\n<p> \/* 右侧面板改为底部列表 *\/<br \/>\n .panel-right-panel {<br \/>\n position: static;<br \/>\n width: 100%;<br \/>\n order: 4;<br \/>\n padding: 20px;<br \/>\n box-sizing: border-box;<br \/>\n display: grid;<br \/>\n grid-template-columns: repeat(3, 1fr);<br \/>\n gap: 16px;<br \/>\n background-color: #000;<br \/>\n flex-direction: row;<br \/>\n flex-wrap: wrap;<br \/>\n justify-content: space-around;<br \/>\n opacity: 1;<br \/>\n }<\/p>\n<p> .panel-control-item {<br \/>\n width: auto;<br \/>\n gap: 8px;<br \/>\n margin: 0;<br \/>\n }<\/p>\n<p> .panel-control-item img {<br \/>\n width: 60px;<br \/>\n height: 60px;<br \/>\n object-fit: contain;<br \/>\n }<\/p>\n<p> .panel-control-text {<br \/>\n text-align: center;<br \/>\n font-family: Manrope3-Regular;<br \/>\n font-size: 10px;<br \/>\n font-weight: normal;<br \/>\n font-stretch: normal;<br \/>\n line-height: 10px;<br \/>\n letter-spacing: 0px;<br \/>\n color: #ffffff;<br \/>\n }<\/p>\n<p> .panel-underline {<br \/>\n text-decoration: underline;<br \/>\n }<\/p>\n<p> \/* 显示移动端专属元素 *\/<br \/>\n .mobile-only {<br \/>\n display: flex !important;<br \/>\n flex-direction: column;<br \/>\n align-items: center;<br \/>\n }<br \/>\n }<\/p>\n<p> \/* PC端隐藏mobile-only元素 *\/<br \/>\n .mobile-only {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> \/* 移动端样式 *\/<br \/>\n @media screen and (max-width: 768px) {<br \/>\n .mobile-only {<br \/>\n display: flex;<br \/>\n }<\/p>\n<p> .right-panel {<br \/>\n position: static;<br \/>\n width: 100%;<br \/>\n order: 4;<br \/>\n padding: 20px;<br \/>\n box-sizing: border-box;<br \/>\n display: grid;<br \/>\n grid-template-columns: repeat(3, 1fr);<br \/>\n gap: 20px;<br \/>\n background-color: #000;<br \/>\n }<\/p>\n<p> .control-item {<br \/>\n width: 100%;<br \/>\n gap: 0;<br \/>\n }<br \/>\n }<\/p>\n<div class=\"panel-wrapper\"><!-- 左侧菜单 --><\/p>\n<div class=\"panel-left-panel\">\n<div class=\"panel-menu-item active\" data-room=\"small\">\n<div class=\"panel-menu-text\">\n<h3>Small room<\/h3>\n<p>MeetingBoard 65 Pro<\/p>\n<\/div>\n<div class=\"panel-menu-icon\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/small.png\" alt=\"Small\" title=\"small\"><\/p>\n<div>1-6 People<\/div>\n<\/div>\n<\/div>\n<div class=\"panel-menu-item\" data-room=\"medium\">\n<div class=\"panel-menu-text\">\n<h3>Medium room<\/h3>\n<p>MeetingBoard 75 Pro<\/p>\n<\/div>\n<div class=\"panel-menu-icon\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/medium.png\" alt=\"Medium\" title=\"medium\"><\/p>\n<div>6-12 People<\/div>\n<\/div>\n<\/div>\n<div class=\"panel-menu-item\" data-room=\"large\">\n<div class=\"panel-menu-text\">\n<h3>Large room<\/h3>\n<p>MeetingBoard 86 Pro<\/p>\n<\/div>\n<div class=\"panel-menu-icon\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/large.png\" alt=\"Large\" title=\"large\"><\/p>\n<div>12-20 People<\/div>\n<\/div>\n<\/div>\n<div class=\"panel-menu-item\" data-room=\"executive\">\n<div class=\"panel-menu-text\">\n<h3>Open space and<\/h3>\n<h3>executive office<\/h3>\n<p>MeetingBoard 75 Pro<\/p>\n<\/div>\n<div class=\"panel-menu-icon\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/executive.png\" alt=\"Open space\" title=\"executive\"><\/p>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- 主要内容区域 --><\/p>\n<div class=\"panel-main-content\"><img decoding=\"async\" id=\"small_room\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/small_room.jpg\" alt=\"Small room\" class=\"panel-room-image\" title=\"small_room\"><img decoding=\"async\" id=\"medium_room\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/medium_room.jpg\" alt=\"Medium room\" class=\"panel-room-image\" title=\"medium_room\"><img decoding=\"async\" id=\"large_room\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/large_room.jpg\" alt=\"Large room\" class=\"panel-room-image\" title=\"large_room\"><img decoding=\"async\" id=\"executive_room\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/executive_room.jpg\" alt=\"Executive room\" class=\"panel-room-image\" title=\"executive_room\"><\/div>\n<p><!-- 右侧控制面板 --><\/p>\n<div class=\"panel-right-panel\"><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/mb-floorstand-650t\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"small\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-fs-p650t.png\" alt=\"MB-FS-P650T\" title=\"mb-fs-p650t\"><\/p>\n<div class=\"panel-control-text panel-underline\">MB-FS-P650T<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><\/p>\n<div class=\"panel-control-item\" data-show-in=\"medium,executive\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-fs-p650t.png\" alt=\"MB-FS-P650T\" title=\"mb-fs-p650t\"><\/p>\n<div class=\"panel-control-text panel-underline\">MB-FS-P750T<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<\/div>\n<div class=\"panel-control-item\" data-show-in=\"large\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-fs-p650t.png\" alt=\"MB-FS-P650T\" title=\"mb-fs-p650t\"><\/p>\n<div class=\"panel-control-text panel-underline\">MB-FS-P860T<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<\/div>\n<div class=\"panel-control-item\" data-show-in=\"small\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-wallmount-650.png\" alt=\"MB-WallMount-650\" title=\"mb-wallmount-650\"><\/p>\n<div class=\"panel-control-text\">MB-WallMount-650<\/div>\n<div class=\"panel-control-text\">(optional)<\/div>\n<\/div>\n<div class=\"panel-control-item\" data-show-in=\"medium,large\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-wallmount-650.png\" alt=\"MB-WallMount-650\" title=\"mb-wallmount-650\"><\/p>\n<div class=\"panel-control-text\">MB-WallMount-860<\/div>\n<div class=\"panel-control-text\">(optional)<\/div>\n<\/div>\n<p><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/accessories-ctp25\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"small,medium,large\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/ctp25.png\" alt=\"CTP25\" title=\"ctp25\"><\/p>\n<div class=\"panel-control-text\">CTP25<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/accessories-ctp25\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"executive\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/ctp25.png\" alt=\"CTP25\" title=\"ctp25\"><\/p>\n<div class=\"panel-control-text\">CTP25<\/div>\n<div class=\"panel-control-text panel-underline\">(suggested in executive office, optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/mb-camera-12x\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"large\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/mb-12x-pro.png\" alt=\"MB-12X-Pro\" title=\"mb-12x-pro\"><\/p>\n<div class=\"panel-control-text\">MB-12X Pro<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/accessories-cs10-cs10-d\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/cs10.png\" alt=\"CS10\" title=\"cs10\"><\/p>\n<div class=\"panel-control-text\">CS10<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/accessories-cm20\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"l\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/cm20.png\" alt=\"CS20\" title=\"cm20\"><\/p>\n<div class=\"panel-control-text\">CM20<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/pa20\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"small,medium,large,executive\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/pa20.png\" alt=\"PA20\" title=\"pa20\"><\/p>\n<div class=\"panel-control-text\">PA20*<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/accessories-vcm36-w\" target=\"_blank\" class=\"panel-control-item\" data-show-in=\"medium,large\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/20221118033404584365df4c14a078dfe8aa.png\" alt=\"VCM36-W\" title=\"20221118033404584365df4c14a078dfe8aa\"><\/p>\n<div class=\"panel-control-text\">VCM36-W<\/div>\n<div class=\"panel-control-text panel-underline\">(optional)<\/div>\n<p><\/a><\/div>\n<p><!-- 房间信息区域 --><\/p>\n<div class=\"panel-room-info\">\n<div class=\"panel-room-info-title\">Extensible A\/V<\/div>\n<div class=\"panel-room-info-title\"><img decoding=\"async\" src=\"http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/small.png\" alt=\"Small\" title=\"small\"><\/p>\n<div>1-6 People<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>\/\/ 页面加载时初始化<br \/>\n window.onload = function() {<br \/>\n \/\/ 获取当前激活的房间类型<br \/>\n const activeMenuItem = document.querySelector(‘.panel-menu-item.active’);<br \/>\n if (activeMenuItem && activeMenuItem.getAttribute(‘data-room’) === ‘small’) {<br \/>\n \/\/ 只有当激活的是small房间时才显示对应内容<br \/>\n document.getElementById(‘small_room’).classList.add(‘active’);<\/p>\n<p> \/\/ 显示small房间对应的控制图标<br \/>\n document.querySelectorAll(‘.panel-control-item’).forEach(controlItem =>{<br \/>\n const showIn = controlItem.getAttribute(‘data-show-in’);<br \/>\n if (showIn && showIn.includes(‘small’)) {<br \/>\n controlItem.style.display = ‘flex’;<br \/>\n } else {<br \/>\n controlItem.style.display = ‘none’;<br \/>\n }<br \/>\n });<br \/>\n }<br \/>\n }<\/p>\n<p> document.querySelectorAll(‘.panel-menu-item’).forEach(item => {<br \/>\n item.addEventListener(‘click’, function() {<br \/>\n document.querySelectorAll(‘.panel-menu-item’).forEach(i => i.classList.remove(‘active’));<br \/>\n this.classList.add(‘active’);<\/p>\n<p> const roomType = this.getAttribute(‘data-room’);<\/p>\n<p> document.querySelectorAll(‘.panel-room-image’).forEach(img => {<br \/>\n img.classList.remove(‘active’);<br \/>\n });<\/p>\n<p> const targetImage = document.getElementById(`${roomType}_room`);<br \/>\n if (targetImage) {<br \/>\n targetImage.classList.add(‘active’);<br \/>\n }<\/p>\n<p> const roomInfo = {<br \/>\n ‘small’: {<br \/>\n icon: ‘http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/small.png’,<br \/>\n text: ‘1-6 People’<br \/>\n },<br \/>\n ‘medium’: {<br \/>\n icon: ‘http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/medium.png’,<br \/>\n text: ‘6-12 People’<br \/>\n },<br \/>\n ‘large’: {<br \/>\n icon: ‘http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/large.png’,<br \/>\n text: ’12-20 People’<br \/>\n },<br \/>\n ‘executive’: {<br \/>\n icon: ‘http:\/\/yealink.org\/wp-content\/uploads\/2025\/04\/executive.png’,<br \/>\n text: ”<br \/>\n }<br \/>\n }[roomType];<\/p>\n<p> const infoContainer = document.querySelector(‘.panel-room-info .panel-room-info-title:last-child’);<br \/>\n infoContainer.querySelector(‘img’).src = roomInfo.icon;<br \/>\n infoContainer.querySelector(‘div’).textContent = roomInfo.text;<\/p>\n<p> \/\/ 修改控制图标显示逻辑<br \/>\n document.querySelectorAll(‘.panel-control-item’).forEach(controlItem => {<br \/>\n const showIn = controlItem.getAttribute(‘data-show-in’);<br \/>\n if (showIn) {<br \/>\n const shouldShow = showIn.split(‘,’).includes(roomType);<br \/>\n controlItem.style.display = shouldShow ? ‘flex’ : ‘none’;<br \/>\n }<br \/>\n });<br \/>\n });<br \/>\n });<!--!doctype--><br \/>\n<\/article>\n<article id=\"temp_676388bd47fff12a468a895f\" class=\"temp-page1\">\n <title>Contact Sales Button-yd<\/title>.button-container-yd {<br \/>\n position: fixed;<br \/>\n bottom: 20px;<br \/>\n left: 50%;<br \/>\n transform: translateX(-50%);<br \/>\n background-color: #ccc; \/* 背景颜色灰色 *\/<br \/>\n padding: 8px;<br \/>\n border-radius: 35px;<br \/>\n z-index: 1000; \/* 确保在网页的最上层 *\/<br \/>\n transition: opacity 0.3s ease-in-out;<br \/>\n display: none; \/* 默认隐藏，仅在手机端显示 *\/<br \/>\n }<br \/>\n .contact-button-yd {<br \/>\n background-color: #078855; \/* 按钮背景色 *\/<br \/>\n color: #fff;<br \/>\n padding: 10px 40px;<br \/>\n border-radius: 35px;<br \/>\n font-size: 16px;<br \/>\n opacity: 1;<br \/>\n transition: opacity 0.3s ease-in-out;<br \/>\n }<br \/>\n .contact-button-yd a {<br \/>\n color: #fff;<br \/>\n text-decoration: none;<br \/>\n }<br \/>\n @media (max-width: 768px) {<br \/>\n .button-container-yd {<br \/>\n display: block; \/* 仅在手机端显示 *\/<br \/>\n }<br \/>\n }<\/p>\n<div class=\"content-yd\"><!-- 页面内容 --><\/div>\n<div class=\"button-container-yd\" id=\"buttonContainer-yd\">\n<div class=\"contact-button-yd\" id=\"contactButton-yd\"><a href=\"https:\/\/www.yealink.com\/en\/product-detail\/microsoft-teams-rooms-meetingboardpro#contact_form\">Contact Sales<\/a><\/div>\n<\/div>\n<p>const buttonContainerYd = document.getElementById(‘buttonContainer-yd’);<br \/>\n const contactButtonYd = document.getElementById(‘contactButton-yd’);<br \/>\n let hideTimeoutYd;<br \/>\n let buttonClickedYd = false;<\/p>\n<p> function hideButtonYd() {<br \/>\n buttonContainerYd.style.opacity = ‘0’;<br \/>\n }<\/p>\n<p> function showButtonYd() {<br \/>\n if (!buttonClickedYd) {<br \/>\n buttonContainerYd.style.opacity = ‘1’;<br \/>\n clearTimeout(hideTimeoutYd);<br \/>\n hideTimeoutYd = setTimeout(hideButtonYd, 2000);<br \/>\n }<br \/>\n }<\/p>\n<p> function handleScrollYd() {<br \/>\n const scrollPositionYd = window.scrollY + window.innerHeight;<br \/>\n const thresholdYd = document.body.scrollHeight * 0.75;<\/p>\n<p> if (scrollPositionYd {<br \/>\n buttonClickedYd = true;<br \/>\n hideButtonYd();<br \/>\n });<\/p>\n<p> window.addEventListener(‘scroll’, handleScrollYd);<\/p>\n<p> \/\/ 初始化时设置3秒后隐藏按钮<br \/>\n hideTimeoutYd = setTimeout(hideButtonYd, 3000);<!--!doctype--><br \/>\n<\/article>","protected":false},"excerpt":{"rendered":"<p><span class=\"mbp-highlight\">small to large<\/span><\/p>","protected":false},"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"pwb-brand":[],"product_cat":[2869],"product_tag":[37,44,25,2849,27],"class_list":{"0":"post-13164","1":"product","2":"type-product","3":"status-publish","5":"product_cat-microsoft-zoom-devices","6":"product_tag-fit","7":"product_tag-lee","8":"product_tag-man","9":"product_tag-switch","10":"product_tag-white","12":"first","13":"instock","14":"shipping-taxable","15":"product-type-simple"},"brands":[],"_links":{"self":[{"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/product\/13164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/comments?post=13164"}],"wp:attachment":[{"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/media?parent=13164"}],"wp:term":[{"taxonomy":"pwb-brand","embeddable":true,"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/pwb-brand?post=13164"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/product_cat?post=13164"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/yealink.org\/bn\/wp-json\/wp\/v2\/product_tag?post=13164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}