Startseite Erkunden Hilfe
Registrieren Anmelden
moonsflyer
/
zhongshen_project
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Branch: master
Branches Tags
zhongshen_proje...
/
public
/
static
/
ext
/
diyview
/
css
/
diyview.css

diyview.css 21 KB
Permalink Verlauf Originalformat

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 
  1. #diyView .layui-form-label.sm{width: 90px;font-size: 13px;}
    2. 

  2. #diyView .layui-form-label.sm + .layui-input-block{margin-left: 100px;}
    3. 

  3. .layui-form-select dl {z-index: 9999;}
    4. 

  4. .layui-btn:hover {opacity: 1;}
    5. 

  5. .footer{display:none;}
    6. 

  6. .top-full-screen .layui-layout-admin .layui-body{top: 0;left: 0;}
    7. 

  7. .layui-layout-admin .layui-body .body-content {min-height: initial;margin: 0;padding-top: 0;padding-bottom: 0; background: #fff;}
    8. 

  8. .position-page-btn {position: absolute;left: 50%;margin-left: 140px;border-color: #f7f8fa;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
    9. 

  9. 

  10. /*快捷操作*/
    11. 

  11. .quick-action{position: absolute;width: 42px;background: #fff;left: 50%;top: 20%;margin-left: 140px;border-radius: 4px;text-align: center;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
    12. 

  12. .quick-action li{position: relative;}
    13. 

  13. .quick-action li i {display: block;text-align: center;font-size: 20px;line-height: 40px;cursor: pointer;}
    14. 

  14. .quick-action li.disabled i{color: #CECECE;/*cursor: not-allowed;*/}
    15. 

  15. .quick-action li span {position: absolute;top: 5px;right: -60px;font-size: 14px;height: 30px;line-height: 30px;padding: 0 10px;background: #fff;border-radius: 4px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);display: none;}
    16. 

  16. .quick-action li:not(.disabled):hover span {display: block;}
    17. 

  17. .quick-action li span:after {content: "";position: absolute;left: -3px;top: 50%;margin-top: -3px;background: #fff;width: 6px;height: 6px;transform: rotate(45deg);}
    18. 

  18. 

  19. @keyframes spin {
    20. 

  20. 	from {
    21. 

  21. 		transform: rotate(0deg);
    22. 

  22. 	}
    23. 

  23. 

  24. 	to {
    25. 

  25. 		transform: rotate(360deg);
    26. 

  26. 	}
    27. 

  27. }
    28. 

  28. 

  29. .loading-layer {width: 400px;height: 525px;position: absolute;z-index: 997;background: #f8f8f8;left: 50%;top: 84px;margin-left: -270px;}
    30. 

  30. .loading-anim {position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
    31. 

  31. .loading-anim > .item {position: relative;width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
    32. 

  32. .loading-anim .out {position: absolute;border-radius: 50%;
    33. 

  33. 	border: 3px solid;top: 15%;left: 15%;width: 70%;height: 70%;
    34. 

  34. 	border-left-color: var(--base-color);
    35. 

  35. 	border-right-color: #C5C5C5;
    36. 

  36. 	border-top-color: var(--base-color);
    37. 

  37. 	border-bottom-color: #C5C5C5;
    38. 

  38. 	animation: spin 0.6s linear normal infinite;
    39. 

  39. 	perspective: 800px;
    40. 

  40. 	transform-style: preserve-3d;
    41. 

  41. 	transition: all 0.2s ease-out;}
    42. 

  42. 

  43. 

  44. /* 顶部风格 */
    45. 

  45. .nav-style {display: flex;flex-wrap: wrap;}
    46. 

  46. .nav-style .text-title {margin-right: 2%;margin-bottom: 15px;width: 32%;height: 100px;line-height: 100px;border: 1px solid #cccc;background-color: #eee;display: inline-block;box-sizing: border-box;}
    47. 

  47. .nav-style .text-title:nth-child(3n+3) {margin-right: 0;}
    48. 

  48. .nav-style .text-title img {width: 100%}
    49. 

  49. 

  50. .template-edit-title {border-bottom: 5px solid #f6f7f9;}
    51. 

  51. .template-edit-title:last-of-type{border-bottom: none;}
    52. 

  52. .template-edit-title h3 {font-size: 14px;padding: 10px;color: #303133;}
    53. 

  53. 

  54. /*颜色选择器*/
    55. 

  55. .colorSelector {display: inline-block;vertical-align: middle;cursor: pointer;border-radius: 2px;width: 38px;}
    56. 

  56. .colorSelector:nth-of-type(2){margin-left: 5px;}
    57. 

  57. .colorSelector div{border-radius: 2px;width: 34px;margin-left: -17px;background-position: initial;}
    58. 

  58. .color-selector-reset {display: inline-block;line-height: 34px;cursor: pointer;margin-left: 10px;}
    59. 

  59. .flexbox-fix-btn {justify-content: center;}
    60. 

  60. .flexbox-fix-btn .btn {width: 40px;line-height: 22px;font-size: 12px;margin: 0;box-sizing: border-box;border-radius: 3px;}
    61. 

  61. .flex {justify-content: space-between;display: flex;align-items: center;}
    62. 

  62. .flex .flex_fill {flex: 1;text-align: right;margin-left: 5px;}
    63. 

  63. .flex .flex_left {display: flex;align-items: center;}
    64. 

  64. .flex .flex_left .curr-color {color: #303133;margin-left: 7px;}
    65. 

  65. .flex .flex_left .curr-color span:first-child{margin-right: 10px;}
    66. 

  66. 

  67. .selected-style {cursor: pointer;float: right;color: #909399;}
    68. 

  68. .selected-style i {font-size: 12px;line-height: 34px;color: #818181;margin-left: 5px;}
    69. 

  69. 

  70. /* 链接地址 */
    71. 

  71. .layui-input-block span.sm {display: flex;line-height: 34px;cursor: pointer;}
    72. 

  72. .layui-input-block span.sm span {display: inline-block;max-width: 130px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    73. 

  73. .layui-input-block span.sm i {margin-left: 5px;font-size: 12px;color: #818181;}
    74. 

  74. .component-links .layui-input-block .sm {float: right;}
    75. 

  75. 

  76. /* 选择icon */
    77. 

  77. .component-icon .layui-input-block .sm {width: 50px;height: 50px;justify-content: space-around;align-items: center;border: 1px solid #CCC;}
    78. 

  78. .component-icon .layui-input-block .sm i{margin: 0;font-size: 16px;}
    79. 

  79. .component-icon .layui-input-block .sm i.js-icon{font-size: 20px;}
    80. 

  80. 

  81. /* 进度条样式 */
    82. 

  82. .layui-input-block {line-height: 34px;min-height: 34px;}
    83. 

  83. .side-process {display: inline-block;margin-right: 15px;margin-left: 5px;width: 260px;vertical-align: middle;}
    84. 

  84. .slide-prompt-text {color: #909399;}
    85. 

  85. .layui-slider-wrap {top: -17px;}
    86. 

  86. .layui-slider {height: 3px;}
    87. 

  87. 

  88. #diyView {position: relative;background: #f7f8fa;padding: 20px 0 0;visibility: hidden;/*min-width: 1300px;*/}
    89. 

  89. 

  90. .custom-save {text-align: center;background: #fff;padding: 15px 400px 15px 290px;}
    91. 

  91. 

  92. .preview-wrap {overflow: hidden;margin-left: 255px;margin-right: 392px;}
    93. 

  93. .preview-wrap .preview-restore-wrap { /*width: 102%;*/margin-right: -12px;visibility: hidden;}
    94. 

  94. .preview-wrap .preview-restore-wrap .div-wrap {overflow: auto;height: 525px;}
    95. 

  95. 

  96. 

  97. .preview-wrap .preview-restore-wrap .diy-view-wrap {width: 375px;background-repeat: no-repeat;background-position-y: 64px;background-size: 100%;margin: 0 auto 20px;border:2px solid #f0f1f3;padding-top: 64px;margin-top: -64px;}
    98. 

  98. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head {height: 64px;width: 375px;}
    99. 

  99. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head > span {background: #fff url(../img/preview_head.png) no-repeat 50%/cover;font-size: 14px;display: block;text-align: center;height: 64px;line-height: 82px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;margin: 0 auto;}
    100. 

  100. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-block {min-height: 400px;}
    101. 

  101. 

  102. /*组件列表*/
    103. 

  103. .component-list {width: 235px;padding: 0 10px;background: #ffffff;float: left;position: absolute;top: 0;overflow: hidden;user-select: none;z-index: 9999;}
    104. 

  104. .component-list .tab{display: flex;margin: 10px 0 5px -10px;}
    105. 

  105. .component-list .tab span{font-weight: normal;font-size: 14px;cursor: pointer;line-height: 40px;flex: 1;text-align: center;position: relative;background: #fff;border-top: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;border-left: 1px solid #f1f1f1;}
    106. 

  106. .component-list .tab span:last-child{border-right: 1px solid #f1f1f1;}
    107. 

  107. .component-list .tab span.selected{background-color: #f1f1f1;}
    108. 

  108. /*.component-list .tab span.selected:after{content: '';border-bottom: 2px solid;position: absolute;left: 50%;bottom: 0;width: 65%;transform: translate(-50%, -50%);}*/
    109. 

  109. .component-list nav {height: 610px;overflow-y: auto;width: 257px;}
    110. 

  110. .component-list h3 {font-size: 14px;/*margin-top: 10px;*/cursor: pointer;line-height: 40px;}
    111. 

  111. .component-list h3 img {width: 16px;margin-right: 5px;}
    112. 

  112. .component-list ul {overflow: hidden;margin: 0;padding: 0;transition: all .3s;opacity: 1;}
    113. 

  113. .component-list ul li {float: left;font-size: 12px;width: 78px;height: 75px;text-align: center;cursor: pointer;position: relative;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
    114. 

  114. .component-list ul li.hot:after {content: '';background: url(../img/hot_component.png) no-repeat center/100%;position: absolute;width: 16px;height: 20px;right: 20%;top: 0;}
    115. 

  115. .component-list ul li.disabled { /*cursor: not-allowed;*/color: #bbb;}
    116. 

  116. .component-list ul li img {width: 42px;margin-top: 11px;}
    117. 

  117. .component-list ul li span:last-child {font-size: 12px;/*color: #909399;*/display: block;margin-top: 5px;}
    118. 

  118. .component-list ul li i{font-size: 23px;margin-bottom: 4px;/*color: #909399;*/margin-top: 14px;display: inline-block;}
    119. 

  119. 

  120. /*预览*/
    121. 

  121. .draggable-element {border: 2px dotted transparent; /*background: #ffffff;position: relative;*/}
    122. 

  122. .draggable-element .preview-draggable { cursor: move;position: relative;}
    123. 

  123. .draggable-element .preview-draggable .preview-box {padding: 0;}
    124. 

  124. .draggable-element.selected {border: 2px solid;}
    125. 

  125. .del {background: #999;color: #FFFFFF;position: absolute;border-radius: 50%;width: 20px;height: 20px;font-size: 12px;font-style: normal;line-height: 18px;text-align: center;right: -10px;top: -10px;cursor: pointer;z-index: 1;display: none;}
    126. 

  126. /*ul li .content-block + .del {right: unset;left: 68px;top: 0;}*/
    127. 

  127. .draggable-element .preview-draggable:hover .del {display: block;}
    128. 

  128. .draggable-element .comp-title{position: absolute;left: -90px;min-width: 70px;min-height: 20px;padding: 4px 7px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);box-sizing: border-box;text-align: center;line-height: 20px;font-size: 12px;background: #fff;border-radius: 2px;top:0;/*top: 50%;margin-top: -14px;*/}
    129. 

  129. 

  130. /*右侧编辑栏*/
    131. 

  131. .edit-attribute {position: absolute;top: 0;right: 0;background: #ffffff;border-top: 1px solid #f7f8fa;width: 370px;padding: 10px;z-index: 1;overflow: hidden;display: none;}
    132. 

  132. .draggable-element.selected .edit-attribute{display: block;}
    133. 

  133. 

  134. /* 选中页面设置 */
    135. 

  135. .page-set-wrap.selected .edit-attribute{display: block;}
    136. 

  136. 

  137. /* 选中弹窗广告组件 */
    138. 

  138. .pop-window-wrap.selected .edit-attribute{display: block;}
    139. 

  139. 

  140. .edit-attribute .attr-wrap {width: 392px;overflow-x: hidden;overflow-y: auto;height: 600px;}
    141. 

  141. .edit-attribute .attr-wrap .restore-wrap {width: 360px;}
    142. 

  142. .edit-attribute .attr-wrap .restore-wrap .layui-form-label {color: #666 !important;}
    143. 

  143. .edit-attribute .attr-wrap .restore-wrap .attr-title {padding: 10px 0 15px 10px;border-bottom: 2px solid #f2f4f6;margin-bottom: 10px;color: #303133;display: flex;justify-content: space-between;align-items: center;}
    144. 

  144. .edit-attribute .attr-wrap .restore-wrap .attr-title .title{font-size: 18px;}
    145. 

  145. .edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap{background-color: #f5f5f5;border-radius: 50px;font-size: 14px;display: flex;}
    146. 

  146. .edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span{cursor: pointer;padding: 5px 15px;border-radius: 50px;}
    147. 

  147. .edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span.active{color: #fff;}
    148. 

  148. 

  149. .edit-attribute .attr-wrap .restore-wrap .layui-form input[type=radio] {display: inline-block;opacity: 0;position: absolute;top: 10px;width: 60px;height: 20px;cursor: pointer;}
    150. 

  150. .edit-attribute .attr-wrap .restore-wrap .img-block {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
    151. 

  151. .edit-attribute .attr-wrap .restore-wrap .img-block > div {position: relative}
    152. 

  152. .edit-attribute .attr-wrap .restore-wrap .img-block > div.del {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
    153. 

  153. .edit-attribute .attr-wrap .restore-wrap .img-block + .content-block {display: inline-block;width: calc(100% - 78px);font-size: 14px;}
    154. 

  154. .edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-form-label.sm {width: 68px !important;}
    155. 

  155. .edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block {margin-left: 78px;}
    156. 

  156. .edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block span.sm {float: right;}
    157. 

  157. .edit-attribute .attr-wrap .restore-wrap .img-block i.add {display: block;font-style: normal;text-align: center;font-size: 26px;min-width: 26px;}
    158. 

  158. .edit-attribute .attr-wrap .restore-wrap .img-block i.del {display: none;}
    159. 

  159. .edit-attribute .attr-wrap .restore-wrap .img-block:hover i.del {display: block;}
    160. 

  160. .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image {width: 66px;height: 64px;border: 1px dashed #e5e5e5;display: inline-block;vertical-align: top;position: relative;line-height: 64px;margin-right: 10px;text-align: center;padding: 0;overflow: hidden}
    161. 

  161. .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div {width: 66px;height: 64px;}
    162. 

  162. .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
    163. 

  163. .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image span {position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 12px;background: rgba(0, 0, 0, .6);color: #ffffff;line-height: initial;cursor: pointer;}
    164. 

  164. .edit-attribute .attr-wrap .restore-wrap .img-block span {font-size: 12px;line-height: 23px;}
    165. 

  165. .layui-btn.layui-btn-primary.sm {margin-top: 5px;padding: 5px 10px !important;height: auto;font-size: 12px;border-radius: 0;vertical-align: baseline;line-height: 1}
    166. 

  166. /*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio {margin-top: 0;line-height: 34px;}*/
    167. 

  167. /*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio:last-child{margin-right: 0;}*/
    168. 

  168. 

  169. /* 单选 */
    170. 

  170. .icon-radio .icon-wrap {float: right;}
    171. 

  171. .icon-radio .icon-wrap li {display: inline-block;width: 50px;height: 32px;line-height: 30px;text-align: center;border: 1px solid #EEEEEE;border-right: 1px solid transparent;cursor: pointer;float: left;box-sizing: border-box;color: #909399;}
    172. 

  172. .icon-radio .icon-wrap li .iconfont.angle{font-size: 14px;}
    173. 

  173. .icon-radio .icon-wrap li:last-child {border-right: 1px solid #EEEEEE;}
    174. 

  174. 

  175. /* 复选 */
    176. 

  176. .checkbox-wrap .layui-form-checkbox, .checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox {float: right;}
    177. 

  177. .checkbox-wrap .layui-form-checkbox[lay-skin=primary] {margin-top: 4px;padding-left: 20px;}
    178. 

  178. .checkbox-wrap .layui-input-inline-checkbox span {color: #666;}
    179. 

  179. .checkbox-wrap .layui-input-block {margin-left: 35px;}
    180. 

  180. .checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox[lay-skin=primary] {margin-top: 8px;}
    181. 

  181. 

  182. /* 图片上传 */
    183. 

  183. .edit-attribute .attr-wrap .restore-wrap .img-upload .img-block {padding: 4px;margin-right: 0;float: right;}
    184. 

  184. .edit-attribute .attr-wrap .restore-wrap  .img-block .operation{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.6);flex-direction: column;display: none;top:0;}
    185. 

  185. .edit-attribute .attr-wrap .restore-wrap  .img-block:hover .operation {display: flex;}
    186. 

  186. .edit-attribute .attr-wrap .restore-wrap  .img-block .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;color: #fff;}
    187. 

  187. .edit-attribute .attr-wrap .restore-wrap  .img-block .iconfont {margin: 0 3px;font-size: 16px!important;}
    188. 

  188. .edit-attribute .attr-wrap .restore-wrap  .img-block .operation .js-replace{line-height: 1;color: #fff;text-align: center;padding: 5px 0;background: rgba(0,0,0,.7);font-size: 12px;}
    189. 

  189. .edit-attribute .attr-wrap .restore-wrap .img-block .icon-wrap:hover .operation{display: block;}
    190. 

  190. .edit-attribute .attr-wrap .restore-wrap  .img-block .upload-img-box:hover .operation{display: block;}
    191. 

  191. .img-upload + .diy-word-aux {margin-left: 15px;}
    192. 

  192. 

  193. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1{}
    194. 

  194. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;font-size: 16px;height: 64px;line-height: 90px;cursor: pointer;}
    195. 

  195. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div span {display: inline-block;padding: 0 15px 0 15px;}
    196. 

  196. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1.center .preview-head-div span{padding-right:20px;width: 160px;margin: 0 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    197. 

  197. 

  198. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2{}
    199. 

  199. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
    200. 

  200. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div span{font-size: 16px;}
    201. 

  201. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 img{margin-right: 15px;max-width:150px;height: 28px;}
    202. 

  202. 

  203. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3{}
    204. 

  204. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
    205. 

  205. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search{padding-right: 100px;display: flex;align-items: center;padding-top: 28px;}
    206. 

  206. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search img {margin-right: 10px;height: 30px;max-width: 85px;}
    207. 

  207. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box {flex:1;width: 80%;height: 30px;display: flex;align-items:center;border-radius:30px;background: rgb(255, 255, 255);color:#909399;line-height: 2.1;border:1px solid #E6E6E6;}
    208. 

  208. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box i {margin-right: 5px;margin-left: 10px;}
    209. 

  209. 

  210. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4{}
    211. 

  211. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;display: flex;}
    212. 

  212. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 span.store-name{margin: 0 5px;font-size: 16px;}
    213. 

  213. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name{display: inline-block;margin: -1px 5px 0;}
    214. 

  214. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name span{background: rgba(0,0,0,.3);font-size: 12px;border-radius: 20px;padding: 5px 10px;}
    215. 

  215. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:first-child{font-size: 18px;}
    216. 

  216. .preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:last-child{font-size: 14px;}
    217. 

  217. 

  218. .diy-word-aux {margin-left: 95px;display: block;margin-top: 5px;color: #B2B2B2;font-size: 12px;line-height: 1.6;}
    219. 

  219. 

  220. .layui-layer-page .layui-layer-content {overflow: auto !important;}
    221. 

  221. .top-full-screen .layui-layout-admin .layui-body{padding-right: 0 !important;width: 100%  !important;margin-left: 0 !important;}
    222. 

  222. .top-full-screen .layui-layout-admin .layui-body .body-wrap{margin-top: 0 !important;}
    223. 

  223. .top-full-screen .custom-save{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;border-bottom: 1px solid #ececec;}
    224. 

  224. /*.top-full-screen .custom-save .layui-btn{background-color: #fff;}*/
    225. 

  225. /*.top-full-screen .cancel-btn{border-color: #ececec;color: #333;}*/
    226. 

  226. /*.top-full-screen .cancel-btn:hover{color: #333;}*/
    227. 

  227. 

  228. .bg-select .bg-select-ul{text-align:right}
    229. 

  229. .bg-select .bg-select-ul li{display:inline-block;width:20px;height:20px;border-radius:3px;border:1px solid #d7d7d7;vertical-align:middle;cursor:pointer;padding:2px;box-sizing:border-box;margin-left:5px}
    230. 

  230. .bg-select .bg-select-ul li div{width:100%;height:100%;border-radius:3px}
    231. 

  231. 

  232. /* 超出单行影藏 */
    233. 

  233. .using-hidden {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    234. 

  234. /* 超出两行影藏 */
    235. 

  235. .multi-hidden {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    236. 

  236. 

  237. /* 商品来源选择 */
    238. 

  238. .source-selected {display: flex;flex-wrap: wrap;}
    239. 

  239. .source-selected .source {flex: 1;}
    240. 

  240. .source-selected .source-item,.template-selected .source-item {width: 46px;height: 32px;text-align: center;border: 1px solid #e5e5e5;padding: 5px;cursor: pointer;background: #ffffff;box-sizing: border-box;border-right: 1px transparent solid;display: flex;align-items: center;justify-content: center;color: #909399;}
    241. 

  241. .source-selected .source-item:last-child,.template-selected .source-item:last-child{border-right: 1px solid #e5e5e5;}
    242. 

  242. 

  243. /* 列表样式 */
    244. 

  244. .list-style .layui-input-block{margin-left: 40px !important;}
    245. 

  245. .template-selected {display: flex;flex-wrap: wrap;margin-left: 50px;}
    246. 

  246. .style-selected{display: flex;flex-wrap: wrap;margin-top: 10px;margin-left: 50px;}
    247. 

  247. .style-selected .layui-form-radio:nth-child(3n){margin-right: 0;}
    248. 

  248. 

  249. /* 图片和图标选择 */
    250. 

  250. .icon-img-upload {width: 66px;height: 66px;font-size: 66px;display: flex;align-items: center;justify-items: center;border: 1px solid #CCCCCC;text-align: center;margin-right: 10px;position: relative;}
    251. 

  251. .icon-img-upload .add {color: var(--base-color);font-size: 26px;margin: 0 auto;width: 66px;height: 66px;line-height: 66px;text-align: center;cursor: pointer;}
    252. 

  252. .icon-img-upload img {max-width: 100%;max-height: 100%;width: 100%;}
    253. 

  253. .icon-img-upload .operation {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);color: #fff;display: none;flex-direction: column;z-index: 5;}
    254. 

  254. .icon-img-upload:hover .operation {display: flex;}
    255. 

  255. .icon-img-upload .operation .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;}
    256. 

  256. .icon-img-upload .operation-warp i {margin: 0 2px;cursor: pointer;}
    257. 

  257. .icon-img-upload .operation .js-replace {height: 24px;color: #fff;background: rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 24px;cursor: pointer;}
    258. 

  258. .common-set .word-aux{margin: 0 0 0 100px;padding: 0;}
    259. 

  259. 

  260. /* 选择图标风格 */
    261. 

  261. .select-icon-style {position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;z-index: 9999;}
    262. 

  262. .select-icon-style .icon-style-wrap {position: absolute;background: #fff;border: 1px solid #ddd;right: 40px;margin-top: 15px;}
    263. 

  263. .select-icon-style .icon-style-wrap iframe {width: 100%;height: 100%;}
    264.