qdintc/intc-workbenches
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qdintc:613d14fac062af8d5e83d2d0dccb085a6b707194
Branches Tags
qdintc:master qdintc:qdintc qdintc:work
..
compare: qdintc:work
Branches Tags
qdintc:qdintc qdintc:work qdintc:master

4 Commits
613d14fac0 ... work

Author SHA1 Message Date
tianyongbao
1088900edc fix:功能优化。 2025-12-12 08:11:00 +08:00
tianyongbao
002dfab973 fix: 网址优化。 2025-12-11 23:52:50 +08:00
tianyongbao
3823ea1178 更新工作台页面标题和描述 2025-12-11 23:41:30 +08:00
tianyongbao
f29ea20fa5 fix: 网址优化完善。 2025-12-11 23:37:22 +08:00
2 changed files with 394 additions and 444 deletions
Expand all files Collapse all files

4
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<meta name="Keywords" content="记账平台，健康档案，茅台预约"/>
<meta name="Description"
content="智聪网络科技"/>
content="智聪工作台"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
@@ -12,7 +12,7 @@
<meta http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="icon" href="/static/favicon.ico" />
<link rel="dns-prefetch" href="http://www.qdintc.com"/>
<title>智聪网络科技</title>
<title>智聪工作台</title>
</head>
<body>
<div id="app"></div>

834
src/views/HomePage.vue
View File

@@ -1,176 +1,31 @@
<template>
<page class="home-page workbench-page">
<!-- 固定标题栏 -->
<div class="workbench-header">
<h1>Qdintc - 统一工作平台</h1>
<h1>海纳云 - 统一工作平台</h1>
</div>
<!-- 主内容区 -->
<div class="workbench-container">
<div class="tools-container">
<!-- 代码管理 -->
<div class="tool-category" v-if="codeTools.length > 0">
<h2 class="category-title">代码管理</h2>
<!-- 工具分类循环渲染 -->
<div
v-for="category in categories"
:key="category.key"
v-show="category.tools.length > 0"
class="tool-category"
>
<h2 class="category-title">{{ category.title }}</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in codeTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div
v-for="tool in category.tools"
:key="tool.name"
class="tool-card"
@click="openTool(tool.url)"
:title="tool.desc + ' - ' + tool.displayUrl"
>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 持续集成 -->
<div class="tool-category" v-if="ciTools.length > 0">
<h2 class="category-title">持续集成</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in ciTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 项目管理 -->
<div class="tool-category" v-if="projectTools.length > 0">
<h2 class="category-title">项目管理</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in projectTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 数据库 -->
<div class="tool-category" v-if="databaseTools.length > 0">
<h2 class="category-title">数据库</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in databaseTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 监控告警 -->
<div class="tool-category" v-if="monitorTools.length > 0">
<h2 class="category-title">监控告警</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in monitorTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 文档知识 -->
<div class="tool-category" v-if="docTools.length > 0">
<h2 class="category-title">文档知识</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in docTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 测试工具 -->
<div class="tool-category" v-if="testTools.length > 0">
<h2 class="category-title">测试工具</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in testTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 安全扫描 -->
<div class="tool-category" v-if="securityTools.length > 0">
<h2 class="category-title">安全扫描</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in securityTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 云平台 -->
<div class="tool-category" v-if="cloudTools.length > 0">
<h2 class="category-title">云平台</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in cloudTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
</div>
<!-- 其他工具 -->
<div class="tool-category" v-if="otherTools.length > 0">
<h2 class="category-title">其他工具</h2>
<div class="category-items">
<div class="tool-card" v-for="tool in otherTools" :key="tool.name" @click="openTool(tool.url)">
<div class="tool-icon" :style="{background: tool.color}">
<span class="icon-text">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<h4 class="tool-name">{{ tool.name }}</h4>
<p class="tool-desc">{{ tool.desc }}</p>
<p class="tool-url">{{ tool.displayUrl }}</p>
</div>
</div>
</div>
@@ -180,231 +35,377 @@
</page>
</template>
<script>
import './less/home-page.less'
import Page from '../components/Page'
export default{
components: {Page},
data () {
return {
import './less/home-page.less'
import Page from '../components/Page'
export default {
name: 'HomePage',
components: { Page },
data() {
return {
// 代码管理工具
codeTools: [
{
name: 'Gitea',
desc: 'Git代码仓库管理',
url: 'http://your-gitea-url.com',
displayUrl: 'gitea.company.com',
icon: 'Git',
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
},
{
name: 'GitLab',
desc: 'DevOps生命周期工具',
url: 'http://your-gitlab-url.com',
displayUrl: 'gitlab.company.com',
icon: 'GL',
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
}
],
// 持续集成工具
ciTools: [
{
name: 'Jenkins',
desc: '持续集成构建平台',
url: 'http://your-jenkins-url.com',
displayUrl: 'jenkins.company.com',
icon: 'JK',
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
},
{
name: 'Harbor',
desc: 'Docker镜像仓库',
url: 'http://your-harbor-url.com',
displayUrl: 'harbor.company.com',
icon: 'HB',
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
}
],
// 项目管理工具
projectTools: [
{
{
name: '禅道',
desc: '项目管理与Bug追踪',
url: 'http://your-zentao-url.com',
displayUrl: 'zentao.company.com',
url: 'http://81.70.89.108:8088',
displayUrl: '81.70.89.108:8088',
icon: '禅',
color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
},
{
name: 'Jira',
desc: '敏捷项目管理工具',
url: 'http://your-jira-url.com',
displayUrl: 'jira.company.com',
icon: 'JR',
color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
name: 'Gitea',
desc: 'Gitea代码仓库管理',
url: 'http://81.70.89.108:81/user/login',
displayUrl: '81.70.89.108:81',
icon: 'Git',
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
},
{
name: 'Gitee',
desc: 'Gitee代码仓库管理',
url: 'https://gitee.com/qdintc',
displayUrl: 'gitee.com/qdintc',
icon: 'GL',
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
},
{
name: 'Minio',
desc: 'Minio对象存储',
url: 'http://81.70.89.108:9009',
displayUrl: '81.70.89.108:9009',
icon: 'MI',
color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
},
{
name: 'Harbor',
desc: 'Docker镜像仓库',
url: 'http://81.70.89.108:8081',
displayUrl: '81.70.89.108:8081',
icon: 'HB',
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
}
],
// 数据库工具
databaseTools: [
{
name: 'Nocos',
desc: 'Nocos配置管理',
url: 'http://117.72.197.29:8088/',
displayUrl: '117.72.197.29:8088',
icon: 'NC',
color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
},
{
name: 'Jenkins',
desc: '持续集成构建平台',
url: 'http://81.70.89.108:8080/login',
displayUrl: '81.70.89.108:8080',
icon: 'JK',
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
},
{
name: 'Portainer',
desc: 'Docker容器管理',
url: 'https://8.140.22.151:9443',
displayUrl: '8.140.22.151:9443',
icon: 'PT',
color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
},
{
name: 'MySQL',
desc: 'MySQL数据库管理',
url: 'http://your-mysql-url.com',
displayUrl: 'mysql.company.com',
icon: 'SQL',
name: 'NodeRed',
desc: 'NodeRed物联数据接入',
url: 'http://8.140.22.151:1880/',
displayUrl: '8.140.22.151:1880',
icon: 'NR',
color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)'
},
{
name: 'Redis',
desc: '缓存数据库管理',
url: 'http://your-redis-url.com',
displayUrl: 'redis.company.com',
icon: 'RD',
name: 'EMQX',
desc: 'EMQX消息队列',
url: 'http://8.140.22.151:28083',
displayUrl: '8.140.22.151:28083',
icon: 'MQ',
color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
}
],
// 监控告警工具
//
monitorTools: [
{
name: 'Grafana',
desc: '监控数据可视化',
url: 'http://your-grafana-url.com',
displayUrl: 'grafana.company.com',
icon: 'GF',
color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
},
{
name: 'Prometheus',
desc: '系统监控告警平台',
url: 'http://your-prometheus-url.com',
displayUrl: 'prometheus.company.com',
icon: 'PM',
color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
}
],
// 文档知识工具
docTools: [
{
name: 'Confluence',
desc: '团队协作知识库',
url: 'http://your-confluence-url.com',
displayUrl: 'wiki.company.com',
icon: 'CF',
color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
name: '智聪官网',
desc: '智聪官网',
url: 'https://www.qdintc.com',
displayUrl: 'www.qdintc.com',
icon: '官',
color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
},
{
name: 'GitBook',
desc: '文档编写平台',
url: 'http://your-gitbook-url.com',
displayUrl: 'docs.company.com',
icon: 'GB',
color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
}
],
// 测试工具
testTools: [
name: '智聪记账Web',
desc: '记账管理平台Web',
url: 'http://152.136.151.187:8080/intc/#/login',
displayUrl: '152.136.151.187:8080',
icon: 'A',
color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
},
{
name: 'Selenium',
desc: '自动化测试平台',
url: 'http://your-selenium-url.com',
displayUrl: 'test.company.com',
icon: 'SE',
name: '智聪记账H5',
desc: '记账管理平台H5',
url: 'http://152.136.151.187:82/#/',
displayUrl: '152.136.151.187:82',
icon: 'A5',
color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
},
{
name: '智聪健康Web',
desc: '健康档案平台Web',
url: 'http://152.136.151.187:81/hrms/login',
displayUrl: '152.136.151.187:81',
icon: 'H',
color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)'
},
{
name: 'Postman',
desc: 'API测试工具',
url: 'http://your-postman-url.com',
displayUrl: 'api-test.company.com',
icon: 'PM',
name: '智聪健康H5',
desc: '健康档案平台H5',
url: 'http://152.136.151.187:89/#/',
displayUrl: '152.136.151.187:89',
icon: 'H5',
color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)'
},
{
name: '智聪物联网',
desc: '智聪物联网平台',
url: 'http://152.136.151.187:8086/login',
displayUrl: '152.136.151.187:8086',
icon: '物联',
color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
},
{
name: '智聪物联网大屏',
desc: '智聪物联网大屏',
url: 'http://152.136.151.187:8088/login',
displayUrl: '152.136.151.187:8088',
icon: '大屏',
color: 'linear-gradient(135deg, #ff6b95 0%, #ffa44f 100%)'
},
// {
// name: '智聪茅台Web',
// desc: 'Imaotai预约平台Web',
// url: 'http://152.136.151.187:8081/imaotai/login',
// displayUrl: '152.136.151.187:8081',
// icon: '茅',
// color: 'linear-gradient(135deg, #fc6c85 0%, #f857a6 100%)'
// },
// {
// name: '智聪茅台H5',
// desc: 'Imaotai预约平台h5',
// url: 'http://152.136.151.187:90/#/',
// displayUrl: '152.136.151.187:90',
// icon: '茅5',
// color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
// }
],
// 测试工具
testTools: [
{
name: '豆包',
desc: '豆包AI工具',
url: 'https://www.doubao.com/chat/',
displayUrl: 'www.doubao.com',
icon: '豆包',
color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
} ,
{
name: '微信公众号',
desc: '微信公众号',
url: 'https://mp.weixin.qq.com/cgi-bin/loginpage',
displayUrl: 'mp.weixin.qq.com',
icon: '微信',
color: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)'
} ,
{
name: '腾讯云',
desc: '腾讯云',
url: 'https://cloud.tencent.com',
displayUrl: 'cloud.tencent.com',
icon: '腾讯',
color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
},
{
name: '阿里云',
desc: '阿里云',
url: 'https://www.aliyun.com',
displayUrl: 'www.aliyun.com',
icon: '阿里',
color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)'
}
,
{
name: '京东云',
desc: '京东云',
url: 'https://www.jdcloud.com',
displayUrl: 'www.jdcloud.com',
icon: '京东',
color: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)'
}
],
// 安全扫描工具
securityTools: [
{
name: 'SonarQube',
desc: '代码质量检测平台',
url: 'http://your-sonar-url.com',
displayUrl: 'sonar.company.com',
icon: 'SQ',
color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
},
{
name: 'Trivy',
desc: '容器安全扫描',
url: 'http://your-trivy-url.com',
displayUrl: 'security.company.com',
icon: 'TV',
color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
}
],
// 云平台工具
cloudTools: [
{
name: 'Kubernetes',
desc: '容器编排平台',
url: 'http://your-k8s-url.com',
displayUrl: 'k8s.company.com',
icon: 'K8s',
color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
},
{
name: 'Rancher',
desc: 'K8s集群管理',
url: 'http://your-rancher-url.com',
displayUrl: 'rancher.company.com',
icon: 'RC',
color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
}
],
// 其他工具
otherTools: [
{
name: 'Nexus',
desc: 'Maven私服仓库',
url: 'http://your-nexus-url.com',
displayUrl: 'nexus.company.com',
icon: 'NX',
name: '随机密码',
desc: '随机密码生成器',
url: 'https://suijimimashengcheng.bmcx.com',
displayUrl: 'bmcx.com',
icon: '密',
color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)'
},
{
name: 'Portainer',
desc: 'Docker容器管理',
url: 'http://your-portainer-url.com',
displayUrl: 'portainer.company.com',
icon: 'PT',
color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
name: '翻墙工具',
desc: 'CordCloud',
url: 'https://cordc.xyz/auth/login',
displayUrl: 'cordc.xyz',
icon: 'COR',
color: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)'
},
{
name: '图片压缩',
desc: '图片压缩工具',
url: 'https://squoosh.app',
displayUrl: 'squoosh.app',
icon: 'SQ',
color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
},
{
name: '2925邮箱',
desc: '无限邮',
url: 'https://www.2925.com/login/',
displayUrl: 'www.2925.com',
icon: '邮',
color: 'linear-gradient(135deg, #ff9a56 0%, #ff5e62 100%)'
},
{
name: '青岛人社',
desc: '青岛市人力资源保障局',
url: 'https://hrss.qingdao.gov.cn',
displayUrl: 'hrss.qingdao.gov.cn',
icon: '人社',
color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)'
},
{
name: '青岛公积金',
desc: '青岛市住房公积金中心',
url: 'https://www.qdgjj.com/',
displayUrl: 'www.qdgjj.com',
icon: '住房',
color: 'linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%)'
},
{
name: '软著登记系统',
desc: '中国版权保护中心',
url: 'https://register.ccopyright.com.cn/login.html',
displayUrl: 'ccopyright.com.cn',
icon: '软著',
color: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)'
},
{
name: '开源软件镜像站',
desc: '清华大学开源软件镜像站',
url: 'https://mirrors.tuna.tsinghua.edu.cn',
displayUrl: 'tsinghua.edu.cn',
icon: '镜像',
color: 'linear-gradient(135deg, #96e6a1 0%, #d4fc79 100%)'
},
{
name: 'IP地址查询',
desc: 'iP地址归属地查询',
url: 'https://www.ip138.com/',
displayUrl: 'www.ip138.com',
icon: 'IP',
color: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)'
}
]
],
// 空分类占位
ciTools: [],
projectTools: [],
monitorTools: [],
securityTools: [],
cloudTools: []
}
},
created() {
computed: {
// 分类配置（统一管理）
categories: function() {
return [
{ key: 'doc', title: '智聪科技', tools: this.docTools },
{ key: 'code', title: '管理工具', tools: this.codeTools },
{ key: 'database', title: '开发工具', tools: this.databaseTools },
{ key: 'test', title: '第三方服务', tools: this.testTools },
{ key: 'other', title: '其他工具', tools: this.otherTools }
]
}
},
created() {
this.init()
},
methods: {
openTool: function (url) {
if(url && url !== 'http://your-gitea-url.com') {
window.open(url, '_blank')
} else {
alert('请先配置该工具的访问地址')
}
methods: {
/**
* 打开工具链接
* @param {string} url - 工具访问地址
*/
openTool: function(url) {
if (url && url !== 'http://your-gitea-url.com') {
window.open(url, '_blank')
} else {
alert('请先配置该工具的访问地址')
}
}
};
}
}
</script>
<style scoped lang="less">
// 颜色变量
@primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@white-color: #fff;
@text-primary: #333;
@text-secondary: #666;
@text-tertiary: #999;
// 尺寸变量
@header-height: 50px;
@card-width: 100px;
@border-radius-md: 6px;
// 间距变量
@spacing-sm: 6px;
@spacing-md: 12px;
@spacing-lg: 16px;
// 页面主体
.workbench-page {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0;
padding-top: 76px;
background: @primary-gradient;
padding: @header-height 0 0;
}
.workbench-container {
max-width: 1920px;
margin: 0 auto;
padding: 30px 20px;
padding: 10px @spacing-md;
}
.workbench-header {
@@ -414,196 +415,145 @@
right: 0;
width: 100%;
text-align: center;
padding: 20px 0;
background: rgba(255,255,255,0.08);
padding: 8px 0;
background: @primary-gradient;
z-index: 1000;
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255,255,255,0.15);
h1 {
font-size: 32px;
font-weight: 700;
color: #fff;
font-size: 20px;
font-weight: 600;
color: @white-color;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
p {
font-size: 16px;
color: rgba(255,255,255,0.85);
margin: 8px 0 0 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
}
.tools-container {
display: flex;
flex-wrap: wrap;
gap: 25px 20px;
gap: 8px @spacing-md;
align-items: flex-start;
}
.tool-category {
flex: 0 1 auto;
.category-title {
font-size: 20px;
font-size: 14px;
font-weight: 600;
color: #fff;
margin-bottom: 15px;
padding-left: 12px;
border-left: 4px solid rgba(255,255,255,0.8);
line-height: 1.5;
color: @white-color;
margin-bottom: 4px;
padding-left: 8px;
border-left: 3px solid rgba(255, 255, 255, 0.8);
line-height: 1.3;
}
.category-items {
display: flex;
flex-wrap: wrap;
gap: 15px;
gap: @spacing-sm;
}
}
.tool-card {
display: flex;
align-items: center;
padding: 14px 18px;
background: rgba(255,255,255,0.95);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 260px;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
background: #fff;
}
}
.tool-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 16px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
.icon-text {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
padding: 8px 6px;
background: rgba(255, 255, 255, 0.95);
border-radius: @border-radius-md;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
width: @card-width;
min-height: 36px;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: @white-color;
}
}
.tool-info {
flex: 1;
min-width: 0;
text-align: center;
}
.tool-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 4px 0;
}
.tool-desc {
font-size: 13px;
color: #666;
margin: 0 0 4px 0;
}
.tool-url {
font-size: 12px;
color: #999;
font-family: 'Consolas', 'Monaco', monospace;
font-weight: 600;
color: @text-primary;
margin: 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 响应式布局 - 平板
@media (max-width: 1024px) {
.tools-container {
gap: 25px 30px;
gap: 8px @spacing-md;
}
.tool-category {
flex-direction: column;
width: 100%;
.category-title {
width: auto;
text-align: left;
padding: 10px 12px;
padding: 6px 8px;
font-size: 13px;
}
.category-items {
width: 100%;
}
}
.tool-card {
width: calc(50% - 8px);
width: calc(33.333% - 6px);
}
.workbench-header h1 {
font-size: 36px;
font-size: 18px;
}
}
// 响应式布局 - 手机
@media (max-width: 600px) {
.workbench-container {
padding: 30px 15px;
padding: @spacing-md @spacing-sm;
}
.workbench-header {
margin-bottom: 30px;
margin-bottom: @spacing-sm;
h1 {
font-size: 28px;
}
p {
font-size: 14px;
font-size: 16px;
}
}
.tools-container {
gap: 20px;
gap: @spacing-sm;
}
.tool-category {
.category-title {
font-size: 16px;
padding: 8px 10px;
font-size: 12px;
padding: 4px 6px;
}
}
.tool-card {
padding: 14px;
width: 100%;
padding: 6px 8px;
width: calc(50% - 4px);
}
.tool-icon {
width: 50px;
height: 50px;
margin-right: 12px;
.icon-text {
font-size: 20px;
}
}
.tool-name {
font-size: 16px;
}
.tool-desc {
font-size: 12px;
}
}