index.wxss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .button-wrap {
  2. display: -webkit-flex;
  3. display: flex;
  4. -webkit-justify-content: center;
  5. justify-content: center;
  6. }
  7. .img-big-wrap {
  8. width: 100%;
  9. display: -webkit-flex;
  10. display: flex;
  11. background: #FAFAFA;
  12. }
  13. .button-container{
  14. display: flex;
  15. display: -webkit-flex;
  16. height: 100%;
  17. width: 100%;
  18. box-sizing: border-box;
  19. justify-content: space-between;
  20. -webkit-justify-content: space-between;
  21. align-items: center;
  22. -webkit-align-items:center;
  23. margin: 0 calc( (100% - 240rpx * 2) / 3 );
  24. margin-bottom: 20px;
  25. padding: 50rpx 0 38rpx 0;
  26. }
  27. .button-item {
  28. display: flex;
  29. display: -webkit-flex;
  30. flex-direction: column;
  31. -webkit-flex-direction: column;
  32. justify-content: flex-start;
  33. -webkit-justify-content: flex-start;
  34. align-items: center;
  35. -webkit-align-items: center;
  36. width: 240rpx;
  37. box-sizing: border-box;
  38. }
  39. .button-label {
  40. font-size: 28rpx;
  41. color: #9B9B9B;
  42. letter-spacing: 0;
  43. margin: 15rpx 0 0 0;
  44. }
  45. .button-press {
  46. position: relative;
  47. display: flex;
  48. display: -webkit-flex;
  49. height: 100rpx;
  50. width: 100%;
  51. border-radius: 100rpx;
  52. justify-content: center;
  53. -webkit-justify-content: center;
  54. align-items: center;
  55. -wekbit-align-items:center;
  56. }
  57. .button-background {
  58. position: absolute;
  59. height: 100rpx;
  60. width: 100%;
  61. border-radius: 100rpx;
  62. left: 0;
  63. z-index: 1;
  64. }
  65. .text-in-button {
  66. font-weight: bold;
  67. font-size: 34rpx;
  68. color: #FFFFFF;
  69. z-index: 2;
  70. }
  71. .text-in-button.text-press {
  72. opacity: 0.6;
  73. }