cqcarbonwxapp/pages/index/index.css

page{background-color: #f5f5f5;}

.title{font-size: 42rpx;color: #333;line-height: 59rpx;margin-bottom: 32rpx;font-weight: 600;}

.home-top{position: relative;height: 391rpx;padding-left: 40rpx;overflow: hidden;color: #fff;}
.home-top-bg{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;}
.home-top-til{margin-top: 120rpx;font-size: 42rpx;line-height: 49rpx;text-indent: -0.5em;}
.home-top-subtil{font-size: 26rpx;line-height: 37rpx;}

.swiper-wrap{margin: -151rpx auto 32rpx;width: 670rpx;height: 320rpx;overflow: hidden;border-radius: 16rpx;position: relative;}
.swiper{height: 100%;background:transparent;}
.adv-item{height: 100%;}
.swiper-wrap .pic{width: 100%;height: 100%;}

.dots-container{position: absolute;right: 24rpx;bottom: 24rpx;display: flex;justify-content: center;}
.dot {margin: 0 8rpx;width: 16rpx;height: 8rpx;background: #fff;border-radius: 4rpx;opacity: 0.7;}
.dot.active {width: 36rpx;opacity: 1;}

.buy-now{display: flex;box-sizing: border-box;padding-right: 54rpx;margin-top: 38rpx;margin-bottom: 32rpx;height: 112rpx;background: linear-gradient(to right,rgba(255,255,255,0) 20%,#fff 100% );box-shadow: 0px 0rpx 12rpx 0px rgba(0, 0, 0, 0.04);border-radius: 62rpx 100rpx 100rpx 0px;align-items: center;}
.buy-now-imgwrap{width: 270rpx;display: flex;align-items: flex-end;justify-content: center;margin-right: 37rpx;height: 100%;background: linear-gradient(90deg, #FFF900 20rpx, #FFD200 100%);border-radius: 62rpx 0px 61rpx 0px;box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);}
.buy-now-img{width: 166rpx;height: 134rpx;}
.buy-now-text{flex: 1;}
.buy-now-text-big{font-size: 36rpx;color: #333;line-height: 43rpx;}
.buy-now-text-small{font-size: 24rpx;color: #999;line-height: 33rpx;letter-spacing: 1rpx;}
.buy-now-icon{margin-right: 0;}
.buy-now-icon .iconfont{font-size: 44rpx;}

.type-nav{display: flex;align-items: center;margin-bottom: 32rpx;}
.type-nav-item{flex: 1;text-align: center;position: relative;}
.type-nav-item-til{font-size: 32rpx;color: #333;line-height: 45rpx;margin-bottom: 6rpx;font-weight: 500;}
.type-nav-item-subtil{font-size: 24rpx;color: #999;line-height: 33rpx;font-weight: 400;}
.type-nav-item.active .active-bg{width: 78rpx;margin-left: -39rpx;height: 54rpx;margin-top: -27rpx;position: absolute;left: 50%;top: 50%;z-index: -1;}

.product-list{display: flex;justify-content: space-between;flex-wrap: wrap;}
.product-list::after{content: '';width: 200rpx;}
.product-list-item{width: 200rpx;height: 200rpx;position: relative;margin-bottom: 18rpx;overflow: hidden;border-radius: 16rpx;text-align: center;}
.product-list-item:nth-child(3n-1){margin-left: 10rpx;margin-right: 10rpx;}
.product-list-item .product-img{width: 100%;height: 100%;}
.product-list-item .product-text{position: absolute;left: 0;bottom: 0;right: 0;height: 56rpx;line-height: 56rpx;font-size: 24rpx;color: #fff;padding-left: 16rpx;padding-right: 16rpx;overflow: hidden;text-overflow: ellipsis;background: rgba(0, 0, 0, 0.4);}

.rank-wrap{margin-bottom: 44rpx;border-radius: 16rpx;box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);}
.rank-tab{display: flex;background-color: #fff;margin-bottom: 8rpx;box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);border-radius: 16rpx;}
.rank-tab-item{flex: 1;position: relative;height: 86rpx;line-height: 86rpx;text-align: center;font-size: 28rpx;color: #333;}
.rank-tab-item.active{color: #26D18B;}
.rank-tab-item.active::after{content: '';width: 130rpx;margin-left: -65rpx;height: 4rpx;background-color: #26D18B;border-radius: 2rpx;position: absolute;left: 50%;bottom: 0;}
.rank-top{display: flex;justify-content: space-between;border-radius: 16rpx 16rpx 0 0 ;padding: 105rpx 29rpx 16rpx;background-color: #fff;position: relative;}
.rank-top-item{width: 210rpx;text-align: center;}
.rank-top-item.rank-top-2{width: 190rpx;padding-top: 12rpx;}
.rank-top-item.rank-top-3{width: 170rpx;padding-top: 25rpx;}
.rank-top-item.rank-top-3 .rank-top-text{bottom: 0;}
.rank-top-imgwrap .rank-bg{position: absolute;}
.rank-top-imgwrap .rank-left{left: 0;}
.rank-top-imgwrap .rank-right{right: 0;}
.rank-top-imgwrap .rank-center{bottom: 0;}

.rank-top-1 .rank-right,
.rank-top-1 .rank-left{width: 55rpx;height: 43rpx;bottom: 16rpx;z-index: 1;}
.rank-top-1 .rank-center{width: 179rpx;height: 46rpx;left: 16rpx;z-index: 3;}
.rank-top-2 .rank-right,
.rank-top-2 .rank-left{width: 49rpx;height: 39rpx;bottom: 15rpx;z-index: 1;}
.rank-top-2 .rank-center{width: 161rpx;height: 42rpx;left: 14rpx;z-index: 3;}
.rank-top-3 .rank-right,
.rank-top-3 .rank-left{width: 44rpx;height: 35rpx;bottom: 13rpx;z-index: 1;}
.rank-top-3 .rank-center{width: 145rpx;height: 38rpx;left: 12rpx;z-index: 3;}

.rank-top-photo{border: 1px solid transparent;background-clip: padding-box;position: relative;}
.rank-top-photo::after {content: "";display: block;position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;border-radius: 50%;background: linear-gradient(180deg, rgba(253, 227, 127, 1), rgba(251, 189, 78, 1)) 1 1;z-index: -1;}
/* .rank-top-photo{border:1px solid;} */
.rank-top-1 .rank-top-photo{border: 1px solid #FBBD4E;border-color: #FDE37F;}
.rank-top-2 .rank-top-photo{width: 130rpx;height: 130rpx;border-color: #8DC3FF;}
.rank-top-3 .rank-top-photo{width: 117rpx;height: 117rpx;border-color: #FBBD4E;}

.rank-top-text{font-size: 20rpx;color: #fff;position: absolute;left: 0;right: 0;bottom: 4rpx;text-align: center;z-index: 4;}
.rank-top-imgwrap{position: relative;margin-bottom: 12rpx;}
.rank-top-bg{width: 100%;height: 61rpx;position: absolute;left: 0;bottom: 0;}
.rank-top-photo{position: relative;width: 144rpx;height: 144rpx;border-radius: 50%;z-index: 2;}
.rank-top-name{font-size: 28rpx;color: #333;line-height: 40rpx;font-weight: 500;}
.rank-top-carbon{font-size: 20rpx;color: #999;}

.my-rank-wrap{flex: unset;position: absolute;top: 24rpx;right: 0;align-items: center;display: flex;}
.my-rank-photo{width: 80rpx;height: 80rpx;position: relative;right: -30rpx;box-sizing: border-box;border-radius: 50%;overflow: hidden;border: 2rpx solid #fff;}
.my-rank-photo .photo{width: 100%;height: 100%;}
.my-rank-text{padding: 7rpx 16rpx 0 45rpx;height: 80rpx;box-sizing: border-box;color: #fff;background: linear-gradient(139deg, #43D394 0%, #18C197 100%);box-shadow: 0px 10rpx 15rpx 0px rgba(0, 0, 0, 0.1), 0px 7rpx 14rpx 0px rgba(0, 0, 0, 0.08), 0px 3rpx 12rpx 0px rgba(0, 0, 0, 0.06);}
.my-rank-text .my-rank{font-size: 28rpx;line-height: 40rpx;}
.my-rank-text .my-rank-num{font-size: 20rpx;line-height: 28rpx;}
.rank-list-header{display: flex;align-items: center;height: 68rpx;font-size: 24rpx;color: #666;text-align: center;}
.rank-list-header-rank{width: 128rpx;}
.rank-list-header-user{flex: 1;}
.rank-list-header-carbon{width: 170rpx;margin-left: 0;padding-right: 40rpx;}
.rank-list{overflow: hidden;background-color: #fff;padding: 0 40rpx 0 0;border-radius: 0 0 16rpx 16rpx;}
.rank-list-item{display: flex;align-items: center;margin: 24rpx 0;padding-bottom: 31rpx;position: relative;}
.rank-list-item::after{content: '';width: calc( 100% - 128rpx );height: 2px;background-color: #EDEEED;position: absolute;right: 0;bottom: 0;}
.rank-list .rank-list-item:last-of-type::after{height: 0;}
.rank-list-rank{width: 128rpx;text-align: center;font-size: 32rpx;color: #999;}
.rank-list-user{flex: 1;display: flex;align-items: center;overflow: hidden;}
.rank-list-user .photo{width: 88rpx;height: 88rpx;border-radius: 50%;margin-right: 24rpx;}
.rank-list-user .name{font-size: 28rpx;color: #333;flex: 1;}
.rank-list-carbon{width: 170rpx;margin-left: 0;font-size: 26rpx;color: #26D18B;line-height: 37rpx;}
.rank-wrap >>> .nodata {width: auto;padding: 100rpx 0;background-color: #fff;border-radius: 16rpx;}

.product-list .nodata{padding: 100rpx 0;}