<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  ></div>

  <couplets
    :sourceMap="sourceMap"
    :leftPosition="leftPosition"
    :rightPosition="rightPosition"
    :size="size"
    :duration="2"
  ></couplets>
</template>

<script setup>
import Couplets from "./Couplets.vue";
const leftImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_left.png";
const rightImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_right.png";
const scrollSprite = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll.png";
const scrollStatic = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll_static.png";

const sourceMap = {
  leftContent: leftImage,
  rightContent: rightImage,
  scrollSprite: scrollSprite,
  scrollStatic: scrollStatic,
};

const size = {
  width: 180,
  height: 600,
};

const leftPosition = {
  left: 100,
  top: 30,
};

const rightPosition = {
  left: 1000,
  top: 30,
};
</script>
