physicalForCard.wxss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .content{
  2. padding: 20rpx 40rpx;
  3. background:#fff;
  4. font-size: 28rpx;
  5. border-radius: 20rpx;
  6. position: relative;
  7. overflow: hidden;
  8. }
  9. .flex-box{
  10. display: flex;
  11. align-items: center;
  12. padding: 20rpx;
  13. border-radius: 42rpx;
  14. /* background-image: linear-gradient(to right,#f8b2b5,#fff4f4); */
  15. }
  16. .flex-box .box-c{
  17. letter-spacing: 2px;
  18. color: #9d9d9e;
  19. font-weight: 500;
  20. font-size: 13px;
  21. }
  22. .flex-box .box-l,.flex-box .box-r,.flex-box .box-icon-r{
  23. flex: 1;
  24. }
  25. .flex-box .box-l .brilliant{
  26. width: 188rpx;
  27. height: 40rpx;
  28. margin-left: -41rpx;
  29. margin-right: 20rpx;
  30. }
  31. .brilliantIcon{
  32. width: 100rpx;
  33. height: 100rpx;
  34. position: absolute;
  35. top: 44rpx;
  36. right: 23rpx;
  37. }
  38. .flex-box .box-l text::before{
  39. transform: rotate(-30deg);
  40. color: #EE3A43;
  41. font-size: 56rpx;
  42. display: inline-block;
  43. }
  44. .flex-box .box-r::after{
  45. margin-right: -24rpx;
  46. content: '';
  47. border-top: 1px solid #C7C7C7;
  48. border-right:1px solid #C7C7C7;
  49. width: 12rpx;
  50. height: 12rpx;
  51. display: inline-block;
  52. transform: rotate(45deg);
  53. float: right;
  54. }
  55. .bgColor{
  56. background-image: linear-gradient(to right,#f8b2b5,#fff4f4);
  57. }
  58. .flex-box .box-icon-r::after{
  59. margin-right: 15rpx;
  60. content: '';
  61. border-top: 1px solid #C7C7C7;
  62. border-right:1px solid #C7C7C7;
  63. width: 12rpx;
  64. height: 12rpx;
  65. display: inline-block;
  66. transform: rotate(45deg);
  67. float: right;
  68. }
  69. .bgImg {
  70. width: 100%;
  71. height: 100%;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. z-index: -1;
  76. }