<!--
 * @Author: ChenChanghua
 * @Date: 2022-04-20 21:05:26
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 11:16:52
 * @Description: file content
-->
<script setup>
import image1 from "./images/1.png";
import { JsvScreenFlex } from "jsview";
</script>

<template>
  <!-- 测试aligneContent未设置, 内容进行stretch的场景 -->
  <JsvScreenFlex
    :style="{
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
    }"
    background="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/FullScreenFlex/TestFrame2/BackgroundLongmao.jpg"
  >
    <div
      id="DivAnchor1"
      :style="{
        width: 50,
        height: 50,
        backgroundColor: '#00F000',
      }"
    />
    <div
      :style="{
        width: 50,
        height: 50,
        backgroundColor: '#0000F0',
      }"
    />
  </JsvScreenFlex>

  <JsvScreenFlex
    :style="{
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }"
  >
    <div
      id="DivAnchor2"
      :style="{
        width: 200,
        height: 200,
        backgroundColor: '#00F000',
      }"
    />
    <div
      :style="{
        width: 200,
        height: 200,
        backgroundColor: '#0000F0',
      }"
    />
  </JsvScreenFlex>

  <JsvScreenFlex
    :style="{
      flexDirection: 'row',
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
    }"
  >
    <div
      id="DivAnchor3"
      :style="{
        width: 300,
        height: 300,
      }"
    >
      <div
        :style="{
          top: 10,
          left: 10,
          width: 280,
          height: 280,
          backgroundColor: '#00F000',
        }"
      />
    </div>
    <div
      :style="{
        width: 300,
        height: 300,
      }"
    >
      <div
        :style="{
          top: 10,
          left: 10,
          width: 280,
          height: 280,
          backgroundColor: '#0000F0',
        }"
      />
    </div>
  </JsvScreenFlex>
</template>

<style scoped></style>
