DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

兴蜀大屏轮播组件部分提交

Browse Source
This commit is contained in:
王捷
2025-09-18 15:58:57 +08:00
parent e79759e000
commit dd19b3ee22
19 changed files with 1119 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/recruitment/components/costomCaed.vue
View File

@ -1,95 +1,95 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted } from "vue";
const state = reactive({
tabs: [
'公共服务站点 300', '培训机构 130', '咨询机构 220',
'教育中心 150', '职业介绍所 180', '就业服务中心 210'
"公共服务站点 300",
"培训机构 130",
"咨询机构 220",
"教育中心 150",
"职业介绍所 180",
"就业服务中心 210"
],
activeIndex: 0
})
});
const scrollContainer = ref(null)
const canScrollLeft = ref(false)
const canScrollRight = ref(false)
const scrollContainer = ref(null);
const canScrollLeft = ref(false);
const canScrollRight = ref(false);
// 检查滚动状态
const checkScroll = () => {
if (scrollContainer.value) {
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value
canScrollLeft.value = scrollLeft > 0
canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
canScrollLeft.value = scrollLeft > 0;
canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1;
}
}
};
// 滚动到指定位置
const scrollTo = (direction) => {
if (!scrollContainer.value) return
if (!scrollContainer.value) return;
const container = scrollContainer.value
const scrollAmount = 300 // 每次滚动量
const container = scrollContainer.value;
const scrollAmount = 300; // 每次滚动量
if (direction === 'left') {
container.scrollBy({ left: -scrollAmount, behavior: 'smooth' })
if (direction === "left") {
container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
} else {
container.scrollBy({ left: scrollAmount, behavior: 'smooth' })
container.scrollBy({ left: scrollAmount, behavior: "smooth" });
}
// 滚动结束后检查状态
setTimeout(checkScroll, 300)
}
setTimeout(checkScroll, 300);
};
// 点击标签
const selectTab = (index) => {
state.activeIndex = index
state.activeIndex = index;
// 可选：自动滚动到选中标签
scrollToTab(index)
}
scrollToTab(index);
};
// 滚动到指定标签
const scrollToTab = (index) => {
if (!scrollContainer.value) return
if (!scrollContainer.value) return;
const container = scrollContainer.value
const tab = container.children[index]
if (!tab) return
const container = scrollContainer.value;
const tab = container.children[index];
if (!tab) return;
const containerWidth = container.clientWidth
const tabLeft = tab.offsetLeft
const tabWidth = tab.offsetWidth
const containerWidth = container.clientWidth;
const tabLeft = tab.offsetLeft;
const tabWidth = tab.offsetWidth;
container.scrollTo({
left: tabLeft - (containerWidth - tabWidth) / 2,
behavior: 'smooth'
})
}
behavior: "smooth"
});
};
onMounted(() => {
checkScroll()
window.addEventListener('resize', checkScroll)
})
checkScroll();
window.addEventListener("resize", checkScroll);
});
</script>
<template>
<div class="costomCaedWrapper">
<div class="horizontal-scroll-container">
<!-- 左侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button left"-->
<!-- :class="{ visible: canScrollLeft }"-->
<!-- @click="scrollTo('left')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <button-->
<!-- class="scroll-button left"-->
<!-- :class="{ visible: canScrollLeft }"-->
<!-- @click="scrollTo('left')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- 横向滚动区域 -->
<div
ref="scrollContainer"
class="scroll-area"
@scroll="checkScroll"
>
<div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
<div
v-for="(tab, index) in state.tabs"
:key="index"
@ -102,24 +102,23 @@ onMounted(() => {
</div>
<!-- 右侧滚动按钮 -->
<!-- <button-->
<!-- class="scroll-button right"-->
<!-- :class="{ visible: canScrollRight }"-->
<!-- @click="scrollTo('right')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <button-->
<!-- class="scroll-button right"-->
<!-- :class="{ visible: canScrollRight }"-->
<!-- @click="scrollTo('right')"-->
<!-- >-->
<!-- <svg viewBox="0 0 24 24">-->
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
<!-- </svg>-->
<!-- </button>-->
</div>
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="">
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="" />
</div>
</template>
<style scoped>
<style lang="scss" scoped>
.costomCaedWrapper {
.echart {
margin-top: 1.5vw;
width: 100%;