滚动播放组件
This commit is contained in:
parent
0f1bb5320f
commit
87139ecdc4
|
|
@ -0,0 +1,233 @@
|
||||||
|
<template>
|
||||||
|
<div class="auto-scroll">
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div
|
||||||
|
class="scroll-wrapper"
|
||||||
|
ref="scrollWrapper"
|
||||||
|
@mouseenter="pauseScroll"
|
||||||
|
@mouseleave="resumeScroll"
|
||||||
|
>
|
||||||
|
<div class="scroll-content" ref="scrollContent">
|
||||||
|
<!-- 滚动的项目元素 -->
|
||||||
|
<div
|
||||||
|
class="scroll-item"
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="index"
|
||||||
|
:style="itemStyle(item)"
|
||||||
|
@click="$emit('item-click', item, index)"
|
||||||
|
>
|
||||||
|
<!-- 自定义项目内容插槽 -->
|
||||||
|
<slot name="item" :item="item">
|
||||||
|
<!-- 默认内容 -->
|
||||||
|
<span class="default-item-content">{{ item }}</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 复制一份用于无缝循环 -->
|
||||||
|
<div
|
||||||
|
class="scroll-item"
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="'copy-' + index"
|
||||||
|
:style="itemStyle(item)"
|
||||||
|
@click="$emit('item-click', item, index)"
|
||||||
|
>
|
||||||
|
<slot name="item" :item="item">
|
||||||
|
<span class="default-item-content">{{ item }}</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AutoScroll",
|
||||||
|
props: {
|
||||||
|
// 滚动的项目数据
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 滚动速度（毫秒）
|
||||||
|
scrollSpeed: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
// 每次滚动的像素数
|
||||||
|
scrollStep: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
// 滚动方向：1向右，-1向左
|
||||||
|
direction: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
validator: (value) => value === 1 || value === -1,
|
||||||
|
},
|
||||||
|
// 项目宽度
|
||||||
|
itemWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 150,
|
||||||
|
},
|
||||||
|
// 项目高度
|
||||||
|
itemHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 100,
|
||||||
|
},
|
||||||
|
// 项目间距
|
||||||
|
itemMargin: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollInterval: null,
|
||||||
|
originalContentWidth: 0, // 原始内容宽度，用于循环判断
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 初始化自动滚动
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 计算原始内容宽度（不包含复制的部分）
|
||||||
|
this.originalContentWidth = this.$refs.scrollContent.scrollWidth / 2;
|
||||||
|
this.startAutoScroll();
|
||||||
|
this.$emit("ready", {
|
||||||
|
start: this.startAutoScroll,
|
||||||
|
pause: this.pauseScroll,
|
||||||
|
resume: this.resumeScroll,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听窗口大小变化，调整滚动
|
||||||
|
window.addEventListener("resize", this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// 清除定时器
|
||||||
|
this.clearScrollInterval();
|
||||||
|
// 移除事件监听
|
||||||
|
window.removeEventListener("resize", this.handleResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 计算项目样式
|
||||||
|
itemStyle(item) {
|
||||||
|
return {
|
||||||
|
width: `${this.itemWidth}px`,
|
||||||
|
height: `${this.itemHeight}px`,
|
||||||
|
margin: `0 ${this.itemMargin}px`,
|
||||||
|
background: item.color || "#ccc",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 开始自动滚动
|
||||||
|
startAutoScroll() {
|
||||||
|
this.clearScrollInterval();
|
||||||
|
this.scrollInterval = setInterval(() => {
|
||||||
|
this.autoScroll();
|
||||||
|
}, this.scrollSpeed);
|
||||||
|
this.$emit("scroll-started");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除滚动定时器
|
||||||
|
clearScrollInterval() {
|
||||||
|
if (this.scrollInterval) {
|
||||||
|
clearInterval(this.scrollInterval);
|
||||||
|
this.scrollInterval = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 自动滚动逻辑 - 始终按指定方向滚动，到达末尾后重置
|
||||||
|
autoScroll() {
|
||||||
|
if (!this.$refs.scrollWrapper || !this.$refs.scrollContent) return;
|
||||||
|
|
||||||
|
const wrapper = this.$refs.scrollWrapper;
|
||||||
|
|
||||||
|
// 执行滚动
|
||||||
|
wrapper.scrollLeft += this.scrollStep * this.direction;
|
||||||
|
|
||||||
|
// 当滚动距离超过原始内容宽度时，重置滚动位置，实现无缝循环
|
||||||
|
if (
|
||||||
|
this.direction === 1 &&
|
||||||
|
wrapper.scrollLeft >= this.originalContentWidth
|
||||||
|
) {
|
||||||
|
wrapper.scrollLeft = 0;
|
||||||
|
}
|
||||||
|
// 向左滚动的重置逻辑
|
||||||
|
else if (this.direction === -1 && wrapper.scrollLeft <= 0) {
|
||||||
|
wrapper.scrollLeft = this.originalContentWidth;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 暂停滚动
|
||||||
|
pauseScroll() {
|
||||||
|
this.clearScrollInterval();
|
||||||
|
this.$emit("scroll-paused");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 恢复滚动
|
||||||
|
resumeScroll() {
|
||||||
|
this.startAutoScroll();
|
||||||
|
this.$emit("scroll-resumed");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理窗口大小变化
|
||||||
|
handleResize() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 重新计算原始内容宽度
|
||||||
|
this.originalContentWidth = this.$refs.scrollContent.scrollWidth / 2;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.auto-scroll {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scroll-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 20px 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
.scroll-content {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-item {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100%;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-item-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="business-system">
|
<div class="business-system">
|
||||||
<!-- 左右结构容器：标题区域 + 内容区域 -->
|
|
||||||
<div class="business-container">
|
<div class="business-container">
|
||||||
<!-- 左侧标题区域 - 单独分离出来 -->
|
|
||||||
<div class="title-section">
|
<div class="title-section">
|
||||||
<div class="title-content">
|
<div class="title-content">
|
||||||
<div class="main-title">
|
<div class="main-title">
|
||||||
|
|
@ -18,45 +16,31 @@
|
||||||
|
|
||||||
<!-- 右侧内容区域 -->
|
<!-- 右侧内容区域 -->
|
||||||
<div class="content-section">
|
<div class="content-section">
|
||||||
<div class="system-items" ref="systemList">
|
<auto-scroll :items="systems" @item-click="handleItemClick" />
|
||||||
<div
|
|
||||||
class="system-card"
|
|
||||||
v-for="(item, index) in systems"
|
|
||||||
:key="index"
|
|
||||||
ref="systemCards"
|
|
||||||
>
|
|
||||||
<div class="card-icon"></div>
|
|
||||||
<div class="card-name">{{ item }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import AutoScroll from "@/components/AutoScroll.vue";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
systems: [
|
systems: [
|
||||||
|
"招生系统",
|
||||||
"学工系统",
|
"学工系统",
|
||||||
"就业指导网管理系统",
|
"教务系统",
|
||||||
"大数据应用平台",
|
"一卡通系统",
|
||||||
"评教系统",
|
"人力资源管理系统",
|
||||||
"健康评估系统",
|
"科研创新服务平台",
|
||||||
"辅助助手工具",
|
"文献管理系统",
|
||||||
"迎新系统（验证）",
|
|
||||||
"科研系统（验证）",
|
|
||||||
"教务管理系统",
|
|
||||||
"财务管理平台",
|
|
||||||
"图书管理系统",
|
|
||||||
"资产管理系统",
|
|
||||||
"校园一卡通系统",
|
|
||||||
"网络教学平台",
|
|
||||||
"智慧校园系统",
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
AutoScroll,
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
systemCount() {
|
systemCount() {
|
||||||
return this.systems.length;
|
return this.systems.length;
|
||||||
|
|
@ -112,70 +96,6 @@ export default {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.system-items {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 15px;
|
|
||||||
will-change: scroll-position; // 优化滚动性能
|
|
||||||
padding: 5px 0; // 避免内容紧贴边缘
|
|
||||||
}
|
|
||||||
|
|
||||||
.system-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 120px;
|
|
||||||
background: rgba(74, 144, 226, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px 10px;
|
|
||||||
margin: 0; // 清除默认margin
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
background: rgba(74, 144, 226, 0.2);
|
|
||||||
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background: #4a90e2;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
45deg,
|
|
||||||
rgba(255, 255, 255, 0.1) 0%,
|
|
||||||
rgba(255, 255, 255, 0) 50%,
|
|
||||||
rgba(255, 255, 255, 0.1) 100%
|
|
||||||
);
|
|
||||||
transform: skewX(-20deg) translateX(-120%);
|
|
||||||
animation: shine 2s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 标题区域样式
|
// 标题区域样式
|
||||||
.title-content {
|
.title-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue