更新页面
This commit is contained in:
@ -63,7 +63,6 @@
|
||||
height: 70px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
|
||||
.headBoxBg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -23,7 +23,7 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from '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 title = ref("新增")
|
||||
const init = (type, row) => {
|
||||
|
@ -94,6 +94,7 @@ const pageData = reactive({
|
||||
{ label: "标签代码", prop: "bqDm" },
|
||||
{ label: "标签等级", prop: "bqDj",showSolt:true},
|
||||
{ label: "标签颜色", prop: "bqYs",showSolt:true},
|
||||
{ label: "标签说明", prop: "bqSm"},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
|
@ -93,6 +93,7 @@ const pageData = reactive({
|
||||
{ label: "标签代码", prop: "bqDm" },
|
||||
{ label: "标签等级", prop: "bqDj",showSolt:true},
|
||||
{ label: "标签颜色", prop: "bqYs",showSolt:true},
|
||||
{ label: "标签说明", prop: "bqSm"},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
|
@ -24,7 +24,7 @@ const props = defineProps({
|
||||
// 新增:是否启用自动循环展示提示框
|
||||
autoTooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
// 新增:提示框循环间隔时间(毫秒)
|
||||
tooltipInterval: {
|
||||
@ -273,8 +273,8 @@ function lineChartFn(xDate, legend, series) {
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
right: "8%",
|
||||
left: "10%",
|
||||
right: "2%",
|
||||
left: "6%",
|
||||
bottom: "22%"
|
||||
},
|
||||
xAxis: [
|
||||
|
111
src/views/home/layout/flowLine.vue
Normal file
111
src/views/home/layout/flowLine.vue
Normal 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>
|
@ -84,10 +84,14 @@
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="zzzz">
|
||||
<FlowLine></FlowLine>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FlowLine from './flowLine.vue'
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
|
||||
@ -277,5 +281,10 @@ onUnmounted(() => {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.zzzz{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
10
src/views/home/layout/line.svg
Normal file
10
src/views/home/layout/line.svg
Normal 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 |
Reference in New Issue
Block a user