.service-grid { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; /* grid-template-columns: repeat(2, 1fr); gap: 34rpx; */ } .service-item { width: 334rpx; background-color: #fff; border-radius: 20rpx; box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.05); overflow: hidden; position: relative; margin-bottom: 24rpx; } .service-image { width: 334rpx; height: 334rpx; background-color: #000000; } .service-tag { position: absolute; top: 0rpx; left: 0rpx; background-color: #E8101E; color: #FFFFFF; font-size: 24rpx; padding: 6rpx 14rpx; border-radius: 0 0 20rpx 0; } .service-info { padding: 16rpx; } .service-title { margin-bottom: 16rpx; display: flex; align-items: center; flex-direction: row; } .service-title-type { width: 64rpx; /* 图片与文字之间的间距 */ margin-right: 13rpx; } .service-title-text { font-weight: 500; font-size: 28rpx; color: #000000; line-height: 40rpx; text-align: left; font-style: normal; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* 显示的行数 */ lines: 1; /* NVUE下要用这个属性,来让文字超出隐藏变省略号 */ } .service-row { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .service-sales { font-size: 24rpx; color: #808080; } .service-price { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .price-symbol { font-weight: 500; font-size: 24rpx; color: #E8101E; line-height: 33rpx; text-align: left; font-style: normal; } .price-value { font-weight: 500; font-size: 36rpx; color: #E8101E; line-height: 33rpx; text-align: left; font-style: normal; } .shop-text { font-size: 24rpx; color: #3D3D3D; font-weight: 400; } /* .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rpx; } .service-item { background-color: #F8F8F8; border-radius: 8rpx; overflow: hidden; position: relative; } .service-images { position: relative; width: 100%; height: 320rpx; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rpx; } .service-image { width: 100%; height: 100%; background-color: #eee; } .single-image { width: 100%; height: 320rpx; } .service-tag { position: absolute; top: 0; left: 0; background-color: #FF94B4; color: #FFFFFF; font-size: 24rpx; padding: 6rpx 14rpx; border-radius: 20rpx 0 20rpx 0; } .service-info { padding: 16rpx; } .service-title { font-size: 28rpx; color: #333; margin-bottom: 8rpx; } .service-price { display: flex; align-items: baseline; } .price-symbol { font-size: 24rpx; color: #E8101E; } .price-value { font-size: 32rpx; color: #E8101E; font-weight: 500; margin-right: 12rpx; } .find-similar { font-size: 24rpx; color: #999; margin-left: auto; } .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } */ /* APP适配 */