Home Esplora Aiuto
Registrati Accedi
moonsflyer
/
zhongshen_project
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Ramo (Branch): master
Rami (Branch) Tag
zhongshen_proje...
/
app
/
component
/
view
/
goods_list
/
css
/
design.css

design.css 11 KB
Permalink Cronologia Originale

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 
  1. .edit-attribute .tag-wrap .layui-form-radio:last-child{margin-right: 0;}
    2. 

  2. 

  3. /* 选择商品分类弹出框 */
    4. 

  4. .goods-category-layer {display: none;}
    5. 

  5. .layui-layer-content .category-wrap .category-item, .layui-layer-content .category-head {height: 30px;line-height: 30px;border: 1px solid #ededed;border-radius: 5px;padding: 0 15px;margin: 0 15px 10px 0;box-sizing: border-box;color: #666;font-size: 12px;}
    6. 

  6. .layui-layer-content .category-head {background: #eee;height: 40px;line-height: 40px;}
    7. 

  7. .layui-layer-content .category-wrap {overflow-y: scroll;height: calc(100% - 45px);}
    8. 

  8. .layui-layer-content .category-wrap::-webkit-scrollbar {display: none;}
    9. 

  9. .layui-layer-content .category-wrap .category-item {cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    10. 

  10. 

  11. /* 商品块基础样式 */
    12. 

  12. /*.goods-list{overflow: hidden;}*/
    13. 

  13. .goods-list .goods-item {line-height: 1;}
    14. 

  14. .goods-list .goods-item .sale {align-self: flex-end;font-size: 12px;}
    15. 

  15. .goods-list .goods-item .info-wrap .goods-name{margin-bottom: 5px;font-size: 14px;line-height: 1.3;}
    16. 

  16. .goods-list .goods-item .info-wrap .tag-wrap {margin-bottom: 10px;}
    17. 

  17. .goods-list .goods-item .info-wrap .tag-wrap text{display: inline-block;font-size: 9px;}
    18. 

  18. .goods-list .goods-item .info-wrap .tag-wrap .hollow-tag{border: 1px solid;border-radius: 2px;margin-right: 5px;box-sizing: border-box;line-height: 1.2;padding: 1px 2px 0;max-width: 100%;}
    19. 

  19. .goods-list .goods-item .shopping-cart-btn{font-size: 18px;border: 1px solid;border-radius: 50%;padding: 5px;}
    20. 

  20. .goods-list .goods-item .plus-sign-btn{font-size: 18px;border: 1px solid;border-radius: 50%;padding: 5px;}
    21. 

  21. .goods-list .goods-item .buy-btn{color: #fff;font-size: 12px;height: 26px;line-height: 28px;padding:0 10px;text-align: center;}
    22. 

  22. .goods-list .goods-item .price-wrap{font-size: 0;}
    23. 

  23. .goods-list .goods-item .icon-diy{font-size: 40px;}
    24. 

  24. 

  25. /* ----------  单列（一行一列）----------  */
    26. 

  26. .goods-list.row1-of1 .goods-item{overflow: hidden;display: flex;margin-bottom: 10px;padding:8px;}
    27. 

  27. .goods-list.row1-of1 .goods-item:last-of-type{margin-bottom: 0;}
    28. 

  28. .goods-list.row1-of1 .goods-item .goods-img{width: 130px;height: 130px;}
    29. 

  29. .goods-list.row1-of1 .goods-item .goods-img img{max-width: 100%;max-height: 100%;}
    30. 

  30. .goods-list.row1-of1 .goods-item .info-wrap{width: calc(100% - 130px);padding: 3px 0 5px 10px;flex: 1;display: flex;flex-direction: column;box-sizing: border-box;}
    31. 

  31. .goods-list.row1-of1 .goods-item .info-wrap .pro-info{display: flex;justify-content: space-between;align-items: center;margin-top:auto;}
    32. 

  32. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .sale{margin-top: 5px;}
    33. 

  33. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;flex-direction: column;}
    34. 

  34. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap{display: flex;align-items: flex-end;}
    35. 

  35. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    36. 

  36. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;font-weight: bold;}
    37. 

  37. .goods-list.row1-of1 .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
    38. 

  38. 

  39. /* ---------- 两列（一行两列）----------  */
    40. 

  40. .goods-list.row1-of2{display: flex;flex-wrap: wrap;}
    41. 

  41. .goods-list.row1-of2 .goods-item{overflow: hidden;margin-right: 10px;margin-top: 10px;width: calc(50% - 5px);display: flex;flex-direction: column;box-sizing: border-box;}
    42. 

  42. .goods-list.row1-of2 .goods-item:nth-child(2n){margin-right: 0;}
    43. 

  43. .goods-list.row1-of2 .goods-item:nth-of-type(1), .goods-list.row1-of2 .goods-item:nth-of-type(2){margin-top: 0;}
    44. 

  44. .goods-list.row1-of2 .goods-item .goods-img{width: calc(100% + 2px);height: 160px;text-align: center;}
    45. 

  45. .goods-list.row1-of2 .goods-item .goods-img img{width: 100%;height: 100%;}
    46. 

  46. .goods-list.row1-of2 .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;padding: 10px;}
    47. 

  47. .goods-list.row1-of2 .goods-item .info-wrap .pro-info{margin-top: auto;display: flex;justify-content: space-between;}
    48. 

  48. .goods-list.row1-of2 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;font-weight: bold;}
    49. 

  49. .goods-list.row1-of2 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;font-weight: bold;}
    50. 

  50. .goods-list.row1-of2 .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
    51. 

  51. 

  52. .goods-list.row1-of2.style-1 .pro-info .discount-price .price-wrap{display: inline-block;}
    53. 

  53. .goods-list.row1-of2.style-1 .pro-info .discount-price .delete-price{display: inline-block;margin-left: 5px;}
    54. 

  54. .goods-list.row1-of2.style-1 .pro-info .sale{margin-top: 5px;}
    55. 

  55. 

  56. .goods-list.row1-of2.style-2 .pro-info{align-items: center;}
    57. 

  57. .goods-list.row1-of2.style-2 .pro-info .discount-price{display: flex;justify-content: space-between;align-items: baseline;flex-direction: column;}
    58. 

  58. .goods-list.row1-of2.style-2 .pro-info .sale{margin-top: 5px;}
    59. 

  59. 

  60. .goods-list.row1-of2.style-3 .pro-info .discount-price{display: flex;justify-content: space-between;flex: 1;align-content: center;}
    61. 

  61. 

  62. /* ----------  三列（一行三个）----------  */
    63. 

  63. .goods-list.row1-of3{display: flex;flex-wrap: wrap;}
    64. 

  64. .goods-list.row1-of3 .goods-item{display: flex;flex-direction: column;background: #fff;overflow: hidden;margin-top: 10px;width: calc(33.33% - 6px);box-sizing: border-box;}
    65. 

  65. .goods-list.row1-of3 .goods-item:nth-child(3n-1){margin-left: 9px;margin-right: 9px;}
    66. 

  66. .goods-list.row1-of3 .goods-item:nth-of-type(1), .goods-list.row1-of3 .goods-item:nth-of-type(2), .goods-list.row1-of3 .goods-item:nth-of-type(3){margin-top: 0;}
    67. 

  67. .goods-list.row1-of3 .goods-item .goods-img{width: calc(100% + 2px);height: 110px;}
    68. 

  68. .goods-list.row1-of3 .goods-item .goods-img img{width: 100%;height: 100%;}
    69. 

  69. .goods-list.row1-of3 .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;padding: 5px;}
    70. 

  70. .goods-list.row1-of3 .goods-item .info-wrap .pro-info{margin-top: auto;display: flex;flex-direction: column;justify-content: space-between;}
    71. 

  71. .goods-list.row1-of3 .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;align-items: flex-end;}
    72. 

  72. .goods-list.row1-of3 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    73. 

  73. .goods-list.row1-of3 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;font-weight: bold;}
    74. 

  74. .goods-list.row1-of3 .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
    75. 

  75. 

  76. .goods-list.row1-of3.style-1 .pro-info .delete-price{margin-left: 10px;}
    77. 

  77. 

  78. .goods-list.row1-of3.style-2 .pro-info{flex-direction: initial !important;align-items: center;}
    79. 

  79. .goods-list.row1-of3.style-2 .pro-info .discount-price{flex-direction: column;align-items: initial !important;}
    80. 

  80. 

  81. /* ---------- 横向滑动 ---------- */
    82. 

  82. .goods-list.horizontal-slide{white-space: nowrap;overflow: hidden;margin:10px;}
    83. 

  83. .goods-list.horizontal-slide .goods-item{overflow: hidden;width: 97px;display: inline-block;margin-right: 10px;box-sizing: border-box;}
    84. 

  84. .goods-list.horizontal-slide .goods-item:last-of-type{margin-right: 0;}
    85. 

  85. .goods-list.horizontal-slide .goods-item .goods-img{width: calc(100% + 2px);height: 100px;}
    86. 

  86. .goods-list.horizontal-slide .goods-item .goods-img img{width: 100%;height: 100%;}
    87. 

  87. .goods-list.horizontal-slide .goods-item .info-wrap{padding: 5px 10px;}
    88. 

  88. .goods-list.horizontal-slide .goods-item .info-wrap .pro-info{margin-top: 5px;display: flex;flex-direction: column;justify-content: space-between;}
    89. 

  89. .goods-list.horizontal-slide .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
    90. 

  90. .goods-list.horizontal-slide .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    91. 

  91. .goods-list.horizontal-slide .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;font-weight: bold;}
    92. 

  92. .goods-list.horizontal-slide .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;align-self: flex-end;flex-basis: 100%;}
    93. 

  93. 

  94. /* ----------  大图 ----------  */
    95. 

  95. .goods-list.large-mode .goods-item{width: 100%;overflow: hidden;margin-top: 10px;background-color: #fff;}
    96. 

  96. .goods-list.large-mode .goods-item:first-child{margin-top: 0;}
    97. 

  97. .goods-list.large-mode .goods-img {width: 101.5%;height: 160px;position: relative;}
    98. 

  98. .goods-list.large-mode .goods-img img {width: 100%;height: 100%;object-fit: cover;}
    99. 

  99. .goods-list.large-mode .goods-item .info-wrap{padding: 10px 10px 25px;}
    100. 

  100. .goods-list.large-mode .goods-item .info-wrap .pro-info{margin-top: 5px;display: flex;justify-content: space-between;align-items: center;position: relative;}
    101. 

  101. .goods-list.large-mode .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    102. 

  102. .goods-list.large-mode .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;font-weight: bold;}
    103. 

  103. .goods-list.large-mode .goods-item .info-wrap .pro-info .delete-price{margin-left: 5px;text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
    104. 

  104. 

  105. .goods-list.large-mode.style-1 .pro-info .discount-price{flex: 1;display: flex;align-items: baseline;}
    106. 

  106. .goods-list.large-mode.style-1 .pro-info .discount-price .price-wrap{display: flex;align-items: baseline;}
    107. 

  107. .goods-list.large-mode.style-1 .pro-info .discount-price .delete-price{display: inline-block;}
    108. 

  108. .goods-list.large-mode.style-1 .pro-info .sale{position: absolute;bottom: -15px;font-size: 12px;}
    109. 

  109. 

  110. /* ---------- 购买按钮样式 ---------- */
    111. 

  111. .goods-list .btn-style .layui-form-label{margin-top: 5px;}
    112. 

  112. .goods-list .btn-style .layui-input-block{display: flex;align-items: center;}
    113. 

  113. .goods-list .btn-style .layui-input-block .item{margin-right: 10px;border: 1px solid transparent;padding: 5px;border-radius: 5px;width: 45px;text-align: center;cursor: pointer;height: 30px;line-height: 30px;}
    114. 

  114. .goods-list .btn-style .layui-input-block .item:last-child{margin-right: 0;width: 60px;}
    115. 

  115. .goods-list .btn-style .layui-input-block .item:nth-child(2),.goods-list .btn-style .layui-input-block .item:nth-child(3){width: 35px;}
    116. 

  116. .goods-list .btn-style .layui-input-block .item .border-color{border: 1px solid;}
    117. 

  117. .goods-list .btn-style .layui-input-block .buy-btn{color: #fff;border-radius: 25px;font-size: 12px;padding: 6px 10px;}
    118. 

  118. .goods-list .btn-style .layui-input-block .shopping-cart-btn{font-size: 18px;border: 1px solid;border-radius: 50%;padding: 5px;width: 18px;height: 18px;}
    119. 

  119. .goods-list .btn-style .layui-input-block .plus-sign-btn{font-size: 18px;border: 1px solid;border-radius: 50%;padding: 5px;width: 18px;height: 18px;}
    120. 

  120. .goods-list .btn-style .layui-input-block .diy-btn{border-radius: 25px;font-size: 12px;padding: 6px 10px;}
    121. 

  121. 

  122. .goods-list .diy-icon{margin-top: 10px;margin-bottom: 10px;display: flex;align-items: center;}
    123. 

  123. .goods-list .diy-icon .action-box {display: flex;margin-bottom: 10px;}
    124. 

  124. .goods-list .diy-icon .action {margin-right: 10px;width: 42px;height: 28px;line-height: 28px;text-align: center;border: 1px solid #EEEEEE;cursor: pointer;}
    125. 

  125. .goods-list .diy-icon .action .iconfont {font-size: 20px;}
    126. 

  126. .goods-list .diy-icon .action:hover {border-color: var(--base-color);color: var(--base-color);}
    127. 

  127. 

  128. .goods-list .edit-content-wrap .layui-form-radio{margin-right:5px;}
    129. 

  129. .goods-list .edit-content-wrap .layui-form-radio:last-child{margin-right: 0;padding-right: 0;}
    130.