/* 按照博客的设计来 */ .product-tabs__content h1, .product-tabs__content h2, .product-tabs__content h3, .product-tabs__content h4, .product-tabs__content h5, .product-tabs__content h6 { font-size: inherit; color: #0d0d0d; margin-bottom: 12px; font-weight: 700; } .product-tabs__content h5, .product-tabs__content h6 { font-weight: 600; } .product-tabs__content h1 { font-size: 40px; line-height: 48px; } .product-tabs__content h2 { font-size: 32px; line-height: 40px; } .product-tabs__content h3 { font-size: 28px; line-height: 36px; } .product-tabs__content h4 { font-size: 24px; line-height: 32px; } .product-tabs__content h5 { font-size: 20px; line-height: 28px; font-weight: 600; } .product-tabs__content h6 { font-size: 16px; line-height: 24px; font-weight: 600; } @media screen and (max-width: 768px) { .product-tabs__content { font-size: 14px; line-height: 22px; } .product-tabs__content h1, .product-tabs__content h2, .product-tabs__content h3, .product-tabs__content h4, .product-tabs__content h5, .product-tabs__content h6 { margin-bottom: 8px; } .product-tabs__content h1 { font-size: 28px; line-height: 36px; } .product-tabs__content h2 { font-size: 24px; line-height: 32px; } .product-tabs__content h3 { font-size: 20px; line-height: 28px; } .product-tabs__content h4 { font-size: 16px; line-height: 22px; } .product-tabs__content h5 { font-size: 14px; line-height: 22px; } .product-tabs__content h6 { font-size: 14px; line-height: 22px; } } /* 按照博客的设计来 end */ .product-tabs__content .swiper { --swiper-theme-color: white; --swiper-pagination-color: white; --swiper-pagination-bullet-inactive-color: white; padding-top: 40px; } .product-tabs__content img { margin: 0 !important; } .product-tabs__content .swiper-pagination { background: #000; height: 40px; top: 0; bottom: auto !important; display: flex; justify-content: center; align-items: center; overflow-y: auto; } .product-tabs__content .swiper-pagination-bullet { width: auto; height: auto; background: none; font-size: 18px; color: #fff; border-bottom: 2px solid #fff; border-radius: 0; margin: 0 20px !important; opacity: 0.6; flex: none; } .product-tabs__content .swiper-pagination-bullet-active.swiper-pagination-bullet { opacity: 1; } /* 左图右文 */ .ug_nas_leftrightSwiper-title h1 { padding: 40px 0px; font-size: 32px; line-height: 1.2em; text-align: center; } .ug_nas_leftright_flex { display: flex; align-items: center; } .ug_nas_leftright_flex-l { vertical-align: middle; text-align: left; width: 50%; flex: none; padding: 40px; } .ug_nas_leftright_flex-title { margin-bottom: 16px; } .ug_nas_leftright_flex-title h1 { font-size: 32px; } .ug_nas_leftright_flex-title h2 { font-size: 21px; padding-bottom: 20px; margin-bottom: 0px; } .ug_nas_leftright_flex-p { margin-bottom: 16px; } .ug_nas_leftright_flex-r { flex: 1; position: relative; overflow: hidden; } .ug_nas_leftright_flex-r video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .ug_nas_leftright_flex-r-pictrue { width: 100%; } .ug_nas_leftright_flex-video-playdiv { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; } .ug_nas_leftright_flex-video-playdiv.no-play .ug_nas_leftright_flex-video-icon { display: none; } .ug_nas_leftright_flex-video-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; } .ug_nas_leftright_flex-video-icon { width: 50px; height: 50px; border-radius: 50%; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ug_nas_leftright_swiper .swiper-pagination { width: 8px; height: 8px; border-radius: 50%; background: #000; opacity: 0.2; display: inline-block; flex: none; font-size: 0px; line-height: 0px; border: none; } .ug_nas_leftright_swiper .swiper-pagination-bullet-active.swiper-pagination-bullet { background: #007aff; } .ug_nas_leftright_swiper .swiper { padding-bottom: 24px; position: relative; padding-top: 0px; } .ug_nas_leftright_swiper .swiper-pagination { top: unset; bottom: 10px !important; background: transparent; height: unset; margin: 0px; display: block; text-align: center; overflow: hidden; padding: 0px; opacity: 1; } .ug_nas_leftright_swiper .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: #000; opacity: 0.2; display: inline-block; flex: none; font-size: 0px; line-height: 0px; border: none; margin: 0px 4px !important; } .ug_nas_leftright_swiper .swiper-pagination-bullet-active.swiper-pagination-bullet { background: #007aff !important; opacity: 1 !important; } .ug_nas_leftright_swiper.swiper { padding-bottom: 30px; position: relative; padding-top: 0px; } .ug_nas_leftright_swiper .ug_nas_leftright_flex.row-reverse { flex-direction: row-reverse; } .ug_nas_leftright_swiper .swiper-button-prev, .ug_nas_leftright_swiper.isrow-reverse .swiper-button-next { color: #000; } .ug_nas_leftright_swiper .swiper-button-next, .ug_nas_leftright_swiper.isrow-reverse .swiper-button-prev { color: #fff; } .ug_nas_leftright_flex-r.video_play .ug_nas_leftright_flex-video-playdiv { display: none; } .ug_nas_leftright_swiper-div .ug_nas_leftright_flex-smallDiv { display: none; } .ug_nas_leftright_swiper-div .ug_nas_leftright_flex-smallDiv .ug_nas_leftright_flex-l { display: none; } .ug_nas_leftright_swiper-div .ug_nas_leftright_flex-smallDiv .ug_nas_leftright_flex-l.active { display: block; } /* 左图右文 */ .ug_nas_leftright_swiper.isFirst_left_img .ug_nas_leftright_flex { flex-direction: row-reverse; } .ug_nas_leftright_swiper.isFirst_left_img .ug_nas_leftright_flex.row-reverse { flex-direction: row; } .ug_nas_leftright_swiper.isFirst_left_img .swiper-button-prev, .ug_nas_leftright_swiper.isFirst_left_img.isrow-reverse .swiper-button-next { color: #fff; } .ug_nas_leftright_swiper.isFirst_left_img .swiper-button-next, .ug_nas_leftright_swiper.isFirst_left_img.isrow-reverse .swiper-button-prev { color: #000; } @media screen and (max-width: 768px) { .product-tabs__content .swiper-pagination { justify-content: flex-start; } .ug_nas_leftright_swiper-div .ug_nas_leftright_flex-smallDiv { display: block; } .ug_nas_leftright_swiper-div .swiper-container .ug_nas_leftright_flex-l { display: none; } .ug_nas_leftright_flex-smallDiv .ug_nas_leftright_flex-l { width: 100%; box-sizing: border-box; padding: 20px 0px; } .ug_nas_leftright_swiper .swiper-button-prev, .ug_nas_leftright_swiper .swiper-button-next { color: #000 !important; } .ug_nas_leftright_flex-title { margin-bottom: 20px; } .ug_nas_leftright_flex-title h1 { font-size: 22px; line-height: 1.2em; } .ug_nas_leftright_flex-title h2 { font-size: 13px; line-height: 1.4em; padding-bottom: 10px; margin-bottom: 0px; } .ug_nas_leftrightSwiper-title h1 { font-size: 22px; line-height: 1.2em; padding: 20px 0px; } } /* 左图右文 end */ AI-Powered Photo Album Intelligent Recognition & Classification Identifies text, objects, animals, and faces in images with ease, helping you quickly categorize pictures. Semantic Search Find photos quickly by searching with simple, natural descriptions. It's fast, intuitive, and saves you time. Duplicate Photo Cleaner Helps you quickly locate similar or duplicate photos, saving you time and helping you free up space. The Highest-Funded NAS Product on Kickstarter On Kickstarter, the UGREEN NASync series has garnered support from over 13,000 backers, raising $6.6 million and becoming the highest-funded NAS product on Kickstarter, earning the "Best of Kickstarter" award. See What the Pros Say "I think UGREEN has done quite well across the board with this series." -- TweakTown "Performance advantage in similarly priced models from the competition." --TechPowerUp "The DXP4800 Plus is a 4-bay NAS that has the best hardware in its category. " --Android Central "The presentation of the DXP4800 Plus is genuinely top-tier. " --NASCompares Unboxing the UGREEN NASync DXP4800 Plus Unbox Therapy "This gives you tremendous storage that's always accessible on your network." The Greatest Storage That's Ever Lived? Salem Techsperts "This impressive piece of tech has earned my approval! I actually replaced my old NAS with this, and that's not something I take lightly..." NASync DXP4800 Plus Hands On Zach's Tech Turf "This is the UGREEN NASync DXP4800 Plus, it's basically like building your own private cloud server, but it's super easy..." new Swiper(".ug_nas_swiper", { slidesPerView: 1, loop: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, }, }); document .querySelectorAll(".ug_nas_leftright_swiper") .forEach((item, key) => { // let smallDom = ``; let smallDom = document.createElement("div"); smallDom.classList.add("ug_nas_leftright_flex-smallDiv"); // item.insertAdjacentHTML("beforeend",smallDom); item.querySelectorAll(".ug_nas_leftright_flex").forEach((v, k) => { if ((k + 1) % 2 == 0) { v.classList.add("row-reverse"); } let clone = v .querySelector(".ug_nas_leftright_flex-l") .cloneNode(true); smallDom.appendChild(clone); // 将克隆的元素添加到 smallDom 中 }); item.parentElement.appendChild(smallDom); item.parentElement .querySelector(".ug_nas_leftright_flex-smallDiv") .querySelectorAll(".ug_nas_leftright_flex-l")[0] ?.classList.add("active"); }); // 左右 图文分离 new Swiper(".ug_nas_leftright_swiper", { slidesPerView: 1, loop: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, }, on: { init: function (el) { el.el.addEventListener("click", function (e) { let event = e || window.event; let target = event.target || event.srcElement; if ( target.classList.value.indexOf( "ug_nas_leftright_flex-video-playdiv" ) != -1 && !target.classList.contains("no-play") ) { target.parentElement.classList.add("video_play"); target.parentElement.querySelector("video")?.play(); } }); }, slideChangeTransitionEnd: function (el) { el.el.querySelectorAll("video").forEach((videoDom, key) => { videoDom.pause(); videoDom.currentTime = 0; }); el.el .querySelectorAll(".ug_nas_leftright_flex-r") .forEach((dom, key) => { dom.classList.remove("video_play"); }); const currentIndex = this.realIndex + 1; // 索引从0开始需+1 console.log(`当前是第${currentIndex}个div`); if (currentIndex % 2 === 0) { el.el.classList.add("isrow-reverse"); } else { el.el.classList.remove("isrow-reverse"); } el.el.parentElement .querySelector(".ug_nas_leftright_flex-smallDiv") .querySelectorAll(".ug_nas_leftright_flex-l") .forEach((dom, key) => { dom.classList.remove("active"); }); el.el.parentElement .querySelector(".ug_nas_leftright_flex-smallDiv") .querySelectorAll(".ug_nas_leftright_flex-l") [currentIndex - 1]?.classList.add("active"); }, }, }); //第一组 document.querySelectorAll(".ug_nas_swiper1").forEach(function (el) { el.querySelectorAll(".swiper-pagination").forEach(function (element) { element.children[0].innerHTML = "Why NAS?"; element.children[1].innerHTML = "Cost-Effective"; element.children[2].innerHTML = "Sleek and Modern Design"; element.children[3].innerHTML = "Access Anywhere"; element.children[4].innerHTML = "Widely Compatible"; }); }); //第二组 document.querySelectorAll(".ug_nas_swiper2").forEach(function (el) { el.querySelectorAll(".swiper-pagination").forEach(function (element) { element.children[0].innerHTML = "Fast Transfers"; element.children[1].innerHTML = "Port Layout"; element.children[2].innerHTML = "Powerful Intel CPU"; element.children[3].innerHTML = "8GB DDR5 RAM"; element.children[4].innerHTML = "Dual M.2 NVMe Slots"; }); }); //第三组 document.querySelectorAll(".ug_nas_swiper3").forEach(function (el) { el.querySelectorAll(".swiper-pagination").forEach(function (element) { element.children[0].innerHTML = "Security"; element.children[1].innerHTML = "UGOS Pro"; element.children[2].innerHTML = "Video Center"; element.children[3].innerHTML = "Virtual Machine & Docker"; element.children[4].innerHTML = "2-Year Coverage"; }); }); //第四组 document.querySelectorAll(".ug_nas_swiper4").forEach(function (el) { el.querySelectorAll(".swiper-pagination").forEach(function (element) { element.children[0].innerHTML = "Comparison"; element.children[1].innerHTML = "Heat Dissipation"; element.children[2].innerHTML = "Package Includes"; element.children[3].innerHTML = "Updates"; element.children[4].innerHTML = "FAQ"; }); }); //第五组 document.querySelectorAll(".ug_nas_swiper5").forEach(function (el) { el.querySelectorAll(".swiper-pagination").forEach(function (element) { element.children[0].innerHTML = "无结果1"; element.children[1].innerHTML = "无结果2"; element.children[2].innerHTML = "无结果3"; element.children[3].innerHTML = "无结果4"; element.children[4].innerHTML = "无结果5"; }); });