@shopware/cms-base-layer 2.0.0 → 3.0.0

package/app/components/public/cms/CmsPage.vue

@@ -8,12 +8,15 @@ import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
 import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
+import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 
 const props = defineProps<{
   content: Schemas["CmsPage"];
 }>();
 
 const { routeName } = useNavigationContext();
+const appConfig = useTypedAppConfig();
 
 // Function to initialize or update listing context
 function updateListingContext(content: Schemas["CmsPage"]) {
@@ -36,6 +39,8 @@ const cmsSections = computed<Schemas["CmsSection"][]>(() => {
   return props.content?.sections || [];
 });
 
+useLcpImagePreload(props.content?.sections || []);
+
 const DynamicRender = () => {
   const componentsMap = cmsSections.value.map((section) => {
     return {
@@ -56,6 +61,7 @@ const DynamicRender = () => {
       layoutStyles.backgroundImage = getBackgroundImageUrl(
         layoutStyles.backgroundImage,
         componentObject.section,
+        appConfig.backgroundImage,
       );
     }
 
@@ -64,6 +70,7 @@ const DynamicRender = () => {
       class: {
         ...cssClasses,
         "max-w-screen-2xl w-full mx-auto": layoutStyles?.sizingMode === "boxed",
+        "w-full": layoutStyles?.sizingMode === "full_width",
       },
       style: {
         backgroundColor: layoutStyles?.backgroundColor,

package/app/components/public/cms/FrontendAccountCustomerGroupRegistrationPage.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = defineProps<{
+  navigationId: string;
+}>();
+
+const { apiClient } = useShopwareContext();
+
+const { data: registrationResponse } = await useAsyncData(
+  `cmsNavigation${props.navigationId}`,
+  async () => {
+    const response = await apiClient.invoke(
+      "getCustomerGroupRegistrationInfo get /customer-group-registration/config/{customerGroupId}",
+      {
+        pathParams: { customerGroupId: props.navigationId },
+      },
+    );
+    return response.data || {};
+  },
+);
+
+useSeoMeta({
+  description: () =>
+    registrationResponse.value?.translated?.registrationSeoMetaDescription ||
+    undefined,
+});
+</script>
+
+<template>
+  <div class="container mx-auto bg-surface-surface flex flex-col mt-10">
+    <h1
+      class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-surface-on-surface md:text-3xl lg:text-5xl text-center"
+    >
+      {{ registrationResponse?.translated.registrationTitle }}
+    </h1>
+    <div
+      v-if="registrationResponse?.registrationActive"
+      class="text-lg font-normal text-surface-on-surface-variant lg:text-xl"
+    >
+      <div
+        v-if="registrationResponse?.translated.registrationIntroduction"
+        class="px-6 sm:px-4 mb-6"
+        v-html="registrationResponse.translated.registrationIntroduction"
+      />
+      <AccountRegistrationForm
+        :customer-group-id="registrationResponse?.id"
+        :company-only="
+          registrationResponse?.translated?.registrationOnlyCompanyRegistration
+        "
+      />
+    </div>
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockCenterText.vue

@@ -21,6 +21,6 @@ const slotCenterContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-center-text .cms-element-image {
-  @apply aspect-square object-cover;
+  @apply self-stretch min-h-12;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageText.vue

@@ -12,12 +12,12 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <div class="flex flex-col md:flex-row justify-start items-start gap-6 w-full">
-    <div class="w-full md:flex-1 p-4">
-      <CmsGenericElement :content="leftContent" />
+  <div class="flex flex-col md:flex-row justify-start items-stretch gap-6 w-full">
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="leftContent" class="flex-1" />
     </div>
-    <div class="w-full md:flex-1 p-4">
-      <CmsGenericElement :content="rightContent" />
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="rightContent" class="flex-1" />
     </div>
   </div>
 </template>

package/app/components/public/cms/block/CmsBlockTextOnImage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CmsBlockTextOnImage } from "@shopware/composables";
-import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -8,23 +7,17 @@ const props = defineProps<{
 }>();
 
 const { getSlotContent } = useCmsBlock(props.content);
-const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 
 const slotContent = getSlotContent("content");
 </script>
 
 <template>
   <div
-    class="cms-block-text-on-image min-h-[500px] flex items-center justify-center py-20 px-4 bg-cover bg-center bg-no-repeat relative"
-    :class="cssClasses"
-    :style="layoutStyles as any"
+    class="cms-block-text-on-image min-h-[500px] py-20 bg-cover bg-bottom bg-no-repeat relative"
   >
-    <div class="relative z-10 text-center max-w-6xl">
-      <CmsGenericElement
-        v-if="slotContent"
-        :content="slotContent"
- 
-      />
-    </div>
+    <CmsGenericElement
+      v-if="slotContent"
+      :content="slotContent"
+    />
   </div>
 </template>

package/app/components/public/cms/element/CmsElementBuyBox.vue

@@ -56,7 +56,7 @@ const { product, changeVariant } = useProduct(
   props.content.data.product,
   props.content.data.configuratorSettings || [],
 );
-const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
+const { unitPrice, price, tierPrices, hasListPrice } = useProductPrice(product);
 const regulationPrice = computed(() => price.value?.regulationPrice?.price);
 const { getFormattedPrice } = usePrice();
 const referencePrice = computed(
@@ -79,13 +79,13 @@ const productName = computed(() => product.value?.translated?.name || "");
                 {{ productName }}</div>
 
             <div v-if="tierPrices.length <= 1">
-                <SwSharedPrice v-if="isListPrice"
+                <SwSharedPrice v-if="hasListPrice"
                     class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
                     :value="price?.listPrice?.price" />
                 <SwSharedPrice v-if="unitPrice"
                     class="text-surface-on-surface text-base font-bold leading-normal"
                     :class="{
-                        'text-red': isListPrice,
+                        'text-red': hasListPrice,
                     }" :value="unitPrice" />
                 <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
                     {{ translations.product.previously }}

package/app/components/public/cms/element/CmsElementCrossSelling.vue

@@ -4,7 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { useElementSize } from "@vueuse/core";
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -46,9 +46,24 @@ const crossSellCollections = computed(() => {
 });
 
 const { width } = useElementSize(crossSellContainer);
+const slotCount = inject<number>("cms-block-slot-count", 1);
+const elMinWidth = computed(
+  () => +(config.value.minWidth?.value.replace(/\D+/g, "") || 300),
+);
 const slidesToShow = computed(() => {
-  const minWidth = +(config.value.minWidth?.value.replace(/\D+/g, "") || 0);
-  return Math.floor(width.value / (minWidth * 1.2));
+  // SSR: useElementSize returns 0, fallback to 1200px estimate divided by slot count
+  const containerWidth = width.value || 1200 / slotCount;
+  return Math.max(1, Math.floor(containerWidth / elMinWidth.value));
+});
+
+// Responsive SSR breakpoints: scale by slotCount since container is ~1/slotCount of viewport
+const ssrBreakpoints = computed(() => {
+  const max = slidesToShow.value;
+  const bp: Record<string, number> = {};
+  for (let n = 2; n <= max; n++) {
+    bp[`(min-width: ${elMinWidth.value * n * slotCount}px)`] = n;
+  }
+  return bp;
 });
 
 const toggleTab = (index: number) => {
@@ -80,6 +95,7 @@ const toggleTab = (index: number) => {
         :slides-to-show="slidesToShow"
         :slides-to-scroll="1"
         :autoplay="false"
+        :ssr-breakpoints="ssrBreakpoints"
       >
         <SwProductCard
           v-for="product of crossSellCollections[currentTabIndex]?.products"

package/app/components/public/cms/element/CmsElementImage.vue

@@ -3,7 +3,7 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import { buildUrlPrefix, encodeUrlPath } from "@shopware/helpers";
+import { buildUrlPrefix } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
 import { computed, defineAsyncComponent, useTemplateRef } from "vue";
 import { useCmsElementImage, useUrlResolver } from "#imports";
@@ -25,44 +25,19 @@ const {
   mimeType,
 } = useCmsElementImage(props.content);
 
-const DEFAULT_THUMBNAIL_SIZE = 10;
 const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
 function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
+  return Math.ceil(num / 100) * 100;
 }
 
-const srcPath = computed(() => {
-  if (!imageAttrs.value.src) return "";
-
-  try {
-    // Encode the URL first to handle special characters
-    const encodedUrl = encodeUrlPath(imageAttrs.value.src);
-    const url = new URL(encodedUrl);
-
-    // Only add size parameters if dimensions are available (after mount)
-    // This prevents hydration mismatch
-    const w = roundUp(width.value);
-    const h = roundUp(height.value);
-
-    if (w > DEFAULT_THUMBNAIL_SIZE || h > DEFAULT_THUMBNAIL_SIZE) {
-      if (width.value > height.value) {
-        url.searchParams.set("width", String(w));
-      } else {
-        url.searchParams.set("height", String(h));
-      }
-    }
-
-    // Add fit parameter
-    url.searchParams.set("fit", "crop,smart");
-
-    return url.toString();
-  } catch {
-    // Fallback if URL parsing fails
-    return imageAttrs.value.src;
-  }
+const imageSize = computed(() => {
+  const containerSize = Math.max(width.value || 0, height.value || 0);
+  if (!containerSize) return undefined;
+  return roundUp(containerSize * 2);
 });
+
 const imageComputedContainerAttrs = computed(() => {
   const imageAttrsCopy = Object.assign({}, imageContainerAttrs.value);
   if (imageAttrsCopy?.href) {
@@ -114,16 +89,18 @@ const SwMedia3D = computed(() => {
       ref="imageElement"
       preset="productDetail"
       loading="lazy"
+      :width="imageSize"
+      :height="imageSize"
       :class="{
-        'w-full h-full': !imageGallery,
+        'w-full': !imageGallery,
+        'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),
         'w-4/5': imageGallery,
         'absolute left-0 top-0': ['cover', 'stretch'].includes(displayMode),
         'object-cover': displayMode === 'cover',
         'object-contain': imageGallery || displayMode !== 'cover',
       }"
       :alt="imageAttrs.alt"
-      :src="srcPath"
-      :srcset="imageAttrs.srcset"
+      :src="imageAttrs.src"
     />
   </component>
 </template>

package/app/components/public/cms/element/CmsElementImageGallery.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
 import type { CmsElementImageGallery } from "@shopware/composables";
-import { computed, ref } from "vue";
-import { useCmsElementConfig } from "#imports";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useCmsElementConfig, useImagePlaceholder } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
-const props = withDefaults(
-  defineProps<{
-    content: CmsElementImageGallery;
-    slidesToShow?: number;
-    slidesToScroll?: number;
-  }>(),
-  {
-    slidesToShow: 5,
-    slidesToScroll: 4,
-  },
+// Load SwMedia3D only on client-side to avoid SSR issues with three.js packages
+const SwMedia3DAsync = defineAsyncComponent(
+  () => import("../../../SwMedia3D.vue"),
 );
 
+const props = defineProps<{
+  content: CmsElementImageGallery;
+}>();
+
 const { getConfigValue } = useCmsElementConfig(props.content);
 
+const DEFAULT_MIN_HEIGHT = "500px";
+const DEFAULT_NAVIGATION = "inside";
+
+const minHeight = computed(
+  () => getConfigValue("minHeight") || DEFAULT_MIN_HEIGHT,
+);
+const navigationArrows = computed(
+  () => getConfigValue("navigationArrows") || DEFAULT_NAVIGATION,
+);
+const navigationDots = computed(
+  () => getConfigValue("navigationDots") || DEFAULT_NAVIGATION,
+);
+
 const currentIndex = ref(0);
 const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
+const placeholderSvg = useImagePlaceholder();
 
 function goToSlide(index: number) {
   if (index >= 0 && index < mediaGallery.value.length) {
@@ -43,7 +54,7 @@ const currentImage = computed(() => {
   return mediaGallery.value[currentIndex.value]?.media;
 });
 
-// Touch event handling for mobile swipe gestures - mobile
+// Touch event handling for mobile swipe gestures
 const touchStartX = ref(0);
 const touchEndX = ref(0);
 
@@ -57,77 +68,133 @@ function onTouchMove(event: TouchEvent) {
 
 function onTouchEnd() {
   const deltaX = touchEndX.value - touchStartX.value;
-
-  // Define a threshold for swipe detection
   const threshold = 50; // pixels
 
   if (Math.abs(deltaX) > threshold) {
     if (deltaX < 0) {
-      // Swipe Left
       next();
     } else {
-      // Swipe Right
       previous();
     }
   }
 
-  // Reset values
   touchStartX.value = 0;
   touchEndX.value = 0;
 }
 </script>
 
 <template>
-  <div class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto">
+  <div
+    class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto"
+  >
     <div class="w-full">
       <!-- Main Image Display -->
-
-      <div class="w-full h-[400px] sm:h-[500px] lg:h-[600px] xl:h-[700px] relative overflow-hidden rounded-lg"
-        @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+      <div
+        class="w-full relative overflow-hidden"
+        :style="{ minHeight }"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
         <Transition name="gallery-fade" mode="out-in">
-          <div v-if="currentImage && isSpatial(currentImage)" class="w-full h-full relative">
-            <CmsElementImageGallery3dPlaceholder class="w-full h-full absolute inset-0 object-cover" />
-            <span class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white">
-              3D
-            </span>
+          <!-- 3D media -->
+          <div
+            v-if="currentImage && isSpatial(currentImage)"
+            :key="currentImage.url + '-3d'"
+            class="w-full h-full relative"
+             :style="{ minHeight }"
+          >
+            <client-only>
+              <SwMedia3DAsync :src="currentImage.url" />
+              <template #fallback>
+                <CmsElementImageGallery3dPlaceholder
+                  class="w-full h-full absolute inset-0 object-cover"
+                />
+                <span
+                  class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white"
+                >
+                  3D
+                </span>
+              </template>
+            </client-only>
           </div>
-          <NuxtImg v-else-if="currentImage" preset="hero" loading="lazy"
-            class="w-full h-full absolute inset-0 object-cover" :src="currentImage.url"
-            :key="currentImage.url" :alt="currentImage.alt || 'Product image'" />
-          <NuxtImg v-else preset="hero" class="w-full h-full absolute inset-0 object-cover"
-            src="https://placehold.co/600x500" alt="Placeholder image" />
+          <!-- Regular image -->
+          <NuxtImg
+            v-else-if="currentImage"
+            :key="currentImage.url"
+            preset="hero"
+            loading="lazy"
+            class="w-full h-full absolute inset-0 object-cover"
+            :placeholder="placeholderSvg"
+            :src="currentImage.url"
+            :alt="currentImage.alt || 'Product image'"
+          />
+          <!-- Placeholder -->
+          <img
+            v-else
+            class="w-full h-full absolute inset-0 object-cover"
+            :src="placeholderSvg"
+            alt="Placeholder image"
+          />
         </Transition>
-
       </div>
+
       <!-- Navigation Arrows -->
-      <div v-if="mediaGallery.length > 1"
-        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none">
+      <div
+        v-if="mediaGallery.length > 1 && navigationArrows !== 'none'"
+        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none"
+      >
         <!-- Previous Button -->
         <button
-          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
-          :disabled="currentIndex === 0" @click="previous" aria-label="Previous image">
-          <div class="flex items-center justify-center w-full h-full">
-            <div class="i-carbon-chevron-left w-5 h-5 text-brand-on-tertiary"></div>
-          </div>
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === 0"
+          aria-label="Previous image"
+          @click="previous"
+        >
+          <SwChevronIcon direction="left" />
         </button>
 
         <!-- Next Button -->
         <button
-          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
-          :disabled="currentIndex === mediaGallery.length - 1" @click="next" aria-label="Next image">
-          <div class="flex items-center justify-center w-full h-full">
-            <div class="i-carbon-chevron-right w-5 h-5 text-brand-on-tertiary"></div>
-          </div>
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === mediaGallery.length - 1"
+          aria-label="Next image"
+          @click="next"
+        >
+          <SwChevronIcon direction="right" />
         </button>
       </div>
 
       <!-- Dot Indicators -->
-      <div v-if="mediaGallery.length > 1" class="flex justify-center items-center gap-2 mt-2">
-        <button v-for="(image, index) in mediaGallery" :key="image.media.url"
-          class="relative rounded-full transition-all duration-200 hover:scale-110" :class="{
+      <div
+        v-if="mediaGallery.length > 1 && navigationDots !== 'none'"
+        :class="[
+          'flex justify-center items-center gap-2',
+          navigationDots === 'outside' ? 'mt-4' : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
+        ]"
+      >
+        <button
+          v-for="(image, index) in mediaGallery"
+          :key="image.media?.url"
+          class="relative rounded-full transition-all duration-200 hover:scale-110"
+          :class="{
             'w-6 h-2 bg-surface-on-surface-variant': index === currentIndex,
-            'w-2 h-2 bg-surface-surface-container-highest': index !== currentIndex
-          }" @click="goToSlide(index)" :aria-label="`Go to image ${index + 1}`" />
+            'w-2 h-2 bg-surface-surface-container-highest':
+              index !== currentIndex,
+          }"
+          :aria-label="`Go to image ${index + 1}`"
+          @click="goToSlide(index)"
+        />
       </div>
     </div>
   </div>

package/app/components/public/cms/element/CmsElementProductBox.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from "@shopware/composables";
 import { computed } from "vue";
+import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
   content: CmsElementProductBox;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const product = computed(() => props.content.data?.product || {});
 </script>
 
 <template>
-  <SwProductCard v-if="product?.id" :product="product" />
+  <SwProductCard
+    v-if="product?.id"
+    :product="product"
+    :layout-type="getConfigValue('boxLayout')"
+  />
   <SwProductCardSkeleton v-else />
 </template>

package/app/components/public/cms/element/CmsElementProductListing.vue

@@ -3,14 +3,19 @@ import type { CmsElementProductListing } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import {
+  useCategoryListing,
+  useCmsElementConfig,
+  useRoute,
+  useRouter,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
   content: CmsElementProductListing;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const defaultLimit = 15;
 const defaultPage = 1;
 const defaultOrder = "name-asc";
@@ -154,8 +159,14 @@ compareRouteQueryWithInitialListing();
       {{ translations.listing.noProducts }}
     </div>
     <div v-if="!loading" ref="productListElement" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
-      <SwProductCard v-for="product in getElements" :key="product.id" :product="product"
-        :is-product-listing="isProductListing" class="w-full" />
+      <SwProductCard
+        v-for="product in getElements"
+        :key="product.id"
+        :product="product"
+        :is-product-listing="isProductListing"
+        :layout-type="getConfigValue('boxLayout')"
+        class="w-full"
+      />
     </div>
     <div v-if="loading" data-testid="loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
       <ProductCardSkeleton v-for="index in limit" :key="index"

package/app/components/public/cms/element/CmsElementProductName.vue

@@ -7,5 +7,10 @@ defineProps<{
 </script>
 <template>
   <!-- there is no css config coming from API for this element so we don't need to merge -->
-  <CmsElementText :content="content as any" class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]" />
+  <div role="heading" aria-level="1">
+    <CmsElementText
+      :content="content as any"
+      class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]"
+    />
+  </div>
 </template>