|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- 顶部logo+标题 -->
|
|
|
<div class="header">
|
|
|
<div class="logo">
|
|
|
- <img src="https://picsum.photos/50/30" alt="logo" />
|
|
|
+ <img src="@/assets/images/log.png" alt="logo" />
|
|
|
<span>北京金水信息技术发展有限公司</span>
|
|
|
</div>
|
|
|
<div class="title">产品案例</div>
|
|
|
@@ -15,78 +15,53 @@
|
|
|
<div class="category-sidebar">
|
|
|
<!-- 大分类切换 -->
|
|
|
<div class="big-category">
|
|
|
- <el-select
|
|
|
- v-model="activeBigCategoryId"
|
|
|
- placeholder="选择大分类"
|
|
|
- @change="handleBigCategoryChange"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="category in categories"
|
|
|
- :key="category.parent_id"
|
|
|
- :label="category.name"
|
|
|
- :value="category.parent_id"
|
|
|
- />
|
|
|
+ <el-select v-model="activeBigCategoryId" placeholder="选择大分类" @change="handleBigCategoryChange">
|
|
|
+ <el-option v-for="category in categories" :key="category.parent_id" :label="category.name"
|
|
|
+ :value="category.parent_id" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<!-- 小分类列表 -->
|
|
|
<div class="small-category">
|
|
|
- <el-select
|
|
|
- v-model="activeSmallCategoryId"
|
|
|
- placeholder="选择小分类"
|
|
|
- @change="getProjectsByCategory"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- label="全部"
|
|
|
- value="all"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- v-for="child in currentSmallCategories"
|
|
|
- :key="child.id"
|
|
|
- :label="child.name"
|
|
|
- :value="child.id"
|
|
|
- />
|
|
|
+ <el-select v-model="activeSmallCategoryId" placeholder="选择小分类" @change="getProjectsByCategory">
|
|
|
+ <el-option label="全部" value="all" />
|
|
|
+ <el-option v-for="child in currentSmallCategories" :key="child.id" :label="child.name" :value="child.id" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<!-- 上传项目按钮 -->
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="$router.push('/upload-project')"
|
|
|
- style="margin-top: 20px; width: 100%;"
|
|
|
- >
|
|
|
+ <el-button type="primary" @click="$router.push('/upload-project')" style="margin-top: 20px; width: 100%;">
|
|
|
上传项目
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
-<!-- 中间项目列表 -->
|
|
|
-<div class="project-list">
|
|
|
- <div
|
|
|
- class="project-card"
|
|
|
- v-for="(project, index) in projectList"
|
|
|
- :key="index"
|
|
|
- @click="selectProject(project)"
|
|
|
- @dblclick="$router.push(`/project/${project.id}`)"
|
|
|
- >
|
|
|
- <!-- 项目封面 -->
|
|
|
- <div v-if="project.cover" class="project-cover">
|
|
|
- <el-image :src="`${baseURL}${project.cover}`" fit="cover" style="width: 100%; height: 150px;" />
|
|
|
- <!-- 新增:删除项目按钮(悬浮显示) -->
|
|
|
- <div class="delete-project-btn" @click.stop="handleDeleteProject(project.id, project.name)">
|
|
|
- <el-icon color="#ff4d4f"><Delete /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="project-cover empty-cover">
|
|
|
- <el-icon class="cover-icon"><picture-filled /></el-icon>
|
|
|
- <!-- 新增:删除项目按钮 -->
|
|
|
- <div class="delete-project-btn" @click.stop="handleDeleteProject(project.id, project.name)">
|
|
|
- <el-icon color="#ff4d4f"><Delete /></el-icon>
|
|
|
+ <!-- 中间项目列表 -->
|
|
|
+ <div class="project-list">
|
|
|
+ <div class="project-card" v-for="(project, index) in projectList" :key="index" @click="selectProject(project)"
|
|
|
+ @dblclick="$router.push(`/project/${project.id}`)">
|
|
|
+ <!-- 项目封面 -->
|
|
|
+ <div v-if="project.cover" class="project-cover">
|
|
|
+ <el-image :src="`${baseURL}${project.cover}`" fit="cover" style="width: 100%; height: 150px;" />
|
|
|
+ <!-- 新增:删除项目按钮(悬浮显示) -->
|
|
|
+ <div class="delete-project-btn" @click.stop="handleDeleteProject(project.id, project.name)">
|
|
|
+ <el-icon color="#ff4d4f">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="project-cover empty-cover">
|
|
|
+ <el-icon class="cover-icon"><picture-filled /></el-icon>
|
|
|
+ <!-- 新增:删除项目按钮 -->
|
|
|
+ <div class="delete-project-btn" @click.stop="handleDeleteProject(project.id, project.name)">
|
|
|
+ <el-icon color="#ff4d4f">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 项目标签 -->
|
|
|
+ <div class="project-tag" v-if="project.tag">{{ project.tag }}</div>
|
|
|
+ <!-- 项目名称 -->
|
|
|
+ <div class="project-name">{{ project.name }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 项目标签 -->
|
|
|
- <div class="project-tag" v-if="project.tag">{{ project.tag }}</div>
|
|
|
- <!-- 项目名称 -->
|
|
|
- <div class="project-name">{{ project.name }}</div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
|
|
|
<!-- 右侧项目简介 -->
|
|
|
<div class="project-summary" v-if="activeProject">
|
|
|
@@ -186,7 +161,7 @@ const getProjectsByCategory = async () => {
|
|
|
params.big_category_id = activeBigCategoryId.value;
|
|
|
|
|
|
const res = await axios.get(`${baseURL}/api/projects`, { params });
|
|
|
-
|
|
|
+
|
|
|
// 修复核心:用for...of循环替代map(支持async/await)
|
|
|
const projectsWithTag = [];
|
|
|
for (const project of res.data.data) {
|
|
|
@@ -240,36 +215,66 @@ onMounted(() => {
|
|
|
background-color: #f5f7fa;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
+
|
|
|
.header {
|
|
|
+ width: 100%;
|
|
|
+ /* 宽度铺满 */
|
|
|
+ height: 50px;
|
|
|
+ /* 头部高度(可自定义) */
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15px 0;
|
|
|
- border-bottom: 1px solid #e6e6e6;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ padding: 5px 0;
|
|
|
+ /* border-bottom: 1px solid #e6e6e6; */
|
|
|
+ position: relative;
|
|
|
+ /* 为title绝对定位做基准 */
|
|
|
}
|
|
|
+
|
|
|
.logo {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 15px;
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: #0e48ad;
|
|
|
}
|
|
|
+
|
|
|
.logo img {
|
|
|
width: 50px;
|
|
|
height: 30px;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
+ position: absolute;
|
|
|
+ /* 脱离文档流,不影响logo布局 */
|
|
|
+ left: 50%;
|
|
|
+ /* 水平居中第一步:左移50% */
|
|
|
+ transform: translateX(-50%);
|
|
|
+ /* 水平居中第二步:左移自身50% */
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
.main-content {
|
|
|
+ /* 1. 布局基础:Flex实现左中右排列 */
|
|
|
display: flex;
|
|
|
- gap: 20px;
|
|
|
- margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ min-height: calc(100vh - 50px); /* 高度=视口高度-头部高度(假设头部60px) */
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ gap: 20px; /* 三部分之间的间距 */
|
|
|
+
|
|
|
+ /* 2. 背景图核心配置(按需调整) */
|
|
|
+ background: url('@/assets/images/bg.png') no-repeat center center fixed ;
|
|
|
+ background-size: cover ; /* 背景图覆盖整个主体区域,无空白 */
|
|
|
+ /* 若想背景图不平铺且保留原始比例:background-size: auto !important; */
|
|
|
+
|
|
|
+ /* 可选:背景图叠加半透明蒙版,提升文字可读性 */
|
|
|
+ position: relative;
|
|
|
}
|
|
|
+
|
|
|
.category-sidebar {
|
|
|
width: 200px;
|
|
|
background: #fff;
|
|
|
@@ -277,15 +282,19 @@ onMounted(() => {
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
-.big-category, .small-category {
|
|
|
+
|
|
|
+.big-category,
|
|
|
+.small-category {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
+
|
|
|
.project-list {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
+
|
|
|
.project-card {
|
|
|
width: 280px;
|
|
|
height: 220px;
|
|
|
@@ -296,15 +305,18 @@ onMounted(() => {
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
+
|
|
|
.project-card:hover {
|
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
+
|
|
|
.project-cover {
|
|
|
position: relative;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.empty-cover {
|
|
|
width: 100%;
|
|
|
height: 150px;
|
|
|
@@ -313,10 +325,12 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
|
background: #f5f7fa;
|
|
|
}
|
|
|
+
|
|
|
.cover-icon {
|
|
|
font-size: 40px;
|
|
|
color: #ccc;
|
|
|
}
|
|
|
+
|
|
|
.project-tag {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
@@ -327,6 +341,7 @@ onMounted(() => {
|
|
|
padding: 2px 8px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+
|
|
|
.project-name {
|
|
|
margin-top: 10px;
|
|
|
font-size: 14px;
|
|
|
@@ -336,6 +351,7 @@ onMounted(() => {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
+
|
|
|
.project-summary {
|
|
|
width: 300px;
|
|
|
background: #fff;
|
|
|
@@ -343,23 +359,27 @@ onMounted(() => {
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
+
|
|
|
.summary-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
+
|
|
|
.summary-subtitle {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
color: #666;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
.summary-content {
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
+
|
|
|
/* 删除项目按钮样式 */
|
|
|
.delete-project-btn {
|
|
|
position: absolute;
|
|
|
@@ -376,9 +396,11 @@ onMounted(() => {
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s;
|
|
|
}
|
|
|
+
|
|
|
.project-card:hover .delete-project-btn {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
+
|
|
|
.delete-project-btn:hover {
|
|
|
background: #fff;
|
|
|
}
|