@opendesign-plus/components 0.0.1-rc.16

package/src/components/common/HeaderEulerNav.vue

@@ -0,0 +1,1118 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { OScroller, OIcon, OTag } from '@opensig/opendesign';
+
+import IconCaretLeft from '~icons/components/icon-caret-left.svg';
+import IconCaretRight from '~icons/components/icon-caret-right.svg';
+
+import { useLocale, useTheme } from '@opendesign-plus/composables';
+
+import { useDebounceFn } from '@vueuse/core';
+
+const props = defineProps({
+  navData: undefined,
+  bgLeft: undefined,
+  bgRight: undefined,
+});
+
+const { locale } = useLocale();
+const { theme, isDark } = useTheme();
+
+const navRef = ref();
+const navListRef = ref();
+const resizeTimer = ref(null);
+const navVisibleRight = ref(false);
+const navVisibleLeft = ref(false);
+
+// nav 鼠标滑过事件
+const isShow = ref(false);
+const navActive = ref();
+const subNavContent = ref<any>([]);
+const navShortcut = ref<any>([]);
+const isPicture = ref(false);
+const toggleDebounced = useDebounceFn(function (item: any | null) {
+  if (item === null) {
+    navActive.value = '';
+    isShow.value = false;
+    isPicture.value = false;
+  } else {
+    navActive.value = item.id;
+    isShow.value = true;
+    subNavContent.value = item.children;
+    navShortcut.value = item.shortcut;
+    isPicture.value = item.withPicture;
+  }
+}, 100);
+
+const linkClick = (url: string, target: string) => {
+  window.open(url, target);
+  navActive.value = '';
+  isShow.value = false;
+};
+
+const showDesc = ref(false);
+const descMouseenter = (e: MouseEvent) => {
+  if (!e || !e.target) return;
+  showDesc.value = e.target.clientHeight < e.target.scrollHeight;
+};
+
+const scrollNavRight = () => {
+  navVisibleLeft.value = true;
+  nextTick(() => {
+    navRef.value.scrollTo({
+      left: navRef.value.clientWidth,
+      behavior: 'smooth',
+    });
+  });
+};
+const scrollNavLeft = () => {
+  navRef.value.scrollTo({
+    left: 0,
+    behavior: 'smooth',
+  });
+  navVisibleLeft.value = false;
+};
+
+const calculateLayout = () => {
+  if (navRef.value?.clientWidth < navListRef.value?.clientWidth) {
+    navVisibleRight.value = true;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', calculateLayout);
+  // 确保 DOM 完全渲染后再计算
+  nextTick(() => {
+    calculateLayout();
+    resizeTimer.value = setTimeout(() => {
+      calculateLayout();
+    }, 1000);
+  });
+});
+
+// 清理
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateLayout);
+  clearTimeout(resizeTimer.value);
+});
+</script>
+
+<template>
+  <div class="header-content">
+    <div class="header-nav" :class="{ 'header-nav-scroll': navVisibleLeft }">
+      <div class="right-icon" v-if="navVisibleLeft">
+        <OIcon @click="scrollNavLeft"><IconCaretLeft /></OIcon>
+      </div>
+      <nav ref="navRef" class="o-nav" :class="{ 'o-nav-scroll': navVisibleLeft || !navVisibleRight, dark: isDark }">
+        <ul ref="navListRef" class="o-nav-list">
+          <li v-for="item in navData" :key="item.id" @mouseenter="toggleDebounced(item)" @mouseleave="toggleDebounced(null)">
+            <span :id="'tour_headerNav_' + item.ID" class="nav-item">{{ item.label }}</span>
+            <transition name="transition">
+              <div v-if="isShow" :class="['nav-dropdown', navActive, theme, `${navActive}-${locale}`]">
+                <div class="nav-drop-content">
+                  <div class="nav-background-left" :style="{ backgroundImage: `url(${props.bgLeft})` }"></div>
+                  <div class="nav-background-right" :style="{ backgroundImage: `url(${props.bgRight})` }"></div>
+                  <OScroller class="nav-scroller" show-type="always" size="small" disabled-y>
+                    <div class="nav-sub-content">
+                      <div class="content-left">
+                        <div class="item-sub" v-for="(sub, s) in subNavContent" :key="s">
+                          <span class="content-label">{{ sub.label }}</span>
+                          <div class="content-container">
+                            <div v-for="subItem in sub.children" :key="subItem.label" class="content-item">
+                              <a @click="linkClick(subItem.href, '_self')" rel="noopener noreferrer" class="item-label">
+                                <span class="item-name">{{ subItem.label }}</span>
+                                <OIcon v-if="subItem.icon">
+                                  <component :is="subItem.icon" class="icon" />
+                                </OIcon>
+                                <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
+                              </a>
+                              <div v-if="subItem.description" class="desc-container">
+                                <p class="item-desc" :title="showDesc ? subItem.description : null" @mouseenter="descMouseenter($event)">
+                                  {{ subItem.description }}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="split-line" v-if="navShortcut?.length"></div>
+                      <div class="content-right" v-if="navShortcut?.length">
+                        <span class="content-label">快捷链接</span>
+                        <template v-if="!isPicture">
+                          <div v-for="shortcut in navShortcut" :key="shortcut.label" class="shortcut">
+                            <a @click="linkClick(shortcut.href, '_self')" rel="noopener noreferrer" class="shortcut-link">
+                              <span>{{ shortcut.label }}</span>
+                              <OIcon v-if="shortcut.icon">
+                                <component :is="shortcut.icon" class="icon" />
+                              </OIcon>
+                            </a>
+                          </div>
+                        </template>
+                        <template v-else>
+                          <a
+                            v-for="shortcut in navShortcut"
+                            :key="shortcut.label"
+                            @click="linkClick(shortcut.href, '_self')"
+                            rel="noopener noreferrer"
+                            class="review"
+                          >
+                            <img :src="shortcut.picture" class="review-picture" />
+                            <div class="review-content">
+                              <p class="review-label">
+                                {{ shortcut.label }}
+                              </p>
+                              <div class="review-property">
+                                <span>{{ shortcut.remark }}</span>
+                              </div>
+                            </div>
+                          </a>
+                        </template>
+                      </div>
+                    </div>
+                  </OScroller>
+                </div>
+              </div>
+            </transition>
+          </li>
+        </ul>
+      </nav>
+      <div class="right-icon" v-if="navVisibleRight && !navVisibleLeft">
+        <OIcon @click="scrollNavRight"><IconCaretRight /></OIcon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-content {
+  .header-nav {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 64px);
+    align-items: center;
+  }
+  .header-nav-scroll {
+    width: calc(100% - 64px - 24px);
+  }
+}
+.o-nav {
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+  overflow-x: auto;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 100%;
+    right: 0;
+    top: 0;
+    background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-1), 0) 0%, rgba(var(--o-mixedgray-1), 1) 100%);
+    z-index: 0;
+  }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.dark {
+    &::after {
+      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
+    }
+  }
+
+  .o-nav-list {
+    display: flex;
+    height: 100%;
+    width: fit-content;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    padding: 0;
+    margin: 0;
+    > li {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      color: var(--o-color-info1);
+      cursor: pointer;
+      transition: all var(--o-duration-s) var(--o-easing-standard);
+      @include text1;
+
+      @include hover {
+        z-index: 99;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: var(--o-gap-4);
+        opacity: 0;
+        bottom: 0;
+        width: calc(100% - var(--o-gap-4) * 2);
+        height: 2px;
+        border-radius: 1px;
+        background: var(--o-color-primary1);
+        transition: all var(--o-duration-s) var(--o-easing-standard);
+      }
+
+      &.active {
+        color: var(--o-color-primary1);
+        z-index: 99;
+        font-weight: 500;
+        &::after {
+          content: '';
+          opacity: 1;
+        }
+      }
+      .nav-item {
+        display: block;
+        padding: 22px var(--o-gap-4);
+
+        @include respond-to('laptop') {
+          padding: 22px 14px;
+        }
+        @include respond-to('pad_h') {
+          padding: 22px 8px;
+        }
+        &.en {
+          @media (min-width: 841px) and (max-width: 1000px) {
+            padding: var(--o-gap-2);
+          }
+        }
+      }
+    }
+  }
+}
+.o-nav-scroll {
+  &::after {
+    display: none;
+  }
+}
+.nav-dropdown {
+  position: fixed;
+  top: var(--o-header-height);
+  left: 0;
+  right: 0;
+  background: var(--o-color-fill2);
+  z-index: 90;
+  color: var(--o-color-info1);
+  display: flex;
+  font-weight: normal;
+  cursor: default;
+  overflow: hidden;
+
+  min-height: 320px;
+  justify-content: center;
+  transform-origin: top;
+
+  &.light {
+    box-shadow: 0 3px 6px rgba(#001255, 0.08);
+  }
+
+  @include respond-to('laptop') {
+    min-height: 300px;
+  }
+  @include respond-to('pad_h') {
+    min-height: 260px;
+  }
+
+  @include respond-to('>pad_v') {
+    &.dark {
+      &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 1px;
+        background-color: var(--o-color-control4);
+      }
+    }
+  }
+
+  .content-container {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+    .content-item {
+      width: 200px;
+      margin-top: 24px;
+      &:nth-of-type(1) {
+        margin-top: 0;
+      }
+
+      @include respond-to('laptop') {
+        width: 170px;
+        margin-top: 16px;
+      }
+
+      @include respond-to('pad_h') {
+        width: 132px;
+        margin-top: 16px;
+      }
+    }
+    .item-label {
+      display: inline-flex;
+      align-items: center;
+      margin-bottom: var(--o-gap-1);
+      .item-name {
+        font-weight: 500;
+        white-space: nowrap;
+        @include text1;
+      }
+      .content-tag {
+        margin-left: var(--o-gap-2);
+        border-radius: var(--o-radius-xs);
+        @include respond-to('<=laptop') {
+          display: none;
+        }
+      }
+    }
+    .desc-container {
+      overflow: hidden;
+      position: relative;
+      height: 36px;
+      white-space: normal;
+
+      .item-desc {
+        color: var(--o-color-info2);
+        word-break: normal;
+        margin: 0;
+        @include tip2;
+        @include text-truncate(2);
+      }
+    }
+  }
+
+  &.download {
+    .item-sub {
+      margin-left: 80px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+        .content-container {
+          width: 464px;
+          :deep(.content-item) {
+            margin-left: 64px;
+            &:nth-child(2n + 1) {
+              margin-left: 0;
+            }
+            &:nth-of-type(2) {
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        &:nth-of-type(1) {
+          .content-container {
+            width: 364px;
+            :deep(.content-item) {
+              margin-left: 24px;
+            }
+          }
+        }
+        &:nth-of-type(3) {
+          .content-container {
+            width: 170px;
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-of-type(1) {
+          .content-container {
+            width: 344px;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 25%;
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+            }
+          }
+          &:nth-of-type(1) {
+            max-width: 50%;
+            .content-container {
+              :deep(.content-item) {
+                width: calc(50% - 12px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.development {
+    .item-sub {
+      margin-left: 24px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+
+      @include respond-to('>laptop') {
+        width: 200px;
+      }
+
+      @include respond-to('laptop') {
+        width: 170px;
+      }
+
+      @include respond-to('pad_h') {
+        width: 132px;
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+              .desc-container {
+                width: auto;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.document {
+    .item-sub {
+      &:nth-of-type(1) {
+        .content-container {
+          :deep(.content-item) {
+            margin-right: 64px;
+            &:nth-child(-n + 4) {
+              margin-top: 0;
+            }
+            &:nth-of-type(4) {
+              margin-right: 0;
+            }
+
+            @include respond-to('<=laptop') {
+              margin-right: 24px;
+            }
+          }
+          @media (min-width: 1441px) and (max-width: 1505px) {
+            :deep(.content-item) {
+              margin-right: 40px;
+            }
+          }
+          @include respond-to('>laptop') {
+            width: 992px;
+          }
+          @include respond-to('laptop') {
+            width: 752px;
+          }
+          @include respond-to('pad_h') {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 80%;
+          flex: 1 1 auto;
+          .content-container {
+            :deep(.content-item) {
+              width: calc(25% - 18px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.learn {
+    .item-sub {
+      margin-left: 48px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+      &:nth-of-type(2) {
+        .content-container {
+          width: 448px;
+          :deep(.content-item) {
+            margin-left: 48px;
+            &:nth-child(2n + 1) {
+              margin-left: 0;
+            }
+            &:nth-of-type(2) {
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        &:nth-of-type(2) {
+          .content-container {
+            width: 364px;
+            :deep(.content-item) {
+              margin-left: 24px;
+            }
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-of-type(2) {
+          .content-container {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 25%;
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+            }
+          }
+          &:nth-of-type(2) {
+            max-width: 50%;
+            .content-container {
+              :deep(.content-item) {
+                width: calc(50% - 12px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.approve {
+    .item-sub {
+      margin-left: 80px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+        .content-container {
+          width: 440px;
+          :deep(.content-item) {
+            margin-left: 40px;
+            &:nth-child(2n + 1) {
+              margin-left: 0;
+            }
+            &:nth-of-type(2) {
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        &:nth-of-type(1) {
+          .content-container {
+            width: 364px;
+            :deep(.content-item) {
+              margin-left: 24px;
+            }
+          }
+        }
+        &:nth-of-type(2),
+        &:nth-of-type(3) {
+          .content-container {
+            width: 170px;
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-of-type(n) {
+          .content-container {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 20%;
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+            }
+          }
+          &:nth-of-type(1) {
+            max-width: 40%;
+            .content-container {
+              :deep(.content-item) {
+                width: calc(50% - 12px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.approve-en {
+    .item-sub {
+      &:nth-child(n) {
+        .content-container {
+          width: 200px;
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        &:nth-child(n) {
+          .content-container {
+            width: 170px;
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-child(n) {
+          .content-container {
+            width: 132px;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          .content-container {
+            width: auto;
+          }
+          &:nth-of-type(1) {
+            max-width: 20%;
+            .content-container {
+              :deep(.content-item) {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.community {
+    .item-sub {
+      margin-left: 48px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+        .content-container {
+          width: 696px;
+          :deep(.content-item) {
+            margin-left: 48px;
+            &:nth-child(3n + 1) {
+              margin-left: 0;
+            }
+            &:nth-child(-n + 3) {
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
+      &:nth-of-type(2) {
+        .content-container {
+          width: 200px;
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        &:nth-of-type(1) {
+          .content-container {
+            :deep(.content-item) {
+              margin-left: 24px;
+            }
+          }
+        }
+      }
+
+      @include respond-to('laptop') {
+        &:nth-of-type(1) {
+          .content-container {
+            width: 558px;
+          }
+        }
+        &:nth-of-type(2) {
+          .content-container {
+            width: 170px;
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-of-type(1) {
+          .content-container {
+            width: auto;
+          }
+        }
+        &:nth-of-type(2) {
+          .content-container {
+            width: 132px;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 20%;
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+            }
+          }
+          &:nth-of-type(1) {
+            max-width: 60%;
+            .content-container {
+              :deep(.content-item) {
+                width: calc((100% / 3) - 18px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.update {
+    .item-sub {
+      margin-left: 48px;
+      .content-container {
+        width: 448px;
+        :deep(.content-item) {
+          margin-left: 48px;
+          &:nth-child(2n + 1) {
+            margin-left: 0;
+          }
+          &:nth-child(-n + 2) {
+            margin-top: 0;
+          }
+        }
+      }
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        .content-container {
+          :deep(.content-item) {
+            margin-left: 24px;
+          }
+        }
+      }
+      @include respond-to('laptop') {
+        .content-container {
+          width: 364px;
+        }
+      }
+
+      @include respond-to('pad_h') {
+        .content-container {
+          width: auto;
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 40%;
+          flex: 1 1 auto;
+          .content-container {
+            :deep(.content-item) {
+              width: calc(50% - 24px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.right-icon {
+  display: flex;
+  align-items: center;
+  .o-icon {
+    --icon-size: 24px;
+    cursor: pointer;
+  }
+}
+
+.nav-drop-content {
+  max-width: 1416px;
+  width: calc(100% - 2 * var(--layout-content-padding));
+  display: flex;
+}
+
+.nav-background-left {
+  position: absolute;
+  left: 0;
+  top: -87px;
+  width: 173px;
+  height: 249px;
+  background-size: cover;
+  z-index: -1;
+
+  @include respond-to('<=laptop') {
+    display: none;
+  }
+}
+
+.nav-background-right {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 173px;
+  height: 172px;
+  background-size: cover;
+  z-index: -1;
+
+  @include respond-to('<=laptop') {
+    display: none;
+  }
+}
+.nav-sub-content {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+.content-left {
+  padding: 32px 24px 40px 0;
+  display: flex;
+
+  @include respond-to('laptop') {
+    padding: var(--o-gap-5) var(--o-gap-4) var(--o-gap-5) 0;
+  }
+
+  @include respond-to('<=pad') {
+    padding: var(--o-gap-5) 0;
+  }
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    padding-left: 8px;
+  }
+}
+.content-label {
+  display: inline-block;
+  margin-bottom: var(--o-gap-3);
+  color: var(--o-color-info3);
+  @include tip1;
+
+  @include respond-to('laptop') {
+    @include text1;
+  }
+}
+.split-line {
+  background: var(--o-color-control4);
+  width: 1px;
+  min-height: 320px;
+  flex-shrink: 0;
+
+  @include respond-to('laptop') {
+    min-height: 300px;
+  }
+  @include respond-to('<=pad') {
+    display: none;
+  }
+}
+.content-right {
+  width: 358px;
+  padding-top: var(--o-gap-6);
+  padding-bottom: var(--o-gap-6);
+  padding-left: var(--o-gap-4);
+
+  @include respond-to('laptop') {
+    width: 261px;
+    padding: var(--o-gap-5) 0 var(--o-gap-5) var(--o-gap-4);
+  }
+
+  @include respond-to('pad_h') {
+    width: 261px;
+  }
+
+  @include respond-to('<=pad') {
+    display: none;
+  }
+
+  .shortcut {
+    width: 342px;
+    min-height: 42px;
+    background: var(--o-color-fill3);
+    border-radius: var(--o-radius_control-xs);
+    padding: 10px 24px;
+    display: flex;
+    align-items: center;
+    gap: var(--o-gap-3);
+    cursor: pointer;
+    @include tip1;
+
+    @include respond-to('laptop') {
+      width: 245px;
+      @include text1;
+    }
+
+    @include respond-to('pad_h') {
+      width: 245px;
+      @include text1;
+    }
+
+    & + .shortcut {
+      margin-top: var(--o-gap-2);
+    }
+
+    .shortcut-link {
+      display: flex;
+      align-items: center;
+      color: var(--o-color-link1);
+      word-break: normal;
+      white-space: normal;
+      @include hover {
+        color: var(--o-color-primary2);
+      }
+
+      span {
+        @include text-truncate(1);
+      }
+
+      .icon {
+        height: 16px;
+        width: 16px;
+        margin-left: var(--o-gap-2);
+      }
+    }
+  }
+
+  .review {
+    width: 342px;
+    display: flex;
+    align-items: unset;
+    position: relative;
+
+    @include respond-to('laptop') {
+      width: 245px;
+    }
+
+    @include respond-to('pad_h') {
+      width: 245px;
+      &:not(:last-child) {
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -8px;
+          height: 1px;
+          background: var(--o-color-control4);
+        }
+      }
+    }
+
+    & + .review {
+      margin-top: var(--o-gap-3);
+    }
+
+    .review-picture {
+      width: 120px;
+      height: auto;
+      display: block;
+      object-fit: contain;
+
+      @include respond-to('<=laptop') {
+        display: none;
+      }
+    }
+    .review-content {
+      margin-left: var(--o-gap-2);
+      flex: 1;
+      max-width: 212px;
+      height: 68px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      white-space: normal;
+
+      @include respond-to('<=laptop') {
+        margin-left: unset;
+        height: auto;
+      }
+
+      .review-label {
+        word-break: normal;
+        max-height: 48px;
+        color: var(--o-color-info1);
+        font-weight: 500;
+        cursor: pointer;
+        @include text1;
+        @include text-truncate(2);
+
+        @include hover {
+          color: var(--o-color-primary1);
+        }
+        @include respond-to('pad_v-laptop') {
+          max-height: 44px;
+        }
+      }
+
+      .review-property {
+        color: var(--o-color-info3);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        @include tip2;
+      }
+    }
+  }
+}
+.nav-scroller {
+  height: 100%;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
+  white-space: nowrap;
+
+  @include respond-to('<=pad_v') {
+    --scroller-padding: 0 var(--layout-content-padding);
+  }
+
+  :deep(.o-scrollbar) {
+    --scrollbar-height: 100%;
+  }
+}
+</style>