Skip to content

feat: edit home page style #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wuyiping0628 wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat: edit home page style #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f95e6e6
feat: edit home page style
wuyiping0628 Feb 13, 2026
7f79525
Merge branch 'dev' of github.com:opentiny/playground into wyp/edit-ho…
wuyiping0628 Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 178 additions & 66 deletions .vitepress/theme/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,147 @@
</div>
<div class="home-content">
<div class="big-box">
<a :href="item.link" class="small-box" v-for="(item, idx) in homeList" :key="idx">
<!-- 第一行：左图右上下结构 -->
<div class="row1">
<img class="avatar" :src="getImgUrl(item.icon)" />
<div class="row1-right">
<div class="row1-title">{{ item.title }}</div>
<div class="row1-content">{{ item.titleTip }}</div>
<div class="big-box-container big-box-container-top">
<a
:href="item.link"
class="small-box"
v-for="(item, idx) in homeListTop"
:key="idx"
>
<!-- 第一行：左图右上下结构 -->
<div class="row1">
<img class="avatar" :src="getImgUrl(item.icon)" />
<div class="row1-right">
<div class="row1-title">{{ item.title }}</div>
<div class="row1-content">{{ item.titleTip }}</div>
</div>
</div>
</div>
<!-- 第二行：大图片 -->
<div class="row2">
<img
:src="
getImgUrl(
isDark
? `images/${item.imgUrl}-dark.svg`
: `images/${item.imgUrl}.svg`
)
"
:key="isDark"
alt="OpenTiny NEXT"
class="logo-icon"
/>
</div>
<!-- 第三行：描述文本 -->
<div class="row3">{{ item.desc }}</div>
<!-- 第四行：跳转链接 -->
<div class="row4">
<a
:href="item.link"
:class="['link', { disabled: item.link === '' }]"
>进入 Playground</a
>
</div>
<div v-if="item.link === ''" class="row5">敬请期待</div>
</a>
<!-- 第二行：大图片 -->
<div class="row2-top">
<img
:src="
getImgUrl(
isDark
? `images/${item.imgUrl}-dark.svg`
: `images/${item.imgUrl}.svg`,
)
"
:key="isDark"
alt="OpenTiny NEXT"
class="logo-icon"
/>
</div>
<!-- 第三行：描述文本 -->
<div class="row3 row3-top">{{ item.desc }}</div>
<!-- 第四行：跳转链接 -->
<div class="row4">
<a
:href="item.link"
:class="['link', { disabled: item.link === '' }]"
>进入 Playground</a
>
</div>
<div v-if="item.link === ''" class="row5">敬请期待</div>
</a>
</div>
<div class="big-box-container">
<a
:href="item.link"
class="small-box"
v-for="(item, idx) in homeListButton"
:key="idx"
>
<!-- 第一行：左图右上下结构 -->
<div class="row1">
<img class="avatar" :src="getImgUrl(item.icon)" />
<div class="row1-right">
<div class="row1-title">{{ item.title }}</div>
<div class="row1-content">{{ item.titleTip }}</div>
</div>
</div>
<!-- 第二行：大图片 -->
<div class="row2">
<img
:src="
getImgUrl(
isDark
? `images/${item.imgUrl}-dark.svg`
: `images/${item.imgUrl}.svg`,
)
"
:key="isDark"
alt="OpenTiny NEXT"
class="logo-icon"
/>
</div>
<!-- 第三行：描述文本 -->
<div class="row3">{{ item.desc }}</div>
<!-- 第四行：跳转链接 -->
<div class="row4">
<a
:href="item.link"
:class="['link', { disabled: item.link === '' }]"
>进入 Playground</a
>
</div>
<div v-if="item.link === ''" class="row5">敬请期待</div>
</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useData } from "vitepress";
import { useData } from 'vitepress';

const { site, isDark } = useData();

const getImgUrl = (imgPath) => {
return site.value.base + imgPath;
};

const homeList = [
const homeListTop = [
{
icon: "images/tiny-vue-logo-active.svg",
title: "TinyVue",
titleTip: "vue组件库",
imgUrl: "tiny-vue-banner",
link: "tiny-vue",
desc: "基于 OpenTiny Design 设计体系的 Vue UI 组件库，一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。",
icon: 'images/tiny-vue-logo-active.svg',
title: 'TinyVue',
titleTip: 'vue组件库',
imgUrl: 'tiny-vue-banner',
link: 'tiny-vue',
desc: '基于 OpenTiny Design 设计体系的 Vue UI 组件库，一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。',
},
{
icon: "images/tiny-engine-logo-active.svg",
title: "TinyEngine",
titleTip: "低代码引擎",
imgUrl: "tiny-engine-banner",
link: "tiny-engine",
desc: "低代码引擎它内置了一个功能强大的低代码设计器，用户可以基于低代码引擎定制（开发）出各种低代码平台，如：流程编排平台、页面编排平台、图元编排平台、移动端页面开发平台、大屏开发平台等。",
icon: 'images/tiny-engine-logo-active.svg',
title: 'TinyEngine',
titleTip: '低代码引擎',
imgUrl: 'tiny-engine-banner',
link: 'tiny-engine',
desc: '低代码引擎它内置了一个功能强大的低代码设计器，用户可以基于低代码引擎定制（开发）出各种低代码平台，如：流程编排平台、页面编排平台、图元编排平台、移动端页面开发平台、大屏开发平台等。',
},
];
const homeListButton = [
{
icon: 'images/tiny-robot-logo-active.svg',
title: 'TinyRobot',
titleTip: 'AI智能助手',
imgUrl: 'tiny-robot-banner',
link: 'tiny-robot',
desc: 'TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。',
},
{
icon: "images/tiny-robot-logo-active.svg",
title: "TinyRobot",
titleTip: "AI智能助手",
imgUrl: "tiny-robot-banner",
link: "tiny-robot",
desc: "TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。",
icon: 'images/next-sdk-logo-active.svg',
title: 'NEXT-SDKs',
titleTip: '智能应用开发工具包',
imgUrl: 'next-sdk-banner',
link: 'next-sdk',
desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。',
},
{
icon: "images/next-sdk-logo-active.svg",
title: "NEXT-SDKs",
titleTip: "智能应用开发工具包",
imgUrl: "next-sdk-banner",
link: "next-sdk",
desc: "OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。",
icon: 'images/genui-sdk-logo-active.svg',
title: 'GenUI-SDK',
titleTip: '生成式 UI',
imgUrl: 'genui-sdk-banner',
link: 'genui-sdk',
desc: 'GenUI-SDK是一套增量流式生成界面的解决方案，旨在增强大模型对话的展示效果和交互能力，打造极致顺滑的智能体验。',
},
];
</script>
Expand All @@ -108,25 +168,47 @@ const homeList = [
}
/* 大盒子布局 */
.big-box {
max-width: 1366px;
background: rgba(0, 0, 0, 0.05);
padding: 40px 40px 1px;
margin: 100px auto;
border-radius: 20px;
}
.big-box-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: flex-start;
margin: 100px 86px;
margin-bottom: 40px;
}
.small-box {
background: #fff;
background: rgba(255, 255, 255, 0.5);
border-radius: 16px;
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 0 0 calc((100% - 3 * 30px) / 4);
max-width: calc((100% - 3 * 30px) / 4);
flex: 0 0 calc((100% - 2 * 30px) / 3);
max-width: calc((100% - 2 * 30px) / 3);
position: relative;
text-decoration: none;
cursor: pointer;
}

/* top 容器：左右两个盒子按 0.75 : 1 比例分配宽度（总间距为 30px） */
.big-box-container-top .small-box {
flex: 0 0 calc((100% - 30px) * 3 / 7);
max-width: calc((100% - 30px) * 3 / 7);
}
.big-box-container-top .small-box:last-child {
flex: 0 0 calc((100% - 30px) * 4 / 7);
max-width: calc((100% - 30px) * 4 / 7);
}

.dark .big-box {
background: rgba(34, 34, 34, 0.4);
backdrop-filter: blur(123px);
}
.dark .small-box {
background: rgba(38, 38, 38, 1);
}
Expand Down Expand Up @@ -162,6 +244,16 @@ const homeList = [
display: flex;
justify-content: center;
}
.row2-top {
display: flex;
justify-content: center;
}
.row2-top img {
width: 100%;
max-height: 222px;
object-fit: cover;
border-radius: 16px;
}
.main-img {
width: 318px;
height: 180px;
Expand All @@ -172,7 +264,10 @@ const homeList = [
font-size: 14px;
line-height: 21px;
color: #808080;
min-height: 105px;
min-height: 85px;
}
.row3-top {
min-height: 50px;
}
.row4 {
display: flex;
Expand Down Expand Up @@ -261,9 +356,23 @@ const homeList = [
padding: 16px;
border-radius: 12px;
}
.big-box-container-top .small-box {
flex: 0 0 100%;
max-width: 100%;
padding: 16px;
border-radius: 12px;
}
.big-box-container-top .small-box:last-child {
flex: 0 0 100%;
max-width: 100%;
padding: 16px;
border-radius: 12px;
}
.big-box {
margin: 40px 0px;
gap: 16px;
padding: 0;
background: transparent
}
.main-img {
width: 100%;
Expand Down Expand Up @@ -297,4 +406,7 @@ const homeList = [
.dark .logo-icon {
background: rgba(38, 38, 38, 1) !important;
}



</style>
4 changes: 0 additions & 4 deletions .vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@ body {
background: #000000 url('/images/bg-playground-home-dark.png') repeat-y fixed center top / cover;
}

.opentiny-playground-layout .is-home {
height: calc(100vh - 64px) !important;
}

.VPNav .container {
max-width: 100%;
}
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ OpenTiny 项目演练场
```bash
git submodule update --init --recursive
pnpm i
pnpm dev
pnpm dev // 需要在 bash 环境下执行
```
Loading
Loading