45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div class="decoration-8" ref="dom">
|
|
<svg :width="width" :height="height">
|
|
<polyline
|
|
:stroke="stroke"
|
|
stroke-width="2"
|
|
fill="transparent"
|
|
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
|
|
/>
|
|
|
|
<polyline
|
|
:stroke="stroke"
|
|
stroke-width="2"
|
|
fill="transparent"
|
|
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
|
|
/>
|
|
|
|
<polyline
|
|
:stroke="stroke"
|
|
fill="transparent"
|
|
stroke-width="3"
|
|
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const stroke = '#3f96a5'
|
|
|
|
const dom = ref(null)
|
|
const width = ref(0)
|
|
const height = ref(0)
|
|
onMounted(() => {
|
|
width.value = dom.value.clientWidth
|
|
height.value = dom.value.clientHeight
|
|
})
|
|
|
|
const props = defineProps({
|
|
reverse: Boolean
|
|
})
|
|
const xPos = (val: number) => props.reverse ? width.value - val : val
|
|
</script> |