lq/spa-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面优化

Browse Source
This commit is contained in:
liqi
2025-05-07 22:23:48 +08:00
parent 814c6d555e
commit f65bcd59f7
4 changed files with 104 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/admin/Projects.vue
View File

@@ -42,79 +42,7 @@ const getCategoryOption = () => {
})
}
const dataSource = ref([
{
id: 1,
title: "电商平台",
category: { id: 1, name: "Web应用", value: "Web应用" },
tags: [
{
id: 1,
name: "Vue",
value: "Vue",
}
],
author: "Admin",
price: 29999,
status: "已发布",
createdAt: "2024-03-20T00:00:00Z",
cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
description: "基于Vue3和Node.js开发的电商平台，提供完整的购物流程，包括注册、登录、购物、支付等功能。",
features: ["响应式设计，支持多端访问", "完整的商品管理系统", "订单处理和物流跟踪"],
technicalStack: ["前端：Vue3 + TypeScript", "后端：Node.js + MongoDB", "部署：Docker"],
screenshots: [
"https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
"https://img2.baidu.com/it/u=1629222614,1358629025&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
],
video_url: "http://d-jy.nailaoyun.cn//storage/video//20250327/2cc1abf9bd69410ce7c69660daf54260.mp4"
},
{
id: 2,
title: "CRM系统",
category: { id: 4, name: "企业系统", value: "企业系统" },
tags: [
{
id: 1,
name: "Vue",
value: "Vue",
}
],
author: "Admin",
price: 19999,
status: "已发布",
createdAt: "2024-03-15T00:00:00Z",
cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
description: "基于React和Express开发的CRM系统，提供客户管理、销售跟踪和数据分析功能。",
features: ["客户信息管理", "销售漏斗跟踪", "数据分析和报表"],
technicalStack: ["前端：React + Redux", "后端：Express + MySQL", "部署：AWS"],
screenshots: [
"https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280"
],
video_url: ""
},
{
id: 3,
title: "数据分析平台",
category: { id: 1, name: "Web应用", value: "Web应用" },
tags: [
{
id: 1,
name: "Vue",
value: "Vue",
}
],
author: "Admin",
price: 24999,
status: "草稿",
createdAt: "2024-03-10T00:00:00Z",
cover: "https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280",
description: "基于Vue3和Python开发的数据分析平台，提供数据可视化和深度分析功能。",
features: ["实时数据仪表盘", "自定义报表生成", "数据导入导出"],
technicalStack: ["前端：Vue3 + ECharts", "后端：Python + Django", "部署：Docker + Kubernetes"],
screenshots: [],
video_url: ""
},
])
const dataSource = ref([])
const getList = () => {
projectListApi({
@@ -177,7 +105,7 @@ const showDetailModal = ref(false)
const currentDetailItem = ref(null)
const handlePreview = (file) => {
previewImage.value = file.url || file.preview
previewImage.value = file.url || file.thumbUrl
previewVisible.value = true
}
@@ -830,7 +758,7 @@ getList();
<div>
<!-- 标签 -->
<div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目标签</label>
<div
class="w-full px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer">
@@ -841,15 +769,15 @@ getList();
mode="multiple"
placeholder="请选择标签"
:fieldNames="{
label: 'name',
value: 'id',
}"
label: 'name',
value: 'id',
}"
/>
</div>
</div>
<!-- 项目功能 -->
<div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">核心功能</label>
<div class="flex flex-wrap gap-2 mb-2">
<span
@@ -890,7 +818,7 @@ getList();
<!-- 项目描述 -->
<div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目描述</label>
<textarea
v-model="currentItem.description"
@@ -1002,6 +930,7 @@ getList();
@change="handleScreenshotsUploadChange"
:show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
multiple
:maxCount="10"
>
<div>
<div
@@ -1140,7 +1069,7 @@ getList();
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<img :src="previewImage" class="max-h-[80vh] max-w-full rounded-lg shadow-xl"/>
<img :src="previewImage" class="w-full max-h-[80vh] max-w-full rounded-lg shadow-xl"/>
</div>
</div>
</div>
@@ -1342,4 +1271,13 @@ getList();
font-weight: 600;
background-color: var(--color-purple-500);
}
</style>
:where(.css-dev-only-do-not-override-1p3hq3p).ant-select-multiple .ant-select-selection-placeholder {
position: absolute;
top: 50%;
inset-inline-start: 11px;
inset-inline-end: 11px;
transform: translateY(-50%);
transition: all 0.3s;
color: var(--color-gray-300);
}
</style>