From 87139ecdc456b6beb707e93e0186539d055dc44e Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Wed, 3 Sep 2025 11:01:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=92=AD=E6=94=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoScroll.vue          | 233 +++++++++++++++++++++++++
 src/views/component/BusinessSystem.vue | 102 ++---------
 2 files changed, 244 insertions(+), 91 deletions(-)
 create mode 100644 src/components/AutoScroll.vue

diff --git a/src/components/AutoScroll.vue b/src/components/AutoScroll.vue
new file mode 100644
index 00000000..5502d9bd
--- /dev/null
+++ b/src/components/AutoScroll.vue
@@ -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>
+    
\ No newline at end of file
diff --git a/src/views/component/BusinessSystem.vue b/src/views/component/BusinessSystem.vue
index da720a8e..8b0fb3ba 100644
--- a/src/views/component/BusinessSystem.vue
+++ b/src/views/component/BusinessSystem.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="business-system">
-    <!-- 左右结构容器：标题区域 + 内容区域 -->
     <div class="business-container">
-      <!-- 左侧标题区域 - 单独分离出来 -->
       <div class="title-section">
         <div class="title-content">
           <div class="main-title">
@@ -18,45 +16,31 @@
 
       <!-- 右侧内容区域 -->
       <div class="content-section">
-        <div class="system-items" ref="systemList">
-          <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>
+        <auto-scroll :items="systems" @item-click="handleItemClick" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import AutoScroll from "@/components/AutoScroll.vue";
 export default {
   data() {
     return {
       systems: [
+        "招生系统",
         "学工系统",
-        "就业指导网管理系统",
-        "大数据应用平台",
-        "评教系统",
-        "健康评估系统",
-        "辅助助手工具",
-        "迎新系统（验证）",
-        "科研系统（验证）",
-        "教务管理系统",
-        "财务管理平台",
-        "图书管理系统",
-        "资产管理系统",
-        "校园一卡通系统",
-        "网络教学平台",
-        "智慧校园系统",
+        "教务系统",
+        "一卡通系统",
+        "人力资源管理系统",
+        "科研创新服务平台",
+        "文献管理系统",
       ],
     };
   },
+  components: {
+    AutoScroll,
+  },
   computed: {
     systemCount() {
       return this.systems.length;
@@ -112,70 +96,6 @@ export default {
   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 {
   text-align: center;