/* pages/user/likes/index.wxss */ page { background: #f6f6f6; } .types { display: flex; justify-content: space-around; align-items: center; height: 86rpx; position: fixed; left: 0; right: 0; border-bottom: 1rpx solid #ccc; font-size: 29rpx; color: #333; background: white; z-index: 2; } .type { position: relative; width: calc(100% / 3); text-align: center; height: 86rpx; line-height: 86rpx; } .type.active { color: #000; font-size: 33rpx; font-weight: 500; } .type.active::after { content: "1"; font-size: 0; display: block; position: absolute; width: 46rpx; height: 5rpx; background: #0B898E; border-radius: 3rpx; left: 50%; margin-left: -23rpx; bottom: 0; } .item { display: flex; padding: 20rpx; transition: all 0.4s; justify-content: space-between; transform: translateX(180rpx); margin-left: -180rpx; } .item image { width: 140rpx; height: 140rpx; border-radius: 10rpx; margin-right: 18rpx; flex-shrink: 0; } .right-info { width: 490rpx; height: 100rpx; } .right-info .title { line-height: 29rpx; font-size: 30rpx; font-weight: 500; color: #333; } .right-info .price { color: #D62828; font-size: 30rpx; font-weight: bold; margin-top: 23rpx; line-height: 23rpx; } .right-info .location { font-size: 26rpx; color: #333; margin-top: 29rpx; font-weight: bold; line-height: 30rpx; } .right-info .location .iconfont { color: #0B898E; margin-right: 6rpx; font-size: 26rpx; } .del { background-color: #e4393c; width: 180rpx; display: flex; flex-direction: column; align-items: center; height: 200rpx; justify-content: center; color: #fff; transform: translateX(180rpx); transition: all 0.4s; flex-shrink: 0; opacity: 0; margin-left: 30rpx; text-align: center; } .goods-item { display: flex; align-items: center; justify-content: space-between; margin: 30rpx; overflow: hidden; background: white; border-radius: 20rpx; } .touch-move-active .del,.touch-move-active .item { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }