<script setup>
import { JsvFlexDiv } from "jsview";
import image1 from "./images/1.png";
import image2 from "./images/2.png";
import image3 from "./images/3.png";
import image4 from "./images/4.jpg";
</script>

<template>
  <!-- 测试aligneContent未设置, 内容进行stretch的场景, 有剩余 -->
  <JsvFlexDiv
    :style="{
      width: 300,
      height: 400,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'stretch',
      flexWrap: 'wrap',
      // alignContent: 'center',
    }"
  >
    <div
      :style="{
        height: 40,
        width: 300,
        fontSize: 15,
        lineHeight: 18,
        color: '#FFFFFF',
        textAlign: 'center',
      }"
    >
      {{ "测试多行aligneContent未设置,\n 内容进行stretch的场景，有剩余" }}
    </div>
    <img :src="image1" :style="{ height: 50 }" />
    <img :src="image1" :style="{ height: 80 }" />
    <div
      id="DivAnchor1"
      :style="{ width: 20, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
    />
    <img :src="image1" :style="{ height: 70 }" />

    <img :src="image1" :style="{ height: 70 }" />
    <img :src="image1" :style="{ height: 80 }" />
    <img :src="image1" :style="{ height: 60 }" />
    <img :src="image1" :style="{ height: 30 }" />
    <div
      id="DivAnchor2"
      :style="{ width: 60, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
    />

    <img :src="image1" :style="{ height: 100 }" />
    <div
      id="DivAnchor3"
      :style="{ width: 100, backgroundColor: 'rgba(255, 0, 0, 0.8)' }"
    />
    <img :src="image1" :style="{ height: 100 }" />
  </JsvFlexDiv>
</template>

<style scoped></style>
