feat：门户网站-核心价值与作用新增详情页面

portal-ui/src/api/portal/home.js

@@ -30,3 +30,13 @@ export function getNewsList(params) {
     }
   })
 }
+
+export function getValueDetail(id) {
+  return request({
+    url: '/portal/home/value/' + id,
+    method: 'get',
+    headers: {
+      isToken: false
+    }
+  })
+}

portal-ui/src/router/index.js

@@ -70,6 +70,12 @@ export const constantRoutes = [
         name: 'PortalNotice',
         component: () => import('@/views/portal/Notice'),
         meta: { title: '通知公告' }
+      },
+      {
+        path: 'value/detail',
+        name: 'PortalValueDetail',
+        component: () => import('@/views/portal/ValueDetail'),
+        meta: { title: '核心价值与作用 - 详情' }
       }
     ]
   },

portal-ui/src/views/portal/Home.vue

@@ -60,6 +60,7 @@
           v-for="(item, index) in valueList"
           :key="index"
           :class="'card-' + (index + 1)"
+          @click="goToValueDetail(item.valueId)"
         >
           <div
             class="card-bg"
@@ -150,6 +151,14 @@ export default {
           this.loading = false;
         });
     },
+    goToValueDetail(valueId) {
+      if (valueId) {
+        this.$router.push({
+          path: '/portal/value/detail',
+          query: { id: valueId }
+        });
+      }
+    },
   },
 };
 </script>

portal-ui/src/views/portal/ValueDetail.vue

+<template>
+  <div class="value-detail">
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item><a href="/portal">首页</a></el-breadcrumb-item>
+        <el-breadcrumb-item>核心价值与作用</el-breadcrumb-item>
+        <el-breadcrumb-item>详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <!-- 白色背景内容区域 -->
+    <div class="content-container" v-loading="loading">
+      <!-- 标题 -->
+      <div class="value-title">
+        <h1>{{ valueDetail.title }}</h1>
+      </div>
+
+      <!-- 摘要 -->
+      <div class="value-summary" v-if="valueDetail.summary">
+        <p>{{ valueDetail.summary }}</p>
+      </div>
+
+      <!-- 详情内容 -->
+      <div class="value-content" v-html="valueDetail.content"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getValueDetail } from '@/api/portal/home'
+
+export default {
+  name: 'ValueDetail',
+  data() {
+    return {
+      loading: true,
+      valueDetail: {
+        title: '',
+        summary: '',
+        content: ''
+      }
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    async getDetail() {
+      this.loading = true
+      try {
+        const { id } = this.$route.query
+        if (!id) {
+          this.$message.error('缺少价值ID')
+          this.loading = false
+          return
+        }
+        
+        console.log('获取价值详情，ID:', id)
+        
+        const response = await getValueDetail(id)
+        console.log('API响应:', response)
+        
+        if (response.code === 200 && response.data) {
+          this.valueDetail = response.data
+          console.log('价值详情数据:', this.valueDetail)
+        } else {
+          console.error('API响应格式错误:', response)
+          this.$message.error('获取价值详情失败：响应格式错误')
+        }
+      } catch (error) {
+        console.error('获取价值详情失败:', error)
+        this.$message.error('获取价值详情失败：网络错误')
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.value-detail {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 40px 0;
+}
+
+/* 面包屑导航 */
+.breadcrumb {
+  max-width: 1390px;
+  margin: 0 auto 30px;
+  padding: 0 30px;
+}
+
+/* 内容容器 */
+.content-container {
+  max-width: 1390px;
+  margin: 0 auto;
+  padding: 40px 60px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* 标题样式 */
+.value-title {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e0e0e0;
+
+  h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: #1e3c72;
+    line-height: 1.4;
+    margin: 0;
+  }
+}
+
+/* 摘要样式 */
+.value-summary {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #f5f7fa;
+  border-left: 4px solid #1e3c72;
+  border-radius: 4px;
+
+  p {
+    font-size: 16px;
+    color: #666;
+    line-height: 1.8;
+    margin: 0;
+  }
+}
+
+/* 内容样式 */
+.value-content {
+  line-height: 1.8;
+  color: #333;
+  font-size: 16px;
+
+  :deep(h1),
+  :deep(h2),
+  :deep(h3),
+  :deep(h4),
+  :deep(h5),
+  :deep(h6) {
+    color: #1e3c72;
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+
+  :deep(p) {
+    margin-bottom: 16px;
+    line-height: 1.8;
+  }
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 20px 0;
+  }
+
+  :deep(a) {
+    color: #1e3c72;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    margin-left: 24px;
+    margin-bottom: 16px;
+  }
+
+  :deep(li) {
+    margin-bottom: 8px;
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .value-detail {
+    padding: 20px 0;
+  }
+
+  .breadcrumb {
+    padding: 0 20px;
+    margin-bottom: 20px;
+  }
+
+  .content-container {
+    padding: 20px;
+    margin: 0 20px;
+  }
+
+  .value-title {
+    h1 {
+      font-size: 22px;
+    }
+  }
+}
+</style>

ruoyi-admin/src/main/java/com/ruoyi/web/controller/portal/PortalHomeController.java

@@ -73,4 +73,11 @@ public class PortalHomeController extends BaseController {
     public AjaxResult getNewsList() {
         return AjaxResult.success(new Object[]{});
     }
+
+    @Anonymous
+    @GetMapping("/value/{id}")
+    public AjaxResult getValueDetail(@PathVariable("id") Long id) {
+        Value value = valueService.selectValueById(id);
+        return AjaxResult.success(value);
+    }
 }