Головна сторінка Огляд Довідка
Реєстрація Увійти
moonsflyer
/
zhongshen_project
1
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Гілка: master
Гілки Теги
zhongshen_proje...
/
app
/
component
/
view
/
goods_recommend
/
css
/
design.css

design.css 7.0 KB
Постійне посилання Історія Запис

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 
  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. .style-list-box-goods-recommend {display: none;}
    13. 

  13. .style-list-con-goods-recommend {display: flex;flex-wrap: wrap;}
    14. 

  14. .style-list-con-goods-recommend .style-li-goods-recommend {overflow: hidden;display: flex;align-items: center;justify-content: center;width: 280px;height: 210px;margin-right: 12px;margin-top: 15px;cursor: pointer;border: 1px solid #ededed;background: #f7f8fa;}
    15. 

  15. .style-list-con-goods-recommend .style-li-goods-recommend img{width: 100%;}
    16. 

  16. .style-list-con-goods-recommend .style-li-goods-recommend:nth-child(1), .style-list-con-goods-recommend .style-li-goods-recommend:nth-child(2), .style-list-con-goods-recommend .style-li-goods-recommend:nth-child(3){margin-top: 0;}
    17. 

  17. .style-list-con-goods-recommend .style-li-goods-recommend:nth-child(3n) {margin-right: 0;}
    18. 

  18. 

  19. .goods-recommend .top-wrap{display: flex;align-items: center;padding: 10px 0;}
    20. 

  20. .goods-recommend .top-wrap i{border-radius: 50%;font-size: 25px;margin-right: 5px;width: 35px;height: 35px;text-align: center;line-height: 35px;margin-left: 10px;}
    21. 

  21. .goods-recommend .top-wrap .line{height: 14px;margin: 0 5px;border: 1px solid;}
    22. 

  22. .goods-recommend .top-wrap h3{font-weight: bold;}
    23. 

  23. .goods-recommend .top-wrap .sub{font-size: 12px;}
    24. 

  24. 

  25. 	/* 商品块基础样式 */
    26. 

  26. .goods-recommend .goods-list .goods-item {line-height: 1;}
    27. 

  27. .goods-recommend .goods-list .goods-item .sale {font-size: 12px;}
    28. 

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

  29. 

  30. /* ----------  三列（一行三个）----------  */
    31. 

  31. .goods-recommend .style-1 .goods-list{display: flex;flex-wrap: wrap;margin: 0 10px;}
    32. 

  32. .goods-recommend .style-1 .goods-list .goods-item{display: flex;flex-direction: column;background: #fff;overflow: hidden;margin-top: 10px;width: 100px;box-sizing: border-box;}
    33. 

  33. .goods-recommend .style-1 .goods-list .goods-item:nth-of-type(1), .goods-recommend .style-1 .goods-list .goods-item:nth-of-type(2), .goods-recommend .style-1 .goods-list .goods-item:nth-of-type(3){margin-top: 0;}
    34. 

  34. .goods-recommend .style-1 .goods-list .goods-item .goods-img{width: calc(100% + 2px);height: 110px;}
    35. 

  35. .goods-recommend .style-1 .goods-list .goods-item .goods-img img{width: 100%;height: 100%;}
    36. 

  36. .goods-recommend .style-1 .goods-list .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;margin: 5px;}
    37. 

  37. .goods-recommend .style-1 .goods-list .goods-item .info-wrap .pro-info{margin-top: auto;display: flex;justify-content: space-between;}
    38. 

  38. .goods-recommend .style-1 .goods-list .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;align-items: center;flex: 1;}
    39. 

  39. .goods-recommend .style-1 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap{font-size: 0;font-weight: bold;}
    40. 

  40. .goods-recommend .style-1 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    41. 

  41. .goods-recommend .style-1 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;}
    42. 

  42. 

  43. .goods-recommend .style-2{background-repeat: round;padding-bottom: 10px;}
    44. 

  44. .goods-recommend .style-2 .goods-list{display: flex;margin: 0 5px;background: #fff;border-radius: 10px;padding: 10px;}
    45. 

  45. .goods-recommend .style-2 .goods-list .goods-item{display: flex;flex-direction: column;background: #fff;overflow: hidden;margin-top: 10px;width: 100px;}
    46. 

  46. .goods-recommend .style-2 .goods-list .goods-item.stroke{width: 100px;}
    47. 

  47. .goods-recommend .style-2 .goods-list .goods-item:nth-of-type(1), .goods-recommend .style-2 .goods-list .goods-item:nth-of-type(2), .goods-recommend .style-2 .goods-list .goods-item:nth-of-type(3){margin-top: 0;}
    48. 

  48. .goods-recommend .style-2 .goods-list .goods-item .goods-img{width: calc(100% + 2px);height: 110px;}
    49. 

  49. .goods-recommend .style-2 .goods-list .goods-item .goods-img img{width: 100%;height: 100%;}
    50. 

  50. .goods-recommend .style-2 .goods-list .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;margin: 5px;}
    51. 

  51. .goods-recommend .style-2 .goods-list .goods-item .info-wrap .pro-info{margin-top: auto;display: flex;justify-content: space-between;}
    52. 

  52. .goods-recommend .style-2 .goods-list .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;align-items: center;flex: 1;}
    53. 

  53. .goods-recommend .style-2 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap{font-size: 0;font-weight: bold;}
    54. 

  54. .goods-recommend .style-2 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    55. 

  55. .goods-recommend .style-2 .goods-list .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;}
    56. 

  56. 

  57. .goods-recommend .style-3 {background-position: bottom;}
    58. 

  58. .goods-recommend .style-3 .goods-list{display: flex;flex-wrap: wrap;margin: 0 10px;}
    59. 

  59. .goods-recommend .style-3 .goods-list .goods-item{display: flex;flex-direction: column;overflow: hidden;margin-top: 10px;width: 100px;box-sizing: border-box;}
    60. 

  60. .goods-recommend .style-3 .goods-list .goods-item .goods-img{width: calc(100% + 2px);height: 110px;}
    61. 

  61. .goods-recommend .style-3 .goods-list .goods-item .goods-img img{width: 100%;height: 100%;}
    62. 

  62. .goods-recommend .style-3 .goods-list .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;margin: 5px;}
    63. 

  63. .goods-recommend .style-3 .goods-item .info-wrap .pro-info{text-align: center;}
    64. 

  64. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .label-wrap{border-radius: 20px;padding: 4px;display: inline-block;margin: 5px 0;position: relative;padding-left: 26px;padding-right:8px;}
    65. 

  65. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .label-wrap img{position: absolute;top: -1px;left: -1px;width: 23px;height: 23px;}
    66. 

  66. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .label-wrap span{font-size: 12px;}
    67. 

  67. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .discount-price{}
    68. 

  68. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .discount-price .price-wrap{font-size: 0;font-weight: bold;}
    69. 

  69. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
    70. 

  70. .goods-recommend .style-3 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;}
    71. 

  71. 

  72. .goods-recommend .edit-content-wrap .layui-form-radio{margin-right:5px;}
    73. 

  73. .goods-recommend .edit-content-wrap .layui-form-radio:last-child{margin-right: 0;padding-right: 0;}
    74.