diff --git a/app/.vitepress/src-new/components/header/HeaderNav.vue b/app/.vitepress/src-new/components/header/HeaderNav.vue index 7edab3b1da2fefd5c207e5cfb3aa1164f9090805..4eb7507d7bc09eb4014ac5cb2af93600d17a9c2d 100644 --- a/app/.vitepress/src-new/components/header/HeaderNav.vue +++ b/app/.vitepress/src-new/components/header/HeaderNav.vue @@ -120,9 +120,9 @@ const linkClick = () => { /> - {{ - subNavContent.NAME - }} + {{ + subNavContent.NAME + }}
{ :nav-content="subNavContent?.CHILDREN" @link-click="linkClick" /> +
+
+ + {{ extra.NAME }} + + + + + +
+
-
+
{{ @@ -188,12 +209,6 @@ const linkClick = () => {

{{ shortcut.NAME }}

-

- {{ shortcut.DESCRIPTION }} -

{{ shortcut.REMARK }}
@@ -365,7 +380,7 @@ const linkClick = () => { .nav-drop-content { max-width: 1416px; - width: calc(100vw - 64px); + width: calc(100vw - 2*var(--layout-content-padding)); display: flex; } @@ -468,7 +483,7 @@ const linkClick = () => { .content-left { flex: 1; - padding: 32px 24px 24px 32px; + padding: 32px 24px 32px 32px; @include respond-to('pad_h') { padding: var(--o-gap-6) var(--o-gap-4); @@ -490,25 +505,22 @@ const linkClick = () => { width: 16px; padding-left: 6px; } + .extra { + margin-top: var(--o-gap-5); + } } .content-right { - width: 298px; + width: 358px; padding-top: var(--o-gap-6); padding-bottom: var(--o-gap-5); padding-left: var(--o-gap-4); - @media screen and (max-width: 1780px) { - width: 384px; - } - @include respond-to('laptop') { - width: 354px; - } @include respond-to('pad_h') { width: 224px; } .shortcut { - width: 282px; + width: 342px; min-height: 42px; background: var(--o-color-fill3); border-radius: var(--o-radius_control-xs); @@ -519,12 +531,6 @@ const linkClick = () => { cursor: pointer; @include tip1; - @media screen and (max-width: 1780px) { - width: 362px; - } - @include respond-to('laptop') { - width: 334px; - } @include respond-to('pad_h') { width: 204px; } @@ -548,17 +554,11 @@ const linkClick = () => { } .review { - width: 410px; + width: 342px; display: flex; align-items: unset; position: relative; - @media screen and (max-width: 1780px) { - width: 360px; - } - @include respond-to('laptop') { - width: 300px; - } @include respond-to('pad_h') { width: 200px; &:not(:last-child) { @@ -579,47 +579,32 @@ const linkClick = () => { } .review-picture { - width: 160px; + width: 120px; height: auto; display: block; object-fit: contain; - @media screen and (max-width: 1780px) { - max-width: 150px; - } - @include respond-to('laptop') { - width: 120px; - height: 68px; - } @include respond-to('pad_h') { display: none; } } .review-content { - margin-left: var(--o-gap-4); + margin-left: var(--o-gap-2); flex: 1; - max-width: 224px; + max-width: 212px; + height: 68px; display: flex; flex-direction: column; justify-content: space-between; - @media screen and (max-width: 1780px) { - max-width: 200px; - } - @include respond-to('laptop') { - margin-left: var(--o-gap-2); - height: 68px; - } @include respond-to('pad_h') { margin-left: unset; - height: 68px; } .review-title { @include text1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + @include text-truncate(2); + max-height: 48px; color: var(--o-color-info1); font-weight: 500; cursor: pointer; @@ -627,25 +612,8 @@ const linkClick = () => { @include hover { color: var(--o-color-primary1); } - - @include respond-to('<=laptop') { - white-space: wrap; - } - } - - .review-desc { - @include tip2; - overflow: hidden; - flex: 1; - color: var(--o-color-info2); - margin-top: var(--o-gap-1); - margin-bottom: var(--o-gap-2); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - - @include respond-to('<=laptop') { - display: none; + @include respond-to('pad_v-laptop') { + max-height: 44px; } } diff --git a/app/.vitepress/src-new/components/header/HeaderNavMoblie.vue b/app/.vitepress/src-new/components/header/HeaderNavMoblie.vue index 195a077c527264edd06aa25d8fee6669686d7305..c912a3491e755f1052ccab40a64fb18019e14667 100644 --- a/app/.vitepress/src-new/components/header/HeaderNavMoblie.vue +++ b/app/.vitepress/src-new/components/header/HeaderNavMoblie.vue @@ -116,6 +116,28 @@ const linkClick = () => {
+
+
+ + {{ extra.NAME }} + + + + + +
+
@@ -236,13 +258,25 @@ const linkClick = () => { display: block; flex: 0 1 auto; - :deep(.o-collapse-item-body) { - margin-bottom: 0; - } + :deep(.o-collapse-item-body) { + margin-bottom: 0; + } - .group + .group { - margin-top: var(--o-gap-3); - } + .group + .group { + margin-top: var(--o-gap-3); + } + + .content-title-url { + @include text2; + color: var(--o-color-primary1); + margin: var(--o-gap-4) 0; + + .icon { + height: 16px; + width: 16px; + margin-left: var(--o-gap-2); + } + } } .source-code-item { diff --git a/app/.vitepress/src-new/components/header/NavContent.vue b/app/.vitepress/src-new/components/header/NavContent.vue index 9fc0d41aed4acf72f7c2a11f2c24bda806533ec1..fc185df4130d9bde7e090553c7ebee5e524a6252 100644 --- a/app/.vitepress/src-new/components/header/NavContent.vue +++ b/app/.vitepress/src-new/components/header/NavContent.vue @@ -79,7 +79,7 @@ const descMouseenter = (e: MouseEvent) => { {{ subItem.DESCRIPTION }}

-
+
{{ system.NAME }} @@ -106,13 +106,6 @@ const descMouseenter = (e: MouseEvent) => { margin-left: var(--o-gap-2); } -@mixin hidden { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - .content-container { display: flex; margin: 0; @@ -135,17 +128,11 @@ const descMouseenter = (e: MouseEvent) => { } .content-item { - @include respond-to('>laptop') { - width: calc((100% - 96px) / 3); - min-width: 230px; - } - - @include respond-to('laptop') { + width: calc((100% - 96px) / 3); + @media (min-width: 1300px) and (max-width: 1440px) { width: calc((100% - 48px) / 3); - min-width: 184px; } - - @include respond-to('pad_h') { + @media (max-width: 1300px) { width: calc((100% - 24px) / 2); } } @@ -168,20 +155,19 @@ const descMouseenter = (e: MouseEvent) => { .desc-container { overflow: hidden; position: relative; - padding-bottom: var(--o-gap-3); .item-desc { color: var(--o-color-info2); margin: 0; - white-space: pre-line; @include tip2; - @include hidden; + @include text-truncate(2); } } .system-container { display: flex; flex-wrap: wrap; + padding-top: var(--o-gap-3); .system { font-weight: 500; @@ -229,7 +215,7 @@ const descMouseenter = (e: MouseEvent) => { margin-bottom: var(--o-gap-1); text-align: justify; @include text1; - @include hidden; + @include text-truncate(2); } } diff --git a/app/.vitepress/src-new/i18n/header/header-en.ts b/app/.vitepress/src-new/i18n/header/header-en.ts index e08b01b565f834c3bacc0be811bd03e301a65a9d..045aa84781addb8d52f000192e8f1d503f6d1d4c 100644 --- a/app/.vitepress/src-new/i18n/header/header-en.ts +++ b/app/.vitepress/src-new/i18n/header/header-en.ts @@ -18,54 +18,6 @@ export default { NAME: 'Download', ID: 'download', CHILDREN: [ - { - NAME: 'Get openEuler OS', - CHILDREN: [ - { - NAME: 'openEuler Is Everywhere', - DESCRIPTION: 'Get openEuler for public clouds, containers, and Windows.', - TAG: TAG_TYPE.HOT, - URL: '/download/get-os/', - MOBILE_SHOW_CHILD: false, - CHILDREN: [ - { - NAME: 'Cloud Images', - URL: '/wiki/install/cloud/', - }, - { - NAME: 'Container Images', - URL: '/wiki/install/image/', - }, - { - NAME: 'Windows', - URL: '/wiki/install/wsl/', - }, - { - NAME: 'Virtualization', - URL: '/wiki/install/virtualization/', - }, - { - NAME: 'Raspberry Pi', - URL: 'https://gitee.com/openeuler/raspberrypi/blob/master/README.md', - }, - ], - } - ], - SHORTCUT: [ - { - NAME: 'openEuler 24.03 LTS', - URL: '/download/?version=openEuler 24.03 LTS', - }, - { - NAME: 'openEuler repo', - URL: 'https://repo.openeuler.openatom.cn/', - }, - { - NAME: 'Mirrors', - URL: '/mirror/list/', - }, - ], - }, { NAME: 'Community Releases', CHILDREN: [ @@ -166,7 +118,42 @@ export default { NAME: 'Historical Releases', URL: '/download/archive/', }, - ], + ], + EXTRAS: [ + { + NAME: 'Get openEuler', + URL: '/download/get-os/', + ICON: ArrowRight, + CHILDREN: [ + { + NAME: 'Cloud Images', + DESCRIPTION: 'openEuler has released official images on mainstream public cloud platforms', + URL: '/wiki/install/cloud/', + }, + { + NAME: 'Container Images', + DESCRIPTION: 'openEuler provides official container images', + URL: '/wiki/install/image/', + }, + { + NAME: 'Windows', + DESCRIPTION: 'Running openEuler on Windows', + URL: '/wiki/install/wsl/', + }, + { + NAME: 'Virtualization', + DESCRIPTION: 'Running openEuler on VMs', + URL: '/wiki/install/virtualization/', + }, + { + NAME: 'Raspberry Pi', + DESCRIPTION: 'Installing openEuler on Raspberry Pi', + ICON: OutLink, + URL: 'https://gitee.com/openeuler/raspberrypi/blob/master/README.md', + }, + ], + }, + ] }, { NAME: 'Other Releases', diff --git a/app/.vitepress/src-new/i18n/header/header-zh.ts b/app/.vitepress/src-new/i18n/header/header-zh.ts index d5304f98cb85c677a978ea329f5796cbf9480123..f30ebfaf485333d3ce42ab62928fde2fb82f8658 100644 --- a/app/.vitepress/src-new/i18n/header/header-zh.ts +++ b/app/.vitepress/src-new/i18n/header/header-zh.ts @@ -21,54 +21,6 @@ export default { NAME: '下载', ID: 'download', CHILDREN: [ - { - NAME: '获取方式', - CHILDREN: [ - { - NAME: '获取openEuler操作系统', - DESCRIPTION: '提供获取openEuler的不同方式公有云、容器镜像、windows等', - TAG: TAG_TYPE.HOT, - URL: '/download/get-os/', - MOBILE_SHOW_CHILD: false, - CHILDREN: [ - { - NAME: '公有云', - URL: '/wiki/install/cloud/', - }, - { - NAME: '容器镜像', - URL: '/wiki/install/image/', - }, - { - NAME: 'Windows', - URL: '/wiki/install/wsl/', - }, - { - NAME: 'Virtualization', - URL: '/wiki/install/virtualization/', - }, - { - NAME: 'Raspberry Pi', - URL: 'https://gitee.com/openeuler/raspberrypi/blob/master/README.md', - }, - ], - } - ], - SHORTCUT: [ - { - NAME: 'openEuler 24.03 LTS', - URL: '/download/?version=openEuler 24.03 LTS', - }, - { - NAME: 'openEuler repo 源', - URL: 'https://repo.openeuler.openatom.cn/', - }, - { - NAME: '镜像仓列表', - URL: '/mirror/list/', - }, - ], - }, { NAME: '社区发行版', CHILDREN: [ @@ -170,6 +122,41 @@ export default { URL: '/download/archive/', }, ], + EXTRAS: [ + { + NAME: '其他获取方式', + URL: '/download/get-os/', + ICON: ArrowRight, + CHILDREN: [ + { + NAME: '公有云', + DESCRIPTION: 'openEuler官方镜像在以下主流平台正式发布', + URL: '/wiki/install/cloud/', + }, + { + NAME: '容器镜像', + DESCRIPTION: 'openEuler提供官方容器镜像', + URL: '/wiki/install/image/', + }, + { + NAME: 'Windows', + DESCRIPTION: '在Windows上运行openEuler', + URL: '/wiki/install/wsl/', + }, + { + NAME: 'Virtualization', + DESCRIPTION: '在虚拟机上运行openEuler', + URL: '/wiki/install/virtualization/', + }, + { + NAME: 'Raspberry Pi', + DESCRIPTION: '在树莓派上安装openEuler', + ICON: OutLink, + URL: 'https://gitee.com/openeuler/raspberrypi/blob/master/README.md', + }, + ], + }, + ] }, { NAME: '其他版本', @@ -183,7 +170,7 @@ export default { SHORTCUT: [], }, { - NAME: '下载服务', + NAME: '下载资源', CHILDREN: [ { NAME: '软件中心', @@ -416,6 +403,12 @@ export default { { NAME: '发布', CHILDREN: [ + { + NAME: 'EulerPublisher', + DESCRIPTION: 'openEuler云原生发布工具', + URL: 'https://gitee.com/openeuler/eulerpublisher', + ICON: OutLink + }, { NAME: 'EulerLauncher', DESCRIPTION: '跨平台openEuler虚拟机管理工具',