calculator.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /* mHome/pages/calculator/calculator.wxss */
  2. .container {
  3. display: flex;
  4. flex-direction: row;
  5. width: 100%;
  6. align-items: flex-start;
  7. .shape {
  8. width: 16%;
  9. }
  10. .shape-item, .color-item, .neatness-item {
  11. display: grid;
  12. align-items: center;
  13. align-content: center;
  14. justify-content: center;
  15. text-align: center;
  16. border-bottom: 1px solid #ccc;
  17. border-right: 1px solid #ccc;
  18. height: 80px;
  19. text {
  20. margin-top: 5px;
  21. font-size: 22rpx;
  22. color: #333;
  23. }
  24. }
  25. .color, .neatness {
  26. width: 13%;
  27. font-size: 14px;
  28. }
  29. .right-content {
  30. display: flex;
  31. flex-wrap: wrap;
  32. flex-direction: row;
  33. width: 58%;
  34. position: relative;
  35. view {
  36. width: 50%;
  37. height: 100px;
  38. display: grid;
  39. align-content: center;
  40. border-bottom: 1px solid #ddd;
  41. justify-content: start;
  42. text {
  43. margin: 10px;
  44. color: #333;
  45. }
  46. text:nth-child(1) {
  47. font-size: 13px;
  48. height: 15px;
  49. }
  50. text:nth-child(2) {
  51. font-size: 16px;
  52. color: #333;
  53. height: 10px;
  54. }
  55. text:nth-child(3) {
  56. font-size: 12px;
  57. color: #999;
  58. height: 15px;
  59. }
  60. }
  61. }
  62. }
  63. input {
  64. margin: 0px 0px 0px 10px;
  65. background-color: white;
  66. height: 40px;
  67. font-size: 14px;
  68. }