mirror of
https://gitee.com/JavaLionLi/plus-ui.git
synced 2026-09-14 00:03:42 +08:00
chore: sync non-ai frontend files to latest
This commit is contained in:
parent
f9982608dd
commit
eff5fcaa8d
108
package.json
108
package.json
@ -1,87 +1,95 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://json.schemastore.org/package",
|
"$schema": "https://json.schemastore.org/package",
|
||||||
"name": "ruoyi-vue-plus",
|
"name": "ruoyi-vue-plus",
|
||||||
"version": "5.5.3-2.5.3",
|
"version": "5.6.0-2.6.0",
|
||||||
"description": "RuoYi-Vue-Plus后台管理系统",
|
"description": "RuoYi-Vue-Plus多租户管理系统",
|
||||||
"license": "MIT",
|
|
||||||
"author": "LionLi",
|
"author": "LionLi",
|
||||||
|
"license": "MIT",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite serve --mode development",
|
||||||
|
"build:prod": "vite build --mode production",
|
||||||
|
"build:dev": "vite build --mode development",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint:eslint": "eslint",
|
||||||
|
"lint:eslint:fix": "eslint --fix",
|
||||||
|
"prettier": "prettier --write ."
|
||||||
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitee.com/JavaLionLi/plus-ui.git"
|
"url": "https://gitee.com/JavaLionLi/plus-ui.git"
|
||||||
},
|
},
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"build:dev": "vite build --mode development",
|
|
||||||
"build:prod": "vite build --mode production",
|
|
||||||
"dev": "vite serve --mode development",
|
|
||||||
"fmt": "oxfmt .",
|
|
||||||
"lint": "oxlint src",
|
|
||||||
"lint:fix": "oxlint --fix src",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "2.3.2",
|
"@element-plus/icons-vue": "2.3.2",
|
||||||
"@highlightjs/vue-plugin": "2.1.2",
|
"@highlightjs/vue-plugin": "2.1.2",
|
||||||
"@iconify/vue": "^5.0.0",
|
"@vueup/vue-quill": "1.2.0",
|
||||||
"@vueuse/core": "14.2.1",
|
"@vueuse/core": "14.2.1",
|
||||||
"@wangeditor-next/editor": "5.7.0",
|
|
||||||
"@wangeditor-next/editor-for-vue": "5.1.14",
|
|
||||||
"animate.css": "4.1.1",
|
"animate.css": "4.1.1",
|
||||||
"await-to-js": "3.0.0",
|
"await-to-js": "3.0.0",
|
||||||
"axios": "1.15.2",
|
"axios": "1.13.6",
|
||||||
"crypto-js": "4.2.0",
|
"crypto-js": "4.2.0",
|
||||||
"echarts": "6.0.0",
|
"echarts": "6.0.0",
|
||||||
"element-plus": "2.13.7",
|
"element-plus": "2.13.5",
|
||||||
|
"file-saver": "2.0.5",
|
||||||
"highlight.js": "11.11.1",
|
"highlight.js": "11.11.1",
|
||||||
"image-conversion": "2.1.1",
|
"image-conversion": "2.1.1",
|
||||||
|
"js-cookie": "3.0.5",
|
||||||
"jsencrypt": "3.5.4",
|
"jsencrypt": "3.5.4",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"pinia": "3.0.4",
|
"pinia": "3.0.4",
|
||||||
"vue": "3.5.33",
|
"screenfull": "6.0.2",
|
||||||
|
"vue": "3.5.30",
|
||||||
"vue-cropper": "1.1.4",
|
"vue-cropper": "1.1.4",
|
||||||
"vue-i18n": "11.4.0",
|
"vue-i18n": "11.3.0",
|
||||||
"vue-json-pretty": "2.6.0",
|
"vue-json-pretty": "2.6.0",
|
||||||
"vue-router": "5.0.6",
|
"vue-router": "5.0.3",
|
||||||
"vue-types": "6.0.0",
|
"vue-types": "6.0.0",
|
||||||
"vxe-table": "4.18.13"
|
"vxe-table": "4.18.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@iconify/json": "^2.2.448",
|
||||||
"@types/crypto-js": "4.2.2",
|
"@types/crypto-js": "4.2.2",
|
||||||
"@types/node": "^25.6.0",
|
"@types/file-saver": "2.0.7",
|
||||||
|
"@types/js-cookie": "3.0.6",
|
||||||
|
"@types/node": "^25.4.0",
|
||||||
"@types/nprogress": "0.2.3",
|
"@types/nprogress": "0.2.3",
|
||||||
"@unocss/preset-attributify": "66.6.8",
|
"@unocss/preset-attributify": "66.6.6",
|
||||||
"@unocss/preset-wind3": "66.6.8",
|
"@unocss/preset-icons": "66.6.6",
|
||||||
"@vitejs/plugin-vue": "^6.0.6",
|
"@unocss/preset-uno": "66.6.6",
|
||||||
"@vue/compiler-sfc": "3.5.33",
|
"@vitejs/plugin-vue": "6.0.4",
|
||||||
"autoprefixer": "10.5.0",
|
"@vue/compiler-sfc": "3.5.30",
|
||||||
"oxfmt": "^0.46.0",
|
"@vue/eslint-config-prettier": "10.2.0",
|
||||||
"oxlint": "^1.61.0",
|
"@vue/eslint-config-typescript": "14.6.0",
|
||||||
"sass": "1.99.0",
|
"autoprefixer": "10.4.27",
|
||||||
"typescript": "^6.0.3",
|
"eslint": "9.39.1",
|
||||||
"unocss": "66.6.8",
|
"eslint-plugin-prettier": "5.5.5",
|
||||||
|
"eslint-plugin-vue": "9.33.0",
|
||||||
|
"globals": "17.4.0",
|
||||||
|
"prettier": "3.8.1",
|
||||||
|
"sass": "1.98.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"unocss": "66.6.6",
|
||||||
"unplugin-auto-import": "21.0.0",
|
"unplugin-auto-import": "21.0.0",
|
||||||
"unplugin-vue-components": "32.0.0",
|
"unplugin-icons": "23.0.1",
|
||||||
|
"unplugin-vue-components": "31.0.0",
|
||||||
"unplugin-vue-setup-extend-plus": "1.0.1",
|
"unplugin-vue-setup-extend-plus": "1.0.1",
|
||||||
"vite": "^8.0.10",
|
"vite": "7.3.1",
|
||||||
"vite-plugin-svg-icons-ng": "^1.8.0",
|
"vite-plugin-svg-icons-ng": "^1.5.2",
|
||||||
"vitest": "4.1.5",
|
"vite-plugin-vue-devtools": "8.0.7",
|
||||||
"vue-tsc": "^3.2.7"
|
"vitest": "4.0.18",
|
||||||
|
"vue-tsc": "^3.2.5"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"quill": "1.3.7"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.19.0",
|
||||||
|
"npm": ">=8.19.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"Chrome >= 87",
|
"Chrome >= 87",
|
||||||
"Edge >= 88",
|
"Edge >= 88",
|
||||||
"Safari >= 14",
|
"Safari >= 14",
|
||||||
"Firefox >= 78"
|
"Firefox >= 78"
|
||||||
],
|
]
|
||||||
"engines": {
|
|
||||||
"node": ">=20.19.0",
|
|
||||||
"pnpm": ">=10.0.0"
|
|
||||||
},
|
|
||||||
"pnpm": {
|
|
||||||
"onlyBuiltDependencies": [
|
|
||||||
"@parcel/watcher",
|
|
||||||
"es5-ext",
|
|
||||||
"esbuild"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,108 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="app-container home">
|
||||||
<section class="hero-panel">
|
<el-row :gutter="20">
|
||||||
<div class="hero-copy">
|
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||||
<h1>RuoYi-Vue-Plus 控制台</h1>
|
<h2>RuoYi-Vue-Plus多租户管理系统</h2>
|
||||||
<p>
|
<p>
|
||||||
企业级后台管理系统 重写 RuoYi-Vue 所有功能 集成 Sa-Token、Mybatis-Plus、WarmFlow、SpringDoc、Hutool、OSS
|
RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
|
||||||
等组件
|
<br />
|
||||||
|
* 前端开发框架 Vue3、TS、Element Plus<br />
|
||||||
|
* 后端开发框架 Spring Boot<br />
|
||||||
|
* 容器框架 Undertow 基于 Netty 的高性能容器<br />
|
||||||
|
* 权限认证框架 Sa-Token 支持多终端认证系统<br />
|
||||||
|
* 关系数据库 MySQL 适配 8.X 最低 5.7<br />
|
||||||
|
* 缓存数据库 Redis 适配 6.X 最低 4.X<br />
|
||||||
|
* 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br />
|
||||||
|
* 数据库框架 p6spy 更强劲的 SQL 分析<br />
|
||||||
|
* 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br />
|
||||||
|
* 序列化框架 Jackson 统一使用 jackson 高效可靠<br />
|
||||||
|
* Redis客户端 Redisson 性能强劲、API丰富<br />
|
||||||
|
* 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br />
|
||||||
|
* 分布式锁 Lock4j 注解锁、工具锁 多种多样<br />
|
||||||
|
* 分布式幂等 Lock4j 基于分布式锁实现<br />
|
||||||
|
* 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br />
|
||||||
|
* 分布式任务调度 SnailJob 高性能 高可靠 易扩展<br />
|
||||||
|
* 文件存储 Minio 本地存储<br />
|
||||||
|
* 文件存储 七牛、阿里、腾讯 云存储<br />
|
||||||
|
* 监控框架 SpringBoot-Admin 全方位服务监控<br />
|
||||||
|
* 校验框架 Validation 增强接口安全性 严谨性<br />
|
||||||
|
* Excel框架 FastExcel(原Alibaba EasyExcel) 性能优异 扩展性强<br />
|
||||||
|
* 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br />
|
||||||
|
* 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br />
|
||||||
|
* 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br />
|
||||||
|
* 部署方式 Docker 容器编排 一键部署业务集群<br />
|
||||||
|
* 国际化 SpringMessage Spring标准国际化方案<br />
|
||||||
</p>
|
</p>
|
||||||
<div class="hero-actions">
|
<p><b>当前版本:</b> <span>v5.6.0</span></p>
|
||||||
<el-button type="primary" @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')">查看源码</el-button>
|
<p>
|
||||||
<el-button plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog')">
|
<el-tag type="danger">¥免费开源</el-tag>
|
||||||
更新日志
|
</p>
|
||||||
</el-button>
|
<p>
|
||||||
</div>
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')">访问码云</el-button>
|
||||||
</div>
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')">访问GitHub</el-button>
|
||||||
</section>
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog')"
|
||||||
|
>更新日志</el-button
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<div class="content-grid">
|
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||||
<section class="section-card">
|
<h2>RuoYi-Cloud-Plus多租户微服务管理系统</h2>
|
||||||
<div class="section-head">
|
<p>
|
||||||
<div>
|
RuoYi-Cloud-Plus 微服务通用权限管理系统 重写 RuoYi-Cloud 全方位升级(不兼容原框架)
|
||||||
<h2>项目矩阵</h2>
|
<br />
|
||||||
</div>
|
* 前端开发框架 Vue3、TS、Element UI<br />
|
||||||
</div>
|
* 后端开发框架 Spring Boot<br />
|
||||||
<div class="product-list">
|
* 微服务开发框架 Spring Cloud、Spring Cloud Alibaba<br />
|
||||||
<article v-for="product in products" :key="product.name" class="product-card">
|
* 容器框架 Undertow 基于 XNIO 的高性能容器<br />
|
||||||
<div class="product-top">
|
* 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br />
|
||||||
<div>
|
* 关系数据库 MySQL 适配 8.X 最低 5.7<br />
|
||||||
<h3>{{ product.name }}</h3>
|
* 关系数据库 Oracle 适配 11g 12c<br />
|
||||||
<p>{{ product.summary }}</p>
|
* 关系数据库 PostgreSQL 适配 13 14<br />
|
||||||
</div>
|
* 关系数据库 SQLServer 适配 2017 2019<br />
|
||||||
<span class="product-version">{{ product.version }}</span>
|
* 缓存数据库 Redis 适配 6.X 最低 5.X<br />
|
||||||
</div>
|
* 分布式注册中心 Alibaba Nacos 采用2.X 基于GRPC通信高性能<br />
|
||||||
<div class="product-tags">
|
* 分布式配置中心 Alibaba Nacos 采用2.X 基于GRPC通信高性能<br />
|
||||||
<el-tag v-for="tag in product.tags" :key="tag" effect="plain">{{ tag }}</el-tag>
|
* 服务网关 Spring Cloud Gateway 响应式高性能网关<br />
|
||||||
</div>
|
* 负载均衡 Spring Cloud Loadbalancer 负载均衡处理<br />
|
||||||
<div class="product-actions">
|
* RPC远程调用 Apache Dubbo 原生态使用体验、高性能<br />
|
||||||
<el-button type="primary" plain @click="goTarget(product.primaryUrl)">
|
* 分布式限流熔断 Alibaba Sentinel 无侵入、高扩展<br />
|
||||||
{{ product.primaryLabel }}
|
* 分布式事务 Alibaba Seata 无侵入、高扩展 支持 四种模式<br />
|
||||||
</el-button>
|
* 分布式消息队列 Apache Kafka 高性能高速度<br />
|
||||||
<el-button plain @click="goTarget(product.secondaryUrl)">{{ product.secondaryLabel }}</el-button>
|
* 分布式消息队列 Apache RocketMQ 高可用功能多样<br />
|
||||||
</div>
|
* 分布式消息队列 RabbitMQ 支持各种扩展插件功能多样性<br />
|
||||||
</article>
|
* 分布式搜索引擎 ElasticSearch 业界知名<br />
|
||||||
</div>
|
* 分布式链路追踪 Apache SkyWalking 链路追踪、网格分析、度量聚合、可视化<br />
|
||||||
</section>
|
* 分布式日志中心 ELK 业界成熟解决方案<br />
|
||||||
|
* 分布式监控 Prometheus、Grafana 全方位性能监控<br />
|
||||||
<section class="section-card capability-card">
|
* 其余与 Vue 版本一致<br />
|
||||||
<div class="section-head">
|
</p>
|
||||||
<div>
|
<p><b>当前版本:</b> <span>v2.6.0</span></p>
|
||||||
<h2>能力地图</h2>
|
<p>
|
||||||
</div>
|
<el-tag type="danger">¥免费开源</el-tag>
|
||||||
</div>
|
</p>
|
||||||
<div class="capability-groups">
|
<p>
|
||||||
<article v-for="group in capabilityGroups" :key="group.title" class="capability-group">
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://gitee.com/dromara/RuoYi-Cloud-Plus')">访问码云</el-button>
|
||||||
<h3>{{ group.title }}</h3>
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://github.com/dromara/RuoYi-Cloud-Plus')">访问GitHub</el-button>
|
||||||
<ul>
|
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-cloud-plus/changlog')"
|
||||||
<li v-for="item in group.items" :key="item">{{ item }}</li>
|
>更新日志</el-button
|
||||||
</ul>
|
>
|
||||||
</article>
|
</p>
|
||||||
</div>
|
</el-col>
|
||||||
</section>
|
</el-row>
|
||||||
</div>
|
<el-divider />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="Index" lang="ts">
|
<script setup name="Index" lang="ts">
|
||||||
const products = [
|
|
||||||
{
|
|
||||||
name: 'RuoYi-Vue-Plus',
|
|
||||||
version: 'v6.0.0',
|
|
||||||
summary: '面向分布式集群场景的后台管理系统,保持现有业务接口与权限逻辑,适合先完成前端壳升级。',
|
|
||||||
tags: ['Vue 3', 'Element Plus', 'Spring Boot', 'Sa-Token'],
|
|
||||||
primaryLabel: '访问 GitHub',
|
|
||||||
primaryUrl: 'https://github.com/dromara/RuoYi-Vue-Plus',
|
|
||||||
secondaryLabel: '查看更新日志',
|
|
||||||
secondaryUrl: 'https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'RuoYi-Cloud-Plus',
|
|
||||||
version: 'v3.0.0',
|
|
||||||
summary: '微服务通用权限管理系统,适合更复杂的服务治理场景,也可以沿用同样的前端升级思路。',
|
|
||||||
tags: ['Spring Cloud', 'Gateway', 'Nacos', 'Dubbo'],
|
|
||||||
primaryLabel: '访问 GitHub',
|
|
||||||
primaryUrl: 'https://github.com/dromara/RuoYi-Cloud-Plus',
|
|
||||||
secondaryLabel: '查看更新日志',
|
|
||||||
secondaryUrl: 'https://plus-doc.dromara.org/#/ruoyi-cloud-plus/changlog'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const capabilityGroups = [
|
|
||||||
{
|
|
||||||
title: '后端基建',
|
|
||||||
items: ['Spring Boot / Spring Cloud', 'Sa-Token 认证与权限', 'MySQL / Redis', '代码生成器']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '平台能力',
|
|
||||||
items: ['动态菜单与按钮权限', '监控、日志、在线用户', '任务调度与工作流', '文件存储与多云适配']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '前端方向',
|
|
||||||
items: ['UI 卡片化', '主题与布局统一', '通用页面容器规范化', '企业化布局']
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const goTarget = (url: string) => {
|
const goTarget = (url: string) => {
|
||||||
window.open(url, '__blank');
|
window.open(url, '__blank');
|
||||||
};
|
};
|
||||||
@ -110,261 +102,64 @@ const goTarget = (url: string) => {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.home {
|
.home {
|
||||||
display: flex;
|
blockquote {
|
||||||
flex-direction: column;
|
padding: 10px 20px;
|
||||||
gap: 20px;
|
margin: 0 0 20px;
|
||||||
}
|
font-size: 17.5px;
|
||||||
|
border-left: 5px solid #eee;
|
||||||
.hero-panel,
|
|
||||||
.section-card {
|
|
||||||
border-radius: 28px;
|
|
||||||
border: 1px solid var(--app-surface-border);
|
|
||||||
background: var(--app-surface-bg);
|
|
||||||
box-shadow: var(--app-shadow-sm);
|
|
||||||
backdrop-filter: blur(18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-panel {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
|
|
||||||
gap: 18px;
|
|
||||||
padding: 30px;
|
|
||||||
background: radial-gradient(circle at top left, rgba(53, 109, 255, 0.16), transparent 30%), var(--app-surface-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-copy {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 14px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: clamp(30px, 4vw, 46px);
|
|
||||||
line-height: 1.06;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
color: var(--app-text-title);
|
|
||||||
}
|
}
|
||||||
|
hr {
|
||||||
p {
|
margin-top: 20px;
|
||||||
margin: 0;
|
margin-bottom: 20px;
|
||||||
max-width: 760px;
|
border: 0;
|
||||||
color: var(--app-text-muted);
|
border-top: 1px solid #eee;
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
}
|
||||||
}
|
.col-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
.hero-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
width: fit-content;
|
|
||||||
padding: 8px 14px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(53, 109, 255, 0.12);
|
|
||||||
color: var(--app-accent-strong);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-stats {
|
|
||||||
display: grid;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
padding: 18px 20px;
|
|
||||||
border-radius: 22px;
|
|
||||||
background: var(--app-elevated-soft-bg);
|
|
||||||
border: 1px solid var(--app-surface-border);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: var(--app-text-title);
|
|
||||||
font-size: 24px;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: var(--app-text-muted);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card {
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 6px 0 0;
|
|
||||||
color: var(--app-text-title);
|
|
||||||
font-size: 26px;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-kicker {
|
|
||||||
color: var(--app-text-muted);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-list,
|
|
||||||
.capability-groups {
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-card {
|
|
||||||
padding: 22px;
|
|
||||||
border-radius: 24px;
|
|
||||||
background: var(--app-elevated-soft-bg);
|
|
||||||
border: 1px solid var(--app-surface-border);
|
|
||||||
transition:
|
|
||||||
transform 0.25s ease,
|
|
||||||
box-shadow 0.25s ease,
|
|
||||||
border-color 0.25s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--app-shadow-sm);
|
|
||||||
border-color: rgba(53, 109, 255, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-top {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 16px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: var(--app-text-title);
|
|
||||||
font-size: 22px;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--app-text-muted);
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-version {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(53, 109, 255, 0.12);
|
|
||||||
color: var(--app-accent-strong);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-card {
|
|
||||||
background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%), var(--app-surface-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.capability-group {
|
|
||||||
padding: 18px 18px 18px 20px;
|
|
||||||
border-radius: 22px;
|
|
||||||
background: var(--app-elevated-soft-bg);
|
|
||||||
border: 1px solid var(--app-surface-border);
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
color: var(--app-text-title);
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
margin: 0;
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
position: relative;
|
font-size: 13px;
|
||||||
padding-left: 16px;
|
color: #676a6c;
|
||||||
color: var(--app-text-muted);
|
overflow-x: hidden;
|
||||||
line-height: 1.7;
|
|
||||||
|
|
||||||
&::before {
|
ul {
|
||||||
content: '';
|
list-style-type: none;
|
||||||
position: absolute;
|
}
|
||||||
left: 0;
|
|
||||||
top: 10px;
|
h4 {
|
||||||
width: 7px;
|
margin-top: 0px;
|
||||||
height: 7px;
|
}
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--app-accent-strong);
|
h2 {
|
||||||
box-shadow: 0 0 0 5px rgba(53, 109, 255, 0.12);
|
margin-top: 10px;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-log {
|
||||||
|
ol {
|
||||||
|
display: block;
|
||||||
|
list-style-type: decimal;
|
||||||
|
margin-block-start: 1em;
|
||||||
|
margin-block-end: 1em;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: 0;
|
||||||
|
padding-inline-start: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 960px) {
|
|
||||||
.hero-panel,
|
|
||||||
.content-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.hero-panel,
|
|
||||||
.section-card {
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-top {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(html.dark) {
|
|
||||||
.hero-panel {
|
|
||||||
background: radial-gradient(circle at top left, rgba(53, 109, 255, 0.18), transparent 30%), var(--app-surface-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user