Teams/shanghaigangxiangtuzhuangVUE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(CarouselBoard): 将轮播间隔从60秒改为10秒

Browse Source 
优化轮播体验，加快信息展示频率，提升用户交互体验
This commit is contained in:
git_rabbit
2025-10-29 00:03:44 +08:00
parent cb8a9d001f
commit 91a4ea06e5
3 changed files with 1533 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1438
src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
View File

File diff suppressed because it is too large Load Diff

1339
src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
View File

File diff suppressed because it is too large Load Diff

126
src/views/kanbanManagement/CarouselBoard/index.vue
View File

@@ -1,90 +1,98 @@
<template>
<dv-full-screen-container>
<div class="carousel-board-container">
<dv-border-box-1 class="dashboard-border">
<el-carousel ref="carousel" :interval="60000" height="100vh" arrow="never" indicator-position="bottom" autoplay
class="dashboard-carousel">
<el-carousel-item>
<QualityStatisticsCard />
</el-carousel-item>
<el-carousel-item>
<WorkorderOnlineCard />
</el-carousel-item>
</el-carousel>
</dv-border-box-1>
</div>
</dv-full-screen-container>
<dv-full-screen-container>
<div class="carousel-board-container">
<dv-border-box-1 class="dashboard-border">
<el-carousel
ref="carousel"
:interval="10000"
height="100vh"
arrow="never"
indicator-position="bottom"
autoplay
class="dashboard-carousel"
>
<el-carousel-item>
<QualityStatisticsCard />
</el-carousel-item>
<el-carousel-item>
<WorkorderOnlineCard />
</el-carousel-item>
</el-carousel>
</dv-border-box-1>
</div>
</dv-full-screen-container>
</template>
<script>
import QualityStatisticsCard from './components/QualityStatisticsCard.vue'
import WorkorderOnlineCard from './components/WorkorderOnlineCard.vue'
import QualityStatisticsCard from "./components/QualityStatisticsCard.vue";
import WorkorderOnlineCard from "./components/WorkorderOnlineCard.vue";
export default {
name: 'CarouselBoard',
components: {
QualityStatisticsCard,
WorkorderOnlineCard,
},
mounted() {
// 可以在这里添加一些初始化逻辑
console.log('Carousel board initialized')
},
methods: {
// 可以添加一些控制轮播的方法
nextSlide() {
this.$refs.carousel.next()
name: "CarouselBoard",
components: {
QualityStatisticsCard,
WorkorderOnlineCard,
},
prevSlide() {
this.$refs.carousel.prev()
mounted() {
// 可以在这里添加一些初始化逻辑
console.log("Carousel board initialized");
},
pause() {
this.$refs.carousel.pause()
methods: {
// 可以添加一些控制轮播的方法
nextSlide() {
this.$refs.carousel.next();
},
prevSlide() {
this.$refs.carousel.prev();
},
pause() {
this.$refs.carousel.pause();
},
play() {
this.$refs.carousel.play();
},
},
play() {
this.$refs.carousel.play()
},
},
}
};
</script>
<style scoped>
.carousel-board-container {
width: 100%;
height: 100%;
padding: 0px;
background: linear-gradient(135deg, #001529 0%, #002140 100%);
overflow: auto;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: linear-gradient(135deg, #001529 0%, #002140 100%);
overflow: auto;
box-sizing: border-box;
}
.dashboard-border {
height: 100%;
height: 100%;
}
.dashboard-carousel {
background: rgba(0, 20, 40, 0.8);
border-radius: 4px;
overflow: hidden;
background: rgba(0, 20, 40, 0.8);
border-radius: 4px;
overflow: hidden;
}
/* 优化轮播项样式 */
.el-carousel__item {
padding: 0;
box-sizing: border-box;
min-height: 100vh;
padding: 0;
box-sizing: border-box;
min-height: 100vh;
}
/* 确保指示器清晰可见 */
.el-carousel__indicator {
width: 12px;
height: 12px;
margin: 0 8px;
transition: all 0.3s ease;
background-color: rgba(255, 255, 255, 0.3);
width: 12px;
height: 12px;
margin: 0 8px;
transition: all 0.3s ease;
background-color: rgba(255, 255, 255, 0.3);
}
.el-carousel__indicator--active {
width: 24px;
background-color: #00ffff;
width: 24px;
background-color: #00ffff;
}
</style>