<template>
    <div class="bgStyle">
    <JsvLine :startPos="startPos1" :endPos="endPos1" :lineWidth="2" :backgroundColor="'#FF1213'" ></JsvLine>
    <div class="text text1">竖线不带圆角</div>
    <JsvLine :startPos="startPos2" :endPos="endPos2" :lineWidth="3" :backgroundColor="'#FF1213'" :borderRadius="10"></JsvLine>
    <div class="text text2">斜线带圆角</div>
    <JsvLine :startPos="startPos3" :endPos="endPos3" :lineWidth="5" :backgroundColor="'#22F142'" :borderRadius="10" :appear="'fadeIn'"></JsvLine>
    <div class="text text3">斜线带圆角淡入</div>
    <JsvLine :startPos="startPos4" :endPos="endPos4" :lineWidth="6" :backgroundColor="'#22F142'" :borderRadius="10" :appear="'fadeOut'"></JsvLine>
    <div class="text text4">斜线带圆角淡出</div>
    <JsvLine :startPos="startPos5" :endPos="endPos5" :lineWidth="40" :backgroundImage="bg" :borderRadius="20" ></JsvLine>
    <div class="text text5">带圆角背景图</div>
    <JsvLine :startPos="startPos6" :endPos="endPos6" :lineWidth="30" :backgroundImage="'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))'" :borderRadius="20" ></JsvLine>
    <div class="text text6">带圆角渐变色</div>
</div>
</template>

<script setup>
import { JsvLine } from "jsview"
import bg from "./bgimage.jpg"

const startPos1={
    x:340,
    y:40
}
const endPos1={
    x:340,
    y:160
}

const startPos2={
    x:840,
    y:150
}
const endPos2={
    x:1040,
    y:50
}

const startPos3={
    x:340,
    y:300
}
const endPos3={
    x:560,
    y:400
}

const startPos4={
    x:760,
    y:400
}
const endPos4={
    x:980,
    y:300
}

const startPos5={
    x:240,
    y:550
}
const endPos5={
    x:500,
    y:520
}
const startPos6={
    x:840,
    y:520
}
const endPos6={
    x:1100,
    y:550
}
</script>

<style lang="scss" scoped>
.bgStyle {
    width:1280;
    height:720;
    background-color: #007788;
}
.text{
    width:180;
    height:30;
    background-color: #000000;
    line-height: 30;
    font-size: 24;
    font-weight: bold;
    color:#FFFFFF;
    text-align: center;
}
.text1{
    top:200;
    left:240; 
}
.text2{
    top:200;
    left:840
}
.text3{
    top:430;
    left:340;
}
.text4{
    top:430;
    left:780;
}
.text5{
    top: 620;
    left:280;
}
.text6{
    top:620;
    left:860
}
</style>