.page { width: 100%; height: 100%; min-height: 100vh; padding-top: 59rpx; padding-bottom: 38rpx; box-sizing: border-box; position: relative; background: #000; } .quan-view{ margin-top: 40rpx; } .wrapper { width: 670rpx; height: 226rpx; margin: 0 auto; display: flex; background: linear-gradient(135deg, rgba(219, 93, 115, 1) 0%, rgba(137, 29, 34, 1) 100%); border-radius: 20rpx; margin-bottom: 28rpx; } .wrapper-ed{ opacity: 0.5; width: 670rpx; height: 226rpx; margin: 0 auto; display: flex; border-radius: 20rpx; margin-bottom: 28rpx; background: linear-gradient(135deg, #999 0%, #CBC9C9 100%); } .btnBgActive-ed{ box-shadow: none; background: #ccc; } .moveCm-ed{ animation: none; } /*前半部分样式*/ .content { position: relative; height: 229rpx; flex: 0 0 200rpx; text-align: center; overflow: hidden; border-top-left-radius: 18rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; } /*后半部分样式*/ .tip { position: relative; flex: 1; height: 229rpx; box-sizing: border-box; padding-left: 20rpx; display: flex; flex-direction: column; justify-content: center; } /*中间竖直虚线样式*/ .split-line { position: relative; flex: 0 0 0; margin: 0 10rpx 0 6rpx; border-left: 2rpx dashed #fff; } /*给虚线加两个伪类,基本样式如下*/ .split-line:before, .split-line:after { content: ''; position: absolute; width: 32rpx; height: 16rpx; background: #FFF; left: -18rpx; z-index: 1; } /*几个伪类化成的圆弧的样式以及位置(置于顶部)我把它放在一起了*/ .content:before, .tip:before, .split-line:before { border-radius: 0 0 16rpx 16rpx; top: 0; } /*几个伪类化成的圆弧的样式以及位置(置于底部)我把它放在一起了*/ .content:after, .tip:after, .split-line:after { border-radius: 16rpx 16rpx 0 0; bottom: 0; } .couponCount { width: 150rpx; height: 150rpx; font-size: 30rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(140, 31, 37, 1); transform: rotate(-45deg); position: absolute; text-align: center; line-height: 259rpx; top: -78rpx; left: -78rpx; background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%); } .couponCount-ed { width: 150rpx; height: 150rpx; font-size: 30rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(140, 31, 37, 1); transform: rotate(-45deg); position: absolute; text-align: center; line-height: 259rpx; top: -78rpx; left: -78rpx; background: #333; color: #FFF; } .oilline { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.3) 80%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); height: 2rpx; } .linwidth227 { width: 227rpx; } .linwidth160 { width: 160rpx; } .moyfh { font-size: 69rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(255, 255, 255, 1); margin-right: -2rpx; } .moneyNum { font-size: 96rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(255, 255, 255, 1); } .couponmaes { font-size: 30rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(255, 255, 255, 1); width: 260rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .vnameBx { text-align: center; width: 227rpx; margin: 25rpx 0; } .btnbx { position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .btnbx-ed { position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .btnw { display: flex; justify-content: center; align-items: center; width: 148rpx; height: 148rpx; border-radius: 50%; margin-right: 30rpx; } .btnBgActive { color: rgba(140, 31, 37, 1); box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56); background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%); } .btnBgGray { /* box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56); */ color: #cc6031; border: 1px solid #cc6031; transform: rotate(-45deg); } .btnn { font-size: 30rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; width: 120rpx; height: 120rpx; border-radius: 50%; border: 1rpx solid rgba(142, 33, 39, 1); text-align: center; box-sizing: border-box; padding: 18rpx; line-height: 46rpx; } .btnn-ed{ font-size: 28rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; width: 120rpx; height: 120rpx; border-radius: 50%; text-align: center; box-sizing: border-box; padding: 18rpx; line-height: 92rpx; } .moveCm { animation: scale 0.8s ease-in-out infinite alternate; } @keyframes scale { 0% { transform: scale(0.92); } 100% { transform: scale(1); } } .loading { height: 200rpx; line-height: 100rpx; color: #999; text-align: center; } .zk-quan{ font-size: 60rpx; }