<template>
  <div class="container">
    <div v-for="item in 10" :key="item" class="template">
      <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
      <span>报名/签到模板</span>
      <span style="color: rgb(127, 127, 127)"
        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
      >
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-flow: row wrap;

  // background-color: white;
  justify-content: space-around;

  .template {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(204px / 1.17);
    height: calc(193px / 1.3);
    margin: 2px;
    border-radius: 6px;
    background-color: white;
    box-shadow: 4px 4px 3px 2px #e0e0e0;

    * {
      font-size: 10px;
    }
  }
}
</style>
