1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- .content{
- padding: 20rpx 40rpx;
- background:#fff;
- font-size: 28rpx;
- border-radius: 20rpx;
- position: relative;
- overflow: hidden;
- }
- .flex-box{
- display: flex;
- align-items: center;
- padding: 20rpx;
- border-radius: 42rpx;
- /* background-image: linear-gradient(to right,#f8b2b5,#fff4f4); */
- }
- .flex-box .box-c{
- letter-spacing: 2px;
- color: #9d9d9e;
- font-weight: 500;
- font-size: 13px;
- }
- .flex-box .box-l,.flex-box .box-r,.flex-box .box-icon-r{
- flex: 1;
- }
- .flex-box .box-l .brilliant{
- width: 188rpx;
- height: 40rpx;
- margin-left: -41rpx;
- margin-right: 20rpx;
- }
- .brilliantIcon{
- width: 100rpx;
- height: 100rpx;
- position: absolute;
- top: 44rpx;
- right: 23rpx;
- }
- .flex-box .box-l text::before{
- transform: rotate(-30deg);
- color: #EE3A43;
- font-size: 56rpx;
- display: inline-block;
- }
- .flex-box .box-r::after{
- margin-right: -24rpx;
- content: '';
- border-top: 1px solid #C7C7C7;
- border-right:1px solid #C7C7C7;
- width: 12rpx;
- height: 12rpx;
- display: inline-block;
- transform: rotate(45deg);
- float: right;
- }
- .bgColor{
- background-image: linear-gradient(to right,#f8b2b5,#fff4f4);
- }
- .flex-box .box-icon-r::after{
- margin-right: 15rpx;
- content: '';
- border-top: 1px solid #C7C7C7;
- border-right:1px solid #C7C7C7;
- width: 12rpx;
- height: 12rpx;
- display: inline-block;
- transform: rotate(45deg);
- float: right;
- }
- .bgImg {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- }
|