产品中心, 产品详情页面搭建
This commit is contained in:
parent
e1d7176c6a
commit
f1c606fa4b
|
|
@ -1,10 +1,10 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 公共服务平台
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
# 公共服务平台/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 公共服务平台
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 若依管理系统/生产环境
|
||||
# 公共服务平台/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 公共服务平台
|
||||
|
||||
BABEL_ENV = production
|
||||
|
||||
|
|
@ -8,5 +8,5 @@ NODE_ENV = production
|
|||
# 测试环境配置
|
||||
ENV = 'staging'
|
||||
|
||||
# 若依管理系统/测试环境
|
||||
# 公共服务平台/测试环境
|
||||
VUE_APP_BASE_API = '/stage-api'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "ruoyi",
|
||||
"version": "3.9.0",
|
||||
"description": "若依管理系统",
|
||||
"author": "若依",
|
||||
"description": "公共服务平台",
|
||||
"author": "bonus",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
|
|
@ -9,19 +9,19 @@
|
|||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
|
||||
<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
|
||||
<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
|
||||
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -87,6 +87,29 @@ export const constantRoutes = [
|
|||
meta: { title: '个人中心', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 在路由配置中添加产品详情页面路由
|
||||
{
|
||||
path: '/psp/productCenter',
|
||||
component: Layout,
|
||||
redirect: '/psp/productCenter/index',
|
||||
name: 'ProductCenter',
|
||||
meta: { title: '产品中心', icon: 'product' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'ProductCenterIndex',
|
||||
component: () => import('@/views/psp/productCenter/index'),
|
||||
meta: { title: '产品中心', icon: 'product' }
|
||||
},
|
||||
{
|
||||
path: 'detail/:id(\\d+)',
|
||||
name: 'ProductDetail',
|
||||
component: () => import('@/views/psp/productCenter/product-detail'),
|
||||
meta: { title: '产品详情', activeMenu: '/psp/productCenter/index' },
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
<h2>若依后台管理框架</h2>
|
||||
<h2>后台管理框架</h2>
|
||||
<p>
|
||||
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
|
||||
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了公共服务平台，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
|
||||
</p>
|
||||
<p>
|
||||
<b>当前版本:</b> <span>v{{ version }}</span>
|
||||
|
|
@ -92,14 +92,14 @@
|
|||
<p>
|
||||
<i class="el-icon-chat-dot-round"></i> 微信：<a
|
||||
href="javascript:;"
|
||||
>/ *若依</a
|
||||
>/ *</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<i class="el-icon-money"></i> 支付宝：<a
|
||||
href="javascript:;"
|
||||
class="支付宝信息"
|
||||
>/ *若依</a
|
||||
>/ *</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1026,7 +1026,7 @@
|
|||
</el-collapse-item>
|
||||
<el-collapse-item title="v1.0.0 - 2019-10-08">
|
||||
<ol>
|
||||
<li>若依前后端分离系统正式发布</li>
|
||||
<li>公共服务平台前后端分离系统正式发布</li>
|
||||
</ol>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,512 @@
|
|||
<template>
|
||||
<div class="platform-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<div class="logo-section">
|
||||
<img src="/img/psp/productCenter/logo.png" alt="Logo" class="logo"/>
|
||||
<span class="platform-title">公共服务平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-nav">
|
||||
<div
|
||||
v-for="item in navItems"
|
||||
:key="item.key"
|
||||
class="nav-item"
|
||||
:class="{ active: activeNav === item.key }"
|
||||
@click="activeNav = item.key"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" class="nav-icon"/>
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
type="text"
|
||||
placeholder="输入关键词搜索"
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button class="search-btn" @click="handleSearch">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="user-avatar">
|
||||
<img :src="$store.state.user.avatar" alt="用户头像"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧分类菜单 -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
class="category-item"
|
||||
:class="{ active: activeCategory === category.key }"
|
||||
@click="activeCategory = category.key"
|
||||
>
|
||||
{{ category.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧服务卡片区域 -->
|
||||
<div class="content-area">
|
||||
<div class="services-grid">
|
||||
<div
|
||||
v-for="service in filteredServices"
|
||||
:key="service.id"
|
||||
class="service-card"
|
||||
@mouseenter="handleCardHover(service.id)"
|
||||
@mouseleave="handleCardLeave"
|
||||
>
|
||||
<div class="card-image">
|
||||
<img :src="apiBase + service.image" :alt="service.title"/>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ service.title }}</h3>
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="handleDemo(service)"
|
||||
>
|
||||
访问演示
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline"
|
||||
@click="handleDetail(service)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PlatformIndex',
|
||||
data() {
|
||||
return {
|
||||
activeNav: 'products',
|
||||
activeCategory: 'all',
|
||||
searchKeyword: '',
|
||||
hoveredCard: null,
|
||||
apiBase: process.env.VUE_APP_BASE_API,
|
||||
navItems: [
|
||||
{ key: 'products',label: '产品中心', icon: '/img/psp/productCenter/products.png' },
|
||||
{ key: 'components', label: '公共组件', icon: '/img/psp/productCenter/components.png' },
|
||||
{ key: 'materials', label: '宣传物料', icon: '/img/psp/productCenter/materials.png'},
|
||||
{ key: 'docs', label: '文档中心', icon: '/img/psp/productCenter/docs.png'}
|
||||
],
|
||||
categories: [
|
||||
{key: 'all', label: '全部'},
|
||||
{key: 'smart', label: '智慧基建'},
|
||||
{key: 'system', label: '智慧后勤'},
|
||||
{key: 'safety', label: '数智安监'}
|
||||
],
|
||||
services: [
|
||||
{
|
||||
id: 1,
|
||||
title: '绿智食堂',
|
||||
image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
|
||||
category: 'smart',
|
||||
description: '智能化食堂管理系统'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '智能机具管理系统',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'system',
|
||||
description: '设备智能化管理平台'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '智慧楼宇',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'smart',
|
||||
description: '楼宇智能化控制系统'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '产业工人实名制',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'system',
|
||||
description: '工人身份认证管理'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '安全质量智慧决策中心',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'safety',
|
||||
description: '安全质量智能决策平台'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '智慧工地',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'smart',
|
||||
description: '工地智能化管理系统'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'VR警示教育室',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'safety',
|
||||
description: 'VR安全教育培训系统'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '应急智中心建设',
|
||||
image: '/placeholder.svg?height=200&width=300',
|
||||
category: 'safety',
|
||||
description: '应急响应智能化中心'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredServices() {
|
||||
let filtered = this.services
|
||||
|
||||
// 按分类筛选
|
||||
if (this.activeCategory !== 'all') {
|
||||
filtered = filtered.filter(service => service.category === this.activeCategory)
|
||||
}
|
||||
|
||||
// 按搜索关键词筛选
|
||||
if (this.searchKeyword.trim()) {
|
||||
const keyword = this.searchKeyword.toLowerCase()
|
||||
filtered = filtered.filter(service =>
|
||||
service.title.toLowerCase().includes(keyword) ||
|
||||
service.description.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
console.log('搜索关键词:', this.searchKeyword)
|
||||
// 搜索逻辑已在computed中实现
|
||||
},
|
||||
handleDemo(service) {
|
||||
console.log('访问演示:', service.title)
|
||||
// 这里可以跳转到演示页面
|
||||
this.$message.success(`正在打开 ${service.title} 演示`)
|
||||
},
|
||||
// 在 index.vue 中的 handleDetail 方法
|
||||
handleDetail(service) {
|
||||
console.log('查看详情:', service.title)
|
||||
this.$router.push({
|
||||
name: 'ProductDetail',
|
||||
params: { id: service.id }
|
||||
})
|
||||
},
|
||||
handleCardHover(serviceId) {
|
||||
this.hoveredCard = serviceId
|
||||
},
|
||||
handleCardLeave() {
|
||||
this.hoveredCard = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.platform-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.header {
|
||||
background-image: url("/img/psp/productCenter/topbg.png");
|
||||
color: white;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 主体内容 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 服务卡片区域 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 100%; /* 让卡片高度撑满 grid 单元格 */
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 180px; /* 固定高度，可根据设计调整 */
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa; /* 图片加载前的占位背景 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .card-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #357abd;
|
||||
border-color: #357abd;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #4a90e2;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,9 +7,9 @@ function resolve(dir) {
|
|||
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
|
||||
const name = process.env.VUE_APP_TITLE || '公共服务平台' // 网页标题
|
||||
|
||||
const baseUrl = 'http://localhost:8080' // 后端接口
|
||||
const baseUrl = 'http://localhost:58080' // 后端接口
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue