body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .container {
    width: 600px; /* 设置相同的宽度 */
    height: 90px;
    margin: 20px;
    padding: 10px;
    background-color: #581C7E; /* 蓝色背景 */
    color: #fff; /* 白色字体 */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
    text-align: center; /* 文字水平居中 */
    display: flex; /* 容器设置为flex布局 */
    flex-direction: column; /* 纵向排列子元素 */
    justify-content: center; /* 文字垂直居中 */
  }
  
  .container:hover {
    background-color: #fff; /* 鼠标悬浮时的白色背景 */
    color: #581C7E; /* 鼠标悬浮时的蓝色字体 */
  }
  
  .container img {
    max-width: 100%; /* 确保图片在容器内 */
    max-height: 100%; /* 确保图片在容器内 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .container p {
    font-size: 20px;
    margin: 10px 0;
  }
  

/* 媒体查询 - 适配手机设备 */
@media screen and (max-width: 650px) {
    .container {
      max-width: 90%; /* 手机屏幕宽度减去10像素 */
      align-items: center; /* 水平居中 */
    }
  }