diff --git a/packages/common/src/assets/appIcon/ai-extension.svg b/packages/common/src/assets/appIcon/ai-extension.svg new file mode 100644 index 00000000..9945ab9c --- /dev/null +++ b/packages/common/src/assets/appIcon/ai-extension.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/genui-sdk-white.svg b/packages/common/src/assets/appIcon/genui-sdk-white.svg new file mode 100644 index 00000000..6a65a6eb --- /dev/null +++ b/packages/common/src/assets/appIcon/genui-sdk-white.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/common/src/assets/appIcon/genui-sdk.svg b/packages/common/src/assets/appIcon/genui-sdk.svg index 43383347..4609b60a 100644 --- a/packages/common/src/assets/appIcon/genui-sdk.svg +++ b/packages/common/src/assets/appIcon/genui-sdk.svg @@ -1,28 +1,28 @@ - + - + - + - + - - - - + + + + - + - + diff --git a/packages/common/src/assets/appIcon/next-sdk.svg b/packages/common/src/assets/appIcon/next-sdk.svg index 4141f73e..42efd7f5 100644 --- a/packages/common/src/assets/appIcon/next-sdk.svg +++ b/packages/common/src/assets/appIcon/next-sdk.svg @@ -1,27 +1,30 @@ - + - - - + + + + - - - + + + + + + + - - - + + - - - - - + + + + - - + + - \ No newline at end of file + diff --git a/packages/common/src/assets/appIcon/tiny-chart.svg b/packages/common/src/assets/appIcon/tiny-chart.svg index 895b4baf..0c2d421c 100644 --- a/packages/common/src/assets/appIcon/tiny-chart.svg +++ b/packages/common/src/assets/appIcon/tiny-chart.svg @@ -1,27 +1,35 @@ - - - Created with Pixso. - + - - - - + + + + - - - - + + + + - - - + + + + + + + - - - - - + + + + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-cli.svg b/packages/common/src/assets/appIcon/tiny-cli.svg index aa96bbea..5ddd1c21 100644 --- a/packages/common/src/assets/appIcon/tiny-cli.svg +++ b/packages/common/src/assets/appIcon/tiny-cli.svg @@ -1,21 +1,20 @@ - - - Created with Pixso. - + - - - - + + + + - - - + + + - - - - + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-editor.svg b/packages/common/src/assets/appIcon/tiny-editor.svg index 09cab5de..ea2d490b 100644 --- a/packages/common/src/assets/appIcon/tiny-editor.svg +++ b/packages/common/src/assets/appIcon/tiny-editor.svg @@ -1,21 +1,21 @@ - + - + - + - - + + - + - + diff --git a/packages/common/src/assets/appIcon/tiny-engine.svg b/packages/common/src/assets/appIcon/tiny-engine.svg index 720d35d4..afe63774 100644 --- a/packages/common/src/assets/appIcon/tiny-engine.svg +++ b/packages/common/src/assets/appIcon/tiny-engine.svg @@ -1,22 +1,21 @@ - - - Created with Pixso. - + - - - - + + + + - - - + + + - - - - - + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-ng.svg b/packages/common/src/assets/appIcon/tiny-ng.svg index 2df9d526..73488b12 100644 --- a/packages/common/src/assets/appIcon/tiny-ng.svg +++ b/packages/common/src/assets/appIcon/tiny-ng.svg @@ -1,28 +1,27 @@ - - - Created with Pixso. - + - - - + + + - - - + + + - - - - + + + + - - - + + + + + + + + + - - - - diff --git a/packages/common/src/assets/appIcon/tiny-pro-ng.svg b/packages/common/src/assets/appIcon/tiny-pro-ng.svg new file mode 100644 index 00000000..e230bc6b --- /dev/null +++ b/packages/common/src/assets/appIcon/tiny-pro-ng.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-pro.svg b/packages/common/src/assets/appIcon/tiny-pro.svg index 40a671a7..ddd18974 100644 --- a/packages/common/src/assets/appIcon/tiny-pro.svg +++ b/packages/common/src/assets/appIcon/tiny-pro.svg @@ -1,21 +1,31 @@ - - - Created with Pixso. - + - - - - + + + + - - - + + + + + + + + - - - - + + + + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-robot-white.svg b/packages/common/src/assets/appIcon/tiny-robot-white.svg new file mode 100644 index 00000000..db877b1b --- /dev/null +++ b/packages/common/src/assets/appIcon/tiny-robot-white.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-robot.svg b/packages/common/src/assets/appIcon/tiny-robot.svg index 339d60b6..2349dd42 100644 --- a/packages/common/src/assets/appIcon/tiny-robot.svg +++ b/packages/common/src/assets/appIcon/tiny-robot.svg @@ -1,9 +1,16 @@ - - - - - - - + + + + + + + + + + + + + + diff --git a/packages/common/src/assets/appIcon/tiny-theme.svg b/packages/common/src/assets/appIcon/tiny-theme.svg index f2d9cc6a..95ef854d 100644 --- a/packages/common/src/assets/appIcon/tiny-theme.svg +++ b/packages/common/src/assets/appIcon/tiny-theme.svg @@ -19,4 +19,4 @@ - + \ No newline at end of file diff --git a/packages/common/src/assets/appIcon/tiny-vue-mobile.svg b/packages/common/src/assets/appIcon/tiny-vue-mobile.svg index c557929e..b5020071 100644 --- a/packages/common/src/assets/appIcon/tiny-vue-mobile.svg +++ b/packages/common/src/assets/appIcon/tiny-vue-mobile.svg @@ -25,4 +25,4 @@ - + \ No newline at end of file diff --git a/packages/common/src/assets/appIcon/tiny-vue-plus.svg b/packages/common/src/assets/appIcon/tiny-vue-plus.svg index 5b6a9f99..0a8caffb 100644 --- a/packages/common/src/assets/appIcon/tiny-vue-plus.svg +++ b/packages/common/src/assets/appIcon/tiny-vue-plus.svg @@ -35,4 +35,4 @@ - + \ No newline at end of file diff --git a/packages/common/src/assets/appIcon/tiny-vue.svg b/packages/common/src/assets/appIcon/tiny-vue.svg index 5dd2dba0..59ee6a59 100644 --- a/packages/common/src/assets/appIcon/tiny-vue.svg +++ b/packages/common/src/assets/appIcon/tiny-vue.svg @@ -1,21 +1,23 @@ - - - Created with Pixso. - + - - - + + + + - - - - + + + - - - + + + + + + + + + - diff --git a/packages/common/src/assets/appIcon/web-agent.svg b/packages/common/src/assets/appIcon/web-agent.svg new file mode 100644 index 00000000..0475976a --- /dev/null +++ b/packages/common/src/assets/appIcon/web-agent.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/common/src/components/footer.vue b/packages/common/src/components/footer.vue index cf0d175b..b600216f 100644 --- a/packages/common/src/components/footer.vue +++ b/packages/common/src/components/footer.vue @@ -67,9 +67,9 @@ function toggleLink(link: any) { @@ -346,16 +249,8 @@ function toggleLink(link: any) { color: #b3b3b3; background-color: #1a1a1a; - .footer-content { - border-bottom-color: #979797; - - .footer-text-list { - border-bottom-color: #979797; - } - } - .footer-title { color: #e6e6e6; } } - + \ No newline at end of file diff --git a/packages/common/src/components/header.vue b/packages/common/src/components/header.vue index db0cb9d4..b433a6af 100644 --- a/packages/common/src/components/header.vue +++ b/packages/common/src/components/header.vue @@ -22,6 +22,7 @@ import UserIcon3 from '../assets/userIcon/userIcon_3.png' // theme svg import SunSvg from '../assets/theme-icon/sun.svg' import MoonSvg from '../assets/theme-icon/moon.svg' +import gitcodeLogo from '../assets/appIcon/gitcode-logo.svg' import { useDark, useToggle } from "@vueuse/core" import useClickOutside from './useClickOutside' @@ -65,14 +66,12 @@ interface UserInfo { userId: string; userIcon: string } const state = reactive({ headerInfo: (props.options?.customMenus || headerInfo.filter(item => item.type !== 'other' - )).map(item => ({ ...item, active: false })), // 添加 active 字段 + )).map(item => ({ ...item, active: false })), otherAppInfo: headerInfo.filter(item => item.type === 'other' - ).map(item => ({ ...item, active: false })), // 添加 active 字段 + ).map(item => ({ ...item, active: false })), allInfo: props.options?.customMenus || headerInfo, - // isLogin: true, - // userInfo: { userId: 'shenjunjian', userIcon: UserIcon1 } as unknown as UserInfo isLogin: false, userInfo: null as unknown as UserInfo, mobileMenuActive: false, @@ -85,7 +84,6 @@ function enterTopMenu(item: any) { if (_lastHoverItem) { _lastHoverItem.active = false } - item.active = true _lastHoverItem = item } @@ -104,11 +102,11 @@ function checkUnderlineMenu() { }) }, 200); } -window.__checkUnderlineMenu=checkUnderlineMenu // 全局隐藏变量 +window.__checkUnderlineMenu=checkUnderlineMenu onMounted(() => checkUnderlineMenu()) -// 登录与登出。 +// 登录与登出 const userInfoUrl = `${serverHost}designtheme/api/user/userInfo`, loginUrl = `${serverHost}designtheme/api/user/login?thirdLoginType=third-platform`, logoutUrl = `${serverHost}designtheme/api/user/logout`; @@ -146,21 +144,16 @@ const userIconMap = { 'userIcon_1.png': UserIcon1, 'userIcon_2.png': UserIcon2, async function getUserInfo() { const res: any = await _queryUrl(userInfoUrl, 'json') if (res?.response?.data) { - // 已登录返回 data:{userId, userIcon} 未登录，返回data:{} state.userInfo = res.response.data state.isLogin = !!state.userInfo.userId - - // 外部登录，返回 data:{userIcon} 的值为： ['userIcon_1.png', 'userIcon_2.png', 'userIcon_3.png'] if (userIconMap[state.userInfo.userIcon]) { state.userInfo.userIcon = userIconMap[state.userInfo.userIcon] as string } } } -// onMounted(() => getUserInfo()) - // 移动端 -function clickMobileMenu(level1) { +function clickMobileMenu(level1: any) { if (level1 !== _lastHoverItem) { if (_lastHoverItem) { _lastHoverItem.m_active = false @@ -170,8 +163,6 @@ function clickMobileMenu(level1) { } else { level1.m_active = !level1.m_active } - - // checkUnderlineMenu() } useClickOutside(['.nav-mobile'], () => { @@ -181,20 +172,15 @@ useClickOutside(['.nav-mobile'], () => { // 收缩菜单 let menuEl: HTMLElement if (props?.options?.menuCollapse?.useCollapse) { - // 由于用户应用和common-header不是同一个应用，无法得知用户的menu什么时候加载出来 - // 用户也不可能页面显示的第1时间，就能点左上角的图标展开菜单，所以把这个时间留大一些。 setTimeout(() => { let menuId = props?.options?.menuCollapse?.menuId - if (!menuId) return - if (menuId.startsWith("#")) { menuId = menuId.slice(1) } - menuEl = document.getElementById(menuId) + menuEl = document.getElementById(menuId) as HTMLElement if (!menuEl) return - // resize时，给menu添加或移除 .common-user-menu-fixed 类名 const checkClass = () => { const winWidth = window.innerWidth; menuEl.classList.toggle('common-user-menu-fixed', winWidth <= 814) @@ -202,7 +188,6 @@ if (props?.options?.menuCollapse?.useCollapse) { window.addEventListener('resize', checkClass) checkClass() - // 监听document点击，如果不在MenuCollapse,且不在menuEl内部时，要关闭菜单 useClickOutside(['.is-menu-collapse', '#' + menuId], () => { state.menuCollapseActive = false menuEl.classList.toggle('active', state.menuCollapseActive) @@ -287,83 +272,70 @@ const toggleTheme = (event: MouseEvent) => {
- +
-
- -
- - -
- -
-
- {{ level1.name }} - - - -
-

{{ level1.name }}

-
+ +
+
+ {{ level1.name }} + + + +
+
+
- - -
-
{{ app.title }}
-
{{ app.desc }}
-
- +
{{ app.title }}
+
+ + +
+
+
{{ item.name }}
+
NEW
+
+
{{ item.desc }}
+
+ +
+
+
+ + +
+
- + - -
- -
@@ -419,50 +379,50 @@ const toggleTheme = (event: MouseEvent) => { {{ level1.name }}
- +
-
- - {{ app.title }} - +
+
{{ app.title }}
+
+ + {{ item.name }} + +
- +
-
+
+ GitHub
+
+
+ + Atomgit + +
+
@@ -474,7 +434,6 @@ const toggleTheme = (event: MouseEvent) => { .common-user-menu-fixed { position: fixed; z-index: 201; - display: none; } @@ -493,7 +452,6 @@ const toggleTheme = (event: MouseEvent) => { transition: all 0.3s; user-select: none; - .switch-theme-icon { width: 20px; height: 20px; @@ -505,8 +463,6 @@ const toggleTheme = (event: MouseEvent) => { } .dark.dark.dark { - - // 暗色时的切换主题 .switch-theme-box { background-color: #484848; @@ -515,91 +471,5 @@ const toggleTheme = (event: MouseEvent) => { float: left; } } - - .opentiny-design-header { - background-color: #1a1a1a; - border-bottom: 1px solid #000; - color: #b3b3b3; - } - - .opentiny-design-header { - - .main-logo, - .is-sublogo { - color: #e6e6e6; - } - - .nav-center { - .top-menu a { - color: #b3b3b3; - } - - .top-menu { - &.underlined { - border-bottom: 2px solid #808080; - } - } - } - - .nav-right { - .dropdown-menu { - background-color: #1a1a1a; - - .dropdown-app { - &:hover { - background-color: #000; - } - - .app-title { - color: #e6e6e6; - } - - .app-desc { - color: #b3b3b3; - } - } - } - - .github-img { - color: #b3b3b3; - } - } - - .nav-mobile { - .mobile-menu-btn { - color: #b3b3b3; - } - - .mobile-menu-wrapper { - background-color: #1a1a1a; - - .mobile-menu { - color: #e6e6e6; - - .mobile-title { - color: #e6e6e6; - - a { - color: #e6e6e6; - } - } - - .line { - background-color: #808080; - } - - .dropdown-app { - color: #b3b3b3; - - &:hover { - color: #e6e6e6; - background: #000; - } - } - } - } - } - } - } - + \ No newline at end of file diff --git a/packages/common/src/components/responsive.less b/packages/common/src/components/responsive.less index a5015115..3d93bb6a 100644 --- a/packages/common/src/components/responsive.less +++ b/packages/common/src/components/responsive.less @@ -1,140 +1,125 @@ -// 大区间 -@media screen and (min-width: 815px) { - .opentiny-design-header { - .nav-mobile { - display: none !important; - } +@color-text: #191919; +@color-text-secondary: #808080; +@color-text-tertiary: #595959; +@color-text-disabled: #c2c2c2; +@color-border: #e8e8e8; +@color-bg: #fff; +@color-bg-hover: #f0f0f0; +@color-bg-light: #f5f5f5; + +@header-height: 64px; +@header-height-mobile: 60px; +@z-header: 999; - .nav-center, - .nav-right { - display: flex !important; - } - } +.flex-center { + display: flex; + justify-content: center; + align-items: center; } -// 1150 特殊区间，隐藏副logo 否则会挤压 -@media screen and (max-width: 1150px) { - .opentiny-design-header { - .nav-left .is-sublogo { - display: none !important; - } - } +.hand { + cursor: pointer; } -// 移动区间 -@media screen and (max-width: 814px) { - .opentiny-design-header { - --top-height: 60px !important; - - .is-menu-collapse { - display: block !important; - - } - - .nav-mobile { - display: block !important; - } +.text-main { color: @color-text; } +.text-second { color: @color-text-secondary; } +.text-disabled { color: @color-text-disabled; } - .nav-center, - .nav-right { - display: none !important; - } - } +.line { + width: 1px; + height: 1px; + background-color: @color-border; } .dropdown-100 { width: 100%; - margin-left: 269px; + margin-left: 0; } -// flex-center -.flex-center { - display: flex; - justify-items: center; - align-items: center; +.dropdown-column { + flex-direction: column; } -// 分隔线 -.line { - height: 1px; - width: 1px; - background-color: #e8e8e8; -} +// ============================================ +// Header 主容器（保持不变） +// ============================================ +.opentiny-design-header { + position: fixed; + top: 0; + z-index: @z-header; + display: flex; + box-sizing: border-box; + width: 100vw; + height: var(--header-height, @header-height); + padding: 0 32px; + font-family: PingFangSC, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 22px; + background-color: @color-bg; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + transition: all 0.3s; + --header-height: @header-height; + + * { box-sizing: border-box; } + + .app-logo { + width: 28px; + height: 28px; + } -.text-main { - color: #191919; -} + .app-dropdown-logo { + width: 24px; + height: 24px; + margin-right: 16px; + } -.text-second { - color: #808080; -} + .app-name { + display: inline-block; + margin-left: 12px; + font-size: 14px; + line-height: 14px; + color: @color-text; + } -.text-disabled { - color: #c2c2c2; -} + .app-desc { + margin-left: 12px; + font-size: 12px; + line-height: 12px; + color: @color-text-secondary; + } -.hand { - cursor: pointer; -} + .app-desc-child { + font-size: 12px; + line-height: 18px; + color: @color-text-secondary; + } -.opentiny-design-header { - display: flex; - top: 0; - position: fixed; - z-index: 999; - box-sizing: border-box; - width: 100vw; - padding: 0 32px; - background-color: #fff; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - height: 64px; - - // 通用样式 - font-family: PingFangSC; - font-size: 14px; - line-height: 22px; - font-weight: 400; - transition: all 0.3s; - * { - box-sizing: border-box; - } + .app-desc-icon { + display: flex; + width: 30px; + height: 14px; + align-items: center; + justify-content: center; + padding: 4px; + border-radius: 2px; + margin-left: 12px; + background: rgba(244, 232, 232, 1); - & { - .app-logo { - width: 28px; - height: 28px; - } - .app-dropdown-logo { - width: 24px; - height: 24px; - margin-right: 16px; - } - .app-name { - display: inline-block; - margin-left: 12px; - font-size: 14px; - line-height: 14px; - font-weight: 400; - color: #191919; - } - .app-desc { - font-size: 12px; - line-height: 12px; - color: #808080; - margin-left: 12px; - } - .app-desc-child { - font-size: 12px; - line-height: 18px; - color: #808080; + span { + font-size: 9px; + font-weight: 700; + color: rgba(199, 0, 11, 1); } } + // ============================================ + // Nav Left（保持不变） + // ============================================ .nav-left { margin-right: 68px; - .main-logo { - color: #000; - } + + .main-logo { color: #000; } .is-menu-collapse { display: none; @@ -148,154 +133,235 @@ .line { height: 21px; - background-color: #808080; margin: 0 24px; + background-color: @color-text-secondary; } - img { - display: block; - } + img { display: block; } } + // ============================================ + // Nav Center（保持不变） + // ============================================ .nav-center { - // margin-left: 118px; display: flex; + flex: 1; align-items: center; + justify-content: center; .top-menu { - height: 64px; - margin-right: 48px; - border-bottom: 2px solid transparent; // 占位 + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 108px; + height: 44px; + margin-right: clamp(8px, 2.5vw, 60px); + border-bottom: 2px solid transparent; + border-radius: 8px; a { + color: #000; text-decoration: none; - color: black; } &.underlined { - border-bottom: 2px solid #000; + border-bottom-color: #000; } - } - } - .nav-right { - margin-left: auto; + &:hover, + &.active { + background-color: @color-bg-hover; + + .top-menu-title { font-weight: 700; } + .top-menu-svg { transform: rotateZ(180deg); } + + .dropdown-menu { + opacity: 1; + transform: translateY(0) scaleY(1); + visibility: visible; + pointer-events: auto; + max-height: 800px; + min-height: 526px; + transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear, max-height 0s linear; + } + } + + &::after { + content: ''; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 20px; + background: transparent; + } + } .top-menu-title { - font-size: 14px; + font-size: 16px; font-weight: 400; - line-height: 14px; - color: #191919; + line-height: 16px; + color: @color-text; } .top-menu-svg { - height: 20px; width: 20px; - margin-left: 4px; - transition: all 0.4s; + height: 20px; + margin-left: 12px; + transition: transform 0.4s; } .mg-r { - margin-right: 40px; - } - - - & .active { - .dropdown-menu { - max-height: 290px; - } - - .top-menu-svg { - transform: rotateZ(180deg); - } - } - - .dropdown-column { - flex-direction: column; + margin-right: 60px; } - // 下拉面板 默认撑满宽度 .dropdown-menu { - display: flex; - position: absolute; + position: fixed; + top: var(--header-height); left: 0; - top: 64px; + z-index: 1000; + display: flex; + flex-direction: column; width: 100vw; + max-height: 0; height: auto; - background-color: #fff; - box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04); overflow: hidden; - max-height: 0; - transition: max-height 0.3s linear; + background-color: @color-bg; border-radius: 0 0 20px 20px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); + + opacity: 0; + transform: translateY(-8px) scaleY(0.98); + transform-origin: top center; + visibility: hidden; + pointer-events: none; + will-change: transform, opacity; + transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s, max-height 0s linear 0.25s; .dropdown-content-title { - color: #808080; + width: 100%; + padding: 24px 48px 8px; + margin: 0; font-size: 16px; font-weight: 400; line-height: 14px; - margin: 40px 0 0 285px; + color: @color-text-secondary; } .dropdown-content { - width: 1296px; - padding: 32px 0 40px 0; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + gap: 124px; + width: 100%; + padding: 100px 240px 80px; + margin-left: 0; + transform: translateZ(0); + + .dropdown-app-part { + display: flex; flex-wrap: wrap; justify-content: flex-start; - gap: 24px; - - .dropdown-app { - display: flex; - flex-direction: row; - align-items: center; - width: 240px; - height: 54px; - padding: 8px; - border-radius: 8px; - - .app-logo { - width: 40px; - height: 40px; - margin-right: 16px; - } + gap: 32px; + width: 100%; + } - .app-title { - color: #191919; - font-size: 14px; - font-weight: 400; - line-height: 18px; - } + > .dropdown-app-part > .dropdown-app, + > .dropdown-app { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1; + min-width: 200px; + max-width: 320px; + height: auto; + padding: 16px 0; + border-radius: 8px; + + > .app-title { + margin-bottom: 48px; + margin-left: 8px; + font-size: 16px; + font-weight: 600; + line-height: 1.5; + color: @color-text; + } - .app-desc { - color: rgb(89, 89, 89); - font-size: 12px; - font-weight: 400; - line-height: 18px; - } + > .app-data { + width: 100%; - &:hover { - background-color: #f5f5f5; + > a.dropdown-app { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 54px; + padding: 8px; + margin-bottom: 24px; + border-radius: 8px; + text-decoration: none; + transition: background-color 0.2s; + + &:hover { + background-color: @color-bg-light; + } + + .app-dropdown-logo { + width: 28px; + height: 28px; + margin-right: 16px; + margin-bottom: 6px; + flex-shrink: 0; + } + + .app-title-child { + display: flex; + align-items: center; + justify-content: flex-start; + font-size: 14px; + font-weight: 500; + line-height: 1.4; + color: @color-text; + } } } + } } } + } - .github-img { + // ============================================ + // Nav Right（保持不变） + // ============================================ + .nav-right { + display: flex; + align-items: center; + gap: 32px; + + .github-space { + display: inline-block; + margin-left: 8px; + vertical-align: super; color: #191919; + } + + .github-img { width: 28px; height: 28px; + color: @color-text; } .login-wrap { position: relative; margin-left: 32px; - .login-button { padding: 0 18px; line-height: 26px; + border: 1px solid @color-text; border-radius: 14px; - border: 1px solid #191919; } .login-avatar { @@ -306,17 +372,16 @@ } .login-menu { - display: none; position: absolute; right: 0; - padding: 10px 0 8px 0; + display: none; width: 186px; - border-radius: 6px; - background-color: #fff; - box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); - + padding: 10px 0 8px; font-size: 12px; font-weight: 400; + background-color: @color-bg; + border-radius: 6px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); .text { height: 32px; @@ -330,411 +395,417 @@ } .exit-login:hover { - background-color: #f5f5f5; + background-color: @color-bg-light; } } - &:hover { - .login-menu { - display: block; - } + &:hover .login-menu { + display: block; } } } } .nav-mobile { + display: none; position: relative; - padding-left: 20px; // 防止区域太小，一离开就收起下拉菜单 + padding-left: 20px; .mobile-menu-btn { - color: #191919; - width: 18px; - height: 15px; + width: 24px; + height: 24px; + padding: 4px; + color: @color-text; + cursor: pointer; + transition: color 0.2s; + + &:hover { + color: @color-text-secondary; + } } .mobile-menu-wrapper { - display: none; position: absolute; - - width: 230px; - padding: 24px 0; right: 0; - background-color: #fff; - border-radius: 8px; - box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); + top: calc(100% + 8px); + display: none; + width: 280px; + max-width: calc(100vw - 32px); + max-height: calc(100vh - 80px); + overflow-y: auto; + padding: 8px 0; + background-color: @color-bg; + border-radius: 12px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + z-index: 1001; .mobile-menu { - flex-wrap: wrap; - .mobile-menu-level1 { - height: 32px; - padding-left: 16px; + &.flex-center { + justify-content: space-between; + } + display: flex; + align-items: center; + height: 44px; + padding: 0 16px; + cursor: pointer; + transition: background-color 0.2s; + + &:hover { + background-color: @color-bg-hover; + } .mobile-title { - font-size: 14px; + margin-right: 8px; + font-size: 15px; font-weight: 600; line-height: 22px; - margin-right: 8px; + flex: 1; - a { + a, span { + color: @color-text; text-decoration: none; - color: black; + display: block; } } - img { - transition: all 0.4s; + .mobile-menu-svg { + width: 20px; + height: 20px; + flex-shrink: 0; + transition: transform 0.3s ease; + color: @color-text-secondary; } } .dropdown-menu { display: none; width: 100%; - color: #595959; - font-size: 14px; - font-weight: 400; - line-height: 22px; - } + padding: 4px 0; + background-color: @color-bg-light; - .dropdown-app { - height: 38px; - line-height: 38px; - margin: 0 16px; + .dropdown-app { + height: 40px; + line-height: 40px; + padding: 0 16px 0 32px; + margin: 0; + transition: background-color 0.2s; + cursor: pointer; - &:hover { - background: #f5f5f5; + &:hover { + background-color: @color-bg-hover; + } + + a { + display: block; + width: 100%; + color: @color-text-secondary; + text-decoration: none; + font-size: 14px; + transition: color 0.2s; + + &:hover { + color: @color-text; + } + } } - } - .login-button { - width: 72px; - padding: 0 18px; - line-height: 26px; - margin-left: 10px; - border: 1px solid #595959; - border-radius: 14px; + .mobile-group { + .mobile-group-title { + padding: 12px 16px 4px; + font-size: 12px; + font-weight: 600; + color: @color-text-secondary; + letter-spacing: 0.5px; + line-height: 20px; + pointer-events: none; // 不可点击 + } + } } &.active { .dropdown-menu { display: block; + animation: slideDown 0.2s ease; } - img { + .mobile-menu-svg { transform: rotateZ(180deg); } } - } - .line { - width: 204px; - margin: 10px; + .line { + width: calc(100% - 32px); + height: 1px; + margin: 0 16px; + background-color: @color-border; + } } - } - &:hover, - &.active { - .mobile-menu-wrapper { - display: block; - } + &:hover .mobile-menu-wrapper, + &.active .mobile-menu-wrapper { + display: block; } - } } -@media screen and (max-width: 1400px) { - .opentiny-design-header { - display: grid; - grid-template-columns: 1fr auto; // 两列：左侧内容 + 右侧nav-right - grid-template-rows: auto auto; // 两行 - align-items: center; - height: 50px; - - .nav-left { - margin: 8px 0 8px 0; - margin-right: 64px; - grid-column: 1; // 第1列 - grid-row: 1; // 第1行 - } - .nav-center { - grid-column: 1 / -1; // 跨越所有列 - grid-row: 2; // 第2行 - margin-left: 0 !important; // 移除原来的左边距 - flex-wrap: wrap; // 允许内部换行 - margin: 8px 0; // 上下间距8px - } - - .nav-right { - margin: 8px 0 8px 0; - grid-column: 2; // 第2列 - grid-row: 1; // 第1行 - margin-left: 0; // 移除auto margin - .top-menu { - .dropdown-menu { - .dropdown-content-title { - margin: 16px 0 0 112px; - } - .dropdown-100 { - margin-left: 96px; - } - } - } - } - } -} - -@media screen and (max-width: 865px) { - .opentiny-design-header .nav-right .top-menu .dropdown-menu { - .dropdown-content { - gap: 10px; - } - .dropdown-100 { - margin-left: 20px; - } - .dropdown-content-title { - margin: 10px 0 0 36px; - } +// 大桌面 (≥1666px) +@media (min-width: 1666px) { + .opentiny-design-header { + .dropdown-content-title { padding-left: 48px; } } } -@media screen and (max-width: 1325px) { +@media (min-width: 1400px) and (max-width: 1665px) { .opentiny-design-header { - .nav-right { - .dropdown-menu { - .dropdown-content { - width: auto; - } - } + .nav-left { margin-right: clamp(48px, 4vw, 64px); } + + .nav-center { + .top-menu { margin-right: clamp(20px, 2.5vw, 40px); } + .mg-r { margin-right: clamp(20px, 2.5vw, 40px); } } } } -@media (min-width: 1615px) and (max-width: 1665px) { +@media (max-width: 1399px) and (min-width: 1024px) { .opentiny-design-header { - // 左侧导航 + padding: 0 24px; + .nav-left { - margin-right: 60px; + margin-right: 32px; + flex-shrink: 0; } - // 中间导航 .nav-center { + flex: 1; + justify-content: center; + margin-left: 0 !important; + .top-menu { - margin-right: 40px; + width: auto; + padding: 0 16px; + margin-right: clamp(8px, 1.5vw, 24px); } - } - // 右侧导航 - .nav-right { - .mg-r { - margin-right: 40px; - } - } - } -} + .dropdown-menu { + .dropdown-content { + gap: 48px; + padding: 48px 80px 64px; + justify-content: center; -@media (min-width: 1580px) and (max-width: 1615px) { - .opentiny-design-header { - // 左侧导航 - .nav-left { - margin-right: 56px; - } + .dropdown-app-part { + gap: 24px; + justify-content: center; + } + } - // 中间导航 - .nav-center { - .top-menu { - margin-right: 36px; + .dropdown-content-title { + padding: 16px 80px 8px; + } } } - // 右侧导航 .nav-right { - .mg-r { - margin-right: 36px; - } + margin-left: auto; + gap: 20px; + flex-shrink: 0; } } } -@media (min-width: 1545px) and (max-width: 1580px) { +@media (max-width: 1023px) and (min-width: 815px) { .opentiny-design-header { - // 左侧导航 + padding: 0 16px; + display: flex; + align-items: center; + .nav-left { - margin-right: 52px; + margin-right: 16px; + flex-shrink: 0; } - // 中间导航 .nav-center { + flex: 1; + justify-content: center; + margin-left: 0 !important; + .top-menu { - margin-right: 32px; - } - } + width: auto; + padding: 0 12px; + margin-right: clamp(4px, 1vw, 16px); + height: 40px; - // 右侧导航 - .nav-right { - .mg-r { - margin-right: 32px; + .top-menu-title { + font-size: 14px; + } } - } - } -} -@media (min-width: 1508px) and (max-width: 1545px) { - .opentiny-design-header { - // 左侧导航 - .nav-left { - margin-right: 48px; - } + .dropdown-menu { + top: var(--header-height); - // 中间导航 - .nav-center { - .top-menu { - margin-right: 28px; + .dropdown-content { + gap: 24px; + padding: 24px 40px 40px; + + .dropdown-app-part { + gap: 16px; + } + + > .dropdown-app-part > .dropdown-app, + > .dropdown-app { + min-width: 160px; + max-width: 280px; + padding: 12px 0; + + > .app-title { + margin-bottom: 24px; + font-size: 14px; + } + + > .app-data { + > a.dropdown-app { + height: 48px; + margin-bottom: 12px; + + .app-dropdown-logo { + width: 24px; + height: 24px; + margin-right: 12px; + } + } + } + } + } + + .dropdown-content-title { + padding: 12px 40px 8px; + font-size: 14px; + } } } - // 右侧导航 .nav-right { - .mg-r { - margin-right: 28px; + margin-left: auto; + gap: 16px; + flex-shrink: 0; + + .github-space { + display: none; } } } } -@media (min-width: 1476px) and (max-width: 1508px) { +// 移动端 (≤814px) +@media (max-width: 814px) { .opentiny-design-header { - // 左侧导航 - .nav-left { - margin-right: 48px; + --header-height: @header-height-mobile; + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + + .is-menu-collapse { + display: block !important; } - // 中间导航 - .nav-center { - .top-menu { - margin-right: 24px; + .nav-left { + margin-right: 0; + flex: 1; + display: flex; + align-items: center; + + .is-sublogo { + position: static; + margin-left: 12px; } - } - // 右侧导航 - .nav-right { - .mg-r { - margin-right: 24px; + .line { + display: none; } } - } -} -@media (min-width: 1400px) and (max-width: 1576px) { + .nav-center { + display: none !important; + } - .opentiny-design-header { - // 右侧导航 .nav-right { - .dropdown-menu { - .dropdown-content-title { - margin-left: 243px; - } - .dropdown-content .dropdown-app { - width: 216px; - } - } + display: none !important; } - } - .dropdown-100 { - margin-left: 228px; - } -} + .nav-mobile { + display: flex !important; + align-items: center; + padding-left: 0; -@media (min-width: 1576px) and (max-width: 1666px) { - .opentiny-design-header { - // 右侧导航 - .nav-right { - .dropdown-menu { - .dropdown-content-title { - margin-left: 253px; - } + .mobile-menu-wrapper { + right: -16px; + width: min(320px, calc(100vw - 32px)); + max-height: calc(100vh - var(--header-height) - 20px); + border-radius: 12px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } } } - - .dropdown-100 { - margin-left: 238px; - } } -@media (min-width: 1666px) { +// 小手机 (≤480px) +@media (max-width: 480px) { .opentiny-design-header { - .nav-right { - .dropdown-menu { - .dropdown-content-title { - margin-left: 263px; - } + padding: 0 12px; + + .nav-left { + .main-logo { + width: 140px; + height: auto; } } - } - .dropdown-100 { - margin-left: 248px; - } -} + .nav-mobile { + .mobile-menu-wrapper { + width: calc(100vw - 24px); + right: -12px; -@media (min-width: 1401px) and (max-width: 1475px) { - .opentiny-design-header { - // 左侧导航 - .nav-left { - margin-right: 48px; - } + .mobile-menu { + .mobile-menu-level1 { + padding: 0 12px; + } - // 中间导航 - .nav-center { - .top-menu { - margin-right: 20px; - } - } + .dropdown-app { + padding: 0 12px 0 28px; // 小屏适当减少缩进 + } + } - // 右侧导航 - .nav-right { - .mg-r { - margin-right: 20px; + .line { + width: calc(100% - 24px); + margin: 0 12px; + } } } } } -@media (min-width: 905px) and (max-width: 1045px) { +// 超小屏 (≤360px) +@media (max-width: 360px) { .opentiny-design-header { - // 右侧导航 - .nav-center { - .top-menu { - margin-right: 24px; - } + .nav-left { + .main-logo { + width: 120px; + } } } } -@media (min-width: 855px) and (max-width: 905px) { - .opentiny-design-header { - // 右侧导航 - .nav-center { - .top-menu { - margin-right: 16px; - } - } +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-4px); } -} - -@media (min-width: 815px) and (max-width: 855px) { - .opentiny-design-header { - // 右侧导航 - .nav-center { - .top-menu { - margin-right: 8px; - } - } + to { + opacity: 1; + transform: translateY(0); } -} - - +} \ No newline at end of file diff --git a/packages/common/src/config/header.ts b/packages/common/src/config/header.ts index 391dc2ab..124272aa 100644 --- a/packages/common/src/config/header.ts +++ b/packages/common/src/config/header.ts @@ -1,15 +1,18 @@ -import tinyAbout from '../../../home/public/images/logo-about.svg' -import tinyAi from '../../../home/public/images/logo-ai-extension.svg' +import tinyAi from '../assets/appIcon/ai-extension.svg' import tinyTech from '../../../home/public/images/logo-tech.svg' import tinyEngine from '../assets/appIcon/tiny-engine.svg' +import tinyNG from '../assets/appIcon/tiny-ng.svg' import tinySdks from '../assets/appIcon/next-sdk.svg' +import tinyWebAgent from '../assets/appIcon/web-agent.svg' import tinyPro from '../assets/appIcon/tiny-pro.svg' +import tinyProNg from '../assets/appIcon/tiny-pro-ng.svg' import tinyVue from '../assets/appIcon/tiny-vue.svg' +import tinyCli from '../assets/appIcon/tiny-cli.svg' import tinyRobot from '../assets/appIcon/tiny-robot.svg' import tinyEditor from '../assets/appIcon/tiny-editor.svg' +import tinyChart from '../assets/appIcon/tiny-chart.svg' import GenuiSdk from '../assets/appIcon/genui-sdk.svg' import sketch from '../../../home/public/images/logo-sketch.svg' -import gitcodeLogo from '../assets/appIcon/gitcode-logo.svg' import { createIsUnderline, downloadFile } from './common.ts' const isGitHubBuild = import.meta.env.MODE === 'github' @@ -22,63 +25,6 @@ const basePath = isGitHub ? '/opentiny.design/' : '/' const fileBaseUrl = isGitHub ? 'https://opentiny.design' : '' const menuItems = [ - { - name: 'TinyVue', - url: '/opentiny-design/tiny-vue', - children: [], - logo: tinyVue, - desc: '智能组件库', - github: 'https://github.com/opentiny/tiny-vue', - isUnderline: createIsUnderline('/opentiny-design/tiny-vue') - }, - { - name: 'TinyEngine', - url: '/tiny-engine', - children: [], - logo: tinyEngine, - desc: '智能搭建平台', - github: 'https://github.com/opentiny/tiny-engine', - isUnderline: createIsUnderline('/opentiny-design/tiny-engine') - }, - { - name: 'TinyRobot', - url: `${basePath}tiny-robot`, - children: [], - logo: tinyRobot, - desc: 'AI 对话组件库', - hide: false, - github: 'https://github.com/opentiny/tiny-robot', - isUnderline: createIsUnderline(`${basePath}tiny-robot`) - }, - { - name: 'NEXT-SDKs', - desc: '开发套件', - url: `${basePath}next-sdk`, - logo: tinySdks, - hide: false, - github: 'https://github.com/opentiny/next-sdk', - children: [], - isUnderline: createIsUnderline(`${basePath}next-sdk`) - }, - { - name: 'GenUI-SDK', - desc: '生成式UI', - url: `${basePath}genui-sdk`, - logo: GenuiSdk, - hide: false, - github: 'https://github.com/opentiny/genui-sdk', - children: [], - isUnderline: createIsUnderline(`${basePath}genui-sdk`) - }, - { - name: 'AI-Extension', - desc: 'AI 浏览器扩展插件', - url: `${basePath}ai-extension`, - logo: tinyAi, - hide: false, - github: 'https://github.com/opentiny/tiny-robot', - isUnderline: createIsUnderline(`${basePath}ai-extension`) - }, // 暂时隐藏起来 // { // type: 'other', @@ -132,57 +78,242 @@ const menuItems = [ // }, { type: 'other', - name: '开发文档', + name: '产品', url: '', children: [ { - title: 'TinyVue', - desc: '智能组件库', - href: 'https://docs.opentiny.design/tiny-vue/guide/introduce', - logo: tinyVue, - github: 'https://github.com/opentiny/docs' + title: '智能化解决方案', + data: [ + { + name: 'TinyRobot', + url: `${basePath}tiny-robot`, + children: [], + logo: tinyRobot, + desc: 'AI 对话组件库', + hide: false, + new: true, + github: 'https://github.com/opentiny/tiny-robot', + isUnderline: createIsUnderline(`${basePath}tiny-robot`) + }, + { + name: 'NEXT-SDKs', + desc: '开发套件', + url: `${basePath}next-sdk`, + logo: tinySdks, + hide: false, + new: true, + github: 'https://github.com/opentiny/next-sdk', + isUnderline: createIsUnderline(`${basePath}next-sdk`) + }, + { + name: 'GenUI-SDK', + desc: '生成式UI', + url: `${basePath}genui-sdk`, + logo: GenuiSdk, + hide: false, + new: true, + github: 'https://github.com/opentiny/genui-sdk', + isUnderline: createIsUnderline(`${basePath}genui-sdk`) + }, + { + name: 'AI-Extension', + desc: 'AI扩展插件', + url: `${basePath}ai-extension`, + logo: tinyAi, + hide: false, + new: true, + github: 'https://github.com/opentiny/tiny-robot', + isUnderline: createIsUnderline(`${basePath}ai-extension`) + }, + { + name: 'WebAgent', + url: `https://docs.opentiny.design/web-agent/guide/getting-started.html`, + children: [], + logo: tinyWebAgent, + desc: 'MCP代理转发服务', + hide: false, + github: 'https://github.com/opentiny/webmcp-sdk' + } + ] }, { - title: 'TinyEngine', - desc: '智能搭建平台', - href: 'https://docs.opentiny.design/tiny-engine/guide/introduction', - logo: tinyEngine, - github: 'https://github.com/opentiny/docs' + title: '场景化解决方案', + data: [ + { + name: 'TinyPro Vue', + url: `/vue-pro`, + logo: tinyPro, + desc: '中后台应用开发模板', + hide: false, + github: 'https://github.com/opentiny/tiny-pro' + }, + { + name: 'TinyPro Angular', + url: `/ng-pro`, + logo: tinyProNg, + desc: '中后台应用开发模板', + hide: false, + github: '' + }, + { + name: 'TinyCLI', + desc: '脚手架底座', + url: `/tiny-cli/home`, + logo: tinyCli, + hide: false, + github: 'https://github.com/opentiny/tiny-cli', + } + ] }, { - title: 'TinyRobot', - desc: '智能助手', - href: 'https://docs.opentiny.design/tiny-robot/guide/quick-start', - logo: tinyRobot, - github: 'https://github.com/opentiny/docs' + title: 'UI组件库', + data: [ + { + name: 'TinyVue', + url: '/opentiny-design/tiny-vue', + children: [], + logo: tinyVue, + desc: '智能组件库', + github: 'https://github.com/opentiny/tiny-vue', + isUnderline: createIsUnderline('/opentiny-design/tiny-vue') + }, + { + name: 'TinyNG', + desc: 'Angular技术栈基础组件库', + url: `https://opentiny.design/tiny-ng/overview`, + logo: tinyNG, + hide: false, + github: 'https://github.com/opentiny/tiny-ng', + children: [] + }, + { + name: 'TinyCharts', + desc: '专业图表组件库', + url: `https://opentiny.design/tiny-charts/QuickStart`, + logo: tinyChart, + hide: false, + new: true, + github: 'https://github.com/opentiny/tiny-charts', + children: [] + }, + { + name: 'TinyEditor', + desc: '富文本编辑器', + url: `https://docs.opentiny.design/tiny-editor/guide/quick-start.html`, + logo: tinyEditor, + hide: false, + new: true, + github: 'https://github.com/opentiny/tiny-editor' + } + ] }, { - title: 'NEXT-SDKs', - desc: '开发套件', - href: 'https://docs.opentiny.design/next-sdk/guide', - logo: tinySdks, - github: 'https://github.com/opentiny/docs' + title: '低代码引擎', + data: [ + { + name: 'TinyEngine', + url: '/tiny-engine', + children: [], + logo: tinyEngine, + desc: '低代码智能搭建平台', + github: 'https://github.com/opentiny/tiny-engine', + isUnderline: createIsUnderline('/opentiny-design/tiny-engine') + } + ] + } + ] + }, + { + type: 'other', + name: '文档', + url: '', + children: [ + { + title: '智能化解决方案', + data: [ + { + name: 'TinyRobot', + url: `https://docs.opentiny.design/tiny-robot/guide/quick-start`, + children: [], + logo: tinyRobot, + desc: 'AI 对话组件库', + hide: false, + github: 'https://github.com/opentiny/docs' + }, + { + name: 'NEXT-SDKs', + desc: '开发套件', + url: `https://docs.opentiny.design/next-sdk/guide`, + logo: tinySdks, + hide: false, + github: 'https://github.com/opentiny/docs', + }, + { + name: 'GenUI-SDK', + desc: '生成式UI', + url: `https://docs.opentiny.design/genui-sdk/guide/quick-start`, + logo: GenuiSdk, + hide: false, + github: 'https://github.com/opentiny/docs', + } + ] }, { - title: 'GenUI-SDK', - desc: '生成式UI', - href: 'https://docs.opentiny.design/genui-sdk/guide/quick-start', - logo: GenuiSdk, - github: 'https://github.com/opentiny/docs' + title: '场景化解决方案', + data: [ + { + name: 'TinyPro Vue', + url: `/vue-pro`, + children: [], + logo: tinyPro, + desc: '中后台应用开发模板', + hide: false, + github: 'https://github.com/opentiny/tiny-pro' + }, + { + name: 'TinyPro Angular', + url: `/ng-pro`, + children: [], + logo: tinyProNg, + desc: '中后台应用开发模板', + hide: false, + github: '' + } + ] }, { - title: 'TinyPro', - desc: '中后台解决方案', - href: '/vue-pro', - logo: tinyPro, - github: 'https://github.com/opentiny/tiny-pro' + title: 'UI组件库', + data: [ + { + name: 'TinyVue', + url: 'https://docs.opentiny.design/tiny-vue/guide/introduce', + children: [], + logo: tinyVue, + desc: '智能组件库', + github: 'https://github.com/opentiny/docs' + }, + { + name: 'TinyEditor', + desc: '富文本编辑器', + url: `https://docs.opentiny.design/tiny-editor/guide/quick-start`, + logo: tinyEditor, + hide: false, + github: 'https://github.com/opentiny/docs' + } + ] }, { - title: 'TinyEditor', - desc: '富文本编辑器', - href: 'https://opentiny.github.io/tiny-editor', - logo: tinyEditor, - github: 'https://github.com/opentiny/tiny-editor' + title: '低代码引擎', + data: [ + { + name: 'TinyEngine', + url: 'https://docs.opentiny.design/tiny-engine/guide/introduction', + children: [], + logo: tinyEngine, + desc: '低代码智能搭建平台', + github: 'https://github.com/opentiny/docs' + } + ] } ] }, @@ -192,29 +323,36 @@ const menuItems = [ url: '', children: [ { - title: '技术学院', - desc: '轻松 get 开发技巧', - href: '/tech-college', - logo: tinyTech, - github: 'https://github.com/opentiny/opentiny.design' - }, - { - title: 'Sketch 资源下载', - desc: 'Sketch 组件资源包', - href: '#', - logo: sketch, - github: '', - onClick: (event: MouseEvent) => { - event.preventDefault(); - downloadFile(`${import.meta.env.VITE_BASE}opentiny-design/downloadFile/TinyVue3.0_UI.KIT_202508.sketch`, 'TinyVue3.0_UI.KIT_202508.sketch') - } + title: '学堂', + data: [ + { + name: '技术学院', + url: `/tech-college`, + children: [], + logo: tinyTech, + desc: '轻松 get 开发技巧', + hide: false, + github: 'https://github.com/opentiny/opentiny.design' + }, + ] }, { - title: 'GitCode 源码仓库', - desc: '国内代码仓库，访问速度更快', - href: 'https://gitcode.com/opentiny', - logo: gitcodeLogo, - target: '_blank' + title: '设计', + data: [ + { + name: 'Sketch 资源下载', + url: `#`, + children: [], + logo: sketch, + desc: 'Sketch 组件资源包', + hide: false, + github: '', + onClick: (event: MouseEvent) => { + event.preventDefault(); + downloadFile(`${import.meta.env.VITE_BASE}opentiny-design/downloadFile/TinyVue3.0_UI.KIT_202508.sketch`, 'TinyVue3.0_UI.KIT_202508.sketch') + } + } + ] } ] } diff --git a/packages/home/public/images/home/guide/step1.svg b/packages/home/public/images/home/guide/step1.svg index 11a77b49..59a43e36 100644 --- a/packages/home/public/images/home/guide/step1.svg +++ b/packages/home/public/images/home/guide/step1.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step1_active.svg b/packages/home/public/images/home/guide/step1_active.svg index 4bddd409..bd51c85c 100644 --- a/packages/home/public/images/home/guide/step1_active.svg +++ b/packages/home/public/images/home/guide/step1_active.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step2.svg b/packages/home/public/images/home/guide/step2.svg index b1f4a527..f50d8eff 100644 --- a/packages/home/public/images/home/guide/step2.svg +++ b/packages/home/public/images/home/guide/step2.svg @@ -1,15 +1,5 @@ - - - - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step2_active.svg b/packages/home/public/images/home/guide/step2_active.svg index c53b4767..23b0b2b7 100644 --- a/packages/home/public/images/home/guide/step2_active.svg +++ b/packages/home/public/images/home/guide/step2_active.svg @@ -1,15 +1,5 @@ - - - - - - - - - - - - - - - + + + + + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step3.svg b/packages/home/public/images/home/guide/step3.svg index 7426f34e..38fcd673 100644 --- a/packages/home/public/images/home/guide/step3.svg +++ b/packages/home/public/images/home/guide/step3.svg @@ -1,20 +1,13 @@ - + - - - - - - - + + - - - - - - - + + + + + - + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step3_active.svg b/packages/home/public/images/home/guide/step3_active.svg index 331c257f..2b6ab383 100644 --- a/packages/home/public/images/home/guide/step3_active.svg +++ b/packages/home/public/images/home/guide/step3_active.svg @@ -1,20 +1,13 @@ - + - - - - - - - + + - - - - - - - + + + + + - + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step4.svg b/packages/home/public/images/home/guide/step4.svg index b4680a31..53eebdf5 100644 --- a/packages/home/public/images/home/guide/step4.svg +++ b/packages/home/public/images/home/guide/step4.svg @@ -1,28 +1,23 @@ - + - - - - - - - + + - - - - + + + + - - - - - - - - - + + + + + + + + + - + \ No newline at end of file diff --git a/packages/home/public/images/home/guide/step4_active.svg b/packages/home/public/images/home/guide/step4_active.svg index c92d6362..9ea0e734 100644 --- a/packages/home/public/images/home/guide/step4_active.svg +++ b/packages/home/public/images/home/guide/step4_active.svg @@ -1,28 +1,23 @@ - + - - - - - - - + + - - - - + + + + - - - - - - - - - + + + + + + + + + - + \ No newline at end of file diff --git a/packages/home/public/images/logo-ai-extension.svg b/packages/home/public/images/logo-ai-extension.svg index b2c64ec1..9945ab9c 100644 --- a/packages/home/public/images/logo-ai-extension.svg +++ b/packages/home/public/images/logo-ai-extension.svg @@ -1,28 +1,28 @@ - + - + - + - + - - + + - + - + - + diff --git a/packages/home/src/assets/images/about/banner-1.jpeg b/packages/home/src/assets/images/about/banner-1.jpeg deleted file mode 100644 index 82372445..00000000 Binary files a/packages/home/src/assets/images/about/banner-1.jpeg and /dev/null differ diff --git a/packages/home/src/assets/images/about/banner.png b/packages/home/src/assets/images/about/banner.png deleted file mode 100644 index 14c1bb67..00000000 Binary files a/packages/home/src/assets/images/about/banner.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/blue-right.svg b/packages/home/src/assets/images/about/blue-right.svg deleted file mode 100644 index 03878462..00000000 --- a/packages/home/src/assets/images/about/blue-right.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - Created with Pixso. - - - - diff --git a/packages/home/src/assets/images/about/consoles.svg b/packages/home/src/assets/images/about/consoles.svg deleted file mode 100644 index edea808b..00000000 --- a/packages/home/src/assets/images/about/consoles.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/crosses.svg b/packages/home/src/assets/images/about/crosses.svg deleted file mode 100644 index 429a5ffb..00000000 --- a/packages/home/src/assets/images/about/crosses.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - Created with Pixso. - - - - diff --git a/packages/home/src/assets/images/about/domain1.png b/packages/home/src/assets/images/about/domain1.png deleted file mode 100644 index cb86ee31..00000000 Binary files a/packages/home/src/assets/images/about/domain1.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/domain2.jpg b/packages/home/src/assets/images/about/domain2.jpg deleted file mode 100644 index 671fb8a9..00000000 Binary files a/packages/home/src/assets/images/about/domain2.jpg and /dev/null differ diff --git a/packages/home/src/assets/images/about/domain2.webp b/packages/home/src/assets/images/about/domain2.webp deleted file mode 100644 index c2cf4c51..00000000 Binary files a/packages/home/src/assets/images/about/domain2.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/domain3.jpg b/packages/home/src/assets/images/about/domain3.jpg deleted file mode 100644 index 1c12c5ea..00000000 Binary files a/packages/home/src/assets/images/about/domain3.jpg and /dev/null differ diff --git a/packages/home/src/assets/images/about/domain4.jpg b/packages/home/src/assets/images/about/domain4.jpg deleted file mode 100644 index b988a0e7..00000000 Binary files a/packages/home/src/assets/images/about/domain4.jpg and /dev/null differ diff --git a/packages/home/src/assets/images/about/foreword1.png b/packages/home/src/assets/images/about/foreword1.png deleted file mode 100644 index c70bab12..00000000 Binary files a/packages/home/src/assets/images/about/foreword1.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/foreword2.png b/packages/home/src/assets/images/about/foreword2.png deleted file mode 100644 index 7f3de9cd..00000000 Binary files a/packages/home/src/assets/images/about/foreword2.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/foreword3.png b/packages/home/src/assets/images/about/foreword3.png deleted file mode 100644 index 975c3cd4..00000000 Binary files a/packages/home/src/assets/images/about/foreword3.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/foreword4.png b/packages/home/src/assets/images/about/foreword4.png deleted file mode 100644 index 0713c2b6..00000000 Binary files a/packages/home/src/assets/images/about/foreword4.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/furion.svg b/packages/home/src/assets/images/about/furion.svg deleted file mode 100644 index 32ba2101..00000000 --- a/packages/home/src/assets/images/about/furion.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/gifts.svg b/packages/home/src/assets/images/about/gifts.svg deleted file mode 100644 index 02917a42..00000000 --- a/packages/home/src/assets/images/about/gifts.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - Created with Pixso. - - - - - - diff --git a/packages/home/src/assets/images/about/gifts1.svg b/packages/home/src/assets/images/about/gifts1.svg deleted file mode 100644 index ede97a95..00000000 --- a/packages/home/src/assets/images/about/gifts1.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - Created with Pixso. - - - - - - - diff --git a/packages/home/src/assets/images/about/joinUs-01.svg b/packages/home/src/assets/images/about/joinUs-01.svg deleted file mode 100644 index 8707e656..00000000 --- a/packages/home/src/assets/images/about/joinUs-01.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/home/src/assets/images/about/mes.svg b/packages/home/src/assets/images/about/mes.svg deleted file mode 100644 index c0d8d371..00000000 --- a/packages/home/src/assets/images/about/mes.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - Created with Pixso. - - - - - - - - - diff --git a/packages/home/src/assets/images/about/pangu.svg b/packages/home/src/assets/images/about/pangu.svg deleted file mode 100644 index a950731a..00000000 --- a/packages/home/src/assets/images/about/pangu.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/people.svg b/packages/home/src/assets/images/about/people.svg deleted file mode 100644 index 6721c2da..00000000 --- a/packages/home/src/assets/images/about/people.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - Created with Pixso. - - - - - - diff --git a/packages/home/src/assets/images/about/people1.svg b/packages/home/src/assets/images/about/people1.svg deleted file mode 100644 index f89bdf80..00000000 --- a/packages/home/src/assets/images/about/people1.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - Created with Pixso. - - - - - - - diff --git a/packages/home/src/assets/images/about/phone-number.png b/packages/home/src/assets/images/about/phone-number.png deleted file mode 100644 index 7888f0d5..00000000 Binary files a/packages/home/src/assets/images/about/phone-number.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/right.png b/packages/home/src/assets/images/about/right.png deleted file mode 100644 index e5b73ecc..00000000 Binary files a/packages/home/src/assets/images/about/right.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/select1.png b/packages/home/src/assets/images/about/select1.png deleted file mode 100644 index 7378503e..00000000 Binary files a/packages/home/src/assets/images/about/select1.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/select2.png b/packages/home/src/assets/images/about/select2.png deleted file mode 100644 index 721d8ec5..00000000 Binary files a/packages/home/src/assets/images/about/select2.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/shelf.svg b/packages/home/src/assets/images/about/shelf.svg deleted file mode 100644 index 7c57944a..00000000 --- a/packages/home/src/assets/images/about/shelf.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - Created with Pixso. - - - - - - diff --git a/packages/home/src/assets/images/about/shelf1.svg b/packages/home/src/assets/images/about/shelf1.svg deleted file mode 100644 index ef2b082b..00000000 --- a/packages/home/src/assets/images/about/shelf1.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - Created with Pixso. - - - - - - - diff --git a/packages/home/src/assets/images/about/smiley.svg b/packages/home/src/assets/images/about/smiley.svg deleted file mode 100644 index 06f3109c..00000000 --- a/packages/home/src/assets/images/about/smiley.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - Created with Pixso. - - - - - - diff --git a/packages/home/src/assets/images/about/smiley1.svg b/packages/home/src/assets/images/about/smiley1.svg deleted file mode 100644 index f5c4b3e0..00000000 --- a/packages/home/src/assets/images/about/smiley1.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - Created with Pixso. - - - - - - - diff --git a/packages/home/src/assets/images/about/snow.svg b/packages/home/src/assets/images/about/snow.svg deleted file mode 100644 index d3157a21..00000000 --- a/packages/home/src/assets/images/about/snow.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/snow1.svg b/packages/home/src/assets/images/about/snow1.svg deleted file mode 100644 index 3792daff..00000000 --- a/packages/home/src/assets/images/about/snow1.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/team1.jpg b/packages/home/src/assets/images/about/team1.jpg deleted file mode 100644 index 13072938..00000000 Binary files a/packages/home/src/assets/images/about/team1.jpg and /dev/null differ diff --git a/packages/home/src/assets/images/about/team1.webp b/packages/home/src/assets/images/about/team1.webp deleted file mode 100644 index dd39a17a..00000000 Binary files a/packages/home/src/assets/images/about/team1.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/team2.png b/packages/home/src/assets/images/about/team2.png deleted file mode 100644 index d2498f5a..00000000 Binary files a/packages/home/src/assets/images/about/team2.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/team2.webp b/packages/home/src/assets/images/about/team2.webp deleted file mode 100644 index c4ea2bf5..00000000 Binary files a/packages/home/src/assets/images/about/team2.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/team3.png b/packages/home/src/assets/images/about/team3.png deleted file mode 100644 index dcb92e0c..00000000 Binary files a/packages/home/src/assets/images/about/team3.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/team3.webp b/packages/home/src/assets/images/about/team3.webp deleted file mode 100644 index d5df1cb0..00000000 Binary files a/packages/home/src/assets/images/about/team3.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/team4.webp b/packages/home/src/assets/images/about/team4.webp deleted file mode 100644 index c2cf4c51..00000000 Binary files a/packages/home/src/assets/images/about/team4.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/team5.png b/packages/home/src/assets/images/about/team5.png deleted file mode 100644 index 44a6d64e..00000000 Binary files a/packages/home/src/assets/images/about/team5.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/team5.webp b/packages/home/src/assets/images/about/team5.webp deleted file mode 100644 index 6ec0afa8..00000000 Binary files a/packages/home/src/assets/images/about/team5.webp and /dev/null differ diff --git a/packages/home/src/assets/images/about/top1.png b/packages/home/src/assets/images/about/top1.png deleted file mode 100644 index 0050460c..00000000 Binary files a/packages/home/src/assets/images/about/top1.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/top2.png b/packages/home/src/assets/images/about/top2.png deleted file mode 100644 index 4bffb52b..00000000 Binary files a/packages/home/src/assets/images/about/top2.png and /dev/null differ diff --git a/packages/home/src/assets/images/about/try1.svg b/packages/home/src/assets/images/about/try1.svg deleted file mode 100644 index 4c2b953a..00000000 --- a/packages/home/src/assets/images/about/try1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - Created with Pixso. - - - - - - diff --git a/packages/home/src/assets/images/about/work1.svg b/packages/home/src/assets/images/about/work1.svg deleted file mode 100644 index 043d3e7f..00000000 --- a/packages/home/src/assets/images/about/work1.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work2.svg b/packages/home/src/assets/images/about/work2.svg deleted file mode 100644 index 2fd67a5a..00000000 --- a/packages/home/src/assets/images/about/work2.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work3.svg b/packages/home/src/assets/images/about/work3.svg deleted file mode 100644 index c9024fa5..00000000 --- a/packages/home/src/assets/images/about/work3.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work4.svg b/packages/home/src/assets/images/about/work4.svg deleted file mode 100644 index 63ca7bab..00000000 --- a/packages/home/src/assets/images/about/work4.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work5.svg b/packages/home/src/assets/images/about/work5.svg deleted file mode 100644 index 7214e05b..00000000 --- a/packages/home/src/assets/images/about/work5.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work6.svg b/packages/home/src/assets/images/about/work6.svg deleted file mode 100644 index 05e1920f..00000000 --- a/packages/home/src/assets/images/about/work6.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work7.svg b/packages/home/src/assets/images/about/work7.svg deleted file mode 100644 index b8581118..00000000 --- a/packages/home/src/assets/images/about/work7.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/about/work8.svg b/packages/home/src/assets/images/about/work8.svg deleted file mode 100644 index aac668b8..00000000 --- a/packages/home/src/assets/images/about/work8.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - Created with Pixso. - - - - - - - - - - - - - - - - - - - diff --git a/packages/home/src/assets/images/new-icon/floor1/arrow-blue.svg b/packages/home/src/assets/images/new-icon/floor1/arrow-blue.svg new file mode 100644 index 00000000..8901dbc6 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/arrow-blue.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/home/src/assets/images/new-icon/floor1/arrow-white.svg b/packages/home/src/assets/images/new-icon/floor1/arrow-white.svg new file mode 100644 index 00000000..c4990aa9 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/arrow-white.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/home/src/assets/images/new-icon/floor1/arrow.svg b/packages/home/src/assets/images/new-icon/floor1/arrow.svg new file mode 100644 index 00000000..5c427966 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/home/src/assets/images/new-icon/floor1/banner_bg.webp b/packages/home/src/assets/images/new-icon/floor1/banner_bg.webp new file mode 100644 index 00000000..dd786f23 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor1/banner_bg.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor1/fly.svg b/packages/home/src/assets/images/new-icon/floor1/fly.svg new file mode 100644 index 00000000..f0aa2665 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/fly.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/home/src/assets/images/new-icon/floor1/left_half.svg b/packages/home/src/assets/images/new-icon/floor1/left_half.svg new file mode 100644 index 00000000..a973c67d --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/left_half.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/home/src/assets/images/new-icon/floor1/right_half.svg b/packages/home/src/assets/images/new-icon/floor1/right_half.svg new file mode 100644 index 00000000..89e03a72 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor1/right_half.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/home/src/assets/images/new-icon/floor2/ai-app-1.jpg b/packages/home/src/assets/images/new-icon/floor2/ai-app-1.jpg new file mode 100644 index 00000000..ef755279 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/ai-app-1.jpg differ diff --git a/packages/home/src/assets/images/new-icon/floor2/ai-app-2.jpg b/packages/home/src/assets/images/new-icon/floor2/ai-app-2.jpg new file mode 100644 index 00000000..ce7e97e8 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/ai-app-2.jpg differ diff --git a/packages/home/src/assets/images/new-icon/floor2/bg-1.webp b/packages/home/src/assets/images/new-icon/floor2/bg-1.webp new file mode 100644 index 00000000..72df0a66 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/bg-1.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor2/bg-2.webp b/packages/home/src/assets/images/new-icon/floor2/bg-2.webp new file mode 100644 index 00000000..aaebb898 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/bg-2.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor2/bg-3.webp b/packages/home/src/assets/images/new-icon/floor2/bg-3.webp new file mode 100644 index 00000000..c55fe72a Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/bg-3.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor2/bg-4.webp b/packages/home/src/assets/images/new-icon/floor2/bg-4.webp new file mode 100644 index 00000000..f21bb50e Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor2/bg-4.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor2/engine-bg-1.svg b/packages/home/src/assets/images/new-icon/floor2/engine-bg-1.svg new file mode 100644 index 00000000..9d853308 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/engine-bg-1.svg @@ -0,0 +1,775 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/front-bg-1.svg b/packages/home/src/assets/images/new-icon/floor2/front-bg-1.svg new file mode 100644 index 00000000..71812f5c --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/front-bg-1.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/front-bg-2.svg b/packages/home/src/assets/images/new-icon/floor2/front-bg-2.svg new file mode 100644 index 00000000..36133177 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/front-bg-2.svg @@ -0,0 +1,229 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/front-bg-3.svg b/packages/home/src/assets/images/new-icon/floor2/front-bg-3.svg new file mode 100644 index 00000000..866ad1cd --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/front-bg-3.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/security.svg b/packages/home/src/assets/images/new-icon/floor2/security.svg new file mode 100644 index 00000000..96231de2 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/security.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/ui-bg-1.svg b/packages/home/src/assets/images/new-icon/floor2/ui-bg-1.svg new file mode 100644 index 00000000..dc9151af --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/ui-bg-1.svg @@ -0,0 +1,309 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/ui-bg-2.svg b/packages/home/src/assets/images/new-icon/floor2/ui-bg-2.svg new file mode 100644 index 00000000..ea112777 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/ui-bg-2.svg @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/ui-bg-3.svg b/packages/home/src/assets/images/new-icon/floor2/ui-bg-3.svg new file mode 100644 index 00000000..f8667bb7 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/ui-bg-3.svg @@ -0,0 +1,276 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/ui-bg-4.svg b/packages/home/src/assets/images/new-icon/floor2/ui-bg-4.svg new file mode 100644 index 00000000..8e087042 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/ui-bg-4.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor2/yes.svg b/packages/home/src/assets/images/new-icon/floor2/yes.svg new file mode 100644 index 00000000..8152ec3e --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor2/yes.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-chart.svg b/packages/home/src/assets/images/new-icon/floor3/app-chart.svg new file mode 100644 index 00000000..7c33317d --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-chart.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-cli.svg b/packages/home/src/assets/images/new-icon/floor3/app-cli.svg new file mode 100644 index 00000000..01bdab4d --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-cli.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-editor.svg b/packages/home/src/assets/images/new-icon/floor3/app-editor.svg new file mode 100644 index 00000000..93ee9760 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-editor.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-engine.svg b/packages/home/src/assets/images/new-icon/floor3/app-engine.svg new file mode 100644 index 00000000..a5272585 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-engine.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-genui.svg b/packages/home/src/assets/images/new-icon/floor3/app-genui.svg new file mode 100644 index 00000000..0d963e42 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-genui.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-nextsdk.svg b/packages/home/src/assets/images/new-icon/floor3/app-nextsdk.svg new file mode 100644 index 00000000..230bdca8 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-nextsdk.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-ng.svg b/packages/home/src/assets/images/new-icon/floor3/app-ng.svg new file mode 100644 index 00000000..ef9e9cd8 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-ng.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-pro.svg b/packages/home/src/assets/images/new-icon/floor3/app-pro.svg new file mode 100644 index 00000000..6b6a4b53 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-pro.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-tinyrobot.svg b/packages/home/src/assets/images/new-icon/floor3/app-tinyrobot.svg new file mode 100644 index 00000000..dee6b45f --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-tinyrobot.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-vue.svg b/packages/home/src/assets/images/new-icon/floor3/app-vue.svg new file mode 100644 index 00000000..75f05982 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-vue.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/app-webagent.svg b/packages/home/src/assets/images/new-icon/floor3/app-webagent.svg new file mode 100644 index 00000000..5cf4fbc1 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/app-webagent.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor3/power-bg-ai.webp b/packages/home/src/assets/images/new-icon/floor3/power-bg-ai.webp new file mode 100644 index 00000000..671aa376 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor3/power-bg-ai.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor3/power-bg.webp b/packages/home/src/assets/images/new-icon/floor3/power-bg.webp new file mode 100644 index 00000000..458ad591 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor3/power-bg.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor3/yes.svg b/packages/home/src/assets/images/new-icon/floor3/yes.svg new file mode 100644 index 00000000..8152ec3e --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor3/yes.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor4/play.svg b/packages/home/src/assets/images/new-icon/floor4/play.svg new file mode 100644 index 00000000..dabbe6a2 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor4/play.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor4/update-bg-1.webp b/packages/home/src/assets/images/new-icon/floor4/update-bg-1.webp new file mode 100644 index 00000000..b223e17e Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor4/update-bg-1.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor4/update-bg-2.webp b/packages/home/src/assets/images/new-icon/floor4/update-bg-2.webp new file mode 100644 index 00000000..bdd8d3cf Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor4/update-bg-2.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor4/update-bg-3.webp b/packages/home/src/assets/images/new-icon/floor4/update-bg-3.webp new file mode 100644 index 00000000..4c858dae Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor4/update-bg-3.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor4/video-icon.svg b/packages/home/src/assets/images/new-icon/floor4/video-icon.svg new file mode 100644 index 00000000..d14ac694 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor4/video-icon.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor5/growth-bg.svg b/packages/home/src/assets/images/new-icon/floor5/growth-bg.svg new file mode 100644 index 00000000..cf1d2cce --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor5/growth-bg.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/active-1.webp b/packages/home/src/assets/images/new-icon/floor6/active-1.webp new file mode 100644 index 00000000..46f680c8 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/active-1.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/active-4.webp b/packages/home/src/assets/images/new-icon/floor6/active-4.webp new file mode 100644 index 00000000..cb78b19c Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/active-4.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/active-5.webp b/packages/home/src/assets/images/new-icon/floor6/active-5.webp new file mode 100644 index 00000000..e25ef5d2 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/active-5.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/active-icon.svg b/packages/home/src/assets/images/new-icon/floor6/active-icon.svg new file mode 100644 index 00000000..4fac5085 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/active-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/article-1.webp b/packages/home/src/assets/images/new-icon/floor6/article-1.webp new file mode 100644 index 00000000..e0818e64 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/article-1.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/article-2.webp b/packages/home/src/assets/images/new-icon/floor6/article-2.webp new file mode 100644 index 00000000..4300e2c4 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/article-2.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/article-3.webp b/packages/home/src/assets/images/new-icon/floor6/article-3.webp new file mode 100644 index 00000000..27f2ef3b Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/article-3.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/article-4.webp b/packages/home/src/assets/images/new-icon/floor6/article-4.webp new file mode 100644 index 00000000..d61d8ad2 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/article-4.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/article-5.webp b/packages/home/src/assets/images/new-icon/floor6/article-5.webp new file mode 100644 index 00000000..eb1eadb8 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/article-5.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/article-icon.svg b/packages/home/src/assets/images/new-icon/floor6/article-icon.svg new file mode 100644 index 00000000..647d92aa --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/article-icon.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/doss.svg b/packages/home/src/assets/images/new-icon/floor6/doss.svg new file mode 100644 index 00000000..f7b89f5b --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/doss.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/first-2.webp b/packages/home/src/assets/images/new-icon/floor6/first-2.webp new file mode 100644 index 00000000..a4aabbfe Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/first-2.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/first-3.webp b/packages/home/src/assets/images/new-icon/floor6/first-3.webp new file mode 100644 index 00000000..97fda513 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/first-3.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/first-4.webp b/packages/home/src/assets/images/new-icon/floor6/first-4.webp new file mode 100644 index 00000000..a3e0672c Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/first-4.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/first-5.webp b/packages/home/src/assets/images/new-icon/floor6/first-5.webp new file mode 100644 index 00000000..58541d39 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/first-5.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/hot-icon.svg b/packages/home/src/assets/images/new-icon/floor6/hot-icon.svg new file mode 100644 index 00000000..f30e599a --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/hot-icon.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/live.svg b/packages/home/src/assets/images/new-icon/floor6/live.svg new file mode 100644 index 00000000..9fddb174 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/live.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/video-1.webp b/packages/home/src/assets/images/new-icon/floor6/video-1.webp new file mode 100644 index 00000000..385c057d Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/video-1.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/video-2.webp b/packages/home/src/assets/images/new-icon/floor6/video-2.webp new file mode 100644 index 00000000..e7f6aeba Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/video-2.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/video-3.webp b/packages/home/src/assets/images/new-icon/floor6/video-3.webp new file mode 100644 index 00000000..5181c2d4 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/video-3.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/video-4.webp b/packages/home/src/assets/images/new-icon/floor6/video-4.webp new file mode 100644 index 00000000..4ad1a44b Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/video-4.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/video-5.webp b/packages/home/src/assets/images/new-icon/floor6/video-5.webp new file mode 100644 index 00000000..ed725198 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/floor6/video-5.webp differ diff --git a/packages/home/src/assets/images/new-icon/floor6/video-icon.svg b/packages/home/src/assets/images/new-icon/floor6/video-icon.svg new file mode 100644 index 00000000..60008973 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/video-icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/floor6/video.svg b/packages/home/src/assets/images/new-icon/floor6/video.svg new file mode 100644 index 00000000..39cee11d --- /dev/null +++ b/packages/home/src/assets/images/new-icon/floor6/video.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/footer.webp b/packages/home/src/assets/images/new-icon/footer.webp new file mode 100644 index 00000000..be4c9bfb Binary files /dev/null and b/packages/home/src/assets/images/new-icon/footer.webp differ diff --git a/packages/home/src/assets/images/new-icon/next-page/page-five-g.svg b/packages/home/src/assets/images/new-icon/next-page/page-five-g.svg new file mode 100644 index 00000000..f3caf49d --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/page-five-g.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/page-five-h.svg b/packages/home/src/assets/images/new-icon/next-page/page-five-h.svg new file mode 100644 index 00000000..0f8184aa --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/page-five-h.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-a.png b/packages/home/src/assets/images/new-icon/next-page/part-four-a.png new file mode 100644 index 00000000..708c5c95 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-a.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-b.png b/packages/home/src/assets/images/new-icon/next-page/part-four-b.png new file mode 100644 index 00000000..2f052567 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-b.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-c.png b/packages/home/src/assets/images/new-icon/next-page/part-four-c.png new file mode 100644 index 00000000..d5965c14 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-c.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-d.png b/packages/home/src/assets/images/new-icon/next-page/part-four-d.png new file mode 100644 index 00000000..111f897a Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-d.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-e.png b/packages/home/src/assets/images/new-icon/next-page/part-four-e.png new file mode 100644 index 00000000..66740323 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-e.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-f.png b/packages/home/src/assets/images/new-icon/next-page/part-four-f.png new file mode 100644 index 00000000..2102dbb0 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-f.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-g.png b/packages/home/src/assets/images/new-icon/next-page/part-four-g.png new file mode 100644 index 00000000..fb5fbc1c Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-g.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-h.png b/packages/home/src/assets/images/new-icon/next-page/part-four-h.png new file mode 100644 index 00000000..c31bc691 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-four-h.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-i.svg b/packages/home/src/assets/images/new-icon/next-page/part-four-i.svg new file mode 100644 index 00000000..02790a75 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-four-i.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-j.svg b/packages/home/src/assets/images/new-icon/next-page/part-four-j.svg new file mode 100644 index 00000000..776a4f08 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-four-j.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-k.svg b/packages/home/src/assets/images/new-icon/next-page/part-four-k.svg new file mode 100644 index 00000000..f55f56cd --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-four-k.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-l.svg b/packages/home/src/assets/images/new-icon/next-page/part-four-l.svg new file mode 100644 index 00000000..8e617993 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-four-l.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-four-m.svg b/packages/home/src/assets/images/new-icon/next-page/part-four-m.svg new file mode 100644 index 00000000..047aeac4 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-four-m.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/home/src/assets/images/new-icon/next-page/part-one-a.svg b/packages/home/src/assets/images/new-icon/next-page/part-one-a.svg new file mode 100644 index 00000000..e4b95cfb --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-one-a.svg @@ -0,0 +1,524 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-one-b.svg b/packages/home/src/assets/images/new-icon/next-page/part-one-b.svg new file mode 100644 index 00000000..2d396821 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-one-b.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-seven-a.png b/packages/home/src/assets/images/new-icon/next-page/part-seven-a.png new file mode 100644 index 00000000..4c6edc50 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-seven-a.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-a.png b/packages/home/src/assets/images/new-icon/next-page/part-three-a.png new file mode 100644 index 00000000..f8145634 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-three-a.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-b.png b/packages/home/src/assets/images/new-icon/next-page/part-three-b.png new file mode 100644 index 00000000..e3d56219 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-three-b.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-c.png b/packages/home/src/assets/images/new-icon/next-page/part-three-c.png new file mode 100644 index 00000000..62166105 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-three-c.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-d.png b/packages/home/src/assets/images/new-icon/next-page/part-three-d.png new file mode 100644 index 00000000..069c5ae6 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-three-d.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-e.png b/packages/home/src/assets/images/new-icon/next-page/part-three-e.png new file mode 100644 index 00000000..b07d7da2 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-three-e.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-three-f.svg b/packages/home/src/assets/images/new-icon/next-page/part-three-f.svg new file mode 100644 index 00000000..0f4a2a88 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-three-f.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-two-a.svg b/packages/home/src/assets/images/new-icon/next-page/part-two-a.svg new file mode 100644 index 00000000..a4c85107 --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-two-a.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-two-b.svg b/packages/home/src/assets/images/new-icon/next-page/part-two-b.svg new file mode 100644 index 00000000..e9f5edea --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-two-b.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-two-c.svg b/packages/home/src/assets/images/new-icon/next-page/part-two-c.svg new file mode 100644 index 00000000..2db89b5e --- /dev/null +++ b/packages/home/src/assets/images/new-icon/next-page/part-two-c.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/home/src/assets/images/new-icon/next-page/part-two-d.png b/packages/home/src/assets/images/new-icon/next-page/part-two-d.png new file mode 100644 index 00000000..a6031b34 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-two-d.png differ diff --git a/packages/home/src/assets/images/new-icon/next-page/part-two-e.png b/packages/home/src/assets/images/new-icon/next-page/part-two-e.png new file mode 100644 index 00000000..2557b716 Binary files /dev/null and b/packages/home/src/assets/images/new-icon/next-page/part-two-e.png differ diff --git a/packages/home/src/index.less b/packages/home/src/index.less index 827f0bac..39d9dc53 100644 --- a/packages/home/src/index.less +++ b/packages/home/src/index.less @@ -100,8 +100,7 @@ body { @media (min-width: 815px) and (max-width: 1400px) { #app { - margin-top: 67px; - height: calc(100% - 67px); + height: 100%; } } diff --git a/packages/home/src/router.js b/packages/home/src/router.js index 1c4759e1..25432ce5 100644 --- a/packages/home/src/router.js +++ b/packages/home/src/router.js @@ -18,6 +18,7 @@ const tinyRobotHome = () => import('@/views/tiny-robot-home/index.vue') const aiExtensionHome = () => import('@/views/ai-extension-home/index.vue') const nextSdksHome = () => import('@/views/next-sdks-home/index.vue') const genuiSdkHome = () => import('@/genui-sdk/index.js') +const nextPage = () => import('@/views/home/next-page/index.vue') const langKey = computed(() => $t2('zh-CN', 'en-US')) export const rootRoutes = [ @@ -49,6 +50,12 @@ export const rootRoutes = [ name: 'next-sdk', meta: { title: geneTitle('') } }, + { + path: 'next-page', + component: nextPage, + name: 'next-page', + meta: { title: geneTitle('OpenTiny NEXT') } + }, { path: 'genui-sdk', component: genuiSdkHome, diff --git a/packages/home/src/views/home/about-opentiny/index.less b/packages/home/src/views/home/about-opentiny/index.less new file mode 100644 index 00000000..89ece15f --- /dev/null +++ b/packages/home/src/views/home/about-opentiny/index.less @@ -0,0 +1,1530 @@ +.product-suite { + // ======================================== + // 外层容器变量 + // ======================================== + --ps-pad-y: 100px; + --ps-pad-x: 200px; + --ps-max-w: 1600px; + --ps-title-size: 36px; + --ps-title-lh: 66px; + --ps-desc-size: 20px; + --ps-desc-lh: 28px; + --ps-grid-gap: 16px; + --ps-grid-mt: 60px; + + // ======================================== + // 卡片基础变量 + // ======================================== + --card-pad: 0px; + --card-default-w: 320px; + --card-expanded-w: 1022px; + --card-collapsed-w: 180px; + --card-min-h: 610px; + --card-radius: 20px; + --card-info-pad: 30px 24px 0px; + --card-name-size: 28px; + --card-name-lh: 40px; + --card-summary-size: 16px; + --card-summary-lh: 24px; + --card-preview-mt: 40px; + + --collapsed-pad: 20px 12px; + --collapsed-name-size: 16px; + --collapsed-summary-size: 12px; + + // ======================================== + // AI 区域变量（亮色卡片） + // ======================================== + --ai-preview-pad: 0 24px 35px; + --ai-top-gap: 16px; + --ai-bottom-gap: 16px; + --ai-top-max-h: 200px; + --ai-bottom-max-h: 200px; + --ai-light-radius: 20px; + --ai-light-pad: 30px 0 0 28px; + --ai-header-gap: 18px; + --ai-icon-size: 24px; + --ai-brand-size: 20px; + --ai-brand-lh: 28px; + --ai-brand-weight: 700; + --ai-title-mt: 16px; + --ai-title-size: 20px; + --ai-title-lh: 28px; + --ai-title-weight: 550; + --ai-desc-mt: 4px; + --ai-desc-size: 16px; + --ai-desc-lh: 22px; + --ai-desc-max-w: 40%; + --ai-link-pb: 16px; + + // ======================================== + // AI 区域变量（暗色卡片） + // ======================================== + --ai-dark-radius: 12px; + --ai-dark-pad: 30px 0px 0px 28px; + --ai-dark-header-gap: 18px; + --ai-dark-icon-size: 24px; + --ai-dark-brand-size: 18px; + --ai-dark-brand-lh: 28px; + --ai-dark-brand-weight: 700; + --ai-subtitle-mt: 16px; + --ai-subtitle-size: 20px; + --ai-subtitle-lh: 28px; + --ai-subtitle-weight: 550; + --ai-subdesc-mt: 4px; + --ai-subdesc-size: 16px; + --ai-subdesc-lh: 22px; + --ai-sublink-pt: 8px; + + // ======================================== + // 模板区域变量 + // ======================================== + --tmpl-preview-pad: 0 24px 30px; + --tmpl-gap: 16px; + --tmpl-card-min-h: 400px; + --tmpl-card-radius: 20px; + --tmpl-card-pad: 40px 24px 0px; + --tmpl-header-gap: 0px; // 通过 margin 控制 + --tmpl-icon-size: 24px; + --tmpl-icon-mr: 18px; + --tmpl-brand-size: 20px; + --tmpl-brand-lh: 28px; + --tmpl-brand-weight: 700; + --tmpl-title-mt: 16px; + --tmpl-title-size: 20px; + --tmpl-title-lh: 28px; + --tmpl-title-weight: 550; + --tmpl-title-min-h: 56px; + --tmpl-desc-mt: 4px; + --tmpl-desc-size: 16px; + --tmpl-desc-lh: 22px; + --tmpl-link-mt: 12px; + + // ======================================== + // UI 区域变量 + // ======================================== + --ui-preview-pad: 0 30px 27px; + --ui-grid-gap: 24px; + --ui-grid-min-h: 388px; + --ui-card-min-h: 170px; + --ui-card-radius: 20px; + --ui-card-pad: 30px 24px 0px; + --ui-header-gap: 0px; + --ui-icon-size: 24px; + --ui-icon-mr: 18px; + --ui-brand-ml: 16px; + --ui-brand-size: 20px; + --ui-brand-lh: 28px; + --ui-brand-weight: 700; + --ui-title-mt: 16px; + --ui-title-size: 20px; + --ui-title-lh: 28px; + --ui-title-weight: 550; + --ui-desc-mt: 4px; + --ui-desc-size: 16px; + --ui-desc-lh: 22px; + --ui-link-mt: 12px; + + // ======================================== + // 引擎区域变量 + // ======================================== + --eng-preview-pad: 0px 30px 24px; + --eng-card-min-h: 420px; + --eng-card-radius: 20px; + --eng-card-pad: 30px 40px 0 24px; + --eng-header-gap: 0px; + --eng-icon-size: 24px; + --eng-icon-mr: 16px; + --eng-brand-size: 20px; + --eng-brand-lh: 22px; + --eng-brand-weight: 700; + --eng-title-mt: 16px; + --eng-title-size: 20px; + --eng-title-lh: 28px; + --eng-title-weight: 550; + --eng-desc-mt: 20px; + --eng-desc-size: 16px; + --eng-desc-lh: 29px; + --eng-link-mt: 12px; + + // ======================================== + // 通用链接变量 + // ======================================== + --link-size: 14px; + --link-lh: 16px; + --link-ls: 1px; + --arrow-w: 18px; + --arrow-h: 18px; + --arrow-ml: 6px; + --arrow-mt: 2px; + + // ======================================== + // 媒体查询：1690px + // 验证@1440px: 4*280 + 3*12 + 2*80 = 1316 <= 1440 + // 展开@1440px: 854 + 3*130 + 3*12 + 160 = 1440 + // ======================================== + @media (max-width: 1690px) { + --ps-pad-y: 80px; + --ps-pad-x: 80px; + --ps-title-size: 32px; + --ps-title-lh: 56px; + --ps-desc-size: 18px; + --ps-grid-mt: 48px; + + --card-default-w: 280px; + --card-expanded-w: 854px; + --card-collapsed-w: 130px; + --card-min-h: 540px; + --card-name-size: 24px; + --card-name-lh: 34px; + + // AI 亮色 + --ai-top-max-h: 170px; + --ai-bottom-max-h: 170px; + --ai-light-pad: 24px 0 0 20px; + --ai-header-gap: 14px; + --ai-icon-size: 22px; + --ai-brand-size: 18px; + --ai-brand-lh: 26px; + --ai-title-mt: 14px; + --ai-title-size: 18px; + --ai-title-lh: 26px; + --ai-desc-mt: 4px; + --ai-desc-size: 14px; + --ai-desc-lh: 20px; + --ai-link-pb: 14px; + + // AI 暗色 + --ai-dark-pad: 16px 12px 12px; + --ai-dark-header-gap: 6px; + --ai-dark-icon-size: 22px; + --ai-dark-brand-size: 18px; + --ai-dark-brand-lh: 26px; + --ai-subtitle-mt: 12px; + --ai-subtitle-size: 18px; + --ai-subtitle-lh: 26px; + --ai-subdesc-mt: 4px; + --ai-subdesc-size: 14px; + --ai-subdesc-lh: 20px; + --ai-sublink-pt: 6px; + + // 模板 + --tmpl-card-min-h: 340px; + --tmpl-card-pad: 32px 20px 0px; + --tmpl-icon-size: 22px; + --tmpl-brand-size: 18px; + --tmpl-brand-lh: 26px; + --tmpl-title-mt: 20px; + --tmpl-title-size: 18px; + --tmpl-title-lh: 26px; + --tmpl-title-min-h: 48px; + --tmpl-desc-size: 14px; + --tmpl-desc-lh: 20px; + --tmpl-link-mt: 16px; + + // UI + --ui-grid-min-h: 320px; + --ui-grid-gap: 16px; + --ui-card-pad: 24px 20px 0px; + --ui-icon-size: 22px; + --ui-brand-size: 18px; + --ui-brand-lh: 26px; + --ui-title-mt: 14px; + --ui-title-size: 18px; + --ui-title-lh: 26px; + --ui-desc-size: 14px; + --ui-desc-lh: 20px; + --ui-link-mt: 16px; + + // 引擎 + --eng-card-min-h: 360px; + --eng-card-pad: 24px 32px 0 20px; + --eng-icon-size: 22px; + --eng-brand-size: 16px; + --eng-brand-lh: 20px; + --eng-title-mt: 20px; + --eng-title-size: 18px; + --eng-title-lh: 26px; + --eng-desc-mt: 16px; + --eng-desc-size: 14px; + --eng-desc-lh: 24px; + --eng-link-mt: 16px; + } + + // ======================================== + // 媒体查询：1440px + // 验证@1280px: 4*240 + 3*10 + 2*48 = 1086 <= 1280 + // 展开@1280px: 824 + 3*110 + 3*10 + 96 = 1280 + // ======================================== + @media (max-width: 1440px) { + --ps-pad-y: 60px; + --ps-pad-x: 48px; + --ps-title-size: 28px; + --ps-title-lh: 48px; + --ps-desc-size: 16px; + --ps-grid-gap: 10px; + --ps-grid-mt: 40px; + + --card-default-w: 240px; + --card-expanded-w: 824px; + --card-collapsed-w: 110px; + --card-min-h: 480px; + --card-radius: 16px; + --card-info-pad: 24px 16px 0px; + --card-name-size: 20px; + --card-name-lh: 30px; + --card-summary-size: 14px; + --card-summary-lh: 20px; + + --collapsed-pad: 16px 10px; + --collapsed-name-size: 13px; + + // AI 亮色 + --ai-top-max-h: 150px; + --ai-bottom-max-h: 150px; + --ai-preview-pad: 0 16px 24px; + --ai-light-pad: 20px 0 0 16px; + --ai-header-gap: 12px; + --ai-icon-size: 20px; + --ai-brand-size: 16px; + --ai-brand-lh: 24px; + --ai-title-mt: 12px; + --ai-title-size: 16px; + --ai-title-lh: 24px; + --ai-desc-size: 13px; + --ai-desc-lh: 18px; + --ai-link-pb: 12px; + + // AI 暗色 + --ai-dark-pad: 14px 10px 10px; + --ai-dark-header-gap: 6px; + --ai-dark-icon-size: 20px; + --ai-dark-brand-size: 16px; + --ai-dark-brand-lh: 24px; + --ai-subtitle-mt: 10px; + --ai-subtitle-size: 16px; + --ai-subtitle-lh: 24px; + --ai-subdesc-size: 13px; + --ai-subdesc-lh: 18px; + --ai-sublink-pt: 6px; + + // 模板 + --tmpl-preview-pad: 0 16px 24px; + --tmpl-gap: 12px; + --tmpl-card-min-h: 300px; + --tmpl-card-pad: 24px 16px 0px; + --tmpl-icon-size: 20px; + --tmpl-brand-size: 16px; + --tmpl-brand-lh: 24px; + --tmpl-title-mt: 16px; + --tmpl-title-size: 16px; + --tmpl-title-lh: 24px; + --tmpl-title-min-h: 40px; + --tmpl-desc-size: 13px; + --tmpl-desc-lh: 18px; + --tmpl-link-mt: 12px; + + // UI + --ui-card-min-h: 150px; + --ui-preview-pad: 0 20px 20px; + --ui-grid-gap: 16px; + --ui-grid-min-h: 280px; + --ui-card-pad: 20px 16px 0px; + --ui-icon-size: 20px; + --ui-brand-size: 16px; + --ui-brand-lh: 24px; + --ui-title-mt: 12px; + --ui-title-size: 16px; + --ui-title-lh: 24px; + --ui-desc-size: 13px; + --ui-desc-lh: 18px; + --ui-link-mt: 12px; + + // 引擎 + --eng-card-min-h: 310px; + --eng-preview-pad: 0px 20px 20px; + --eng-card-pad: 20px 24px 0 16px; + --eng-icon-size: 20px; + --eng-brand-size: 15px; + --eng-brand-lh: 20px; + --eng-title-mt: 16px; + --eng-title-size: 16px; + --eng-title-lh: 24px; + --eng-desc-mt: 14px; + --eng-desc-size: 13px; + --eng-desc-lh: 22px; + --eng-link-mt: 12px; + + --link-size: 10px; + } + + // ======================================== + // 媒体查询：1280px + // 验证@1024px: 4*200 + 3*8 + 2*32 = 888 <= 1024 + // 展开@1024px: 666 + 3*90 + 3*8 + 64 = 1024 + // ======================================== + @media (max-width: 1280px) { + --ps-pad-y: 50px; + --ps-pad-x: 32px; + --ps-title-size: 26px; + --ps-title-lh: 42px; + + --card-default-w: 200px; + --card-expanded-w: 666px; + --card-collapsed-w: 90px; + --card-min-h: 420px; + --card-info-pad: 20px 12px 0px; + --card-name-size: 18px; + --card-name-lh: 26px; + + --collapsed-pad: 12px 8px; + --collapsed-name-size: 12px; + + // AI 亮色 + --ai-top-max-h: 130px; + --ai-bottom-max-h: 130px; + --ai-top-gap: 10px; + --ai-bottom-gap: 10px; + --ai-light-pad: 16px 0 0 12px; + --ai-light-radius: 14px; + --ai-header-gap: 10px; + --ai-icon-size: 18px; + --ai-brand-size: 14px; + --ai-brand-lh: 20px; + --ai-title-mt: 10px; + --ai-title-size: 14px; + --ai-title-lh: 20px; + --ai-desc-size: 12px; + --ai-desc-lh: 16px; + --ai-link-pb: 10px; + + // AI 暗色 + --ai-dark-pad: 12px 8px 8px; + --ai-dark-radius: 10px; + --ai-dark-header-gap: 4px; + --ai-dark-icon-size: 18px; + --ai-dark-brand-size: 14px; + --ai-dark-brand-lh: 20px; + --ai-subtitle-mt: 8px; + --ai-subtitle-size: 14px; + --ai-subtitle-lh: 20px; + --ai-subdesc-size: 12px; + --ai-subdesc-lh: 16px; + --ai-sublink-pt: 4px; + + // 模板 + --tmpl-gap: 10px; + --tmpl-card-min-h: 260px; + --tmpl-card-radius: 16px; + --tmpl-card-pad: 20px 12px 0px; + --tmpl-icon-size: 18px; + --tmpl-brand-size: 14px; + --tmpl-brand-lh: 20px; + --tmpl-title-mt: 12px; + --tmpl-title-size: 14px; + --tmpl-title-lh: 20px; + --tmpl-title-min-h: 32px; + --tmpl-desc-size: 12px; + --tmpl-desc-lh: 16px; + --tmpl-link-mt: 10px; + + // UI + --ui-card-min-h: 130px; + --ui-grid-gap: 12px; + --ui-grid-min-h: 240px; + --ui-card-radius: 16px; + --ui-card-pad: 16px 12px 0px; + --ui-icon-size: 18px; + --ui-brand-size: 14px; + --ui-brand-lh: 20px; + --ui-title-mt: 10px; + --ui-title-size: 14px; + --ui-title-lh: 20px; + --ui-desc-size: 12px; + --ui-desc-lh: 16px; + --ui-link-mt: 10px; + + // 引擎 + --eng-card-min-h: 260px; + --eng-card-radius: 16px; + --eng-card-pad: 16px 16px 0 12px; + --eng-icon-size: 18px; + --eng-brand-size: 13px; + --eng-brand-lh: 18px; + --eng-title-mt: 12px; + --eng-title-size: 14px; + --eng-title-lh: 20px; + --eng-desc-mt: 10px; + --eng-desc-size: 12px; + --eng-desc-lh: 20px; + --eng-link-mt: 10px; + } + + // ======================================== + // 媒体查询：1024px + // 验证@820px: 4*180 + 3*6 + 2*24 = 786 <= 820 + // 展开@820px: 544 + 3*70 + 3*6 + 48 = 820 + // ======================================== + @media (max-width: 1024px) { + --ps-pad-y: 40px; + --ps-pad-x: 24px; + --ps-title-size: 24px; + --ps-title-lh: 36px; + + --card-default-w: 180px; + --card-expanded-w: 544px; + --card-collapsed-w: 70px; + --card-min-h: 380px; + --card-info-pad: 16px 10px 0px; + --card-name-size: 15px; + --card-name-lh: 22px; + + --collapsed-pad: 10px 6px; + + // AI 亮色 + --ai-top-max-h: 130px; + --ai-bottom-max-h: 100px; + --ai-light-pad: 14px 0 0 10px; + --ai-header-gap: 8px; + --ai-icon-size: 16px; + --ai-brand-size: 12px; + --ai-brand-lh: 18px; + --ai-title-mt: 8px; + --ai-title-size: 12px; + --ai-title-lh: 18px; + --ai-desc-size: 11px; + --ai-desc-lh: 15px; + --ai-link-pb: 8px; + + // AI 暗色 + --ai-dark-pad: 10px; + --ai-dark-header-gap: 4px; + --ai-dark-icon-size: 16px; + --ai-dark-brand-size: 12px; + --ai-dark-brand-lh: 18px; + --ai-subtitle-mt: 6px; + --ai-subtitle-size: 12px; + --ai-subtitle-lh: 18px; + --ai-subdesc-size: 10px; + --ai-subdesc-lh: 10px; + --ai-sublink-pt: 4px; + + // 模板 + --tmpl-card-pad: 16px 10px 0px; + --tmpl-icon-size: 16px; + --tmpl-brand-size: 12px; + --tmpl-brand-lh: 18px; + --tmpl-title-mt: 10px; + --tmpl-title-size: 12px; + --tmpl-title-lh: 18px; + --tmpl-title-min-h: 28px; + --tmpl-desc-size: 11px; + --tmpl-desc-lh: 15px; + --tmpl-link-mt: 8px; + --tmpl-card-min-h: 240px; + + // UI + --ui-card-min-h: 115px; + --ui-card-pad: 14px 10px 0px; + --ui-icon-size: 16px; + --ui-brand-size: 12px; + --ui-brand-lh: 18px; + --ui-title-mt: 8px; + --ui-title-size: 12px; + --ui-title-lh: 18px; + --ui-desc-size: 11px; + --ui-desc-lh: 15px; + --ui-link-mt: 8px; + + // 引擎 + --eng-card-min-h: 240px; + --eng-card-pad: 16px 12px 0 10px; + --eng-icon-size: 16px; + --eng-brand-size: 12px; + --eng-brand-lh: 18px; + --eng-title-mt: 10px; + --eng-title-size: 12px; + --eng-title-lh: 18px; + --eng-desc-mt: 8px; + --eng-desc-size: 11px; + --eng-desc-lh: 18px; + --eng-link-mt: 8px; + } + + // ======================================== + // 媒体查询：768px（平板竖屏，2x2 网格） + // ======================================== + @media (max-width: 768px) { + --ps-pad-y: 40px; + --ps-pad-x: 24px; + --ps-title-size: 22px; + --ps-title-lh: 32px; + --ps-desc-size: 15px; + --ps-desc-lh: 24px; + --ps-grid-gap: 16px; + --ps-grid-mt: 32px; + + --card-pad: 20px 16px; + --card-preview-mt: 20px; + --card-max-h: auto; + --card-default-w: calc(50% - 8px); + --card-expanded-w: calc(50% - 8px); + --card-collapsed-w: calc(50% - 8px); + --card-radius: 16px; + --card-info-pad: 0; + --card-name-size: 18px; + --card-name-lh: 26px; + --card-summary-size: 14px; + + --collapsed-pad: 20px 16px; + --collapsed-name-size: 18px; + --collapsed-summary-size: 14px; + + // AI 亮色 + --ai-top-max-h: 240px; + + // AI 暗色 + --ai-bottom-max-h: 360px; + + // 模板 + --tmpl-card-min-h: 160px; + + // 引擎 + --eng-card-min-h: 400px; + + } + + // ======================================== + // 媒体查询：480px（移动端单列） + // ======================================== + @media (max-width: 480px) { + --ps-pad-y: 32px; + --ps-pad-x: 16px; + --ps-title-size: 20px; + --ps-title-lh: 28px; + --ps-desc-size: 14px; + --ps-grid-mt: 24px; + + --card-default-w: 100%; + --card-expanded-w: 100%; + --card-collapsed-w: 100%; + --card-radius: 16px; + --card-info-pad: 0; + --card-name-size: 17px; + --card-name-lh: 24px; + + // AI 亮色 + --ai-light-pad: 16px 0 0 12px; + --ai-header-gap: 10px; + --ai-icon-size: 18px; + --ai-brand-size: 14px; + --ai-brand-lh: 20px; + --ai-title-mt: 12px; + --ai-title-size: 14px; + --ai-title-lh: 20px; + --ai-desc-size: 12px; + --ai-desc-lh: 16px; + + // AI 暗色 + --ai-dark-pad: 12px; + --ai-dark-header-gap: 6px; + --ai-dark-icon-size: 18px; + --ai-dark-brand-size: 14px; + --ai-dark-brand-lh: 20px; + --ai-subtitle-mt: 10px; + --ai-subtitle-size: 14px; + --ai-subtitle-lh: 20px; + --ai-subdesc-size: 12px; + --ai-subdesc-lh: 16px; + + // 模板 + --tmpl-card-pad: 20px 12px 12px; + --tmpl-icon-size: 18px; + --tmpl-brand-size: 14px; + --tmpl-brand-lh: 20px; + --tmpl-title-mt: 12px; + --tmpl-title-size: 14px; + --tmpl-title-lh: 20px; + --tmpl-desc-size: 12px; + --tmpl-desc-lh: 16px; + + // UI + --ui-card-pad: 16px 12px 12px; + --ui-icon-size: 18px; + --ui-brand-size: 14px; + --ui-brand-lh: 20px; + --ui-title-mt: 10px; + --ui-title-size: 14px; + --ui-title-lh: 20px; + --ui-desc-size: 12px; + --ui-desc-lh: 16px; + + // 引擎 + --eng-card-pad: 20px 12px 16px; + --eng-icon-size: 18px; + --eng-brand-size: 14px; + --eng-brand-lh: 20px; + --eng-title-mt: 12px; + --eng-title-size: 14px; + --eng-title-lh: 20px; + --eng-desc-size: 12px; + --eng-desc-lh: 18px; + } + + // ======================================== + // 基础样式 + // ======================================== + padding: var(--ps-pad-y) var(--ps-pad-x); + font-size: 14px; + font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + border-top: 1px solid rgba(240, 240, 240, 1); + + // 强制所有子元素继承 PingFang SC 字体，防止浏览器默认字体覆盖 + *, *::before, *::after { + font-family: inherit; + } + + & > div { + max-width: var(--ps-max-w); + margin: 0 auto; + } + + .suite-title { + margin: 0 auto 16px; + font-size: var(--ps-title-size); + font-weight: 600; + line-height: var(--ps-title-lh); + text-align: center; + } + + .suite-desc { + font-size: var(--ps-desc-size); + font-weight: 400; + line-height: var(--ps-desc-lh); + letter-spacing: 1px; + color: #595959; + text-align: center; + } + + .suite-grid { + margin-top: var(--ps-grid-mt); + display: flex; + justify-content: center; + gap: var(--ps-grid-gap); + + @media (max-width: 768px) { + flex-wrap: wrap; + } + + .suite-card { + display: flex; + flex-direction: column; + flex: 0 0 var(--card-default-w); + min-height: var(--card-min-h); + padding: var(--card-pad); + border-radius: var(--card-radius); + box-sizing: border-box; + cursor: pointer; + overflow: hidden; + position: relative; + z-index: 1; + + &:nth-child(1) { background-color: #f3f4fb; } + &:nth-child(2) { background-color: #f3f4fb; } + &:nth-child(3) { background-color: #f3f4fb; } + &:nth-child(4) { background-color: #f5f1ff; } + + .card-info { + flex: 0 0 auto; + display: flex; + flex-direction: column; + gap: 8px; + padding: var(--card-info-pad); + } + + .card-name { + font-size: var(--card-name-size); + font-weight: 550; + line-height: var(--card-name-lh); + color: #191919; + } + + .card-summary { + font-size: var(--card-summary-size); + font-weight: 400; + line-height: var(--card-summary-lh); + color: #595959; + } + + .card-visual { + flex: 1; + position: relative; + overflow: hidden; + border-radius: 12px; + } + + .card-preview { + position: absolute; + inset: 0; + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease, visibility 0.4s ease; + + .ai-card-light, + .ai-card-dark, + .template-card, + .ui-card, + .engine-card { + opacity: 0; + transition: opacity 0.4s ease 0.15s; + } + + @media (max-width: 768px) { + position: relative; + opacity: 1; + visibility: visible; + inset: auto; + margin-top: var(--card-preview-mt); + + .ai-card-light, + .ai-card-dark, + .template-card, + .ui-card, + .engine-card { + opacity: 1; + transition: none; + } + } + } + } + + .suite-card.is-collapsed { + flex-basis: var(--card-collapsed-w); + padding: var(--collapsed-pad); + z-index: 1; + + // 每张卡片单独调整背景图片位置：向左、向下，展示约一半，避免挤压标签 + &:nth-child(1) { + background-position: 25% !important; + background-size: auto 100%, cover !important; + } + &:nth-child(2) { + background-position: 10% !important; + background-size: auto 100%, cover !important; + } + &:nth-child(3) { + background-position: 16% 45px !important; + background-size: auto 100%, cover !important; + } + &:nth-child(4) { + background-position: -7% 56px !important; + background-size: auto 100%, cover !important; + } + + .card-name { + font-size: var(--card-name-size); + font-weight: 550; + line-height: var(--card-name-lh); + color: #191919; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + } + + .card-summary { + font-size: var(--card-summary-size); + font-weight: 400; + line-height: var(--card-summary-lh); + color: #595959; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + } + + .card-badge { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .tag-desc { + max-width: 60px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + @media (max-width: 768px) { + max-width: none; + } + } + } + + .suite-card.is-expanded { + flex-basis: var(--card-expanded-w); + z-index: 10; + + .card-preview { + margin-top: var(--card-preview-mt); + opacity: 1; + visibility: visible; + + .ai-card-light, + .ai-card-dark, + .template-card, + .ui-card, + .engine-card { + opacity: 1; + } + } + } + } +} + + +@media (max-width: 768px) { + .product-suite{ + .suite-grid { + .suite-card { + min-height: 0; + max-height: var(--card-max-h); + cursor: default; + + // 移动端强制始终显示展开内容，不受 is-collapsed / is-expanded 影响 + &.is-collapsed, + &.is-expanded { + .card-preview { + position: relative; + opacity: 1; + visibility: visible; + inset: auto; + margin-top: var(--card-preview-mt); + + .ai-card-light, + .ai-card-dark, + .template-card, + .ui-card, + .engine-card { + opacity: 1; + transition: none; + } + } + } + } + } + } +} + +@media (min-width: 1920px) { + .product-suite{ + .suite-grid { + .suite-card { + min-height: 680px; + } + } + } + + .preview-engine { + .engine-card.engine-card { + min-height: 450px; + } + } +} + +/* ============================================================ + AI 应用开发 —— 全部使用变量，无硬编码 + ============================================================ */ +.preview-ai { + display: flex; + flex-direction: column; + gap: var(--ai-top-gap); + height: 100%; + padding: var(--ai-preview-pad); + + @media (max-width: 768px) { + gap: var(--ai-bottom-gap); + } + + + @media (min-width: 1920px) { + gap: 20px; + } + + .ai-top { + display: flex; + gap: var(--ai-top-gap); + flex: 1; + max-height: var(--ai-top-max-h); + + @media (min-width: 1920px) { + max-height: 220px; + } + + @media (max-width: 768px) { + flex-direction: column; + flex: none; + min-height: var(--ai-top-max-h); + } + + .ai-card-light { + @media (max-width: 440px) { + min-height: 140px; + } + flex: 1 1 0; + min-width: 0; + border-radius: var(--ai-light-radius); + padding: var(--ai-light-pad); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + background: url('../../../assets/images/new-icon/floor2/ai-app-1.jpg') no-repeat center / cover; + + &:nth-child(2) { + background: url('../../../assets/images/new-icon/floor2/ai-app-2.jpg') no-repeat center / cover; + } + + .ai-card-header { + display: flex; + align-items: center; + gap: var(--ai-header-gap); + + img { + width: var(--ai-icon-size); + height: var(--ai-icon-size); + flex-shrink: 0; + } + + .ai-brand { + font-size: var(--ai-brand-size); + font-weight: var(--ai-brand-weight); + line-height: var(--ai-brand-lh); + color: #ffffff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .ai-card-title { + margin-top: var(--ai-title-mt); + font-size: var(--ai-title-size); + font-weight: var(--ai-title-weight); + line-height: var(--ai-title-lh); + color: #ffffff; + word-break: break-all; + overflow-wrap: break-word; + } + + .ai-card-desc { + max-width: var(--ai-desc-max-w); + margin-top: var(--ai-desc-mt); + font-size: var(--ai-desc-size); + font-weight: 400; + line-height: var(--ai-desc-lh); + color: #ffffff; + word-break: break-all; + overflow-wrap: break-word; + } + + .ai-card-link { + margin-top: auto; + padding-bottom: var(--ai-link-pb); + font-size: var(--link-size); + line-height: var(--link-lh); + letter-spacing: var(--link-ls); + color: #ffffff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: var(--arrow-w); + height: var(--arrow-h); + margin-top: var(--arrow-mt); + margin-left: var(--arrow-ml); + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + &:hover::after { + transform: translateX(3px); + } + } + } + } + + .ai-bottom { + display: flex; + gap: var(--ai-bottom-gap); + flex: 1; + max-height: var(--ai-bottom-max-h); + + @media (max-width: 440px) { + margin-top: 52px; + } + + @media (min-width: 1920px) { + max-height: 210px; + } + + @media (max-width: 768px) { + flex-direction: column; + flex: none; + min-height: var(--ai-bottom-max-h); + } + + .ai-card-dark { + flex: 1 1 0; + min-width: 0; + border-radius: var(--ai-dark-radius); + padding: var(--ai-dark-pad); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + &:nth-child(1) { + background: linear-gradient(135deg, rgb(225,233,246) 20%, rgb(225,233,246) 20%, rgba(236,233,245) 50%); + } + + &:nth-child(2) { + background: linear-gradient(115deg, rgb(244,247,242) 30%,rgba(250,240,238) 80%, rgba(250,240,238) 70%, rgba(250,240,238) 60%); + } + + &:nth-child(3) { + background: linear-gradient(135deg, rgb(236,238,255) 40%, rgb(236,238,255) 20%, rgba(227,242,249) 50%); + } + + .ai-card-header-dark { + display: flex; + align-items: center; + gap: var(--ai-dark-header-gap); + + img { + width: var(--ai-dark-icon-size); + height: var(--ai-dark-icon-size); + flex-shrink: 0; + } + + .ai-brand-dark { + font-size: var(--ai-dark-brand-size); + font-weight: var(--ai-dark-brand-weight); + line-height: var(--ai-dark-brand-lh); + color: #191919; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .ai-card-subtitle { + margin-top: var(--ai-subtitle-mt); + font-size: var(--ai-subtitle-size); + font-weight: var(--ai-subtitle-weight); + line-height: var(--ai-subtitle-lh); + color: #191919; + word-break: break-all; + overflow-wrap: break-word; + } + + .ai-card-subdesc { + margin-top: var(--ai-subdesc-mt); + font-size: var(--ai-subdesc-size); + font-weight: 400; + line-height: var(--ai-subdesc-lh); + color: #595959; + word-break: break-all; + overflow-wrap: break-word; + } + + + @media (max-width: 1280px) { + .ai-card-sublink.ai-card-sublink.ai-card-sublink { + margin-top: 0px; + } + } + + + .ai-card-sublink { + margin-top: 12px; + padding-top: var(--ai-sublink-pt); + font-size: var(--link-size); + line-height: var(--link-lh); + letter-spacing: var(--link-ls); + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: var(--arrow-w); + height: var(--arrow-h); + margin-top: var(--arrow-mt); + margin-left: var(--arrow-ml); + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + &:hover::after { + transform: translateX(3px); + } + } + } + } +} + +/* ============================================================ + 前端应用模板 —— 全部使用变量 + ============================================================ */ +.preview-template { + display: flex; + gap: var(--tmpl-gap); + padding: var(--tmpl-preview-pad); + align-items: stretch; + + @media (max-width: 768px) { + flex-direction: column; + } + + .template-card { + flex: 1 1 0; + min-width: 0; + min-height: var(--tmpl-card-min-h); + border-radius: var(--tmpl-card-radius); + padding: var(--tmpl-card-pad); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .template-header { + display: flex; + align-items: center; + + img { + width: var(--tmpl-icon-size); + height: var(--tmpl-icon-size); + flex-shrink: 0; + margin-right: var(--tmpl-icon-mr); + } + + .template-brand { + font-size: var(--tmpl-brand-size); + font-weight: var(--tmpl-brand-weight); + line-height: var(--tmpl-brand-lh); + color: #191919; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .template-title { + margin-top: var(--tmpl-title-mt); + font-size: var(--tmpl-title-size); + font-weight: var(--tmpl-title-weight); + line-height: var(--tmpl-title-lh); + color: #191919; + min-height: var(--tmpl-title-min-h); + word-break: break-all; + overflow-wrap: break-word; + } + + .template-desc { + margin-top: var(--tmpl-desc-mt); + font-size: var(--tmpl-desc-size); + font-weight: 400; + line-height: var(--tmpl-desc-lh); + color: #595959; + word-break: break-all; + overflow-wrap: break-word; + + @media (max-width: 768px) { + width: 60%; + } + } + + .template-link { + margin-top: var(--tmpl-link-mt); + font-size: var(--link-size); + line-height: var(--link-lh); + letter-spacing: var(--link-ls); + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: var(--arrow-w); + height: var(--arrow-h); + margin-top: var(--arrow-mt); + margin-left: var(--arrow-ml); + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + + &:hover::after { + transform: translateX(3px); + } + } + } +} + +/* ============================================================ + 跨端 UI 组件库 —— 全部使用变量 + ============================================================ */ +.preview-ui { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: var(--ui-grid-gap); + min-height: var(--ui-grid-min-h); + padding: var(--ui-preview-pad); + + @media (max-width: 768px) { + grid-template-columns: 1fr; + } + + + .ui-card { + min-height: var(--ui-card-min-h); + border-radius: var(--ui-card-radius); + padding: var(--ui-card-pad); + box-sizing: border-box; + background: linear-gradient(135deg, #f0f6ff, #faf3ff); + display: flex; + flex-direction: column; + overflow: hidden; + + .ui-header { + display: flex; + align-items: center; + + img { + width: var(--ui-icon-size); + height: var(--ui-icon-size); + flex-shrink: 0; + margin-right: var(--ui-icon-mr); + } + + .ui-brand { + font-size: var(--ui-brand-size); + font-weight: var(--ui-brand-weight); + line-height: var(--ui-brand-lh); + color: #191919; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .ui-title { + margin-top: var(--ui-title-mt); + font-size: var(--ui-title-size); + font-weight: var(--ui-title-weight); + line-height: var(--ui-title-lh); + color: #191919; + word-break: break-all; + overflow-wrap: break-word; + } + + .ui-desc { + margin-top: var(--ui-desc-mt); + font-size: var(--ui-desc-size); + font-weight: 400; + line-height: var(--ui-desc-lh); + color: #595959; + word-break: break-all; + overflow-wrap: break-word; + } + + .ui-link { + margin-top: var(--ui-link-mt); + font-size: var(--link-size); + line-height: var(--link-lh); + letter-spacing: var(--link-ls); + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: var(--arrow-w); + height: var(--arrow-h); + margin-top: var(--arrow-mt); + margin-left: var(--arrow-ml); + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + &:hover::after { + transform: translateX(3px); + } + } + } +} + +/* ============================================================ + 低代码应用搭建 —— 全部使用变量 + ============================================================ */ +.preview-engine { + height: 100%; + padding: var(--eng-preview-pad); + + .engine-card { + width: 100%; + min-height: var(--eng-card-min-h); + border-radius: var(--eng-card-radius); + padding: var(--eng-card-pad); + box-sizing: border-box; + background: linear-gradient(135deg, #f0f6ff, #faf3ff); + display: flex; + flex-direction: column; + overflow: hidden; + + .engine-header { + display: flex; + align-items: center; + + img { + width: var(--eng-icon-size); + height: var(--eng-icon-size); + flex-shrink: 0; + margin-right: var(--eng-icon-mr); + } + + .engine-brand { + font-size: var(--eng-brand-size); + font-weight: var(--eng-brand-weight); + line-height: var(--eng-brand-lh); + color: #191919; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .engine-title { + margin-top: var(--eng-title-mt); + font-size: var(--eng-title-size); + font-weight: var(--eng-title-weight); + line-height: var(--eng-title-lh); + color: #191919; + word-break: break-all; + overflow-wrap: break-word; + } + + .engine-desc { + margin-top: var(--eng-desc-mt); + font-size: var(--eng-desc-size); + font-weight: 400; + line-height: var(--eng-desc-lh); + color: #595959; + word-break: break-all; + overflow-wrap: break-word; + } + + .engine-link { + margin-top: var(--eng-link-mt); + font-size: var(--link-size); + line-height: var(--link-lh); + letter-spacing: var(--link-ls); + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: var(--arrow-w); + height: var(--arrow-h); + margin-top: var(--arrow-mt); + margin-left: var(--arrow-ml); + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + &:hover::after { + transform: translateX(3px); + } + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/about-opentiny/index.vue b/packages/home/src/views/home/about-opentiny/index.vue new file mode 100644 index 00000000..f989b99e --- /dev/null +++ b/packages/home/src/views/home/about-opentiny/index.vue @@ -0,0 +1,394 @@ + + + \ No newline at end of file diff --git a/packages/home/src/views/home/activity/index.less b/packages/home/src/views/home/activity/index.less new file mode 100644 index 00000000..876e031e --- /dev/null +++ b/packages/home/src/views/home/activity/index.less @@ -0,0 +1,464 @@ +@import '@/mixin.less'; + +@bp-mobile: 567px; +@bp-tablet: 1024px; +@bp-desktop: 1280px; +@bp-desktop-large: 1670px; + +.updates-guide { + padding: clamp(48px, 6.94vw, 100px) clamp(16px, 4.17vw, 60px); + box-sizing: border-box; + + .updates-inner { + max-width: 1600px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + } + + .updates-title { + font-size: clamp(24px, 2.5vw, 36px); + font-weight: 600; + line-height: 1.3; + color: #191919; + text-align: center; + margin-bottom: clamp(12px, 1.11vw, 16px); + } + + .updates-subtitle { + font-size: clamp(14px, 1.11vw, 20px); + font-weight: 400; + line-height: 1.5; + color: #808080; + text-align: center; + margin-bottom: clamp(32px, 4.17vw, 60px); + } + + .tab-bar { + display: flex; + justify-content: space-between; + background: #f5f5f5; + border-radius: 99px; + padding: clamp(6px, 0.56vw, 12px) clamp(12px, 1.39vw, 20px); + margin-bottom: clamp(20px, 2.08vw, 30px); + width: 100%; + max-width: 624px; + min-height: auto; + box-sizing: border-box; + gap: 4px; + + .tab-item { + display: flex; + align-items: center; + gap: clamp(4px, 0.56vw, 8px); + padding: clamp(6px, 0.56vw, 10px) clamp(10px, 1.11vw, 24px); + border-radius: 99px; + cursor: pointer; + font-size: clamp(12px, 0.97vw, 14px); + color: #191919; + transition: background 0.2s ease; + border: none; + background: transparent; + font-family: inherit; + white-space: nowrap; + + .tab-icon { + width: clamp(14px, 1.11vw, 16px); + height: clamp(14px, 1.11vw, 16px); + flex-shrink: 0; + } + + &:hover { + background: rgba(255, 255, 255, 0.6); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + } + + &.tab-active { + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + } + } + } + + .tab-content { + display: flex; + gap: clamp(12px, 1.39vw, 20px); + width: 100%; + max-width: 1440px; + justify-content: center; + align-items: stretch; + + .content-large { + flex: 1 1 48%; + max-width: 692px; + aspect-ratio: 16 / 10; + min-height: clamp(200px, 28vw, 432px); + border-radius: clamp(12px, 1.39vw, 20px); + overflow: hidden; + position: relative; + cursor: pointer; + background-color: #eef2ff; + + .card-bg-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: fill; + object-position: center; + z-index: 1; + } + + .card-info { + position: relative; + z-index: 2; + padding: clamp(16px, 2.78vw, 40px); + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; + justify-content: flex-start; + } + + .card-title { + font-size: clamp(16px, 2.22vw, 32px); + font-weight: 700; + line-height: 1.3; + color: #010101; + margin-bottom: clamp(8px, 0.83vw, 12px); + word-break: break-word; + overflow-wrap: break-word; + } + + .card-desc { + font-size: clamp(12px, 1.11vw, 16px); + font-weight: 400; + line-height: 1.5; + color: #595959; + word-break: break-word; + overflow-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + + .card-badge { + position: absolute; + width: clamp(32px, 2.78vw, 40px); + height: clamp(20px, 1.67vw, 24px); + z-index: 3; + pointer-events: none; + + &--left { + top: clamp(6px, 0.56vw, 8px); + left: clamp(6px, 0.56vw, 8px); + } + + &--right { + top: clamp(6px, 0.56vw, 8px); + right: clamp(6px, 0.56vw, 8px); + } + + @media screen and (max-width: @bp-desktop-large) { + &--left { + top: clamp(4px, 0.56vw, 4px); + scale: calc(0.8); + } + + &--right { + top: clamp(4px, 0.56vw, 4px); + scale: calc(0.8); + } + } + } + + .content-small-grid { + flex: 1 1 50%; + max-width: 728px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: clamp(10px, 1.39vw, 20px); + + .content-small { + width: 100%; + aspect-ratio: 16 / 9; + min-height: clamp(100px, 14.3vw, 206px); + border-radius: clamp(10px, 1.39vw, 20px); + overflow: hidden; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + cursor: pointer; + + .card-bg-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: fill; + object-position: center; + z-index: 1; + } + + .card-info { + position: relative; + z-index: 2; + padding: clamp(12px, 1.97vw, 32px) clamp(12px, 1.39vw, 28px); + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; + justify-content: flex-start; + } + + .card-title { + font-size: clamp(13px, 1.25vw, 20px); + font-weight: 700; + line-height: 1.4; + color: #000; + margin-bottom: clamp(6px, 0.83vw, 16px); + word-break: break-word; + overflow-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .card-desc { + font-size: clamp(11px, 0.97vw, 16px); + font-weight: 400; + line-height: 1.5; + color: #595959; + word-break: break-word; + overflow-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + } + } + + .learn-more { + margin-top: clamp(20px, 2.08vw, 30px); + font-size: 14px; + line-height: 16px; + letter-spacing: 1px; + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + margin-left: 6px; + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + + &:hover::after { + transform: translateX(3px); + } + } + + .pick-card { + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.15)); + } + } +} + +@media screen and (max-width: @bp-desktop) { + .updates-guide { + .tab-content { + .content-large { + flex: 1 1 45%; + } + + .content-small-grid { + flex: 1 1 52%; + } + } + } + .tab-content { + gap: 12px; + .content-large { + min-height: 200px; + aspect-ratio: 16 / 10; + border-radius: 12px; + + .card-title { + font-size: 18px; + + span { + font-size: 20px !important; + line-height: 1.3 !important; + } + } + } + } +} + +@media screen and (max-width: @bp-tablet) { + .updates-guide { + padding: 60px 40px; + + .tab-bar { + min-height: 48px; + min-width: fit-content; + } + + .tab-content { + flex-direction: column; + align-items: center; + + .content-large { + width: 100%; + max-width: 692px; + min-height: 280px; + aspect-ratio: 16 / 10; + + .card-title span { + font-size: clamp(20px, 3.91vw, 32px) !important; + } + } + + .content-small-grid { + width: 100%; + max-width: 692px; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + + .content-small { + max-height: 170px; + aspect-ratio: 16 / 10; + + + .card-info { + padding: 24px; + } + + .card-title { + font-size: clamp(14px, 1.95vw, 18px); + } + + .card-desc { + font-size: 12px; + } + } + } + } + } +} + +@media screen and (max-width: @bp-mobile) { + .updates-guide { + padding: 40px 16px; + + .tab-bar { + width: 100%; + border-radius: 16px; + padding: 6px; + gap: 4px; + + .tab-item { + flex: 1; + justify-content: center; + padding: 8px 10px; + font-size: 12px; + gap: 4px; + + .tab-icon { + width: 14px; + height: 14px; + } + } + } + + .tab-content { + gap: 12px; + + .content-large { + min-height: 200px; + aspect-ratio: 16 / 10; + border-radius: 12px; + + .card-info { + padding: 20px; + } + + .card-title { + font-size: 18px; + + span { + font-size: 20px !important; + line-height: 1.3 !important; + } + } + + .card-desc { + font-size: 12px; + -webkit-line-clamp: 4; + } + } + + .content-small-grid { + gap: 12px; + + .content-small { + min-height: 170px; + aspect-ratio: 16 / 9; + border-radius: 12px; + + .card-info { + padding: 20px; + } + + .card-title { + font-size: 12px; + margin-bottom: 8px; + -webkit-line-clamp: 3; + } + + .card-desc { + font-size: 10px; + -webkit-line-clamp: 5; + } + } + } + } + + .learn-more { + margin-top: 24px; + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/activity/index.vue b/packages/home/src/views/home/activity/index.vue new file mode 100644 index 00000000..befa413c --- /dev/null +++ b/packages/home/src/views/home/activity/index.vue @@ -0,0 +1,225 @@ + + + \ No newline at end of file diff --git a/packages/home/src/views/home/contributor/index.less b/packages/home/src/views/home/contributor/index.less new file mode 100644 index 00000000..f203f89b --- /dev/null +++ b/packages/home/src/views/home/contributor/index.less @@ -0,0 +1,203 @@ +@import '@/mixin.less'; + +@bp-mobile: 768px; +@bp-tablet: 1024px; + +.home-contributor { + background: #191919; + .pcPadding(100, 240); +} + +.explore-section { + background-image: url('../../../assets/images/new-icon/footer.webp'); + border-radius: 16px; + padding: 47px 60px; + margin: 0 auto 200px; + max-width: 1100px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + .explore-title { + font-size: 40px; + font-weight: 500; + line-height: 66px; + color: #fff; + margin-bottom: 30px; + white-space: nowrap; + } + + .explore-desc { + color: #fff; + font-size: 24px; + line-height: 34px; + letter-spacing: 1px; + margin-bottom: 30px; + max-width: 800px; + white-space: nowrap; + font-weight: 100; + } + + .explore-actions { + display: flex; + gap: 16px; + flex-wrap: wrap; + justify-content: center; + + .explore-btn { + width: 160px; + .btn-arrow { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 6px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + vertical-align: middle; + transition: transform 0.3s ease; + + &-white { + background-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + } + + &-black { + background-image: url('../../../assets/images/new-icon/floor1/arrow.svg'); + } + } + } + + .tiny-button { + &:hover .btn-arrow { + transform: translateX(3px); + } + } + + .tiny-button.tiny-button--medium+.tiny-button.tiny-button--medium { + margin-left: 0; + } + + .btn-white-border { + border: 1px solid #fff !important; + } + } +} + +@media screen and (max-width: @bp-tablet) { + .explore-section { + padding: 40px 40px; + + .explore-title { + font-size: 32px; + line-height: 1.4; + } + + .explore-desc { + font-size: 18px; + line-height: 1.5; + } + } +} + +@media screen and (max-width: @bp-mobile) { + .explore-section { + padding: 32px 20px; + + .explore-title { + font-size: 22px; + line-height: 1.4; + margin-bottom: 16px; + white-space: normal; + } + + .explore-desc { + font-size: 14px; + line-height: 1.5; + margin-bottom: 20px; + letter-spacing: 0.5px; + white-space: normal; + } + + .explore-actions { + gap: 12px; + } + } +} + +@keyframes arrow-shake { + 0% { transform: translateX(0); } + 25% { transform: translateX(5px); } + 50% { transform: translateX(-3px); } + 75% { transform: translateX(2px); } + 100% { transform: translateX(0); } +} + +.contributor-box { + max-width: 1600px; + margin: 0 auto; + + > .box-title { + color: #ffffff; + margin-bottom: 20px; + font-size: 40px; + display: flex; + justify-content: center; + } + + >.box-sub-title { + color: rgba(255,255,255,1); + font-size: 20px; + margin-bottom: 100px; + display: flex; + justify-content: center; + } +} + +@media screen and (max-width: @bp-tablet) { + .contributor-box { + + .box-title { + font-size: 28px; + line-height: 1.4; + } + + .box-sub-title { + font-size: 16px; + line-height: 1.5; + } + } +} + +.contributor-list { + display: flex; + list-style: none; + flex-wrap: wrap; + + li { + margin: 0 8px 30px 0; + + a { + text-decoration: none; + } + + img { + border-radius: 50%; + width: 42px; + height: 42px; + } + } + + @media screen and (max-width: @break-point) { + justify-content: center; + + li { + margin-bottom: 20px; + + img { + width: 32px; + height: 32px; + } + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/contributor/index.vue b/packages/home/src/views/home/contributor/index.vue index d127ceed..9b1145d2 100644 --- a/packages/home/src/views/home/contributor/index.vue +++ b/packages/home/src/views/home/contributor/index.vue @@ -1,14 +1,24 @@ - - - + \ No newline at end of file diff --git a/packages/home/src/views/home/growth-with-user/index.less b/packages/home/src/views/home/growth-with-user/index.less new file mode 100644 index 00000000..96392307 --- /dev/null +++ b/packages/home/src/views/home/growth-with-user/index.less @@ -0,0 +1,339 @@ +@import '@/mixin.less'; + +@bp-mobile: 768px; +@bp-tablet: 1024px; +@bp-desktop: 1440px; + +.home-growth-with-user { + .pcPadding(0, 60, 0, 0); + width: 100%; + background: #f5f6f9; + height: 100%; + overflow: hidden; + + .user-stat { + height: auto; + min-height: 500px; + padding: clamp(80px, 13.5vw, 194px) clamp(40px, 8.7vw, 167px) clamp(40px, 4.2vw, 60px) clamp(40px, 6.2vw, 119px); + display: flex; + flex-direction: column; + justify-content: center; + } + + .text-slogen { + color: #191919; + .pcRem(font-size, 44); + line-height: 1.5; + } + .text-bold { + font-weight: bold; + } + .text-blue { + color:#1476ff; + } + .text-desc { + color: rgb(89, 89, 89); + font-size: clamp(16px, 1.67vw, 24px); + font-weight: 400; + line-height: 1.5; + } + .text-num { + .pcRem(font-size, 60); + font-weight: bold; + line-height: 1.5; + } + + .flex-box { + display: flex; + margin-top: clamp(40px, 6.2vw, 89px); + margin-bottom: clamp(40px, 5vw, 72px); + flex-wrap: wrap; + gap: clamp(32px, 6.4vw, 92px); + > div + div { + margin-left: 0; + } + } + + .growth-with-user-box { + display: flex; + max-width: 1600px; + justify-content: space-around; + margin: 0 auto; + height: auto; + min-height: 600px; + background: url('../../../assets/images/new-icon/floor5/growth-bg.svg'); + background-position: 0px clamp(-190px, -13.2vw, -60px); + background-size: clamp(300px, 36.8vw, 530px) clamp(300px, 36.8vw, 530px); + background-repeat: no-repeat; + } + + @keyframes infiniteScroll { + from { + transform: translateY(0); + } + to { + transform: translateY(-50%); + } + } + + .user-list-comma { + font-family: arial; + position: absolute; + color: #1476ff; + font-size: clamp(60px, 8.3vw, 120px); + font-weight: 700; + line-height: 1.2; + letter-spacing: 0px; + z-index: 10; + left: clamp(-90px, -5.6vw, -80px); + top: clamp(-5px, -0.7vw, -10px); + } + .user-list-box { + position: relative; + flex-shrink: 0; + } + .user-list-card-box { + height: clamp(600px, 63.9vw, 920px); + overflow: hidden; + position: relative; + top: clamp(40px, 5.6vw, 80px); + } + + .user-list { + .pcRem(width, 660); + display: flex; + gap: 16px; + } + + .user-column { + flex: 1; + display: flex; + flex-direction: column; + gap: 16px; /* 卡片间距严格 16px */ + animation: infiniteScroll 30s linear infinite; + + &:hover { + animation-play-state: paused; + } + } + + .user-card { + .pcPadding(30, 30); + background-color: #fff; + border-radius: 16px; + overflow: hidden; + display: flex; + flex-direction: column; + transition: box-shadow 0.3s ease; + + &:hover { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08); + } + + .user-card-header { + display: flex; + flex-direction: column; + gap: 4px; + padding-bottom: 16px; + + .user-name { + font-size: 16px; + font-weight: 600; + color: #191919; + line-height: 24px; + } + + .user-location { + color: #575d6c; + font-size: 14px; + line-height: 20px; + } + } + + .user-comments { + font-size: 14px; + color: #191919; + line-height: 24px; + padding-top: 16px; + } + } + + .user-carousel { + .tiny-carousel__indicators { + justify-content: center !important; + } + } + + .card-container { + display: flex; + flex-direction: column; + gap: 12px; + padding: 0 16px; + height: 100%; + box-sizing: border-box; + } + + .user-card-bottom { + display: flex; + flex-direction: column; + gap: 4px; + margin-top: auto; + padding-top: 12px; + + .user-name { + font-size: 14px; + font-weight: 600; + color: #191919; + } + + .user-location { + color: #575d6c; + font-size: 12px; + } + } + + .user-comments-inner { + font-size: 14px; + color: #191919; + line-height: 1.6; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .tiny-carousel { + min-height: 280px; + aspect-ratio: auto !important; + } + + .carousel-item-demo { + height: 100% !important; + } + + .tiny-carousel__item { + height: 100% !important; + } +} + +@media screen and (max-width: @bp-tablet) { + .home-growth-with-user { + .growth-with-user-box { + flex-direction: column; + align-items: center; + background-position: center top; + background-size: 400px 400px; + padding-bottom: 40px; + min-height: 0; + } + + .user-stat { + padding: 60px 40px 40px; + min-height: auto; + align-items: center; + text-align: center; + } + + .text-slogen { + text-align: center; + } + + .flex-box { + justify-content: center; + margin-top: 40px; + margin-bottom: 40px; + } + + .user-list-box { + display: none; + } + } +} + +@media screen and (max-width: @bp-mobile) { + .home-growth-with-user { + .pcPadding(0, 0, 0, 0); + + .growth-with-user-box { + background-size: 280px 280px; + background-position: center top; + padding-bottom: 0; + } + + .user-stat { + padding: 48px 20px 32px; + min-height: auto; + align-items: center; + text-align: center; + } + + .text-slogen { + font-size: 28px; + line-height: 1.4; + } + + .text-num { + font-size: 40px; + } + + .text-desc { + font-size: 14px; + } + + .flex-box { + margin-top: 32px; + margin-bottom: 32px; + gap: 32px; + justify-content: center; + } + + .user-list-box { + display: none; + } + + .card-container { + padding: 0 12px; + gap: 8px; + } + + .user-card { + padding: 20px; + border-radius: 12px; + } + + .user-comments-inner { + -webkit-line-clamp: 3; + font-size: 13px; + } + + .tiny-carousel { + max-height: 180px; + padding-bottom: 40px; + } + } +} + +@media screen and (min-width: @bp-tablet) and (max-width: @bp-desktop) { + .home-growth-with-user { + .growth-with-user-box { + justify-content: space-between; + padding: 0 40px; + } + + .user-stat { + padding: 120px 40px 60px; + } + + .user-list { + width: 480px; + } + + .user-list-card-box { + height: 700px; + } + + .user-list-comma { + left: -80px; + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/growth-with-user/index.vue b/packages/home/src/views/home/growth-with-user/index.vue index 46fe05e4..788d0ecf 100644 --- a/packages/home/src/views/home/growth-with-user/index.vue +++ b/packages/home/src/views/home/growth-with-user/index.vue @@ -1,54 +1,69 @@ \ No newline at end of file diff --git a/packages/home/src/views/home/guide/components/GuideCard.vue b/packages/home/src/views/home/guide/components/GuideCard.vue index 9e14bddb..0e158735 100644 --- a/packages/home/src/views/home/guide/components/GuideCard.vue +++ b/packages/home/src/views/home/guide/components/GuideCard.vue @@ -36,10 +36,10 @@ const state = reactive({ display: flex; justify-content: space-between; align-items: center; - font-weight: 600; + font-weight: 700; border-bottom: 1px solid rgb(219, 219, 219); - .pcRem(line-height, 36); - .pcRem(font-size, 16); + .pcRem(line-height, 30); + .pcRem(font-size, 22); .pcRem(margin-bottom, 8); .pcRem(padding-bottom, 8); } diff --git a/packages/home/src/views/home/guide/components/StepCard.vue b/packages/home/src/views/home/guide/components/StepCard.vue index 26ae38d4..23719776 100644 --- a/packages/home/src/views/home/guide/components/StepCard.vue +++ b/packages/home/src/views/home/guide/components/StepCard.vue @@ -42,7 +42,7 @@ const state = reactive({ .pcPadding(16); &-active { - border: 1px solid rgb(25, 25, 25); + background: rgba(247, 248, 251, 1); } &-title { @@ -51,14 +51,17 @@ const state = reactive({ } &-sub-title { - font-weight: 600; - color: rgb(25, 25, 25); - font-weight: 600; + font-weight: 700; + font-size: 22px; + color: rgba(25, 25, 25, 1); .pcRem(line-height, 36); - .pcRem(font-size, 18); display: flex; align-items: center; gap: 8px; + + @media (max-width: 920px) { + font-size: 18px; + } } &-description { diff --git a/packages/home/src/views/home/guide/index.vue b/packages/home/src/views/home/guide/index.vue index f3c9349f..e731ffb2 100644 --- a/packages/home/src/views/home/guide/index.vue +++ b/packages/home/src/views/home/guide/index.vue @@ -2,7 +2,7 @@
-
快速集成NEXT SDKs
+
轻松 4 步，快速集成 MCP
支持多种编程语言和前端框架，帮助开发者快速实现智能化功能
@@ -56,6 +56,16 @@
+
+ + 查看详情 + +
@@ -191,20 +201,86 @@ onUnmounted(() => { \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-four.less b/packages/home/src/views/home/next-page/part/page-four.less new file mode 100644 index 00000000..9c37d215 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-four.less @@ -0,0 +1,374 @@ +// ==================== 变量 ==================== +@gap-xl: 24px; +@gap-lg: 20px; +@gap-md: 16px; +@gap-sm: 12px; + +@radius-xl: 20px; +@radius-lg: 16px; +@radius-md: 12px; +@radius-sm: 8px; + +@max-width: 1600px; +@card-height: 348px; + +// ==================== 页面容器 ==================== +.solution-page { + width: 100%; + max-width: @max-width; + margin: 0 150px; + padding: 100px 0px; + box-sizing: border-box; + border-top: 1px solid rgba(240, 240, 240, 1); + background: rgba(255, 255, 255, 1); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + + @media (max-width: 1399px) { + padding: 80px 32px; + } + + @media (max-width: 1199px) { + padding: 64px 24px; + margin: 0; + } + + @media (max-width: 767px) { + padding: 48px 16px; + } + + @media (max-width: 575px) { + padding: 40px 12px; + } +} + +// ==================== 第一部分：标题区 ==================== +.page-header { + text-align: center; + margin-bottom: 64px; + + @media (max-width: 1199px) { + margin-bottom: 48px; + } + + @media (max-width: 991px) { + margin-bottom: 40px; + } + + @media (max-width: 767px) { + margin-bottom: 32px; + } +} + +.page-title { + font-size: 40px; + font-weight: 700; + line-height: 1.3; + color: #191919; + margin: 0 0 16px 0; + + @media (max-width: 1199px) { + font-size: 36px; + } + + @media (max-width: 991px) { + font-size: 30px; + margin-bottom: 12px; + } + + @media (max-width: 767px) { + font-size: 26px; + } + + @media (max-width: 575px) { + font-size: 22px; + } +} + +.page-desc { + font-size: 18px; + font-weight: 300; + line-height: 1.6; + color: rgba(128, 128, 128, 1); + margin: 0 0 40px 0; // ← 修改：更紧凑 + + @media (max-width: 991px) { + font-size: 16px; + margin-bottom: 32px; + } + + @media (max-width: 767px) { + font-size: 15px; + margin-bottom: 24px; + } + + @media (max-width: 575px) { + font-size: 14px; + } +} + +// ---------- 标签组 ---------- +.page-tags { + display: inline-flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + justify-content: center; + + .tiny-tag.tiny-tag--info.tiny-tag--light { + border-radius: 999px; + } + + &-img { + margin-right: 8px; + } +} + +// ==================== 第二部分：8 个特性卡片 ==================== +.feature-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: @gap-xl; + margin-bottom: 80px; + + // 1200px - 1399px：保持 4 列但紧凑间距 + @media (max-width: 1399px) { + gap: @gap-lg; + margin-bottom: 64px; + } + + // 768px - 1199px：改为 2 列 + @media (max-width: 1199px) { + grid-template-columns: repeat(2, 1fr); + margin-bottom: 56px; + } + + @media (max-width: 991px) { + gap: @gap-md; + } + + // < 768px：改为 1 列 + @media (max-width: 767px) { + grid-template-columns: 1fr; + gap: @gap-sm; + margin-bottom: 48px; + } + + @media (max-width: 575px) { + margin-bottom: 40px; + } +} + +.feature-card { + height: @card-height; + padding: 32px; + box-sizing: border-box; + border-radius: @radius-xl; + background-position: bottom center, center; + background-size: auto 40%, cover; + background-repeat: no-repeat, no-repeat; + display: flex; + flex-direction: column; + align-items: flex-start; + transition: transform 0.3s ease, box-shadow 0.3s ease; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); + } + + // 平板：高度自适应，避免内容溢出 + @media (max-width: 1199px) { + height: auto; + min-height: 300px; + padding: 28px; + } + + @media (max-width: 991px) { + min-height: 280px; + border-radius: @radius-lg; + background-size: auto 38%, cover; // ← 背景图稍小，给文字留空间 + } + + // 移动端：完全自适应 + @media (max-width: 767px) { + min-height: auto; + padding: 24px; + border-radius: @radius-md; + background-size: auto 35%, cover; + } + + @media (max-width: 575px) { + padding: 20px; + border-radius: @radius-sm; + background-position: right; + background-size: auto 50%, cover; + } +} + +.feature-title { + font-size: 22px; + font-weight: 600; + line-height: 1.4; + color: #191919; + margin: 0 0 12px 0; + + @media (max-width: 991px) { + font-size: 20px; + } + + @media (max-width: 767px) { + font-size: 18px; + } + + @media (max-width: 575px) { + font-size: 17px; + } +} + +// ---------- 列表 ---------- +.feature-list { + list-style: none; + padding: 0; + margin: 0; + + li { + position: relative; + padding-left: 16px; + font-size: 14px; + line-height: 2; + color: #595959; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 4px; + border-radius: 50%; + background: #595959; + } + + @media (max-width: 767px) { + line-height: 1.8; + } + + @media (max-width: 575px) { + font-size: 10px; + line-height: 1.7; + } + } +} + +// ==================== 第三部分：4 个图标项 ==================== +.icon-section { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 310px; // ← 修改：更合理的间距 + + @media (max-width: 1399px) { + gap: 80px; + } + + @media (max-width: 1199px) { + gap: 60px; + } + + @media (max-width: 991px) { + gap: 48px; + } + + // 平板以下：2×2 换行 + @media (max-width: 767px) { + flex-wrap: wrap; + gap: 32px 48px; + } + + @media (max-width: 575px) { + gap: 28px 32px; + } +} + +.icon-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + @media (max-width: 767px) { + width: calc(50% - 24px); // ← 2×2 时每项占半宽 + } + + @media (max-width: 575px) { + width: calc(50% - 16px); + gap: 8px; + } +} + +.icon-box { + width: 32px; // ← 修改：默认稍大，保证可见 + height: 32px; + border-radius: @radius-lg; + background: #f5f7fa; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + + &:hover { + background: #eef2ff; + } + + @media (max-width: 991px) { + width: 28px; + height: 28px; + } + + @media (max-width: 575px) { + width: 24px; + height: 24px; + } +} + +.icon-desc { + color: #1476ff; + font-size: 16px; + font-weight: 500; + line-height: 1.4; + + @media (max-width: 991px) { + font-size: 18px; + } + + @media (max-width: 767px) { + font-size: 16px; + } + + @media (max-width: 575px) { + font-size: 14px; + } +} + +.icon-text { + font-size: 14px; + font-weight: 400; + color: #191919; + line-height: 1.5; + + @media (max-width: 767px) { + font-size: 13px; + } + + @media (max-width: 575px) { + font-size: 12px; + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-four.vue b/packages/home/src/views/home/next-page/part/page-four.vue new file mode 100644 index 00000000..ff27deb6 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-four.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/home/src/views/home/next-page/part/page-one.less b/packages/home/src/views/home/next-page/part/page-one.less new file mode 100644 index 00000000..b8ed7d66 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-one.less @@ -0,0 +1,291 @@ +// ==================== 变量 ==================== +@radius-lg: 16px; +@radius-md: 12px; +@radius-sm: 8px; + +// ==================== 背景容器 ==================== +.bg-container { + position: relative; + width: 100%; + min-height: 650px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + @media (max-width: 1399px) { + min-height: 580px; + } + + @media (max-width: 1199px) { + min-height: 520px; + } + + @media (max-width: 991px) { + min-height: 480px; + } + + @media (max-width: 767px) { + min-height: auto; + padding: 80px 0; + display: flex; + align-items: center; + justify-content: center; + } + + @media (max-width: 575px) { + padding: 64px 0; + } +} + +// ==================== 内容区域 ==================== +.content-wrapper { + position: absolute; + left: 260px; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 640px; + + @media (max-width: 1599px) { + left: 200px; + max-width: 580px; + } + + @media (max-width: 1399px) { + left: 160px; + max-width: 520px; + } + + @media (max-width: 1199px) { + left: 100px; + max-width: 480px; + } + + @media (max-width: 991px) { + left: 48px; + max-width: 440px; + } + + @media (max-width: 767px) { + position: relative; + left: auto; + top: auto; + transform: none; + align-items: center; + text-align: center; + padding: 0 24px; + max-width: 100%; + } + + @media (max-width: 575px) { + padding: 0 16px; + } +} + +// ==================== 叠加图 ==================== +.overlay-img { + width: 430px; + height: auto; + margin-bottom: 30px; + + @media (max-width: 1399px) { + width: 380px; + margin-bottom: 24px; + } + + @media (max-width: 1199px) { + width: 340px; + margin-bottom: 20px; + } + + @media (max-width: 991px) { + width: 300px; + margin-bottom: 18px; + } + + @media (max-width: 767px) { + width: 260px; + margin-bottom: 16px; + } + + @media (max-width: 575px) { + width: 220px; + margin-bottom: 14px; + } +} + +// ==================== Tag ==================== +.tag-item { + margin-bottom: 25px; + + @media (max-width: 1399px) { + margin-bottom: 20px; + } + + @media (max-width: 991px) { + margin-bottom: 16px; + } + + @media (max-width: 767px) { + margin-bottom: 14px; + } +} + +// ==================== 主标题 ==================== +.main-title { + margin: 0 0 16px 0; + padding: 0; + font-size: 56px; + font-weight: 600; + line-height: 1.2; + color: #191919; + + @media (max-width: 1399px) { + font-size: 48px; + } + + @media (max-width: 1199px) { + font-size: 44px; + margin-bottom: 14px; + } + + @media (max-width: 991px) { + font-size: 38px; + margin-bottom: 12px; + } + + @media (max-width: 767px) { + font-size: 32px; + margin-bottom: 10px; + } + + @media (max-width: 575px) { + font-size: 18px; + margin-bottom: 8px; + } +} + +// ==================== 副标题 ==================== +.sub-title { + margin: 0 0 24px 0; + padding: 0; + font-size: 24px; + font-weight: 400; + line-height: 1.4; + color: #191919; + + @media (max-width: 1399px) { + font-size: 22px; + margin-bottom: 20px; + } + + @media (max-width: 1199px) { + font-size: 20px; + } + + @media (max-width: 991px) { + font-size: 18px; + margin-bottom: 16px; + } + + @media (max-width: 767px) { + font-size: 17px; + margin-bottom: 14px; + } + + @media (max-width: 575px) { + font-size: 12px; + margin-bottom: 12px; + } +} + +.highlight-plus { + color: rgba(20, 118, 255, 1); +} + +// ==================== 描述文字 ==================== +.desc { + margin: 0 0 72px 0; + padding: 0; + font-size: 20px; + font-weight: 300; + line-height: 1.5; + color: rgba(89, 89, 89, 1); + letter-spacing: 1px; + + @media (max-width: 1399px) { + font-size: 18px; + margin-bottom: 56px; + } + + @media (max-width: 1199px) { + font-size: 17px; + margin-bottom: 48px; + } + + @media (max-width: 991px) { + font-size: 16px; + margin-bottom: 40px; + letter-spacing: 0.5px; + } + + @media (max-width: 767px) { + font-size: 15px; + margin-bottom: 32px; + } + + @media (max-width: 575px) { + font-size: 10px; + margin-bottom: 28px; + } +} + +// ==================== 按钮组 ==================== +.btn-group { + display: flex; + gap: 16px; + + @media (max-width: 767px) { + gap: 14px; + } + + @media (max-width: 575px) { + flex-direction: column; + gap: 12px; + width: 100%; + align-items: stretch; + } + + .btn-arrow { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 6px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + vertical-align: middle; + transition: transform 0.3s ease; + + &-light { + background-image: url('../../../../assets/images/new-icon/floor1/arrow-white.svg'); + } + + &-dark { + background-image: url('../../../../assets/images/new-icon/floor1/arrow.svg'); + } + } + + .tiny-button { + &:hover .btn-arrow { + transform: translateX(3px); + } + + @media (max-width: 575px) { + width: 100%; + justify-content: center; + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-one.vue b/packages/home/src/views/home/next-page/part/page-one.vue new file mode 100644 index 00000000..66d4e24b --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-one.vue @@ -0,0 +1,56 @@ + + + + + \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-seven.vue b/packages/home/src/views/home/next-page/part/page-seven.vue new file mode 100644 index 00000000..d11f8a11 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-seven.vue @@ -0,0 +1,163 @@ + + + + + \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-six.vue b/packages/home/src/views/home/next-page/part/page-six.vue new file mode 100644 index 00000000..759525e7 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-six.vue @@ -0,0 +1,181 @@ + + + + + \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-three.less b/packages/home/src/views/home/next-page/part/page-three.less new file mode 100644 index 00000000..89903bb9 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-three.less @@ -0,0 +1,450 @@ +// ==================== 变量 ==================== +@gap-xl: 20px; +@gap-lg: 16px; +@gap-md: 12px; +@gap-sm: 10px; + +@radius-xl: 20px; +@radius-lg: 16px; +@radius-md: 12px; +@radius-sm: 10px; + +@max-width: 1600px; + +.more-link { + text-align: center; + margin-top: 60px; + letter-spacing: 1px; + + .card-link { + color: #1476ff; + } +} + +// ==================== 页面容器 ==================== +.product-grid-page { + width: 100%; + padding: 100px 150px; + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + + @media (max-width: 1399px) { + padding: 64px 32px 80px; + } + + @media (max-width: 991px) { + padding: 48px 24px 64px; + } + + @media (max-width: 767px) { + padding: 40px 16px 48px; + } +} + +// ==================== 页面标题 ==================== +.page-header { + text-align: center; + margin-bottom: 80px; + + @media (max-width: 991px) { + margin-bottom: 40px; + } + + @media (max-width: 767px) { + margin-bottom: 32px; + } +} + +.page-title { + font-size: 40px; + font-weight: 600; + line-height: 1.3; + color: #191919; + margin: 0 0 16px 0; + + @media (max-width: 1199px) { + font-size: 34px; + } + + @media (max-width: 991px) { + font-size: 30px; + margin-bottom: 12px; + } + + @media (max-width: 767px) { + font-size: 26px; + } + + @media (max-width: 575px) { + font-size: 22px; + } +} + +.page-desc { + font-size: 18px; + font-weight: 400; + line-height: 1.6; + color: rgba(89, 89, 89, 1); + margin: 0; + + @media (max-width: 991px) { + font-size: 16px; + } + + @media (max-width: 767px) { + font-size: 15px; + } + + @media (max-width: 575px) { + font-size: 14px; + } +} + +// ==================== 网格容器 ==================== +.grid-container { + display: flex; + flex-direction: column; + gap: @gap-xl; + + @media (max-width: 991px) { + gap: @gap-md; + } + + @media (max-width: 767px) { + gap: @gap-sm; + } +} + +// ==================== 行容器 ==================== +.grid-row { + display: flex; + gap: @gap-xl; + + @media (max-width: 1199px) { + gap: @gap-lg; + } + + @media (max-width: 991px) { + gap: @gap-md; + } + + @media (max-width: 767px) { + flex-direction: column; + gap: @gap-sm; + } +} + +// ==================== 卡片公共 ==================== +.grid-card { + position: relative; + overflow: hidden; + flex: 1; + border-radius: @radius-xl; + padding: 40px 0 40px 40px; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: stretch; + height: 290px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + background-size: cover; + background-position: center; + + &:hover { + transform: translateY(-3px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); + } + + @media (max-width: 1399px) { + padding: 24px 0 24px 24px; + min-height: 200px; + } + + @media (max-width: 1199px) { + padding: 20px 0 20px 20px; + border-radius: @radius-lg; + min-height: 180px; + } + + @media (max-width: 991px) { + padding: 18px 0 18px 18px; + height: 236px; + } + + @media (max-width: 767px) { + padding: 20px 0 20px 20px; + border-radius: @radius-md; + width: 100%; + min-height: 160px; + } + + @media (max-width: 575px) { + padding: 16px 0 16px 16px; + border-radius: @radius-sm; + } +} + +// ==================== 卡片右上角小图标 ==================== +.card-badge { + position: absolute; + top: 0; + right: 0; + width: 74px; + height: 30px; + z-index: 10; + pointer-events: none; + border-radius: 2px 20px 2px 20px; // ← 新增：四个角都圆角，与卡片统一 + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + + @media (max-width: 991px) { + width: 62px; + height: 25px; + } + + @media (max-width: 767px) { + width: 56px; + height: 22px; + } +} + +// ==================== 左侧内容区 ==================== +.card-content { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 50%; + + @media (max-width: 1199px) { + max-width: 60%; + } + + @media (max-width: 991px) { + max-width: 65%; + } + + @media (max-width: 767px) { + max-width: 60%; + } + + @media (max-width: 575px) { + max-width: 58%; + } +} + +// ==================== 右侧背景图 ==================== +.card-bg-image { + position: absolute; + top: 5px; + right: 0; + width: 60%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: right center; + z-index: 1; + pointer-events: none; + + @media (max-width: 1199px) { + width: 40%; + background-position: center right; + } + + @media (max-width: 991px) { + width: 35%; + opacity: 0.9; + } + + @media (max-width: 767px) { + width: 40%; + opacity: 0.85; + } + + @media (max-width: 575px) { + width: 58%; + opacity: 0.8; + background-size: auto 75%, cover; + } +} + +// ==================== 浅色卡片（上排 3 个）==================== +.card-light { + .card-brand { + color: #191919; + } + + .card-title { + color: #191919; + } + + .card-desc { + color: #595959; + } + + .card-link { + color: #1476ff; + + &:hover { + color: rgba(10, 90, 220, 1); + } + + &::after { + background-image: url('../../../../assets/images/new-icon/floor1/arrow-blue.svg'); + } + } +} + +// ==================== 深色卡片（下排 2 个）==================== +.card-dark,.more-link { + border-color: rgba(255, 255, 255, 0.08); + + .card-brand { + color: #191919; + } + + .card-title { + color: #191919; + } + + .card-desc-large { + color: #595959; + } + + .card-link { + color: #1476ff; + + &:hover { + color: rgba(10, 90, 220, 1); + } + + &::after { + background-image: url('../../../../assets/images/new-icon/floor1/arrow-blue.svg'); + } + } +} + +// ==================== 卡片内容元素 ==================== +.card-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 40px; + + @media (max-width: 991px) { + margin-bottom: 12px; + gap: 8px; + } +} + +.card-icon { + width: 28px; + height: 28px; + flex-shrink: 0; + border-radius: 6px; + + @media (max-width: 767px) { + width: 24px; + height: 24px; + } +} + +.card-brand { + font-size: 20px; + font-weight: 700; + line-height: 28px; + color: #191919; + + @media (max-width: 767px) { + font-size: 13px; + } +} + +.card-title { + font-size: 24px; + font-weight: 500; + line-height: 28px; + margin-bottom: 8px; + width: max-content; + + @media (max-width: 1199px) { + font-size: 17px; + } + + @media (max-width: 991px) { + font-size: 16px; + margin-bottom: 8px; + } + + @media (max-width: 575px) { + font-size: 15px; + } +} + +.card-desc-large.card-desc-large { + width: max-content; + max-width: none; + @media (max-width: 575px) { + max-width: 108px; + } +} + +.card-desc, +.card-desc-large { + font-size: 14px; + line-height: 20px; + margin-bottom: 20px; + flex: 1; + max-width: 63%; + max-height: 48px; + + @media (max-width: 1199px) { + font-size: 13px; + line-height: 1.6; + } + + @media (max-width: 991px) { + margin-bottom: 12px; + } + + @media (max-width: 575px) { + font-size: 12px; + } +} + +.card-link { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: color 0.2s ease; + + &::after { + content: ''; + display: inline-block; + width: 14px; + height: 14px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: transform 0.2s ease; + } + + &:hover::after { + transform: translateX(3px); + } + + @media (max-width: 991px) { + font-size: 13px; + margin-top: 10px; + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-three.vue b/packages/home/src/views/home/next-page/part/page-three.vue new file mode 100644 index 00000000..b2ca5d7c --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-three.vue @@ -0,0 +1,177 @@ + + + + + \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-two.less b/packages/home/src/views/home/next-page/part/page-two.less new file mode 100644 index 00000000..d8974e12 --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-two.less @@ -0,0 +1,792 @@ +// ==================== 变量 ==================== +@gap-xl: 24px; +@gap-lg: 20px; +@gap-md: 16px; +@gap-sm: 12px; +@gap-xs: 8px; + +@radius-xl: 20px; +@radius-lg: 16px; +@radius-md: 12px; +@radius-sm: 8px; + +// ==================== 基础区域 ==================== +.agent-capability-section { + display: flex; + flex-direction: column; + align-items: center; + padding: 100px 150px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + + @media (max-width: 1399px) { + padding: 80px 32px; + } + + @media (max-width: 1199px) { + padding: 64px 28px; + } + + @media (max-width: 991px) { + padding: 56px 24px; + } + + @media (max-width: 767px) { + padding: 48px 20px; + } + + @media (max-width: 575px) { + padding: 40px 16px; + } +} + +// ==================== 标题 ==================== +.main-title { + font-size: 40px; + font-weight: 600; + line-height: 1.4; + color: #191919; + margin-bottom: 16px; + text-align: center; + + @media (max-width: 1399px) { + font-size: 38px; + } + + @media (max-width: 1199px) { + font-size: 34px; + } + + @media (max-width: 991px) { + font-size: 30px; + margin-bottom: 14px; + } + + @media (max-width: 767px) { + font-size: 26px; + margin-bottom: 12px; + } + + @media (max-width: 575px) { + font-size: 22px; + line-height: 1.35; + } +} + +.sub-title { + font-size: 20px; + font-weight: 400; + line-height: 1.6; + letter-spacing: 1px; + color: rgba(89, 89, 89, 1); + margin-bottom: 72px; + text-align: center; + max-width: 720px; + + @media (max-width: 1399px) { + font-size: 19px; + margin-bottom: 60px; + } + + @media (max-width: 1199px) { + font-size: 18px; + margin-bottom: 52px; + } + + @media (max-width: 991px) { + font-size: 17px; + margin-bottom: 44px; + } + + @media (max-width: 767px) { + font-size: 15px; + line-height: 1.5; + margin-bottom: 36px; + letter-spacing: 0.5px; + } + + @media (max-width: 575px) { + font-size: 14px; + margin-bottom: 28px; + } +} + +// ==================== 卡片容器 ==================== +.cards-wrapper { + display: flex; + gap: @gap-xl; + align-items: stretch; + justify-content: center; + width: 100%; + + @media (max-width: 1399px) { + gap: @gap-lg; + } + + @media (max-width: 1199px) { + flex-wrap: wrap; + gap: @gap-md; + } + + @media (max-width: 767px) { + flex-direction: column; + align-items: center; + gap: @gap-md; + } + + @media (max-width: 575px) { + gap: @gap-sm; + } +} + +.column { + display: flex; + flex-direction: column; + align-items: center; + flex-shrink: 0; + + @media (max-width: 1199px) { + flex: 1 1 calc(50% - @gap-md / 2); + min-width: 320px; + + &:last-child { + flex: 1 1 100%; + max-width: 100%; + } + } + + @media (max-width: 767px) { + width: 100%; + max-width: 100%; + flex: none; + + &:last-child { + flex: none; + } + } +} + +// ==================== Tag 公共 ==================== +.section-tag.section-tag { + border-radius: 999px; + margin-bottom: 32px; + align-self: center; + border: none !important; + + @media (max-width: 1199px) { + margin-bottom: 24px; + } + + @media (max-width: 767px) { + margin-bottom: 16px; + } + + @media (max-width: 575px) { + margin-bottom: 12px; + } +} + +.tag-inner { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.tag-icon { + width: 16px; + height: 16px; + display: block; + + @media (max-width: 575px) { + width: 14px; + height: 14px; + } +} + +// ==================== 问题 Tag ==================== +.tag-problem { + width: 160px; + height: 44px; + justify-content: center; + background: linear-gradient(135deg, rgba(252, 227, 224, 1) 0.0292%, rgba(255, 216, 245, 1) 100.292%) !important; + + .tag-inner { + background: linear-gradient(135deg, rgba(242, 48, 48, 1) 0%, rgba(242, 48, 179, 1) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + } + + @media (max-width: 767px) { + width: 140px; + height: 40px; + } + + @media (max-width: 575px) { + width: 120px; + height: 36px; + font-size: 13px; + } +} + +// ==================== 方案 Tag ==================== +.tag-solution { + width: 160px; + height: 44px; + justify-content: center; + background: linear-gradient(135deg, rgba(215, 242, 213, 1) 0.0292%, rgba(231, 248, 219, 1) 100.292%) !important; + + .tag-inner { + color: rgba(92, 179, 0, 1); + } + + @media (max-width: 767px) { + width: 140px; + height: 40px; + } + + @media (max-width: 575px) { + width: 120px; + height: 36px; + font-size: 13px; + } +} + +// ==================== 效果 Tag ==================== +.tag-effect { + justify-content: center; + width: 222px; + height: 44px; + text-align: center; + background: linear-gradient(138.98deg, rgba(225, 233, 246, 1) 0%, rgba(236, 233, 245, 1) 91.276%) !important; + + .tag-inner { + background: linear-gradient(90deg, rgba(203, 67, 168, 1), rgba(44, 95, 239, 1) 56.193%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + } + + @media (max-width: 767px) { + width: 190px; + height: 40px; + } + + @media (max-width: 575px) { + width: 160px; + height: 36px; + font-size: 13px; + } +} + +// ==================== 卡片公共 ==================== +.card { + border-radius: @radius-xl; + padding: 42px 42px 0; + display: flex; + flex-direction: column; + + @media (max-width: 1399px) { + padding: 36px 36px 0; + } + + @media (max-width: 1199px) { + padding: 32px 32px 0; + border-radius: @radius-lg; + } + + @media (max-width: 991px) { + padding: 28px 28px 0; + } + + @media (max-width: 767px) { + padding: 24px 24px 0; + border-radius: @radius-md; + } + + @media (max-width: 575px) { + padding: 20px 20px 0; + border-radius: @radius-sm; + } +} + +// ==================== 小卡片 ==================== +.card-small { + width: 376px; + height: 600px; + background-color: rgba(247, 248, 251, 1); + background-repeat: no-repeat; + + @media (max-width: 1399px) { + width: 340px; + height: 540px; + } + + @media (max-width: 1199px) { + width: 100%; + height: auto; + min-height: 440px; + } + + @media (max-width: 991px) { + min-height: 400px; + } + + @media (max-width: 767px) { + min-height: 360px; + } + + @media (max-width: 575px) { + min-height: 320px; + } +} + +.card-problem-bg { + background-position: 0 320px; + background-size: contain; + + @media (max-width: 1399px) { + background-position: 0 280px; + } + + @media (max-width: 1199px) { + background-position: right bottom; + background-size: 260px auto; + } + + @media (max-width: 767px) { + background-size: 220px auto; + } + + @media (max-width: 575px) { + background-size: 90% 50%, cover; + } +} + +.card-solution-bg { + background-position: 4px 276px; + background-size: contain; + + @media (max-width: 1399px) { + background-position: 4px 240px; + } + + @media (max-width: 1199px) { + background-position: right bottom; + background-size: 260px auto; + } + + @media (max-width: 767px) { + background-size: 220px auto; + } + + @media (max-width: 575px) { + background-size: 90% 60%, cover; + } +} + +// ==================== 大卡片 ==================== +.card-large { + width: 800px; + height: 600px; + background: linear-gradient(229.40deg, rgba(250, 243, 255, 1) 2.454%, rgba(240, 246, 255, 1) 99.304%); + + @media (max-width: 1399px) { + width: 720px; + height: 540px; + } + + @media (max-width: 1199px) { + width: 100%; + height: auto; + min-height: 480px; + } + + @media (max-width: 991px) { + min-height: 440px; + } + + @media (max-width: 767px) { + min-height: 400px; + } + + @media (max-width: 575px) { + min-height: 360px; + } +} + +// ==================== 卡片内容 ==================== +.card-label { + max-width: fit-content; + margin-bottom: 14px; + + @media (max-width: 767px) { + margin-bottom: 10px; + font-size: 12px; + } +} + +.card-title { + font-size: 24px; + font-weight: 700; + line-height: 1.3; + letter-spacing: 1px; + color: rgba(25, 25, 25, 1); + margin-bottom: 12px; + + @media (max-width: 1399px) { + font-size: 22px; + } + + @media (max-width: 1199px) { + font-size: 20px; + } + + @media (max-width: 991px) { + font-size: 19px; + } + + @media (max-width: 767px) { + font-size: 18px; + margin-bottom: 8px; + } + + @media (max-width: 575px) { + font-size: 16px; + letter-spacing: 0.5px; + } +} + +.card-content { + font-size: 16px; + font-weight: 400; + line-height: 1.75; + letter-spacing: 1px; + color: rgba(89, 89, 89, 1); + margin-bottom: 8px; + + @media (max-width: 1199px) { + font-size: 15px; + line-height: 1.7; + } + + @media (max-width: 991px) { + font-size: 14px; + } + + @media (max-width: 767px) { + font-size: 14px; + line-height: 1.6; + letter-spacing: 0.5px; + } + + @media (max-width: 575px) { + font-size: 13px; + } +} + +// ==================== 卡片内视频触发区 ==================== +.video-player-wrap { + height: 420px; + cursor: pointer; + position: relative; + + @media (max-width: 1399px) { + min-height: 240px; + } + + @media (max-width: 1199px) { + min-height: 320px; + height: 320px; + flex: none; + } + + @media (max-width: 991px) { + min-height: 280px; + height: 280px; + } + + @media (max-width: 767px) { + min-height: 220px; + height: 220px; + } + + @media (max-width: 575px) { + min-height: 180px; + height: 180px; + } + + .video-frame { + width: 100%; + height: 100%; + background: linear-gradient(90deg, rgb(235,240,247), rgb(246,233,255)); + border-radius: @radius-lg; + padding: 12px; + box-sizing: border-box; + + @media (max-width: 767px) { + border-radius: @radius-md; + padding: 10px; + } + + @media (max-width: 575px) { + border-radius: @radius-sm; + padding: 8px; + } + } + + .video-poster { + width: 100%; + height: 100%; + background: url('../../../../assets/images/new-icon/floor4/update-bg-1.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: center; + border-radius: @radius-md; + } + + .play-icon { + transition: transform 0.3s ease; + + img { + @media (max-width: 767px) { + width: 52px; + height: 52px; + } + + @media (max-width: 575px) { + width: 44px; + height: 44px; + } + } + } + + .video-poster:hover .play-icon { + transform: scale(1.1); + } +} + +// ==================== 视频模态框 ==================== +.video-modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.35); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + padding: 48px; + + @media (max-width: 1199px) { + padding: 40px; + } + + @media (max-width: 991px) { + padding: 32px; + } + + @media (max-width: 767px) { + padding: 24px; + } + + @media (max-width: 575px) { + padding: 16px; + } +} + +.video-modal-body { + width: 100%; + max-width: 1080px; + position: relative; + + @media (max-width: 1199px) { + max-width: 900px; + } + + @media (max-width: 991px) { + max-width: 720px; + } + + @media (max-width: 767px) { + max-width: 100%; + } + + .video-frame { + width: 100%; + background: linear-gradient(90deg, rgb(235,240,247), rgb(246,233,255)); + border-radius: @radius-xl; + padding: 24px; + box-sizing: border-box; + position: relative; + overflow: hidden; + aspect-ratio: 16 / 9; + + @media (max-width: 1199px) { + border-radius: @radius-lg; + padding: 20px; + } + + @media (max-width: 991px) { + padding: 16px; + } + + @media (max-width: 767px) { + border-radius: @radius-md; + padding: 12px; + } + + @media (max-width: 575px) { + border-radius: @radius-sm; + padding: 8px; + } + } +} + +.video-player { + width: 100%; + height: 100%; + display: block; + border-radius: @radius-md; + + @media (max-width: 575px) { + border-radius: @radius-sm; + } +} + +// ==================== 骨架屏 ==================== +.video-skeleton { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #1a1a1a; + z-index: 2; +} + +.skeleton-shimmer { + position: absolute; + inset: 0; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.05) 50%, + transparent 100% + ); + animation: shimmer 1.5s infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +.skeleton-spinner { + width: 50px; + height: 50px; + margin-bottom: 16px; + + @media (max-width: 575px) { + width: 40px; + height: 40px; + margin-bottom: 12px; + } +} + +.spinner-svg { + width: 100%; + height: 100%; + animation: spin 1s linear infinite; +} + +.spinner-circle { + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.skeleton-text { + color: rgba(255, 255, 255, 0.6); + font-size: 14px; + + @media (max-width: 575px) { + font-size: 12px; + } +} + +// ==================== 模态框播放按钮 ==================== +.modal-play-btn { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 3; + + img { + width: 64px; + height: 64px; + position: relative; + z-index: 2; + + @media (max-width: 767px) { + width: 52px; + height: 52px; + } + + @media (max-width: 575px) { + width: 44px; + height: 44px; + } + } +} + +.play-btn-pulse { + position: absolute; + width: 80px; + height: 80px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + animation: pulse 2s infinite; + z-index: 1; + + @media (max-width: 767px) { + width: 68px; + height: 68px; + } + + @media (max-width: 575px) { + width: 56px; + height: 56px; + } +} + +@keyframes pulse { + 0% { transform: scale(1); opacity: 0.6; } + 50% { transform: scale(1.3); opacity: 0; } + 100% { transform: scale(1); opacity: 0; } +} + +// ==================== 过渡动画 ==================== +.modal-enter-active, +.modal-leave-active { + transition: opacity 0.3s ease; +} + +.modal-enter-from, +.modal-leave-to { + opacity: 0; +} \ No newline at end of file diff --git a/packages/home/src/views/home/next-page/part/page-two.vue b/packages/home/src/views/home/next-page/part/page-two.vue new file mode 100644 index 00000000..416616cd --- /dev/null +++ b/packages/home/src/views/home/next-page/part/page-two.vue @@ -0,0 +1,179 @@ + + + \ No newline at end of file diff --git a/packages/home/src/views/home/opentiny-power/index.less b/packages/home/src/views/home/opentiny-power/index.less new file mode 100644 index 00000000..905c45a9 --- /dev/null +++ b/packages/home/src/views/home/opentiny-power/index.less @@ -0,0 +1,487 @@ +@import '@/mixin.less'; + +.capability-showcase { + .pcPadding(100, 240); + background-image: url('../../../assets/images/new-icon/floor3/power-bg.webp'), linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 255, 1) 100%); + background-size: 220px 240px, cover; + background-position: 130px 210px, center; + background-repeat: no-repeat, no-repeat; + + // ==================== 1440px ==================== + @media (max-width: 1670px) { + .pcPadding(80, 60); + background-size: 180px 200px, cover; + background-position: 60px 180px, center; + } + + // ==================== 1200px ==================== + @media (max-width: 1200px) { + .pcPadding(60, 40); + background-size: 140px 160px, cover; + background-position: 30px 160px, center; + } + + // ==================== 1024px（平板） ==================== + @media (max-width: 1024px) { + .pcPadding(48, 32); + // 隐藏左上角装饰图，避免与堆叠后的内容冲突 + background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 255, 1) 100%); + } + + // ==================== 768px（手机横屏/大屏手机） ==================== + @media (max-width: 768px) { + .pcPadding(40, 20); + } + + // ==================== 480px（小屏手机） ==================== + @media (max-width: 480px) { + .pcPadding(32, 16); + } + + & > div { + max-width: 1600px; + margin: 0 auto; + + @media (max-width: 1440px) { + max-width: 1320px; + } + @media (max-width: 1200px) { + max-width: 1120px; + } + @media (max-width: 1024px) { + max-width: 100%; + } + } + + .showcase-title { + margin: 0 auto 16px; + font-size: 36px; + font-weight: 600; + line-height: 66px; + text-align: center; + + @media (max-width: 1440px) { + font-size: 32px; + line-height: 56px; + margin-bottom: 14px; + } + @media (max-width: 1200px) { + font-size: 28px; + line-height: 48px; + } + @media (max-width: 1024px) { + font-size: 26px; + line-height: 42px; + } + @media (max-width: 768px) { + font-size: 22px; + line-height: 36px; + margin-bottom: 10px; + } + @media (max-width: 480px) { + font-size: 20px; + line-height: 32px; + } + } + + .showcase-subtitle { + font-size: 20px; + font-weight: 400; + line-height: 28px; + letter-spacing: 1px; + color: #595959; + text-align: center; + + @media (max-width: 1440px) { + font-size: 18px; + line-height: 26px; + } + @media (max-width: 1200px) { + font-size: 16px; + line-height: 24px; + } + @media (max-width: 768px) { + font-size: 14px; + line-height: 22px; + letter-spacing: 0.5px; + } + @media (max-width: 480px) { + font-size: 13px; + line-height: 20px; + } + } + + .showcase-body { + margin-top: 40px; + + @media (max-width: 1440px) { + margin-top: 32px; + } + @media (max-width: 1200px) { + margin-top: 28px; + } + @media (max-width: 768px) { + margin-top: 24px; + } + + .compare-header { + text-align: center; + margin-bottom: 40px; + font-size: 32px; + font-weight: 700; + line-height: 32px; + + @media (max-width: 1440px) { + font-size: 28px; + line-height: 28px; + margin-bottom: 32px; + } + @media (max-width: 1200px) { + font-size: 24px; + margin-bottom: 28px; + } + @media (max-width: 768px) { + font-size: 20px; + margin-bottom: 24px; + } + + .compare-left { + color: transparent; + background: linear-gradient(90deg, #cb43a8, #2c5fef 56%); + -webkit-background-clip: text; + background-clip: text; + } + } + + .compare-panels { + display: flex; + gap: 40px; + justify-content: center; + align-items: stretch; + + @media (max-width: 1440px) { + gap: 32px; + } + @media (max-width: 1200px) { + gap: 24px; + } + @media (max-width: 1169px) { + flex-direction: column; + align-items: center; + gap: 24px; + } + + // ---------- 公共面板基础 ---------- + .panel-left, + .panel-right { + padding: 40px; + box-sizing: border-box; + border-radius: 20px; + + @media (max-width: 1440px) { + padding: 32px; + border-radius: 16px; + } + @media (max-width: 1200px) { + padding: 28px; + border-radius: 14px; + } + @media (max-width: 768px) { + padding: 24px; + border-radius: 12px; + } + @media (max-width: 480px) { + padding: 20px; + border-radius: 10px; + } + + .panel-heading { + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: #191919; + margin-bottom: 40px; + + @media (max-width: 1440px) { + font-size: 28px; + line-height: 42px; + margin-bottom: 32px; + } + @media (max-width: 1200px) { + font-size: 24px; + line-height: 36px; + margin-bottom: 28px; + } + @media (max-width: 768px) { + font-size: 20px; + line-height: 30px; + margin-bottom: 24px; + } + @media (max-width: 480px) { + font-size: 18px; + line-height: 28px; + margin-bottom: 20px; + } + } + + .capability-block { + &:last-child { + margin-bottom: 0; + } + + .block-tags { + margin-bottom: 4px; + display: flex; + gap: 8px; + flex-wrap: wrap; + + @media (max-width: 480px) { + gap: 6px; + } + } + + .tag-icon { + margin-right: 6px; + } + } + } + + // ---------- 左侧面板 ---------- + .panel-left { + width: 560px; + min-height: 761px; + background: linear-gradient(90deg, rgba(234, 239, 244, 0.6) 0%, rgba(235, 238, 255, 0.6) 100%); + + @media (max-width: 1440px) { + width: 480px; + min-height: 680px; + } + @media (max-width: 1200px) { + width: 420px; + min-height: auto; + } + @media (max-width: 1169px) { + width: 100%; + max-width: 720px; + min-height: auto; + } + @media (max-width: 768px) { + max-width: 100%; + } + + .capability-block { + margin-bottom: 20px; + + @media (max-width: 1440px) { + margin-bottom: 18px; + } + @media (max-width: 768px) { + margin-bottom: 16px; + } + + .block-title { + font-size: 20px; + font-weight: 600; + line-height: 28px; + color: #191919; + margin-bottom: 4px; + + @media (max-width: 1440px) { + font-size: 18px; + line-height: 26px; + } + @media (max-width: 1200px) { + font-size: 17px; + line-height: 24px; + } + @media (max-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 480px) { + font-size: 15px; + line-height: 21px; + } + } + } + + .feature-list { + .feature-item { + display: flex; + align-items: flex-start; + gap: 8px; + margin-bottom: 4px; + min-height: 24px; + line-height: 24px; + + &:last-child { + margin-bottom: 0; + } + + @media (max-width: 1440px) { + min-height: 22px; + line-height: 22px; + } + @media (max-width: 768px) { + min-height: 20px; + line-height: 20px; + } + + .feature-icon { + width: 16px; + height: 16px; + margin-top: 4px; + flex-shrink: 0; + border-radius: 2px; + + @media (max-width: 768px) { + width: 14px; + height: 14px; + margin-top: 3px; + } + } + + .feature-text { + .feature-label { + font-size: 14px; + font-weight: 600; + line-height: 1.6; + color: #191919; + + @media (max-width: 768px) { + font-size: 13px; + } + @media (max-width: 480px) { + font-size: 12px; + } + } + + .feature-value { + font-size: 14px; + line-height: 1.6; + color: #595959; + + @media (max-width: 768px) { + font-size: 13px; + } + @media (max-width: 480px) { + font-size: 12px; + } + } + } + } + } + } + + // ---------- 右侧面板 ---------- + .panel-right { + width: 840px; + min-height: 761px; + background-image: url('../../../assets/images/new-icon/floor3/power-bg-ai.webp'), radial-gradient(ellipse at center, rgba(245, 252, 255, 1) 0%, rgba(208, 236, 255, 0.5) 100%); + background-size: auto 100%, 100%; + background-position: top, center; + background-repeat: no-repeat, no-repeat; + + @media (max-width: 1440px) { + width: 720px; + min-height: 680px; + background-position: top right, center; + } + @media (max-width: 1200px) { + width: 620px; + min-height: auto; + } + @media (max-width: 1169px) { + width: 100%; + max-width: 720px; + min-height: auto; + background-position: top right, center; + } + @media (max-width: 768px) { + max-width: 100%; + background-size: auto 50%, cover; + } + + .capability-block { + margin-bottom: 24px; + + @media (max-width: 1440px) { + margin-bottom: 20px; + } + @media (max-width: 768px) { + margin-bottom: 18px; + } + + .block-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 4px; + + .block-icon { + width: 20px; + height: 20px; + border-radius: 4px; + flex-shrink: 0; + + @media (max-width: 768px) { + width: 18px; + height: 18px; + } + @media (max-width: 480px) { + width: 16px; + height: 16px; + } + } + + .block-title { + font-size: 20px; + font-weight: 600; + line-height: 28px; + color: #191919; + + @media (max-width: 1440px) { + font-size: 18px; + line-height: 26px; + } + @media (max-width: 1200px) { + font-size: 17px; + line-height: 24px; + } + @media (max-width: 768px) { + font-size: 16px; + line-height: 22px; + } + @media (max-width: 480px) { + font-size: 15px; + line-height: 21px; + } + } + } + + .block-summary { + font-size: 14px; + line-height: 24px; + color: #595959; + + @media (max-width: 1440px) { + line-height: 22px; + } + @media (max-width: 1200px) { + font-size: 13px; + line-height: 21px; + } + @media (max-width: 768px) { + font-size: 13px; + line-height: 20px; + } + @media (max-width: 480px) { + font-size: 12px; + line-height: 19px; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/opentiny-power/index.vue b/packages/home/src/views/home/opentiny-power/index.vue new file mode 100644 index 00000000..06ff2174 --- /dev/null +++ b/packages/home/src/views/home/opentiny-power/index.vue @@ -0,0 +1,126 @@ + + + diff --git a/packages/home/src/views/home/update-app/index.less b/packages/home/src/views/home/update-app/index.less new file mode 100644 index 00000000..7f938c12 --- /dev/null +++ b/packages/home/src/views/home/update-app/index.less @@ -0,0 +1,918 @@ +@import '@/mixin.less'; + +.ai-guide { + display: flex; + width: 100%; + background: #fff; + border-top: 1px solid rgba(240, 240, 240, 1); + .pcPadding(100, 150); + + // ==================== 1440px ==================== + @media (max-width: 1440px) { + .pcPadding(80, 60); + } + + // ==================== 1200px ==================== + @media (max-width: 1200px) { + .pcPadding(60, 40); + } + + // ==================== 1024px（平板） ==================== + @media (max-width: 1024px) { + .pcPadding(48, 32); + } + + // ==================== 768px（手机横屏/大屏手机） ==================== + @media (max-width: 768px) { + .pcPadding(40, 20); + } + + // ==================== 480px（小屏手机） ==================== + @media (max-width: 480px) { + .pcPadding(32, 16); + } + + .guide-inner { + width: 100%; + margin: 0 auto; + .pcRem(max-width, 1600); + + @media (max-width: 1440px) { + max-width: 1320px; + } + @media (max-width: 1200px) { + max-width: 1120px; + } + @media (max-width: 1024px) { + max-width: 100%; + } + } + + .guide-header { + .guide-title { + font-weight: 600; + font-size: 36px; + line-height: 66px; + letter-spacing: 0; + color: #191919; + text-align: center; + + @media (max-width: 1440px) { + font-size: 32px; + line-height: 56px; + } + @media (max-width: 1200px) { + font-size: 28px; + line-height: 48px; + } + @media (max-width: 1024px) { + font-size: 26px; + line-height: 42px; + } + @media (max-width: 768px) { + font-size: 22px; + line-height: 36px; + } + @media (max-width: 480px) { + font-size: 20px; + line-height: 32px; + } + } + + .guide-subtitle { + font-size: 20px; + font-weight: 400; + line-height: 28px; + color: #595959; + margin-bottom: 40px; + text-align: center; + + @media (max-width: 1440px) { + font-size: 18px; + line-height: 26px; + margin-bottom: 32px; + } + @media (max-width: 1200px) { + font-size: 16px; + line-height: 24px; + margin-bottom: 28px; + } + @media (max-width: 768px) { + font-size: 14px; + line-height: 22px; + margin-bottom: 24px; + } + @media (max-width: 480px) { + font-size: 13px; + line-height: 20px; + margin-bottom: 20px; + } + } + } + + .guide-layout { + display: flex; + gap: 20px; + height: 600px; + border-radius: 20px; + padding: 20px; + box-sizing: border-box; + + @media (max-width: 1440px) { + height: 540px; + padding: 16px; + gap: 16px; + border-radius: 16px; + } + @media (max-width: 1200px) { + height: 500px; + padding: 14px; + gap: 14px; + border-radius: 14px; + } + @media (max-width: 1024px) { + flex-direction: column; + height: auto; + padding: 16px; + gap: 16px; + } + @media (max-width: 768px) { + padding: 12px; + gap: 12px; + border-radius: 12px; + } + @media (max-width: 480px) { + padding: 10px; + gap: 10px; + border-radius: 10px; + } + + // ---------- 左侧视频卡片 ---------- + .demo-video-card { + width: 480px; + height: 600px; + border-radius: 20px; + background: linear-gradient(90deg, rgba(240,246,255) 0%, rgba(250,243,255) 100%); + padding: 60px 30px 30px; + box-sizing: border-box; + display: flex; + flex-direction: column; + + @media (max-width: 1440px) { + width: 420px; + height: 520px; + padding: 48px 24px 24px; + border-radius: 16px; + } + @media (max-width: 1200px) { + width: 380px; + padding: 40px 20px 20px; + border-radius: 14px; + height: 492px; + } + @media (max-width: 1180px) { + height: 472px; + } + @media (max-width: 1024px) { + width: 100%; + max-width: 720px; + margin: 0 auto; + padding: 32px 24px 24px; + min-height: 560px; + } + @media (max-width: 768px) { + padding: 28px 20px 20px; + border-radius: 12px; + } + @media (max-width: 480px) { + padding: 24px 16px 16px; + border-radius: 10px; + } + + .video-card-title { + margin-bottom: 20px; + font-size: 28px; + font-weight: 700; + line-height: 32px; + letter-spacing: 1px; + text-align: left; + color: #191919; + + @media (max-width: 1440px) { + font-size: 24px; + line-height: 30px; + margin-bottom: 16px; + } + @media (max-width: 1200px) { + font-size: 22px; + line-height: 28px; + } + @media (max-width: 768px) { + font-size: 20px; + line-height: 26px; + margin-bottom: 12px; + } + @media (max-width: 480px) { + font-size: 18px; + line-height: 24px; + } + } + + .video-card-desc { + margin-bottom: 35px; + font-size: 16px; + font-weight: 400; + line-height: 28px; + letter-spacing: 1px; + color: #595959; + text-align: left; + + @media (max-width: 1440px) { + font-size: 15px; + line-height: 26px; + margin-bottom: 28px; + } + @media (max-width: 1200px) { + font-size: 14px; + line-height: 24px; + margin-bottom: 24px; + } + @media (max-width: 768px) { + font-size: 13px; + line-height: 22px; + margin-bottom: 20px; + } + @media (max-width: 480px) { + font-size: 12px; + line-height: 20px; + margin-bottom: 16px; + } + } + + .video-card-tags { + margin-bottom: 20px; + display: flex; + align-items: center; + + @media (max-width: 768px) { + margin-bottom: 16px; + } + + .tag-span { + letter-spacing: 2px; + font-size: 14px; + line-height: 20px; + + @media (max-width: 768px) { + font-size: 12px; + line-height: 18px; + letter-spacing: 1px; + } + } + + .tag-icon { + width: 18px; + height: 18px; + + @media (max-width: 768px) { + width: 16px; + height: 16px; + } + } + } + + .video-player-wrap { + flex: 1; + cursor: pointer; + position: relative; + + .video-frame { + width: 100%; + height: 100%; + background: linear-gradient(90deg, rgb(235,240,247), rgb(246,233,255)); + border-radius: 20px; + padding: 12px; + box-sizing: border-box; + + @media (max-width: 1440px) { + border-radius: 16px; + padding: 10px; + } + @media (max-width: 1024px) { + border-radius: 14px; + height: 300px; + } + @media (max-width: 768px) { + border-radius: 12px; + padding: 8px; + } + } + + .video-poster { + width: 100%; + height: 100%; + background: url('../../../assets/images/new-icon/floor4/update-bg-1.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: center; + + .play-icon { + transition: transform 0.3s ease; + + img { + @media (max-width: 768px) { + width: 48px; + height: 48px; + } + @media (max-width: 480px) { + width: 40px; + height: 40px; + } + } + } + + &:hover .play-icon { + transform: scale(1.1); + } + } + } + + .video-player-describe { + display: flex; + justify-content: center; + margin-top: 24px; + + @media (max-width: 768px) { + margin-top: 16px; + } + + a { + color: #1476ff; + text-decoration: none; + cursor: pointer; + + &:hover { + color: #1476ff; + text-decoration: underline; + } + + &:visited { + color: #1476ff; + } + } + } + + .video-player-describe-a { + margin-top: auto; + padding-top: 8px; + font-size: 14px; + line-height: 16px; + letter-spacing: 1px; + color: #1476ff; + text-decoration: none; + display: flex; + align-items: center; + gap: 4px; + transition: opacity 0.2s ease; + + @media (max-width: 768px) { + font-size: 13px; + line-height: 15px; + } + @media (max-width: 480px) { + font-size: 12px; + line-height: 14px; + } + + &:hover { + opacity: 0.8; + } + + &::after { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + margin-left: 6px; + vertical-align: middle; + background: currentColor; + mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../../../assets/images/new-icon/floor1/arrow-white.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + + @media (max-width: 768px) { + width: 14px; + height: 14px; + } + } + &:hover::after { + transform: translateX(3px); + } + } + } + + .compare-cards { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + + @media (max-width: 1440px) { + gap: 16px; + } + @media (max-width: 1200px) { + gap: 14px; + } + @media (max-width: 1024px) { + width: 100%; + max-width: 720px; + margin: 0 auto; + gap: 16px; + } + @media (max-width: 768px) { + gap: 12px; + } + @media (max-width: 480px) { + gap: 10px; + } + + .compare-card { + position: relative; + height: 290px; + border-radius: 20px; + background: linear-gradient(to right, #f0f6ff, #faf3ff); + padding-left: 30px; + box-sizing: border-box; + + @media (max-width: 1440px) { + height: 260px; + padding-left: 24px; + padding-top: 52px; + border-radius: 16px; + } + @media (max-width: 1200px) { + height: 240px; + padding-left: 20px; + padding-top: 48px; + border-radius: 14px; + } + @media (max-width: 1024px) { + height: auto; + min-height: 220px; + padding: 48px 24px 24px; + } + @media (max-width: 768px) { + min-height: 280px; + padding: 44px 20px 20px; + border-radius: 12px; + } + @media (max-width: 480px) { + padding: 40px 16px 16px; + border-radius: 10px; + } + + .compare-badge { + position: absolute; + top: 0; + left: 0; + width: 77px; + height: 27px; + background: #fce3e0; + color: #f23030; + border-radius: 20px 2px 20px 2px; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 700; + z-index: 1; + + @media (max-width: 768px) { + width: 64px; + height: 24px; + font-size: 12px; + border-radius: 12px 2px 12px 2px; + } + @media (max-width: 480px) { + width: 56px; + height: 22px; + font-size: 11px; + } + } + + .compare-card-body { + display: flex; + align-items: flex-start; + justify-content: space-between; + height: 290px; + + @media (max-width: 1440px) { + height: 200px; + } + + @media (max-width: 1180px) { + height: 180px; + } + + @media (max-width: 768px) { + gap: 16px; + } + @media (max-width: 480px) { + gap: 12px; + } + + .compare-card-text { + width: 467px; + display: flex; + flex-direction: column; + gap: 18px; + margin-top: 0; + padding-top: 60px; + + @media (max-width: 1670px) { + width: 260px; + gap: 14px; + padding-top: 52px; + } + @media (max-width: 1440px) { + padding-top: 0; + } + @media (max-width: 1200px) { + width: 340px; + gap: 12px; + } + @media (max-width: 1024px) { + width: 45%; + } + @media (max-width: 768px) { + gap: 10px; + padding-top: 32px; + } + @media (max-width: 480px) { + padding-top: 28px; + } + + .compare-card-title { + font-size: 28px; + font-weight: 700; + line-height: 32px; + letter-spacing: 1px; + text-align: left; + color: #191919; + + @media (max-width: 1670px) { + font-size: 24px; + line-height: 30px; + } + @media (max-width: 1200px) { + font-size: 22px; + line-height: 28px; + } + @media (max-width: 768px) { + font-size: 20px; + line-height: 26px; + } + @media (max-width: 480px) { + font-size: 18px; + line-height: 24px; + } + } + + .compare-card-desc { + font-size: 16px; + font-weight: 400; + line-height: 28px; + letter-spacing: 1px; + color: #595959; + text-align: left; + + @media (max-width: 1670px) { + font-size: 14px; + line-height: 26px; + } + @media (max-width: 1200px) { + font-size: 14px; + line-height: 24px; + } + @media (max-width: 768px) { + font-size: 12px; + line-height: 22px; + } + @media (max-width: 480px) { + font-size: 10px; + line-height: 20px; + } + } + + .compare-card-tags { + display: flex; + gap: 8px; + + @media (max-width: 480px) { + gap: 6px; + } + } + } + + .compare-card-image { + flex: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: url('../../../assets/images/new-icon/floor4/update-bg-2.webp'); + background-size: auto 80%; + background-position: 50% 38px; + background-repeat: no-repeat; + + @media (max-width: 1660px) { + background-size: auto 70%; + background-position: 50% 32px; + } + @media (max-width: 1562px) { + background-size: auto 60%; + background-position: 50% 28px; + } + @media (max-width: 1440px) { + background-size: auto 85%; + background-position: 50% 0px; + } + @media (max-width: 1200px) { + background-size: auto 62%; + background-position: 50% 20px; + } + @media (max-width: 1024px) { + min-width: 200px; + height: 200px; + background-size: auto 85%; + background-position: 50% 50%; + } + @media (max-width: 768px) { + width: 100%; + height: 160px; + min-width: auto; + background-size: auto 90%; + background-position: 50% center; + } + @media (max-width: 480px) { + height: 140px; + background-size: auto 70%; + background-position: 50% bottom; + } + } + + .compare-card-after-image { + flex: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: url('../../../assets/images/new-icon/floor4/update-bg-3.webp'); + background-size: auto 100%; + background-position: 50% 4px; + background-repeat: no-repeat; + + @media (max-width: 1660px) { + background-size: auto 82%; + background-position: 50% 12px; + } + @media (max-width: 1562px) { + background-size: auto 75%; + background-position: 50% 16px; + } + @media (max-width: 1440px) { + background-size: auto 100%; + background-position: 50% -30px; + } + @media (max-width: 1200px) { + background-size: auto 68%; + background-position: 50% 18px; + } + @media (max-width: 1024px) { + min-width: 200px; + height: 200px; + background-size: auto 88%; + background-position: 50% 50%; + } + @media (max-width: 768px) { + width: 100%; + height: 160px; + min-width: auto; + background-size: auto 92%; + background-position: 50% center; + } + @media (max-width: 480px) { + height: 140px; + background-size: auto 90%; + background-position: 50% center; + } + } + } + } + } + } + + /* 模态框过渡动画 */ + .modal-enter-active, + .modal-leave-active { + transition: opacity 0.35s ease; + } + + .modal-enter-from, + .modal-leave-to { + opacity: 0; + } + + .modal-enter-active .video-modal-body, + .modal-leave-active .video-modal-body { + transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); + } + + .modal-enter-from .video-modal-body, + .modal-leave-to .video-modal-body { + transform: scale(0.92) translateY(20px); + } + + .video-modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.35); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + + .video-modal-body { + position: relative; + width: 80%; + max-width: 960px; + + @media (max-width: 1024px) { + width: 90%; + } + @media (max-width: 768px) { + width: 95%; + } + + .video-frame { + width: 100%; + background: linear-gradient(90deg, rgb(235,240,247), rgb(246,233,255)); + border-radius: 20px; + padding: 24px; + box-sizing: border-box; + position: relative; + overflow: hidden; + aspect-ratio: 16 / 9; + + @media (max-width: 768px) { + border-radius: 12px; + padding: 12px; + } + @media (max-width: 480px) { + border-radius: 8px; + padding: 8px; + } + + .video-player { + width: 100%; + height: 100%; + border-radius: 12px; + display: block; + object-fit: cover; + opacity: 1; + transition: opacity 0.3s ease; + + @media (max-width: 768px) { + border-radius: 8px; + } + } + + /* 视频加载骨架屏 */ + .video-skeleton { + position: absolute; + inset: 12px; + border-radius: 12px; + background: linear-gradient(135deg, #e8ecf3 0%, #f0e8f7 50%, #e8ecf3 100%); + background-size: 200% 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + z-index: 3; + + @media (max-width: 768px) { + inset: 8px; + border-radius: 8px; + gap: 12px; + } + + .skeleton-shimmer { + position: absolute; + inset: 0; + border-radius: 12px; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.4) 50%, + transparent 100% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + } + + .skeleton-spinner { + width: 48px; + height: 48px; + position: relative; + z-index: 1; + + @media (max-width: 768px) { + width: 36px; + height: 36px; + } + + .spinner-svg { + width: 100%; + height: 100%; + animation: rotate 1s linear infinite; + + .spinner-circle { + animation: dash 1.5s ease-in-out infinite; + } + } + } + + .skeleton-text { + font-size: 14px; + color: #8c8c8c; + position: relative; + z-index: 1; + letter-spacing: 1px; + + @media (max-width: 768px) { + font-size: 12px; + } + } + } + + /* 播放按钮（带脉冲动画） */ + .modal-play-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + cursor: pointer; + z-index: 2; + width: 64px; + height: 64px; + + @media (max-width: 768px) { + width: 48px; + height: 48px; + } + + .play-btn-pulse { + position: absolute; + inset: -8px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + + @media (max-width: 768px) { + inset: -6px; + } + } + + .play-btn-icon { + position: relative; + z-index: 1; + transition: transform 0.3s ease; + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); + + @media (max-width: 768px) { + width: 48px; + height: 48px; + } + } + + &:hover .play-btn-icon { + transform: scale(1.08); + } + } + } + } + } +} \ No newline at end of file diff --git a/packages/home/src/views/home/update-app/index.vue b/packages/home/src/views/home/update-app/index.vue new file mode 100644 index 00000000..a85cea81 --- /dev/null +++ b/packages/home/src/views/home/update-app/index.vue @@ -0,0 +1,164 @@ + + + diff --git a/packages/tech-college/src/tech/components/ts/video.ts b/packages/tech-college/src/tech/components/ts/video.ts index a43d715c..efaeebd3 100644 --- a/packages/tech-college/src/tech/components/ts/video.ts +++ b/packages/tech-college/src/tech/components/ts/video.ts @@ -348,7 +348,7 @@ export function vueData() { }, { img: vueMini, - title: 'TinyVue组件库实战解析，提升组件库构建技能', + title: '手把手教你实现mini版 TinyVue 组件库', desc: { info: '', name: '申君健', @@ -359,7 +359,7 @@ export function vueData() { }, { img: vueBattle, - title: '手把手教你实现mini版 TinyVue 组件库', + title: 'TinyVue组件库实战解析，提升组件库构建技能', desc: { info: '', name: '申君健',