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

154
src/views/admin/common/ProjectDetails.vue
View File

@@ -195,6 +195,35 @@ const stopPropagation = (e) => {
</span>
</div>
<!-- 演示视频 -->
<div v-if="project.video_url" class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Play class="w-5 h-5 mr-2 text-rose-500"/>
演示视频
</h2>
<div
class="relative rounded-xl overflow-hidden cursor-pointer h-64 bg-gray-700"
@click="handleVideoPreview" :style="{
backgroundImage: `url('${project.cover}')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-rose-600 flex items-center justify-center shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white ml-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
</svg>
</div>
</div>
<div class="absolute bottom-4 left-4 right-4 text-white p-2 rounded-lg">
<p class="text-sm font-medium">点击播放项目演示视频</p>
</div>
</div>
</div>
<!-- 项目描述 -->
<div class="space-y-3">
<h2 class="text-xl font-semibold text-white flex items-center">
@@ -206,55 +235,6 @@ const stopPropagation = (e) => {
</p>
</div>
<!-- 技术栈 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Code class="w-5 h-5 mr-2 text-rose-500" />
技术栈
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Monitor class="w-4 h-4 mr-1.5 text-rose-500" />
前端技术
</h3>
<p class="text-gray-200">{{ project.front }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Server class="w-4 h-4 mr-1.5 text-rose-500" />
后端技术
</h3>
<p class="text-gray-200">{{ project.service }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Database class="w-4 h-4 mr-1.5 text-rose-500" />
部署架构
</h3>
<p class="text-gray-200">{{ project.deploy }}</p>
</div>
</div>
</div>
<!-- 核心功能 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Award class="w-5 h-5 mr-2 text-rose-500" />
核心功能
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div
v-for="(feature, index) in project.features"
:key="index"
class="flex items-start"
>
<CheckCircle class="w-5 h-5 text-rose-500 mr-2 flex-shrink-0 mt-0.5" />
<span class="text-gray-300">{{ feature.name }}</span>
</div>
</div>
</div>
<!-- 项目截图 -->
<div v-if="project.screenshots && project.screenshots.length > 0" class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
@@ -285,30 +265,6 @@ const stopPropagation = (e) => {
</div>
</div>
<!-- 演示视频 -->
<div v-if="project.video_url" class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Play class="w-5 h-5 mr-2 text-rose-500"/>
演示视频
</h2>
<div
class="relative rounded-xl overflow-hidden cursor-pointer h-64 bg-gray-700"
@click="handleVideoPreview"
>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-rose-600 flex items-center justify-center shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white ml-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
</svg>
</div>
</div>
<div class="absolute bottom-4 left-4 right-4 text-white bg-black/50 p-2 rounded-lg">
<p class="text-sm font-medium">点击播放项目演示视频</p>
</div>
</div>
</div>
</div>
<!-- 右侧信息 -->
@@ -378,6 +334,56 @@ const stopPropagation = (e) => {
</div>
</div>
</div>
<!-- 技术栈 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Code class="w-5 h-5 mr-2 text-rose-500" />
技术栈
</h2>
<div class="grid grid-cols-1 md:grid-cols-1 gap-4">
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Monitor class="w-4 h-4 mr-1.5 text-rose-500" />
前端技术
</h3>
<p class="text-gray-200 break-words">{{ project.front }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Server class="w-4 h-4 mr-1.5 text-rose-500" />
后端技术
</h3>
<p class="text-gray-200 break-words">{{ project.service }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Database class="w-4 h-4 mr-1.5 text-rose-500" />
部署架构
</h3>
<p class="text-gray-200 break-words">{{ project.deploy }}</p>
</div>
</div>
</div>
<!-- 核心功能 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Award class="w-5 h-5 mr-2 text-rose-500" />
核心功能
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div
v-for="(feature, index) in project.features"
:key="index"
class="flex items-start"
>
<CheckCircle class="w-5 h-5 text-rose-500 mr-2 flex-shrink-0 mt-0.5" />
<span class="text-gray-300">{{ feature.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -450,4 +456,4 @@ const stopPropagation = (e) => {
.animate-fadeIn {
animation: fadeIn 0.3s ease-out;
}
</style>
</style>