102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted } from 'vue'
|
||
|
||
import Layout from './layout/index.vue'
|
||
|
||
onMounted(() => {
|
||
document.documentElement.classList.add('dark')
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<layout />
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
#app {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.jtk-endpoint {
|
||
z-index: 100;
|
||
}
|
||
|
||
.card-item + .card-item {
|
||
margin-top: 35px;
|
||
}
|
||
|
||
.el-card {
|
||
border-radius: 8px;
|
||
background: var(--color-bg-tertiary);
|
||
border: 2px solid var(--color-bg-tertiary);
|
||
|
||
&:hover {
|
||
background: #171B22;
|
||
box-shadow: none !important;
|
||
transition: background-color 0.3s ease-in-out;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
:root {
|
||
--gradient: linear-gradient(to right, #0093eb, #00d2d1);
|
||
}
|
||
|
||
#task-template {
|
||
.active-card {
|
||
border: 2px solid transparent;
|
||
$bg: var(--el-input-bg-color, var(--el-fill-color-blank));
|
||
background:
|
||
linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
|
||
linear-gradient(to right, #00c8d2, #315ab4) border-box;
|
||
color: var(--color-text);
|
||
}
|
||
}
|
||
|
||
|
||
/* 1. 定义流动动画：让虚线沿路径移动 */
|
||
@keyframes flowAnimation {
|
||
to {
|
||
stroke-dashoffset: 8; /* 与stroke-dasharray总和一致 */
|
||
}
|
||
}
|
||
|
||
@keyframes flowAnimationReverse {
|
||
to {
|
||
stroke-dashoffset: -8; /* 与stroke-dasharray总和一致 */
|
||
}
|
||
}
|
||
|
||
|
||
/* 2. 为jsPlumb连线绑定动画：作用于SVG的path元素 */
|
||
/* jtk-connector是jsPlumb连线的默认SVG类，path是实际的线条元素 */
|
||
.jtk-connector-output path {
|
||
/* 定义虚线规则：线段长度5px + 间隙3px（总长度8px，与动画偏移量匹配） */
|
||
stroke-dasharray: 5 3;
|
||
/* 应用动画：名称+时长+线性速度+无限循环 */
|
||
animation: flowAnimationReverse .5s linear infinite;
|
||
/* 可选：设置线条基础样式（颜色、宽度） */
|
||
stroke-width: 2;
|
||
}
|
||
|
||
/* 2. 为jsPlumb连线绑定动画：作用于SVG的path元素 */
|
||
/* jtk-connector是jsPlumb连线的默认SVG类，path是实际的线条元素 */
|
||
.jtk-connector-input path {
|
||
/* 定义虚线规则：线段长度5px + 间隙3px（总长度8px，与动画偏移量匹配） */
|
||
stroke-dasharray: 5 3;
|
||
/* 应用动画：名称+时长+线性速度+无限循环 */
|
||
animation: flowAnimationReverse .5s linear infinite;
|
||
/* 可选：设置线条基础样式（颜色、宽度） */
|
||
stroke-width: 2;
|
||
}
|
||
|
||
/* 可选： hover时增强动画效果（如加速、变色） */
|
||
.jtk-connector path:hover {
|
||
animation-duration: 0.5s; /* hover时流动加速 */
|
||
}
|
||
</style>
|