page{ background: #f4f4f4; } .brand-info .name{ width: 100%; height: 278rpx; position: relative; } .brand-info .img{ position: absolute; top:0; left:0; width: 100%; height: 278rpx; } .brand-info .info-box{ position: absolute; top:0; left:0; width: 100%; height: 278rpx; text-align: center; display: flex; justify-content: center; align-items: center; } .brand-info .info{ display: block; } .brand-info .txt{ display: block; height: 40rpx; font-size: 37.5rpx; color: #fff; } .brand-info .line{ margin: 0 auto; margin-top: 16rpx; display: block; height: 2rpx; width: 145rpx; background: #fff; } .sort{ position: relative; background: #fff; width: 100%; height: 78rpx; } .sort-box{ background: #fff; width: 100%; height: 78rpx; overflow: hidden; padding: 0 30rpx; display: flex; border-bottom: 1px solid #d9d9d9; } .sort-box .item{ height: 78rpx; line-height: 78rpx; text-align: center; flex:1; color: #333; font-size: 30rpx; } .sort-box .item .txt{ display: block; width: 100%; height: 100%; color: #333; } .sort-box .item.active .txt{ color: #b4282d; } .sort-box .item.by-price{ background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr3CSAazwCAAABD1aCMbo520.png) 155rpx center no-repeat; background-size: 15rpx 21rpx; } .sort-box .item.by-price.active.asc{ background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr3FOACHzqAAABHU5MD_M687.png) 155rpx center no-repeat; background-size: 15rpx 21rpx; } .sort-box .item.by-price.active.desc{ background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr3JCAcOP5AAABdVcSS6A457.png) 155rpx center no-repeat; background-size: 15rpx 21rpx; } .sort-box-category{ /* background: #fff; */ width: 100%; height: auto; /* overflow: hidden; */ padding: 20rpx 40rpx 0 0; /* border-bottom: 1px solid #d9d9d9; */ } .sort-box-category .item{ height: 54rpx; line-height: 54rpx; text-align: center; float: left; padding: 0 16rpx; margin: 0 0 40rpx 40rpx; border: 1px solid #666; color: #333; font-size: 24rpx; } .sort-box-category .item.active{ color: #b4282d; border: 1px solid #b4282d; } .cate-item .b{ width: 750rpx; height: auto; overflow: hidden; border-top: 1rpx solid #f4f4f4; margin-top: 20rpx; margin-bottom: 120rpx; } .cate-item .b .item{ float: left; background: #fff; width: 366rpx; padding-bottom: 33.333rpx; border-bottom: 1rpx solid #f4f4f4; height: auto; overflow: hidden; text-align: center; border-radius: 30rpx; margin: 5rpx; } .cate-item .imglist { width: 302rpx; height: 302rpx; /* float: left; */ display: flex; justify-content: center; align-items: center; border-radius: 20rpx; margin-left: 39rpx; } .touming-img{ opacity:0.6; filter:alpha(opacity=60); } .cate-item .b .item-b{ border-right: 1rpx solid #f4f4f4; } .cate-item .item .img{ margin-top: 10rpx; width: 302rpx; height: 302rpx; background-size:202rpx 202rpx; } .cate-item .item .name{ display: block; width: 365.625rpx; height: 70rpx; padding: 0 20rpx; margin: 11.5rpx 0 22rpx 0; text-align: center; font-size: 26rpx; color: #333; overflow: hidden; text-overflow: ellipsis; } .cate-item .item .price{ display: block; width: 365.625rpx; height: 30rpx; text-align: center; font-size: 30rpx; color: #b4282d; font-weight: bold; } .cate-item .item .price .cart{ margin-left: 20rpx; width: 35rpx; height: 35rpx; vertical-align: -6rpx; } .attr-pop { width: 100%; height: auto; padding: 31.25rpx; background: #fff; position: fixed; bottom: 100rpx; z-index: 500; } .attr-close{ float: right; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; font-size: 40rpx; text-align: center; overflow: hidden; } .attr-pop .img-info { width: 687.5rpx; height: 177rpx; overflow: hidden; margin-bottom: 41.5rpx; } .attr-pop .img { float: left; height: 177rpx; width: 177rpx; background: #f4f4f4; margin-right: 31.25rpx; } .attr-pop .info { /* float: left; */ height: 177rpx; display: flex; align-items: flex-start; } .attr-pop .p { font-size: 33rpx; color: #333; height: 33rpx; line-height: 33rpx; margin-bottom: 10rpx; } .attr-pop .a { font-size: 29rpx; color: #333; height: 40rpx; line-height: 40rpx; width: 260px; display:block; word-break: break-all; word-wrap: break-word; } .spec-con { width: 100%; height: auto; overflow: hidden; } .spec-con .name { height: 32rpx; margin-bottom: 22rpx; font-size: 29rpx; color: #333; } .spec-con .values { height: auto; margin-bottom: 31.25rpx; font-size: 0; } .spec-con .value { display: inline-block; height: 62rpx; padding: 0 35rpx; line-height: 56rpx; text-align: center; margin-right: 25rpx; margin-bottom: 16.5rpx; border: 1px solid #333; font-size: 25rpx; color: #333; } .spec-con .value.disable { border: 1px solid #ccc; color: #ccc; } .spec-con .value.selected { border: 1px solid #b4282d; color: #b4282d; } .number-item .selnum { width: 322rpx; height: 71rpx; border: 1px solid #ccc; display: flex; } .number-item .cut { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; } .number-item .number { flex: 1; height: 100%; text-align: center; line-height: 68.75rpx; border-left: 1px solid #ccc; border-right: 1px solid #ccc; float: left; } .number-item .add { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; } .bottom-btn { position: fixed; left: 0; bottom: 0; z-index: 10; width: 750rpx; height: 100rpx; display: flex; background: #fff; } .bottom-btn .r { border: 1px solid #b4282d; background: #b4282d; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #fff; } .addEnabel { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; color: #ccc; }