feat(home): 添加工作展示轮播组件和优化滚动逻辑

hejianhao

2026-01-13 d51bed1bc31f59bb7964295a54120301ff551338

feat(home): 添加工作展示轮播组件和优化滚动逻辑

- 新增工作展示区域的轮播组件，包含图片展示和指示器功能
- 优化滚动逻辑，改进无缝滚动的实现方式，避免视觉跳跃
- 添加相关状态管理和方法处理轮播切换和滚动控制

 screen/src/view/home/index.vue

@@ -252,6 +252,63 @@
          </template>
        </TitleBox>
      </div>

      <div class="mt--33">
        <TitleBox>
          <template #title> 工作展示 </template>
          <template #right>
            <div
              class="flex a-center py--6 pl--10 pr--8 br--4 bgcolor5 cursor-pointer"
            >
              <div class="fs--12 lh--12 c-fff mr--4 SHSR">详情</div>
              <img
                src="../../assets/img/home/13@2x.png"
                class="w--14 h--14 shrink0"
              />
            </div>
          </template>
          <template #content>
            <div class="px--19 pt--16 pb--9">
              <el-carousel
                height="366px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                ref="carousel"
                @change="handleChangeCarousel"
              >
                <el-carousel-item
                  v-for="(item, index) in 4"
                  :key="index"
                >
                  <div>
                    <img
                      src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/1bcd9db5-c909-4edc-a3d2-61cc33c54462.jpg"
                      class="w100 h--290"
                    />
                    <div
                      class="fs--18 lh--24 SHSBold py--10 pl--20 pr--14 c-fff"
                    >
                      德国模德机床中国总部及研发生产基地项目落户成都东部新区
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
              <div class="flex a-center justify-center mt--9">
                <div class="flex a-center gap--3">
                  <img
                    v-for="(item, index) in 4"
                    :key="index"
                    :src="activeIndex === index ? require('../../assets/img/home/Rectangle@2x.png') : require('../../assets/img/home/Rectangle@2x (1).png')"
                    class="w--18 h--4 shrink0 cursor-pointer"
                    @click="changeActiveIndex(index)"
                  />
                </div>
              </div>
            </div>
          </template>
        </TitleBox>
      </div>
    </div>
  </div>
</template>
@@ -272,6 +329,7 @@
      scrollData: [], // 存储滚动数据
      scrollTimer: null, // 滚动定时器
      scrollContainer: null, // 滚动容器引用
      activeIndex: 0, // 当前活动索引
    };
  },
  watch: {
@@ -299,6 +357,15 @@
    this.stopAutoScroll();
  },
  methods: {
    // 切换活动索引
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.$refs.carousel.setActiveItem(index)
    },
    // 切换活动索引
    handleChangeCarousel(index) {
      this.activeIndex = index;
    },
    handleClick() {
      this.$refs.datePicker.focus();
    },
@@ -378,18 +445,31 @@
      if (!this.scrollContainer) return;

      const originalDataLength = this.scrollData.length / 2;
      const itemHeight = 80; // 每个项目高度
      const itemHeight = 102; // 每个项目高度

      // 判断是否需要跳转的标志
      let shouldJump = false;

      const scroll = () => {
        // 获取当前滚动位置
        let currentScrollTop = this.scrollContainer.scrollTop;

        // 如果滚动到第二份数据的末尾，跳回第一份数据的开头
        // 当滚动到第二份的末尾时
        if (currentScrollTop >= originalDataLength * itemHeight) {
          // 瞬间跳回第一份数据的位置，实现无缝滚动
          this.scrollContainer.scrollTop = 0;
          // 计算当前滚动位置相对于第二份数据开始的偏移量
          const offset = currentScrollTop - originalDataLength * itemHeight;
          // 直接跳到第一份数据相同偏移量的位置
          this.scrollContainer.scrollTop = offset;
          // 设置标志表示刚刚进行过跳转
          shouldJump = true;
        } else {
          // 正常向下滚动
          // 如果在跳转后，并且位置重置到了0附近，重置标志
          if (shouldJump && currentScrollTop < 2) {
            shouldJump = false;
          }
        }

        // 只有在不处于跳转状态时才继续滚动
        if (!shouldJump) {
          this.scrollContainer.scrollTop += 1;
        }