Home Explore Help
Register Sign In
moonsflyer
/
zhongshen_project
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
zhongshen_proje...
/
app
/
component
/
view
/
rubik_cube
/
css
/
design.css

design.css 15 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 
  1. @CHARSET "UTF-8";
    2. 

  2. 

  3. /*魔方*/
    4. 

  4. .draggable-element .rubik-cube .preview-draggable .preview-box {padding: 0;margin: 0;}
    5. 

  5. .rubik-cube .preview-draggable div.tip {text-align: center;height: 136px;line-height: 136px;background-size: cover;background-repeat: no-repeat;}
    6. 

  6. .rubik-cube .preview-draggable ul {overflow: hidden;display: flex;flex-wrap: wrap;justify-content: space-between;}
    7. 

  7. .rubik-cube .preview-draggable ul li {text-align: center;}
    8. 

  8. .rubik-cube .preview-draggable ul li div{background-position: center center;background-size: cover;background-repeat: no-repeat;}
    9. 

  9. .rubik-cube .preview-draggable ul li img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
    10. 

  10. 

  11. /*编辑值*/
    12. 

  12. .rubik-cube .selected-template-list {padding-left: 15px;margin-bottom: 20px;}
    13. 

  13. .rubik-cube .selected-template-list ul {overflow: hidden;display: flex;flex-wrap: wrap;}
    14. 

  14. .rubik-cube .selected-template-list ul li {color:#909399;width: 46px;height: 32px;text-align: center;line-height: 29px;border: 1px solid #e5e5e5;cursor: pointer;background: #ffffff;box-sizing: border-box;border-right: 1px transparent solid;}
    15. 

  15. .rubik-cube .selected-template-list ul li:last-child {border-right: 1px solid #e5e5e5;}
    16. 

  16. .rubik-cube .selected-template-list ul li img {display: inline-block;}
    17. 

  17. .rubik-cube .selected-template-list ul li div {font-size: 12px;}
    18. 

  18. .rubik-cube .selected-template-layout .layui-input-block {margin-left: 15px;}
    19. 

  19. .rubik-cube .layout { /*clear:both;*/position: relative;}
    20. 

  20. .rubik-cube .layout ul {overflow: hidden;}
    21. 

  21. .rubik-cube .layout li {float: left;color: #909399;border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;position: relative;}
    22. 

  22. .rubik-cube .layout li div.empty {left: 0;text-align: center;width: 100%;position: absolute;top: 50%;margin-top: -26px;}
    23. 

  23. .rubik-cube .layout li div.empty p {margin: 0;line-height: 26px;}
    24. 

  24. /*.rubik-cube .layui-form-item p {margin: 10px 0 10px 94px;color: #909399;font-size: 12px;}*/
    25. 

  25. 

  26. .rubik-cube .image-ad-list { /* margin-left: 10px;margin-bottom: 20px; */margin-top: 15px;}
    27. 

  27. .rubik-cube .image-ad-list > ul > li {width: 100%;padding: 10px;background: #ffffff;border: 1px dashed #CCCCCC;position: relative;margin-top: 15px;box-sizing: border-box;}
    28. 

  28. .rubik-cube .image-ad-list > ul > li:first-child {margin-top: 0;}
    29. 

  29. .rubik-cube .image-ad-list > ul > li .content-block {display: inline-block;width: calc(100% - 78px);font-size: 14px;}
    30. 

  30. .rubik-cube .image-ad-list > ul > li .content-block.textNavigation {width: 100%;}
    31. 

  31. .rubik-cube .image-ad-list > ul > li .content-block .layui-form-item {margin: 0;}
    32. 

  32. .rubik-cube .image-ad-list > ul > li .content-block .layui-form-label {text-align: left;}
    33. 

  33. .rubik-cube .image-ad-list > ul > li .content-block div {margin-top: 10px;}
    34. 

  34. .rubik-cube .image-ad-list > ul > li .content-block div:last-child {margin-top: 0;}
    35. 

  35. 

  36. .rubik-cube .layout li div.have-preview-image {box-sizing: border-box;}
    37. 

  37. .rubik-cube .layout li div.have-preview-image img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
    38. 

  38. 

  39. /*1行2个*/
    40. 

  40. /*预览*/
    41. 

  41. .rubik-cube .preview-draggable ul li.row1-of2 {width: 50%;}
    42. 

  42. .rubik-cube .preview-draggable ul li.row1-of2 div{margin-top: 0 !important;margin-bottom: 0 !important;}
    43. 

  43. .rubik-cube .preview-draggable ul li.row1-of2:nth-child(1) div {margin-left: 0 !important;}
    44. 

  44. .rubik-cube .preview-draggable ul li.row1-of2:nth-child(2) div {margin-right: 0 !important;}
    45. 

  45. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of2:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
    46. 

  46. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of2:nth-child(2) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
    47. 

  47. 

  48. /*编辑*/
    49. 

  49. .rubik-cube .layout li.row1-of2 {width: 49.2%;height: 160px;border-right: 1px transparent solid;}
    50. 

  50. .rubik-cube .layout li.row1-of2:last-child {border-right: 1px solid #e5e5e5;}
    51. 

  51. .rubik-cube .layout li.row1-of2 div.empty {}
    52. 

  52. .rubik-cube .layout li.row1-of2 div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    53. 

  53. 

  54. /*1行3个*/
    55. 

  55. /*预览*/
    56. 

  56. .rubik-cube .preview-draggable ul li.row1-of3 {width: 33.33%;}
    57. 

  57. .rubik-cube .preview-draggable ul li.row1-of3 div{margin-top: 0 !important;margin-bottom: 0 !important;}
    58. 

  58. .rubik-cube .preview-draggable ul li.row1-of3:nth-child(1) div {margin-left: 0 !important;}
    59. 

  59. .rubik-cube .preview-draggable ul li.row1-of3:nth-child(3) div {margin-right: 0 !important;}
    60. 

  60. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
    61. 

  61. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(2) div {border-radius: 10px;}*/
    62. 

  62. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(3) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
    63. 

  63. 

  64. /*编辑*/
    65. 

  65. .rubik-cube .layout li.row1-of3 {width: 32.5%;height: 100px;border-right: 1px transparent solid;}
    66. 

  66. .rubik-cube .layout li.row1-of3:last-child {border-right: 1px solid #bdf;}
    67. 

  67. .rubik-cube .layout li.row1-of3 div.empty {}
    68. 

  68. .rubik-cube .layout li.row1-of3 div.have-preview-image {text-align: center;height: 100%;line-height: 100px;background: #ffffff;}
    69. 

  69. 

  70. /*1行4个*/
    71. 

  71. /*预览*/
    72. 

  72. .rubik-cube .preview-draggable ul li.row1-of4 {width: 25%;}
    73. 

  73. .rubik-cube .preview-draggable ul li.row1-of4 div{margin-top: 0 !important;margin-bottom: 0 !important;}
    74. 

  74. .rubik-cube .preview-draggable ul li.row1-of4:nth-child(1) div {margin-left: 0 !important;}
    75. 

  75. .rubik-cube .preview-draggable ul li.row1-of4:nth-child(4) div {margin-right: 0 !important;}
    76. 

  76. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
    77. 

  77. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(2) div, .rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(3) div {border-radius: 10px;}*/
    78. 

  78. /*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(4) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
    79. 

  79. 

  80. /*编辑*/
    81. 

  81. .rubik-cube .layout li.row1-of4 {width: 24.2%;height: 80px;border-right: 1px transparent solid;}
    82. 

  82. .rubik-cube .layout li.row1-of4:last-child {border-right: 1px solid #bdf;}
    83. 

  83. .rubik-cube .layout li.row1-of4 div.empty {}
    84. 

  84. .rubik-cube .layout li.row1-of4 div.have-preview-image {text-align: center;height: 100%;line-height: 80px;background: #ffffff;}
    85. 

  85. 

  86. /*2左2右*/
    87. 

  87. /*预览*/
    88. 

  88. .rubik-cube .preview-draggable ul li.row2-lt-of2-rt {width: 50%;display: inline-block;}
    89. 

  89. .rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(1) div {margin-top: 0 !important;margin-left: 0 !important;}
    90. 

  90. .rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(2) div {margin-top: 0 !important;margin-right: 0 !important;}
    91. 

  91. .rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(3) div {margin-bottom: 0 !important;margin-left: 0 !important;}
    92. 

  92. .rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(4) div {margin-bottom: 0 !important;margin-right: 0 !important;}
    93. 

  93. /*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}*/
    94. 

  94. /*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(3) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;}*/
    95. 

  95. /*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(2) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
    96. 

  96. /*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(4) div{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}*/
    97. 

  97. 

  98. /*编辑*/
    99. 

  99. .rubik-cube .layout li.row2-lt-of2-rt {width: 49.2%;height: 160px;}
    100. 

  100. .rubik-cube .layout li.row2-lt-of2-rt:nth-child(1) {border-right: 1px transparent solid;border-bottom: 1px transparent solid;}
    101. 

  101. .rubik-cube .layout li.row2-lt-of2-rt:nth-child(2) {border-bottom: 1px transparent solid;}
    102. 

  102. .rubik-cube .layout li.row2-lt-of2-rt:nth-child(3) {border-right: 1px transparent solid;clear: both;}
    103. 

  103. .rubik-cube .layout li.row2-lt-of2-rt div.empty {}
    104. 

  104. .rubik-cube .layout li.row2-lt-of2-rt div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    105. 

  105. 

  106. /*1左2右*/
    107. 

  107. /*预览*/
    108. 

  108. .rubik-cube .preview-draggable ul .template-left, .rubik-cube .preview-draggable ul .template-right {width: 50%;box-sizing: border-box;}
    109. 

  109. .rubik-cube .preview-draggable ul .template-left li div {margin-left: 0 !important;margin-top: 0 !important;margin-bottom: 0 !important;}
    110. 

  110. .rubik-cube .preview-draggable ul .template-right li.row1-lt-of2-rt:nth-child(1) div {margin-top: 0 !important;margin-right: 0 !important;}
    111. 

  111. .rubik-cube .preview-draggable ul .template-right li.row1-lt-of2-rt:nth-child(2) div {margin-right: 0 !important;margin-bottom: 0 !important;}
    112. 

  112. /*.rubik-cube .preview-draggable .border-radius ul .template-left li.row1-lt-of2-rt:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
    113. 

  113. /*.rubik-cube .preview-draggable .border-radius ul .template-right li.row1-lt-of2-rt:nth-child(1) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
    114. 

  114. /*.rubik-cube .preview-draggable .border-radius ul li.row1-lt-of2-rt:nth-child(2) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;}*/
    115. 

  115. 

  116. /*编辑*/
    117. 

  117. .rubik-cube .layout li.row1-lt-of2-rt {width: 49.2%;font-size: 12px;}
    118. 

  118. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(1) {height: 322px;border-right: 1px transparent solid;}
    119. 

  119. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(2) {height: 160px;border-bottom: 1px transparent solid;}
    120. 

  120. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(3) {height: 160px;}
    121. 

  121. .rubik-cube .layout li.row1-lt-of2-rt div.empty {}
    122. 

  122. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(1) div.have-preview-image {text-align: center;height: 100%;line-height: 322px;background: #ffffff;}
    123. 

  123. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(2) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    124. 

  124. .rubik-cube .layout li.row1-lt-of2-rt:nth-child(3) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    125. 

  125. 

  126. /*1上2下*/
    127. 

  127. /*预览*/
    128. 

  128. /*.rubik-cube .preview-draggable ul li.row1-tp-of2-bm{height:130px;line-height: 130px;}*/
    129. 

  129. .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(1) {width: 100%;}
    130. 

  130. .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(2), .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(3) {width: 50%;}
    131. 

  131. .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(1) div {margin-top: 0 !important;margin-left: 0 !important;margin-right: 0 !important;}
    132. 

  132. .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(2) div {margin-left: 0 !important;margin-bottom: 0 !important;}
    133. 

  133. .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(3) div {margin-right: 0 !important;margin-bottom: 0 !important;}
    134. 

  134. /*.rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(1) div{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
    135. 

  135. /*.rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(2) div, .rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(3) div {border-top-left-radius: 10px;border-top-right-radius: 10px;}*/
    136. 

  136. 

  137. /*编辑*/
    138. 

  138. .rubik-cube .layout li.row1-tp-of2-bm {height: 160px;}
    139. 

  139. .rubik-cube .layout li.row1-tp-of2-bm:nth-child(1) {width: 99.4%;border-bottom: 1px transparent solid;}
    140. 

  140. .rubik-cube .layout li.row1-tp-of2-bm:nth-child(2) {width: 49.2%;border-right: 1px transparent solid;}
    141. 

  141. .rubik-cube .layout li.row1-tp-of2-bm:nth-child(3) {width: 49.2%;}
    142. 

  142. .rubik-cube .layout li.row1-tp-of2-bm div.empty {}
    143. 

  143. .rubik-cube .layout li.row1-tp-of2-bm div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    144. 

  144. 

  145. /*1左3右*/
    146. 

  146. /*预览*/
    147. 

  147. .rubik-cube .preview-draggable ul .template-left li.row1-lt-of1-tp-of2-bm {width: 100%;}
    148. 

  148. .rubik-cube .preview-draggable ul .template-bottom {display: flex;justify-content: space-between;align-items: center;}
    149. 

  149. .rubik-cube .preview-draggable ul .template-bottom li {width: 50%;box-sizing: border-box;}
    150. 

  150. .rubik-cube .preview-draggable ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(1) {margin-left: 0 !important;}
    151. 

  151. .rubik-cube .preview-draggable ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(2) {margin-right: 0 !important;}
    152. 

  152. /*.rubik-cube .preview-draggable .border-radius ul .template-left li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
    153. 

  153. /*.rubik-cube .preview-draggable .border-radius ul .template-right .template-top li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
    154. 

  154. /*.rubik-cube .preview-draggable .border-radius ul .template-right .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-radius: 10px;}*/
    155. 

  155. /*.rubik-cube .preview-draggable .border-radius ul .template-right .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(2) div{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}*/
    156. 

  156. 

  157. /*编辑*/
    158. 

  158. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(1) {height: 320px;width: 49.2%;border-right: 1px transparent solid;}
    159. 

  159. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(2) {height: 160px;width: 49.2%;border-bottom: 1px transparent solid;}
    160. 

  160. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(3) {height: 160px;width: 24.2%;border-right: 1px transparent solid;}
    161. 

  161. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(4) {height: 160px;width: 24.2%;}
    162. 

  162. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm div.empty {}
    163. 

  163. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(1) div.have-preview-image {text-align: center;height: 100%;line-height: 320px;background: #ffffff;}
    164. 

  164. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(2) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    165. 

  165. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(3) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    166. 

  166. .rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(4) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
    167. 

  167. 

  168. /*自定义魔方*/
    169. 

  169. .rubik-cube .layout li.custom-rubik-cube {width: 25%;height: 70px;border: 1px solid #e5e5e5;border-left: 1px transparent solid;border-bottom: 1px transparent solid;background: #f8f8f8;box-sizing: border-box;}
    170. 

  170. .rubik-cube .layout li.custom-rubik-cube.border-left {border-left: 1px solid #e5e5e5;}
    171. 

  171. .rubik-cube .layout li.custom-rubik-cube.border-bottom {border-bottom: 1px solid #e5e5e5;}
    172. 

  172. .rubik-cube .layout ul.custom-rubik-cube:last-child li {border-bottom: 1px solid #e5e5e5;}
    173. 

  173. .rubik-cube .layout li.custom-rubik-cube > div {font-size: 20px;color: #bbb;text-align: center;}
    174. 

  174. 

  175. .rubik-cube .layout div.selected-rubik-cube {position: absolute;border: 1px solid #bdf;background: #e8f7fd;text-align: center;color: #88c4dc;font-size: 12px;cursor: pointer;box-sizing: border-box;}
    176. 

  176. .rubik-cube .layout div.selected-rubik-cube .image-url {width: 100%;height: 100%;overflow: hidden;}
    177. 

  177. .rubik-cube .layout div.selected-rubik-cube .image-url img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
    178. 

  178. .rubik-cube .layout div.selected-rubik-cube.selected:hover i {display: block;}
    179. 

  179. .rubik-cube .layout div.selected-rubik-cube.have-image {background: #ffffff;}
    180. 

  180. .rubik-cube .layout div.selected-rubik-cube span {display: block;line-height: 20px;position: absolute;top: 50%;width: 100%;left: 0;margin-top: -10px;}
    181.