.red { color: #FE6867; } .gray { color: #7b7b7b; } .w25 { width: 25%; } .w50 { width: 50%; } .w164 { width: 164rpx; } .bold { font-weight: bold; } .mgt12 { margin-top: 12rpx; } view, text { line-height: normal; } page, .container { /* background-color: #f2f2f2; */ height: 100%; /* background-color: pink; */ } .container { /* background-color: white; */ /* position: fixed; width: 100%; bottom: 0; */ box-sizing: border-box; padding: 160rpx 40rpx 0; background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); /* padding-bottom: 128rpx; */ } .search-container { display: flex; padding: 26rpx 20rpx; border-bottom: 2rpx solid #f8f8f8; } .input-container { flex: 1; border-radius: 6rpx 0 0 6rpx; overflow: hidden; } .search { background-color: #f0f0f0; padding: 10rpx 20rpx; font-size: 28rpx; } .btn-search { background-color: #FE6867; color: white; padding: 0 30rpx; display: flex; align-items: center; border-radius: 0 6rpx 6rpx 0; } .title { display: flex; font-size: 30rpx; border-bottom: 2rpx solid #f8f8f8; } .title .iconfont { color: #ccc; font-size: 16rpx; margin-left: 8rpx; } .title-item { width: 25%; box-sizing: border-box; text-align: center; padding: 20rpx; position: relative; } .title-item.active { color: #FE6867; font-weight: bold; } .title-item.active:after { content:''; position: absolute; width: 50%; height: 4rpx; background-color: #FE6867; left: 0; right: 0; bottom: 0; margin: 0 auto; } .list-container { height: calc(100% - 118rpx); } .list { box-sizing: border-box; height: calc(100% - 82rpx); background-color: #f2f2f2; /* padding-bottom: 102rpx; */ } .list.active1 { height: calc(100% - 82rpx - 78rpx); padding-bottom: 0; } .list.active2 { padding-bottom: 0; } .list-item { display: flex; padding: 20rpx; border-bottom: 2rpx solid #f8f8f8; background-color: white; } .img-container { background-color: #f0f0f0; width: 280rpx; height: 248rpx; display: flex; align-items: center; justify-content: center; position: relative; } .img-container:after { font-family: iconfont; content: '\e8c1'; color: #bbb; font-size: 80rpx; } .img-container.live:before { content: '\e664'; } .img-container.coming:before { content: '\e608'; } .img-container.playback:before { content: '\e603'; } .img-container.live:before, .img-container.coming:before, .img-container.playback:before { font-family: iconfont; background-color: #FE6867; color: white; width: 50rpx; height: 50rpx; line-height: 50rpx; text-align: center; border-radius: 50%; position: absolute; left: 10rpx; top: 10rpx; } .details { flex: 1; padding-left: 20rpx; } .btn-share { box-sizing: border-box; display: inline-block; background-color: #FE6867; color: white; padding: 8rpx 30rpx; border-radius: 6rpx; text-align: center; } .pdt10 { padding-top: 10rpx; } .pdt14 { padding-top: 14rpx; } .pdtb6 { padding-top: 6rpx; padding-bottom: 6rpx; } .pdtb8 { padding-top: 8rpx; padding-bottom: 8rpx; } .pdl20 { padding-left: 104rpx; } .no-more { line-height: 3; color: #ccc; /* background-color: #f2f2f2; */ } .nodata { text-align: center; background-color: #f2f2f2; } .progress-container { width: 55%; padding-right: 10rpx; position: relative; text-align: center; } .retail { color: #7b7b7b; text-decoration: line-through; font-size: 22rpx; padding-left: 20rpx; } .name { height: 76rpx; overflow: hidden; } .percent { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: white; } .tabbar { position: fixed; width: 100%; bottom: 0; background-color: white; } .tabbar:after { position: absolute; content: ''; width: 2rpx; height: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #f0f0f0; } .tabbar-item { width: 50%; text-align: center; padding-top: 30rpx; padding-bottom: 30rpx; } .tabbar-item .iconfont { margin-right: 10rpx; } .tabbar-item.active { color: #FE6867; } .group-type, .group-num { position: relative; font-size: 22rpx; } .group-type:before, .group-num:before { font-family: iconfont; } .group-type:before { content: '\e66a'; color: white; background-color: #FE6867; position: absolute; left: 0; top: 0; bottom: 0; padding-left: 6rpx; padding-right: 10rpx; line-height: 30rpx; } .group-num:before { padding-right: 6rpx; } .group-num:before { content: '\e694'; position: relative; } .group-num { color: white; background-color: #FE6867; border-radius: 34rpx; padding-left: 10rpx; padding-right: 10rpx; margin-right: 14rpx; } .group-type { color: #FE6867; border: 2rpx solid #FE6867; padding-left: 42rpx; padding-right: 4rpx; border-radius: 6rpx; } .badge { color: white; padding: 0 20rpx; border-radius: 6rpx; background-color: #FE6867; margin-right: 10rpx; } .subTab-title { text-align: center; justify-content: center; align-items: center; font-size: 28rpx; } .subTab-list { padding: 20rpx; } .subTab-titleItem { box-sizing: border-box; width: calc(100% / 3); padding: 20rpx 40rpx; background-color: white; border-right: 2rpx solid #f8f8f8; } .subTab-titleItem:last-child { border-right: none; } .subTab-titleItem.active { background-color: #FE6867; color: white; } .subTab-item { padding: 20rpx; border-bottom: 2rpx solid #f8f8f8; background-color: white; border-radius: 8rpx; box-shadow: 0 8px 12px #e7e9eb; } .subTab-item ~ .subTab-item { margin-top: 20rpx; } .pdv10 { padding-top: 10rpx; padding-bottom: 10rpx; } .pdv20 { padding-top: 20rpx; padding-bottom: 20rpx; } .pdb10 { padding-bottom: 10rpx; } .pdb20 { padding-bottom: 20rpx; } .bdr-b { border-bottom: 2rpx solid #f8f8f8; } .dash-b { border-bottom: 2rpx dashed #ddd; } .btn-container { display: flex; align-items: flex-end; font-size: 26rpx; } /* .popup-container { content:''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; background-color: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; } .popup { width: 90%; } .popup-content { box-sizing: border-box; width: 100%; background-color: white; padding: 0 20rpx; border-radius: 10rpx; max-height: 1038rpx; } .icon-close { font-size: 60rpx; color: white; } .popup-btn { padding-top: 30rpx; } .popup-title { /* font-size: 28rpx; */ /* font-weight: bold; padding: 20rpx 0; } .popup-title2 { */ /* padding: 10rpx 0; */ /* padding-bottom: 8rpx; } .popup-title3 { padding-left: 34rpx; font-size: 30rpx; } .popup-list { max-height: 602rpx; overflow-y: auto; } radio .wx-radio-input { width: 28rpx; height: 28rpx; } radio .wx-radio-input.wx-radio-input-checked { background-color: #FE6867; border-color: #FE6867; } radio .wx-radio-input.wx-radio-input-checked::before{ color: white; } .popup-content.active { max-height: 982rpx; overflow: auto; } */ .panel { box-sizing: border-box; background-color: white; height: 100%; border-radius: 16rpx; position: relative; padding-top: 140rpx; box-shadow: 0 8px 12px #ccc; } .avatar { width: 220rpx; height: 220rpx; border-radius: 50%; background-color: skyblue; position: absolute; top: -100rpx; left: 0; right: 0; margin: 0 auto; } .nickname { padding-bottom: 60rpx; } .bottom { background-color: white; border-top: 2rpx solid #f0f0f0; /* box-shadow: 0 -6px 8px #e7e9eb; */ width: 100%; position: fixed; left: 0; bottom: 0; } .wx { width: 60rpx; height: 60rpx; } .save { box-sizing: border-box; padding-top: 6rpx; } .icon-save { font-size: 50rpx; } .qrcode { width: 480rpx; height: 480rpx; background-color: red; margin: 60rpx auto 0; }