页面完善
This commit is contained in:
BianLzhaoMin
parent
9e8bc525b2
commit
553ce1daab
|
|
@ -3,6 +3,7 @@ VUE_APP_TITLE = 公共服务平台
|
|||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
VUE_APP_ENV = 'development'
|
||||
|
||||
# 公共服务平台/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ VUE_APP_TITLE = 公共服务平台
|
|||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
VUE_APP_ENV = 'production'
|
||||
|
||||
# 公共服务平台/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
VUE_APP_BASE_API = '/bnscloud'
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"axios": "0.28.1",
|
||||
"clipboard": "2.0.8",
|
||||
"core-js": "3.37.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "5.4.0",
|
||||
"element-ui": "2.15.14",
|
||||
"file-saver": "2.0.5",
|
||||
|
|
|
|||
|
|
@ -46,9 +46,10 @@ export function getProductCenterDetailAPI(id) {
|
|||
}
|
||||
|
||||
// 获取产品列表
|
||||
export function getProductListAPI() {
|
||||
export function getProductListAPI(data) {
|
||||
return request({
|
||||
url: '/select/selectProduct',
|
||||
url: `/select/selectProduct`,
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 429 B |
|
|
@ -2,8 +2,7 @@
|
|||
<el-image
|
||||
:src="src1"
|
||||
fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`"
|
||||
:preview-src-list="realSrcList"
|
||||
:style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
|
|
@ -33,6 +32,10 @@ export default {
|
|||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
realSrc() {
|
||||
|
|
@ -81,7 +84,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
// border-radius: 5px;
|
||||
// border-radius: 10px;
|
||||
background-color: #ebeef5;
|
||||
// box-shadow: 0 0 5px 1px #ccc;
|
||||
::v-deep .el-image__inner {
|
||||
|
|
|
|||
|
|
@ -1,50 +1,72 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<div class="navbar">
|
||||
<hamburger
|
||||
id="hamburger-container"
|
||||
:is-active="sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
|
||||
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
|
||||
<breadcrumb
|
||||
v-if="!topNav"
|
||||
id="breadcrumb-container"
|
||||
class="breadcrumb-container"
|
||||
/>
|
||||
<top-nav
|
||||
v-if="topNav"
|
||||
id="topmenu-container"
|
||||
class="topmenu-container"
|
||||
/>
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
<div class="right-menu">
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
</template>
|
||||
<el-dropdown
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar" />
|
||||
<span class="user-nickname"> {{ nickName }} </span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar">
|
||||
<span class="user-nickname"> {{ nickName }} </span>
|
||||
<div
|
||||
class="right-menu-item hover-effect setting"
|
||||
@click="setLayout"
|
||||
v-if="setting"
|
||||
>
|
||||
<svg-icon icon-class="more-up" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
|
||||
<svg-icon icon-class="more-up" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -59,150 +81,150 @@ import RuoYiGit from '@/components/RuoYi/Git'
|
|||
import RuoYiDoc from '@/components/RuoYi/Doc'
|
||||
|
||||
export default {
|
||||
emits: ['setLayout'],
|
||||
components: {
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
Hamburger,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
RuoYiGit,
|
||||
RuoYiDoc
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'device',
|
||||
'nickName'
|
||||
]),
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
}
|
||||
emits: ['setLayout'],
|
||||
components: {
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
Hamburger,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
RuoYiGit,
|
||||
RuoYiDoc,
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
computed: {
|
||||
...mapGetters(['sidebar', 'avatar', 'device', 'nickName']),
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
},
|
||||
},
|
||||
},
|
||||
setLayout(event) {
|
||||
this.$emit('setLayout')
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
setLayout(event) {
|
||||
this.$emit('setLayout')
|
||||
},
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index'
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
transition: background 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname{
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,6 +109,15 @@ export const constantRoutes = [
|
|||
),
|
||||
name: 'ProductDetail',
|
||||
},
|
||||
// 产品中心 ---- 查看案例页面
|
||||
{
|
||||
path: 'productCenter/caseList',
|
||||
component: () =>
|
||||
import(
|
||||
'@/views/publicService/productCenter/product-case-list.vue'
|
||||
),
|
||||
name: 'ProductCaseList',
|
||||
},
|
||||
// 公共组件
|
||||
{
|
||||
path: 'commonCom',
|
||||
|
|
@ -147,56 +156,6 @@ export const constantRoutes = [
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 在路由配置中导航条的路由
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Layout, // 布局组件，包含左侧菜单和顶部导航
|
||||
// hidden: true, // 隐藏左侧菜单项
|
||||
// children: [
|
||||
// {
|
||||
// path: '/productCenter/index',
|
||||
// component: () => import('@/views/psp/productCenter/index.vue'),
|
||||
// },
|
||||
// {
|
||||
// path: '/common/index',
|
||||
// component: () => import('@/views/psp/common/index.vue'),
|
||||
// },
|
||||
// // ... 其他子路由
|
||||
// ],
|
||||
// },
|
||||
|
||||
// 在路由配置中添加产品详情页面路由
|
||||
// {
|
||||
// path: '/psp/productCenter',
|
||||
// component: Layout,
|
||||
// redirect: '/psp/productCenter/index',
|
||||
// name: 'ProductCenter',
|
||||
// meta: { title: '产品中心', icon: 'product' },
|
||||
// hidden: true, // 隐藏左侧菜单项
|
||||
// children: [
|
||||
// {
|
||||
// path: 'detail/:id(\\d+)',
|
||||
// name: 'ProductDetail',
|
||||
// component: () =>
|
||||
// import('@/views/psp/productCenter/product-detail'),
|
||||
// meta: {
|
||||
// title: '产品详情',
|
||||
// activeMenu: '/psp/productCenter/index',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: 'case/:id(\\d+)',
|
||||
// name: 'ProductCase',
|
||||
// component: () =>
|
||||
// import('@/views/psp/productCenter/product-case'),
|
||||
// meta: {
|
||||
// title: '产品案例',
|
||||
// activeMenu: '/psp/productCenter/index',
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
|
|
@ -289,4 +248,5 @@ export default new Router({
|
|||
mode: 'history', // 去掉url中的#
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes,
|
||||
base: process.env.VUE_APP_ENV === 'production' ? '/pubSerPlatform' : '',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
import * as CryptoJS from 'crypto-js'
|
||||
const cbc_key = CryptoJS.enc.Utf8.parse('zhgd@bonus@zhgd@bonus@1234567890')
|
||||
const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
|
||||
/**
|
||||
* 加解密开关
|
||||
* 默认参数需要加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jia_mi = false
|
||||
/**
|
||||
* 默认后台会自动加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jie_mi = false
|
||||
/**
|
||||
* 加密
|
||||
* @param word
|
||||
* @returns {string}
|
||||
*/
|
||||
export const encryptCBC = function (word) {
|
||||
if (!jia_mi) {
|
||||
return word
|
||||
}
|
||||
const srcs = CryptoJS.enc.Utf8.parse(word)
|
||||
const encrypted = CryptoJS.AES.encrypt(srcs, cbc_key, {
|
||||
iv: cbc_iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
})
|
||||
return encrypted.toString()
|
||||
}
|
||||
|
||||
/**
|
||||
* 解密
|
||||
* @param word
|
||||
* @returns {*}
|
||||
*/
|
||||
export const decryptCBC = function (word) {
|
||||
if (!jie_mi) {
|
||||
return word
|
||||
}
|
||||
const encrypted = CryptoJS.AES.decrypt(word, cbc_key, {
|
||||
iv: cbc_iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
})
|
||||
return encrypted.toString(CryptoJS.enc.Utf8)
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件预览专用
|
||||
* @param word
|
||||
* @returns {string}
|
||||
*/
|
||||
export const encryptCBCTime = function (word) {
|
||||
const srcs = CryptoJS.enc.Utf8.parse(word)
|
||||
const encrypted = CryptoJS.AES.encrypt(srcs, cbc_key, {
|
||||
iv: cbc_iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
})
|
||||
return encrypted.toString()
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
// base64Utils.js
|
||||
let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
const useBase64 = {
|
||||
encode64:(e) => {
|
||||
let t = "";
|
||||
let f = 0;
|
||||
e = useBase64.encodeUTF8(e);
|
||||
while (f < e.length) {
|
||||
const n = e.charCodeAt(f++);
|
||||
const r = e.charCodeAt(f++);
|
||||
const i = e.charCodeAt(f++);
|
||||
let s = n >> 2;
|
||||
let o = (n & 3) << 4 | r >> 4;
|
||||
let u = (r & 15) << 2 | i >> 6;
|
||||
let a = i & 63;
|
||||
if (isNaN(r)) {
|
||||
u = a = 64;
|
||||
} else if (isNaN(i)) {
|
||||
a = 64;
|
||||
}
|
||||
t += _keyStr[s] + _keyStr[o] + _keyStr[u] + _keyStr[a];
|
||||
}
|
||||
return t;
|
||||
},
|
||||
decode64: (e) => {
|
||||
let t = "";
|
||||
let f = 0;
|
||||
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
|
||||
while (f < e.length) {
|
||||
const s = _keyStr.indexOf(e.charAt(f++));
|
||||
const o = _keyStr.indexOf(e.charAt(f++));
|
||||
const u = _keyStr.indexOf(e.charAt(f++));
|
||||
const a = _keyStr.indexOf(e.charAt(f++));
|
||||
let n = s << 2 | o >> 4;
|
||||
let r = (o & 15) << 4 | u >> 2;
|
||||
let i = (u & 3) << 6 | a;
|
||||
t += String.fromCharCode(n);
|
||||
if (u !== 64) {
|
||||
t += String.fromCharCode(r);
|
||||
}
|
||||
if (a !== 64) {
|
||||
t += String.fromCharCode(i);
|
||||
}
|
||||
}
|
||||
return useBase64.decodeUTF8(t);
|
||||
},
|
||||
|
||||
encodeUTF8: (input) => {
|
||||
return unescape(encodeURIComponent(input));
|
||||
},
|
||||
|
||||
decodeUTF8: (input) => {
|
||||
return decodeURIComponent(escape(input));
|
||||
},
|
||||
}
|
||||
export default useBase64;
|
||||
|
|
@ -121,7 +121,10 @@ service.interceptors.response.use(
|
|||
.then(() => {
|
||||
isRelogin.show = false
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index'
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,10 @@ service.interceptors.response.use(
|
|||
.then(() => {
|
||||
isRelogin.show = false
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index'
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ export default {
|
|||
},
|
||||
|
||||
created() {
|
||||
this.getProductList()
|
||||
// this.getProductList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -249,14 +249,14 @@ export default {
|
|||
file.forEach((item) => {
|
||||
if (!item.id) {
|
||||
formData.append('files', item.raw)
|
||||
fileMsg.push({ type: 1 })
|
||||
fileMsg.push({ type: 2 })
|
||||
}
|
||||
})
|
||||
|
||||
cover.forEach((item) => {
|
||||
if (!item.id) {
|
||||
formData.append('files', item.raw)
|
||||
fileMsg.push({ type: 2 })
|
||||
fileMsg.push({ type: 1 })
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -267,7 +267,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
if (fileMsg.length > 0) {
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
}
|
||||
|
||||
formData.append('params', JSON.stringify(params))
|
||||
|
||||
const API =
|
||||
|
|
@ -275,14 +278,24 @@ export default {
|
|||
? editProductCenterAPI
|
||||
: addProMaterialsAPI
|
||||
|
||||
const res = await API(formData)
|
||||
console.log(res, 'res')
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '文件正在上传中，请稍后...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess(
|
||||
this.formType === 2 ? '编辑成功' : '新增成功',
|
||||
)
|
||||
this.$emit('closeDialog', true)
|
||||
try {
|
||||
const res = await API(formData)
|
||||
loading.close()
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess(
|
||||
this.formType === 2 ? '编辑成功' : '新增成功',
|
||||
)
|
||||
this.$emit('closeDialog', true)
|
||||
}
|
||||
} catch (error) {
|
||||
loading.close()
|
||||
}
|
||||
} catch (error) {
|
||||
// 校验失败，提示用户
|
||||
|
|
@ -295,11 +308,13 @@ export default {
|
|||
this.addAndEditForm.typeName = this.dict.type.tb_product_type.find(
|
||||
(item) => item.value === value,
|
||||
).label
|
||||
|
||||
this.getProductList(value)
|
||||
},
|
||||
|
||||
// 获取归属产品下拉选
|
||||
async getProductList() {
|
||||
const res = await getProductListAPI()
|
||||
async getProductList(typeId) {
|
||||
const res = await getProductListAPI({ typeId })
|
||||
|
||||
this.productList = res.data
|
||||
},
|
||||
|
|
@ -342,20 +357,22 @@ export default {
|
|||
description,
|
||||
productName,
|
||||
file: files
|
||||
.filter((e) => e.typeId === 1)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
url: item.filePath,
|
||||
name: item.originalName,
|
||||
})),
|
||||
cover: files
|
||||
.filter((e) => e.typeId === 2)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
url: item.filePath,
|
||||
name: item.originalName,
|
||||
})),
|
||||
cover: files
|
||||
.filter((e) => e.typeId === 1)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
url: item.filePath,
|
||||
name: item.originalName,
|
||||
})),
|
||||
}
|
||||
|
||||
this.getProductList(typeId)
|
||||
// this.addAndEditForm.productId.forEach((item) => {
|
||||
// this.addAndEditForm.productName +=
|
||||
// this.productList.find((j) => item == j.id).name + ','
|
||||
|
|
|
|||
|
|
@ -102,7 +102,14 @@
|
|||
v-for="column in columns"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<template v-if="column.prop === 'file'"> 附件 </template>
|
||||
<template v-if="column.prop === 'file'">
|
||||
{{ scope.row.files[0].originalName }}
|
||||
</template>
|
||||
<template v-if="column.prop === 'fileType'">
|
||||
<el-tag size="mini" type="primary">
|
||||
{{ scope.row.typeId === 1 ? '物料' : '视频' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
{{ scope.row[column.prop] }}
|
||||
|
|
@ -199,6 +206,10 @@ export default {
|
|||
prop: 'file',
|
||||
label: '附件',
|
||||
},
|
||||
{
|
||||
prop: 'fileType',
|
||||
label: '附件类型',
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: '描述',
|
||||
|
|
|
|||
|
|
@ -375,14 +375,13 @@ export default {
|
|||
.then(() => {
|
||||
this.$router
|
||||
.push({ path: '/index_1' })
|
||||
.catch(() => {})
|
||||
.catch(() => {
|
||||
this.getCode()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
if (
|
||||
this.captchaEnabled &&
|
||||
this.loginType === 'password'
|
||||
) {
|
||||
if (this.captchaEnabled && this.loginType === 1) {
|
||||
this.getCode()
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!-- 使用导航栏组件 -->
|
||||
<NavBar />
|
||||
|
||||
<div class="main-content">
|
||||
<div class="main-content-1">
|
||||
<!-- 主体内容 -->
|
||||
<router-view />
|
||||
</div>
|
||||
|
|
@ -28,12 +28,12 @@ export default {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-content-1 {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
|
|
|
|||
|
|
@ -6,60 +6,324 @@
|
|||
<span> 查看更多 </span>
|
||||
</div>
|
||||
|
||||
<div class="card-list" ref="cardList">
|
||||
<div class="card-item" v-for="item in cardList" :key="item.id">
|
||||
<div class="card-item-image" ref="cardItemImage">
|
||||
<ImagePreview
|
||||
:height="160"
|
||||
:src1="item.url"
|
||||
:width="itemWidth"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-item-text">
|
||||
{{ item.name }}
|
||||
<div class="card-wrapper" ref="cardWrapper">
|
||||
<div class="card-list" ref="cardList">
|
||||
<!-- 实际内容 -->
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="item in cardList"
|
||||
:key="item.id + '-original'"
|
||||
>
|
||||
<div
|
||||
ref="cardItemImage"
|
||||
class="card-item-image"
|
||||
@click="onHandlePreviewDocs(item)"
|
||||
>
|
||||
<ImagePreview
|
||||
:height="190"
|
||||
:width="itemWidth"
|
||||
:src1="item.image"
|
||||
/>
|
||||
|
||||
<div class="video-mask" v-if="typeCard === 'video'">
|
||||
<i
|
||||
@click.stop="onHandlePreviewDocs(item)"
|
||||
class="el-icon-video-play video-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item-text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复制一份用于无缝滚动 -->
|
||||
<template v-if="cardList.length > 4">
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="item in cardList"
|
||||
:key="item.id + '-clone'"
|
||||
>
|
||||
<div
|
||||
ref="cardItemImage"
|
||||
class="card-item-image"
|
||||
@click="onHandlePreviewDocs(item)"
|
||||
>
|
||||
<ImagePreview
|
||||
:height="190"
|
||||
:width="itemWidth"
|
||||
:src1="item.image"
|
||||
/>
|
||||
|
||||
<div class="video-mask" v-if="typeCard === 'video'">
|
||||
<i
|
||||
@click.stop="onHandlePreviewDocs(item)"
|
||||
class="el-icon-video-play video-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item-text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<img
|
||||
alt="向左滚动"
|
||||
class="arrow-left"
|
||||
v-if="cardList.length > 4"
|
||||
src="@/assets/images/publicService/arrow-left.png"
|
||||
@mouseenter="stopScroll"
|
||||
@mouseleave="startScroll"
|
||||
@click="scrollLeft"
|
||||
/>
|
||||
<img
|
||||
alt="向右滚动"
|
||||
class="arrow-right"
|
||||
v-if="cardList.length > 4"
|
||||
src="@/assets/images/publicService/arrow-right.png"
|
||||
@mouseenter="stopScroll"
|
||||
@mouseleave="startScroll"
|
||||
@click="scrollRight"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CardItem',
|
||||
|
||||
props: {
|
||||
// 卡片标题
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 卡片列表
|
||||
cardList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: () => [],
|
||||
},
|
||||
typeCard: {
|
||||
type: String,
|
||||
default: 'docs',
|
||||
},
|
||||
scrollDuration: {
|
||||
type: Number,
|
||||
default: 30, // 滚动完一轮的时间（秒）
|
||||
},
|
||||
scrollDirection: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
validator: (value) => {
|
||||
return ['left', 'right'].includes(value)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemWidth: 100,
|
||||
isScrolling: false,
|
||||
startTime: 0,
|
||||
startPosition: 0,
|
||||
totalScrollWidth: 0,
|
||||
animationId: null,
|
||||
// 用于平滑过渡的变量
|
||||
isTransitioning: false,
|
||||
transitionStart: 0,
|
||||
transitionProgress: 0,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getItemWidth()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.calculateScrollWidth()
|
||||
if (this.cardList.length > 4 && this.totalScrollWidth > 0) {
|
||||
this.startScroll()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
watch: {
|
||||
cardList: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
this.getItemWidth()
|
||||
this.calculateScrollWidth()
|
||||
if (this.cardList.length > 4 && this.totalScrollWidth > 0) {
|
||||
this.startScroll()
|
||||
}
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.stopScroll()
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 动态获取 itemWidth
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.cardList.clientWidth - 260) / 4
|
||||
if (this.$refs.cardWrapper) {
|
||||
this.itemWidth = (this.$refs.cardWrapper.clientWidth - 30) / 4
|
||||
}
|
||||
},
|
||||
|
||||
calculateScrollWidth() {
|
||||
if (this.$refs.cardList) {
|
||||
// 精确计算原始内容宽度
|
||||
this.totalScrollWidth = Math.floor(
|
||||
this.$refs.cardList.scrollWidth / 2,
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
const wasScrolling = this.isScrolling
|
||||
this.stopScroll()
|
||||
this.getItemWidth()
|
||||
this.calculateScrollWidth()
|
||||
if (
|
||||
wasScrolling &&
|
||||
this.cardList.length > 4 &&
|
||||
this.totalScrollWidth > 0
|
||||
) {
|
||||
this.startScroll()
|
||||
}
|
||||
},
|
||||
|
||||
onHandlePreviewDocs(item) {
|
||||
console.log(item, 'item点击了')
|
||||
this.$emit('previewDocs', item)
|
||||
},
|
||||
|
||||
smoothScroll(timestamp) {
|
||||
if (!this.isScrolling || !this.$refs.cardWrapper) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.startTime) this.startTime = timestamp
|
||||
const elapsed = timestamp - this.startTime
|
||||
const progress = elapsed / (this.scrollDuration * 1000)
|
||||
|
||||
// 处理循环过渡，使用取模运算替代重置
|
||||
let normalizedProgress = progress % 1 // 始终在0-1之间循环
|
||||
|
||||
let newPosition
|
||||
if (this.scrollDirection === 'left') {
|
||||
// 向左滚动 - 使用取模实现无缝循环
|
||||
newPosition = normalizedProgress * this.totalScrollWidth
|
||||
} else {
|
||||
// 向右滚动 - 使用取模实现无缝循环
|
||||
newPosition = (1 - normalizedProgress) * this.totalScrollWidth
|
||||
}
|
||||
|
||||
// 应用新位置
|
||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||
|
||||
// 继续动画
|
||||
this.animationId = requestAnimationFrame(this.smoothScroll)
|
||||
},
|
||||
|
||||
startScroll() {
|
||||
if (
|
||||
this.cardList.length <= 4 ||
|
||||
this.isScrolling ||
|
||||
this.totalScrollWidth <= 0
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
this.isScrolling = true
|
||||
this.startTime = 0
|
||||
|
||||
// 清除现有动画
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId)
|
||||
}
|
||||
|
||||
// 从当前位置开始动画
|
||||
this.startPosition = this.$refs.cardWrapper.scrollLeft || 0
|
||||
|
||||
// 启动动画
|
||||
this.animationId = requestAnimationFrame(this.smoothScroll)
|
||||
},
|
||||
|
||||
stopScroll() {
|
||||
if (!this.isScrolling) return
|
||||
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId)
|
||||
this.animationId = null
|
||||
}
|
||||
this.isScrolling = false
|
||||
},
|
||||
|
||||
scrollLeft() {
|
||||
if (this.cardList.length <= 4 || this.totalScrollWidth <= 0) return
|
||||
|
||||
this.stopScroll()
|
||||
|
||||
const cardWidth = this.itemWidth + 60
|
||||
let currentPos = this.$refs.cardWrapper.scrollLeft
|
||||
let newPosition = currentPos - cardWidth
|
||||
|
||||
// 处理边界，实现循环
|
||||
if (newPosition < 0) {
|
||||
newPosition = this.totalScrollWidth + newPosition
|
||||
}
|
||||
|
||||
// 平滑滚动到新位置
|
||||
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||
|
||||
// 恢复自动滚动
|
||||
setTimeout(() => {
|
||||
this.$refs.cardWrapper.style.scrollBehavior = ''
|
||||
this.startScroll()
|
||||
}, 500)
|
||||
},
|
||||
|
||||
scrollRight() {
|
||||
if (this.cardList.length <= 4 || this.totalScrollWidth <= 0) return
|
||||
|
||||
this.stopScroll()
|
||||
|
||||
const cardWidth = this.itemWidth + 60
|
||||
let currentPos = this.$refs.cardWrapper.scrollLeft
|
||||
let newPosition = currentPos + cardWidth
|
||||
|
||||
// 处理边界，实现循环
|
||||
if (newPosition >= this.totalScrollWidth) {
|
||||
newPosition = newPosition - this.totalScrollWidth
|
||||
}
|
||||
|
||||
// 平滑滚动到新位置
|
||||
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||
|
||||
// 恢复自动滚动
|
||||
setTimeout(() => {
|
||||
this.$refs.cardWrapper.style.scrollBehavior = ''
|
||||
this.startScroll()
|
||||
}, 500)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 样式保持不变 */
|
||||
.card-container {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
@ -80,7 +344,7 @@ export default {
|
|||
}
|
||||
|
||||
& span:last-child {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -91,44 +355,122 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.card-wrapper {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
will-change: scroll-position;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 55, 202, 0.2);
|
||||
border-radius: 8px;
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.arrow-left:hover,
|
||||
.arrow-right:hover {
|
||||
background-color: white;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 55, 202, 0.2);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-width: calc(25% - 45px);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-item-image {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.video-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .video-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.video-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.el-icon-video-play {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-text {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-item-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-item-text {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,62 @@
|
|||
<div class="case-container">
|
||||
<div class="case-header">
|
||||
<span> {{ cardTitle }} </span>
|
||||
<span> 查看更多 </span>
|
||||
<span @click="onHandleViewMore"> 查看更多 </span>
|
||||
</div>
|
||||
|
||||
<div class="case-list" v-for="item in cardList" :key="item.id">
|
||||
<div class="case-left-img">
|
||||
<ImagePreview
|
||||
:height="160"
|
||||
:width="320"
|
||||
:src1="item.imageList[0].url"
|
||||
/>
|
||||
<!-- 轮播容器 -->
|
||||
<div class="carousel-wrapper">
|
||||
<!-- 轮播轨道 - 使用transition实现平滑过渡 -->
|
||||
<div
|
||||
class="carousel-track"
|
||||
:style="{
|
||||
transform: `translateX(-${currentIndex * 100}%)`,
|
||||
transition: transitionDuration,
|
||||
}"
|
||||
>
|
||||
<!-- 复制第一个元素到末尾，最后一个元素到开头，实现无缝衔接 -->
|
||||
<div
|
||||
:key="index"
|
||||
class="case-item"
|
||||
v-for="(item, index) in extendedCardList"
|
||||
>
|
||||
<div class="case-left-img">
|
||||
<el-carousel height="160px">
|
||||
<el-carousel-item
|
||||
v-for="j in item.imageList"
|
||||
:key="j.id"
|
||||
>
|
||||
<ImagePreview
|
||||
:height="160"
|
||||
:width="320"
|
||||
:src1="j.url"
|
||||
/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="case-right-content">
|
||||
<h3>{{ item.caseCompany }}</h3>
|
||||
<div>{{ item.caseIntroduction }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-right-content">
|
||||
<h3>{{ item.caseCompany }}</h3>
|
||||
<div>{{ item.caseIntroduction }} </div>
|
||||
</div>
|
||||
<!-- 左右控制按钮 -->
|
||||
<img
|
||||
alt="向左切换"
|
||||
class="arrow-left"
|
||||
@click="prevSlide"
|
||||
v-if="cardList.length > 1"
|
||||
src="@/assets/images/publicService/arrow-left.png"
|
||||
/>
|
||||
<img
|
||||
alt="向右切换"
|
||||
@click="nextSlide"
|
||||
class="arrow-right"
|
||||
v-if="cardList.length > 1"
|
||||
src="@/assets/images/publicService/arrow-right.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,22 +74,115 @@ export default {
|
|||
|
||||
cardList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
productId: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemWidth: 100,
|
||||
currentIndex: 0, // 当前显示的索引，从1开始（因为我们在开头添加了最后一个元素的副本）
|
||||
transitionDuration: '0.5s', // 过渡动画时长
|
||||
timer: null, // 自动轮播计时器
|
||||
interval: 10000, // 轮播间隔时间(ms)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
|
||||
extendedCardList() {
|
||||
if (this.cardList.length <= 1) return this.cardList
|
||||
|
||||
return [
|
||||
this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
|
||||
...this.cardList, // 原始列表
|
||||
this.cardList[0], // 第一个元素的副本放在末尾
|
||||
]
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getItemWidth()
|
||||
// 启动自动轮播
|
||||
this.startAutoPlay()
|
||||
|
||||
// 监听鼠标进入/离开，暂停/恢复自动轮播
|
||||
const container = this.$el.querySelector('.carousel-wrapper')
|
||||
container.addEventListener('mouseenter', this.stopAutoPlay)
|
||||
container.addEventListener('mouseleave', this.startAutoPlay)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理计时器
|
||||
this.stopAutoPlay()
|
||||
|
||||
// 移除事件监听
|
||||
const container = this.$el.querySelector('.carousel-wrapper')
|
||||
if (container) {
|
||||
container.removeEventListener('mouseenter', this.stopAutoPlay)
|
||||
container.removeEventListener('mouseleave', this.startAutoPlay)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 动态获取 itemWidth
|
||||
getItemWidth() {
|
||||
this.itemWidth = this.$refs.cardItemImage[0].clientWidth
|
||||
// 开始自动轮播
|
||||
startAutoPlay() {
|
||||
this.stopAutoPlay() // 先清除已有计时器
|
||||
this.timer = setInterval(() => {
|
||||
this.nextSlide() // 自动轮播方向：从左到右
|
||||
}, this.interval)
|
||||
},
|
||||
|
||||
// 停止自动轮播
|
||||
stopAutoPlay() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
|
||||
// 下一张（向右切换）- 从左到右显示
|
||||
nextSlide() {
|
||||
// 当到达最后一个真实元素时，切换到复制的第一个元素
|
||||
if (this.currentIndex === this.cardList.length) {
|
||||
this.transitionDuration = '0.5s'
|
||||
this.currentIndex++
|
||||
|
||||
// 动画完成后，瞬间切换到真实的第一个元素
|
||||
setTimeout(() => {
|
||||
this.transitionDuration = '0s'
|
||||
this.currentIndex = 1
|
||||
}, 500)
|
||||
} else {
|
||||
this.transitionDuration = '0.5s'
|
||||
this.currentIndex++
|
||||
}
|
||||
},
|
||||
|
||||
// 上一张（向左切换）- 从右到左显示
|
||||
prevSlide() {
|
||||
// 当在第一个真实元素时，先切换到复制的最后一个元素
|
||||
if (this.currentIndex === 1) {
|
||||
this.transitionDuration = '0.5s'
|
||||
this.currentIndex--
|
||||
|
||||
// 动画完成后，瞬间切换到真实的最后一个元素
|
||||
setTimeout(() => {
|
||||
this.transitionDuration = '0s'
|
||||
this.currentIndex = this.cardList.length
|
||||
}, 500)
|
||||
} else {
|
||||
this.transitionDuration = '0.5s'
|
||||
this.currentIndex--
|
||||
}
|
||||
},
|
||||
|
||||
// 查看更多
|
||||
onHandleViewMore() {
|
||||
this.$router.push({
|
||||
name: 'ProductCaseList',
|
||||
query: {
|
||||
id: this.productId,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -58,7 +191,7 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
.case-container {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding: 0 14px 20px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
|
|
@ -83,7 +216,7 @@ export default {
|
|||
}
|
||||
|
||||
& span:last-child {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -94,13 +227,64 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.case-list {
|
||||
// 轮播容器样式 - 确保不会显示溢出内容
|
||||
.carousel-wrapper {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// padding: 0 10px;
|
||||
// 添加额外的裁剪区域，确保不会显示相邻项的边缘
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
// 轮播轨道样式
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
will-change: transform; // 优化动画性能
|
||||
}
|
||||
|
||||
// 单个案例项样式 - 确保占满整个宽度，不会露出相邻项
|
||||
.case-item {
|
||||
width: 100%; // 确保每个项目占满容器宽度
|
||||
flex-shrink: 0; // 防止项目被压缩
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
z-index: 10; // 确保按钮在内容上方
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.arrow-left:hover,
|
||||
.arrow-right:hover {
|
||||
background-color: white;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.case-left-img {
|
||||
width: 320px;
|
||||
height: 160px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -123,19 +307,26 @@ export default {
|
|||
color: #333333;
|
||||
}
|
||||
div {
|
||||
height: 90px;
|
||||
// width: 100%;
|
||||
// height: 90px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
|
||||
// 多行文本截断：最多显示两行
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
|
||||
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
|
||||
-webkit-line-clamp: 2; /* 限制显示的行数为4行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-carousel__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-carousel__button {
|
||||
background-color: #827e7e;
|
||||
height: 4px;
|
||||
width: 18px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,49 @@
|
|||
<template>
|
||||
<!-- 产品中心 -->
|
||||
<div class="product-center">
|
||||
<!-- 主体内容 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧分类菜单 -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
:key="item.value"
|
||||
class="category-item"
|
||||
v-for="item in leftMenuList"
|
||||
@click="activeTypeValue = item.value"
|
||||
:class="{ active: activeTypeValue === item.value }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<div
|
||||
:key="item.value"
|
||||
class="category-item"
|
||||
v-for="item in leftMenuList"
|
||||
@click="activeTypeValue = item.value"
|
||||
:class="{ active: activeTypeValue == item.value }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧服务卡片区域 -->
|
||||
<div class="content-area">
|
||||
<div class="services-grid">
|
||||
<div class="content-area" ref="servicesGrid">
|
||||
<div
|
||||
:key="item.id"
|
||||
class="services-grid"
|
||||
v-for="item in showProductList"
|
||||
>
|
||||
<div class="card-image">
|
||||
<ImagePreview
|
||||
:height="150"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src1="item.linkImage"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card-title"
|
||||
:style="{ width: itemWidth - 40 + 'px' }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div
|
||||
:key="item.id"
|
||||
class="service-card"
|
||||
v-for="item in showProductList"
|
||||
class="primary-btn"
|
||||
:class="{
|
||||
isDisabled: item.isAccess == 0,
|
||||
}"
|
||||
@click="handleDemo(item)"
|
||||
>
|
||||
<div class="card-image">
|
||||
<img :src="item.linkImage" :alt="item.name" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ item.name }}</h3>
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="btn"
|
||||
@click="handleDemo(item)"
|
||||
:class="{
|
||||
isDisabled: item.isAccess == 0,
|
||||
'btn-primary': item.isAccess == 1,
|
||||
}"
|
||||
>
|
||||
访问演示
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline"
|
||||
@click="handleDetail(item)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
访问演示
|
||||
</div>
|
||||
<div @click="handleDetail(item)"> 查看详情 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,9 +58,15 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
activeTypeValue: 'all', // 当前激活的分类
|
||||
leftMenuList: [], // 左侧菜单列表
|
||||
leftMenuList: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
], // 左侧菜单列表
|
||||
productListAll: [], // 所有产品列表
|
||||
showProductList: [], // 需要显示的产品列表
|
||||
itemWidth: 0, // 产品卡片宽度
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -82,8 +83,15 @@ export default {
|
|||
if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
|
||||
this.initLeftMenuList()
|
||||
}
|
||||
|
||||
this.getItemWidth()
|
||||
},
|
||||
methods: {
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
|
||||
},
|
||||
|
||||
// 初始化左侧菜单列表
|
||||
initLeftMenuList() {
|
||||
try {
|
||||
|
|
@ -92,14 +100,6 @@ export default {
|
|||
this.dict.type &&
|
||||
this.dict.type.tb_product_type
|
||||
) {
|
||||
// 清空现有菜单
|
||||
this.leftMenuList = [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
]
|
||||
|
||||
// 添加字典数据到菜单
|
||||
this.dict.type.tb_product_type.forEach((item) => {
|
||||
this.leftMenuList.push({
|
||||
|
|
@ -174,114 +174,119 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
.product-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.logo-section {
|
||||
height: 100%; /* 设置视口高度 */
|
||||
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;
|
||||
padding: 40px 20px 0;
|
||||
gap: 24px;
|
||||
}
|
||||
box-sizing: border-box; /* 确保padding包含在高度内 */
|
||||
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 12px;
|
||||
padding-top: 2px;
|
||||
max-height: calc(100vh - 80px); /* 减去顶部padding */
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
|
||||
.services-grid {
|
||||
height: 260px; /* 给子元素设置固定高度以便测试滚动 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d6d1d1;
|
||||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
|
||||
// background-color: skyblue;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 165px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #d6d1d1;
|
||||
}
|
||||
|
||||
.services-grid:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
font-weight: bold;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
// 多行文本溢出
|
||||
white-space: nowrap; /* 禁止文本换行 */
|
||||
overflow: hidden; /* 超出容器部分隐藏 */
|
||||
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
div {
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& div:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
color: white;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
& div:last-child {
|
||||
border: 1px solid #00c7ef;
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
border-color: #ccc !important;
|
||||
cursor: not-allowed !important;
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-item {
|
||||
|
|
@ -294,11 +299,13 @@ export default {
|
|||
font-size: 14px;
|
||||
color: #666;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
|
|
@ -308,156 +315,4 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 服务卡片区域 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 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: none;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
// background-color: #4a90e2;
|
||||
color: white;
|
||||
// border-color: #4a90e2;
|
||||
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
background-color: #ccc;
|
||||
color: #fff;
|
||||
border-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
// background-color: #357abd;
|
||||
// border-color: #357abd;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #4a90e2;
|
||||
// border-color: #4a90e2;
|
||||
|
||||
// border-image: linear-gradient(
|
||||
// 180deg,
|
||||
// rgba(0, 199, 239, 1),
|
||||
// rgba(0, 94, 239, 1)
|
||||
// )
|
||||
// 1 1;
|
||||
|
||||
border: 1px solid #00c7ef;
|
||||
}
|
||||
|
||||
.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: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,465 @@
|
|||
<template>
|
||||
<!-- 产品中心 -->
|
||||
<div class="product-center">
|
||||
<!-- 主体内容 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧分类菜单 -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
:key="item.value"
|
||||
class="category-item"
|
||||
v-for="item in leftMenuList"
|
||||
@click="activeTypeValue = item.value"
|
||||
:class="{ active: activeTypeValue === item.value }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧服务卡片区域 -->
|
||||
<div class="content-area">
|
||||
<div class="services-grid">
|
||||
<div
|
||||
:key="item.id"
|
||||
class="service-card"
|
||||
v-for="item in showProductList"
|
||||
>
|
||||
<div class="card-image">
|
||||
<img :src="item.linkImage" :alt="item.name" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ item.name }}</h3>
|
||||
<div class="card-actions">
|
||||
<button
|
||||
class="btn"
|
||||
@click="handleDemo(item)"
|
||||
:class="{
|
||||
isDisabled: item.isAccess == 0,
|
||||
'btn-primary': item.isAccess == 1,
|
||||
}"
|
||||
>
|
||||
访问演示
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline"
|
||||
@click="handleDetail(item)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductCenterListAPI } from '@/api/publicService/productCenter'
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
dicts: ['tb_product_type'],
|
||||
data() {
|
||||
return {
|
||||
activeTypeValue: 'all', // 当前激活的分类
|
||||
leftMenuList: [], // 左侧菜单列表
|
||||
productListAll: [], // 所有产品列表
|
||||
showProductList: [], // 需要显示的产品列表
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProductCenterListInScreenFun()
|
||||
},
|
||||
mounted() {
|
||||
// 监听字典数据加载完成事件
|
||||
this.$on('dictReady', (dict) => {
|
||||
this.initLeftMenuList()
|
||||
})
|
||||
|
||||
// 如果字典数据已经加载完成，直接初始化
|
||||
if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
|
||||
this.initLeftMenuList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化左侧菜单列表
|
||||
initLeftMenuList() {
|
||||
try {
|
||||
if (
|
||||
this.dict &&
|
||||
this.dict.type &&
|
||||
this.dict.type.tb_product_type
|
||||
) {
|
||||
// 清空现有菜单
|
||||
this.leftMenuList = [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
]
|
||||
|
||||
// 添加字典数据到菜单
|
||||
this.dict.type.tb_product_type.forEach((item) => {
|
||||
this.leftMenuList.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {}
|
||||
},
|
||||
// 访问演示地址
|
||||
handleDemo(service) {
|
||||
if (service.isAccess == 0) {
|
||||
this.$modal.msgWarning('该产品不支持访问')
|
||||
return
|
||||
}
|
||||
|
||||
// 确保 URL 是完整的绝对路径
|
||||
let url = service.linkUrl
|
||||
// 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
// 如果 URL 以 www. 开头，直接添加 https://
|
||||
if (url.startsWith('www.')) {
|
||||
url = 'https://' + url
|
||||
} else {
|
||||
// 其他情况，添加 https://
|
||||
url = 'https://' + url
|
||||
}
|
||||
}
|
||||
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
// 查看详情
|
||||
handleDetail(service) {
|
||||
this.$router.push({
|
||||
name: 'ProductDetail',
|
||||
params: { id: service.id },
|
||||
})
|
||||
},
|
||||
// 鼠标悬浮
|
||||
handleCardHover(serviceId) {
|
||||
this.hoveredCard = serviceId
|
||||
},
|
||||
// 鼠标离开
|
||||
handleCardLeave() {
|
||||
this.hoveredCard = null
|
||||
},
|
||||
|
||||
// 获取产品列表
|
||||
async getProductCenterListInScreenFun() {
|
||||
const res = await getProductCenterListAPI({})
|
||||
this.productListAll = res.data
|
||||
this.showProductList = this.productListAll
|
||||
},
|
||||
},
|
||||
|
||||
// 监听分类变化
|
||||
watch: {
|
||||
activeTypeValue(newVal) {
|
||||
if (newVal === 'all') {
|
||||
this.showProductList = this.productListAll
|
||||
} else {
|
||||
this.showProductList = this.productListAll.filter(
|
||||
(item) => item.typeId === newVal,
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.product-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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: 40px 32px 0;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
background-color: pink;
|
||||
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;
|
||||
background: url('../../../assets/images/publicService/btn-sel.png')
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 服务卡片区域 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 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: none;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
// background-color: #4a90e2;
|
||||
color: white;
|
||||
// border-color: #4a90e2;
|
||||
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
background-color: #ccc;
|
||||
color: #fff;
|
||||
border-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
// background-color: #357abd;
|
||||
// border-color: #357abd;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #4a90e2;
|
||||
// border-color: #4a90e2;
|
||||
|
||||
// border-image: linear-gradient(
|
||||
// 180deg,
|
||||
// rgba(0, 199, 239, 1),
|
||||
// rgba(0, 94, 239, 1)
|
||||
// )
|
||||
// 1 1;
|
||||
|
||||
border: 1px solid #00c7ef;
|
||||
}
|
||||
|
||||
.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: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<!-- 产品案例集合列表 -->
|
||||
<div class="case-list-container">
|
||||
<div class="case-header">
|
||||
<div class="left">
|
||||
<span> 产品中心 </span>
|
||||
<span> > </span>
|
||||
<span> 产品详情 </span>
|
||||
<span> > </span>
|
||||
<span> 案例集 </span>
|
||||
</div>
|
||||
<div class="right" @click="onHandleGoBack">
|
||||
<img src="@/assets/images/publicService/go-back.png" alt="" />
|
||||
<span>返回</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-list" v-for="item in cardList" :key="item.id">
|
||||
<div class="case-left-img">
|
||||
<el-carousel height="160px">
|
||||
<el-carousel-item v-for="j in item.imageList" :key="j.id">
|
||||
<ImagePreview
|
||||
:height="160"
|
||||
:width="320"
|
||||
:src1="j.url"
|
||||
/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="case-right-content">
|
||||
<h3>{{ item.caseCompany }}</h3>
|
||||
<div>{{ item.caseIntroduction }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductCenterDetailAPI } from '@/api/publicService/productCenter'
|
||||
export default {
|
||||
name: 'CaseContainer',
|
||||
props: {
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemWidth: 100,
|
||||
cardList: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getItemWidth()
|
||||
this.getProductCenterDetailInScreenFun(this.$route.query.id)
|
||||
},
|
||||
methods: {
|
||||
// 动态获取 itemWidth
|
||||
getItemWidth() {
|
||||
// this.itemWidth = this.$refs.cardItemImage[0].clientWidth
|
||||
},
|
||||
|
||||
// 返回
|
||||
onHandleGoBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
|
||||
// 获取产品中心详情
|
||||
async getProductCenterDetailInScreenFun(id) {
|
||||
const res = await getProductCenterDetailAPI({ id })
|
||||
const { list } = res.data
|
||||
this.cardList = list
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.case-list-container {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.case-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
|
||||
.left {
|
||||
span {
|
||||
color: #787878;
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
letter-spacing: 1px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
// & span:first-child {
|
||||
// font-weight: bold;
|
||||
// font-size: 18px;
|
||||
// color: #333333;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// text-transform: none;
|
||||
// font-family: 'PingFang SC', sans-serif;
|
||||
// letter-spacing: 1px;
|
||||
// }
|
||||
|
||||
// & span:last-child {
|
||||
// font-size: 16px;
|
||||
// background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// background-clip: text;
|
||||
// cursor: pointer;
|
||||
// letter-spacing: 1px;
|
||||
// font-family: 'PingFang SC', sans-serif;
|
||||
// }
|
||||
}
|
||||
|
||||
.case-list {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.case-left-img {
|
||||
width: 320px;
|
||||
height: 160px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.case-left-img-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.case-right-content {
|
||||
flex: 1;
|
||||
height: 160px;
|
||||
padding-left: 36px;
|
||||
background-color: #f0f0f0;
|
||||
|
||||
h3 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top: 36px;
|
||||
height: 70px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
div {
|
||||
height: 90px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
|
||||
// 多行文本截断：最多显示两行
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-carousel__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-carousel__button {
|
||||
background-color: #827e7e;
|
||||
height: 4px;
|
||||
width: 18px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,237 +1,122 @@
|
|||
<template>
|
||||
<div class="product-detail">
|
||||
<!-- Added breadcrumb navigation with back button -->
|
||||
<div class="breadcrumb">
|
||||
<div class="breadcrumb-nav">
|
||||
<span class="breadcrumb-link">产品中心</span>
|
||||
<span class="breadcrumb-separator">></span>
|
||||
<span class="breadcrumb-current">产品详情</span>
|
||||
<div class="product-header">
|
||||
<div class="left">
|
||||
<span> 产品中心 </span>
|
||||
<span> > </span>
|
||||
<span> 产品详情 </span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="arrow-left-icon">←</i>
|
||||
<button class="btn-edit" @click="goBack">返回</button>
|
||||
<div class="right" @click="onHandleGoBack">
|
||||
<img src="@/assets/images/publicService/go-back.png" alt="" />
|
||||
<span>返回</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="section product-intro">
|
||||
<div class="intro-content">
|
||||
<div class="intro-image">
|
||||
<img :src="productDetail.linkImage" alt="产品介绍" />
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-header">
|
||||
<h2>产品介绍</h2>
|
||||
<button class="btn-primary">访问演示</button>
|
||||
</div>
|
||||
<p>
|
||||
{{ productDetail.introduction }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-image">
|
||||
<el-image
|
||||
fit="cover"
|
||||
:src="productDetail.linkImage"
|
||||
style="width: 480px; height: 270px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="product-info">
|
||||
<div class="product-info-header">
|
||||
<span>产品介绍</span>
|
||||
<span
|
||||
class="primary-btn"
|
||||
@click="onHandleGoAccess"
|
||||
:class="{
|
||||
isDisabled: productDetail.isAccess == 0,
|
||||
}"
|
||||
>
|
||||
访问演示
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-info-content">
|
||||
{{ productDetail.introduction }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContainer cardTitle="宣传手册" :cardList="productBrochures" />
|
||||
<CardContainer
|
||||
cardTitle="宣传手册"
|
||||
:cardList="productBrochures"
|
||||
@previewDocs="previewDocs"
|
||||
v-if="productBrochures && productBrochures.length > 0"
|
||||
/>
|
||||
<CardContainer
|
||||
typeCard="video"
|
||||
cardTitle="宣传视频"
|
||||
:cardList="productVideos"
|
||||
v-if="productVideos.length > 0"
|
||||
@previewDocs="previewDocs"
|
||||
v-if="productVideos && productVideos.length > 0"
|
||||
/>
|
||||
<CaseContainer cardTitle="产品案例" :cardList="productCases" />
|
||||
<CaseContainer
|
||||
cardTitle="产品案例"
|
||||
:productId="productId"
|
||||
:cardList="productCases"
|
||||
/>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
>
|
||||
<template #outerContent>
|
||||
<div class="preview-docs">
|
||||
<iframe :src="iframeUrl" width="100%" height="100%" />
|
||||
</div>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardContainer from './components/card-container'
|
||||
import CaseContainer from './components/case-container'
|
||||
import DialogModel from '@/components/DialogModel/index'
|
||||
|
||||
import { getProductCenterDetailAPI } from '@/api/publicService/productCenter'
|
||||
import { encryptCBCTime } from '@/utils/aes'
|
||||
import useBase64 from '@/utils/base64Utils.js'
|
||||
|
||||
export default {
|
||||
name: 'ProductDetail',
|
||||
components: {
|
||||
CardContainer,
|
||||
CaseContainer,
|
||||
DialogModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNav: 'products',
|
||||
searchKeyword: '',
|
||||
brochureIndex: 0,
|
||||
videoIndex: 0,
|
||||
caseIndex: 0,
|
||||
itemsPerView: 4,
|
||||
autoPlayInterval: null,
|
||||
brochureOffset: 0,
|
||||
videoOffset: 0,
|
||||
brochureAutoInterval: null,
|
||||
videoAutoInterval: null,
|
||||
brochurePaused: false,
|
||||
videoPaused: false,
|
||||
scrollSpeed: 0.5, // pixels per frame
|
||||
apiBase: process.env.VUE_APP_BASE_API,
|
||||
intro: '/profile/avatar/2025/09/03/ldst.png',
|
||||
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',
|
||||
},
|
||||
],
|
||||
brochures: [
|
||||
{
|
||||
title: '智慧食堂产品手册1',
|
||||
image: '/profile/avatar/2025/09/03/ldst.png',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品手册2',
|
||||
image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品手册3',
|
||||
image: '/profile/avatar/2025/09/03/ldst.png',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品手册4',
|
||||
image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品手册5',
|
||||
image: '/profile/avatar/2025/09/03/ldst.png',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品手册6',
|
||||
image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg',
|
||||
},
|
||||
],
|
||||
videos: [
|
||||
{
|
||||
title: '智慧食堂产品视频1',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品视频2',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品视频3',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品视频4',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品视频5',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi1.mp4',
|
||||
},
|
||||
{
|
||||
title: '智慧食堂产品视频6',
|
||||
thumbnail: '/profile/avatar/2025/09/03/vi2.mp4',
|
||||
},
|
||||
],
|
||||
cases: [
|
||||
{
|
||||
company: '安徽送变电工程有限公司',
|
||||
description:
|
||||
'基于移动互联网(微信、APP)，整合所有数据资源(在线订餐、充值、点评)，由内到外的为学校师生提供便民服务，深度定制餐厅、校本文档精准、适用于智慧食堂数据资源，通过设备、消费设备、自助充值、智慧收银、零售管理、多样化计方式)，致力提升学校整体服务和管理的能力，打造名副其实与时俱进的互联网餐厅。',
|
||||
image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400',
|
||||
},
|
||||
{
|
||||
company: '北京科技大学智慧食堂',
|
||||
description:
|
||||
'通过智慧食堂系统的实施，学校食堂管理效率提升了40%，学生满意度达到95%以上，实现了真正的数字化转型，为师生提供更便捷的用餐体验。',
|
||||
image: '/profile/avatar/2025/09/03/001_20250903132300A001.jpg?height=280&width=400',
|
||||
},
|
||||
{
|
||||
company: '上海交通大学',
|
||||
description:
|
||||
'采用先进的人工智能技术，实现了食堂的智能化管理，包括智能点餐、营养分析、库存管理等功能，大大提升了运营效率。',
|
||||
image: '/profile/avatar/2025/09/03/ldst.png?height=280&width=400',
|
||||
},
|
||||
],
|
||||
animationFrame: null,
|
||||
|
||||
productDetail: {}, // 产品详情
|
||||
iframeUrl: '',
|
||||
productDetail: {
|
||||
linkImage: '',
|
||||
}, // 产品详情
|
||||
productBrochures: [], // 产品宣传手册
|
||||
productVideos: [], // 产品宣传视频
|
||||
productCases: [], // 产品案例
|
||||
dialogConfig: {
|
||||
outerTitle: '查看',
|
||||
outerVisible: false,
|
||||
outerWidth: '90%',
|
||||
minHeight: '90vh',
|
||||
},
|
||||
productId: '',
|
||||
lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
|
||||
filePreviewPath: 'http://218.21.27.6:18013/onlinePreview?url=',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.productId = this.$route.params.id
|
||||
// console.log('产品ID:', this.productId)
|
||||
|
||||
this.productId = this.$route.params?.id
|
||||
this.getProductCenterDetailInScreenFun(this.$route.params?.id)
|
||||
},
|
||||
computed: {
|
||||
maxBrochureIndex() {
|
||||
return Math.max(0, this.brochures.length - this.itemsPerView)
|
||||
},
|
||||
maxVideoIndex() {
|
||||
return Math.max(0, this.videos.length - this.itemsPerView)
|
||||
},
|
||||
maxCaseIndex() {
|
||||
return Math.max(0, this.cases.length - 1)
|
||||
},
|
||||
displayBrochures() {
|
||||
return [...this.brochures, ...this.brochures, ...this.brochures]
|
||||
},
|
||||
displayVideos() {
|
||||
return [...this.videos, ...this.videos, ...this.videos]
|
||||
},
|
||||
brochureTrackStyle() {
|
||||
const itemWidth = 280 // approximate width including gap
|
||||
return {
|
||||
transform: `translateX(-${this.brochureOffset}px)`,
|
||||
transition: 'none',
|
||||
}
|
||||
},
|
||||
videoTrackStyle() {
|
||||
const itemWidth = 280 // approximate width including gap
|
||||
return {
|
||||
transform: `translateX(-${this.videoOffset}px)`,
|
||||
transition: 'none',
|
||||
}
|
||||
},
|
||||
caseTrackStyle() {
|
||||
return {
|
||||
transform: `translateX(-${this.caseIndex * 100}%)`,
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.startAutoPlay()
|
||||
this.startSmoothScroll()
|
||||
this.handleResize()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopAutoPlay()
|
||||
this.stopSmoothScroll()
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取产品中心详情
|
||||
async getProductCenterDetailInScreenFun(id) {
|
||||
const res = await getProductCenterDetailAPI({ id })
|
||||
console.log(res, 'res详情')
|
||||
|
||||
const {
|
||||
name,
|
||||
list,
|
||||
|
|
@ -244,7 +129,7 @@ export default {
|
|||
introduction,
|
||||
videoList,
|
||||
fileList,
|
||||
} = res?.data
|
||||
} = res.data
|
||||
|
||||
this.productDetail = {
|
||||
name,
|
||||
|
|
@ -262,159 +147,88 @@ export default {
|
|||
this.productBrochures = fileList
|
||||
},
|
||||
|
||||
handleNavChange(navKey) {
|
||||
this.activeNav = navKey
|
||||
// 可以根据导航项做页面跳转或其他操作
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
|
||||
prevBrochure() {
|
||||
const containerWidth = this.$refs.brochureCarousel.offsetWidth
|
||||
this.brochureOffset -= containerWidth
|
||||
if (this.brochureOffset < 0) {
|
||||
this.brochureOffset = this.brochures.length * 280
|
||||
// 访问演示
|
||||
onHandleGoAccess() {
|
||||
if (this.productDetail.isAccess == 0) {
|
||||
this.$modal.msgWarning('该产品不支持访问')
|
||||
return false
|
||||
}
|
||||
},
|
||||
nextBrochure() {
|
||||
const containerWidth = this.$refs.brochureCarousel.offsetWidth
|
||||
this.brochureOffset += containerWidth
|
||||
const maxOffset = this.brochures.length * 280
|
||||
if (this.brochureOffset >= maxOffset * 2) {
|
||||
this.brochureOffset = maxOffset
|
||||
}
|
||||
},
|
||||
prevVideo() {
|
||||
const containerWidth = this.$refs.videoCarousel.offsetWidth
|
||||
this.videoOffset -= containerWidth
|
||||
if (this.videoOffset < 0) {
|
||||
this.videoOffset = this.videos.length * 280
|
||||
}
|
||||
},
|
||||
nextVideo() {
|
||||
const containerWidth = this.$refs.videoCarousel.offsetWidth
|
||||
this.videoOffset += containerWidth
|
||||
const maxOffset = this.videos.length * 280
|
||||
if (this.videoOffset >= maxOffset * 2) {
|
||||
this.videoOffset = maxOffset
|
||||
}
|
||||
},
|
||||
prevCase() {
|
||||
if (this.caseIndex > 0) {
|
||||
this.caseIndex--
|
||||
}
|
||||
},
|
||||
nextCase() {
|
||||
if (this.caseIndex < this.maxCaseIndex) {
|
||||
this.caseIndex++
|
||||
}
|
||||
},
|
||||
startAutoPlay() {
|
||||
this.autoPlayInterval = setInterval(() => {
|
||||
// Auto-advance cases every 5 seconds
|
||||
if (this.caseIndex < this.maxCaseIndex) {
|
||||
this.caseIndex++
|
||||
|
||||
// 确保 URL 是完整的绝对路径
|
||||
let url = this.productDetail.linkUrl
|
||||
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
if (url.startsWith('www.')) {
|
||||
url = 'https://' + url
|
||||
} else {
|
||||
this.caseIndex = 0
|
||||
url = 'https://' + url
|
||||
}
|
||||
}, 5000)
|
||||
},
|
||||
stopAutoPlay() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval)
|
||||
this.autoPlayInterval = null
|
||||
}
|
||||
},
|
||||
startSmoothScroll() {
|
||||
const animate = () => {
|
||||
if (!this.brochurePaused) {
|
||||
this.brochureOffset += 0.5
|
||||
const itemWidth = 280
|
||||
const maxOffset = this.brochures.length * itemWidth
|
||||
|
||||
if (this.brochureOffset >= maxOffset * 2) {
|
||||
this.brochureOffset = maxOffset
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.videoPaused) {
|
||||
this.videoOffset += 0.5
|
||||
const itemWidth = 280
|
||||
const maxOffset = this.videos.length * itemWidth
|
||||
|
||||
if (this.videoOffset >= maxOffset * 2) {
|
||||
this.videoOffset = maxOffset
|
||||
}
|
||||
}
|
||||
|
||||
this.animationFrame = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
const itemWidth = 280
|
||||
this.brochureOffset = this.brochures.length * itemWidth
|
||||
this.videoOffset = this.videos.length * itemWidth
|
||||
|
||||
this.animationFrame = requestAnimationFrame(animate)
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
stopSmoothScroll() {
|
||||
if (this.animationFrame) {
|
||||
cancelAnimationFrame(this.animationFrame)
|
||||
this.animationFrame = null
|
||||
|
||||
// 返回
|
||||
onHandleGoBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
|
||||
// 预览文档
|
||||
previewDocs(item) {
|
||||
const { originalName, url } = item
|
||||
let filePreviewPath = ''
|
||||
let time = encryptCBCTime(Math.floor(Date.now()).toString())
|
||||
// if (originalName.split('.')[1].toLowerCase() === 'pdf') {
|
||||
// filePreviewPath = filePath.includes('http')
|
||||
// ? filePath
|
||||
// : `${this.lookFile}/${filePath}`
|
||||
// } else {
|
||||
// const encodedPath = filePath.includes('http')
|
||||
// ? encodeURIComponent(useBase64.encode64(`${filePath}`))
|
||||
// : encodeURIComponent(
|
||||
// useBase64.encode64(`${this.lookFile}/${filePath}`),
|
||||
// )
|
||||
// filePreviewPath = `${this.filePreviewPath}${encodedPath}&token=${time}`
|
||||
// }
|
||||
|
||||
const encodedPath = url.includes('http')
|
||||
? encodeURIComponent(useBase64.encode64(`${url}`))
|
||||
: encodeURIComponent(
|
||||
useBase64.encode64(`${this.lookFile}/${url}`),
|
||||
)
|
||||
filePreviewPath = `${this.lookFile}${encodedPath}&token=${time}`
|
||||
|
||||
const isEdgeOrOther = /Edg|Chrome|Firefox|Safari/.test(
|
||||
navigator.userAgent,
|
||||
)
|
||||
if (isEdgeOrOther) {
|
||||
const url = new URL(filePreviewPath)
|
||||
url.searchParams.append('preventDownload', 'true')
|
||||
filePreviewPath = url.toString()
|
||||
}
|
||||
},
|
||||
pauseBrochureScroll() {
|
||||
this.brochurePaused = true
|
||||
},
|
||||
resumeBrochureScroll() {
|
||||
this.brochurePaused = false
|
||||
},
|
||||
pauseVideoScroll() {
|
||||
this.videoPaused = true
|
||||
},
|
||||
resumeVideoScroll() {
|
||||
this.videoPaused = false
|
||||
},
|
||||
startInfiniteScroll() {},
|
||||
stopInfiniteScroll() {},
|
||||
playVideo(video) {
|
||||
console.log('Playing video:', video.title)
|
||||
// 实现视频播放逻辑
|
||||
},
|
||||
handleVideoError(event) {
|
||||
console.log('[v0] Video loading error:', event.target.src)
|
||||
// 视频加载失败时，可以设置默认缩略图
|
||||
event.target.style.display = 'none'
|
||||
const img = document.createElement('img')
|
||||
img.src = '/placeholder.svg?height=180&width=240'
|
||||
img.alt = 'Video thumbnail'
|
||||
img.style.width = '100%'
|
||||
img.style.height = '100%'
|
||||
img.style.objectFit = 'cover'
|
||||
event.target.parentNode.appendChild(img)
|
||||
},
|
||||
|
||||
handleVideoLoaded(event) {
|
||||
console.log('[v0] Video metadata loaded:', event.target.src)
|
||||
// 视频元数据加载完成，第一帧应该可以显示了
|
||||
},
|
||||
|
||||
viewCase() {
|
||||
// 跳转到产品详情页，传递当前产品ID
|
||||
// this.$router.push(`/product-detail/${this.productId}`);
|
||||
this.$router.push({
|
||||
name: 'ProductCase',
|
||||
params: { id: `${this.productId}` },
|
||||
})
|
||||
this.iframeUrl = filePreviewPath
|
||||
console.log('this.iframeUrl', this.iframeUrl)
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.product-detail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
|
|
@ -976,4 +790,118 @@ export default {
|
|||
flex: 0 0 calc(100% - 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
|
||||
.left {
|
||||
span {
|
||||
color: #787878;
|
||||
}
|
||||
& span:last-child {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
span {
|
||||
background: linear-gradient(90deg, #00c7ef 0%, #005eef 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
letter-spacing: 1px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0 14px;
|
||||
gap: 24px;
|
||||
|
||||
.product-image {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
height: 240px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
& span:first-child {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
padding: 6px 10px;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
& span:last-child:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
border-color: #ccc !important;
|
||||
cursor: not-allowed !important;
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info-content {
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.8;
|
||||
|
||||
display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
|
||||
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
|
||||
-webkit-line-clamp: 4; /* 限制显示的行数为4行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
}
|
||||
}
|
||||
|
||||
.preview-docs {
|
||||
width: 100%;
|
||||
height: 79vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue