@import '../../common/common.wxss'; .goods-box { position: relative; padding: 40rpx 45rpx; color: #454552; /* border-bottom: 30rpx solid #ededed; */ } .goods-box .goods-thumb { width: 300rpx; height: 300rpx; margin: 35rpx 0 125rpx; } .to-carts-icon { position: absolute; right: 70rpx; top: 70rpx; width: 10rpx; height: 10rpx; border-radius: 50%; opacity: .6; -webkit-animation: to_cart .3s ease-out; animation: to_cart .3s ease-out; } @-webkit-keyframes to_cart { 0% { right: 100rpx; top: 530rpx; -webkit-transform: scale(4); } /*60%{ top: 20rpx; }*/ } @keyframes to_cart { 0% { right: 100rpx; top: 530rpx; transform: scale(4); } /*60%{ top: 20rpx; }*/ } .carts-icon { position: absolute; right: 40rpx; top: 40rpx; width: 75rpx; height: 75rpx; } .carts-icon image { width: 100%; height: 100%; } .carts-icon.on { -webkit-animation: to_cart_scale .3s ease; animation: to_cart_scale .3s ease; } @-webkit-keyframes to_cart_scale { 50% { -webkit-transform: scale(1.2); } } @keyframes to_cart_scale { 50% { transform: scale(1.2); } } .carts-icon-num { position: absolute; left: -15rpx; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; background: #AB956D; color: #fff; font-size: 24rpx; } .goods-box .goods-operation { position: relative; width: 100%; height: 100rpx; line-height: 100rpx; padding: 0 50rpx; margin-bottom: 60rpx; box-sizing: border-box; border-radius: 50rpx; background: #AB956D; color: #fff; font-size: 14px; } .goods-operation text { display: inline-block; height: 100rpx; } .goods-to-buy { margin-top: 5px; width: 80px; height: 40px; font-size: 16px; color: #fff; background-color: rgb(243, 106, 96); box-sizing: border-box; border-radius: 50rpx; } .goods-operation-num { width: 160rpx; } .banner { height: 240px; padding-bottom: 20px; text-align: center; } .goods-operation-add { font-weight: bold; width: 80rpx; height: 80rpx; margin-right: 15rpx; } .goods-to-cart { width: 210rpx; /* padding-right: 75rpx; */ color: black; } .goods-cart-img { position: absolute; right: 50rpx; top: 28rpx; width: 45rpx; height: 45rpx; } .goods-stock { font-size: 28rpx; margin-bottom: 20rpx; margin-top: 50px; } .goods-info { display: flex; justify-content: space-between; align-items: center; } .left-section { display: flex; flex-direction: column; } .goods-title { font-size: 40rpx; } .goods-price { font-size: 50rpx; font-weight: bold; color: red; } .right-section { display: flex; align-items: center; } .btn-icon { font-size: 20rpx; } .share-text { padding-left: 8rpx; padding-top: 8rpx; font-size: 20rpx; line-height: 24rpx; } .goods-buy { position: fixed; /* 固定在页面底部 */ bottom: 0; /* 距离底部为0 */ left: 0; /* 左侧对齐 */ width: 100%; /* 宽度占满屏幕 */ display: flex; justify-content: space-between; padding: 10rpx 20rpx; /* 添加一些内边距 */ background-color: #fff; /* 设置背景颜色 */ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加一个阴影 */ } .left-return { font-size: 32px; flex-grow: 0; /* 防止按钮拉伸 */ } .right-buy { flex-grow: 0; /* 防止按钮拉伸 */ } .goods-tab-nav { display: inline-block; width: 33.33%; height: 90rpx; line-height: 90rpx; border-bottom: 1rpx solid #ededed; box-sizing: border-box; text-align: center; color: #c7c7cb; } .goods-tab-nav.on { color: #bcaa8a; border-bottom: 5rpx solid #bcaa8a; } .goods-content { padding: 40rpx; }