@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/header/components/HeaderContent.vue

@@ -1,1125 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OScroller, OIcon, OTag } from '@opensig/opendesign';
-
-import ContentWrapper from '../../common/ContentWrapper.vue';
-
-import { useLocale, useTheme } from '@opendesign-plus/composables';
-
-import { type NavLiItemT } from '../types.ts';
-
-export interface OHeaderEmitsT {
-  (e: 'handle-mouseenter-sub', val: any): void;
-  (e: 'handle-mouseleave-sub', val: any): void;
-}
-
-const emit = defineEmits<OHeaderEmitsT>();
-
-const props = defineProps<NavLiItemT>();
-
-const { locale } = useLocale();
-const { theme } = useTheme();
-
-const navVisible = ref(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);
-const descMouseenter = (e: MouseEvent) => {
-  if (!e || !e.target) {
-    return;
-  }
-  const target = e.target as HTMLElement;
-  showDesc.value = target!.clientHeight < target.scrollHeight;
-};
-
-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 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;
-};
-</script>
-
-<template>
-  <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 : undefined"
-                         @mouseenter="descMouseenter($event)">
-                        {{ subItem.description }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </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">{{ shortcut.remark }}</div>
-                  </div>
-                </a>
-              </template>
-            </div>
-          </div>
-        </OScroller>
-      </ContentWrapper>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nav-content {
-  cursor: default;
-  overflow: hidden;
-  justify-content: center;
-  transform-origin: top;
-  transition: all 0.3s allow-discrete;
-}
-.nav-scroller {
-  height: 100%;
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: auto;
-  white-space: nowrap;
-
-  @include respond('<=pad_v') {
-    --scroller-padding: 0 var(--layout-content-padding);
-  }
-
-  :deep(.o-scrollbar) {
-    --scrollbar-height: 100%;
-  }
-}
-.nav-sub-content {
-  display: flex;
-}
-
-.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('laptop') {
-    width: 170px;
-    margin-top: 16px;
-  }
-  @include respond('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;
-    @include text1;
-  }
-  .o-icon {
-    --icon-size: 24px;
-    margin-left: var(--o-gap-2);
-    @include respond('<=laptop') {
-      --icon-size: 16px;
-    }
-  }
-  .content-tag {
-    margin-left: var(--o-gap-2);
-    --layout-pkg-radius: var(--o-radius-xs);
-    @include respond('<=laptop') {
-      display: none;
-    }
-  }
-}
-.desc-container {
-  overflow: hidden;
-  position: relative;
-  height: 36px;
-  white-space: normal;
-
-  .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('<=pad') {
-    display: none;
-  }
-}
-.content-right {
-  width: 342px;
-  padding: 32px 0;
-  flex-shrink: 0;
-  @include respond('laptop') {
-    width: 240px;
-  }
-
-  @include respond('pad_h') {
-    width: 240px;
-  }
-
-  @include respond('<=pad') {
-    display: none;
-  }
-
-  .shortcut {
-    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('laptop') {
-      @include text1;
-    }
-
-    @include respond('pad_h') {
-      @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);
-        text-decoration: none;
-      }
-
-      span {
-        @include text-truncate(1);
-      }
-
-      .o-icon {
-        --icon-size: 16px;
-        margin-left: var(--o-gap-2);
-      }
-    }
-  }
-
-  .review {
-    display: flex;
-    align-items: unset;
-    position: relative;
-    @include hover {
-      text-decoration: none;
-    }
-
-    @include respond('pad_h') {
-      &: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('<=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('<=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('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('<=laptop') {
-    display: none;
-  }
-}
-.nav-background-right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 173px;
-  height: 172px;
-  background-size: cover;
-  z-index: -1;
-
-  @include respond('<=laptop') {
-    display: none;
-  }
-}
-
-.openeuler {
-  &.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('<=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('pad_h') {
-        &:nth-of-type(1) {
-          .content-container {
-            width: 344px;
-          }
-        }
-      }
-    }
-
-    @include respond('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('>laptop') {
-        width: 200px;
-      }
-
-      @include respond('laptop') {
-        width: 170px;
-      }
-
-      @include respond('pad_h') {
-        width: 132px;
-      }
-    }
-
-    @include respond('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('<=laptop') {
-              margin-right: 24px;
-            }
-          }
-          @media (min-width: 1441px) and (max-width: 1505px) {
-            :deep(.content-item) {
-              margin-right: 40px;
-            }
-          }
-          @include respond('>laptop') {
-            width: 992px;
-          }
-          @include respond('laptop') {
-            width: 752px;
-          }
-          @include respond('pad_h') {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    @include respond('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('<=laptop') {
-        margin-left: 24px;
-        &:nth-of-type(2) {
-          .content-container {
-            width: 364px;
-            :deep(.content-item) {
-              margin-left: 24px;
-            }
-          }
-        }
-      }
-
-      @include respond('pad_h') {
-        &:nth-of-type(2) {
-          .content-container {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    @include respond('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('<=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('pad_h') {
-        &:nth-of-type(n) {
-          .content-container {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    @include respond('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('<=laptop') {
-        &:nth-child(n) {
-          .content-container {
-            width: 170px;
-          }
-        }
-      }
-
-      @include respond('pad_h') {
-        &:nth-child(n) {
-          .content-container {
-            width: 132px;
-          }
-        }
-      }
-    }
-
-    @include respond('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('<=laptop') {
-        margin-left: 24px;
-        &:nth-of-type(1) {
-          .content-container {
-            :deep(.content-item) {
-              margin-left: 24px;
-            }
-          }
-        }
-      }
-
-      @include respond('laptop') {
-        &:nth-of-type(1) {
-          .content-container {
-            width: 558px;
-          }
-        }
-        &:nth-of-type(2) {
-          .content-container {
-            width: 170px;
-          }
-        }
-      }
-
-      @include respond('pad_h') {
-        &:nth-of-type(1) {
-          .content-container {
-            width: auto;
-          }
-        }
-        &:nth-of-type(2) {
-          .content-container {
-            width: 132px;
-          }
-        }
-      }
-    }
-
-    @include respond('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('<=laptop') {
-        margin-left: 24px;
-        .content-container {
-          :deep(.content-item) {
-            margin-left: 24px;
-          }
-        }
-      }
-      @include respond('laptop') {
-        .content-container {
-          width: 364px;
-        }
-      }
-
-      @include respond('pad_h') {
-        .content-container {
-          width: auto;
-        }
-      }
-    }
-
-    @include respond('pad_h') {
-      .content-left {
-        .item-sub {
-          max-width: 40%;
-          flex: 1 1 auto;
-          .content-container {
-            :deep(.content-item) {
-              width: calc(50% - 24px);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.mindspore {
-  .content-left {
-    flex: 1;
-  }
-  .item-sub + .item-sub {
-    margin-left: 48px;
-    @include respond('laptop') {
-      margin-left: 32px;
-    }
-    @include respond('pad_h') {
-      margin-left: 16px;
-    }
-  }
-  .content-container {
-    flex-direction: column;
-  }
-
-  .nav-background-left {
-    left: 0;
-    top: 0;
-    width: 540px;
-    height: 360px;
-  }
-  .nav-background-right {
-    width: 643px;
-    height: 364px;
-    z-index: -1;
-  }
-}
-
-.openubmc {
-  &.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('<=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('pad_h') {
-        &:nth-of-type(1) {
-          .content-container {
-            width: 344px;
-          }
-        }
-      }
-    }
-
-    @include respond('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,
-  &.learn,
-  &.support,
-  &.trends {
-    .content-item {
-      margin-left: 80px;
-      margin-top: 0;
-      &:first-of-type {
-        margin-left: 0;
-      }
-    }
-  }
-  &.docs {
-    .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('<=laptop') {
-              margin-right: 24px;
-            }
-          }
-          @media (min-width: 1441px) and (max-width: 1505px) {
-            :deep(.content-item) {
-              margin-right: 40px;
-            }
-          }
-          @include respond('>laptop') {
-            width: 992px;
-          }
-          @include respond('laptop') {
-            width: 752px;
-          }
-          @include respond('pad_h') {
-            width: auto;
-          }
-        }
-      }
-    }
-
-    @include respond('pad_h') {
-      .content-left {
-        .item-sub {
-          max-width: 80%;
-          flex: 1 1 auto;
-          .content-container {
-            :deep(.content-item) {
-              width: calc(25% - 18px);
-            }
-          }
-        }
-      }
-    }
-  }
-  &.community {
-    .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('<=laptop') {
-        margin-left: 24px;
-        .content-container {
-          :deep(.content-item) {
-            margin-left: 24px;
-          }
-        }
-      }
-      @include respond('laptop') {
-        .content-container {
-          width: 364px;
-        }
-      }
-
-      @include respond('pad_h') {
-        .content-container {
-          width: auto;
-        }
-      }
-    }
-
-    @include respond('pad_h') {
-      .content-left {
-        .item-sub {
-          max-width: 40%;
-          flex: 1 1 auto;
-          .content-container {
-            :deep(.content-item) {
-              width: calc(50% - 24px);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>