(function(vue, swiper) { //#region \0rolldown/runtime.js var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) { key = keys[i]; if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: ((k) => from[k]).bind(null, key), enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod)); //#endregion swiper = __toESM(swiper); //#region ../../node_modules/nanoid/index.browser.js var nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => { byte &= 63; if (byte < 36) id += byte.toString(36); else if (byte < 62) id += (byte - 26).toString(36).toUpperCase(); else if (byte > 62) id += "-"; else id += "_"; return id; }, ""); //#endregion //#region src/utils/helper.ts var fallbackText = (text, fallback = "##placeholder##") => { if (text) return text; return fallback; }; var getLang = (fallback = "en") => { if (typeof window === "undefined") return fallback; return window.ENV_CONFIG?.LANG ?? fallback; }; var getLangClasses = (inputLang = getLang()) => { const lang = inputLang || "en"; return "mainComponent" + lang.charAt(0).toUpperCase() + lang.slice(1) + ` lang-${lang}`; }; //#endregion //#region \0plugin-vue:export-helper var _plugin_vue_export_helper_default = (sfc, props) => { const target = sfc.__vccOpts || sfc; for (const [key, val] of props) target[key] = val; return target; }; //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/TopBanner.vue var _sfc_main$7 = { name: "TopBanner", props: { isPc: { type: Boolean, default: () => false }, sectionData: { type: Object, default: () => ({}) } }, data() { return { nid: nanoid() }; }, watch: { isPc: { handler() { this.nid = nanoid(); }, immediate: true } }, computed: { showTitle() { return this.sectionData.showTitle; }, bgImg() { const pcImg = fallbackText(this.sectionData.bgImgPc, "https://cdnimg.vivaia.com/VA/image/Banner/20251013_7840/Group%20336570001.jpg"); const mImg = fallbackText(this.sectionData.bgImgM, "https://cdnimg.vivaia.com/VA/image/Banner/20251013_7840/20250616-Miley-shflatse2504080009-product-description-domestic-2.jpg"); return this.isPc ? pcImg : mImg; }, mainTitle() { return fallbackText(this.isPc ? this.sectionData.titlePc : this.sectionData.titleM); }, mainDesc() { return this.isPc ? this.sectionData.descPc : this.sectionData.descM; }, titleColor() { return fallbackText(this.isPc ? this.sectionData.titleColorPc : this.sectionData.titleColorM, "#261B02"); }, positionStyle() { if (this.isPc) return { top: this.sectionData.topPc + "%", left: this.sectionData.leftPc + "%" }; else return { top: this.sectionData.topM + "%", left: "0%" }; }, TitleLayout() { if (this.isPc) return this.sectionData.PcTitleLayout; else return "center"; } } }; var _hoisted_1$7 = { class: "top-banner" }; var _hoisted_2$5 = { class: "top-banner-container" }; var _hoisted_3$5 = ["src"]; function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$7, [(0, vue.createElementVNode)("div", _hoisted_2$5, [(0, vue.createElementVNode)("img", { class: "top-banner-img", src: $options.bgImg, alt: "VIVAIA" }, null, 8, _hoisted_3$5), $options.showTitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: "text-info", style: (0, vue.normalizeStyle)($options.positionStyle), key: $data.nid }, [(0, vue.createElementVNode)("div", { class: "title", style: (0, vue.normalizeStyle)({ color: $options.titleColor, textAlign: $options.TitleLayout }) }, (0, vue.toDisplayString)($options.mainTitle), 5), $options.mainDesc ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: 0, class: "desc", style: (0, vue.normalizeStyle)({ color: $options.titleColor, textAlign: $options.TitleLayout }) }, (0, vue.toDisplayString)($options.mainDesc), 5)) : (0, vue.createCommentVNode)("", true)], 4)) : (0, vue.createCommentVNode)("", true)])]); } var TopBanner_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-aeed4757"]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/HoverAccordion.vue var _sfc_main$6 = { props: { isPc: { type: Boolean }, sectionData: { type: Object, default: () => ({}) } }, data() { return { keyTime: Date.now(), bannerVideoRefs: {}, cur_indexBanner: null, lang: "en", mySwiper: null, activeIndex: 0 }; }, methods: { fallbackText, handleMobileVideoPlay() { setTimeout(() => { if (!this.$refs.swiperContainerRef) return; this.$refs.swiperContainerRef.querySelectorAll("video").forEach((video) => { video.pause(); video.currentTime = 0; }); const activeSlide = this.$refs.swiperContainerRef.querySelector(".swiper-slide-active"); if (activeSlide) { const activeVideo = activeSlide.querySelector("video"); if (activeVideo) activeVideo.play().catch((e) => console.log("Play error:", e)); } }, 100); }, addBannerActive(i) { this.cur_indexBanner = i; }, returnCur() { this.cur_indexBanner = null; }, setVideoRef(id) { return `videoRef_${id}`; }, updateVideoRefs() { this.bannerConfigs.forEach((item) => { if (item.attrs.isVideo) this.$nextTick(() => { this.bannerVideoRefs[item.id] = this.$refs[`videoRef_${item.id}`]; }); }); }, playVideo(id) { this.$nextTick(async () => { const video = this.$refs[`videoRef_${id}`]; if (video) try { Object.values(this.bannerVideoRefs).forEach((v) => { if (v && v !== video) v[0]?.pause(); }); await video[0]?.play(); } catch (error) { console.log(error); } }); }, pauseVideo(id) { this.$nextTick(() => { const video = this.$refs[`videoRef_${id}`]; if (video) video[0]?.pause(); }); }, pauseAllVideo() { this.$nextTick(() => { Object.values(this.bannerVideoRefs).forEach((v) => { if (!v) { this.updateVideoRefs(); this.pauseAllVideo(); } else v[0]?.pause(); }); }); }, initSwiper() { if (typeof window === "undefined") return; if (this.mySwiper) { this.mySwiper.destroy(true, true); this.mySwiper = null; } this.$nextTick(() => { const that = this; if (!this.$refs.swiperContainerRef) return; this.mySwiper = new swiper.default(this.$refs.swiperContainerRef, { loop: true, slidesPerView: 1.4, centeredSlides: true, spaceBetween: 10, observer: true, observeParents: true, pagination: { el: ".swiper-pagination", type: "progressbar" }, on: { slideChange: function() { that.activeIndex = this.realIndex; that.handleMobileVideoPlay(); } }, init: function() { that.handleMobileVideoPlay(); } }); }); } }, mounted() { this.updateVideoRefs(); if (!this.isPc) this.initSwiper(); }, computed: { bannerConfigs() { return this.sectionData?.optionSlide?.attrs?.children ?? []; }, pcDescWidth() { if (this.sectionData?.optionSlide?.attrs?.children?.length === 3) return "27.2396vw"; else if (this.sectionData?.optionSlide?.attrs?.children?.length === 4) return "20.4688vw"; else return "75%"; }, bgImg() { return this.isPc ? this.sectionData?.bgImgPc : this.sectionData?.bgImgM; }, backgroundColor() { return this.sectionData?.bgColor; }, currentActiveItem() { const children = this.sectionData?.optionSlide?.attrs?.children; if (!children || children.length === 0) return { attrs: {} }; if (!children[this.activeIndex]) return children[0]; return children[this.activeIndex]; }, mainTitle() { return this.isPc ? fallbackText(this.sectionData.titlePc) : fallbackText(this.sectionData.titleM); }, showTitle() { return this.sectionData?.showTitle ?? true; } }, watch: { isPc() { if (this.isPc === true) { this.pauseAllVideo(); if (this.mySwiper) { this.mySwiper.destroy(true, true); this.mySwiper = null; } } else this.$nextTick(() => { this.initSwiper(); }); this.keyTime = Date.now(); }, bannerConfigs: { handler(newVal) { if (newVal && newVal.length && !this.isPc) { if (this.mySwiper) { this.mySwiper.destroy(true, true); this.mySwiper = null; } this.$nextTick(() => { this.initSwiper(); }); } }, deep: true } }, beforeUnmount() { if (this.mySwiper) this.mySwiper.destroy(true, true); } }; var _hoisted_1$6 = { key: 0, class: "top-banner-pc" }; var _hoisted_2$4 = { key: 0, class: "banner-title" }; var _hoisted_3$4 = ["onMouseover"]; var _hoisted_4$3 = { class: "media-box" }; var _hoisted_5$3 = ["src"]; var _hoisted_6$3 = [ "src", "poster", "onMouseover", "onMouseleave" ]; var _hoisted_7$2 = { class: "title" }; var _hoisted_8$2 = { key: 1, class: "top-banner-m" }; var _hoisted_9$2 = { key: 0, class: "banner-title" }; var _hoisted_10$2 = { class: "swiper-container", ref: "swiperContainerRef" }; var _hoisted_11$2 = { class: "swiper-wrapper" }; var _hoisted_12$2 = { class: "slide-content" }; var _hoisted_13 = { class: "media-box" }; var _hoisted_14 = ["src", "poster"]; var _hoisted_15 = ["src"]; var _hoisted_16 = ["innerHTML"]; var _hoisted_17 = ["innerHTML"]; function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: $data.keyTime, class: "hover-container", style: (0, vue.normalizeStyle)({ backgroundImage: $options.bgImg ? `url(${$options.bgImg})` : "none", backgroundColor: $options.backgroundColor }) }, [$props.isPc ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$6, [$options.showTitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$4, (0, vue.toDisplayString)($options.mainTitle), 1)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: "inline-box", onMouseleave: _cache[1] || (_cache[1] = ($event) => $options.returnCur()), ref: "boxRef" }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.bannerConfigs, (item) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: item.id, onMouseover: ($event) => $options.addBannerActive(item.id), class: (0, vue.normalizeClass)([ { "item-active": $data.cur_indexBanner === item.id }, { "three-item-active": $data.cur_indexBanner === item.id && $options.bannerConfigs.length === 3 }, "item" ]) }, [(0, vue.createElementVNode)("div", _hoisted_4$3, [!item.attrs.isVideo ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", { key: 0, src: item.attrs.posterUrl ? item.attrs.posterUrl : "https://cdnimg.vivaia.com/VA/image/Banner/20250618_7659/pc3.jpg", alt: "VIVAIA", loading: "lazy", onMouseover: _cache[0] || (_cache[0] = ($event) => $options.pauseAllVideo()) }, null, 40, _hoisted_5$3)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("video", { key: 1, "webkit-playsinline": "", playsinline: "", autoplay: "", muted: "", style: { "display": "block" }, ref_for: true, ref: $options.setVideoRef(item.id), src: $options.fallbackText(item.attrs.videoUrl, "https://cdnimg.vivaia.com/VA/video/Banner/20250618_7659/22.mp4"), poster: $options.fallbackText(item.attrs.posterUrl, "https://cdnimg.vivaia.com/VA/image/Banner/20241209_7256/brand-pc.jpg"), loop: "", onMouseover: ($event) => $options.playVideo(item.id), onMouseleave: ($event) => $options.pauseVideo(item.id) }, null, 40, _hoisted_6$3))]), (0, vue.createElementVNode)("div", { class: "inline-text", style: (0, vue.normalizeStyle)({ color: item.attrs.textColor }) }, [(0, vue.createElementVNode)("div", _hoisted_7$2, (0, vue.toDisplayString)($options.fallbackText(item.attrs.titlePc)), 1), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["desc", $data.cur_indexBanner === item.id ? "active-desc" : ""]), style: (0, vue.normalizeStyle)({ maxWidth: $options.pcDescWidth }) }, (0, vue.toDisplayString)($options.fallbackText(item.attrs.descPc)), 7)], 4)], 42, _hoisted_3$4); }), 128))], 544)])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8$2, [$options.showTitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9$2, (0, vue.toDisplayString)($options.mainTitle), 1)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_10$2, [ (0, vue.createElementVNode)("div", _hoisted_11$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.bannerConfigs, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: "swiper-slide", key: index }, [(0, vue.createElementVNode)("div", _hoisted_12$2, [(0, vue.createElementVNode)("div", _hoisted_13, [item.attrs.isVideo ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("video", { key: 0, src: item.attrs.videoUrlM ? item.attrs.videoUrlM : "https://cdnimg.vivaia.com/VA/image/Banner/20251205_7949/image-1.jpg", poster: item.attrs.posterUrlM ? item.attrs.posterUrlM : "https://cdnimg.vivaia.com/VA/image/Banner/20251205_7949/image-1.jpg", loop: "", muted: "", playsinline: "", "webkit-playsinline": "", class: "bg-media" }, null, 8, _hoisted_14)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", { key: 1, src: item.attrs.posterUrlM ? item.attrs.posterUrlM : "https://cdnimg.vivaia.com/VA/image/Banner/20251205_7949/image-1.jpg", alt: "VIVAIA", class: "bg-media", loading: "lazy" }, null, 8, _hoisted_15))])])]); }), 128))]), (0, vue.createElementVNode)("div", { class: "text-content", style: (0, vue.normalizeStyle)({ color: $options.currentActiveItem.attrs.textColorM }) }, [(0, vue.createElementVNode)("div", { class: "title", innerHTML: $options.fallbackText($options.currentActiveItem.attrs.titleM) }, null, 8, _hoisted_16), (0, vue.createElementVNode)("div", { class: "desc", innerHTML: $options.fallbackText($options.currentActiveItem.attrs.descM) }, null, 8, _hoisted_17)], 4), _cache[2] || (_cache[2] = (0, vue.createElementVNode)("div", { class: "swiper-pagination" }, null, -1)) ], 512)]))], 4); } var HoverAccordion_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-b01f8bb9"]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/LookBook.vue var _sfc_main$5 = { props: { isPc: { type: Boolean, default: false }, sectionData: { type: Object, default: () => {} } }, data() { return { keyTime: Date.now(), cur_indexPreview: 0, swiperInstance: null }; }, computed: { bgAttr() { let bgStyle = Object.assign({}); if (this.sectionData?.Alterable.attrs.backgroundType === "color") bgStyle = { backgroundColor: this.sectionData?.Alterable.attrs.backgroundColor || "#faf7f6" }; else bgStyle = { backgroundImage: `url(${this.isPc ? this.sectionData?.Alterable.attrs.bgImgPc : this.sectionData?.Alterable.attrs.bgImgM})`, backgroundSize: "cover", backgroundPosition: "center center" }; return bgStyle; }, previewList() { return this.sectionData?.Alterable.attrs.children || []; }, itemTextColor() { return this.sectionData?.Alterable?.attrs.TextColorPc || "#261B02"; }, mPaginationColor() { return this.sectionData?.Alterable?.attrs.paginationColorM || "rgba(25, 24, 23, 0.25)"; }, mFillColor() { return this.sectionData?.Alterable?.attrs.mFillColor || "#261B02"; } }, watch: { isPc: { handler(val) { if (!val) this.$nextTick(() => { this.initSwiper(); }); } }, sectionData: { handler(val, oldVal) { if ((val?.Alterable?.attrs?.children?.length ?? 0) !== (oldVal?.Alterable?.attrs?.children?.length ?? 0)) this.$nextTick(() => { if (!this.isPc) this.initSwiper(); }); } } }, mounted() { this.preloadImages(); if (!this.isPc) this.$nextTick(() => { this.initSwiper(); }); }, methods: { fallbackText, initSwiper() { if (typeof window === "undefined" || this.isPc) return; if (this.swiperInstance) { this.swiperInstance.destroy(true, true); this.swiperInstance = null; } setTimeout(() => { if (!this.$refs.commonSwiper) return; this.swiperInstance = new swiper.default(this.$refs.commonSwiper, { slidesPerView: 1.39, spaceBetween: 5, slidesOffsetBefore: 10, slidesOffsetAfter: 10, pagination: { el: ".commit-swiper .swiper-pagination", type: "progressbar" } }); }); this.keyTime = Date.now(); }, addPreviewActive(i) { this.cur_indexPreview = i; }, preloadImages() { if (typeof Image === "undefined") return; this.previewList.forEach((item) => { const img = new Image(); img.src = item.img; }); }, imgPcForId(num) { return { transform: num % 2 === 0 ? `rotate(${.6 * num}deg)` : `rotate(${-.6 * num}deg)` }; } }, beforeUnmount() { if (this.swiperInstance) this.swiperInstance.destroy(true, true); } }; var _hoisted_1$5 = { class: "text-arr" }; var _hoisted_2$3 = { class: "text-desc" }; var _hoisted_3$3 = ["onMouseover"]; var _hoisted_4$2 = ["innerHTML"]; var _hoisted_5$2 = { class: "img-arr" }; var _hoisted_6$2 = ["src"]; var _hoisted_7$1 = { class: "swiper-container commit-swiper", ref: "commonSwiper" }; var _hoisted_8$1 = { class: "swiper-wrapper" }; var _hoisted_9$1 = { class: "item" }; var _hoisted_10$1 = { class: "inline-text" }; var _hoisted_11$1 = ["innerHTML"]; var _hoisted_12$1 = ["src"]; function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: $data.keyTime }, [$props.isPc ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: 0, class: "center-banner-pc", style: (0, vue.normalizeStyle)($options.bgAttr) }, [(0, vue.createElementVNode)("div", _hoisted_1$5, [(0, vue.createElementVNode)("div", { class: "text-title", style: (0, vue.normalizeStyle)({ color: $props.sectionData?.mainTitleColor || "#261B02" }) }, (0, vue.toDisplayString)($options.fallbackText($props.sectionData?.mainTitle)), 5), (0, vue.createElementVNode)("ul", _hoisted_2$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.previewList, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", { key: item.id, onMouseover: ($event) => $options.addPreviewActive(index), class: (0, vue.normalizeClass)([{ "desc-item-active": $data.cur_indexPreview == index }, "desc-item"]) }, [(0, vue.createElementVNode)("span", { style: (0, vue.normalizeStyle)({ color: $options.itemTextColor, "--desc-after-bg": $options.itemTextColor || "#261B02" }), innerHTML: $options.fallbackText(item.attrs.title) }, null, 12, _hoisted_4$2)], 42, _hoisted_3$3); }), 128))])]), (0, vue.createElementVNode)("div", _hoisted_5$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.previewList, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("img", { key: item.id, class: (0, vue.normalizeClass)([ "common-img", `performance-${index}`, { "img-active": $data.cur_indexPreview === index } ]), style: (0, vue.normalizeStyle)($options.imgPcForId(index)), src: $options.fallbackText(item.attrs.pcImg, "https://cdnimg.vivaia.com/VA/image/Banner/20250117_7336/ISABELI-pc-005.jpg"), alt: "VIVAIA" }, null, 14, _hoisted_6$2); }), 128))])], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: 1, class: "center-banner-m", style: (0, vue.normalizeStyle)($options.bgAttr) }, [(0, vue.createElementVNode)("div", { class: "title", style: (0, vue.normalizeStyle)({ color: $props.sectionData?.mainTitleColor || "#261B02" }) }, (0, vue.toDisplayString)($options.fallbackText($props.sectionData.mainTitle)), 5), (0, vue.createElementVNode)("div", _hoisted_7$1, [(0, vue.createElementVNode)("div", _hoisted_8$1, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.previewList, (item) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: "swiper-slide", key: item.id }, [(0, vue.createElementVNode)("div", _hoisted_9$1, [(0, vue.createElementVNode)("div", _hoisted_10$1, [(0, vue.createElementVNode)("div", { class: "item-title", style: (0, vue.normalizeStyle)({ color: item.attrs.TextColorM }), innerHTML: $options.fallbackText(item.attrs.title) }, null, 12, _hoisted_11$1)]), (0, vue.createElementVNode)("img", { src: $options.fallbackText(item.attrs.mImg, "https://cdnimg.vivaia.com/VA/image/Banner/20241209_7256/demo-pc-03-6.jpg"), alt: "VIVAIA", loading: "lazy" }, null, 8, _hoisted_12$1)])]); }), 128))]), (0, vue.createElementVNode)("div", { class: "swiper-pagination", style: (0, vue.normalizeStyle)({ "--swiper-pagination-bg": $options.mPaginationColor || "rgba(38, 27, 2, 0.3)", "--swiper-pagination-fill": $options.mFillColor || "#261B02" }) }, null, 4)], 512)], 4))]); } var LookBook_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-0fba1204"]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/NewLookBook.vue var _sfc_main$4 = { namespace: "NewLookBook", props: { isPc: { type: Boolean, default: false }, sectionData: { type: Object, default: () => ({}) } }, data() { return { cur_indexPreview: 9999, showDetails: false, mSwiperInstance: null }; }, watch: { isPc: { handler(val) { if (!val) this.initMSwiper(); } }, cur_indexPreview: { handler(val) { if (val < this.itemList.length) this.showDetails = true; else this.showDetails = false; }, immediate: true }, "sectionData.Alterable.attrs.children.length": { handler() { if (this.isPc) { this.showDetails = false; this.cur_indexPreview = 9999; } else { if (this.mSwiperInstance) { this.mSwiperInstance.destroy(); this.mSwiperInstance = null; } this.initMSwiper(); } }, immediate: true } }, computed: { mainTitle() { if (this.isPc) return this.sectionData?.mainTitlePc; else return this.sectionData?.mainTitleM; }, desc() { return this.isPc ? this.sectionData?.descPc : this.sectionData?.descM; }, textColorPc() { return this.sectionData?.mainTitlePcColor; }, itemList() { return this.sectionData?.Alterable?.attrs?.children || []; }, mPaginationColor() { return this.sectionData?.Alterable?.attrs?.progressBarBgColor || "rgba(38, 27, 2, 0.3)"; }, mFillColor() { return this.sectionData?.Alterable?.attrs?.progressBarFillColor || "#261B02"; } }, mounted() { this.initMSwiper(); }, methods: { fallbackText, addPreviewActive(i) { this.cur_indexPreview = i; }, handleClickPcSection() { this.cur_indexPreview = 9999; }, initMSwiper() { if (typeof window === "undefined" || this.isPc) return; if (this.mSwiperInstance) { this.mSwiperInstance.destroy(); this.mSwiperInstance = null; } this.$nextTick(() => { if (!this.$refs.newLookBookMSwiper) return; this.mSwiperInstance = new swiper.default(this.$refs.newLookBookMSwiper, { slidesPerView: 1.4, slidesOffsetBefore: 10, slidesOffsetAfter: 10, spaceBetween: 5, loop: false, pagination: { el: ".new-lookbook-swiper .swiper-pagination", type: "progressbar" } }); }); } }, beforeUnmount() { if (this.mSwiperInstance) this.mSwiperInstance.destroy(); } }; var _hoisted_1$4 = { class: "new-lookBook" }; var _hoisted_2$2 = { class: "top-info" }; var _hoisted_3$2 = ["innerHTML"]; var _hoisted_4$1 = ["innerHTML"]; var _hoisted_5$1 = ["onMouseover"]; var _hoisted_6$1 = ["innerHTML"]; var _hoisted_7 = ["src"]; var _hoisted_8 = { class: "title" }; var _hoisted_9 = { class: "desc" }; var _hoisted_10 = { class: "new-lookbook-swiper swiper-container", ref: "newLookBookMSwiper" }; var _hoisted_11 = { class: "swiper-wrapper" }; var _hoisted_12 = ["src"]; function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$4, [$props.isPc ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: 0, class: "look-book-pc", style: (0, vue.normalizeStyle)({ "--bg-img-pc": `url(${$options.fallbackText($props.sectionData?.bgImgPc, "https://cdnimg.vivaia.com/VA/image/Banner/20251215_7953/1215-icon-lefu-pc-green-07.jpg")})` }) }, [ (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["mask", { "mask-active": $data.showDetails }]), onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)((...args) => $options.handleClickPcSection && $options.handleClickPcSection(...args), ["self"])) }, null, 2), (0, vue.createElementVNode)("div", { class: "left-info", onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)((...args) => $options.handleClickPcSection && $options.handleClickPcSection(...args), ["self"])) }, [(0, vue.createElementVNode)("div", _hoisted_2$2, [(0, vue.createElementVNode)("div", { class: "title", style: (0, vue.normalizeStyle)({ color: $options.textColorPc || "#ffffff" }), innerHTML: $options.fallbackText($options.mainTitle) }, null, 12, _hoisted_3$2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["desc", { "desc-show-active": $data.showDetails }]), innerHTML: $options.fallbackText($options.desc), style: (0, vue.normalizeStyle)({ color: $options.textColorPc || "#ffffff" }) }, null, 14, _hoisted_4$1)]), (0, vue.createElementVNode)("div", { class: "item-list", style: (0, vue.normalizeStyle)({ "--desc-after-color": $props.sectionData?.Alterable?.attrs?.listColor }) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.itemList, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { style: (0, vue.normalizeStyle)({ color: $props.sectionData?.Alterable?.attrs?.listColor || "#ffffff" }), key: index, class: (0, vue.normalizeClass)(["item", { "item-active": $data.cur_indexPreview == index }]), onMouseover: ($event) => $options.addPreviewActive(index) }, [(0, vue.createElementVNode)("div", { class: "item-text", innerHTML: $options.fallbackText(item.attrs.title) }, null, 8, _hoisted_6$1)], 46, _hoisted_5$1); }), 128))], 4)]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["right-gallery", { "right-gallery-active": $data.showDetails }]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.itemList, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("img", { class: (0, vue.normalizeClass)(["right-gallery-img", { "img-show": $data.cur_indexPreview === index }]), key: index, src: $options.fallbackText(item.attrs.imgSrc, "https://cdnimg.vivaia.com/VA/image/Banner/20251215_7953/1215-icon-lefu-pc-green-05.jpg"), alt: "VIVAIA" }, null, 10, _hoisted_7); }), 128))], 2) ], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: 1, class: "look-book-m", style: (0, vue.normalizeStyle)({ background: $props.sectionData?.bgImgColor || "#f2e9da", color: $props.sectionData?.mainTitleMColor || "#261b02" }) }, [ (0, vue.createElementVNode)("div", _hoisted_8, (0, vue.toDisplayString)($options.fallbackText($props.sectionData?.mainTitleM)), 1), (0, vue.createElementVNode)("div", _hoisted_9, (0, vue.toDisplayString)($options.fallbackText($props.sectionData?.descM)), 1), (0, vue.createElementVNode)("div", _hoisted_10, [(0, vue.createElementVNode)("div", _hoisted_11, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($options.itemList, (item, index) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: "swiper-slide", key: index }, [(0, vue.createElementVNode)("div", { class: "slide-title", style: (0, vue.normalizeStyle)({ color: item.attrs.mTextColor }) }, (0, vue.toDisplayString)($options.fallbackText(item.attrs.title)), 5), (0, vue.createElementVNode)("img", { src: $options.fallbackText(item.attrs.imgSrc, "https://cdnimg.vivaia.com/VA/image/Banner/20251215_7953/1215-icon-lefu-pc-green-05.jpg"), alt: "VIVAIA" }, null, 8, _hoisted_12)]); }), 128))]), (0, vue.createElementVNode)("div", { class: "swiper-pagination", style: (0, vue.normalizeStyle)({ "--swiper-pagination-bg": $options.mPaginationColor || "rgba(25, 24, 23, 0.25)", "--swiper-pagination-fill": $options.mFillColor || "#261B02" }) }, null, 4)], 512) ], 4))]); } var NewLookBook_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-a78e6716"]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/ImgOrVideo.vue var _sfc_main$3 = { props: { isPc: { type: Boolean, default: () => false }, sectionData: { type: Object, default: () => {} } }, data() { return {}; }, methods: { fallbackText }, watch: {}, computed: { mainTitle() { return fallbackText(this.isPc ? this.sectionData.titlePc : this.sectionData.titleM); } } }; var _hoisted_1$3 = { class: "video-box" }; var _hoisted_2$1 = { key: 0, class: "common-title" }; var _hoisted_3$1 = { key: 1 }; var _hoisted_4 = ["srcset"]; var _hoisted_5 = ["src"]; var _hoisted_6 = ["src", "poster"]; function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$3, [$props.sectionData.showTitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, (0, vue.toDisplayString)($options.mainTitle), 1)) : (0, vue.createCommentVNode)("", true), !$props.sectionData.isVideo ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("picture", _hoisted_3$1, [(0, vue.createElementVNode)("source", { srcset: $options.fallbackText($props.sectionData.imgUrlM, "https://cdnimg.vivaia.com/VA/image/Banner/20250618_7659/1.png"), media: "(max-width: 768px)" }, null, 8, _hoisted_4), (0, vue.createElementVNode)("img", { class: "video-bog-img", src: $options.fallbackText($props.sectionData.imgUrlPC, "https://cdnimg.vivaia.com/VA/image/Banner/20250618_7659/2.jpg"), alt: "VIVAIA" }, null, 8, _hoisted_5)])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("video", { key: 2, "webkit-playsinline": "", playsinline: "", autoplay: "", muted: "", height: "100%", style: { "height": "100%", "width": "100%", "display": "block" }, src: $options.fallbackText($props.isPc ? $props.sectionData.videoUrlPC : $props.sectionData.videoUrlM, $props.isPc ? "https://cdnimg.vivaia.com/VA/video/Banner/20250618_7659/22.mp4" : "https://cdnimg.vivaia.com/VA/video/Banner/20250618_7659/11.mp4"), poster: $options.fallbackText($props.isPc ? $props.sectionData.imgUrlPC : $props.sectionData.imgUrlM, $props.isPc ? "https://cdnimg.vivaia.com/VA/image/Banner/20250618_7659/2.jpg" : "https://cdnimg.vivaia.com/VA/image/Banner/20250618_7659/1.png"), loop: "" }, null, 8, _hoisted_6))]); } var ImgOrVideo_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-6a82c6ea"]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/AboutUs.vue var _sfc_main$2 = { props: { isPc: { type: Boolean, default: () => false }, sectionData: { type: Object, default: () => {} }, langCode: { type: String } }, data() { return { TextEn: { end_about_title: "About Us", end_about_desc: "VIVAIA was born in 2020 with the vision of bringing environmentally friendly, comfortable, and timelessly designed shoes to the world.
We are committed to freeing women’s feet in a sustainable way.", end_about_desc_m: "VIVAIA was born in 2020 with the vision of bringing
environmentally friendly, comfortable, and timelessly
designed shoes to the world.
We are committed to freeing women’s feet in a
sustainable way." }, TextDe: { end_about_title: "Über uns", end_about_desc: "VIVAIA wurde 2020 mit der Vision gegründet, umweltfreundliche, komfortable und zeitlos designte Schuhe in die Welt zu bringen.
Wir setzen uns dafür ein, die Füße der Frauen auf nachhaltige Weise zu befreien.", end_about_desc_m: "VIVAIA wurde 2020 mit der Vision gegründet, umweltfreundliche, komfortable und zeitlos designte Schuhe in die Welt zu bringen. Wir setzen uns dafür ein, die Füße der Frauen auf nachhaltige Weise zu befreien." }, TextFr: { end_about_title: "À propos de nous", end_about_desc: "VIVAIA est née en 2020 avec la vision d'offrir au monde des chaussures à la fois écoresponsables, confortables et au design intemporel.
Nous nous engageons à libérer les pieds des femmes de manière durable.", end_about_desc_m: "VIVAIA est née en 2020 avec la vision d'offrir au monde des chaussures à la fois écoresponsables, confortables et au design intemporel. Nous nous engageons à libérer les pieds des femmes de manière durable." }, TextEs: { end_about_title: "Sobre Nosotros", end_about_desc: `Fundada en 2020, VIVAIA nació con la visión de desarrollar calzado respetuoso con el medio ambiente, cómodo y de diseño atemporal.
Nuestro compromiso es ofrecer libertad y bienestar a los pies de las mujeres de forma sostenible.`, end_about_desc_m: `Fundada en 2020, VIVAIA nació con la visión de desarrollar calzado respetuoso con el medio ambiente, cómodo y de diseño atemporal. Nuestro compromiso es ofrecer libertad y bienestar a los pies de las mujeres de forma sostenible.` }, TextIt: { end_about_title: "Chi Siamo", end_about_desc: "VIVAIA nasce nel 2020 con l'obiettivo di presentare al mondo scarpe ecosostenibili, comode e dal design senza tempo.
Ci impegniamo a liberare i piedi delle donne in modo sostenibile.", end_about_desc_m: "VIVAIA nasce nel 2020 con l'obiettivo di presentare al mondo scarpe ecosostenibili, comode e dal design senza tempo.Ci impegniamo a liberare i piedi delle donne in modo sostenibile." }, TextKr: { end_about_title: "About Us", end_about_desc: "VIVAIA는 환경 친화적이고 편안하며 디테일한 디자인의 신발을 전 세계에 선보이겠다는 비전을 가지고 2020년에 탄생했습니다.
우리는 지속 가능한 방식으로 각지역 여성들에게 최고의 착화감 신발을 제공하기 위해 최선을 다하고 있습니다.", end_about_desc_m: "VIVAIA는 환경 친화적이고 편안하며 디테일한 디자인의 신발을 전 세계에 선보이겠다는 비전을 가지고 2020년에 탄생했습니다.우리는 지속 가능한 방식으로 각지역 여성들에게 최고의 착화감 신발을 제공하기 위해 최선을 다하고 있습니다." }, TextJp: { end_about_title: "VIVAIAについて", end_about_desc: "VIVAIAは2020年に誕生し、地球に優しく、快適でタイムレスなデザインの靴を世界に発信するというビジョンを掲げております。
私たちは、持続可能性を追求しながら女性の足を解放することを約束します。", end_about_desc_m: "VIVAIAは2020年に誕生し、地球に優しく、快適でタイムレスなデザインの靴を世界に発信するというビジョンを掲げております。私たちは、持続可能性を追求しながら女性の足を解放することを約束します。" } }; }, computed: { title() { return this[`Text${this.langCode.charAt(0).toUpperCase() + this.langCode.slice(1)}`].end_about_title; }, desc() { if (this.isPc) return this[`Text${this.langCode.charAt(0).toUpperCase() + this.langCode.slice(1)}`].end_about_desc; else return this[`Text${this.langCode.charAt(0).toUpperCase() + this.langCode.slice(1)}`].end_about_desc_m; } } }; var _hoisted_1$2 = { class: "end-about" }; var _hoisted_2 = ["innerHTML"]; var _hoisted_3 = ["innerHTML"]; function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$2, [ (0, vue.createElementVNode)("div", { class: "title", innerHTML: $options.title }, null, 8, _hoisted_2), (0, vue.createElementVNode)("div", { class: "desc", innerHTML: $options.desc }, null, 8, _hoisted_3), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("picture", null, [(0, vue.createElementVNode)("source", { srcset: "https://cdnimg.vivaia.com/VA/image/Banner/20241209_7256/brand-m.jpg", media: "(max-width: 768px)" }), (0, vue.createElementVNode)("img", { src: "https://cdnimg.vivaia.com/VA/image/Banner/20241209_7256/brand-pc.jpg", alt: "VIVAIA", loading: "lazy" })], -1)) ]); } //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/components/MainComponent.vue var _sfc_main$1 = { components: { TopBanner: TopBanner_default, HoverAccordion: HoverAccordion_default, LookBook: LookBook_default, NewLookBook: NewLookBook_default, ImgOrVideo: ImgOrVideo_default, AboutUs: /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-e9083df8"]]) }, props: { templateData: { type: Array, default: () => [] }, lang: { type: String, default: () => "en" }, isPc: { type: Boolean, default: true } }, computed: { langClassName() { return getLangClasses(this.lang); } }, methods: { computedIsShow(config) { if ("isShow" in config) return config.isShow; return true; } } }; function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["mainComponent", $options.langClassName]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)($props.templateData, (item) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [$options.computedIsShow(item.attrs) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(item.type), { isPc: $props.isPc, key: item.id, sectionData: item.attrs, langCode: $props.lang }, null, 8, [ "isPc", "sectionData", "langCode" ])) : (0, vue.createCommentVNode)("", true)], 64); }), 256))], 2); } var MainComponent_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1]]); //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/templateJson.ts var defaultValue = { templateSetting: [ { id: 1, tabName: "顶部banner", children: [ { element: "Radio", label: "是否展示", defaultValue: true, field: "isShow", radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "不展示", value: false }] }, { element: "NormalInput", label: "背景图片PC", field: "bgImgPc", placeholder: "请输入PC背景图片链接" }, { element: "NormalInput", label: "背景图片M", field: "bgImgM", placeholder: "请输入M背景图片链接" }, { element: "Radio", label: "文案展示", field: "showTitle", defaultValue: false, related: [ { keyName: "titlePc", default: "" }, { keyName: "titleM", default: "" }, { keyName: "descPc", default: "" }, { keyName: "descM", default: "" }, { keyName: "PcTitleLayout", default: "center" }, { keyName: "titleColorPc", default: "" }, { keyName: "titleColorM", default: "" }, { keyName: "topPc", default: 30 }, { keyName: "leftPc", default: 30 }, { keyName: "topM", default: 10 }, { keyName: "leftM", default: 10 } ], radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }] }, { element: "TextInput", label: "标题PC", field: "titlePc", based: "showTitle" }, { element: "TextInput", label: "描述PC", field: "descPc", based: "showTitle", tips: "不配置就没有描述文案" }, { element: "Radio", label: "PC文案排版", defaultValue: "center", field: "PcTitleLayout", based: "showTitle", radioOptions: [ { id: 1, label: "居中", value: "center" }, { id: 2, label: "左对齐", value: "left" }, { id: 3, label: "右对齐", value: "right" } ] }, { element: "ColorPicker", label: "文案颜色Pc", field: "titleColorPc", based: "showTitle" }, { element: "TextInput", label: "标题M", field: "titleM", based: "showTitle" }, { element: "TextInput", label: "描述M", field: "descM", based: "showTitle", tips: "不配置就没有描述文案" }, { element: "ColorPicker", label: "文案颜色M", field: "titleColorM", based: "showTitle" }, { element: "Slider", label: "上边距PC", field: "topPc", tips: "文案位置距离图片顶部距离(%)", based: "showTitle" }, { element: "Slider", label: "左边距PC", field: "leftPc", tips: "文案位置距离图片左边距离(%)", based: "showTitle" }, { element: "Slider", label: "上边距M", field: "topM", tips: "文案位置距离图片顶部距离(%),左右默认居中", based: "showTitle" } ] }, { id: 2, tabName: "商品手风琴", children: [ { element: "Radio", label: "是否展示", field: "isShow", defaultValue: true, radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }] }, { element: "Radio", label: "展示标题", field: "showTitle", defaultValue: true, radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }], related: [{ keyName: "titlePc" }, { keyName: "titleM" }] }, { element: "TextInput", label: "标题PC", field: "titlePc", based: "showTitle" }, { element: "TextInput", label: "标题M", field: "titleM", based: "showTitle" }, { element: "NormalInput", label: "背景图片PC", field: "bgImgPc", placeholder: "请输入PC背景图片链接" }, { element: "NormalInput", label: "背景图片M", field: "bgImgM", placeholder: "请输入M背景图片链接" }, { label: "背景颜色", element: "ColorPicker", field: "bgColor", tips: "背景颜色配置后PC和M通用" }, { element: "OptionSlide", label: "功能Slide", field: "optionSlide", options: [{ element: "Radio", label: "slide数量", field: "slideNumber", radioOptions: [{ id: 1, label: "3个", value: 3 }, { id: 2, label: "4个", value: 4 }] }], slideOptions: [ { element: "Radio", label: "视频/图片", field: "isVideo", defaultValue: false, related: [{ keyName: "videoUrl", default: "" }], radioOptions: [{ id: 1, label: "视频", value: true }, { id: 2, label: "图片", value: false }] }, { element: "NormalInput", label: "视频PC", field: "videoUrl", placeholder: "请输入PC视频链接", based: "isVideo" }, { element: "NormalInput", label: "视频M", field: "videoUrlM", placeholder: "请输入M视频链接", based: "isVideo" }, { element: "NormalInput", label: "封面PC", placeholder: "请输入PC封面链接", field: "posterUrl" }, { element: "NormalInput", label: "封面M", placeholder: "请输入M封面链接", field: "posterUrlM" }, { element: "TextInput", label: "标题PC", field: "titlePc" }, { element: "TextInput", label: "描述Pc", field: "descPc" }, { element: "TextInput", label: "标题M", field: "titleM" }, { element: "TextInput", label: "描述M", field: "descM" }, { element: "ColorPicker", label: "文案颜色PC", field: "textColor", tips: "配置后PC颜色固定" }, { element: "ColorPicker", label: "文案颜色M", field: "textColorM", tips: "配置后M颜色固定" } ] } ] }, { id: 3, tabName: "LookBook", children: [ { element: "Radio", label: "是否展示", field: "isShow", defaultValue: true, radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }] }, { element: "TextInput", label: "标题", field: "mainTitle", tips: "Pc和M通用,不能换行" }, { element: "ColorPicker", label: "标题颜色", field: "mainTitleColor", tips: "Pc和M通用" }, { element: "Alterable", label: "各项配置", field: "Alterable", lengthRange: [1, 10], options: [ { element: "Radio", label: "背景类型", field: "backgroundType", defaultValue: "color", radioOptions: [{ id: 1, label: "背景色", value: "color" }, { id: 2, label: "背景图", value: "img" }] }, { element: "ColorPicker", label: "背景颜色", field: "backgroundColor", based: "backgroundType", basedValue: "color", tips: "Pc和M通用" }, { element: "NormalInput", label: "背景图PC", field: "bgImgPc", placeholder: "请输入PC背景图片链接", based: "backgroundType", basedValue: "img" }, { element: "NormalInput", label: "背景图M", field: "bgImgM", placeholder: "请输入M背景图片链接", based: "backgroundType", basedValue: "img" }, { element: "ColorPicker", label: "PC文案颜色", field: "TextColorPc" }, { element: "ColorPicker", label: "进度条背景(M端)", field: "paginationColorM", showAlpha: true, tips: "M端下方进度条背景颜色" }, { element: "ColorPicker", label: "进度条颜色(M端)", field: "mFillColor", tips: "M端下方进度条填充颜色" } ], slideOptions: [ { element: "TextInput", label: "标题", field: "title", tips: "Pc和M通用,不能换行" }, { element: "ColorPicker", label: "标题颜色M", field: "TextColorM", tips: "M端兼容图片上的文案改色,默认白色" }, { element: "NormalInput", label: "PC图片", field: "pcImg" }, { element: "NormalInput", label: "M图片", field: "mImg" } ] } ] }, { id: 4, tabName: "New LookBook", children: [ { element: "Radio", label: "是否展示", field: "isShow", defaultValue: true, radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }] }, { element: "NormalInput", label: "背景图PC", field: "bgImgPc", placeholder: "请输入PC背景图片链接" }, { element: "TextInput", label: "标题Pc", field: "mainTitlePc" }, { element: "TextInput", label: "描述Pc", field: "descPc" }, { element: "ColorPicker", label: "标题描述颜色(Pc)", field: "mainTitlePcColor" }, { element: "ColorPicker", label: "背景颜色M", field: "bgImgColor", tips: "M端仅支持背景颜色" }, { element: "TextInput", label: "标题M", field: "mainTitleM" }, { element: "TextInput", label: "描述M", field: "descM" }, { element: "ColorPicker", label: "标题描述颜色(M)", field: "mainTitleMColor" }, { element: "Alterable", label: "各项配置", field: "Alterable", options: [ { element: "ColorPicker", label: "PC列表颜色", field: "listColor", tips: "下方列表的文案颜色" }, { element: "ColorPicker", label: "进度条背景(M端)", field: "progressBarBgColor", showAlpha: true, tips: "M端下方进度条背景颜色" }, { element: "ColorPicker", label: "进度条颜色(M端)", field: "progressBarFillColor", tips: "M端下方进度条填充颜色" } ], slideOptions: [ { element: "TextInput", label: "标题", field: "title", tips: "Pc和M通用,不换行" }, { element: "NormalInput", label: "图片链接", field: "imgSrc", placeholder: "请输入图片链接", tips: "PC和M为同一张图" }, { element: "ColorPicker", label: "文案颜色M", field: "mTextColor", tips: "M端图上文案颜色" } ] } ] }, { id: 5, tabName: "图片/视频", children: [ { element: "Radio", label: "展示板块", defaultValue: true, field: "isShow", radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "不展示", value: false }] }, { element: "Radio", label: "标题展示", field: "showTitle", defaultValue: false, related: [{ keyName: "titlePc", default: "" }, { keyName: "titleM", default: "" }], radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "隐藏", value: false }] }, { element: "TextInput", label: "标题PC", field: "titlePc", based: "showTitle" }, { element: "TextInput", label: "标题M", field: "titleM", based: "showTitle" }, { element: "Radio", label: "视频/图片", field: "isVideo", defaultValue: true, related: [{ keyName: "videoUrlPC", default: "" }, { keyName: "videoUrlM", default: "" }], radioOptions: [{ id: 1, label: "视频", value: true }, { id: 2, label: "图片", value: false }] }, { element: "NormalInput", label: "PC封面", field: "imgUrlPC" }, { element: "NormalInput", label: "M封面", field: "imgUrlM" }, { element: "NormalInput", label: "PC视频", field: "videoUrlPC", based: "isVideo" }, { element: "NormalInput", label: "M视频", field: "videoUrlM", based: "isVideo" } ] }, { id: 6, tabName: "About Us", children: [{ element: "Radio", label: "展示板块", defaultValue: true, field: "isShow", radioOptions: [{ id: 1, label: "展示", value: true }, { id: 2, label: "不展示", value: false }] }] } ], defaultValue: [ { id: 1, type: "TopBanner", attrs: { isShow: true, bgColor: "#F8F7F5", bgImgPc: "", bgImgM: "", showTitle: true, titlePc: "", descPc: "", PcTitleLayout: "center", titleColorPc: "", titleM: "", descM: "", titleColorM: "", topPc: 0, leftPc: 0, topM: 0 } }, { id: 2, type: "HoverAccordion", attrs: { bgImgPc: "https://cdnimg.vivaia.com/VA/image/Banner/20260318_8126/20260310-Lace%20-Cristina-pc-8.jpg", bgImgM: "https://cdnimg.vivaia.com/VA/image/Banner/20260318_8126/20260310-lace-Cristina-m-9.jpg", bgColor: "#FCFBF7", optionSlide: { attrs: { slideNumber: 3, mergeOption: ["slideNumber"], children: [ { id: 1, attrs: { isVideo: false, videoUrl: "", videoUrlM: "", posterUrl: "", posterUrlM: "", titlePc: "", titleM: "", descPc: "", descM: "", textColor: "" } }, { id: 2, attrs: { isVideo: false, videoUrl: "", videoUrlM: "", posterUrl: "", posterUrlM: "", titlePc: "", titleM: "", descPc: "", descM: "", textColor: "" } }, { id: 3, attrs: { isVideo: false, videoUrl: "", videoUrlM: "", posterUrl: "", posterUrlM: "", titlePc: "", titleM: "", descPc: "", descM: "", textColor: "" } } ] } } } }, { id: 3, type: "LookBook", attrs: { isShow: true, mainTitle: "", mainTitleColor: "", Alterable: { attrs: { backgroundType: "color", backgroundColor: "", bgImgPc: "", bgImgM: "", TextColorPc: "", paginationColorM: "", mFillColor: "", children: [{ id: 1, attrs: { title: "", TextColorM: "", pcImg: "", mImg: "" } }] } } } }, { id: 4, type: "NewLookBook", attrs: { isShow: true, bgImgPc: "", bgImgColor: "", mainTitlePc: "", descPc: "", mainTitlePcColor: "", mainTitleM: "", descM: "", mainTitleMColor: "", Alterable: { attrs: { listColor: "", progressBarBgColor: "", progressBarFillColor: "", children: [{ id: 1, attrs: { title: "", imgSrc: "", mTextColor: "" } }] } } } }, { id: 5, type: "ImgOrVideo", attrs: { isShow: true, isVideo: false, showTitle: false, titlePc: "", titleM: "", imgUrlPC: "", imgUrlM: "", videoUrlPC: "", videoUrlM: "" } }, { id: 6, type: "AboutUs", attrs: { isShow: true } } ] }; //#endregion //#region src/templates/2026SS/26SS-新增调整Myriel/App.vue var defaultConfig = defaultValue.config || []; var _sfc_main = { components: { MainComponent: MainComponent_default }, props: { config: { type: Array, default: () => [] }, lang: { type: String, default: void 0 }, isPc: { type: Boolean, default: true } }, data() { const currentLang = getLang(this.lang || "en"); return { className: getLangClasses(currentLang), currentLang, isInit: false, isMounted: false, previewMessageHandler: null, templateData: this.config?.length ? this.config : defaultConfig, renderIsPc: true }; }, created() { if (this.config?.length) return; if (typeof window === "undefined") return; if (window.pageData) { if (window.pageData?.length) this.templateData = window.pageData; } else this.initFunc(); }, mounted() { this.isMounted = true; this.renderIsPc = this.isPc; }, beforeUnmount() { if (this.previewMessageHandler && typeof window !== "undefined") window.removeEventListener("message", this.previewMessageHandler); }, methods: { initFunc() { if (typeof window === "undefined") return; this.previewMessageHandler = (event) => { const pageData = event.data.data; if (event.data.langCode) { this.currentLang = event.data.langCode; this.className = getLangClasses(this.currentLang); } if (pageData?.length) this.templateData = JSON.parse(JSON.stringify(pageData)); else this.isInit = true; }; window.addEventListener("message", this.previewMessageHandler); } }, watch: { config: { handler(value) { if (value?.length) this.templateData = value; }, deep: true }, lang(value) { this.currentLang = getLang(value || "en"); this.className = getLangClasses(this.currentLang); }, isPc(value) { if (this.isMounted) this.renderIsPc = value; } } }; var _hoisted_1$1 = { id: "app", class: "lp-app" }; function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { const _component_MainComponent = (0, vue.resolveComponent)("MainComponent"); return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.createVNode)(_component_MainComponent, { class: (0, vue.normalizeClass)($data.className), templateData: $data.templateData, lang: $data.currentLang, isPc: $data.renderIsPc, isInit: $data.isInit }, null, 8, [ "class", "templateData", "lang", "isPc", "isInit" ])]); } var App_default$1 = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]); //#endregion //#region src/generated/templateScope.ts var templateScope = "26SS-新增调整Myriel"; function cloneValue(value) { if (typeof structuredClone === "function") return structuredClone(value); return JSON.parse(JSON.stringify(value)); } function isEmptyValue(value) { return value === null || value === void 0 || value === ""; } function fillEmptyFromFallback(target, source) { if (isEmptyValue(target)) return isEmptyValue(source) ? target : cloneValue(source); if (Array.isArray(target)) { if (!Array.isArray(source)) return target; const length = Math.max(target.length, source.length); for (let index = 0; index < length; index += 1) target[index] = fillEmptyFromFallback(target[index], source[index]); return target; } if (typeof target === "object" && typeof source === "object" && source !== null && !Array.isArray(source)) { const targetRecord = target; const sourceRecord = source; Object.keys(sourceRecord).forEach((key) => { targetRecord[key] = fillEmptyFromFallback(targetRecord[key], sourceRecord[key]); }); return target; } return target; } function resolveConfigFromLanguageMap(input, lang = "en") { const preferred = input[lang]; const fallback = input.en; if (Array.isArray(preferred)) { const resolved = cloneValue(preferred); if (preferred !== fallback && Array.isArray(fallback)) return fillEmptyFromFallback(resolved, fallback); return resolved; } if (Array.isArray(fallback)) return cloneValue(fallback); const firstConfig = Object.values(input).find(Array.isArray); return firstConfig ? cloneValue(firstConfig) : null; } function toTemplateConfig(input, lang = "en") { if (Array.isArray(input)) return cloneValue(input); if (input && typeof input === "object") { const candidate = input; if (candidate.defaultValue) return toTemplateConfig(candidate.defaultValue, lang); if (candidate.config) return toTemplateConfig(candidate.config, lang); return resolveConfigFromLanguageMap(input, lang) ?? []; } return []; } function getViewportIsPc() { if (typeof window === "undefined") return false; return (window.visualViewport?.width ?? window.innerWidth) > 768; } function getPreviewMeta() { return { lang: typeof window === "undefined" ? "en" : window.vivaiaDetailLangCode ?? "en", isPc: typeof window === "undefined" ? false : window.vivaiaDetailIsPc ?? false }; } //#endregion //#region src/App.vue?vue&type=script&setup=true&lang.ts var _hoisted_1 = ["data-template-scope"]; //#endregion //#region src/App.vue var App_default = /* @__PURE__ */ (0, vue.defineComponent)({ inheritAttrs: false, __name: "App", props: { config: {}, lang: {}, isPc: { type: Boolean }, previewState: {} }, setup(__props) { const props = __props; const instance = (0, vue.getCurrentInstance)(); function hasPassedProp(camelKey) { const rawProps = instance?.vnode.props ?? {}; const kebabKey = camelKey.replace(/[A-Z]/g, "-$&").toLowerCase(); return Object.prototype.hasOwnProperty.call(rawProps, camelKey) || Object.prototype.hasOwnProperty.call(rawProps, kebabKey); } function getInitialPreviewMeta() { if (typeof window === "undefined") return { lang: "en", isPc: false }; return getPreviewMeta(); } function getInitialConfigInput() { if (props.config !== void 0) return props.config; if (typeof window !== "undefined" && window.pageData !== void 0) return window.pageData; return defaultValue; } const previewMeta = getInitialPreviewMeta(); const resolveLang = () => props.previewState?.lang ?? props.lang ?? previewMeta.lang; const resolveIsPc = () => props.previewState?.isPc ?? (hasPassedProp("isPc") ? props.isPc : void 0) ?? previewMeta.isPc; const innerLang = (0, vue.ref)(resolveLang()); const innerIsPc = (0, vue.ref)(resolveIsPc()); const innerConfig = (0, vue.ref)(toTemplateConfig(getInitialConfigInput(), innerLang.value)); const syncViewportIsPc = () => { if (typeof window === "undefined") return; const nextIsPc = getViewportIsPc(); window.vivaiaDetailIsPc = nextIsPc; innerIsPc.value = nextIsPc; }; (0, vue.watch)(() => [ props.config, props.lang, props.isPc, props.previewState?.lang, props.previewState?.isPc ], () => { const nextLang = resolveLang(); innerLang.value = nextLang; innerIsPc.value = resolveIsPc(); if (props.config !== void 0) innerConfig.value = toTemplateConfig(props.config, nextLang); }, { deep: true }); const handleMessage = (event) => { const msg = event.data; if (!msg || msg.type !== "designData") return; const langCode = msg.previewState?.lang || msg.langCode || "en"; const nextIsPc = typeof msg.previewState?.isPc === "boolean" ? msg.previewState.isPc : typeof msg.isPc === "boolean" ? msg.isPc : void 0; window.vivaiaDetailLangCode = langCode; innerLang.value = langCode; if (typeof nextIsPc === "boolean") { window.vivaiaDetailIsPc = nextIsPc; innerIsPc.value = nextIsPc; } if (Object.prototype.hasOwnProperty.call(msg, "data")) { window.pageData = msg.data; innerConfig.value = toTemplateConfig(msg.data, langCode); } }; (0, vue.onMounted)(() => { syncViewportIsPc(); window.addEventListener("message", handleMessage); window.addEventListener("resize", syncViewportIsPc); window.visualViewport?.addEventListener("resize", syncViewportIsPc); }); (0, vue.onUnmounted)(() => { window.removeEventListener("message", handleMessage); window.removeEventListener("resize", syncViewportIsPc); window.visualViewport?.removeEventListener("resize", syncViewportIsPc); }); return (_ctx, _cache) => { return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: "good-detail-template", "data-flag": "new-good-detail", "data-template-scope": (0, vue.unref)(templateScope) }, [(0, vue.createVNode)(App_default$1, { config: innerConfig.value, lang: innerLang.value, isPc: innerIsPc.value }, null, 8, [ "config", "lang", "isPc" ])], 8, _hoisted_1); }; } }); //#endregion //#region src/entry-client.ts var TEMPLATE_ROOT_SELECTOR = "[data-good-detail-root]"; var SSR_IS_PC_ATTRIBUTE = "data-good-detail-ssr-is-pc"; function resolveTemplateRoot() { let sibling = document.currentScript?.previousElementSibling ?? null; while (sibling) { if (sibling.matches(TEMPLATE_ROOT_SELECTOR)) return sibling; sibling = sibling.previousElementSibling; } const roots = document.querySelectorAll(TEMPLATE_ROOT_SELECTOR); return roots.item(roots.length - 1) ?? document.getElementById("app"); } function resolveSsrIsPc(root) { const serializedValue = root.getAttribute(SSR_IS_PC_ATTRIBUTE); if (serializedValue === "true") return true; if (serializedValue === "false") return false; return false; } var templateRoot = resolveTemplateRoot(); if (!templateRoot) throw new Error("未找到商详模板挂载容器"); (window.__goodDetailPreviewRuntime ? (0, vue.createApp)(App_default) : (0, vue.createSSRApp)(App_default, { isPc: resolveSsrIsPc(templateRoot) })).mount(templateRoot); if (window.parent !== window) window.parent.postMessage({ type: "template-ready" }, "*"); //#endregion })(Vue3, Swiper);