style.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. @CHARSET "UTF-8";
  2. .draggable-element .component-store-show-info .preview-draggable .preview-box {
  3. padding: 10px 0;
  4. margin: 0 15px;
  5. }
  6. .component-store-show-info .info-list {
  7. padding: 0 10px;
  8. }
  9. /* 风格一 */
  10. .component-store-show-info .style-one, .component-store-show-info .style-three{
  11. display: flex;
  12. justify-content: space-between;
  13. }
  14. .component-store-show-info .style-one .info-item{
  15. flex: 1;
  16. }
  17. .component-store-show-info .style-one .store-name{
  18. margin-right: 10px;
  19. font-size: 20px;
  20. }
  21. .component-store-show-info .style-one .change{
  22. font-size: 12px;
  23. }
  24. .component-store-show-info .style-one p{
  25. margin-top: 4px;
  26. font-size: 12px;
  27. }
  28. .component-store-show-info .style-one .img-wrap, .component-store-show-info .style-two .img-wrap, .component-store-show-info .style-three .img-wrap{
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. width: 35px;
  33. height: 35px;
  34. border-radius: 50%;
  35. overflow: hidden;
  36. flex-shrink: 0;
  37. margin: 0 auto;
  38. }
  39. .component-store-show-info .style-one .img-wrap img, .component-store-show-info .style-two .img-wrap img, .component-store-show-info .style-three .img-wrap img{
  40. width: 100%;
  41. height: 100%;
  42. }
  43. .conmunity-name {
  44. font-size: 12px;
  45. }
  46. /* 风格二 */
  47. .component-store-show-info .style-two{
  48. display: flex;
  49. }
  50. .component-store-show-info .style-two .info-item{
  51. margin-left: 10px;
  52. }
  53. .component-store-show-info .style-two .store-name{
  54. font-size: 16px;
  55. }
  56. .component-store-show-info .style-two p{
  57. margin-top: 10px;
  58. font-size: 12px;
  59. }
  60. .component-store-show-info .style-two .change{
  61. margin-left: auto;
  62. align-self: center;
  63. flex-shrink: 0;
  64. }
  65. /* 风格三 */
  66. .component-store-show-info .style-three .info-item{
  67. display: flex;
  68. align-items: center;
  69. }
  70. .component-store-show-info .style-three .store-name{
  71. margin-left: 8px;
  72. margin-right: 15px;
  73. font-size: 16px;
  74. }
  75. .component-store-show-info .style-three .img-wrap {
  76. width: 30px;
  77. height: 30px;
  78. }
  79. .component-store-show-info .style-three .store-name {
  80. font-size: 15px;
  81. }
  82. .component-store-show-info .style-three .change{
  83. font-size: 12px;
  84. }
  85. .component-store-show-info .style-three .store-right-search {
  86. height: 30px;
  87. line-height: 30px;
  88. display: flex;
  89. justify-content: space-between;
  90. padding: 0 20px;
  91. font-size: 12px;
  92. color: #909399;
  93. box-sizing: border-box;
  94. background-color: #ebebeb;
  95. border-radius: 15px;
  96. position: relative;
  97. text-align: center;
  98. }
  99. .component-store-show-info .style-three .store-right-search img {
  100. width: 14px;
  101. margin-right: 5px;
  102. }
  103. /* 风格四 */
  104. .component-store-show-info .style-four {
  105. display: flex;
  106. justify-content: space-between;
  107. align-items: center;
  108. }
  109. .component-store-show-info .style-four .store-left-wrap {
  110. display: flex;
  111. align-items: center;
  112. line-height: 34px;
  113. }
  114. .component-store-show-info .style-four .store-left-wrap .iconweizhi {
  115. font-size: 14px;
  116. color: #303133;
  117. margin-right: 3px;
  118. }
  119. .component-store-show-info .style-four .store-left-wrap .layui-icon-down {
  120. font-size: 14px;
  121. margin-left: 3px;
  122. color: #303133;
  123. }
  124. .component-store-show-info .style-four .store-right-search {
  125. width: 235px;
  126. height: 35px;
  127. line-height: 35px;
  128. display: flex;
  129. justify-content: space-between;
  130. padding: 0 15px;
  131. font-size: 12px;
  132. color: #909399;
  133. box-sizing: border-box;
  134. background-color: #FFFFFF;
  135. border-radius: 18px;
  136. position: relative;
  137. }
  138. .component-store-show-info .style-four .store-right-search .iconsousuo2 {
  139. position: absolute;
  140. right: 15px;
  141. height: 12px;
  142. font-size: 13px;
  143. color: #909399;
  144. }
  145. /* 弹窗 */
  146. .style-list-con-store {
  147. display: flex;
  148. flex-wrap: wrap;
  149. }
  150. .style-list-con-store .style-li-goods{
  151. height: 240px;
  152. line-height: 240px;
  153. width: 32%;
  154. margin-right: 2%;
  155. margin-bottom: 15px;
  156. cursor: pointer;
  157. border: 1px solid #ededed;
  158. background: #f7f8fa;
  159. box-sizing: border-box;
  160. }
  161. .style-list-con-store .style-li-goods img{
  162. max-width: 100%;
  163. }
  164. .style-list-con-store .style-li-goods:nth-child(3n) {
  165. margin-right: 0;
  166. }