manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增前端vue

Browse Source
This commit is contained in:
gaoxq
2025-12-16 12:47:58 +08:00
parent 47dbbdd24a
commit a76f116f09
5 changed files with 329 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
web-vue/packages/core/layouts/views/desktop/analysis/components/DynamicInfo.vue
View File

@@ -131,40 +131,44 @@ export default defineComponent({
<style scoped>
/* 列表滚动容器 */
/* 列表滚动容器 - 完全紧贴边缘 */
.dynamic-list-container {
height: 30vh; /* 减去标题栏高度 */
height: 30vh;
overflow-y: auto;
padding: 4px;
padding: 4px 0; /* 仅保留上下内边距，左右为0 */
box-sizing: border-box;
}
/* 网格布局：每行3列 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 固定3列 */
gap: 16px; /* 卡片间距 */
margin: 0; /* 移除负边距，完全紧贴 */
width: 100%;
}
/* 服务器卡片样式 */
/* 网格布局：每行3列 - 紧贴边缘 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* 减小卡片间距，保持紧凑 */
width: 100%;
padding: 0 2px; /* 极小的左右内边距，防止完全贴死 */
box-sizing: border-box;
}
/* 服务器卡片样式 - 更紧凑的内边距 */
.server-card {
background: #fff;
border-radius: 8px;
padding: 16px;
padding: 12px 14px; /* 进一步减小内边距 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
box-sizing: border-box;
height: 100%;
min-height: 200px; /* 卡片最小高度 */
min-height: 180px; /* 减小最小高度，更紧凑 */
}
/* IP信息区域 */
.ip-info {
margin-bottom: 12px;
margin-bottom: 8px; /* 减小底部间距 */
}
/* IP行布局 - 新增 */
/* IP行布局 */
.ip-row {
display: flex;
justify-content: space-between;
@@ -172,7 +176,7 @@ export default defineComponent({
width: 100%;
}
/* 运行状态标签样式 - 新增 */
/* 运行状态标签样式 */
.status-tag {
padding: 2px 8px;
border-radius: 12px;
@@ -196,15 +200,15 @@ export default defineComponent({
/* CPU信息区域 */
.cpu-info {
margin-bottom: 16px;
margin-bottom: 12px; /* 减小底部间距 */
}
.cpu-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
margin-bottom: 6px; /* 减小底部间距 */
font-size: 13px; /* 减小字体 */
color: #333;
}
@@ -214,62 +218,62 @@ export default defineComponent({
}
/* 正常状态 (0-60%) - 蓝色 */
.usage-normal {
color: #1890ff; /* 蚂蚁设计主蓝色 */
color: #1890ff;
}
/* 警告状态 (60-80%) - 黄色 */
.usage-warning {
color: #faad14; /* 标准警告黄色 */
color: #faad14;
}
/* 危险状态 (80%+) - 红色 */
.usage-danger {
color: #f5222d; /* 危险红色 */
color: #f5222d;
}
/* CPU进度条 */
.cpu-progress-bar {
width: 100%;
height: 8px;
height: 6px; /* 减小进度条高度 */
background: #f5f5f5;
border-radius: 4px;
border-radius: 3px;
overflow: hidden;
margin-bottom: 12px;
margin-bottom: 8px; /* 减小底部间距 */
}
.cpu-progress {
height: 100%;
border-radius: 4px;
border-radius: 3px;
transition: width 0.3s ease, background 0.3s ease;
}
/* 正常进度条 (0-60%) - 蓝色渐变 */
.progress-normal {
background: linear-gradient(90deg, #1890ff, #40a9ff); /* 蓝色渐变 */
background: linear-gradient(90deg, #1890ff, #40a9ff);
}
/* 警告进度条 (60-80%) - 黄色渐变 */
.progress-warning {
background: linear-gradient(90deg, #faad14, #ffc53d); /* 黄色渐变 */
background: linear-gradient(90deg, #faad14, #ffc53d);
}
/* 危险进度条 (80%+) - 红色渐变 */
.progress-danger {
background: linear-gradient(90deg, #f5222d, #ff4d4f); /* 红色渐变 */
background: linear-gradient(90deg, #f5222d, #ff4d4f);
}
/* 分隔线 */
.divider {
height: 1px;
background: #f0f0f0;
margin: 12px 0;
margin: 8px 0; /* 减小上下间距 */
}
/* IP区域分隔线 */
.ip-divider {
margin: 8px 0 16px 0;
margin: 6px 0 10px 0; /* 减小上下间距 */
}
/* 基础信息区域 - 优化布局样式 */
/* 基础信息区域 - 更紧凑 */
.base-info {
display: flex;
flex-direction: column;
gap: 8px;
gap: 4px; /* 减小间距 */
}
/* 一行展示多个信息项 */
@@ -277,47 +281,49 @@ export default defineComponent({
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
gap: 6px; /* 减小间距 */
}
.info-item {
display: flex;
align-items: center;
font-size: 13px;
font-size: 12px; /* 减小字体 */
color: #555;
flex: 1; /* 让两个item平分宽度 */
flex: 1;
}
.info-icon {
margin-right: 8px;
font-size: 14px;
margin-right: 6px; /* 减小图标间距 */
font-size: 12px; /* 减小图标大小 */
color: #888;
}
/* 空状态样式 */
/* 空状态样式 - 紧贴边缘 */
.empty-state {
grid-column: 1 / -1; /* 跨所有列 */
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 0;
padding: 30px 0; /* 减小上下内边距 */
color: #999;
margin: 0; /* 移除边距，紧贴 */
width: 100%;
}
/* 自定义滚动条样式 */
.dynamic-list-container::-webkit-scrollbar {
width: 6px;
width: 4px; /* 减小滚动条宽度 */
}
.dynamic-list-container::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
background: transparent; /* 透明轨道，更贴合 */
border-radius: 2px;
}
.dynamic-list-container::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
border-radius: 2px;
}
.dynamic-list-container::-webkit-scrollbar-thumb:hover {
@@ -327,19 +333,31 @@ export default defineComponent({
/* 兼容Firefox */
.dynamic-list-container {
scrollbar-width: thin;
scrollbar-color: #d9d9d9 #f5f5f5;
scrollbar-color: #d9d9d9 transparent;
}
/* 响应式适配 */
/* 响应式适配 - 保持紧贴边缘 */
@media (max-width: 992px) {
.card-grid {
grid-template-columns: repeat(2, 1fr); /* 中等屏幕2列 */
grid-template-columns: repeat(2, 1fr);
gap: 8px; /* 更小的间距 */
padding: 0 2px;
}
}
@media (max-width: 576px) {
.card-grid {
grid-template-columns: 1fr; /* 小屏幕1列 */
grid-template-columns: 1fr;
gap: 6px; /* 最小间距 */
padding: 0 2px;
}
.dynamic-list-container {
padding: 4px 0; /* 保持左右无内边距 */
}
}
</style>
/* 移除Card组件的默认内边距影响 */
:deep(.ant-card-body) {
padding: 8px 4px !important; /* 极小的内边距，让内容紧贴 */
}
</style>

90
web-vue/packages/core/layouts/views/desktop/analysis/components/ProjectCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<Card title="项目信息" v-bind="$attrs">
<div class="scroll-container" style="overflow-x: hidden;">
<div class="scroll-container">
<template v-for="item in listData" :key="item.projectCode || item">
<CardGrid class="!w-full rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100 card-grid-fixed-height">
<div class="grid-content">
@@ -78,26 +78,30 @@ export default defineComponent({
</script>
<style scoped>
/* 外层滚动容器：仅纵向滚动，横向彻底禁止 */
/* 外层滚动容器：紧贴边缘，仅纵向滚动 */
.scroll-container {
padding-right: 12px;
padding: 4px 2px; /* 极小的内边距，紧贴边缘 */
margin: 0; /* 移除所有外边距 */
height: 30vh;
overflow-y: auto; /* 仅纵向滚动 */
overflow-x: hidden !important; /* 强制禁止横向滚动 */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
gap: 10px; /* 减小卡片间距，更紧凑 */
box-sizing: border-box; /* 盒模型：padding不撑宽 */
width: 100%;
}
/* 卡片容器：锁死宽度，避免溢出 */
/* 卡片容器：锁死宽度，紧贴布局 */
.card-grid-fixed-height {
height: 250px;
height: 230px; /* 减小高度，更紧凑 */
display: flex;
flex-direction: column;
box-sizing: border-box; /* 内边距不撑宽 */
width: 100% !important; /* 强制占满网格列宽 */
overflow: hidden; /* 卡片内所有内容禁止溢出 */
padding: 12px 14px !important; /* 调整卡片内边距，更紧凑 */
margin: 0; /* 移除外边距 */
}
.grid-content {
@@ -106,6 +110,7 @@ export default defineComponent({
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding: 0; /* 移除内边距 */
}
/* 名称父容器：彻底锁死宽度，防溢出 */
@@ -115,6 +120,7 @@ export default defineComponent({
align-items: center;
overflow: hidden !important; /* 阻断横向溢出 */
box-sizing: border-box;
margin-bottom: 6px !important; /* 减小底部间距 */
}
/* 项目名称：单行省略核心样式（优先级拉满） */
@@ -123,24 +129,26 @@ export default defineComponent({
white-space: nowrap !important; /* 强制单行 */
overflow: hidden !important; /* 隐藏超出 */
text-overflow: ellipsis !important; /* 省略号 */
max-width: calc(100% - 35px) !important; /* 预留图标+间距（25+8+2），避免重叠 */
max-width: calc(100% - 35px) !important; /* 预留图标+间距，避免重叠 */
display: inline-block !important; /* 确保省略样式生效 */
font-size: 15px !important; /* 微调字体大小 */
}
/* 项目描述区域：更紧凑的样式 */
.project-desc-input-style {
color: #666;
font-size: 0.875rem;
height: 12vh;
max-height: 80px;
line-height: 1.4;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem; /* 减小字体 */
height: 10vh; /* 减小高度 */
max-height: 70px; /* 减小最大高度 */
line-height: 1.3;
padding: 0.4rem 0.6rem; /* 减小内边距 */
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
background-color: #f9fafb;
display: flex;
align-items: center;
overflow: auto;
margin: 0.25rem 0 0.25rem 0;
margin: 0.15rem 0 !important; /* 极小的上下间距 */
box-sizing: border-box;
}
@@ -149,46 +157,74 @@ export default defineComponent({
font-style: italic;
}
/* 统一滚动条样式（仅纵向，横向无） */
/* 项目信息底部区域：更紧凑 */
.bg-blue-50 {
padding: 1.5px 8px !important; /* 减小内边距 */
margin-top: 4px !important; /* 减小顶部间距 */
}
.bg-blue-50 .text-sm {
font-size: 12px !important; /* 减小字体 */
}
.bg-blue-50 .mb-1 {
margin-bottom: 4px !important; /* 减小底部间距 */
}
/* 统一滚动条样式（更窄，更贴合） */
.scroll-container::-webkit-scrollbar {
width: 6px; /* 仅纵向滚动条宽度 */
width: 4px; /* 更窄的滚动条 */
height: 0; /* 横向滚动条高度为0，彻底隐藏 */
}
.scroll-container::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
border-radius: 2px;
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
background: transparent; /* 透明轨道，更贴合 */
border-radius: 2px;
}
.project-desc-input-style::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 4px;
height: 4px;
}
.project-desc-input-style::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
border-radius: 2px;
}
.project-desc-input-style::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
border-radius: 2px;
}
/* 响应式适配 */
/* 移除Card组件的默认内边距影响 */
:deep(.ant-card-body) {
padding: 8px 4px !important; /* 极小的内边距，让内容紧贴 */
}
:deep(.ant-card-grid) {
margin: 0 !important; /* 移除CardGrid默认外边距 */
}
/* 响应式适配 - 保持紧贴边缘 */
@media (max-width: 768px) {
.scroll-container {
grid-template-columns: repeat(1, 1fr);
padding-right: 8px;
padding: 4px 2px; /* 保持极小内边距 */
gap: 8px; /* 更小的间距 */
}
.card-grid-fixed-height {
height: 240px;
height: 220px; /* 更小的卡片高度 */
padding: 10px 12px !important;
}
.project-desc-input-style {
height: 10vh;
height: 9vh;
max-height: 65px;
}
.project-name {
max-width: calc(100% - 30px) !important; /* 移动端适配间距 */
font-size: 14px !important;
}
}
</style>
</style>

187
web-vue/packages/core/layouts/views/desktop/analysis/index.vue
View File

@@ -4,13 +4,27 @@
<WorkbenchHeader class="workbench-header" />
</template>
<div class="workbench-container">
<div class="workbench-main">
<ProjectCard :loading="loading" class="workbench-card" />
<DynamicInfo :loading="loading" class="workbench-card workbench-card--middle" />
</div>
<div class="workbench-sidebar">
<QuickLogin :loading="loading" class="workbench-card" />
<WarningAlert :loading="loading" />
<!-- 常用应用卡片 - 独占一行 -->
<Card title="常用应用" class="common-app-card">
<div class="app-list">
<div class="app-item" v-for="(app, index) in appList" :key="index">
<a-button type="link" size="small" @click="goToMorePage(app)" class="app-btn">
<img :src="app.iconClass" class="app-icon" />
</a-button>
<span class="app-text">{{ app.systemName }}</span>
</div>
</div>
</Card>
<!-- 主内容区域 - 保持原有4个组件布局 -->
<div class="content-wrapper">
<div class="workbench-main">
<ProjectCard :loading="loading" class="workbench-card" />
<DynamicInfo :loading="loading" class="workbench-card workbench-card--middle" />
</div>
<div class="workbench-sidebar">
<QuickLogin :loading="loading" class="workbench-card" />
<WarningAlert :loading="loading" />
</div>
</div>
</div>
</PageWrapper>
@@ -20,16 +34,42 @@
import { ref, onMounted } from 'vue';
import { Card } from 'ant-design-vue';
import { PageWrapper } from '@jeesite/core/components/Page';
import { useRouter } from 'vue-router';
import WorkbenchHeader from './components/WorkbenchHeader.vue';
import ProjectCard from './components/ProjectCard.vue';
import DynamicInfo from './components/DynamicInfo.vue';
import QuickLogin from './components/QuickLogin.vue';
import WarningAlert from './components/WarningAlert.vue';
import { BizQuickLogin, bizQuickLoginListAll } from '@jeesite/biz/api/biz/quickLogin';
const loading = ref(true);
const appList = ref<BizQuickLogin[]>([]);
const router = useRouter();
const goToMorePage = (app : BizQuickLogin) => {
router.push(app.homepageUrl);
};
const fetchAppList = async () => {
try {
const params = {
isEnabled: '1',
systemType: '1'
};
const result = await bizQuickLoginListAll(params);
appList.value = result || [];
} catch (error) {
console.error('获取应用列表失败：', error);
appList.value = [];
}
};
// 优化 loading 逻辑，避免闪屏
onMounted(() => {
const timer = setTimeout(() => {
fetchAppList();
loading.value = false;
clearTimeout(timer);
}, 800);
@@ -42,41 +82,50 @@ onMounted(() => {
}
.workbench-page {
// 替代固定 100vh，兼容移动端动态视口
min-height: var(--vh);
// 确保页面占满视口，同时支持内容溢出滚动
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
// 初始化视口高度（解决移动端地址栏导致的 100vh 不准确）
&::before {
content: '';
display: block;
height: 0;
overflow: hidden;
// 动态计算视口高度
@media (max-width: 768px) {
--vh: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
}
}
// 核心修改：大幅减小左右内边距
.workbench-container {
display: flex;
flex-direction: column;
gap: 16px; // 替代 margin，更易维护
height: calc(100% - 48px); // 预留头部空间
padding: 0 16px;
overflow: auto; // 内容溢出时滚动
gap: 8px;
height: calc(100% - 48px);
padding: 0 4px; // 从8px改为4px，减小左右边距
overflow: auto;
// 大屏适配 - 同步减小大屏边距
@media (min-width: 1024px) {
height: calc(100% - 64px);
gap: 16px; // 同步减小间距
padding: 0 8px; // 从24px改为8px，大幅减小大屏边距
}
}
// 新增内容包装器 - 保持原有4个组件布局
.content-wrapper {
display: flex;
flex-direction: column;
gap: 8px; // 从16px改为8px，减小间距
flex: 1;
// 大屏适配
@media (min-width: 1024px) {
flex-direction: row;
height: calc(100% - 64px);
gap: 24px;
padding: 0 24px;
gap: 16px; // 从24px改为16px
}
}
@@ -84,27 +133,25 @@ onMounted(() => {
flex: 7;
display: flex;
flex-direction: column;
gap: 16px; // 替代 !my-4
gap: 8px; // 从16px改为8px
}
.workbench-sidebar {
flex: 3;
display: flex;
gap: 8px; /* 核心：设置两个组件间距为4px */
width: 100%; /* 确保宽度自适应 */
gap: 8px;
width: 100%;
flex-direction: column;
}
.workbench-card {
width: 100%;
flex-shrink: 0; // 防止卡片被压缩
flex-shrink: 0;
// 中间卡片的间距（替代 !my-4）
&.workbench-card--middle {
margin: 16px 0 !important;
margin: 8px 0 !important; // 从16px改为8px
}
// loading 状态下保持布局稳定
&:has(.ant-skeleton) {
min-height: 200px;
}
@@ -115,10 +162,96 @@ onMounted(() => {
flex-shrink: 0;
}
// 修复 enter-y 可能的布局问题（如果是自定义类）
.enter-y {
display: flex;
flex-direction: column;
height: 100%;
}
// 常用应用Card样式 - 重点优化
.common-app-card {
width: 100%;
margin: 4px 0;
border-radius: 8px;
flex-shrink: 0; // 确保不被压缩
// 移除Card默认的内边距，让内容更紧凑
:deep(.ant-card-body) {
padding: 8px 12px !important; // 减小卡片内部边距
}
// 应用列表容器 - 占满整行
.app-list {
display: flex;
flex-wrap: wrap; // 超出自动换行
gap: 8px; // 从12px改为8px
width: 100%;
padding: 4px 0; // 从8px改为4px
// 移除inline-flex，改用flex确保布局稳定
.app-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 10px; // 从8px 16px改为6px 10px
flex: 0 0 auto; // 固定宽度，不拉伸
// 按钮重置
.app-btn {
padding: 0;
height: auto;
&:hover,
&:focus {
background: transparent;
}
}
// 应用图标样式
.app-icon {
width: 40px;
height: 28px;
object-fit: contain;
border-radius: 8px;
border: 1px solid #b3d9f2;
padding: 2px;
transition: border-color 0.2s ease;
}
&:hover .app-icon {
border-color: #7cb9e8;
}
// 应用文字样式
.app-text {
font-size: 12px;
color: #333;
white-space: nowrap;
font-weight: 500;
text-align: center;
}
}
}
}
// 响应式适配
@media (max-width: 768px) {
.common-app-card .app-list {
gap: 6px;
.app-item {
padding: 4px 8px;
.app-icon {
width: 36px;
height: 24px;
}
.app-text {
font-size: 11px;
}
}
}
}
</style>

68
web-vue/packages/core/layouts/views/desktop/workbench/components/MySchedule.vue
View File

@@ -1,38 +1,40 @@
<template>
<div class="card-container">
<button
class="control-btn left-btn"
@click="scrollCards('left')"
:disabled="!canScrollLeft"
>
<LeftOutlined />
</button>
<div class="card-scroll-wrapper" ref="scrollWrapper">
<div class="card-list" ref="cardList">
<Card
v-for="(item, index) in cardListData"
:key="index"
class="custom-card"
@click="handleCardClick(item.routePath)"
>
<div class="card-img-wrapper">
<img :src="item.image" :alt="item.name" class="card-img" />
</div>
<div class="card-name">{{ item.name }}</div>
</Card>
<Card title="数据看板">
<div class="card-container">
<button
class="control-btn left-btn"
@click="scrollCards('left')"
:disabled="!canScrollLeft"
>
<LeftOutlined />
</button>
<div class="card-scroll-wrapper" ref="scrollWrapper">
<div class="card-list" ref="cardList">
<Card
v-for="(item, index) in cardListData"
:key="index"
class="custom-card"
@click="handleCardClick(item.routePath)"
>
<div class="card-img-wrapper">
<img :src="item.image" :alt="item.name" class="card-img" />
</div>
<div class="card-name">{{ item.name }}</div>
</Card>
</div>
</div>
<!-- 右侧控制按钮 -->
<button
class="control-btn right-btn"
@click="scrollCards('right')"
:disabled="!canScrollRight"
@mousedown="forceUpdateScrollStatus"
>
<RightOutlined />
</button>
</div>
<!-- 右侧控制按钮 -->
<button
class="control-btn right-btn"
@click="scrollCards('right')"
:disabled="!canScrollRight"
@mousedown="forceUpdateScrollStatus"
>
<RightOutlined />
</button>
</div>
</Card>
</template>
<script setup lang="ts">
@@ -350,4 +352,4 @@
justify-content: center;
box-sizing: border-box;
}
</style>
</style>

91
web-vue/packages/core/layouts/views/desktop/workbench/index.vue
View File

@@ -1,18 +1,6 @@
<template>
<div class="web-page-container">
<PageWrapper title="数据看板">
<template #headerContent>
<MySchedule />
</template>
<Card title="常用应用" class="common-app-card">
<div class="app-item" v-for="(app, index) in appList">
<a-button type="link" size="small" @click="goToMorePage(app)">
<img :src="app.iconClass" class="app-icon" />
</a-button>
<span class="app-text">{{ app.systemName }}</span>
</div>
</Card>
</PageWrapper>
<MySchedule />
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="日程管理">
<Calendar />
@@ -26,43 +14,12 @@
<script lang="ts" setup name="AboutPage">
import { h, ref, onMounted } from 'vue';
import { Tag, Tabs, TabPane, Card } from 'ant-design-vue';
import { PageWrapper } from '@jeesite/core/components/Page';
import { useRouter } from 'vue-router';
import { BizQuickLogin, bizQuickLoginListAll } from '@jeesite/biz/api/biz/quickLogin';
import { Tag, Tabs, TabPane } from 'ant-design-vue';
import MySchedule from './components/MySchedule.vue';
import Calendar from './components/calendar/list.vue';
import TableInfo from './components/tableInfo/list.vue';
const appList = ref<BizQuickLogin[]>([]);
const activeKey = ref('1');
const router = useRouter();
const goToMorePage = (app : BizQuickLogin) => {
router.push(app.homepageUrl);
};
const fetchAppList = async () => {
try {
const params = {
isEnabled: '1',
systemType: '1'
}
const result = await bizQuickLoginListAll(params);
appList.value = result || [];
} catch (error) {
console.error('获取应用列表失败：', error);
appList.value = [];
}
};
onMounted(() => {
fetchAppList();
});
</script>
<style scoped lang="less">
@@ -75,46 +32,4 @@
overflow: hidden; // 防止内容溢出
padding: 0 8px;
}
// 常用应用Card样式
.common-app-card {
width: 100%;
margin: 4px 0; // Card上下间距
border-radius: 8px; // 优化圆角，更美观
.app-item {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 12px;
// 应用图标样式
.app-icon {
width: 40px;
height: 28px;
object-fit: contain;
border-radius: 8px;
// 添加淡蓝色边框
border: 1px solid #b3d9f2; // 淡蓝色边框
// 可选：添加内边距让边框和图标之间有间距
padding: 2px;
// 可选：鼠标悬浮效果
transition: border-color 0.2s ease;
}
// 可选：鼠标悬浮时加深边框颜色
&:hover .app-icon {
border-color: #7cb9e8;
}
// 应用文字样式
.app-text {
font-size: 12px;
color: #333; // 文字颜色
white-space: nowrap; // 防止文字换行
font-weight: 500; // 轻微加粗，提升可读性
}
}
}
</style>
</style>