GoodsItem.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .com-goods-item{
  2. display:flex;
  3. flex-direction: row;
  4. height:80px;
  5. padding:10px;
  6. .goods-img{
  7. display:flex;
  8. height:100%;
  9. width:30%;
  10. .img{
  11. width:60px;
  12. height:60px;
  13. border-radius: 10px;
  14. }
  15. }
  16. .goods-info{
  17. width:70%;
  18. display:flex;
  19. flex-direction: column;
  20. position:relative;
  21. .name{
  22. font-size:14px;
  23. font-weight:bold;
  24. }
  25. .tips{
  26. font-size:12px;
  27. color:#CCC;
  28. }
  29. .price{
  30. font-size:14px;
  31. color:$teacher-main-color;
  32. .sign{
  33. font-size:12px;
  34. }
  35. }
  36. .btn-opt{
  37. position:absolute;
  38. right:10px;
  39. bottom:5px;
  40. display:flex;
  41. flex-direction: row;
  42. .btn-mus{
  43. border-radius: 50%;
  44. display:flex;
  45. width:20px;
  46. height:20px;
  47. background:$teacher-main-color;
  48. color:#FFF;
  49. justify-content: center;
  50. align-content: center;
  51. font-size:12px;
  52. }
  53. .btn-num{
  54. width:20px;
  55. text-align:center;
  56. font-size:12px;
  57. }
  58. .btn-plus{
  59. border-radius: 50%;
  60. display:flex;
  61. width:20px;
  62. height:20px;
  63. font-size:12px;
  64. background:$teacher-main-color;
  65. color:#FFF;
  66. justify-content: center;
  67. align-content: center;
  68. }
  69. }
  70. }
  71. }