page{ font-size: 28rpx; min-height: 100%; background: #F5F5F4 url('https://img.bbztx.com/image_test/upload/thumbs/20220426/logo/1650962916646054418.png') no-repeat; background-size: 100%; } .coin-head{ } .coin-head .head-user{ padding-top: 100rpx; position:relative; display: flex; flex-direction: column; align-items: center; } .coin-head .head-user .tip{ position: absolute; top: 20rpx; right: 20rpx; padding: 10rpx; } .coin-head .head-user .headImg{ width: 140rpx; height: 140rpx; border-radius: 100%; overflow: hidden; background: #fff; } .coin-head .head-user .level{ margin-top: -10rpx; background: #ee3a43; color: #fff; padding: 0 10rpx 0 50rpx; border-radius: 20rpx; position: relative; z-index: 1; } .coin-head .head-user .level .icon{ position: absolute; top: -2rpx; left: 10rpx; font-size: 40rpx; } .coin-head .head-user .coin{ margin: 20rpx 0 10rpx; font-size: 30rpx; color: #ee3a43; } .coin-head .head-user .coin .con{ letter-spacing: -2rpx; } .coin-head .head-user .show-detail{ color: #666; display: flex; align-items: center; font-size:24rpx } .coin-head .head-user .show-detail::after{ content: ''; display: inline-block; width: 10rpx; height: 10rpx; margin-left: 6rpx; border-top: 1px solid #666; border-right: 1px solid #666; transform: rotate(45deg); } .coin-head .swipe{ margin-top: 60rpx; height: 320rpx; } .coin-head .swipe .swipe-item{ } .van-swipe{ overflow: visible; } .swipe .item-box{ position: relative; height: 100%; overflow: hidden; padding: 0 50rpx 0 88rpx; background: #ee3a43; border-radius: 50rpx; margin: 0 10rpx; color: #fff; background-repeat: no-repeat; background-size: 100%; } .swipe .item-box .current-level{ position: absolute; top: 0; left: 0; background-image: linear-gradient(to right, rgb(255, 255, 255,.6) , rgb(255, 255, 255,0)); padding: 0 30rpx; font-size: 22rpx; line-height: 2.5; } .swipe .item-box .member{ margin-top: 108rpx; } .swipe .item-box .member .member-type{ font-size: 36rpx; letter-spacing: 2px; font-weight: 700; } .swipe .item-box .member .member-num{ font-size: 20rpx; } .swipe .item-box .speed-rate{ margin-top: 45rpx; } .swipe .item-box .speed-rate .rate-ins{ font-size:20rpx } .swipe .item-box .speed-rate .tate{ height: 6rpx; background: rgba(255,255,255,.4); border-radius: 10rpx; margin-top: 10rpx; overflow: hidden; width: 50%; } .swipe .item-box .speed-rate .tate .rate-wid{ height: 100%; background: #fff; border-radius: 10rpx; transition: width 1s; } .modular{ background: none; margin-top: 30rpx; } .modular .modal-title{ border: none; padding: 0 20rpx; font-weight: 700; font-size: 28rpx; } .modular .modal-label{ background: #fff; border-radius: 20rpx; padding: 20rpx; } .modular .modal-label > view:last-child{ margin: 0; } /* 获取宝贝币方式列表 */ .coin-list{ display: flex; align-items: center; margin-bottom: 50rpx; } .coin-list .coin-list-l{ width: 90rpx; height: 90rpx; border-radius: 50%; background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0)); } .coin-list .coin-list-l .icon-box{ margin: 2rpx; background: #fff; height: calc(100% - 4rpx); border-radius: 50%; text-align: center; line-height: 86rpx; font-size: 52rpx; color: #ee3a43; } .coin-list .coin-list-c{ flex: 1; padding: 0 20rpx; } .coin-list .coin-list-c .get-method{ font-size: 26rpx; } .coin-list .coin-list-r{ background: #FEF5F5; color: #ee3a43; padding: 0 20rpx; border-radius: 20rpx; } .coin-list .finished-task{ background: #ccc; color: #fff; } .coin-list .coin-list-c .get-ins{ color: #999; font-size: 22rpx; margin-top: 10rpx; } /* 等级特权 */ .privilege-type{ display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .privilege-type .type-item{ width: 25%; position: relative; height: 150rpx; } .modular .privilege-type .type-item .act_privilege{ width: 140rpx; height: 140rpx; background-image: linear-gradient(to top,rgba(241, 21, 32, 0.4) 0% ,rgba(241, 75, 83, 0.25) 40%, rgba(247, 178, 178, 0)); } .privilege-type .type-item .position-icon{ position: absolute; top: 1rpx; right: 5rpx; color: #ccc; font-size: 26rpx !important; font-weight: 500 !important; } .privilege-type .type-item .type-item-box{ /* border: 1px solid #ee3a43; */ width: 120rpx; height: 120rpx; border-radius: 50%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ee3a43; background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0)); transition: all .5s; } .privilege-type .type-item .type-item-box .type-item-name{ font-size: 22rpx; } .privilege-type .type-item .type-item-box .icon{ font-size: 64rpx; } .privilege-ins{ background: #fff; border-radius: 20rpx; margin-top: 20rpx; position: relative; padding: 20rpx; } .privilege-ins .arrow{ content: ''; display: inline-block; width: 30rpx; height: 30rpx; transform: rotate(-45deg); background: #fff; position: absolute; top: -13rpx; transition: left .5s; } .card .card-title{ display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #F5F5F4; padding-bottom: 26rpx; color: #666; margin-top: 10rpx; font-size: 24rpx; } .privilege-ins .card .card-title .card-right{ border: 1px solid #ccc; padding: 0 20rpx; border-radius: 40rpx; line-height: 1.2; } .privilege-ins .card-content{ padding-top: 40rpx; } .privilege-ins .card-content .act-item{ margin-bottom: 24rpx; display: flex; align-items: center; font-size: 26rpx; } .privilege-ins .card-content .act-item:last-child{margin: 0;} /* 活动列表 */ .act-item .act-l{ width: 160rpx; border-radius: 10rpx; overflow: hidden; } .act-item .act-c{ flex: 1; margin: 0 50rpx 0 20rpx; height: 100%; display: flex; flex-direction: column; justify-content: space-around; overflow: hidden; line-height: 2; } .act-item .act-c .act-sign{ margin-top: 10rpx; font-size: 22rpx; } .act-item .act-r{ display: flex; flex-direction: column; align-items: center; } .act-item .act-r .price-ins{ margin-top: 6rpx; } .card .btn-box{ padding: 1px; background-image: linear-gradient(to top,rgb(237,58,67,.35) 0% ,rgb(237,58,67,.2) 30%, rgb(255, 255, 255,0)); border-radius: 40rpx; width: 140rpx; } .card .btn-box .btn{ /* padding:0 20rpx; */ background: #fff; border-radius: 40rpx; text-align: center; line-height: 1.4; font-size: 32rpx; } .modular:last-child{ margin-bottom: 100rpx; } /* 电商商品 */ .goods-fixed{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .goods-fixed .good-item{ width: calc(50% - 10rpx); margin-bottom: 60rpx; } .goods-fixed .good-item:nth-child(3),.goods-fixed .good-item:nth-child(4){ margin: 0; } .goods-fixed .good-item .item-top-img{ border-radius:10rpx; overflow: hidden; } .goods-fixed .good-item .goods-title{ margin: 10rpx 0; line-height: 1.8; } .goods-fixed .good-item .sign{ font-size: 24rpx; } .goods-fixed .good-item .good-price{ display: flex; align-items: center; margin-top: 10rpx; } .goods-fixed .good-item .good-price .price-ins{ margin-left: 10rpx; font-size: 24rpx; } .card .price-ins{ background: #F8F1F3; padding: 0 10rpx; display: inline-block; border-radius: 10rpx; font-size: 22rpx; } .card .act-title,.card .goods-title{ font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; */ color: #3E3A39; } /* 抢购特权 */ .card-content .privilege-title{ } .card-content .privilege-content{ margin-top: 20rpx; min-height: 100rpx; border-radius: 10rpx; } /* 获取宝贝币 */ .coin-card-mar{ margin-top: 0 !important; margin-bottom: 40rpx; } /* 表格 */ .table{ border: 1rpx solid #999; text-align: center; line-height: 2; border-radius: 20rpx; overflow: hidden; } .table .tr{ display: flex; align-items: center; border-bottom: 1px solid #ccc; } .table .tr:first-child{ background: #EE3A43; color: #fff; } .table .tr:last-child{ border: none; } .table .tr view:first-child{flex: .5;} .table .tr view:last-child{flex: 1;}