@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.190

package/dist/treeshaking/components/header/components/HeaderContent.css

@@ -0,0 +1,887 @@
+.hover-icon-rotate .o-icon[data-v-4ee3dd0c] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-4ee3dd0c] {
+    transform: rotate(-180deg);
+}
+}
+.nav-content[data-v-4ee3dd0c] {
+  cursor: default;
+  overflow: hidden;
+  justify-content: center;
+  transform-origin: top;
+}
+.header-content-nav[data-v-4ee3dd0c] {
+  max-width: var(--o-header-content-max-width);
+  margin: 0 auto;
+  padding: 0 var(--o-header-content-padding);
+}
+.nav-scroller[data-v-4ee3dd0c] {
+  height: 100%;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
+  white-space: nowrap;
+}
+.nav-scroller[data-v-4ee3dd0c] .o-scrollbar {
+  --scrollbar-height: 100%;
+}
+.nav-sub-content[data-v-4ee3dd0c] {
+  display: flex;
+}
+.content-left[data-v-4ee3dd0c] {
+  display: flex;
+  flex: 1;
+  padding: 32px 0;
+}
+.content-label[data-v-4ee3dd0c] {
+  display: inline-block;
+  margin-right: var(--o-gap-5);
+  margin-bottom: var(--o-gap-3);
+  color: var(--o-color-info3);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.content-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.content-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.content-label[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1440px) {
+.content-label[data-v-4ee3dd0c] {
+    margin-right: var(--o-gap-4);
+}
+}
+.content-container[data-v-4ee3dd0c] {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.content-item[data-v-4ee3dd0c] {
+  width: 200px;
+  margin: 24px 24px 0 0;
+}
+.content-item[data-v-4ee3dd0c]:nth-of-type(1) {
+  margin-top: 0 !important;
+}
+@media (min-width: 1201px) and (max-width: 1440px) {
+.content-item[data-v-4ee3dd0c] {
+    width: 170px;
+    margin: 16px 16px 0 0;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-item[data-v-4ee3dd0c] {
+    width: 132px;
+    margin: 12px 16px 0 0;
+}
+}
+.item-sub:last-of-type .content-item[data-v-4ee3dd0c] {
+  margin-right: 0;
+}
+.item-label[data-v-4ee3dd0c] {
+  display: inline-flex;
+  align-items: center;
+  color: var(--o-color-info1);
+  width: 100%;
+}
+@media (hover: hover) {
+.item-label[data-v-4ee3dd0c]:hover {
+    color: var(--o-color-primary2);
+    text-decoration: none;
+}
+}
+.item-label[data-v-4ee3dd0c]:active {
+  color: var(--o-color-primary3);
+}
+.item-label .item-name[data-v-4ee3dd0c] {
+  white-space: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.item-label .item-name[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.item-label .o-icon[data-v-4ee3dd0c] {
+  --icon-size: 16px;
+  margin-left: var(--o-gap-1);
+}
+@media (max-width: 1680px) {
+.item-label .o-icon[data-v-4ee3dd0c] {
+    --icon-size: 16px;
+}
+}
+.item-label .content-tag[data-v-4ee3dd0c] {
+  margin-left: var(--o-gap-1);
+  --layout-pkg-radius: var(--o-radius-xs);
+}
+.desc-container[data-v-4ee3dd0c] {
+  overflow: hidden;
+  position: relative;
+  min-height: 36px;
+  white-space: normal;
+  margin-top: var(--o-gap-1);
+}
+.desc-container .item-desc[data-v-4ee3dd0c] {
+  color: var(--o-color-info2);
+  word-break: normal !important;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.desc-container .item-desc[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.desc-container .item-desc[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.desc-container .item-desc[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.desc-container .item-desc[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.desc-container .item-desc[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.desc-container .item-desc-line-1[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.desc-container .item-desc-line-3[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.desc-container .item-desc-line-4[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.desc-container .item-desc-line-5[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.desc-container .item-desc-line-6[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.content-item-disabled[data-v-4ee3dd0c] {
+  cursor: no-drop;
+}
+.content-item-disabled .item-label[data-v-4ee3dd0c] {
+  color: var(--o-color-info4);
+  cursor: no-drop;
+  pointer-events: none;
+}
+.content-item-disabled .desc-container .item-desc[data-v-4ee3dd0c] {
+  color: var(--o-color-info4);
+}
+.popover-item-desc[data-v-4ee3dd0c] {
+  width: 200px;
+  height: auto;
+}
+.split-line[data-v-4ee3dd0c] {
+  background: var(--o-color-control4);
+  width: 1px;
+  margin: 0 16px;
+  flex-shrink: 0;
+}
+@media (max-width: 1200px) {
+.split-line[data-v-4ee3dd0c] {
+    display: none;
+}
+}
+.content-right[data-v-4ee3dd0c] {
+  width: 342px;
+  padding: 32px 0;
+  flex-shrink: 0;
+}
+@media (max-width: 1680px) {
+.content-right[data-v-4ee3dd0c] {
+    width: 240px;
+}
+}
+@media (max-width: 1200px) {
+.content-right[data-v-4ee3dd0c] {
+    display: none;
+}
+}
+.content-right .shortcut[data-v-4ee3dd0c] {
+  min-height: 42px;
+  background: var(--o-color-fill1);
+  border-radius: var(--o-radius_control-xs);
+  padding: 10px 24px;
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-3);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 1201px) and (max-width: 1680px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 841px) and (max-width: 1200px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 601px) and (max-width: 840px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (max-width: 600px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) and (min-width: 1201px) and (max-width: 1680px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) and (min-width: 841px) and (max-width: 1200px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) and (min-width: 601px) and (max-width: 840px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) and (max-width: 600px) {
+.content-right .shortcut[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.content-right .shortcut + .shortcut[data-v-4ee3dd0c] {
+  margin-top: var(--o-gap-2);
+}
+.content-right .shortcut .shortcut-link[data-v-4ee3dd0c] {
+  display: flex;
+  align-items: center;
+  color: var(--o-color-link1);
+  word-break: normal;
+  white-space: normal;
+}
+@media (hover: hover) {
+.content-right .shortcut .shortcut-link[data-v-4ee3dd0c]:hover {
+    color: var(--o-color-primary2);
+    text-decoration: none;
+}
+}
+.content-right .shortcut .shortcut-link .shortcut-title[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.content-right .shortcut .shortcut-link .o-icon[data-v-4ee3dd0c] {
+  --icon-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.content-right .review[data-v-4ee3dd0c] {
+  display: flex;
+  align-items: unset;
+  position: relative;
+}
+@media (hover: hover) {
+.content-right .review[data-v-4ee3dd0c]:hover {
+    text-decoration: none;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-right .review[data-v-4ee3dd0c]:not(:last-child):after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -8px;
+    height: 1px;
+    background: var(--o-color-control4);
+}
+}
+.content-right .review + .review[data-v-4ee3dd0c] {
+  margin-top: var(--o-gap-3);
+}
+.content-right .review .review-picture[data-v-4ee3dd0c] {
+  width: 120px;
+  height: auto;
+  display: block;
+  object-fit: contain;
+  border-radius: var(--o-radius-xs);
+}
+@media (max-width: 1680px) {
+.content-right .review .review-picture[data-v-4ee3dd0c] {
+    width: 96px;
+}
+}
+@media (max-width: 1440px) {
+.content-right .review .review-picture[data-v-4ee3dd0c] {
+    display: none;
+}
+}
+.content-right .review .review-content[data-v-4ee3dd0c] {
+  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;
+}
+@media (max-width: 1680px) {
+.content-right .review .review-content[data-v-4ee3dd0c] {
+    margin-left: var(--o-gap-1);
+    height: auto;
+    max-width: 140px;
+}
+}
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+  word-break: normal !important;
+  max-height: 48px;
+  color: var(--o-color-info1);
+  font-weight: 500;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+@media (hover: hover) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c]:hover {
+    color: var(--o-color-primary1);
+}
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    max-height: 44px;
+}
+}
+@media (max-width: 1680px) {
+.content-right .review .review-content .review-label[data-v-4ee3dd0c] {
+    max-height: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+}
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+  color: var(--o-color-info3);
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.content-right .review .review-content .review-property[data-v-4ee3dd0c] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.popover-shortcut[data-v-4ee3dd0c] {
+  height: auto;
+  max-width: 240px;
+}
+[data-o-theme*=dark] .content-right .shortcut[data-v-4ee3dd0c] {
+  background: var(--o-color-fill3);
+}
+.nav-background-left[data-v-4ee3dd0c] {
+  position: absolute;
+  left: 0;
+  top: -87px;
+  width: 173px;
+  height: 249px;
+  background-size: cover;
+  z-index: -1;
+}
+@media (max-width: 1680px) {
+.nav-background-left[data-v-4ee3dd0c] {
+    display: none;
+}
+}
+.nav-background-right[data-v-4ee3dd0c] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 173px;
+  height: 172px;
+  background-size: cover;
+  z-index: -1;
+}
+.openeuler[data-v-4ee3dd0c] {
+  --sub-right: 24px;
+}
+@media (max-width: 1440px) {
+.openeuler[data-v-4ee3dd0c] {
+    --sub-right: 16px;
+}
+}
+.openeuler.download .item-sub[data-v-4ee3dd0c] {
+  width: 25%;
+}
+.openeuler.download .item-sub[data-v-4ee3dd0c]:nth-of-type(1) {
+  width: 50%;
+}
+.openeuler.download .item-sub:nth-of-type(1) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.download .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+}
+.openeuler.download .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-top: 0;
+}
+.openeuler.development .item-sub[data-v-4ee3dd0c] {
+  width: 20%;
+}
+.openeuler.development .content-item[data-v-4ee3dd0c] {
+  width: auto;
+}
+.openeuler.document .item-sub[data-v-4ee3dd0c] {
+  width: 76%;
+}
+.openeuler.document .item-sub .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.document .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(25% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openeuler.document .item-sub .content-item[data-v-4ee3dd0c]:nth-child(-n+4) {
+  margin-top: 0;
+}
+.openeuler.document .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(4) {
+  margin-right: 0;
+}
+@media (max-width: 1200px) {
+.openeuler.document .item-sub[data-v-4ee3dd0c] {
+    width: 100%;
+}
+}
+.openeuler.learn .item-sub[data-v-4ee3dd0c]:nth-of-type(1) {
+  width: 33%;
+}
+.openeuler.learn .item-sub[data-v-4ee3dd0c]:nth-of-type(2) {
+  width: 66%;
+}
+.openeuler.learn .item-sub:nth-of-type(2) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.learn .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openeuler.learn .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-top: 0;
+  margin-right: 0;
+}
+.openeuler.approve .item-sub[data-v-4ee3dd0c] {
+  width: 25%;
+}
+.openeuler.approve .item-sub[data-v-4ee3dd0c]:nth-of-type(1) {
+  width: 50%;
+}
+.openeuler.approve .item-sub:nth-of-type(1) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.approve .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+}
+.openeuler.approve .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-top: 0;
+}
+.openeuler.community .item-sub[data-v-4ee3dd0c] {
+  width: 25%;
+}
+.openeuler.community .item-sub[data-v-4ee3dd0c]:nth-of-type(1) {
+  width: 75%;
+}
+.openeuler.community .item-sub:nth-of-type(1) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.community .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c] {
+  width: calc(33% - var(--sub-right));
+}
+.openeuler.community .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c]:nth-child(-n+3) {
+  margin-top: 0;
+}
+.openeuler.update .item-sub[data-v-4ee3dd0c] {
+  width: 50%;
+}
+.openeuler.update .item-sub .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openeuler.update .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+}
+.openeuler.update .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-top: 0;
+}
+.openeuler.update .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c] {
+  margin-right: var(--sub-right);
+}
+.openeuler.update .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-right: 0;
+}
+.mindspore[data-v-4ee3dd0c] {
+  --sub-right: 24px;
+}
+@media (max-width: 1440px) {
+.mindspore[data-v-4ee3dd0c] {
+    --sub-right: 16px;
+}
+}
+.mindspore .nav-background-left[data-v-4ee3dd0c] {
+  left: 0;
+  top: 0;
+  width: 540px;
+  height: 360px;
+}
+.mindspore .nav-background-right[data-v-4ee3dd0c] {
+  width: 643px;
+  height: 364px;
+  z-index: -1;
+}
+.mindspore .item-label .item-name[data-v-4ee3dd0c] {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.mindspore .item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.mindspore .item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.mindspore .item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.mindspore .item-label .item-name[data-v-4ee3dd0c] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.mindspore .item-label .content-tag[data-v-4ee3dd0c] {
+  --layout-pkg-radius: 100vh;
+}
+.mindspore .content-right .shortcut[data-v-4ee3dd0c] {
+  border-radius: var(--o-radius-s);
+}
+.mindspore .content-right .review .review-picture[data-v-4ee3dd0c] {
+  border-radius: var(--o-radius-s);
+}
+.mindspore.docs .item-sub[data-v-4ee3dd0c] {
+  width: 16.6666666667%;
+}
+.mindspore.docs .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(100% - var(--sub-right));
+}
+.openubmc[data-v-4ee3dd0c] {
+  --sub-right: 24px;
+}
+@media (max-width: 1440px) {
+.openubmc[data-v-4ee3dd0c] {
+    --sub-right: 16px;
+}
+}
+.openubmc.download .item-sub[data-v-4ee3dd0c] {
+  width: 25%;
+}
+.openubmc.download .item-sub[data-v-4ee3dd0c]:nth-of-type(1) {
+  width: 50%;
+}
+.openubmc.download .item-sub:nth-of-type(1) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openubmc.download .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+}
+.openubmc.download .item-sub:nth-of-type(1) .content-item[data-v-4ee3dd0c]:nth-of-type(2) {
+  margin-top: 0;
+}
+.openubmc.development .item-sub[data-v-4ee3dd0c], .openubmc.trends .item-sub[data-v-4ee3dd0c] {
+  width: 100%;
+}
+.openubmc.development .item-sub .content-container[data-v-4ee3dd0c], .openubmc.trends .item-sub .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openubmc.development .item-sub .content-item[data-v-4ee3dd0c], .openubmc.trends .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(33% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openubmc.development .item-sub .content-item[data-v-4ee3dd0c]:nth-child(-n+4), .openubmc.trends .item-sub .content-item[data-v-4ee3dd0c]:nth-child(-n+4) {
+  margin-top: 0;
+}
+.openubmc.development .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(4), .openubmc.trends .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(4) {
+  margin-right: 0;
+}
+.openubmc.docs .item-sub[data-v-4ee3dd0c] {
+  width: 76%;
+}
+.openubmc.docs .item-sub .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openubmc.docs .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(25% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openubmc.docs .item-sub .content-item[data-v-4ee3dd0c]:nth-child(-n+4) {
+  margin-top: 0;
+}
+.openubmc.docs .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(4) {
+  margin-right: 0;
+}
+@media (max-width: 1200px) {
+.openubmc.docs .item-sub[data-v-4ee3dd0c] {
+    width: 100%;
+}
+}
+.openubmc.learn .item-sub[data-v-4ee3dd0c] {
+  width: 38%;
+}
+.openubmc.support .item-sub[data-v-4ee3dd0c] {
+  width: 19%;
+}
+.openubmc.support .item-sub[data-v-4ee3dd0c]:nth-of-type(2) {
+  width: 57%;
+}
+.openubmc.support .item-sub:nth-of-type(2) .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openubmc.support .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c] {
+  width: calc(33% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openubmc.support .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c]:nth-child(-n+3) {
+  margin-top: 0;
+}
+.openubmc.support .item-sub:nth-of-type(2) .content-item[data-v-4ee3dd0c]:nth-of-type(3n) {
+  margin-right: 0;
+}
+@media (max-width: 1200px) {
+.openubmc.support .item-sub[data-v-4ee3dd0c] {
+    width: 25%;
+}
+.openubmc.support .item-sub[data-v-4ee3dd0c]:nth-of-type(2) {
+    width: 75%;
+}
+}
+.openubmc.community .item-sub[data-v-4ee3dd0c] {
+  width: 50%;
+}
+.openubmc.community .item-sub .content-container[data-v-4ee3dd0c] {
+  flex-direction: row;
+}
+.openubmc.community .item-sub .content-item[data-v-4ee3dd0c] {
+  width: calc(50% - var(--sub-right));
+  margin-right: var(--sub-right);
+}
+.openubmc.community .item-sub .content-item[data-v-4ee3dd0c]:nth-child(-n+2) {
+  margin-top: 0;
+}
+.openubmc.community .item-sub .content-item[data-v-4ee3dd0c]:nth-of-type(2n) {
+  margin-right: 0;
+}