bonus
/
pub_svc_platform_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-09-11 13:48:59 +08:00
parent 46c1467427
commit e89086eb42
5 changed files with 207 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/publicService/productCenter.js Normal file
View File

@ -0,0 +1,11 @@
import request from '@/utils/request'
import request_formdata from '@/utils/request_formdata'
// 查询产品中心列表
export function getProductCenterListAPI(data) {
return request({
url: '/product/screen/getProductList',
method: 'POST',
data,
})
}

BIN
src/assets/images/publicService/btn-sel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

4
src/views/dataManage/product-center/index.vue
View File

@ -81,8 +81,8 @@
@click="onHandleExport" @click="onHandleExport"
> >
导出 导出
</el-button> --> </el-button>
</el-col> </el-col> -->
</el-row> </el-row>
<!-- 表格 --> <!-- 表格 -->

294
src/views/login.vue
View File

@ -1,177 +1,177 @@
<template> <template>
<div class="login-content"> <!-- <div class="login-content"> -->
<div class="login-container"> <div class="login-container">
<!-- 左侧背景区域 --> <!-- 左侧背景区域 -->
<div class="login-left"> <div class="login-left">
<!-- <div class="background-image"> <!-- <div class="background-image">
<img <img
alt="背景图" alt="背景图"
src="../assets/images/login-new-background.png" src="../assets/images/login-new-background.png"
/> />
</div> --> </div> -->
</div> </div>
<!-- 右侧登录表单区域 --> <!-- 右侧登录表单区域 -->
<div class="login-right"> <div class="login-right">
<div class="login-form-container"> <div class="login-form-container">
<h2 class="welcome-title">欢迎登录公共服务平台</h2> <h2 class="welcome-title">欢迎登录公共服务平台</h2>
<!-- 登录方式切换 --> <!-- 登录方式切换 -->
<div class="login-type-switch"> <div class="login-type-switch">
<span <span
:class="[ :class="[
'switch-item', 'switch-item',
{ active: loginType === 'password' }, { active: loginType === 'password' },
]" ]"
@click="switchLoginType('password')" @click="switchLoginType('password')"
>
密码登录
</span>
<span class="divider">|</span>
<span
:class="[
'switch-item',
{ active: loginType === 'sms' },
]"
@click="switchLoginType('sms')"
>
验证码登录
</span>
</div>
<!-- 登录表单 -->
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
> >
<!-- 密码登录表单 --> 密码登录
<template v-if="loginType === 'password'"> </span>
<el-form-item prop="username"> <span class="divider">|</span>
<span
:class="[
'switch-item',
{ active: loginType === 'sms' },
]"
@click="switchLoginType('sms')"
>
验证码登录
</span>
</div>
<!-- 登录表单 -->
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<!-- 密码登录表单 -->
<template v-if="loginType === 'password'">
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="请输入用户名"
class="custom-input"
>
<i
slot="prefix"
class="el-input__icon el-icon-user"
></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="请输入密码"
show-password
class="custom-input"
@keyup.enter.native="handleLogin"
>
<i
slot="prefix"
class="el-input__icon el-icon-lock"
/>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<div class="code-input-group">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.code"
type="text"
auto-complete="off" auto-complete="off"
placeholder="请输入用户名" placeholder="请输入右侧校验码"
class="custom-input" class="custom-input code-input"
>
<i
slot="prefix"
class="el-input__icon el-icon-user"
></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="请输入密码"
show-password
class="custom-input"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<i <i
slot="prefix" slot="prefix"
class="el-input__icon el-icon-lock" class="el-input__icon el-icon-message"
/> />
</el-input> </el-input>
</el-form-item> <div class="login-code">
<el-form-item prop="code" v-if="captchaEnabled"> <img
<div class="code-input-group"> :src="codeUrl"
<el-input @click="getCode"
v-model="loginForm.code" class="login-code-img"
auto-complete="off" />
placeholder="请输入右侧校验码"
class="custom-input code-input"
@keyup.enter.native="handleLogin"
>
<i
slot="prefix"
class="el-input__icon el-icon-message"
/>
</el-input>
<div class="login-code">
<img
:src="codeUrl"
@click="getCode"
class="login-code-img"
/>
</div>
</div> </div>
</el-form-item>
<div class="form-options">
<el-checkbox v-model="loginForm.rememberMe"
>记住密码</el-checkbox
>
<a href="#" class="forgot-password">忘记密码</a>
</div> </div>
</template> </el-form-item>
<div class="form-options">
<el-checkbox v-model="loginForm.rememberMe"
>记住密码</el-checkbox
>
<a href="#" class="forgot-password">忘记密码</a>
</div>
</template>
<!-- 验证码登录表单 --> <!-- 验证码登录表单 -->
<template v-else> <template v-else>
<el-form-item prop="mobile"> <el-form-item prop="mobile">
<el-input
v-model="loginForm.mobile"
type="text"
auto-complete="off"
placeholder="请输入手机号"
class="custom-input"
>
<i
slot="prefix"
class="el-input__icon el-icon-phone"
></i>
</el-input>
</el-form-item>
<el-form-item prop="smsCode">
<div class="sms-input-group">
<el-input <el-input
v-model="loginForm.mobile" v-model="loginForm.smsCode"
type="text"
auto-complete="off" auto-complete="off"
placeholder="请输入手机号" placeholder="请输入验证码"
class="custom-input" class="custom-input sms-input"
@keyup.enter.native="handleLogin"
> >
<i <i
slot="prefix" slot="prefix"
class="el-input__icon el-icon-phone" class="el-input__icon el-icon-key"
></i> ></i>
</el-input> </el-input>
</el-form-item> <el-button
<el-form-item prop="smsCode"> class="sms-button"
<div class="sms-input-group"> :disabled="smsCountdown > 0"
<el-input @click="sendSmsCode"
v-model="loginForm.smsCode" >
auto-complete="off" {{
placeholder="请输入验证码" smsCountdown > 0
class="custom-input sms-input" ? `${smsCountdown}s`
@keyup.enter.native="handleLogin" : '获取验证码'
> }}
<i </el-button>
slot="prefix" </div>
class="el-input__icon el-icon-key"
></i>
</el-input>
<el-button
class="sms-button"
:disabled="smsCountdown > 0"
@click="sendSmsCode"
>
{{
smsCountdown > 0
? `${smsCountdown}s`
: '获取验证码'
}}
</el-button>
</div>
</el-form-item>
</template>
<!-- 登录按钮 -->
<el-form-item class="login-button-item">
<el-button
:loading="loading"
size="large"
type="primary"
class="login-button"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登录</span>
<span v-else>登录中...</span>
</el-button>
</el-form-item> </el-form-item>
</el-form> </template>
</div>
<!-- 登录按钮 -->
<el-form-item class="login-button-item">
<el-button
:loading="loading"
size="large"
type="primary"
class="login-button"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登录</span>
<span v-else>登录中...</span>
</el-button>
</el-form-item>
</el-form>
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</template> </template>
<script> <script>
@ -394,12 +394,12 @@ export default {
} }
.login-container { .login-container {
display: flex; display: flex;
height: 80%; height: 100%;
width: 80%; width: 100%;
background: #f5f7fa; background: #f5f7fa;
overflow: hidden; overflow: hidden;
border-radius: 10px; // border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658); // box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
} }
// 左侧背景区域 // 左侧背景区域

84
src/views/publicService/productCenter/index.vue
View File

@ -6,11 +6,11 @@
<!-- 左侧分类菜单 --> <!-- 左侧分类菜单 -->
<div class="sidebar"> <div class="sidebar">
<div <div
v-for="category in categories"
:key="category.key" :key="category.key"
class="category-item" class="category-item"
:class="{ active: activeCategory === category.key }" v-for="category in categories"
@click="activeCategory = category.key" @click="activeCategory = category.key"
:class="{ active: activeCategory === category.key }"
> >
{{ category.label }} {{ category.label }}
</div> </div>
@ -20,30 +20,27 @@
<div class="content-area"> <div class="content-area">
<div class="services-grid"> <div class="services-grid">
<div <div
v-for="service in filteredServices" :key="item.id"
:key="service.id"
class="service-card" class="service-card"
@mouseenter="handleCardHover(service.id)"
@mouseleave="handleCardLeave" @mouseleave="handleCardLeave"
v-for="item in productListAll"
@mouseenter="handleCardHover(service.id)"
> >
<div class="card-image"> <div class="card-image">
<img <img :src="item.linkImage" :alt="item.name" />
:src="apiBase + service.image"
:alt="service.title"
/>
</div> </div>
<div class="card-content"> <div class="card-content">
<h3 class="card-title">{{ service.title }}</h3> <h3 class="card-title">{{ item.name }}</h3>
<div class="card-actions"> <div class="card-actions">
<button <button
class="btn btn-primary" class="btn btn-primary"
@click="handleDemo(service)" @click="handleDemo(item)"
> >
访问演示 访问演示
</button> </button>
<button <button
class="btn btn-outline" class="btn btn-outline"
@click="handleDetail(service)" @click="handleDetail(item)"
> >
查看详情 查看详情
</button> </button>
@ -57,6 +54,7 @@
</template> </template>
<script> <script>
import { getProductCenterListAPI } from '@/api/publicService/productCenter'
export default { export default {
name: 'ProductCenter', name: 'ProductCenter',
data() { data() {
@ -152,32 +150,34 @@ export default {
description: '应急响应智能化中心', description: '应急响应智能化中心',
}, },
], ],
productListAll: [], // 所有产品列表
} }
}, },
computed: { computed: {
filteredServices() { filteredServices() {
let filtered = this.services // let filtered = this.services
// // 按分类筛选
// 按分类筛选 // if (this.activeCategory !== 'all') {
if (this.activeCategory !== 'all') { // filtered = filtered.filter(
filtered = filtered.filter( // (service) => service.category === this.activeCategory,
(service) => service.category === this.activeCategory, // )
) // }
} // // 按搜索关键词筛选
// if (this.searchKeyword.trim()) {
// 按搜索关键词筛选 // const keyword = this.searchKeyword.toLowerCase()
if (this.searchKeyword.trim()) { // filtered = filtered.filter(
const keyword = this.searchKeyword.toLowerCase() // (service) =>
filtered = filtered.filter( // service.title.toLowerCase().includes(keyword) ||
(service) => // service.description.toLowerCase().includes(keyword),
service.title.toLowerCase().includes(keyword) || // )
service.description.toLowerCase().includes(keyword), // }
) // return filtered
}
return filtered
}, },
}, },
created() {
this.getProductCenterListInScreenFun()
},
methods: { methods: {
handleNavChange(navKey) { handleNavChange(navKey) {
this.activeNav = navKey this.activeNav = navKey
@ -185,9 +185,7 @@ export default {
}, },
handleDemo(service) { handleDemo(service) {
console.log('访问演示:', service.title) window.open(service.link, '_blank')
// 这里可以跳转到演示页面
this.$message.success(`正在打开 ${service.title} 演示`)
}, },
// 在 index.vue 中的 handleDetail 方法 // 在 index.vue 中的 handleDetail 方法
handleDetail(service) { handleDetail(service) {
@ -208,6 +206,15 @@ export default {
handleCardLeave() { handleCardLeave() {
this.hoveredCard = null this.hoveredCard = null
}, },
// 获取产品列表
async getProductCenterListInScreenFun() {
const res = await getProductCenterListAPI({})
console.log(res, 'res')
this.productListAll = res.data
// this.services = res.data
},
}, },
} }
</script> </script>
@ -343,7 +350,10 @@ export default {
} }
.category-item.active { .category-item.active {
background-color: #4a90e2; // background-color: #4a90e2;
background: url('../../../assets/images/publicService/btn-sel.png')
no-repeat center center;
background-size: 100% 100%;
color: white; color: white;
} }
@ -385,7 +395,7 @@ export default {
.card-image img { .card-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */ // object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }