Inicio Explorar Ayuda
Iniciar sesión
caimei365
/
caimei365-www
3
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Árbol: 34f5713d0b
Ramas Etiquetas
caimei365-www
/
src
/
main
/
resources
/
static
/
css
/
supplier
/
index.css

index.css 13 KB
Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 
  1. @charset "utf-8";
    2. 

  2. li{list-style:none}
    3. 

  3. /**
    4. 

  4.  * PC端
    5. 

  5.  */
    6. 

  6. @media screen and (min-width:768px){
    7. 

  7.     #supplierBanner{width:100%;height:358px;margin-top:10px;background:#FFF;overflow:hidden;position:relative}
    8. 

  8.     #supplierBanner .swiper-wrapper{position:relative;height:100%;z-index:0}
    9. 

  9.     #supplierBanner .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
    10. 

  10.     #supplierBanner .swiper-wrapper img{width:100%;height:358px;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
    11. 

  11.     #supplierBanner .swiper-button-prev,#supplierBanner .swiper-button-next{position:absolute;top:50%;margin-top:-25px;width:30px;height:50px;line-height:50px;background:rgba(255,230,220,.2);color:#FFF;font-size:30px;text-align:center;border-radius:2px}
    12. 

  12.     #supplierBanner .swiper-button-prev{left:0;right:auto}
    13. 

  13.     #supplierBanner .swiper-button-next{left:auto;right:0}
    14. 

  14.     #supplierBanner .swiper-button-prev:after{content:"\276C"}
    15. 

  15.     #supplierBanner .swiper-button-next:after{content:"\276D"}
    16. 

  16.     #supplierBanner .swiper-button-prev:hover,#supplierBanner .swiper-button-next:hover{background:rgba(255,230,220,.6)}
    17. 

  17.     #supplierBanner .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:10px;z-index:1;text-align:center;font-size:0}
    18. 

  18.     #supplierBanner .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
    19. 

  19.     #supplierBanner .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
    20. 

  20.     #supplierBanner .swiper-pagination span.on:before{width:28px;background:#fff}
    21. 

  21.     .supplierTit{width:1184px;margin:0 auto;background:#FFF;position:relative}
    22. 

  22.     .supplierTit .title{box-sizing:border-box;min-height:100px;padding:16px}
    23. 

  23.     .supplierTit .title img{display:inline-block;height:90px;width: 90px;margin-right:10px;vertical-align:middle}
    24. 

  24.     .supplierTit .title h1{display:inline-block;max-width:550px;line-height:36px;vertical-align:middle;font-size:24px;font-weight:bold;text-overflow: ellipsis;overflow: hidden;white-space: nowrap}
    25. 

  25.     .supplierTit .search{width:490px;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:absolute;bottom:27px;right:16px}
    26. 

  26.     .supplierTit .search input{width:100%;height:42px;line-height:42px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none}
    27. 

  27.     .supplierTit .search .searchBtn{position:absolute;right:0;top:0;font-size:0;padding:7px 12px;height:30px;line-height:30px}
    28. 

  28.     .supplierTit .search .searchBtn:before{width:30px;height:30px;background-position:4px 4px}
    29. 

  29.     .supplierInfo{width:1184px;margin:0 auto;}
    30. 

  30.     .supplierInfo .tabTit{width:100%;height:40px;line-height:40px;margin:16px auto;background:#FFF;border-bottom:1px solid #ffe6dc;font-size:16px;color:#93979F}
    31. 

  31.     .supplierInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
    32. 

  32.     .supplierInfo .tabTit span:hover{color:#E15621}
    33. 

  33.     .supplierInfo .tabTit span.on,.supplierInfo .tabTit span.on:hover{color:#E15621;background:#ffe6dc;font-weight:bold;}
    34. 

  34.     .supplierInfo .tabCon{width:100%;}
    35. 

  35.     .supplierInfo .infoBox{box-sizing:border-box;padding:16px;font-size:16px;line-height:22px;color:#4A4F58;background:#FFF;}
    36. 

  36.     .supplierInfo .infoBox .part{margin-top:30px}
    37. 

  37.     .supplierInfo .infoBox .part:first-child{margin-top:0}
    38. 

  38.     .supplierInfo .infoBox .title{height:24px;line-height:24px;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;margin-bottom:20px}
    39. 

  39.     .supplierInfo .infoBox span.l{display:inline-block;min-width:70px;height:24px;text-align:justify;vertical-align:top;overflow:hidden}
    40. 

  40.     .supplierInfo .infoBox span.l:after{content:'';display:inline-block;width:100%}
    41. 

  41.     .supplierInfo .tabCon .tag{display:inline-block;height:20px;line-height:20px;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:10px;padding:0 5px}
    42. 

  42.     .supplierInfo .infoBox .cont{text-indent:2em;text-align:justify}
    43. 

  43.     .supplierInfo .infoBox .photo img{width:240px;height:180px}
    44. 

  44.     .supplierInfo .infoBox p{margin:5px 0}
    45. 

  45.     .supplierInfo .productBox{box-sizing:border-box;width:100%;overflow:hidden;}
    46. 

  46.     .supplierInfo .productList{width:1200px;margin-left:-8px;margin-bottom:18px;}
    47. 

  47.     .supplierInfo .productBox .title{color:#4A4F58;font-size:20px;height:54px;line-height:54px}
    48. 

  48.     .supplierInfo .productItem {margin-bottom: 16px;}
    49. 

  49.     .empty{background: #fff;margin-top: 10px;}
    50. 

  50.     .navLayout{min-height: auto;}
    51. 

  51.     .productList .productItem {
    52. 

  52.         width: 184px;
    53. 

  53.         height: 268px;
    54. 

  54.         float: left;
    55. 

  55.         background: #fff;
    56. 

  56.         position: relative;
    57. 

  57.         margin: 0 16px 16px 0;
    58. 

  58.         overflow: hidden;
    59. 

  59.         float: left;
    60. 

  60.     }
    61. 

  61.     .productList .productItem img {
    62. 

  62.         width: 100%;
    63. 

  63.         height: 164px;
    64. 

  64.     }
    65. 

  65.     .productList .productItem .name{
    66. 

  66.         display: block;
    67. 

  67.         padding: 0 8px;
    68. 

  68.         margin-top: 8px;
    69. 

  69.         height: 40px;
    70. 

  70.         line-height: 21px;
    71. 

  71.         vertical-align: middle;
    72. 

  72.         word-break: break-all;
    73. 

  73.         overflow: hidden;
    74. 

  74.         text-overflow: ellipsis;
    75. 

  75.         display: -webkit-inline-box;
    76. 

  76.         -webkit-line-clamp: 2;
    77. 

  77.         -webkit-box-orient: vertical
    78. 

  78.     }
    79. 

  79.     .productItem .price{
    80. 

  80.         border: 0;
    81. 

  81.         box-sizing: border-box;
    82. 

  82.         padding: 0 8px;
    83. 

  83.         height: 54px;
    84. 

  84.         width: 100%;
    85. 

  85.     }
    86. 

  86.     .productItem .price .icon:before{
    87. 

  87.         width: 63px;
    88. 

  88.     }
    89. 

  89.     .productItem .price .icon.i5:before {
    90. 

  90.         background-position: -2px -832px;
    91. 

  91.     }
    92. 

  92.     .productItem .price .icon.i1:before {
    93. 

  93.         background-position: -2px -712px;
    94. 

  94.     }
    95. 

  95.     .productItem .price .icon.i2:before {
    96. 

  96.         background-position: -2px -742px;
    97. 

  97.     }
    98. 

  98.     .productItem .price .icon.i3:before {
    99. 

  99.         background-position: -2px -772px;
    100. 

  100.     }
    101. 

  101.     .productItem .price .icon.i4:before {
    102. 

  102.         background-position: -2px -802px;
    103. 

  103.     }
    104. 

  104.     .listTag{
    105. 

  105.         margin: 12px 8px 0 0;
    106. 

  106.         padding: 0 2px;
    107. 

  107.     }
    108. 

  108.     .productItem .image .icon{
    109. 

  109.         position: inherit;
    110. 

  110.     }
    111. 

  111.     .sortBox li.on, .sortBox li.up, .sortBox li.down {
    112. 

  112.         background: #FFE6DC;
    113. 

  113.         color: #E15616;
    114. 

  114.     }
    115. 

  115.     .empty{
    116. 

  116.         margin-top: 32px;
    117. 

  117.         background: #fff;
    118. 

  118.     }
    119. 

  119.     .empty p{
    120. 

  120.         color: #909090;
    121. 

  121.         font-size: 14px;
    122. 

  122.     }
    123. 

  123.     .productItem .price em{font-weight: normal}
    124. 

  124.     .productItem .price em.bold{font-weight: bold}
    125. 

  125.     .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
    126. 

  126.     .productItem .price .price_text_tag .listTag{margin: 0;float: left}
    127. 

  127.     .productItem .price .price_text_tag .couponTag{margin: 0 8px 0 0;float: left}
    128. 

  128.     .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
    129. 

  129.     .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
    130. 

  130.     .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
    131. 

  131.     .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
    132. 

  132. }
    133. 

  133. 

  134. /**
    135. 

  135. * 移动端
    136. 

  136. */
    137. 

  137. @media screen and (max-width:768px){
    138. 

  138.     #supplierBanner{width:93.4vw;height:28.2vw;overflow:hidden;position:relative;margin:0 auto}
    139. 

  139.     #supplierBanner .swiper-wrapper{position:relative;height:100%;z-index:0}
    140. 

  140.     #supplierBanner .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff}
    141. 

  141.     #supplierBanner .swiper-wrapper img{width:100%;height:28.2vw;display:block}
    142. 

  142.     #supplierBanner .swiper-button-prev,#supplierBanner .swiper-button-next{display:none}
    143. 

  143.     #supplierBanner .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
    144. 

  144.     #supplierBanner .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
    145. 

  145.     #supplierBanner .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
    146. 

  146.     #supplierBanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
    147. 

  147.     .supplierTit{width:100%;background:#FFF;position:relative;box-sizing:border-box;padding:13.4vw 3.3vw 2vw 3.3vw;border-top:1px solid #F5F5F5;}
    148. 

  148.     .supplierTit .title{box-sizing:border-box;min-height:13.4vw;padding:2.2vw 0;position:absolute;top:0;left:3.3vw}
    149. 

  149.     .supplierTit .title img{display:inline-block;height:9vw;margin-right:1vw;vertical-align:middle}
    150. 

  150.     .supplierTit .title h1{display:inline-block;max-width:70vw;max-height:9vw;overflow:hidden;line-height:4.5vw;vertical-align:middle;font-size:3.7vw;font-weight:bold}
    151. 

  151.     .supplierTit .search{width:93.4vw;height:9.6vw;margin:2vw auto 0 auto;border:1px solid #FFE6DC;border-radius:2px;position:relative;overflow:hidden}
    152. 

  152.     .supplierTit .search input{border:none;outline:none;width:100%;height:9.6vw;line-height:9.2vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
    153. 

  153.     .supplierTit .searchBtn{position:absolute;right:1.2vw;top:0}
    154. 

  154.     .supplierTit .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:-24vw 1.5vw}
    155. 

  155.     .supplierInfo{margin-bottom: 2.7vw;}
    156. 

  156.     .supplierInfo .tabTit{padding:1.5vw 3.3vw;background:#FFF;position:relative;}
    157. 

  157.     .supplierInfo .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw;margin-left:8vw;}
    158. 

  158.     .supplierInfo .tabTit span.on{color:#E15621;border-color:#E15621}
    159. 

  159.     .supplierInfo .tabTit span:first-child{margin-left:0;}
    160. 

  160.     .supplierInfo .showSearch{position:absolute;right:3.3vw;bottom:1.5vw;padding:0 2vw;height:7.5vw;line-height:7.5vw;background:#E15621;color:#FFF;font-weight:normal;font-size:3.1vw;border-radius:2px}
    161. 

  161.     .supplierInfo .infoBox{padding:1.2vw 3.3vw 3.3vw;border-top:1px solid #F5F5F5;font-size:3.7vw;line-height:5.2vw;color:#93979F;}
    162. 

  162.     .supplierInfo .infoBox .title{color:#4A4F58;font-weight:bold;padding-left:1vw;border-left:.4vw solid #E15616;margin:2.7vw 0;}
    163. 

  163.     .supplierInfo .infoBox .tag{display:inline-block;height:4.4vw;line-height:4.4vw;font-size:2.6vw;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:2.2vw;padding:0 1vw}
    164. 

  164.     .supplierInfo .infoBox .part{margin-top:5.4vw}
    165. 

  165.     .supplierInfo .infoBox .part:first-child{margin-top:0}
    166. 

  166.     .supplierInfo .infoBox .cont{text-indent:2em;text-align: justify;}
    167. 

  167.     .supplierInfo .infoBox .photo img{width:45.3vw;height:34vw}
    168. 

  168.     .supplierInfo .infoBox p{margin:1vw 0;}
    169. 

  169.     .supplierInfo .productList{width:96.6vw;margin:1.3vw auto;box-sizing:border-box}
    170. 

  170.     .supplierInfo .productBox .title{width:93.4vw;color:#2D3036;font-size:3.7vw;height:5vw;line-height:5vw;margin:2.7vw auto 0}
    171. 

  171.     .productList{margin: 3.2vw auto;width: 97vw;}
    172. 

  172.     .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
    173. 

  173.     .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
    174. 

  174.     .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
    175. 

  175.     .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
    176. 

  176.     .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
    177. 

  177.     .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
    178. 

  178.     .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
    179. 

  179.     .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
    180. 

  180.     .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
    181. 

  181.     .productItem img {width: 45.6vw;height: 45.6vw;}
    182. 

  182.     .productItem .name {display: block;padding: 0 3.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    183. 

  183.     .price {padding: 2vw 3.2vw;overflow: hidden;}
    184. 

  184.     .couponTag{padding:0 2vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
    185. 

  185.     .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
    186. 

  186.     .price_grade{width: 100%;float: left;margin-top: 2vw;}
    187. 

  187.     .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
    188. 

  188.     .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
    189. 

  189.     .productItem .price .main_price_show{color: #f94b4b}
    190. 

  190.     .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
    191. 

  191. }
    192.