浏览代码

大标题修改

WQQ 2 周之前
父节点
当前提交
37ca87ac84

+ 3 - 0
SalesPlatform/sales-server/backend_log.txt

@@ -0,0 +1,3 @@
+启动时间:周三 2025/12/03  9:56:49.20 
+'pm2' is not recognized as an internal or external command,
+operable program or batch file.

+ 1 - 1
SalesPlatform/sales-show-platform/src/App.vue

@@ -19,7 +19,7 @@ html, body {
   overflow-x: hidden !important; /* 禁止横向滚动 */
 
   /* 1920*1080背景图最优配置:原生尺寸 + 居中 + 不平铺 + 固定 */
-  background: url('@/assets/images/bg.png') no-repeat center center fixed !important;
+  background: url('@/assets/images/bg1.png') no-repeat center center fixed !important;
   /* 关键:按屏幕尺寸适配,优先用原生尺寸,超出则裁剪(无空白) */
   background-size: cover !important; 
   /* 若想强制显示图片原生尺寸(仅当屏幕分辨率≥1920*1080时用):

二进制
SalesPlatform/sales-show-platform/src/assets/images/bg.png


二进制
SalesPlatform/sales-show-platform/src/assets/images/bg1.png


二进制
SalesPlatform/sales-show-platform/src/assets/images/log.png


+ 92 - 70
SalesPlatform/sales-show-platform/src/views/HomePage.vue

@@ -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;
 }