更新页面

This commit is contained in:
2025-09-20 18:36:44 +08:00
parent c565736d49
commit 043369989c
8 changed files with 136 additions and 5 deletions

View File

@ -63,7 +63,6 @@
height: 70px; height: 70px;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
z-index: 2; z-index: 2;
.headBoxBg { .headBoxBg {
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -23,7 +23,7 @@
<script setup> <script setup>
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import FormMessage from "@/components/aboutTable/FormMessage.vue"; import FormMessage from "@/components/aboutTable/FormMessage.vue";
// import { VueDraggable } from 'vue-draggable-plus' import { VueDraggable } from 'vue-draggable-plus'
const dialogForm = ref(false) const dialogForm = ref(false)
const title = ref("新增") const title = ref("新增")
const init = (type, row) => { const init = (type, row) => {

View File

@ -94,6 +94,7 @@ const pageData = reactive({
{ label: "标签代码", prop: "bqDm" }, { label: "标签代码", prop: "bqDm" },
{ label: "标签等级", prop: "bqDj",showSolt:true}, { label: "标签等级", prop: "bqDj",showSolt:true},
{ label: "标签颜色", prop: "bqYs",showSolt:true}, { label: "标签颜色", prop: "bqYs",showSolt:true},
{ label: "标签说明", prop: "bqSm"},
] ]
}); });
onMounted(() => { onMounted(() => {

View File

@ -93,6 +93,7 @@ const pageData = reactive({
{ label: "标签代码", prop: "bqDm" }, { label: "标签代码", prop: "bqDm" },
{ label: "标签等级", prop: "bqDj",showSolt:true}, { label: "标签等级", prop: "bqDj",showSolt:true},
{ label: "标签颜色", prop: "bqYs",showSolt:true}, { label: "标签颜色", prop: "bqYs",showSolt:true},
{ label: "标签说明", prop: "bqSm"},
] ]
}); });
onMounted(() => { onMounted(() => {

View File

@ -24,7 +24,7 @@ const props = defineProps({
// 新增:是否启用自动循环展示提示框 // 新增:是否启用自动循环展示提示框
autoTooltip: { autoTooltip: {
type: Boolean, type: Boolean,
default: true default: false
}, },
// 新增:提示框循环间隔时间(毫秒) // 新增:提示框循环间隔时间(毫秒)
tooltipInterval: { tooltipInterval: {
@ -273,8 +273,8 @@ function lineChartFn(xDate, legend, series) {
}, },
grid: { grid: {
top: "25%", top: "25%",
right: "8%", right: "2%",
left: "10%", left: "6%",
bottom: "22%" bottom: "22%"
}, },
xAxis: [ xAxis: [

View File

@ -0,0 +1,111 @@
<template>
<div class="flowLine">
<svg width="1919" height="58" viewBox="0 0 1919 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 背景路径 - 静态 -->
<path class="path-bg" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="rgba(0, 114, 255, 0.2)" stroke-width="4"/>
<!-- 动画路径 - 带描边效果 -->
<path class="path-animated" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="url(#paint0_linear_2539_19618)" stroke-width="4"/>
<!-- 主发光点 -->
<circle class="glow-dot" r="6" fill="url(#radialGradient)">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
<animate attributeName="r" values="5;7;5" dur="2s" repeatCount="indefinite" />
</circle>
<!-- 次要发光点 -->
<circle class="glow-dot secondary" r="4" fill="url(#radialGradient2)">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="1s">
<mpath href="#motionPath" />
</animateMotion>
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite" />
</circle>
<!-- 用于动画的隐藏路径 -->
<path id="motionPath" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="none"/>
<defs>
<linearGradient id="paint0_linear_2539_19618" x1="852.344" y1="1.29965" x2="853.359" y2="67.7414" gradientUnits="userSpaceOnUse">
<stop stop-color="#0072FF"/>
<stop offset="0.54596" stop-color="#00FFFF"/>
<stop offset="1" stop-color="#0072FF"/>
</linearGradient>
<radialGradient id="radialGradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(10)">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/>
<stop offset="40%" stop-color="#00FFFF" stop-opacity="1"/>
<stop offset="70%" stop-color="#0072FF" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="radialGradient2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(8)">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
<stop offset="50%" stop-color="#00FFFF" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
</radialGradient>
<!-- 增强的滤镜效果 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.5 0 0 0 0 1 0 0 0 1 0" result="blue-glow"/>
<feBlend in="SourceGraphic" in2="blue-glow" mode="screen"/>
</filter>
</defs>
</svg>
</div>
</template>
<script setup>
</script>
<style scoped>
.flowLine {
width: 100%;
height: 100%;
position: relative;
}
.zdy_line_svg {
width: 100%;
height: 100%;
}
/* 描边动画效果 */
.path-animated {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 8s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite;
filter: url(#glow);
will-change: stroke-dashoffset;
}
.glow-dot {
filter: url(#glow);
will-change: transform;
}
.glow-dot.secondary {
opacity: 0.7;
}
@keyframes dash {
0% {
stroke-dashoffset: 3000;
opacity: 0.3;
}
30% {
stroke-dashoffset: 0;
opacity: 1;
}
70% {
stroke-dashoffset: 0;
opacity: 1;
}
100% {
stroke-dashoffset: -3000;
opacity: 0.3;
}
}
</style>

View File

@ -84,10 +84,14 @@
</div> </div>
</ul> </ul>
</div> </div>
<div class="zzzz">
<FlowLine></FlowLine>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import FlowLine from './flowLine.vue'
import { getItem } from "@/utils/storage"; import { getItem } from "@/utils/storage";
import { qcckGet, qcckPost } from "@/api/qcckApi.js"; import { qcckGet, qcckPost } from "@/api/qcckApi.js";
@ -277,5 +281,10 @@ onUnmounted(() => {
background: transparent !important; background: transparent !important;
} }
} }
.zzzz{
position: absolute;
top: 10px;
}
</style> </style>

View File

@ -0,0 +1,10 @@
<svg width="1919" height="58" viewBox="0 0 1919 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="url(#paint0_linear_2539_19618)" stroke-width="4"/>
<defs>
<linearGradient id="paint0_linear_2539_19618" x1="852.344" y1="1.29965" x2="853.359" y2="67.7414" gradientUnits="userSpaceOnUse">
<stop stop-color="#0072FF"/>
<stop offset="0.54596" stop-color="#00FFFF"/>
<stop offset="1" stop-color="#0072FF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 525 B