<template>
    <div class="square-component">
      <div class="top-right-badge">{{ topBadgeText }}</div>
      <div class="square">
        <img src="https://th.bing.com/th/id/R.466bb61cd7cf4e8b7d9cdf645add1d6e?rik=YRZKRLNWLutoZA&riu=http%3a%2f%2f222.186.12.239%3a10010%2fwmxs_161205%2f002.jpg&ehk=WEy01YhyfNzzQNe1oIqxwgbTnzY7dMfmZZHkqpZB5WI%3d&risl=&pid=ImgRaw&r=0" alt="">
      </div>
      <div class="bottom-badge">{{ bottomBadgeText }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      topBadgeText: String,
      bottomBadgeText: String,
    },
  };
  </script>
  
  <style scoped>
  .square-component {
    position: relative;
    width: 4rem; /* 正方形的宽度 */
    height: 4rem; /* 正方形的高度 */
    background-color: #3498db; /* 正方形的背景颜色，你可以根据需要更改 */
  }
  
  .square {
    width: 100%;
    height: 100%;
  }
  .square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  .top-right-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e74c3c; /* 右上角标识的背景颜色，你可以根据需要更改 */
    color: white;
    text-align: center; 
    /* padding: 5px 10px; */
  }
  
  .bottom-badge {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #27ae60; /* 底部标识的背景颜色，你可以根据需要更改 */
    color: white;
    text-align: center; 
    /* padding: 5px 10px; */
  }
  </style>