@opendesign-plus-test/components 0.0.1-rc.26 → 0.0.1-rc.27

package/src/components/{common/HeaderEulerNav.vue → header/components/HeaderContent.vue}

@@ -1,53 +1,39 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref } 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 ContentWrapper from '../../common/ContentWrapper.vue';
 
 import { useLocale, useTheme } from '@opendesign-plus/composables';
 
-import { useDebounceFn } from '@vueuse/core';
+export interface OHeaderEmitsT {
+  (e: 'handle-mouseenter-sub', val: any): void;
+  (e: 'handle-mouseleave-sub', val: any): void;
+}
+
+const emit = defineEmits<OHeaderEmitsT>();
 
 const props = defineProps({
-  navData: undefined,
+  itemData: undefined,
+  itemVisible: undefined,
+  community: undefined,
   bgLeft: undefined,
   bgRight: undefined,
+  hoverIndex: 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 { theme } = useTheme();
+
+const navVisible = ref(false);
 
-const linkClick = (url: string, target: string) => {
-  window.open(url, target);
-  navActive.value = '';
-  isShow.value = false;
+const onMouseEnter = () => {
+  emit('handle-mouseenter-sub', props.itemData?.id);
+  navVisible.value = true;
+};
+const onMouseLeave = () => {
+  emit('handle-mouseenter-sub', '');
+  navVisible.value = false;
 };
 
 const showDesc = ref(false);
@@ -56,335 +42,395 @@ const descMouseenter = (e: MouseEvent) => {
   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 onClickNavHref = (item: any, sub: any) => {
+  const res = {
+    properties: {
+      module: 'navigation',
+      level1: item.label,
+      level2: sub.label,
+      target: sub.label,
+      url: item.href,
+    },
+  };
+  return res;
 };
 
-const calculateLayout = () => {
-  if (navRef.value?.clientWidth < navListRef.value?.clientWidth) {
-    navVisibleRight.value = true;
-  }
+const onClickShortcut = (item: any) => {
+  const res = {
+    properties: {
+      module: 'navigation',
+      level1: locale.value === 'zh' ? '快捷链接' : 'Quick Link',
+      level2: item.label,
+      target: item.label,
+      url: item.href,
+    },
+  };
+  return res;
 };
-
-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 @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div
+      v-if="(props.itemVisible || navVisible) && props.itemData?.children?.length"
+      class="nav-content"
+      :class="[props.community?.toLowerCase(), props.hoverIndex, theme, `${props.hoverIndex}-${locale}`]"
+    >
+      <div class="nav-background-left" :style="{ backgroundImage: `url(${props.bgLeft})` }"></div>
+      <div class="nav-background-right" :style="{ backgroundImage: `url(${props.bgRight})` }"></div>
+      <ContentWrapper>
+        <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 props.itemData?.children" :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
+                      :href="subItem.href"
+                      :target="subItem?.target || '_self'"
+                      rel="noopener noreferrer"
+                      class="item-label"
+                      v-analytics="() => onClickNavHref(sub, subItem)"
+                    >
+                      <span class="item-name">{{ subItem.label }}</span>
+                      <OIcon v-if="subItem.icon">
+                        <component :is="subItem.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>
-                  </OScroller>
+                  </div>
                 </div>
               </div>
-            </transition>
-          </li>
-        </ul>
-      </nav>
-      <div class="right-icon" v-if="navVisibleRight && !navVisibleLeft">
-        <OIcon @click="scrollNavRight"><IconCaretRight /></OIcon>
-      </div>
+            </div>
+            <div class="split-line" v-if="props.itemData?.shortcut?.length"></div>
+            <div class="content-right" v-if="props.itemData?.shortcut?.length">
+              <span class="content-label">{{ locale === 'zh' ? '快捷链接' : 'Quick Link' }}</span>
+              <template v-if="!props.itemData?.withPicture">
+                <div v-for="shortcut in props.itemData?.shortcut" :key="shortcut.label" class="shortcut">
+                  <a
+                    :href="shortcut.href"
+                    :target="shortcut?.target || '_self'"
+                    rel="noopener noreferrer"
+                    class="shortcut-link"
+                    v-analytics="() => onClickShortcut(shortcut)"
+                  >
+                    <span>{{ shortcut.label }}</span>
+                    <OIcon v-if="shortcut.icon">
+                      <component :is="shortcut.icon" />
+                    </OIcon>
+                  </a>
+                </div>
+              </template>
+              <template v-else>
+                <a
+                  v-for="shortcut in props.itemData?.shortcut"
+                  :key="shortcut.label"
+                  :href="shortcut.href"
+                  :target="shortcut?.target || '_self'"
+                  rel="noopener noreferrer"
+                  class="review"
+                  v-analytics="() => onClickShortcut(shortcut)"
+                >
+                  <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>
+      </ContentWrapper>
     </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);
-  }
+.nav-content {
+  cursor: default;
+  overflow: hidden;
+  justify-content: center;
+  transform-origin: top;
+  transition: all 0.3s allow-discrete;
 }
-.o-nav {
+.nav-scroller {
   height: 100%;
-  position: relative;
-  overflow-y: hidden;
+  width: 100%;
   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;
+  overflow-y: auto;
+  white-space: nowrap;
+
+  @include respond-to('<=pad_v') {
+    --scroller-padding: 0 var(--layout-content-padding);
   }
-  &.dark {
-    &::after {
-      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
-    }
+
+  :deep(.o-scrollbar) {
+    --scrollbar-height: 100%;
   }
+}
+.nav-sub-content {
+  display: flex;
+}
 
-  .o-nav-list {
-    display: flex;
-    height: 100%;
-    width: fit-content;
-    flex-wrap: nowrap;
+.content-left {
+  display: flex;
+  flex: 1;
+  padding: 32px 0;
+}
+.content-label {
+  display: inline-block;
+  margin-bottom: var(--o-gap-3);
+  color: var(--o-color-info3);
+  @include text1;
+}
+.content-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.content-item {
+  width: 200px;
+  margin-top: 24px;
+  @include respond-to('laptop') {
+    width: 170px;
+    margin-top: 16px;
+  }
+  @include respond-to('pad_h') {
+    width: 132px;
+    margin-top: 12px;
+  }
+}
+.item-label {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: var(--o-gap-1);
+  color: var(--o-color-info1);
+  @include hover {
+    color: var(--o-color-primary1);
+    text-decoration: none;
+  }
+  .item-name {
+    font-weight: 500;
     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);
-          }
-        }
-      }
+    @include text1;
+  }
+  .o-icon {
+    --icon-size: 24px;
+    margin-left: var(--o-gap-2);
+    @include respond-to('<=laptop') {
+      --icon-size: 16px;
     }
   }
-}
-.o-nav-scroll {
-  &::after {
-    display: none;
+  .content-tag {
+    margin-left: var(--o-gap-2);
+    --layout-pkg-radius: var(--o-radius-xs);
+    @include respond-to('<=laptop') {
+      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;
+.desc-container {
   overflow: hidden;
+  position: relative;
+  height: 36px;
+  white-space: normal;
 
-  min-height: 320px;
-  justify-content: center;
-  transform-origin: top;
-
-  &.light {
-    box-shadow: 0 3px 6px rgba(#001255, 0.08);
+  .item-desc {
+    color: var(--o-color-info2);
+    word-break: normal;
+    @include tip2;
+    @include text-truncate(2);
   }
+}
 
+.split-line {
+  background: var(--o-color-control4);
+  width: 1px;
+  margin: 0 16px;
+  flex-shrink: 0;
+
+  @include respond-to('<=pad') {
+    display: none;
+  }
+}
+.content-right {
+  width: 342px;
+  padding: 32px 0;
+  flex-shrink: 0;
   @include respond-to('laptop') {
-    min-height: 300px;
+    width: 240px;
   }
+
   @include respond-to('pad_h') {
-    min-height: 260px;
+    width: 240px;
   }
 
-  @include respond-to('>pad_v') {
-    &.dark {
-      &:after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 1px;
-        background-color: var(--o-color-control4);
-      }
-    }
+  @include respond-to('<=pad') {
+    display: none;
   }
 
-  .content-container {
+  .shortcut {
+    min-height: 42px;
+    background: var(--o-color-fill3);
+    border-radius: var(--o-radius_control-xs);
+    padding: 10px 24px;
     display: flex;
-    margin: 0;
-    padding: 0;
-    flex-wrap: wrap;
-    .content-item {
-      width: 200px;
-      margin-top: 24px;
-      &:nth-of-type(1) {
-        margin-top: 0;
-      }
+    align-items: center;
+    gap: var(--o-gap-3);
+    cursor: pointer;
+    @include tip1;
 
-      @include respond-to('laptop') {
-        width: 170px;
-        margin-top: 16px;
-      }
+    @include respond-to('laptop') {
+      @include text1;
+    }
 
-      @include respond-to('pad_h') {
-        width: 132px;
-        margin-top: 16px;
-      }
+    @include respond-to('pad_h') {
+      @include text1;
+    }
+
+    & + .shortcut {
+      margin-top: var(--o-gap-2);
     }
-    .item-label {
-      display: inline-flex;
+
+    .shortcut-link {
+      display: flex;
       align-items: center;
-      margin-bottom: var(--o-gap-1);
-      .item-name {
-        font-weight: 500;
-        white-space: nowrap;
-        @include text1;
+      color: var(--o-color-link1);
+      word-break: normal;
+      white-space: normal;
+      @include hover {
+        color: var(--o-color-primary2);
+        text-decoration: none;
+      }
+
+      span {
+        @include text-truncate(1);
       }
-      .content-tag {
+
+      .o-icon {
+        --icon-size: 16px;
         margin-left: var(--o-gap-2);
-        border-radius: var(--o-radius-xs);
-        @include respond-to('<=laptop') {
-          display: none;
+      }
+    }
+  }
+
+  .review {
+    display: flex;
+    align-items: unset;
+    position: relative;
+    @include hover {
+      text-decoration: none;
+    }
+
+    @include respond-to('pad_h') {
+      &:not(:last-child) {
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -8px;
+          height: 1px;
+          background: var(--o-color-control4);
         }
       }
     }
-    .desc-container {
-      overflow: hidden;
-      position: relative;
-      height: 36px;
+
+    & + .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;
 
-      .item-desc {
-        color: var(--o-color-info2);
+      @include respond-to('<=laptop') {
+        margin-left: unset;
+        height: auto;
+      }
+
+      .review-label {
         word-break: normal;
-        margin: 0;
-        @include tip2;
+        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-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;
+  }
+}
+
+.openeuler {
   &.download {
     .item-sub {
       margin-left: 80px;
@@ -864,255 +910,33 @@ onUnmounted(() => {
   }
 }
 
-.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);
+.mindspore {
+  .content-left {
+    flex: 1;
   }
-
-  @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;
-
+  .item-sub + .item-sub {
+    margin-left: 48px;
     @include respond-to('laptop') {
-      width: 245px;
-      @include text1;
+      margin-left: 32px;
     }
-
     @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);
-      }
+      margin-left: 16px;
     }
   }
-
-  .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;
-      }
-    }
+  .content-container {
+    flex-direction: column;
   }
-}
-.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);
+  .nav-background-left {
+    left: 0;
+    top: 0;
+    width: 540px;
+    height: 360px;
   }
-
-  :deep(.o-scrollbar) {
-    --scrollbar-height: 100%;
+  .nav-background-right {
+    width: 643px;
+    height: 364px;
+    z-index: -1;
   }
 }
 </style>