auxiliary_sample/src/views/Simple.vue

<template>
  <div class="simple_home">
    <main>
      <div class="main">
        <div v-for="(item, index) in simpleCardList" :key="index">
          <SimpleCard :simpleInfo="item" :key="item.id"></SimpleCard>
           <!-- <SimpleCardVertical :simpleInfo="item" :key="item.id"></SimpleCardVertical> -->
        </div>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
  import {ref} from 'vue'
  import SimpleCard from './components/SimpleCard.vue'
  import SimpleCardVertical from './components/SimpleCardVertical.vue'
  
  const simpleCardList = ref([{
    id:1,
    time:123,
    state:1,
  },{
    id:2,
    time:123,
    state:1,
  },{
    id:3,
    time:123,
    state:1
  },{
    id:4,
    time:123,
    state:1
  },{
    id:5,
    time:123,
    state:1
  },{
    id:6,
    time:123,
    state:1
  }])
</script>
<style scoped>
.main{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: row;
  padding-left: 5px;
  margin-top:-5px;
}
.simple_home{
  background: #ECF2FF;
}
.sidebar {
  width: 100%;
  height: 50px;
  margin-right: 20px;
}
</style>