用户:南鸢晨星/test.css

/* 容器样式 */
.item-container {
    overflow: hidden;
    position: relative; /* 设置为相对定位 */
    display: inline-block; /* 使容器可以与其他元素并排显示 */
    width: 120px; /* 设置物品框的宽度 */
    border: 1px solid #ddd; /* 添加边框 */
    margin: 10px; /* 添加外边距 */
    background-color: #fff; /* 背景颜色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    border-radius: 8px; /* 添加圆角 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 物品图片样式 */
.item-image-container {
    overflow: hidden;
    position: relative; /* 设置为相对定位 */
    width: 100%; /* 图片宽度占满容器 */
    height: auto; /* 保持图片比例 */
    border-radius: 8px 8px 0 0; /* 添加圆角 */
}

/* 数量样式 */
.item-quantity {
    overflow: hidden;
    position: absolute; /* 绝对定位 */
    bottom: 10px; /* 距离底部的距离 */
    right: 10px; /* 距离右侧的距离 */
    font-size: 14px; /* 字体大小 */
    color: white; /* 字体颜色 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    padding: 2px 5px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    z-index: 10; /* 确保数量在上层 */
}

/* 底部价格区域 */
.item-price {
    overflow: hidden;
    position: relative; /* 相对定位 */
    width: 100%; /* 与物品框宽度一致 */
    background-color: #f9f9f9;
    border-top: 1px solid #ddd; /* 添加顶部边框 */
    padding: 10px 0;
    text-align: center;
    border-radius: 0 0 8px 8px; /* 添加圆角 */
}

.item-price img {
    overflow: hidden;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}