.product-release { margin-top: 18px; background-color: rgb(255, 255, 255); padding: 0px 19px 0px 19px; box-sizing: border-box; /* background: skyblue; */ } .product-release-table { width: 100%; margin-top: 15px; } .product-release-table-head { display: flex; } .product-release-table-img { /* width: 74px; height: 74px; background: #F5F5F5; margin-left: 20px; */ } .product-release-table table tbody td { border: 1px solid #E6E6E6; } .product-release-table-img-td {} .nodata { /* background-color: red; */ display: flex; align-items: center; justify-content: center; } .product-release-table-name-td { max-width: 130px; font-size: 16px; color: #1B8BD2; text-align: center; } /* .product-release-table-name { font-size: 16px; color: #1B8BD2; text-align: center ; background-color: red; } */ .product-release-table-btn { cursor: pointer; } .product-btn { margin-left: 20px; } .product-release-pagination { height: 50px; display: flex; justify-content: end; align-items: center; /* position: fixed; bottom: 30px; right: 30px; width:calc(100vw - 280px); */ background: rgb(255, 255, 255); /* background: pink; */ z-index: 2; } thead { position: sticky; top: 0; background: #F7F7F7; z-index: 1; } .showGoodsBox { margin-top: 80px; width: calc(100% - 2px); /* height: 100%; */ /* background-color: pink; */ /* 使用 grid 布局 */ display: grid; /* 自动填充列,每列最小宽度 183px,最大宽度 1fr */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 行间距 10px */ row-gap: 20px; /* 列间距 10px */ column-gap: 20px; /* cursor: pointer; */ } .goodSBox { position: relative; width: 100%; /* height: 340px; */ /* background-color: skyblue; */ margin: 0; /* cursor: pointer; */ border: 1px solid #EEEEEE; /* 初始设置透明边框,避免元素位置跳动 */ transition: border-color 0.3s ease; /* 添加过渡效果,让边框显示更平滑 */ } .delBtn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; /* background-color: rgba(0, 0, 0, 0.5); */ background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.3) 50%); /* background: linear-gradient(45deg, transparent 50%, rgb(197, 197, 197) 50%); */ cursor: pointer; z-index: 100; /* display: flex; */ align-items: flex-start; justify-content: flex-end; color: rgb(255, 255, 255); } .delBtn:hover { background: linear-gradient(45deg, transparent 50%, rgba(204, 155, 155, 0.5) 50%); color: rgb(209, 24, 24); } .delBtnIcons { margin-top: 4px; margin-left: 28px; z-index: 100; font-size: 18px; } .goodSBox:hover { /* border-color: #f8a12f; */ } .goodsImg { width: 100%; height: 245px; object-fit: cover; /* background: pink; */ padding: 15px 9px 0px 9px; box-sizing: border-box; overflow: hidden; position: relative; } .goodsTime { font-size: 14px; color: #e6e6e6; /* margin-top: 10px; */ position: absolute; /* background-color: skyblue; */ height: 33px; background: rgba(11, 70, 75, 0.41); width: 100%; left: 0; bottom: 0; text-align: center; line-height: 33px; } .tipsPrice { width: 63px; height: 32px; background: #FF9F08; border-radius: 0px 0px 0px 10px; color: white; font-size: 18px; text-align: center; line-height: 32px; position: absolute; right: 0; top: 0; } .goodsBot { padding: 10px 5px 10px 5px; box-sizing: border-box; /* height: 157px; */ /* background-color: rgb(175, 64, 64); */ } .goodsPrice { color: #E30000; font-size: 24px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .goodsStatus { font-size: 16px; } .goodsNameBox { display: flex; align-items: center; width: 100%; /* background-color: #1B8BD2; */ margin-top: 10px; } .goodsName { width: calc(100% - 29px); /* background-color: #1bd258; */ /* font-weight: bold; */ font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* cursor: pointer; */ } .goodsBtnBox { display: flex; margin-top: 10px; } .goodsBtn { margin-left: 10px; } .goodsBtn:hover { border: 1px solid #f8a12f; color: #f8a12f; } .goodsBtnIng { padding: 5px 10px; /* border: 1px solid #DCDCDC; */ font-size: 16px; color: #959595; /* margin-left: 10px; */ } .goodsBtnBox .goodsBtn:first-child { margin-left: 0; /* 让第一个按钮的左边距为 0 */ } @media (min-width: 1571px) { .goodsTypeArrayBox { width: calc(100% - 338px); background-color: #F6F6F6; padding: 15px; /* box-sizing: border-box; */ margin-bottom: 15px; display: flex; /* background-color: pink; */ position: fixed; /* width: 100%; */ z-index: 999; } } @media (max-width: 1570px) { .goodsTypeArrayBox { width: calc(100% - 298px); background-color: #F6F6F6; padding: 15px; /* box-sizing: border-box; */ margin-bottom: 15px; display: flex; /* background-color: pink; */ position: fixed; /* width: 100%; */ z-index: 999; } } .goodsTypeTitle { font-size: 18px; color: #707070; font-weight: 700; text-wrap: nowrap; } .goodsTypeArray { display: flex; font-size: 18px; flex-wrap: wrap; } .typeName { margin-left: 10px; margin-bottom: 5px; /* background-color: pink; */ position: relative; cursor: pointer; color: #707070; }