.BoxBg{ background-color: #000033; overflow: hidden; font-size: 28rpx; min-height: 100vh; } .Box{ width: 96%; margin: 0 2%; } .topBox{ height: 70rpx; line-height: 20rpx; color: #666666; margin-top: 10rpx; } .TopNavigationBox{ width: 90%; height: 100%; overflow: hidden; overflow-y: hidden; overflow-x: auto; white-space: nowrap; float: left; } .TopNavigationBox::-webkit-scrollbar { display: none; } .logo{ width: 33rpx; float: right; height: 36rpx; float: left; margin-top: 10rpx; margin-left: 12rpx; } .item{ /* width: 80rpx; */ height: 60rpx; height: 60rpx; margin: 0 20rpx; position: relative; display: inline-block; text-align: center; } .title_a{ font-size: 34rpx; color: #00cc99; padding-bottom: 10rpx; } .title{ line-height: 60rpx; color: #666666; } .wire{ width: 70%; margin: 10rpx auto; height: 2rpx; background-color: #00cc99; } .searchBox{ overflow: hidden; } .searchF{ width: 96%; height: 68rpx; background-color: rgba(51, 51, 51, 0.5); border-radius: 60rpx; margin: 20rpx auto; } .searchLogo{ width: 30rpx; height: 30rpx; float: left; margin: 20rpx 10rpx 15rpx 60rpx; } .searchText{ color: #666666; line-height: 68rpx; float: left; width: 80%; margin: 0 auto; height: 100%; color: #ffffff; } .swiperBox{ margin: 20rpx 0; border-radius: 10rpx; } .swiper{ width: 100%; height: 280rpx; } .swiperImg{ width: 100%; height: 100%; background-color: chocolate; border-radius: 10rpx; } .columnBox{ display: flex; justify-content: center; margin-top: 20rpx; } .columnItem{ width: 20%; margin: 0 auto; } .columnImg{ width: 90rpx; height: 90rpx; display: block; margin: 20rpx auto; } .columnText{ color: #ffffff; text-align: center; line-height: 40rpx; font-size: 26rpx; font-family: PingFang SC; font-weight: 500; color: #FFFFFF; } .deyBox{ overflow: hidden; } .deyTitleBox{ /* overflow: hidden; */margin: 60rpx 0 35rpx 0; } .deyTitleImg{ width: 48rpx; height: 50rpx; float: left; margin: 0 10rpx ; display: block; } .authorImg{ width: 40rpx; height:46rpx; float: left; margin: 0 10rpx ; display: block; } .deyTitle{ font-size: 36rpx; font-family: OPPOSans; font-weight: 500; color: #FFFFFF; margin-left: 10rpx; letter-spacing:4rpx; } .authorBox1{ margin-top: 26rpx; } .authorImgTop{ width: 110rpx; height: 110rpx; border-radius: 50%; margin: 40rpx auto; } .deyImgBox{ display: flex; /* justify-content: space-around; */ flex-wrap :wrap; } /* .authorOutsideBox{ width: 100%; height: 400rpx; } */ .authorBox{ height: 380rpx; overflow: hidden; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .authorBox::-webkit-scrollbar { display: none; } .authorItem{ width: 200rpx; height: 300rpx; margin: 0 2%; border-radius: 10rpx 10rpx 10rpx 40rpx; text-align: center; background-image: -webkit-linear-gradient(top, #103930, #121620); } .imgBox{ width: 44%; overflow: hidden; display: inline-block; text-align: center; margin: 0 3%; /* height: 400rpx; */ } .imgitem{ position: relative; } .imgitem .img{ width: 100%; /* background-color: chartreuse; */ height: 185rpx; border-radius: 10rpx; } .posClass{ position: absolute; right: 0; top: 0; width: 70rpx; height: 40rpx; /* background-image: url('https://zhibotang.oss-cn-beijing.aliyuncs.com/douyin/drawable-xhdpi/home_bnt_bq.png'); */ /* background-size:74rpx 40rpx; */ color: #ffffff; font-size: 24rpx; z-index: 100000; background-color: rgb(124, 122, 122,0.5); border-radius: 10rpx ; } .imgBox .itemTitle{ height: 60rpx; line-height: 60rpx; text-align: center; color: #ffffff; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: #FCFFFF; } .handpickBox{ overflow: hidden; } .handpickTop{ overflow: hidden; margin: 40rpx 0 20rpx 0 ; } .handpickImg{ width: 40rpx; height: 46rpx; float: left; margin: 16rpx 10rpx 10rpx 10rpx ; } .handpickText{ font-size: 36rpx; color:#ffffff; padding: 10rpx 0 30rpx 0 ; margin-left: 10rpx; float: left; letter-spacing:4rpx; font-family: OPPOSans; font-weight: 500; } .handpickadd{ float: right; color: #00cc99; font-size: 30rrpx; margin: 10rpx 20rpx; } .handpickLogo{ width: 50rpx; height: 50rpx; float: right; background-color: #00cc99; margin-top: 10rpx; margin-right: 20rpx; border-radius: 50%; color: #ffffff; text-align: center; line-height: 50rpx; font-size: 36rpx; } .commodityBox{ overflow: hidden; margin-bottom: 30rpx; } .extendBox{ overflow: hidden; margin: 40rpx 0; } .extendMoreBox{ float: left; width: 45%; height: 70rpx; margin-right: 5%; background-color: #1A1D26; border-radius: 30rpx; } .changeBox { margin-left: 5%; float: left; background-color: #1A1D26; border-radius: 30rpx; width: 45%; height: 70rpx; } .commodityImg{ width: 254rpx; border-radius: 10rpx; height: 194rpx; float: left; margin-left: 10rpx; } .newCommodityImg{ width: 254rpx; border-radius: 10rpx; height: 194rpx; float: left; margin-left: 10rpx; } .commodityImage{ width: 100%; height: 154rpx; border-radius: 10rpx; } .classBoxImg{ width: 100%; height: 154rpx; border-radius: 10rpx 10rpx 0 0; margin: 0; } .describeBox{ width: 384rpx; margin-left: 30rpx; float: left; } .describeBame{ width: 100%; height: 64rpx; line-height: 32rpx; font-size: 30rpx; color: #ffffff; font-weight: 500; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .headImgBox{ float: left; } .headImg{ position: absolute; width: 50rpx; height: 50rpx; border-radius: 50%; top: 0; left: 0; } .annotation{ padding-left:70rpx ; padding-right:50rpx ; float: left; border-radius: 50rpx; height: 50rpx; background-color: #333; text-align: center; line-height: 50rpx; color: #9999cc; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1 } .introduce{ width: 96%; margin-top: 20rpx; color: #9999cc; height: 86rpx; line-height: 40rpx; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .priceBox{ margin-top: 18rpx; overflow: hidden; } .priceF{ float: left; color: #ff3366; font-size: 28rpx; } .price{ color: #ff3366; float: left; /* line-height: 60rpx; */ font-size: 28rpx; } .popularity{ width: 180rpx; height: 60rpx; float: right; margin-right: 60rpx; margin-top: 10rpx; background-color: chocolate; } .exchangeText{ float: left; color: #8790A8; line-height: 70rpx; margin-left: 20rpx; font-size: 30rpx; } .exchangeBox{ width: 90%; margin: 20rpx auto; height: 70rpx; line-height: 70rpx; border-radius: 50rpx; text-align: center; background: #1A1D26; } .exchangeImg{ width: 40rpx; height: 40rpx; margin-top: 15rpx ; margin-left: 260rpx; float: left; } .exchangeBtn{ float: left; width: 50rpx; height: 50rpx; margin: 5rpx 0 0 20rpx; background-color: cornflowerblue; } .authorImgBox{ background-color: rgba(51, 51, 51, 0.5); height: 360rpx; border-radius: 40rpx; overflow: hidden; } .nameBox{ height: 120rpx; background-color: rgba(51, 51, 51,0.6); border-radius: 0rpx 40rpx 0rpx 40rpx; } .authorName{ height: 50rpx; line-height: 50rpx; text-align: center; font-size: 30rpx; font-family: OPPOSans; font-weight: 500; color: #FFFFFF; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .authorText{ width: 90%; margin: 0 auto; color: #9999cc; height: 50rpx; line-height: 50rpx; text-align: center; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .rankingBox{ margin: 20rpx 0; } .sortBox{ overflow: hidden; display: flex; flex-wrap: wrap; justify-content:flex-start; } .sortNmu{ width: 18%; background-color: aqua; height: 360rpx; float: left; } .articleBox{ width: 82%; height: 360rpx; float: left; } .articleImg{ width: 40%; height: 100%; background-color: blueviolet; border-radius: 10rpx; float: left; } .articleTextBox{ float: left; width: 58%; margin-left: 2%; height: 100%; border-radius: 10rpx; } .articleTitle{ font-size: 34rpx; color: #ffffff; font-weight: 560; } .articlePopularity{ width: 180rpx; height: 60rpx; float: right; margin-right: 20rpx; margin-top: 10rpx; background-color: chocolate; } .sortItemBox{ width: 220rpx; margin: 10rpx ; float: left; } .sortItemImg{ position: relative; width: 100%; height: 134rpx; border-radius: 10rpx; } .sortItemImg image{ width: 100%; height: 100%; border-radius: 10rpx; } .sortNumBj_0{ position: absolute; width: 42rpx; height: 55rpx; background-image: url('https://zhibotang.oss-cn-beijing.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_1.png'); background-size:42rpx 55rpx; background-repeat:no-repeat; color: #ffffff; text-align: center; line-height: 46rpx; top: 0; left: 0; } .sortNumBj_1{ position: absolute; width: 42rpx; height: 55rpx; background-image: url('https://zhibotang.oss-cn-beijing.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_2.png'); background-size:42rpx 55rpx; background-repeat:no-repeat; color: #ffffff; text-align: center; line-height: 46rpx; top: 0; left: 0; } .sortNumBj_2{ position: absolute; width: 42rpx; height: 55rpx; background-image: url('https://zhibotang.oss-cn-beijing.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_3.png'); background-size:42rpx 55rpx; background-repeat:no-repeat; color: #ffffff; text-align: center; line-height: 46rpx; top: 0; left: 0; } .sortNumBj_3{ position: absolute; width: 42rpx; height: 55rpx; background-image: url('https://zhibotang.oss-cn-beijing.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_4.png'); background-size:42rpx 55rpx; background-repeat:no-repeat; color: #ffffff; text-align: center; line-height: 46rpx; top: 0; left: 0; } .sortTitle{ height: 60rpx; line-height: 30rpx; font-size: 24rpx; color: #FEFEFE; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin-top: 10rpx; } .popularityBox { padding-bottom: 10rpx; } .popularityImg{ float: left; width: 23rpx; height: 26rpx; margin-top: 8rpx; margin-left: 5rpx; } .popularityText{ float: left; font-size: 22rpx; margin: 0 10rpx; font-family: OPPOSans; line-height: 40rpx; font-weight: 500; } .popularityNum{ float: left; color: #07E881; font-size: 24rpx; height: 40rpx; line-height: 40rpx; } .newPopularity{ width: 100%; /* position: absolute; */ /* bottom: 0; */ /* left: 10; */ background-color: #222735; height: 40rpx; border-radius: 0 0 10rpx 10rpx ; margin-top: -8rpx; }