dk-grid-view.wxss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. .goods-view {
  2. width: 100%;
  3. display: flex;
  4. flex-wrap: wrap;
  5. }
  6. .goods-view>view:nth-child(n) {
  7. width: 45.5%;
  8. margin-left: 3%;
  9. background: #fff;
  10. border-radius: 16rpx;
  11. overflow: hidden;
  12. margin-bottom: 3vw;
  13. }
  14. .goods-view>view:nth-child(n)>image:nth-child(1) {
  15. position: absolute;
  16. width: 15vw;
  17. height: 15vw;
  18. transform: rotate(270deg);
  19. }
  20. .goods-view>view:nth-child(n)>image:nth-child(2) {
  21. width: 100%;
  22. height: 41.5vw;
  23. }
  24. .goods-view>view:nth-child(n)>view:nth-child(3) {
  25. padding: 2.5vw;
  26. }
  27. .goods-view>view:nth-child(n)>view:nth-child(3)>view:nth-child(1) {
  28. width: 100%;
  29. font-size: 3.5vw;
  30. text-overflow: -o-ellipsis-lastline;
  31. overflow: hidden;
  32. text-overflow: ellipsis;
  33. display: -webkit-box;
  34. -webkit-line-clamp: 2;
  35. line-clamp: 2;
  36. -webkit-box-orient: vertical;
  37. }
  38. .goods-view>view:nth-child(n)>view:nth-child(3)>view:nth-child(2) {
  39. display: flex;
  40. justify-content: space-between;
  41. margin-top: 2vw;
  42. }
  43. .goods-view>view:nth-child(n)>view:nth-child(3)>view:nth-child(2)>view:nth-child(1) {
  44. color: rgb(255, 97, 70);
  45. font-size: 5vw;
  46. display: flex;
  47. align-items: center;
  48. }
  49. .goods-view>view:nth-child(n)>view:nth-child(3)>view:nth-child(2)>view:nth-child(2) {
  50. display: flex;
  51. align-items: center;
  52. font-size: 3vw;
  53. color: #afafaf;
  54. }