github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 修改装饰2的bug

Browse Source
This commit is contained in:
奔跑的面条 2022-04-13 19:48:10 +08:00
parent dc7e3f5a06
commit 77a6b50307
1 changed files with 2 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/packages/components/Decorates/Decorates/Decorates02/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="go-decorates-2" class="go-decorates-2"
:style="`width:${w}px; animation-duration:${dur}s`" :style="`width:${w}px; height: ${lineHeight}px animation-duration:${dur}s`"
> >
<svg :width="w" :height="3"> <svg :width="w" :height="3">
<polyline :stroke="colors[0]" :points="`0, 2.5 ${w}, 2.5`" /> <polyline :stroke="colors[0]" :points="`0, 2.5 ${w}, 2.5`" />
@ -28,28 +28,12 @@ const props = defineProps({
}) })
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
const { colors, dur } = toRefs(props.chartConfig.option) const { colors, dur, lineHeight } = toRefs(props.chartConfig.option)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('decorates-2') { @include go('decorates-2') {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
animation: animationWidth ease-in-out infinite;
}
@keyframes animationWidth {
0% {
width: 0;
background-color: aliceblue;
}
70% {
width: 100%;
}
100% {
width: 100%;
background-color: red;
}
} }
</style> </style>