This commit is contained in:
BianLzhaoMin
parent
46c1467427
commit
e89086eb42
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -81,8 +81,8 @@
|
|||
@click="onHandleExport"
|
||||
>
|
||||
导出
|
||||
</el-button> -->
|
||||
</el-col>
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
|
|
|
|||
|
|
@ -1,177 +1,177 @@
|
|||
<template>
|
||||
<div class="login-content">
|
||||
<div class="login-container">
|
||||
<!-- 左侧背景区域 -->
|
||||
<div class="login-left">
|
||||
<!-- <div class="background-image">
|
||||
<!-- <div class="login-content"> -->
|
||||
<div class="login-container">
|
||||
<!-- 左侧背景区域 -->
|
||||
<div class="login-left">
|
||||
<!-- <div class="background-image">
|
||||
<img
|
||||
alt="背景图"
|
||||
src="../assets/images/login-new-background.png"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<h2 class="welcome-title">欢迎登录公共服务平台</h2>
|
||||
<!-- 右侧登录表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<h2 class="welcome-title">欢迎登录公共服务平台</h2>
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
<div class="login-type-switch">
|
||||
<span
|
||||
:class="[
|
||||
'switch-item',
|
||||
{ active: loginType === '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"
|
||||
<!-- 登录方式切换 -->
|
||||
<div class="login-type-switch">
|
||||
<span
|
||||
:class="[
|
||||
'switch-item',
|
||||
{ active: loginType === 'password' },
|
||||
]"
|
||||
@click="switchLoginType('password')"
|
||||
>
|
||||
<!-- 密码登录表单 -->
|
||||
<template v-if="loginType === 'password'">
|
||||
<el-form-item prop="username">
|
||||
密码登录
|
||||
</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'">
|
||||
<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
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
v-model="loginForm.code"
|
||||
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"
|
||||
placeholder="请输入右侧校验码"
|
||||
class="custom-input code-input"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<i
|
||||
slot="prefix"
|
||||
class="el-input__icon el-icon-lock"
|
||||
class="el-input__icon el-icon-message"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<div class="code-input-group">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
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 class="login-code">
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode"
|
||||
class="login-code-img"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="form-options">
|
||||
<el-checkbox v-model="loginForm.rememberMe"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
<a href="#" class="forgot-password">忘记密码</a>
|
||||
</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>
|
||||
<el-form-item prop="mobile">
|
||||
<!-- 验证码登录表单 -->
|
||||
<template v-else>
|
||||
<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
|
||||
v-model="loginForm.mobile"
|
||||
type="text"
|
||||
v-model="loginForm.smsCode"
|
||||
auto-complete="off"
|
||||
placeholder="请输入手机号"
|
||||
class="custom-input"
|
||||
placeholder="请输入验证码"
|
||||
class="custom-input sms-input"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<i
|
||||
slot="prefix"
|
||||
class="el-input__icon el-icon-phone"
|
||||
class="el-input__icon el-icon-key"
|
||||
></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="sms-input-group">
|
||||
<el-input
|
||||
v-model="loginForm.smsCode"
|
||||
auto-complete="off"
|
||||
placeholder="请输入验证码"
|
||||
class="custom-input sms-input"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<i
|
||||
slot="prefix"
|
||||
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-button
|
||||
class="sms-button"
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="sendSmsCode"
|
||||
>
|
||||
{{
|
||||
smsCountdown > 0
|
||||
? `${smsCountdown}s`
|
||||
: '获取验证码'
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -394,12 +394,12 @@ export default {
|
|||
}
|
||||
.login-container {
|
||||
display: flex;
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f5f7fa;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
|
||||
// border-radius: 10px;
|
||||
// box-shadow: 0 0 10px 0 rgba(164, 51, 199, 0.658);
|
||||
}
|
||||
|
||||
// 左侧背景区域
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
<!-- 左侧分类菜单 -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
class="category-item"
|
||||
:class="{ active: activeCategory === category.key }"
|
||||
v-for="category in categories"
|
||||
@click="activeCategory = category.key"
|
||||
:class="{ active: activeCategory === category.key }"
|
||||
>
|
||||
{{ category.label }}
|
||||
</div>
|
||||
|
|
@ -20,30 +20,27 @@
|
|||
<div class="content-area">
|
||||
<div class="services-grid">
|
||||
<div
|
||||
v-for="service in filteredServices"
|
||||
:key="service.id"
|
||||
:key="item.id"
|
||||
class="service-card"
|
||||
@mouseenter="handleCardHover(service.id)"
|
||||
@mouseleave="handleCardLeave"
|
||||
v-for="item in productListAll"
|
||||
@mouseenter="handleCardHover(service.id)"
|
||||
>
|
||||
<div class="card-image">
|
||||
<img
|
||||
:src="apiBase + service.image"
|
||||
:alt="service.title"
|
||||
/>
|
||||
<img :src="item.linkImage" :alt="item.name" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ service.title }}</h3>
|
||||
<h3 class="card-title">{{ item.name }}</h3>
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="handleDemo(service)"
|
||||
@click="handleDemo(item)"
|
||||
>
|
||||
访问演示
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline"
|
||||
@click="handleDetail(service)"
|
||||
@click="handleDetail(item)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
|
|
@ -57,6 +54,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductCenterListAPI } from '@/api/publicService/productCenter'
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
data() {
|
||||
|
|
@ -152,32 +150,34 @@ export default {
|
|||
description: '应急响应智能化中心',
|
||||
},
|
||||
],
|
||||
|
||||
productListAll: [], // 所有产品列表
|
||||
}
|
||||
},
|
||||
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
|
||||
// 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
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getProductCenterListInScreenFun()
|
||||
},
|
||||
methods: {
|
||||
handleNavChange(navKey) {
|
||||
this.activeNav = navKey
|
||||
|
|
@ -185,9 +185,7 @@ export default {
|
|||
},
|
||||
|
||||
handleDemo(service) {
|
||||
console.log('访问演示:', service.title)
|
||||
// 这里可以跳转到演示页面
|
||||
this.$message.success(`正在打开 ${service.title} 演示`)
|
||||
window.open(service.link, '_blank')
|
||||
},
|
||||
// 在 index.vue 中的 handleDetail 方法
|
||||
handleDetail(service) {
|
||||
|
|
@ -208,6 +206,15 @@ export default {
|
|||
handleCardLeave() {
|
||||
this.hoveredCard = null
|
||||
},
|
||||
|
||||
// 获取产品列表
|
||||
async getProductCenterListInScreenFun() {
|
||||
const res = await getProductCenterListAPI({})
|
||||
|
||||
console.log(res, 'res')
|
||||
this.productListAll = res.data
|
||||
// this.services = res.data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -343,7 +350,10 @@ export default {
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -385,7 +395,7 @@ export default {
|
|||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
|
||||
// object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue