123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- .border-radius {
- background: #FFFFFF;
- border-radius: 24rpx;
- margin: 20rpx;
- }
- .top {
- padding-bottom: 20rpx;
- }
- .top image {
- width: 240rpx;
- height: 240rpx;
- }
- .top .btn-box {
- margin-top: 40rpx;
- }
- .top .btn-box .btn {
- width: 184rpx;
- height: 62rpx;
- box-sizing: border-box;
- border-radius: 33rpx;
- border: 2rpx solid #FA7D22;
- font-size: 24rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #FA7D22;
- }
- .top .btn-box .btn.active {
- background: #FA7D22;
- color: #fff;
- }
- .list {
- padding: 40rpx 20rpx;
- }
- .list .item {
- margin-top: 20rpx;
- /* padding: 12rpx 20rpx 20rpx; */
- }
- .list .item .change-img {
- width: 48rpx;
- height: 48rpx;
- margin-right: 16rpx;
- }
- .list .item-card {
- border-radius: 20rrpx;
- overflow: hidden;
- background: #FAFAFA;
- box-sizing: border-box;
- }
- .list .item-card text {
- font-size: 28rpx;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #333333;
- }
- .list .item .card-img {
- width: 160rpx;
- height: 160rpx;
- }
- .list .item .btn {
- width: 136rpx;
- height: 56rpx;
- color: #666;
- font-size: 28rpx;
- border-radius: 28rpx;
- border: 2rpx solid #E1E1E1;
- }
- .btm {
- height: 170rpx;
- position: fixed;
- width: 100%;
- left: 0;
- bottom: 0;
- /* bottom: 56rpx; */
- background: #fff;
- /* padding: 0 28rpx; */
- }
- .btm-btn {
- width: 100%;
- height: 84rpx;
- font-size: 36rpx;
- color: #FFFFFF;
- margin: 0 40rpx;
- background: #FA7D22;
- border-radius: 42rpx;
- /* margin-top: 64rpx; */
- }
- .no-more-data {
- font-size: 24rpx;
- color: #666;
- padding: 10rpx 0 40rpx;
- }
- .vip-price-box .vip-origin-price {
- font-size: 28rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #999999;
- line-height: 40rpx;
- text-decoration: line-through;
- }
- .tabs-content {
- padding: 0 30rpx;
- background-color: #fff;
- }
- .tabs-content .item {
- padding: 20rpx 0;
- background: #fff;
- }
- .tabs-content .item-image {
- width: 280rpx;
- height: 280rpx;
- background-color: #efefef;
- border-radius: 24rpx;
- margin-right: 20rpx;
- }
- .tabs-content .tags {
- flex-wrap: wrap;
- }
- .tabs-content .tags-item {
- margin-bottom: 4px;
- padding: 2rpx 4rpx;
- background: #F7F7F7;
- border-radius: 8rpx;
- font-size: 24rpx;
- font-family: PingFang-SC-Medium, PingFang-SC;
- font-weight: 500;
- color: #979797;
- display: inline;
- margin-right: 20rpx;
- }
- .tabs-content .tags-item:last-child {
- /* margin-right: 0; */
- }
- .tabs-content .vip-price {
- background: #CAA470;
- border-radius: 8rpx;
- padding: 4rpx;
- /* display: inline-block; */
- height: 28rpx;
- /* box-sizing: border-box; */
- }
- .tabs-content .vip-price text {
- font-size: 20rpx;
- color: #fff;
- }
- .tabs-content .vip-price .price {
- background-color: #fff;
- border-radius: 8rpx;
- color: #CAA470;
- padding: 0 8rpx;
- }
- .tabs-content .btn-box image {
- width: 88rpx;
- height: 30rpx;
- margin-left: 16rpx;
- }
- .tabs-content .btn {
- width: 96rpx;
- height: 50rpx;
- background: #FA7D22;
- border-radius: 37rpx;
- font-size: 24rpx;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- }
- .tabs-content.active {
- display: grid;
- grid-gap: 20rpx 20rpx;
- padding: 0 20rpx 20rpx;
- grid-template-columns: repeat(2, 1fr);
- background-color: #F7F8FA;
- }
- .tabs-content.active .item {
- width: 344rpx;
- height: 608rpx;
- display: flex;
- flex-direction: column;
- border-radius: 24rpx;
- overflow: hidden;
- padding: 0;
- }
- .tabs-content.active .item-image {
- width: 344rpx;
- height: 344rpx;
- border-radius: 0;
- }
- .tabs-content.active .item-text {
- padding: 0 24rpx;
- }
- .tabs-title {
- height: 74rpx;
- }
- .tabs-title .line {
- width: 130rpx;
- height: 2rpx;
- background: #E9E9E9;
- }
- .opct{
- opacity: 0;
- }
|