88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div class="leader-radio">
|
||
|
|
<div>
|
||
|
|
<img src="../../assets/images/peiluoxi.png" alt="" style="margin-left: 125px;">
|
||
|
|
</div>
|
||
|
|
<div class="graph-container">
|
||
|
|
<!-- 这里将来放关系图 -->
|
||
|
|
</div>
|
||
|
|
<div class="leader-time">
|
||
|
|
<p>2022.07.31 00:00:00</p>
|
||
|
|
<div class="progress-bar-container">
|
||
|
|
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
|
||
|
|
<div v-for="(breakpoint, index) in breakpoints" :key="index" class="breakpoint"
|
||
|
|
:style="{ left: breakpoint + '%' }" @click="pauseProgress(index)"></div>
|
||
|
|
<div class="drag-button" :style="{ left: progress + '%' }" @mousedown="startDrag"></div>
|
||
|
|
</div>
|
||
|
|
<p>2022.08.01 00:00:00</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
||
|
|
|
||
|
|
// 时间轴相关逻辑
|
||
|
|
const progress = ref(0);
|
||
|
|
let progressInterval = null;
|
||
|
|
const breakpoints = [4, 12.5, 25, 37.5, 50, 62.5, 75, 87.5];
|
||
|
|
const isPaused = ref(false);
|
||
|
|
const isDragging = ref(false);
|
||
|
|
|
||
|
|
const startDrag = () => { isDragging.value = true; isPaused.value = true; };
|
||
|
|
const startProgress = () => {
|
||
|
|
progressInterval = setInterval(() => {
|
||
|
|
if (!isPaused.value) {
|
||
|
|
progress.value += 0.1;
|
||
|
|
if (progress.value >= 100) clearInterval(progressInterval);
|
||
|
|
}
|
||
|
|
}, 10);
|
||
|
|
};
|
||
|
|
const pauseProgress = (index) => {
|
||
|
|
const breakpointValue = breakpoints[index];
|
||
|
|
if (Math.abs(progress.value - breakpointValue) < 1) {
|
||
|
|
isPaused.value = !isPaused.value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => startProgress());
|
||
|
|
onUnmounted(() => { if (progressInterval) clearInterval(progressInterval); });
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 粘贴所有与 .leader-radio 和 .leader-time 相关的样式 */
|
||
|
|
.leader-radio {
|
||
|
|
width: 800px;
|
||
|
|
height: 540px;
|
||
|
|
background-color: #04142166;
|
||
|
|
border-radius: 2px;
|
||
|
|
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.graph-container {
|
||
|
|
flex-grow: 1; /* 占据中间的空白区域 */
|
||
|
|
}
|
||
|
|
.leader-time {
|
||
|
|
width: calc(100% - 14px);
|
||
|
|
height: 42px;
|
||
|
|
margin: 0 7px 7px 7px;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
background-image: linear-gradient(to right, #00527D, #97E3F87A);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
.progress-bar-container {
|
||
|
|
position: relative; /* 改为相对定位 */
|
||
|
|
width: 400px;
|
||
|
|
height: 6px;
|
||
|
|
border-radius: 20px;
|
||
|
|
background-color: #3B7699;
|
||
|
|
}
|
||
|
|
/* ... 其他时间轴样式 ... */
|
||
|
|
</style>
|