禅道bug修复
This commit is contained in:
parent
36fa9090ba
commit
a2fe7564d5
|
|
@ -1,13 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<el-image
|
<div>
|
||||||
:src="src1"
|
<el-image
|
||||||
fit="cover"
|
:src="src1"
|
||||||
:style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
|
fit="cover"
|
||||||
>
|
:style="`width:${realWidth};height:${realHeight};border-radius: ${borderRadius}px;`"
|
||||||
<div slot="error" class="image-slot">
|
v-if="!isShowMask"
|
||||||
<i class="el-icon-picture-outline"></i>
|
>
|
||||||
</div>
|
<div slot="error" class="image-slot">
|
||||||
</el-image>
|
<i class="el-icon-picture-outline"></i>
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
|
||||||
|
<el-image
|
||||||
|
:src="src1"
|
||||||
|
v-else
|
||||||
|
fit="cover"
|
||||||
|
: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>
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -36,6 +51,10 @@ export default {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
isShowMask: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
realSrc() {
|
realSrc() {
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@ export const constantRoutes = [
|
||||||
children: [
|
children: [
|
||||||
// 产品中心
|
// 产品中心
|
||||||
{
|
{
|
||||||
path: 'productCenter',
|
path: 'ProductCenter',
|
||||||
component: () =>
|
component: () =>
|
||||||
import('@/views/publicService/productCenter/index.vue'),
|
import('@/views/publicService/productCenter/index.vue'),
|
||||||
name: 'ProductCenter',
|
name: 'ProductCenter',
|
||||||
|
|
@ -123,7 +123,7 @@ export const constantRoutes = [
|
||||||
path: 'commonCom',
|
path: 'commonCom',
|
||||||
component: () =>
|
component: () =>
|
||||||
import('@/views/publicService/commonCom/index.vue'),
|
import('@/views/publicService/commonCom/index.vue'),
|
||||||
name: 'commonCom',
|
name: 'CommonCom',
|
||||||
},
|
},
|
||||||
// 宣传物料
|
// 宣传物料
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,6 @@
|
||||||
<el-select
|
<el-select
|
||||||
clearable
|
clearable
|
||||||
filterable
|
filterable
|
||||||
multiple
|
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
placeholder="请选择类型"
|
placeholder="请选择类型"
|
||||||
@change="handleProductIdChange"
|
@change="handleProductIdChange"
|
||||||
|
|
@ -167,7 +166,7 @@ export default {
|
||||||
cover: [], // 封面
|
cover: [], // 封面
|
||||||
version: '', // 版本
|
version: '', // 版本
|
||||||
productName: '', // 归属产品
|
productName: '', // 归属产品
|
||||||
productId: '', // 归属产品
|
productId: [], // 归属产品
|
||||||
description: '', // 描述
|
description: '', // 描述
|
||||||
},
|
},
|
||||||
// 基本信息表单校验规则
|
// 基本信息表单校验规则
|
||||||
|
|
@ -236,12 +235,9 @@ export default {
|
||||||
typeId, // 类型
|
typeId, // 类型
|
||||||
version, // 版本
|
version, // 版本
|
||||||
typeName, // 类型名称
|
typeName, // 类型名称
|
||||||
productName: productName.substring(
|
productName, // 归属产品
|
||||||
0,
|
|
||||||
productName.length - 1,
|
|
||||||
), // 归属产品
|
|
||||||
description,
|
description,
|
||||||
productId: productId.join(','),
|
productId,
|
||||||
}
|
}
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
const fileMsg = []
|
const fileMsg = []
|
||||||
|
|
@ -305,11 +301,15 @@ export default {
|
||||||
|
|
||||||
// 类型ID改变事件
|
// 类型ID改变事件
|
||||||
handleTypeIdChange(value) {
|
handleTypeIdChange(value) {
|
||||||
this.addAndEditForm.typeName = this.dict.type.tb_product_type.find(
|
this.addAndEditForm.productId = ''
|
||||||
(item) => item.value === value,
|
if (value) {
|
||||||
).label
|
this.addAndEditForm.typeName =
|
||||||
|
this.dict.type.tb_product_type.find(
|
||||||
|
(item) => item.value === value,
|
||||||
|
).label
|
||||||
|
|
||||||
this.getProductList(value)
|
this.getProductList(value)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取归属产品下拉选
|
// 获取归属产品下拉选
|
||||||
|
|
@ -321,15 +321,23 @@ export default {
|
||||||
|
|
||||||
// 归属产品ID改变事件
|
// 归属产品ID改变事件
|
||||||
handleProductIdChange(value) {
|
handleProductIdChange(value) {
|
||||||
this.addAndEditForm.productName = ''
|
// this.addAndEditForm.productName = ''
|
||||||
if (value.length > 0) {
|
// if (value.length > 0) {
|
||||||
{
|
// {
|
||||||
value.forEach((item) => {
|
// value.forEach((item) => {
|
||||||
this.addAndEditForm.productName +=
|
// this.addAndEditForm.productName +=
|
||||||
this.productList.find((j) => item == j.id).name +
|
// this.productList.find((j) => item == j.id).name +
|
||||||
','
|
// ','
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
this.addAndEditForm.productName = this.productList.find(
|
||||||
|
(j) => value == j.id,
|
||||||
|
).name
|
||||||
|
} else {
|
||||||
|
this.addAndEditForm.productName = ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -353,7 +361,8 @@ export default {
|
||||||
typeId: typeId + '',
|
typeId: typeId + '',
|
||||||
version,
|
version,
|
||||||
typeName,
|
typeName,
|
||||||
productId: productIds.map((e) => e * 1),
|
// productId: productIds.map((e) => e * 1),
|
||||||
|
productId: productIds * 1,
|
||||||
description,
|
description,
|
||||||
productName,
|
productName,
|
||||||
file: files
|
file: files
|
||||||
|
|
|
||||||
|
|
@ -100,10 +100,16 @@
|
||||||
:prop="column.prop"
|
:prop="column.prop"
|
||||||
:label="column.label"
|
:label="column.label"
|
||||||
v-for="column in columns"
|
v-for="column in columns"
|
||||||
|
show-overflow-tooltip
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<template v-if="column.prop === 'file'">
|
<template v-if="column.prop === 'file'">
|
||||||
{{ scope.row.files[0].originalName }}
|
<!-- {{ scope.row.files[0].originalName }} -->
|
||||||
|
|
||||||
|
<span v-if="scope.row.files.length > 0">
|
||||||
|
{{ scope.row.files[0].originalName }}
|
||||||
|
</span>
|
||||||
|
<span v-else> / </span>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="column.prop === 'fileType'">
|
<template v-if="column.prop === 'fileType'">
|
||||||
<el-tag size="mini" type="primary">
|
<el-tag size="mini" type="primary">
|
||||||
|
|
|
||||||
|
|
@ -349,7 +349,6 @@ export default {
|
||||||
},
|
},
|
||||||
// 保存操作:校验所有表单
|
// 保存操作:校验所有表单
|
||||||
async handleSave() {
|
async handleSave() {
|
||||||
console.log(this.addAndEditForm, '基本信息表单')
|
|
||||||
this.$message.closeAll()
|
this.$message.closeAll()
|
||||||
try {
|
try {
|
||||||
// 1. 校验基本信息表单
|
// 1. 校验基本信息表单
|
||||||
|
|
@ -375,48 +374,51 @@ export default {
|
||||||
let errorCaseIndex = ''
|
let errorCaseIndex = ''
|
||||||
|
|
||||||
// 遍历所有案例表单
|
// 遍历所有案例表单
|
||||||
this.editableTabs.forEach((tab, tabIndex) => {
|
|
||||||
if (!isValid) return // 如果已经发现错误,停止检查
|
|
||||||
|
|
||||||
// 检查当前案例的每个必填字段
|
if (this.editableTabs.length > 0) {
|
||||||
requiredFields.forEach((field) => {
|
this.editableTabs.forEach((tab, tabIndex) => {
|
||||||
if (!isValid) return
|
if (!isValid) return // 如果已经发现错误,停止检查
|
||||||
|
|
||||||
const value = tab.formInfo[field.key]
|
// 检查当前案例的每个必填字段
|
||||||
// 检查值是否为空(考虑空字符串、undefined、null)
|
requiredFields.forEach((field) => {
|
||||||
if (
|
if (!isValid) return
|
||||||
value === '' ||
|
|
||||||
value === undefined ||
|
const value = tab.formInfo[field.key]
|
||||||
value === null
|
// 检查值是否为空(考虑空字符串、undefined、null)
|
||||||
) {
|
if (
|
||||||
|
value === '' ||
|
||||||
|
value === undefined ||
|
||||||
|
value === null
|
||||||
|
) {
|
||||||
|
isValid = false
|
||||||
|
errorCaseIndex = tabIndex
|
||||||
|
errorMessage = `案例${tabIndex + 1}的${
|
||||||
|
field.name
|
||||||
|
}为必填项`
|
||||||
|
}
|
||||||
|
// 对数字类型进行额外检查(避免0被误判)
|
||||||
|
else if (
|
||||||
|
field.key === 'caseSort' &&
|
||||||
|
(isNaN(value) || value === '')
|
||||||
|
) {
|
||||||
|
isValid = false
|
||||||
|
errorCaseIndex = tabIndex
|
||||||
|
errorMessage = `案例${tabIndex + 1}的${
|
||||||
|
field.name
|
||||||
|
}必须为有效数字`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 检查案例图片(如果需要必填的话)
|
||||||
|
if (isValid && tab.formInfo.caseImage.length === 0) {
|
||||||
isValid = false
|
isValid = false
|
||||||
|
errorMessage = `案例${
|
||||||
|
tabIndex + 1
|
||||||
|
}请至少上传一张案例图片`
|
||||||
errorCaseIndex = tabIndex
|
errorCaseIndex = tabIndex
|
||||||
errorMessage = `案例${tabIndex + 1}的${
|
|
||||||
field.name
|
|
||||||
}为必填项`
|
|
||||||
}
|
|
||||||
// 对数字类型进行额外检查(避免0被误判)
|
|
||||||
else if (
|
|
||||||
field.key === 'caseSort' &&
|
|
||||||
(isNaN(value) || value === '')
|
|
||||||
) {
|
|
||||||
isValid = false
|
|
||||||
errorCaseIndex = tabIndex
|
|
||||||
errorMessage = `案例${tabIndex + 1}的${
|
|
||||||
field.name
|
|
||||||
}必须为有效数字`
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
// 检查案例图片(如果需要必填的话)
|
|
||||||
if (isValid && tab.formInfo.caseImage.length === 0) {
|
|
||||||
isValid = false
|
|
||||||
errorMessage = `案例${
|
|
||||||
tabIndex + 1
|
|
||||||
}请至少上传一张案例图片`
|
|
||||||
errorCaseIndex = tabIndex
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 如果校验失败,抛出错误
|
// 如果校验失败,抛出错误
|
||||||
if (!isValid) {
|
if (!isValid) {
|
||||||
|
|
@ -439,7 +441,15 @@ export default {
|
||||||
// 组装参数
|
// 组装参数
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
const filesTypes = []
|
const filesTypes = []
|
||||||
const { cover } = this.addAndEditForm
|
const {
|
||||||
|
cover,
|
||||||
|
name, // 名称
|
||||||
|
typeId, // 类型
|
||||||
|
typeName, // 类型名称
|
||||||
|
linkUrl, // 链接
|
||||||
|
isAccess, // 是否支持访问
|
||||||
|
introduction, // 产品介绍
|
||||||
|
} = this.addAndEditForm
|
||||||
cover.forEach((item) => {
|
cover.forEach((item) => {
|
||||||
if (!item.id) {
|
if (!item.id) {
|
||||||
formData.append('files', item.raw)
|
formData.append('files', item.raw)
|
||||||
|
|
@ -447,8 +457,15 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const addAndEditFormParams = this.addAndEditForm
|
const addAndEditFormParams = {
|
||||||
delete addAndEditFormParams.cover
|
name, // 名称
|
||||||
|
typeId, // 类型
|
||||||
|
typeName, // 类型名称
|
||||||
|
linkUrl, // 链接
|
||||||
|
isAccess, // 是否支持访问
|
||||||
|
introduction, // 产品介绍
|
||||||
|
}
|
||||||
|
|
||||||
for (const key in addAndEditFormParams) {
|
for (const key in addAndEditFormParams) {
|
||||||
formData.append(key, addAndEditFormParams[key])
|
formData.append(key, addAndEditFormParams[key])
|
||||||
}
|
}
|
||||||
|
|
@ -491,9 +508,9 @@ export default {
|
||||||
this.$emit('closeDialog', true)
|
this.$emit('closeDialog', true)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error, 'error')
|
// console.log(error, 'error')
|
||||||
// 校验失败,提示用户
|
// 校验失败,提示用户
|
||||||
this.$message.error('请完善所有必填项后再保存')
|
// this.$message.error('请完善所有必填项后再保存')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 新增产品案例Tab
|
// 新增产品案例Tab
|
||||||
|
|
@ -517,10 +534,10 @@ export default {
|
||||||
// 移除产品案例Tab
|
// 移除产品案例Tab
|
||||||
handleRemoveTab(removeTabName) {
|
handleRemoveTab(removeTabName) {
|
||||||
// 禁止删除最后一个Tab
|
// 禁止删除最后一个Tab
|
||||||
if (this.editableTabs.length <= 1) {
|
// if (this.editableTabs.length <= 1) {
|
||||||
this.$message.warning('至少保留一个案例')
|
// this.$message.warning('至少保留一个案例')
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 找到要删除的Tab索引
|
// 找到要删除的Tab索引
|
||||||
const removeIndex = this.editableTabs.findIndex(
|
const removeIndex = this.editableTabs.findIndex(
|
||||||
|
|
@ -536,22 +553,31 @@ export default {
|
||||||
this.editableTabs.splice(removeIndex, 1)
|
this.editableTabs.splice(removeIndex, 1)
|
||||||
|
|
||||||
// 如果删除的是当前激活的Tab,切换到第一个Tab
|
// 如果删除的是当前激活的Tab,切换到第一个Tab
|
||||||
if (removeTabName === this.currentTab) {
|
if (
|
||||||
|
removeTabName === this.currentTab &&
|
||||||
|
this.editableTabs.length > 0
|
||||||
|
) {
|
||||||
this.currentTab = this.editableTabs[0].name
|
this.currentTab = this.editableTabs[0].name
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当前激活的Tab索引 如果大于删除的Tab索引,则减1
|
// 当前激活的Tab索引 如果大于删除的Tab索引,则减1
|
||||||
if (this.currentTabIndex >= removeIndex) {
|
if (
|
||||||
|
this.currentTabIndex >= removeIndex &&
|
||||||
|
this.editableTabs.length > 0
|
||||||
|
) {
|
||||||
this.currentTab =
|
this.currentTab =
|
||||||
this.editableTabs[this.currentTabIndex - 1].name
|
this.editableTabs[this.currentTabIndex - 1].name
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重新计算排序(可选:保持排序连续)
|
// 重新计算排序(可选:保持排序连续)
|
||||||
this.editableTabs.forEach((tab, index) => {
|
|
||||||
tab.title = `案例${index + 1}`
|
if (this.editableTabs.length > 0) {
|
||||||
tab.name = (index + 1).toString()
|
this.editableTabs.forEach((tab, index) => {
|
||||||
tab.formInfo.caseSort = index + 1
|
tab.title = `案例${index + 1}`
|
||||||
})
|
tab.name = (index + 1).toString()
|
||||||
|
tab.formInfo.caseSort = index + 1
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// Tab切换事件:触发当前Tab的表单校验
|
// Tab切换事件:触发当前Tab的表单校验
|
||||||
handleTabClick() {
|
handleTabClick() {
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@
|
||||||
<h2 class="welcome-title">欢迎登录公共服务平台</h2>
|
<h2 class="welcome-title">欢迎登录公共服务平台</h2>
|
||||||
|
|
||||||
<!-- 登录方式切换 -->
|
<!-- 登录方式切换 -->
|
||||||
<div class="login-type-switch">
|
<!-- 9.16 暂时关闭验证码登录 -->
|
||||||
|
<!-- <div class="login-type-switch">
|
||||||
<span
|
<span
|
||||||
:class="['switch-item', { active: loginType === 1 }]"
|
:class="['switch-item', { active: loginType === 1 }]"
|
||||||
@click="switchLoginType(1)"
|
@click="switchLoginType(1)"
|
||||||
|
|
@ -31,7 +32,7 @@
|
||||||
>
|
>
|
||||||
验证码登录
|
验证码登录
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- 登录表单 -->
|
<!-- 登录表单 -->
|
||||||
<el-form
|
<el-form
|
||||||
|
|
|
||||||
|
|
@ -65,28 +65,28 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeNav: 'productCenter', // 默认选中产品中心
|
activeNav: 'ProductCenter', // 默认选中产品中心
|
||||||
userAvatarUrl: this.userAvatar,
|
userAvatarUrl: this.userAvatar,
|
||||||
internalSearchKeyword: this.searchKeyword,
|
internalSearchKeyword: this.searchKeyword,
|
||||||
navItems: [
|
navItems: [
|
||||||
{
|
{
|
||||||
label: '产品中心',
|
label: '产品中心',
|
||||||
routePath: 'productCenter',
|
routePath: 'ProductCenter',
|
||||||
icon: require('../../../assets/images/productCenter/products.png'),
|
icon: require('../../../assets/images/productCenter/products.png'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '公共组件',
|
label: '公共组件',
|
||||||
routePath: 'commonCom',
|
routePath: 'CommonCom',
|
||||||
icon: require('../../../assets/images/productCenter/components.png'),
|
icon: require('../../../assets/images/productCenter/components.png'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '宣传物料',
|
label: '宣传物料',
|
||||||
routePath: 'proMaterials',
|
routePath: 'ProMaterials',
|
||||||
icon: require('../../../assets/images/productCenter/materials.png'),
|
icon: require('../../../assets/images/productCenter/materials.png'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '文档中心',
|
label: '文档中心',
|
||||||
routePath: 'docCenter',
|
routePath: 'DocCenter',
|
||||||
icon: require('../../../assets/images/productCenter/docs.png'),
|
icon: require('../../../assets/images/productCenter/docs.png'),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -103,7 +103,9 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleNavClick(item) {
|
handleNavClick(item) {
|
||||||
this.activeNav = item.routePath
|
this.activeNav = item.routePath
|
||||||
this.$router.push(item.routePath)
|
this.$router.push({
|
||||||
|
name: item.routePath,
|
||||||
|
})
|
||||||
},
|
},
|
||||||
handleSearch() {
|
handleSearch() {
|
||||||
// 修复搜索功能,直接使用internalSearchKeyword
|
// 修复搜索功能,直接使用internalSearchKeyword
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@ export default {
|
||||||
},
|
},
|
||||||
scrollDuration: {
|
scrollDuration: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 30, // 滚动完一轮的时间(秒)
|
default: 50, // 滚动完一轮的时间(秒)- 增加时间让滚动更慢更平滑
|
||||||
},
|
},
|
||||||
scrollDirection: {
|
scrollDirection: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -133,6 +133,8 @@ export default {
|
||||||
isTransitioning: false,
|
isTransitioning: false,
|
||||||
transitionStart: 0,
|
transitionStart: 0,
|
||||||
transitionProgress: 0,
|
transitionProgress: 0,
|
||||||
|
// 记录当前滚动位置,用于切换后继续滚动
|
||||||
|
currentScrollPosition: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -171,6 +173,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
getItemWidth() {
|
getItemWidth() {
|
||||||
if (this.$refs.cardWrapper) {
|
if (this.$refs.cardWrapper) {
|
||||||
|
// 无论有多少个盒子,都按照4个盒子计算宽度
|
||||||
this.itemWidth = (this.$refs.cardWrapper.clientWidth - 30) / 4
|
this.itemWidth = (this.$refs.cardWrapper.clientWidth - 30) / 4
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -217,15 +220,23 @@ export default {
|
||||||
|
|
||||||
let newPosition
|
let newPosition
|
||||||
if (this.scrollDirection === 'left') {
|
if (this.scrollDirection === 'left') {
|
||||||
// 向左滚动 - 使用取模实现无缝循环
|
// 向左滚动 - 从起始位置开始,使用取模实现无缝循环
|
||||||
newPosition = normalizedProgress * this.totalScrollWidth
|
newPosition =
|
||||||
|
(this.startPosition +
|
||||||
|
normalizedProgress * this.totalScrollWidth) %
|
||||||
|
this.totalScrollWidth
|
||||||
} else {
|
} else {
|
||||||
// 向右滚动 - 使用取模实现无缝循环
|
// 向右滚动 - 从起始位置开始,使用取模实现无缝循环
|
||||||
newPosition = (1 - normalizedProgress) * this.totalScrollWidth
|
newPosition =
|
||||||
|
(this.startPosition +
|
||||||
|
(1 - normalizedProgress) * this.totalScrollWidth) %
|
||||||
|
this.totalScrollWidth
|
||||||
}
|
}
|
||||||
|
|
||||||
// 应用新位置
|
// 应用新位置
|
||||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||||
|
// 更新当前滚动位置
|
||||||
|
this.currentScrollPosition = newPosition
|
||||||
|
|
||||||
// 继续动画
|
// 继续动画
|
||||||
this.animationId = requestAnimationFrame(this.smoothScroll)
|
this.animationId = requestAnimationFrame(this.smoothScroll)
|
||||||
|
|
@ -248,8 +259,9 @@ export default {
|
||||||
cancelAnimationFrame(this.animationId)
|
cancelAnimationFrame(this.animationId)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从当前位置开始动画
|
// 从当前位置开始动画,保持当前滚动位置
|
||||||
this.startPosition = this.$refs.cardWrapper.scrollLeft || 0
|
this.startPosition = this.$refs.cardWrapper.scrollLeft || 0
|
||||||
|
this.currentScrollPosition = this.startPosition
|
||||||
|
|
||||||
// 启动动画
|
// 启动动画
|
||||||
this.animationId = requestAnimationFrame(this.smoothScroll)
|
this.animationId = requestAnimationFrame(this.smoothScroll)
|
||||||
|
|
@ -282,6 +294,8 @@ export default {
|
||||||
// 平滑滚动到新位置
|
// 平滑滚动到新位置
|
||||||
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
||||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||||
|
// 更新当前滚动位置
|
||||||
|
this.currentScrollPosition = newPosition
|
||||||
|
|
||||||
// 恢复自动滚动
|
// 恢复自动滚动
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
@ -307,6 +321,8 @@ export default {
|
||||||
// 平滑滚动到新位置
|
// 平滑滚动到新位置
|
||||||
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
this.$refs.cardWrapper.style.scrollBehavior = 'smooth'
|
||||||
this.$refs.cardWrapper.scrollLeft = newPosition
|
this.$refs.cardWrapper.scrollLeft = newPosition
|
||||||
|
// 更新当前滚动位置
|
||||||
|
this.currentScrollPosition = newPosition
|
||||||
|
|
||||||
// 恢复自动滚动
|
// 恢复自动滚动
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
@ -419,6 +435,8 @@ export default {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
min-width: calc(25% - 45px);
|
min-width: calc(25% - 45px);
|
||||||
|
width: calc(25% - 45px);
|
||||||
|
flex: 0 0 calc(25% - 45px);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@
|
||||||
:height="160"
|
:height="160"
|
||||||
:width="320"
|
:width="320"
|
||||||
:src1="j.url"
|
:src1="j.url"
|
||||||
|
:isShowMask="true"
|
||||||
/>
|
/>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
|
|
@ -87,7 +88,7 @@ export default {
|
||||||
currentIndex: 0, // 当前显示的索引,从1开始(因为我们在开头添加了最后一个元素的副本)
|
currentIndex: 0, // 当前显示的索引,从1开始(因为我们在开头添加了最后一个元素的副本)
|
||||||
transitionDuration: '0.5s', // 过渡动画时长
|
transitionDuration: '0.5s', // 过渡动画时长
|
||||||
timer: null, // 自动轮播计时器
|
timer: null, // 自动轮播计时器
|
||||||
interval: 10000, // 轮播间隔时间(ms)
|
interval: 5000, // 轮播间隔时间(ms)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -103,8 +104,10 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 启动自动轮播
|
// 只有在有多项数据时才启动自动轮播
|
||||||
this.startAutoPlay()
|
if (this.cardList.length > 1) {
|
||||||
|
this.startAutoPlay()
|
||||||
|
}
|
||||||
|
|
||||||
// 监听鼠标进入/离开,暂停/恢复自动轮播
|
// 监听鼠标进入/离开,暂停/恢复自动轮播
|
||||||
const container = this.$el.querySelector('.carousel-wrapper')
|
const container = this.$el.querySelector('.carousel-wrapper')
|
||||||
|
|
@ -125,6 +128,10 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
// 开始自动轮播
|
// 开始自动轮播
|
||||||
startAutoPlay() {
|
startAutoPlay() {
|
||||||
|
// 只有在有多项数据时才启动自动轮播
|
||||||
|
if (this.cardList.length <= 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
this.stopAutoPlay() // 先清除已有计时器
|
this.stopAutoPlay() // 先清除已有计时器
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
this.nextSlide() // 自动轮播方向:从左到右
|
this.nextSlide() // 自动轮播方向:从左到右
|
||||||
|
|
@ -141,6 +148,11 @@ export default {
|
||||||
|
|
||||||
// 下一张(向右切换)- 从左到右显示
|
// 下一张(向右切换)- 从左到右显示
|
||||||
nextSlide() {
|
nextSlide() {
|
||||||
|
// 如果只有一项数据,不执行切换
|
||||||
|
if (this.cardList.length <= 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// 当到达最后一个真实元素时,切换到复制的第一个元素
|
// 当到达最后一个真实元素时,切换到复制的第一个元素
|
||||||
if (this.currentIndex === this.cardList.length) {
|
if (this.currentIndex === this.cardList.length) {
|
||||||
this.transitionDuration = '0.5s'
|
this.transitionDuration = '0.5s'
|
||||||
|
|
@ -159,6 +171,11 @@ export default {
|
||||||
|
|
||||||
// 上一张(向左切换)- 从右到左显示
|
// 上一张(向左切换)- 从右到左显示
|
||||||
prevSlide() {
|
prevSlide() {
|
||||||
|
// 如果只有一项数据,不执行切换
|
||||||
|
if (this.cardList.length <= 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// 当在第一个真实元素时,先切换到复制的最后一个元素
|
// 当在第一个真实元素时,先切换到复制的最后一个元素
|
||||||
if (this.currentIndex === 1) {
|
if (this.currentIndex === 1) {
|
||||||
this.transitionDuration = '0.5s'
|
this.transitionDuration = '0.5s'
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
:borderRadius="10"
|
:borderRadius="10"
|
||||||
:width="itemWidth"
|
:width="itemWidth"
|
||||||
:src1="item.linkImage"
|
:src1="item.linkImage"
|
||||||
|
:isShowMask="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -297,9 +298,11 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #000;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
font-family: 'PingFang SC', sans-serif;
|
||||||
|
// font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item:hover {
|
.category-item:hover {
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
:height="160"
|
:height="160"
|
||||||
:width="320"
|
:width="320"
|
||||||
:src1="j.url"
|
:src1="j.url"
|
||||||
|
:isShowMask="true"
|
||||||
/>
|
/>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
|
|
@ -183,19 +184,15 @@ export default {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
height: 90px;
|
// height: 90px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
|
||||||
// 多行文本截断:最多显示两行
|
display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
|
||||||
display: -webkit-box;
|
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
|
||||||
-webkit-line-clamp: 2 !important;
|
-webkit-line-clamp: 2; /* 限制显示的行数为4行 */
|
||||||
-webkit-box-orient: vertical;
|
overflow: hidden; /* 超出部分隐藏 */
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
word-break: break-word;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,10 +14,17 @@
|
||||||
|
|
||||||
<div class="product-content">
|
<div class="product-content">
|
||||||
<div class="product-image">
|
<div class="product-image">
|
||||||
<el-image
|
<!-- <el-image
|
||||||
fit="cover"
|
fit="cover"
|
||||||
:src="productDetail.linkImage"
|
:src="productDetail.linkImage"
|
||||||
style="width: 480px; height: 270px"
|
style="width: 480px; height: 270px"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<ImagePreview
|
||||||
|
:height="270"
|
||||||
|
:width="480"
|
||||||
|
:isShowMask="true"
|
||||||
|
:src1="productDetail.linkImage"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -57,6 +64,7 @@
|
||||||
cardTitle="产品案例"
|
cardTitle="产品案例"
|
||||||
:productId="productId"
|
:productId="productId"
|
||||||
:cardList="productCases"
|
:cardList="productCases"
|
||||||
|
v-if="productCases && productCases.length > 0"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DialogModel
|
<DialogModel
|
||||||
|
|
@ -100,8 +108,8 @@ export default {
|
||||||
dialogConfig: {
|
dialogConfig: {
|
||||||
outerTitle: '查看',
|
outerTitle: '查看',
|
||||||
outerVisible: false,
|
outerVisible: false,
|
||||||
outerWidth: '90%',
|
// outerWidth: '90%',
|
||||||
minHeight: '90vh',
|
// minHeight: '90vh',
|
||||||
},
|
},
|
||||||
productId: '',
|
productId: '',
|
||||||
lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
|
lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
|
||||||
|
|
@ -901,7 +909,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-docs {
|
.preview-docs {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 79vh;
|
height: 79vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue